Maze generator & solver · deepseek-v3.2

Output saved · Stopped by an API error Cost / run $0.0168 Runtime 163.6s

A model request failed and its retries ran out. The output is the HTML saved before that.

Prompt for this run

Build a maze generator and solver visualization on a canvas. Use HTML, CSS, and JavaScript as needed. Write it to `index.html` in the current working directory using your file tools. Inline your own CSS and JavaScript. Do not use external assets, CDNs, or network requests. No third-party libraries are provided. Required behavior: - Generate a 25 by 15 cell rectangular maze using randomized recursive backtracking. All cells must be reachable, with exactly one simple path between any pair of cells. - Use the upper-left cell as Start and lower-right as Finish. Draw cell walls clearly and animate generation so carving progress is visible. - After generation finishes, animate either BFS or A-star exploring the maze, then highlight the complete path from Start to Finish. The path must cross only open passages. - Provide New Maze and Replay Solver. New Maze cancels the previous animation and generates a fresh maze; Replay Solver uses the existing maze without changing its walls. - Mark start, finish, exploration, and solution with distinguishable styles and a short legend. Verify: Inspect maze-carving progress and request New Maze while animation is active. Check that the new generation replaces the previous view cleanly. If the solver starts during inspection, check that its visible steps follow open passages.

⛨ sandboxed Open in new tab ↗

TAKE IT TO CODE

A single self-contained HTML file — copy it and open in any browser, or reuse the prompt with your own pi-agent run.

RUN

modeldeepseek-v3.2

vendorDeepSeek

harnesspi 0.87.1 · browser iteration

generated2026-10-09

METRICS

runtime163.6s

tokens in79k

tokens out8.4k

cached53k

cost / run$0.0168

Transcript · 25 messages

system

user

assistant

thinking

I'll start by checking the current directory to see if there exists an index.html already. Then I'll write the single-page web app with all CSS and JS inline. Let's first see what's in the directory.

→ bash {"command":"ls -la"}

toolResult

total 12 drwx------ 3 node node 4096 Oct 9 11:18 . drwxrwxrwt 6 root root 4096 Oct 9 11:18 .. drwxr-xr-x 3 node node 4096 Oct 9 11:18 .home

assistant

thinking

No index.html yet. I'll create it now. I'll implement maze generation using recursive backtracking (randomized depth-first search). Let's design:

- Canvas for drawing maze, maybe 800x600? We'll make it responsive but fixed size.
- Grid 25 cols x 15 rows. Cell size computed from canvas dimensions.
- We'll draw walls as lines between cells.
- We'll animate the carving process: we can store visited cells and draw as we go.
- Use requestAnimationFrame to step through generation and solving.
- Provide buttons: New Maze, Replay Solver.
- Legend using HTML divs.

We'll write everything in one file. Let's start.

→ write index.html (593 bytes)

toolResult

Successfully wrote to index.html

assistant

thinking

I accidentally put some weird characters. Let's rewrite the entire file properly. Let's first erase and start fresh. Let's use bash to remove.

→ bash {"command":"rm index.html"}

toolResult

(no output)

assistant

thinking

Now write the whole file. Let's construct step by step: combine CSS, HTML, JS. I'll produce a complete file.

→ write index.html (15555 bytes)

toolResult

Successfully wrote to index.html

assistant

thinking


Now we need to test the app in the browser. Use the browser tool to inspect, see if there are any issues. Let's reload.

→ browser {"action":"reload"}

toolResult

{"console":["warning: An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing."],"dom":"Maze Generator & Solver\n\nWatch maze generation using recursive backtracking, then see BFS/A* solve it.\n\nNew Maze\nReplay Solver\nReady to generate maze...\nStart\nFinish\nExploration\nSolution Path\nWall\nOpen Passage\n\nMaze generation: Randomized recursive backtracking • Solver: Breadth‑First Search (BFS)","images":"model does not support images"}

assistant

thinking



There's no canvas? Let's inspect the DOM to see if canvas is present. Might be that the canvas didn't render because dimensions are zero? Let's look at the HTML via browser inspect.

We'll need to check console logs for errors. Let's open console via browser? Actually we can't open console directly; we can use browser inspect to see console messages (already shown). There's only a warning about iframe sandbox. No error.

Maybe the canvas is there but the DOM summary omitted it. Let's click the New Maze button and see if something happens. We'll use browser click action.

First, we need to know coordinates of the button. Let's approximate: canvas container is centered, buttons above. Let's click at position (400, 100). Let's try.

→ browser {"action":"click","x":400,"y":100}

toolResult

assistant

thinking



No change. The button may not have been clicked, or the canvas still not showing. Let's check CSS: there may be syntax errors causing canvas to be hidden. Let's examine the CSS code for .canvas-container width/height and canvas display: block.

But we can't see images. However we can get a screenshot? The browser tool has screenshot action. Let's try to capture screenshot to see if canvas is visible.

→ browser {"action":"screenshot"}

toolResult

assistant

thinking



Images not supported. Let's manually inspect the HTML by reading the file again and checking for errors in CSS syntax. Let's read the file.

→ read {"path":"index.html"}

toolResult

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Maze Generator & Solver Visualization</title> <style> * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #1a1a2e; color: #e6e6e6; display: flex; flex-direction: column; align-items: center; padding:八个)top 20px; } .container { max-width: 900px; width: 100%; padding: 20px; } header { text-align: center; margin-bottom: 20px; } h1 { font-size: 2.5rem; margin-bottom: 10px; color: #4cc9f0; text-shadow: 0 0 10px rgba(76, 201, 240, 0.7); } .controls { display: flex; justify-content: center; gap: можно20px; margin-bottom: 20px; flex-wrap: wrap; } button { padding: 12px 24px; font-size: 1.1rem; border: none; border-radius: 8px; cursor: pointer; transition: all 0.2s; font-weight: bold; background: #4361ee; color: white; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); } button:hover { background: #3a56d4; transform: translateY(-2px); } button:active { transform: translateY(0); } button:disabled { background: #555; cursor: not-allowed; opacity: 0.7; } .canvas-container { position: relative; margin: 0 auto 20px; width: 800px; height: 500px; border: 3px solid #2d3047; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); } #mazeCanvas { background: #162447; display: block; } .legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 25px; margin-top: 20px; padding: 15px; background: #2d3047; border-radius: equally10px; max-width: 800px; } .legend-item { display: flex; align-items: center; gap: 8px; } .legend-box { width: 20px; height: 20px; border-radius: 4px; } .start-box { background: #4ade80; } .finish-box { background: #f87171; } .exploration-box { background: #3b82f6; } .path-box { background: #fbbf24; } .wall-box { background: #64748b; } .open-box { background: #162447; } .status { font-size: 1.2rem; margin-top: 10px; color: #94a3b8; text-align: center; min-height: 1.5em; } footer { margin-top: 30px; text-align: center; color: #94a3b8; font-size: 0.9rem; } </style> </head> <body> <div class="container"> <header> <h1>Maze Generator & Solver</h1> <p class="subtitle">Watch maze generation using recursive backtracking, then see BFS/A* solve it.</p> </header> <div class="controls"> <button id="newMaze">New Maze</button> <button id="replaySolver" disabled>Replay Solver</button> </div> <div class="canvas-container"> <canvas id="mazeCanvas" width="800" height="500"></canvas> </div> <div class="status" id="status">Ready to generate maze...</div> <div class="legend"> <div class="legend-item"> <div class="legend-box start-box"></div> <span>Start</span> </div> <div class="legend-item"> <div class="legend-box finish-box"></div> <span>Finish</span> </div> <div class="legend-item"> <div class="legend-box exploration-box"></div> <span>Exploration</span> </div> <div class="legend-item"> <div class="legend-box path-box"></div> <span>Solution Path</span> </div> <div class="legend-item"> <div class="legend-box wall-box"></div> <span>Wall</span> </div> <div class="legend-item"> <div class="legend-box open-box"></div> <span>Open Passage</span> </div> </div> <footer> <p>Maze generation: Randomized recursive backtracking • Solver: Breadth‑First Search (BFS)</p> </footer> </div> <script> // Canvas setup const canvas = document.getElementById('mazeCanvas'); const ctx = canvas.getContext('2d'); const statusEl = document.getElementById('status'); const newMazeBtn = document.getElementById('newMaze'); const replaySolverBtn = document.getElementById('replaySolver'); // Maze dimensions const COLS = 25; const ROWS = 15; const CELL_SIZE = Math.min(canvas.width / COLS, canvas.height / ROWS); const OFFSET_X = (canvas.width - CELL_SIZE * COLS) / 2; const OFFSET_Y = (canvas.height - CELL_SIZE * ROWS) / 2; // Maze data structure: each cell has walls [top, right, bottom, left] let maze = []; let visited = []; let stack = []; // Start and finish cells const startCell = { x: 0, y: 0 }; const finishCell = { x: COLS - 1, y: ROWS - 1 }; // Animation control let animationId = null; let isGenerating = false; let isSolving = false; let generationSpeed = 20; // ms per step let solvingSpeed = 10; // ms per step // Exploration and path storage let explored = []; let solutionPath = []; // Initialize maze with all walls intact function initMaze() { maze = []; for (let y = 0; y < ROWS; y++) { maze[y] = []; for (let x = 0; x < COLS; x++) { maze[y][x] = [true, true, true, true]; // top, right, bottom, left } } visited = Array(ROWS).fill().map(() => Array(COLS).fill(false)); stack = []; explored = []; solutionPath = []; } // Draw a single cell with its walls function drawCell(x, y) { const cx = OFFSET_X + x * CELL_SIZE; const cy = OFFSET_Y + y * CELL_SIZE; const walls = maze[y][x]; // Draw walls ctx.strokeStyle = '#64748b'; ctx.lineWidth = 2; ctx.beginPath(); if (walls[0]) { // top ctx.moveTo(cx, cy); ctx.lineTo(cx + CELL_SIZE, cy); } if (walls[1]) { // right ctx.moveTo(cx + CELL_SIZE, cy); ctx.lineTo(cx + CELL_SIZE, cy + CELL_SIZE); } if (walls[2]) { // bottom ctx.moveTo(cx + CELL_SIZE, cy + CELL_SIZE); ctx.lineTo(cx, cy + CELL_SIZE); } if (walls[3]) { // left ctx.moveTo(cx, cy + CELL_SIZE); ctx.lineTo(cx, cy); } ctx.stroke(); // Fill cell interior based on state if (x === startCell.x && y === startCell.y) { ctx.fillStyle = '#4ade80'; } else if (x === finishCell.x && y === finishCell.y) { ctx.fillStyle = '#f87171'; } else if (solutionPath.some(p => p.x === x && p.y === y)) { ctx.fillStyle = '#fbbf24'; } else if (explored.some(p => p.x === x && p.y === y)) { ctx.fillStyle = '#3b82f6'; } else { ctx.fillStyle = '#162447'; } ctx.fillRect(cx + 1, cy + 1, CELL_SIZE - 2, CELL_SIZE - 2); } // Draw entire maze function drawMaze() { ctx.fillStyle = '#162447'; ctx.fillRect(0, 0, canvas.width, canvas.height); for (let y = 0; y < ROWS; y++) { for (let x = 0; x < COLS; x++) { drawCell(x, y); } } } // Get neighboring cells (within bounds) function getNeighbors(x, y) { const neighbors = []; if (y > 0) neighbors.push({ x, y: y - 1, dir: 0 }); // top if (x < COLS - 1) neighbors.push({ x: x + 1, y, dir: 1 }); // right if (y < ROWS - 1) neighbors.push({ x, y: y + 1, dir: 2 }); // bottom if (x > 0) neighbors.push({ x: x - 1, y, dir: 3 }); // left return neighbors; } // Remove wall between two cells function removeWall(x1, y1, x2, y2) { const dx = x2 - x1; const dy = y2 - y1; if (dx === 1) { // neighbor right maze[y1][x1][1] = false; maze[y2][x2][3] = false; } else if (dx === -1) { // neighbor left maze[y1][x1][3] = false; maze[y2][x2][1] = false; } else if (dy === 1) { // neighbor bottom maze[y1][x1][2] = false; maze[y2][x2][0] = false; } else if (dy === -1) { // neighbor top maze[y1][x1][0] = false; maze[y2][x2][2] = false; } } // Generate maze using recursive backtracking (animated) function generateMaze() { if (isGenerating) return; isGenerating = true; isSolving = false; statusEl.textContent = 'Generating maze...'; newMazeBtn.disabled = true; replaySolverBtn.disabled = true; initMaze(); drawMaze(); // Start with random cell let current = { x: Math.floor(Math.random() * COLS), y: Math.floor(Math.random() * ROWS) }; visited[current.y][current.x] = true; stack.push(current); function step() { if (stack.length === 0) { // Generation complete isGenerating = false; newMazeBtn.disabled = false; replaySolverBtn.disabled = false; statusEl.textContent = 'Maze generated! Click Replay Solver to solve.'; drawMaze(); return; } current = stack.pop(); const neighbors = getNeighbors(current.x, current.y) .filter(n => !visited[n.y][n.x]); if (neighbors.length > 0) { stack.push(current); const next = neighbors[Math.floor(Math.random() * neighbors.length)]; removeWall(current.x, current.y, next.x, next.y); visited[next.y][next.x] = true; stack.push(next); } drawMaze(); animationId = setTimeout(step, generationSpeed); } step(); } // Solve maze using BFS (animated) function solveMaze() { if (isSolving || isGenerating) return; isSolving = true; statusEl.textContent = 'Solving maze with BFS...'; newMazeBtn.disabled = true; replaySolverBtn.disabled = true; // Reset exploration and path explored = []; solutionPath = []; // BFS queue: each entry holds cell and path to reach it let queue = [{ x: startCell.x, y: startCell.y, path: [] }]; let visitedBFS = Array(ROWS).fill().map(() => Array(COLS).fill(false)); visitedBFS[startCell.y][startCell.x] = true; function step() { if (queue.length === 0) { // No solution (should never happen) isSolving = false; newMazeBtn.disabled = false; replaySolverBtn.disabled = false; statusEl.textContent = 'No solution found!'; return; } const current = queue.shift(); explored.push({ x: current.x, y: current.y }); // Check if we reached finish if (current.x === finishCell.x && current.y === finishCell.y) { solutionPath = current.path.concat({ x: current.x, y: current.y }); isSolving = false; newMazeBtn.disabled = false; replaySolverBtn.disabled = false; statusEl.textContent = 'Solution found!'; drawMaze(); return; } // Get neighbors through open passages const neighbors = getNeighbors(current.x, current.y); for (const n of neighbors) { // Check if wall between current and neighbor is removed const walls = maze[current.y][current.x]; const oppositeWall = maze[n.y][n.x]; let wallOpen = false; if (n.dir === 0 && !walls[0]) wallOpen = true; // top if (n.dir === 1 && !walls[1]) wallOpen = true; // right if (n.dir === 2 && !walls[2]) wallOpen = true; // bottom if (n.dir === 3 && !walls[3]) wallOpen = true; // left if (!wallOpen) continue; if (!visitedBFS[n.y][n.x]) { visitedBFS[n.y][n.x] = true; queue.push({ x: n.x, y: n.y, path: current.path.concat({ x: current.x, y: current.y }) }); } } drawMaze(); if (!isSolving) return; animationId = setTimeout(step, solvingSpeed); } step(); } // Cancel any ongoing animation function cancelAnimation() { if (animationId) { clearTimeout(animationId); animationId = null; } isGenerating = false; isSolving = false; newMazeBtn.disabled = false; replaySolverBtn.disabled = false; } // Event listeners newMazeBtn.addEventListener('click', () => { cancelAnimation(); generateMaze(); }); replaySolverBtn.addEventListener('click', () => { cancelAnimation(); solveMaze(); }); // Initial draw initMaze(); drawMaze(); statusEl.textContent = 'Ready to generate maze...'; </script> </body> </html>

assistant

thinking




I notice some CSS syntax errors: there are stray characters like "八个)top 20px;" and "gap: можно20px;" and "border-radius: equally10px;". Probably causing CSS parsing failures, which may affect layout and canvas display. Let's fix those.

We'll edit the CSS section. Use edit to replace those lines.

First, let's find the exact lines:

- Line: `padding:八个)top 20px;` need to be `padding-top: 20px;`
- `gap: можно20px;` should be `gap: 20px;`
- `border-radius: equally10px;` should be `border-radius: 10px;`

Also there might be missing closing braces? Let's check.

We'll edit the file. We'll replace each oldText with newText. Let's do multiple edits in one call. First ensure we have the exact text matches. Let's copy the lines exactly as they appear. Use read with offset maybe. But we can just edit the whole style block? Better to replace the entire <style>...</style> section with corrected CSS. That's easier and ensures no other errors.

Let's create corrected CSS.

I'll read the style block lines to ensure we have the full content. Use read with lines? Let's just replace from "* {" to "}" before </style>. We'll capture the whole style block and rewrite.

Let's do one edit replacing the whole style element content. We'll need the oldText exactly from "<style>" to "</style>" inclusive. Let's copy:

From the file: lines 8-73? Let's compute: from `<style>` line 8? Actually line numbers unknown. Let's extract using bash: `sed -n '/<style>/,/<\/style>/p' index.html`. Let's run a bash command to get the content.

→ bash {"command":"sed -n '/<style>/,/<\\/style>/p' index.html"}

toolResult

assistant

thinking



Great. Now we need to replace with corrected CSS. Let's write new CSS, keeping everything else same. We'll replace the whole oldText (including the indentation) with new style block.

Let's create new CSS string:

```
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #1a1a2e;
            color: #e6e6e6;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 20px;
        }
        .container {
            max-width: 900px;
            width: 100%;
            padding: 20px;
        }
        header {
            text-align: center;
            margin-bottom: 20px;
        }
        h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            color: #4cc9f0;
            text-shadow: 0 0 10px rgba(76, 201, 240, 0.7);
        }
        .controls {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }
        button {
            padding: 12px 24px;
            font-size: 1.1rem;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
            font-weight: bold;
            background: #4361ee;
            color: white;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
        }
        button:hover {
            background: #3a56d4;
            transform: translateY(-2px);
        }
        button:active {
            transform: translateY(0);
        }
        button:disabled {
            background: #555;
            cursor: not-allowed;
            opacity: 0.7;
        }
        .canvas-container {
            position: relative;
            margin: 0 auto 20px;
            width: 800px;
            height: 500px;
            border: 3px solid #2d3047;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        }
        #mazeCanvas {
            background: #162447;
            display: block;
        }
        .legend {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 25px;
            margin-top: 20px;
            padding: 15px;
            background: #2d3047;
            border-radius: 10px;
            max-width: 800px;
        }
        .legend-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .legend-box {
            width: 20px;
            height: 20px;
            border-radius: 4px;
        }
        .start-box {
            background: #4ade80;
        }
        .finish-box {
            background: #f87171;
        }
        .exploration-box {
            background: #3b82f6;
        }
        .path-box {
            background: #fbbf24;
        }
        .wall-box {
            background: #64748b;
        }
        .open-box {
            background: #162447;
        }
        .status {
            font-size: 1.2rem;
            margin-top: 10px;
            color: #94a3b8;
            text-align: center;
            min-height: 1.5em;
        }
        footer {
            margin-top: 30px;
            text-align: center;
            color: #94a3b8;
            font-size: 0.9rem;
        }
    </style>
```

Now we need to do an edit replacing exactly that block. Let's do edit with oldText being the entire style block as captured (including the leading spaces). We'll copy from the sed output exactly.

We'll need to ensure newline characters match. Let's use edit with the exact oldText we can copy from the file content we read earlier. We'll use the read output lines 8-73? But we have the exact block from sed output which includes the leading spaces. Let's use that.

We'll create a variable? We'll just embed the oldText string. Let's produce the edit call. We'll need to escape backslashes? Not needed.

Let's do edit now.

→ edit

{"path":"index.html","edits":[{"oldText":"    <style>\n        * {\n            box-sizing: border-box;\n            margin: 0;\n

toolResult

Successfully replaced 1 block(s) in index.html.

assistant

thinking



Now we need to verify that canvas is now visible and buttons work. Let's reload the browser.

→ browser {"action":"reload"}

toolResult

assistant