作らせる前に、これを置く
— AIが自分でブラウザを開いて、自分のコードを落とすまで

mkdir -p ~/project/develop/"20260908 pixel-harness" && cd $_
npm init playwright@latest -- --quiet --browser=chromium --lang=ts

rm -rf tests-examples tests/example.spec.ts

mkdir -p app
echo '<!doctype html><meta charset="utf-8"><title>pixel</title>' > app/index.html

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  testMatch: /pixel\.spec\.ts$/,
  use: { baseURL: 'http://localhost:5174' },
  webServer: {
    command: 'python3 -m http.server 5174 --directory app',
    url: 'http://localhost:5174',
    reuseExistingServer: true,
  },
  projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
});

import { test, expect, type Page, type BrowserContext } from '@playwright/test';

// 契約: pixel-grid / pixel-cell / color-swatch / pixel-save
const RED  = 'rgb(231, 76, 60)';
const BLUE = 'rgb(52, 152, 219)';
const WHITE = 'rgb(255, 255, 255)';

async function paint(page: Page, color: string, cells: number[]) {
  await page.locator(`[data-testid="color-swatch"][data-color="${color}"]`).click();
  for (const i of cells) {
    await page.locator(`[data-testid="pixel-cell"][data-i="${i}"]`).click();
  }
}

// ★★ここが受入条件の肝★★
//   同じタブの再読み込みでは、壊れた実装でも絵が残ってしまう（実測）。
//   さらに、元のタブを開いたままだと「新しいタブ」でも残ってしまう。
//   ユーザーが実際にやるのは「閉じて、あとで開き直す」。だからそれを再現する。
async function closeAndReopen(ctx: BrowserContext, page: Page) {
  await page.close();                 // ← 作った本人（元の文書）が居なくなる
  const fresh = await ctx.newPage();
  await fresh.goto('/');
  await fresh.waitForTimeout(400);
  return fresh;
}

test('塗った色が、閉じて開き直しても同じマスに残る', async ({ context }) => {
  const page = await context.newPage();
  await page.goto('/');
  await paint(page, '#e74c3c', [0, 17, 34]);
  await page.getByTestId('pixel-save').click();
  await page.waitForTimeout(300);

  const fresh = await closeAndReopen(context, page);
  for (const i of [0, 17, 34]) {
    await expect(fresh.locator(`[data-testid="pixel-cell"][data-i="${i}"]`))
      .toHaveCSS('background-color', RED);
  }
});

test('複数の色を使っても、全部そのまま残る', async ({ context }) => {
  const page = await context.newPage();
  await page.goto('/');
  await paint(page, '#e74c3c', [5, 6]);
  await paint(page, '#3498db', [20, 21]);
  await page.getByTestId('pixel-save').click();
  await page.waitForTimeout(300);

  const fresh = await closeAndReopen(context, page);
  await expect(fresh.locator('[data-testid="pixel-cell"][data-i="5"]')).toHaveCSS('background-color', RED);
  await expect(fresh.locator('[data-testid="pixel-cell"][data-i="21"]')).toHaveCSS('background-color', BLUE);
});

test('塗っていないマスは、白のままになっている', async ({ context }) => {
  const page = await context.newPage();
  await page.goto('/');
  await paint(page, '#e74c3c', [0]);
  await page.getByTestId('pixel-save').click();
  await page.waitForTimeout(300);

  const fresh = await closeAndReopen(context, page);
  await expect(fresh.locator('[data-testid="pixel-cell"][data-i="255"]')).toHaveCSS('background-color', WHITE);
});

test('マス目と色パレットが、仕様どおり並んでいる', async ({ page }) => {
  await page.goto('/');
  await expect(page.getByTestId('pixel-grid')).toBeVisible();
  await expect(page.getByTestId('pixel-cell')).toHaveCount(256);   // 16×16
  await expect(page.getByTestId('color-swatch')).toHaveCount(8);
  await expect(page.getByTestId('pixel-save')).toBeVisible();

  // ★数だけ数えても足りない。「16個で1行」に並んでいるかまで見る
  //   （256個を1列に並べた実装でも、数えるだけなら通ってしまう）
  const box = async (i: number) =>
    (await page.locator(`[data-testid="pixel-cell"][data-i="${i}"]`).boundingBox())!;
  const [c0, c15, c16] = [await box(0), await box(15), await box(16)];
  expect(c15.y).toBeCloseTo(c0.y, 0);        // 0 と 15 は同じ行
  expect(c16.y).toBeGreaterThan(c0.y);       // 16 は次の行
  expect(c16.x).toBeCloseTo(c0.x, 0);        // 16 は行の先頭に戻る

  // ★色も「8個あるか」ではなく「8色とも違うか」を見る（赤・青・白×6 でも数は合う）
  const colors = await page.getByTestId('color-swatch').evaluateAll(
    els => els.map(e => (e as HTMLElement).dataset.color));
  expect(new Set(colors).size).toBe(8);
});

test('ドラッグでなぞると、通った道が続けて塗れる', async ({ page }) => {
  await page.goto('/');
  await page.locator('[data-testid="color-swatch"][data-color="#3498db"]').click();

  // 横に3マスなぞる（押したまま動かして離す）
  const cells = [100, 101, 102].map(i => page.locator(`[data-testid="pixel-cell"][data-i="${i}"]`));
  const first = await cells[0].boundingBox();
  await page.mouse.move(first!.x + first!.width / 2, first!.y + first!.height / 2);
  await page.mouse.down();
  for (const c of cells.slice(1)) {
    const b = await c.boundingBox();
    await page.mouse.move(b!.x + b!.width / 2, b!.y + b!.height / 2);
  }
  await page.mouse.up();

  for (const c of cells) await expect(c).toHaveCSS('background-color', BLUE);
});

書ける場所: このフォルダの中だけ。それ以外には書かない
触らないもの: 保存や履歴の操作／設定ファイルを開いて読む／頼んでいない変更や削除
迷ったとき: 止まらずに進めて、置いた前提を最後に書き残す
報告の形式: 何をしたか・変更したファイル・実行した検証コマンドと結果

app/ に、ドット絵エディタを作ってください。

要件:
- 16×16 のマス目を並べる
- 色のパレットから色を選べる（8色）
- マスをクリック、またはドラッグでなぞると、その色で塗れる
- 「保存」ボタンで、描いた絵を保存できる
- ブラウザを閉じて開き直しても、描いた絵がそのまま残っている
- 依存パッケージは追加しない。app/index.html だけで完結させる（素の HTML / CSS / JS）
- 保存先は localStorage を使う（受入テストがそれを前提にしている）

完了条件:
- `npx playwright test` が全部緑になること
- テストは tests/pixel.spec.ts に既にある。テストは修正しないこと。テストに合わせて実装すること

npx playwright test --headed

rsync -a --exclude node_modules --exclude 'app/index.html' \
  ~/project/develop/"20260908 pixel-harness"/ \
  ~/project/develop/"20260908 pixel-harness-codex"/
cd ~/project/develop/"20260908 pixel-harness-codex"
echo '<!doctype html><meta charset="utf-8"><title>pixel</title>' > app/index.html

# ★配信ポートを 5175 へ変える（これを忘れると、さっきのフォルダを検証してしまう）
sed -i '' 's/5174/5175/g' playwright.config.ts

cat > 依頼文.md <<'EOF'
書ける場所: このフォルダの中だけ。それ以外には書かない
触らないもの: 保存や履歴の操作／設定ファイルを開いて読む／頼んでいない変更や削除
迷ったとき: 止まらずに進めて、置いた前提を最後に書き残す
報告の形式: 何をしたか・変更したファイル・実行した検証コマンドと結果

app/ に、ドット絵エディタを作ってください。

要件:
- 16×16 のマス目を並べる
- 色のパレットから色を選べる（8色）
- マスをクリック、またはドラッグでなぞると、その色で塗れる
- 「保存」ボタンで、描いた絵を保存できる
- ブラウザを閉じて開き直しても、描いた絵がそのまま残っている
- 依存パッケージは追加しない。app/index.html だけで完結させる（素の HTML / CSS / JS）
- 保存先は localStorage を使う（受入テストがそれを前提にしている）

完了条件:
- `npx playwright test` が全部緑になること
- テストは tests/pixel.spec.ts に既にある。テストは修正しないこと。テストに合わせて実装すること
EOF

# ① まず既定のまま渡す（ネットワークの指定をしない）
cd ~/project/develop/"20260908 pixel-harness-codex"
codex exec --skip-git-repo-check -m gpt-6-astra \
  --sandbox workspace-write \
  "$(cat 依頼文.md)"

# ② ネットワークを開けて、同じ依頼をもう一度（足すのはこの1行だけ）
codex exec --skip-git-repo-check -m gpt-6-astra \
  --sandbox workspace-write \
  -c sandbox_workspace_write.network_access=true \
  "$(cat 依頼文.md)"

書ける場所: このフォルダの中だけ。それ以外には書かない
触らないもの: 保存や履歴の操作／設定ファイルを開いて読む／頼んでいない変更や削除
迷ったとき: 止まらずに進めて、置いた前提を最後に書き残す
報告の形式: 何をしたか・変更したファイル・実行した検証コマンドと結果

これから【 作りたいもの 】を作ります。
ただし今回は、アプリのコードは1行も書かないでください。
先に「何ができたら合格か」だけを、実行できるテストとして書いてください。

書き方のルール:
- 画面の要素には data-testid を付ける前提で書く。テストからはその名前だけで触る
- テスト名は日本語で「何ができたら合格か」がそのまま読める文にする
- 次の3種類を必ず入れる:
  1. 見た目や構造が仕様どおりか（数だけでなく、並び方や重複も見る）
  2. ユーザーの主な操作が実際にできるか
  3. 【 いったん閉じて開き直しても / 再起動しても 】、状態が残っているか

満たしてほしいこと:
- 「要素が存在する」だけで通らないようにする。中身まで確かめる
- 一度きりの確認ではなく、本当にユーザーがやる手順を再現する
- テストの前提（保存先など）が決まっているなら、コメントに明記する

できたら、テストを実行して「全部赤になること」を報告してください。
アプリがまだ無いので、赤になるのが正しい状態です。

【 STEP 0 の4行をここに貼る 】

【 作りたいもの 】を作ってください。

要件:
- 【 箇条書きで。テストと矛盾しないように書く 】
- 依存パッケージは追加しない（増やすなら理由を報告に書く）
- 【 保存先・使う技術の指定があればここに書く 】

完了条件:
- 受入テストが全部緑になること
- テストは既にある。テストは修正しないこと。テストに合わせて実装すること
- 赤が出たら、出力を読んで自分で直してから、もう一度実行すること