@ripla/godd-mcp 1.0.4-canary.9 → 1.0.4

package/notes/app/src/components/IssueDetailView.test.tsx

@@ -0,0 +1,1118 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent, waitFor, act } from "@testing-library/react";
+import { mockAuthContext } from "@/test/mocks";
+
+vi.mock("@/lib/api", () => ({
+  createIssueApi: vi.fn(),
+  updateIssueApi: vi.fn(),
+  getIssueApi: vi.fn(),
+  listIssueCommentsApi: vi.fn().mockResolvedValue({ comments: [] }),
+  getErrorMessage: vi.fn((e: unknown) => String(e)),
+  isAbortError: vi.fn(() => false),
+}));
+
+vi.mock("@/contexts/AuthContext", () => ({
+  useAuth: () => mockAuthContext({ canEdit: true }),
+}));
+
+const mockShowToast = vi.hoisted(() => vi.fn());
+vi.mock("@/contexts/ToastContext", () => ({
+  useToast: () => ({ showToast: mockShowToast }),
+}));
+
+const triggerPeriodicSync = vi.hoisted(() => vi.fn());
+vi.mock("@/hooks/usePeriodicSync", () => {
+  // 実フック（usePeriodicSync.ts）の挙動を忠実に再現する（#1006 / FileInfoPanel.branch-tab.test.tsx と同方式）。
+  // onSync を ref 捕捉し、effect 依存は実フックと同じ [enabled, intervalMs, skipInitialSync]。
+  // IssueDetailView は skipInitialSync=true（#929）を渡すため、本番同様マウント時の即時 poll は抑制され、
+  // mount では foreground loadIssue のみが走る。これにより従来の mock が注入していた「phantom mount poll」
+  // （本番には存在しない 2 本目の in-flight fetch）が無くなり、triggered poll との競合（#980 / #1031 で
+  // setTimeout flush 緩和していた flaky の根本原因）が解消する。
+  // 非モデル化（意図的）: 実フックの isSyncing（in-flight 中の tick スキップ）/ visibilitychange（非表示中停止）/
+  // setInterval は再現しない。poll は triggerPeriodicSync で明示発火するテストシームのため不要。これらの
+  // 挙動に依存するテストを足す場合は本 mock の拡張が必要（現行テストはいずれも未依存）。
+  // eslint-disable-next-line @typescript-eslint/no-require-imports -- mock factory 制約
+  const { useEffect, useRef } = require("react") as typeof import("react");
+  return {
+    usePeriodicSync: ({
+      onSync,
+      enabled,
+      intervalMs,
+      skipInitialSync,
+    }: {
+      onSync: () => void;
+      enabled: boolean;
+      intervalMs: number;
+      skipInitialSync?: boolean;
+    }) => {
+      const onSyncRef = useRef(onSync);
+      const isInitialMountRef = useRef(true);
+      useEffect(() => {
+        onSyncRef.current = onSync;
+      }, [onSync]);
+      useEffect(() => {
+        // trigger は常に最新 onSync を呼ぶ（mock 差し替え後の closed 応答を確実に拾う）。
+        triggerPeriodicSync.mockImplementation(() => {
+          if (enabled) onSyncRef.current();
+        });
+        const isInitialMount = isInitialMountRef.current;
+        isInitialMountRef.current = false;
+        if (!enabled || intervalMs <= 0) return;
+        if (skipInitialSync && isInitialMount) return;
+        onSyncRef.current();
+      }, [enabled, intervalMs, skipInitialSync]);
+    },
+  };
+});
+
+vi.mock("@/components/FileContentView", () => ({
+  default: ({ content }: { content: string }) => (
+    <div data-testid="file-content-view">{content}</div>
+  ),
+}));
+
+vi.mock("@/components/LabelSelector", () => ({
+  default: ({
+    selected,
+    onLabelsMutated,
+  }: {
+    selected?: string[];
+    onLabelsMutated?: () => void;
+  }) => (
+    <div>
+      <span data-testid="selected-labels">{(selected ?? []).join(",")}</span>
+      <button type="button" data-testid="trigger-label-mutate" onClick={() => onLabelsMutated?.()}>
+        labels
+      </button>
+    </div>
+  ),
+}));
+
+import { createIssueApi, updateIssueApi, getIssueApi } from "@/lib/api";
+import IssueDetailView from "./IssueDetailView";
+
+const mockCreateIssue = vi.mocked(createIssueApi);
+const mockUpdateIssue = vi.mocked(updateIssueApi);
+const mockGetIssue = vi.mocked(getIssueApi);
+
+const MOCK_ISSUE = {
+  number: 123,
+  title: "テスト Issue",
+  body: "本文テスト",
+  state: "open" as const,
+  author: "testuser",
+  assignees: [],
+  comments: 0,
+  createdAt: "2026-05-19T00:00:00Z",
+  updatedAt: "2026-05-19T00:00:00Z",
+  url: "https://github.com/test/repo/issues/123",
+  labels: [],
+};
+
+describe("IssueDetailView — 新規 Issue 作成", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("作成フォームが表示される（isNew=true）", () => {
+    render(
+      <IssueDetailView issueNumber="new" onCreated={vi.fn()} onClose={vi.fn()} />,
+    );
+    expect(screen.getByText("新規 Issue 作成")).toBeTruthy();
+    expect(screen.getByPlaceholderText("Issue のタイトル")).toBeTruthy();
+    expect(screen.getByText("作成")).toBeTruthy();
+  });
+
+  it("タイトル未入力時は作成ボタンが disabled", () => {
+    render(
+      <IssueDetailView issueNumber="new" onCreated={vi.fn()} onClose={vi.fn()} />,
+    );
+    const btn = screen.getByText("作成");
+    expect((btn as HTMLButtonElement).disabled).toBe(true);
+  });
+
+  it("作成成功後にプレビュー画面へ遷移し、onCreated が呼ばれる", async () => {
+    mockCreateIssue.mockResolvedValue(MOCK_ISSUE);
+
+    const onCreated = vi.fn();
+    render(
+      <IssueDetailView issueNumber="new" onCreated={onCreated} onClose={vi.fn()} />,
+    );
+
+    const titleInput = screen.getByPlaceholderText("Issue のタイトル");
+    fireEvent.change(titleInput, { target: { value: "テスト Issue" } });
+
+    await act(async () => {
+      fireEvent.click(screen.getByText("作成"));
+    });
+
+    // プレビュー画面に遷移（編集フォームが消える）
+    await waitFor(() => {
+      expect(screen.queryByText("新規 Issue 作成")).toBeNull();
+    });
+
+    // Issue タイトルがプレビュー表示される
+    expect(screen.getByText("テスト Issue")).toBeTruthy();
+
+    // onCreated コールバックが作成された Issue オブジェクトで呼ばれる
+    expect(onCreated).toHaveBeenCalledWith(MOCK_ISSUE);
+  });
+
+  it("キャンセルボタンで onClose が呼ばれる", () => {
+    const onClose = vi.fn();
+    render(
+      <IssueDetailView issueNumber="new" onCreated={vi.fn()} onClose={onClose} />,
+    );
+    fireEvent.click(screen.getByText("キャンセル"));
+    expect(onClose).toHaveBeenCalledOnce();
+  });
+});
+
+describe("IssueDetailView — 既存 Issue 更新", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockGetIssue.mockResolvedValue(MOCK_ISSUE);
+  });
+
+  it("更新成功後にプレビュー画面へ遷移する（既存の更新と同じ挙動）", async () => {
+    const updatedIssue = { ...MOCK_ISSUE, title: "更新後タイトル" };
+    mockUpdateIssue.mockResolvedValue(updatedIssue);
+
+    render(
+      <IssueDetailView issueNumber={123} onCreated={vi.fn()} onClose={vi.fn()} />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("テスト Issue")).toBeTruthy();
+    });
+
+    fireEvent.click(screen.getByText("編集"));
+
+    const titleInput = screen.getByDisplayValue("テスト Issue");
+    fireEvent.change(titleInput, { target: { value: "更新後タイトル" } });
+
+    await act(async () => {
+      fireEvent.click(screen.getByText("保存"));
+    });
+
+    await waitFor(() => {
+      expect(screen.queryByText("保存")).toBeNull();
+    });
+
+    expect(screen.getByText("更新後タイトル")).toBeTruthy();
+  });
+
+  it("モバイル向けスクロール可能な詳細ルートを使う", async () => {
+    render(
+      <IssueDetailView issueNumber={123} onCreated={vi.fn()} onClose={vi.fn()} />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("テスト Issue")).toBeTruthy();
+    });
+
+    const editButton = screen.getByText("編集");
+    expect(editButton.className).toContain("min-h-11");
+    expect(editButton.className).toContain("touch-manipulation");
+  });
+});
+
+// #708 固有シナリオ
+describe("IssueDetailView — #708 「新規 Issue」ボタンのリセット挙動", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockGetIssue.mockResolvedValue(MOCK_ISSUE);
+  });
+
+  it("既存 Issue 編集・保存後に 'new' でリマウントすると空のフォームが表示される", async () => {
+    const updatedIssue = { ...MOCK_ISSUE, title: "更新後" };
+    mockUpdateIssue.mockResolvedValue(updatedIssue);
+
+    const { unmount } = render(
+      <IssueDetailView issueNumber={123} onCreated={vi.fn()} onClose={vi.fn()} />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("テスト Issue")).toBeTruthy();
+    });
+
+    fireEvent.click(screen.getByText("編集"));
+    const titleInput = screen.getByDisplayValue("テスト Issue");
+    fireEvent.change(titleInput, { target: { value: "更新後" } });
+    await act(async () => {
+      fireEvent.click(screen.getByText("保存"));
+    });
+    await waitFor(() => {
+      expect(screen.queryByText("保存")).toBeNull();
+    });
+
+    // 親コンポーネントが key を変えることでリマウント（「新規 Issue」ボタン相当）
+    unmount();
+    render(
+      <IssueDetailView issueNumber="new" onCreated={vi.fn()} onClose={vi.fn()} />,
+    );
+
+    expect(screen.getByText("新規 Issue 作成")).toBeTruthy();
+    const newTitleInput = screen.getByPlaceholderText("Issue のタイトル") as HTMLInputElement;
+    expect(newTitleInput.value).toBe("");
+  });
+
+  it("新規 Issue フォーム入力途中にリマウントすると空のフォームにリセットされる", () => {
+    const { unmount } = render(
+      <IssueDetailView issueNumber="new" onCreated={vi.fn()} onClose={vi.fn()} />,
+    );
+
+    const titleInput = screen.getByPlaceholderText("Issue のタイトル") as HTMLInputElement;
+    fireEvent.change(titleInput, { target: { value: "途中入力" } });
+    expect(titleInput.value).toBe("途中入力");
+
+    // 「新規 Issue」ボタン再クリック相当（newIssueCounter インクリメント → リマウント）
+    unmount();
+    render(
+      <IssueDetailView issueNumber="new" onCreated={vi.fn()} onClose={vi.fn()} />,
+    );
+
+    const freshInput = screen.getByPlaceholderText("Issue のタイトル") as HTMLInputElement;
+    expect(freshInput.value).toBe("");
+    expect(screen.getByText("新規 Issue 作成")).toBeTruthy();
+  });
+});
+
+describe("IssueDetailView — GitHub 外部変更の同期", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // vi.clearAllMocks() は呼び出し履歴のみ消去し mockResolvedValueOnce のキューは消さないため、
+    // 直前テストで消費し切らなかった once 実装が次テストへ漏れる（#1006）。getIssue は once 連鎖を
+    // 多用するので mockReset で once キュー・実装を明示クリアし、テスト間の汚染を断つ。
+    mockGetIssue.mockReset();
+    mockGetIssue.mockResolvedValue(MOCK_ISSUE);
+  });
+
+  it("syncEnabled=true で mount 直後の即時 poll 後も loading が解除される", async () => {
+    mockGetIssue
+      .mockReset()
+      .mockResolvedValueOnce(MOCK_ISSUE)
+      .mockResolvedValueOnce(MOCK_ISSUE);
+
+    render(
+      <IssueDetailView
+        issueNumber={123}
+        onCreated={vi.fn()}
+        onClose={vi.fn()}
+        syncEnabled
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("テスト Issue")).toBeTruthy();
+    });
+    expect(screen.queryByText("Issue を読み込み中…")).toBeNull();
+  });
+
+  it("ポーリングで state 変化を検知したら onExternalChange を呼ぶ", async () => {
+    const onExternalChange = vi.fn();
+    render(
+      <IssueDetailView
+        issueNumber={123}
+        onCreated={vi.fn()}
+        onClose={vi.fn()}
+        onExternalChange={onExternalChange}
+        syncEnabled
+      />,
+    );
+
+    // #1006: usePeriodicSync の忠実モック（skipInitialSync=true）では mount で foreground loadIssue のみが
+    // 走り、本番に存在しない phantom mount poll が注入されない。これにより #980 / #1031 で問題だった
+    // 「2 本の in-flight fetch（mount poll + triggered poll）の競合」は解消する。
+    await waitFor(() => {
+      expect(screen.getByText("テスト Issue")).toBeTruthy();
+    });
+
+    // issueRef は issue state を追従する passive useEffect（IssueDetailView.tsx:93）で更新されるため、
+    // 描画完了（上の waitFor）後も effect 未実行の瞬間がある。その状態で poll すると pollIssue の
+    // previous=issueRef.current が null となり snapshotChanged=false で onExternalChange が呼ばれない。
+    // poll トリガ前に issueRef=open を確定させる。flush しているのは内側の microtask ではなく act() 境界で、
+    // React 19 + RTL は act 終了時に保留中の passive effect を flush する（CPU 競合下でも決定的）。
+    // この act ラッパを外すと flush されず flaky が再発するため、簡略化しないこと
+    // （本番では poll は interval 後に走るためこの競合は起きない＝テスト固有のタイミング保証）。
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    mockGetIssue.mockImplementation(async () => ({
+      ...MOCK_ISSUE,
+      state: "closed",
+      updatedAt: "2026-06-02T00:00:00Z",
+    }));
+
+    await act(async () => {
+      triggerPeriodicSync();
+    });
+
+    await waitFor(() => {
+      expect(onExternalChange).toHaveBeenCalledWith(
+        expect.objectContaining({ state: "closed" }),
+        { background: true },
+      );
+    });
+  });
+
+  it("poll 中に編集モードへ入るとフォーム入力が上書きされない", async () => {
+    let resolvePoll: ((value: typeof MOCK_ISSUE) => void) | undefined;
+    mockGetIssue
+      .mockResolvedValueOnce(MOCK_ISSUE)
+      .mockImplementationOnce(
+        () =>
+          new Promise((resolve) => {
+            resolvePoll = resolve;
+          }),
+      );
+
+    render(
+      <IssueDetailView
+        issueNumber={123}
+        onCreated={vi.fn()}
+        onClose={vi.fn()}
+        syncEnabled
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("テスト Issue")).toBeTruthy();
+    });
+
+    await act(async () => {
+      triggerPeriodicSync();
+    });
+
+    fireEvent.click(screen.getByText("編集"));
+    const titleInput = screen.getByPlaceholderText("Issue のタイトル") as HTMLInputElement;
+    fireEvent.change(titleInput, { target: { value: "編集中のタイトル" } });
+
+    await act(async () => {
+      resolvePoll?.({
+        ...MOCK_ISSUE,
+        title: "GitHub 側の更新",
+        updatedAt: "2026-06-02T00:00:00Z",
+      });
+      await Promise.resolve();
+    });
+
+    expect(titleInput.value).toBe("編集中のタイトル");
+  });
+
+  it("Issue 切替後は in-flight poll の古い応答を適用しない", async () => {
+    let resolveOldPoll: ((value: typeof MOCK_ISSUE) => void) | undefined;
+    // #1006: phantom mount poll が無くなったため getIssue は load(123) → triggered poll(123, in-flight)
+    // → load(456) の 3 回。2 番目を in-flight poll、3 番目を Issue 456 の load にする。
+    mockGetIssue
+      .mockResolvedValueOnce(MOCK_ISSUE)
+      .mockImplementationOnce(
+        () =>
+          new Promise((resolve) => {
+            resolveOldPoll = resolve;
+          }),
+      )
+      .mockResolvedValueOnce({
+        ...MOCK_ISSUE,
+        number: 456,
+        title: "Issue 456",
+        // 切替先の別 issue は新しい updatedAt を持つ。123 の load が解決済み（issueRef=open）のため、
+        // 同一秒の後退ガード（#979）に掛からないよう新しい updatedAt にして確実に適用させる。
+        updatedAt: "2026-06-02T00:00:00Z",
+      });
+
+    const { rerender } = render(
+      <IssueDetailView
+        issueNumber={123}
+        onCreated={vi.fn()}
+        onClose={vi.fn()}
+        syncEnabled
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("テスト Issue")).toBeTruthy();
+    });
+
+    await act(async () => {
+      triggerPeriodicSync();
+    });
+
+    rerender(
+      <IssueDetailView
+        issueNumber={456}
+        onCreated={vi.fn()}
+        onClose={vi.fn()}
+        syncEnabled
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("Issue 456")).toBeTruthy();
+    });
+
+    await act(async () => {
+      resolveOldPoll?.({
+        ...MOCK_ISSUE,
+        title: "古い Issue 123 の応答",
+      });
+      await Promise.resolve();
+    });
+
+    expect(screen.getByText("Issue 456")).toBeTruthy();
+    expect(screen.queryByText("古い Issue 123 の応答")).toBeNull();
+  });
+
+  it("Issue 切替後は in-flight load の古い応答を適用しない", async () => {
+    let resolveOldLoad: ((value: typeof MOCK_ISSUE) => void) | undefined;
+    mockGetIssue
+      .mockImplementationOnce(
+        () =>
+          new Promise((resolve) => {
+            resolveOldLoad = resolve;
+          }),
+      )
+      .mockResolvedValueOnce({
+        ...MOCK_ISSUE,
+        number: 456,
+        title: "Issue 456",
+      });
+
+    const { rerender } = render(
+      <IssueDetailView issueNumber={123} onCreated={vi.fn()} onClose={vi.fn()} />,
+    );
+
+    rerender(
+      <IssueDetailView issueNumber={456} onCreated={vi.fn()} onClose={vi.fn()} />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("Issue 456")).toBeTruthy();
+    });
+
+    await act(async () => {
+      resolveOldLoad?.({
+        ...MOCK_ISSUE,
+        title: "古い Issue 123 の load 応答",
+      });
+      await Promise.resolve();
+    });
+
+    expect(screen.getByText("Issue 456")).toBeTruthy();
+    expect(screen.queryByText("古い Issue 123 の load 応答")).toBeNull();
+  });
+
+  it("poll でスナップショット・本文が未変化なら onExternalChange を呼ばない", async () => {
+    const onExternalChange = vi.fn();
+    render(
+      <IssueDetailView
+        issueNumber={123}
+        onCreated={vi.fn()}
+        onClose={vi.fn()}
+        onExternalChange={onExternalChange}
+        syncEnabled
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("テスト Issue")).toBeTruthy();
+    });
+
+    // #980: 既定モック（beforeEach の mockResolvedValue(MOCK_ISSUE)）が全 poll で未変化を返すため、
+    // 呼び出し順依存の mockResolvedValueOnce は不要。triggered poll も MOCK_ISSUE のままで決定的。
+    await act(async () => {
+      triggerPeriodicSync();
+    });
+
+    expect(onExternalChange).not.toHaveBeenCalled();
+  });
+
+  it("syncEnabled=false のときポーリングで追加 API を呼ばない（REQ-016-AC-03）", async () => {
+    render(
+      <IssueDetailView
+        issueNumber={123}
+        onCreated={vi.fn()}
+        onClose={vi.fn()}
+        syncEnabled={false}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("テスト Issue")).toBeTruthy();
+    });
+
+    const callCount = mockGetIssue.mock.calls.length;
+
+    await act(async () => {
+      triggerPeriodicSync();
+    });
+
+    expect(mockGetIssue.mock.calls.length).toBe(callCount);
+  });
+
+  it("編集中の label-mutate load は form を上書きせず、in-flight の遅い poll でも snapshot を巻き戻さない（#987）", async () => {
+    let resolvePoll: ((value: typeof MOCK_ISSUE) => void) | undefined;
+    // #1006: phantom mount poll が無いため getIssue は load(1) → triggered poll(2, in-flight 遅延)
+    // → label-mutate load(3, "ラベル更新後") の 3 回。2 番目を in-flight の遅い poll にする。
+    mockGetIssue
+      .mockResolvedValueOnce(MOCK_ISSUE)
+      .mockImplementationOnce(
+        () =>
+          new Promise((resolve) => {
+            resolvePoll = resolve;
+          }),
+      )
+      .mockResolvedValue({
+        ...MOCK_ISSUE,
+        title: "ラベル更新後",
+        updatedAt: "2026-06-02T00:00:00Z",
+      });
+
+    render(
+      <IssueDetailView
+        issueNumber={123}
+        onCreated={vi.fn()}
+        onClose={vi.fn()}
+        syncEnabled
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("テスト Issue")).toBeTruthy();
+    });
+
+    await act(async () => {
+      triggerPeriodicSync();
+    });
+
+    fireEvent.click(screen.getByText("編集"));
+    fireEvent.click(screen.getByTestId("trigger-label-mutate"));
+
+    // #987: 編集中は label-mutate 起因の load（"ラベル更新後"）が成功しても form を上書きしない。
+    // snapshot（issue）は同期するが、入力中の form 値は保持される。
+    await waitFor(() => expect(mockGetIssue).toHaveBeenCalledTimes(3));
+    await act(async () => {
+      await Promise.resolve();
+    });
+    expect(
+      (screen.getByPlaceholderText("Issue のタイトル") as HTMLInputElement).value,
+    ).toBe("テスト Issue");
+
+    // in-flight の遅い poll（取得開始は load より前）が解決しても、編集中は反映されない
+    await act(async () => {
+      resolvePoll?.({
+        ...MOCK_ISSUE,
+        title: "poll の古い応答",
+        updatedAt: "2026-06-02T01:00:00Z",
+      });
+      await Promise.resolve();
+    });
+
+    // 編集中は遅延 poll が editingRef ガードで反映されないため、snapshot は load の "ラベル更新後" を保持。
+    // キャンセルでその snapshot へ戻る（load が反映され、in-flight の遅延 poll では巻き戻らない）。
+    fireEvent.click(screen.getByText("キャンセル"));
+    await waitFor(() => expect(screen.getByText("ラベル更新後")).toBeTruthy());
+    expect(screen.queryByText("poll の古い応答")).toBeNull();
+  });
+
+  it("編集中のラベル変更で再取得した foreground load が更新前(stale)データを返しても巻き戻さない（#978）", async () => {
+    const NEW = { ...MOCK_ISSUE, title: "新しいタイトル", updatedAt: "2026-06-10T00:00:00Z" };
+    const STALE = { ...MOCK_ISSUE, title: "古いタイトル", updatedAt: "2026-05-19T00:00:00Z" };
+    // #1006: phantom mount poll が無いため、初回 foreground load が NEW（updatedAt=2026-06-10）。
+    // onLabelsMutated 起因の再取得（loadIssue）は eventual consistency で更新前(stale)の STALE を返す。
+    mockGetIssue.mockResolvedValueOnce(NEW).mockResolvedValue(STALE);
+
+    render(
+      <IssueDetailView issueNumber={123} onCreated={vi.fn()} onClose={vi.fn()} syncEnabled />,
+    );
+
+    await waitFor(() => expect(screen.getByText("新しいタイトル")).toBeTruthy());
+
+    fireEvent.click(screen.getByText("編集"));
+    await waitFor(() => expect(screen.getByDisplayValue("新しいタイトル")).toBeTruthy());
+
+    // ラベル変更 → loadIssue 再取得（STALE 応答）
+    fireEvent.click(screen.getByTestId("trigger-label-mutate"));
+    await waitFor(() => expect(mockGetIssue).toHaveBeenCalledTimes(2));
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    // stale 応答は反映されず、編集中の表示が更新前タイトルへ巻き戻らない
+    await waitFor(() => expect(screen.getByDisplayValue("新しいタイトル")).toBeTruthy());
+    expect(screen.queryByDisplayValue("古いタイトル")).toBeNull();
+  });
+
+  it("編集中のラベル変更で fresh な loadIssue が走っても入力途中の title/body/selectedLabels を上書きしない（#987 / REQ-016-AC-17）", async () => {
+    // 初回 load + mount 直後の即時 poll は LABELED（labels=["bug"]）。onLabelsMutated 起因の再取得（loadIssue）は
+    // stale でない（より新しい updatedAt）正規応答 FRESH（title/body 変更・labels=["enhancement"]）を返す
+    // （happy path・stale ガードでは防げない経路）。
+    const LABELED = { ...MOCK_ISSUE, labels: [{ name: "bug", color: "d73a4a" }] };
+    const FRESH = {
+      ...MOCK_ISSUE,
+      title: "server タイトル",
+      body: "server 本文",
+      labels: [{ name: "enhancement", color: "a2eeef" }],
+      updatedAt: "2026-06-02T00:00:00Z",
+    };
+    // #1006: phantom mount poll が無いため、初回 load=LABELED、label-mutate load=FRESH の 2 回。
+    mockGetIssue
+      .mockResolvedValueOnce(LABELED)
+      .mockResolvedValue(FRESH);
+
+    render(
+      <IssueDetailView issueNumber={123} onCreated={vi.fn()} onClose={vi.fn()} syncEnabled />,
+    );
+
+    await waitFor(() => expect(screen.getByText("テスト Issue")).toBeTruthy());
+
+    fireEvent.click(screen.getByText("編集"));
+    fireEvent.change(screen.getByPlaceholderText("Issue のタイトル"), {
+      target: { value: "編集中タイトル" },
+    });
+    fireEvent.change(screen.getByPlaceholderText("Issue の詳細を Markdown で記述…"), {
+      target: { value: "編集中本文" },
+    });
+    // 編集開始時点の selectedLabels は issue のラベル（"bug"）
+    expect(screen.getByTestId("selected-labels").textContent).toBe("bug");
+
+    // ラベル変更 → fresh（非 stale）な loadIssue が happy path で成功する
+    fireEvent.click(screen.getByTestId("trigger-label-mutate"));
+    await waitFor(() => expect(mockGetIssue).toHaveBeenCalledTimes(2));
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    // 入力途中の title / body / selectedLabels は server 値（"server タイトル" / "enhancement"）で上書きされない（編集中ガード）
+    expect(
+      (screen.getByPlaceholderText("Issue のタイトル") as HTMLInputElement).value,
+    ).toBe("編集中タイトル");
+    expect(
+      (screen.getByPlaceholderText("Issue の詳細を Markdown で記述…") as HTMLTextAreaElement).value,
+    ).toBe("編集中本文");
+    expect(screen.getByTestId("selected-labels").textContent).toBe("bug");
+  });
+
+  it("より新しい background poll が先に成功したら、後着の古い foreground load では上書きしない（#949 / REQ-016-AC-13）", async () => {
+    const NEWER = { ...MOCK_ISSUE, title: "poll-newer-title" };
+    const STALE = { ...MOCK_ISSUE, title: "stale-load-title" };
+    let resolveLoad: ((value: typeof MOCK_ISSUE) => void) | undefined;
+    let calls = 0;
+    mockGetIssue.mockImplementation(() => {
+      calls += 1;
+      // call1 = foreground 初回 load（後着・保留・古い）
+      if (calls === 1) {
+        return new Promise((resolve) => {
+          resolveLoad = resolve;
+        });
+      }
+      // call2 = triggered background poll（先着・成功・新しい）
+      return Promise.resolve(NEWER);
+    });
+
+    render(
+      <IssueDetailView issueNumber={123} onCreated={vi.fn()} onClose={vi.fn()} syncEnabled />,
+    );
+
+    // #1006: skipInitialSync=true では mount で即時 poll は走らないため、in-flight の foreground load
+    // （call1）が dispatch されたのを待ってから、interval 相当の background poll を明示発火する。
+    // load は保留のまま poll（call2=NEWER）が先に解決する競合を本番忠実に再現する。
+    await waitFor(() => expect(mockGetIssue).toHaveBeenCalledTimes(1));
+    await act(async () => {
+      triggerPeriodicSync();
+    });
+    await waitFor(() => expect(mockGetIssue).toHaveBeenCalledTimes(2));
+
+    // 後着の古い foreground load が解決しても、より新しい poll の結果を上書きしない（freshness 後勝ち）
+    await act(async () => {
+      resolveLoad?.(STALE);
+      await Promise.resolve();
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText("poll-newer-title")).toBeTruthy();
+    });
+    expect(screen.queryByText("stale-load-title")).toBeNull();
+  });
+
+  it("保存成功後は in-flight poll の古い応答を適用しない", async () => {
+    let resolvePoll: ((value: typeof MOCK_ISSUE) => void) | undefined;
+    const savedIssue = {
+      ...MOCK_ISSUE,
+      title: "保存後タイトル",
+      updatedAt: "2026-06-02T00:00:00Z",
+    };
+    // #1006: phantom mount poll が無いため、保存より前に開始する in-flight poll を明示発火する
+    // （call2）。この poll は保存より前の世代なので、後で（より新しい updatedAt の）古い応答で解決しても
+    // freshness ゲート（gen <= appliedGen）で棄却され、保存結果を巻き戻さない。
+    mockGetIssue
+      .mockResolvedValueOnce(MOCK_ISSUE)
+      .mockImplementationOnce(
+        () =>
+          new Promise((resolve) => {
+            resolvePoll = resolve;
+          }),
+      )
+      .mockResolvedValue(savedIssue);
+    mockUpdateIssue.mockResolvedValue(savedIssue);
+
+    render(
+      <IssueDetailView
+        issueNumber={123}
+        onCreated={vi.fn()}
+        onClose={vi.fn()}
+        syncEnabled
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("テスト Issue")).toBeTruthy();
+    });
+
+    await act(async () => {
+      triggerPeriodicSync();
+    });
+
+    fireEvent.click(screen.getByText("編集"));
+
+    await waitFor(() => {
+      expect(screen.getByDisplayValue("テスト Issue")).toBeTruthy();
+    });
+
+    const titleInput = screen.getByPlaceholderText("Issue のタイトル") as HTMLInputElement;
+    fireEvent.change(titleInput, { target: { value: "保存後タイトル" } });
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole("button", { name: "保存" }));
+    });
+
+    await waitFor(() => {
+      expect(mockUpdateIssue).toHaveBeenCalled();
+      expect(screen.getByText("保存後タイトル")).toBeTruthy();
+    });
+
+    await act(async () => {
+      resolvePoll?.({
+        ...MOCK_ISSUE,
+        title: "poll の古い応答",
+        updatedAt: "2026-06-02T01:00:00Z",
+      });
+      await Promise.resolve();
+    });
+
+    expect(screen.getByText("保存後タイトル")).toBeTruthy();
+    expect(screen.queryByText("poll の古い応答")).toBeNull();
+  });
+
+  it("保存後に開始した poll が eventual consistency で更新前データを返しても巻き戻さない（#971）", async () => {
+    const onExternalChange = vi.fn();
+    const SAVED = {
+      ...MOCK_ISSUE,
+      title: "保存後タイトル",
+      updatedAt: "2026-06-10T00:00:00Z",
+    };
+    mockUpdateIssue.mockResolvedValue(SAVED);
+    // 既定 getIssue は更新前（stale）の MOCK_ISSUE（updatedAt=2026-05-19）を返し続ける。
+    // 保存で editing=false になると poll が再有効化され、この stale を取得する。
+    mockGetIssue.mockResolvedValue(MOCK_ISSUE);
+
+    render(
+      <IssueDetailView
+        issueNumber={123}
+        onCreated={vi.fn()}
+        onClose={vi.fn()}
+        onExternalChange={onExternalChange}
+        syncEnabled
+      />,
+    );
+
+    await waitFor(() => expect(screen.getByText("テスト Issue")).toBeTruthy());
+
+    // 編集 → 保存（saved データ表示・foreground 通知1回）
+    fireEvent.click(screen.getByText("編集"));
+    fireEvent.change(screen.getByPlaceholderText("Issue のタイトル"), {
+      target: { value: "保存後タイトル" },
+    });
+    await act(async () => {
+      fireEvent.click(screen.getByRole("button", { name: "保存" }));
+    });
+
+    await waitFor(() => expect(screen.getByText("保存後タイトル")).toBeTruthy());
+    const callsAfterSave = onExternalChange.mock.calls.length;
+
+    // 保存直後に再有効化された poll が stale（更新前 updatedAt）を返す
+    await act(async () => {
+      triggerPeriodicSync();
+      await Promise.resolve();
+    });
+
+    // 巻き戻らず saved データを維持し、spurious な onExternalChange も発火しない
+    expect(screen.getByText("保存後タイトル")).toBeTruthy();
+    expect(screen.queryByText("テスト Issue")).toBeNull();
+    expect(onExternalChange.mock.calls.length).toBe(callsAfterSave);
+
+    // eventual consistency 解消後の poll では通常どおり最新が反映される
+    mockGetIssue.mockResolvedValue({
+      ...SAVED,
+      body: "GitHub 反映後",
+      updatedAt: "2026-06-11T00:00:00Z",
+    });
+    await act(async () => {
+      triggerPeriodicSync();
+      await Promise.resolve();
+    });
+    await waitFor(() => expect(screen.getByText("GitHub 反映後")).toBeTruthy());
+  });
+
+  it("同一 updatedAt で内容が後退する poll は反映せず onExternalChange も呼ばない（#979 / REQ-016-AC-16）", async () => {
+    const onExternalChange = vi.fn();
+    const SAVED = {
+      ...MOCK_ISSUE,
+      title: "保存後タイトル",
+      updatedAt: "2026-06-10T00:00:00Z",
+    };
+    // EC で同一秒（updatedAt 一致）だが内容が後退した（旧タイトル）応答
+    const EQUAL_STALE = {
+      ...MOCK_ISSUE,
+      title: "古いタイトル",
+      updatedAt: "2026-06-10T00:00:00Z",
+    };
+    mockUpdateIssue.mockResolvedValue(SAVED);
+    mockGetIssue.mockResolvedValue(EQUAL_STALE);
+
+    render(
+      <IssueDetailView
+        issueNumber={123}
+        onCreated={vi.fn()}
+        onClose={vi.fn()}
+        onExternalChange={onExternalChange}
+        syncEnabled
+      />,
+    );
+
+    await waitFor(() => expect(screen.getByText("古いタイトル")).toBeTruthy());
+
+    // 編集 → 保存（saved データ updatedAt=2026-06-10・内容前進）
+    fireEvent.click(screen.getByText("編集"));
+    fireEvent.change(screen.getByPlaceholderText("Issue のタイトル"), {
+      target: { value: "保存後タイトル" },
+    });
+    await act(async () => {
+      fireEvent.click(screen.getByRole("button", { name: "保存" }));
+    });
+    await waitFor(() => expect(screen.getByText("保存後タイトル")).toBeTruthy());
+    const callsAfterSave = onExternalChange.mock.calls.length;
+
+    // 保存直後に再有効化された poll が、同一 updatedAt だが内容後退の EQUAL_STALE を返す
+    await act(async () => {
+      triggerPeriodicSync();
+      await Promise.resolve();
+    });
+
+    // 同一秒の stale 読取は反映せず、saved を維持し spurious な onExternalChange も発火しない
+    expect(screen.getByText("保存後タイトル")).toBeTruthy();
+    expect(screen.queryByText("古いタイトル")).toBeNull();
+    expect(onExternalChange.mock.calls.length).toBe(callsAfterSave);
+
+    // 厳密に新しい updatedAt の poll では通常どおり反映（EC 解消後に自己回復）
+    mockGetIssue.mockResolvedValue({
+      ...SAVED,
+      title: "GitHub 反映後",
+      updatedAt: "2026-06-11T00:00:00Z",
+    });
+    await act(async () => {
+      triggerPeriodicSync();
+      await Promise.resolve();
+    });
+    await waitFor(() => expect(screen.getByText("GitHub 反映後")).toBeTruthy());
+  });
+
+  it("クローズ後に開始した poll が eventual consistency で更新前データを返しても巻き戻さない（#971 / REQ-016-AC-14）", async () => {
+    const onExternalChange = vi.fn();
+    const CLOSED = {
+      ...MOCK_ISSUE,
+      state: "closed" as const,
+      updatedAt: "2026-06-10T00:00:00Z",
+    };
+    mockUpdateIssue.mockResolvedValue(CLOSED);
+    mockGetIssue.mockResolvedValue(MOCK_ISSUE);
+
+    render(
+      <IssueDetailView
+        issueNumber={123}
+        onCreated={vi.fn()}
+        onClose={vi.fn()}
+        onExternalChange={onExternalChange}
+        syncEnabled
+      />,
+    );
+
+    await waitFor(() => expect(screen.getByText("テスト Issue")).toBeTruthy());
+    expect(screen.getByRole("button", { name: "クローズ" })).toBeTruthy();
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole("button", { name: "クローズ" }));
+    });
+
+    await waitFor(() => expect(screen.getByRole("button", { name: "再オープン" })).toBeTruthy());
+    const callsAfterClose = onExternalChange.mock.calls.length;
+
+    await act(async () => {
+      triggerPeriodicSync();
+      await Promise.resolve();
+    });
+
+    expect(screen.getByRole("button", { name: "再オープン" })).toBeTruthy();
+    expect(screen.queryByRole("button", { name: "クローズ" })).toBeNull();
+    expect(onExternalChange.mock.calls.length).toBe(callsAfterClose);
+
+    mockGetIssue.mockResolvedValue({
+      ...CLOSED,
+      body: "GitHub 反映後",
+      updatedAt: "2026-06-11T00:00:00Z",
+    });
+    await act(async () => {
+      triggerPeriodicSync();
+      await Promise.resolve();
+    });
+    await waitFor(() => expect(screen.getByText("GitHub 反映後")).toBeTruthy());
+  });
+
+  it("stale poll が appliedGen を消費せず、より早く開始した in-flight poll の正当な結果を棄却しない（#971）", async () => {
+    const SAVED = {
+      ...MOCK_ISSUE,
+      title: "保存後タイトル",
+      updatedAt: "2026-06-10T00:00:00Z",
+    };
+    const CONSOLIDATED = {
+      ...SAVED,
+      body: "GitHub 反映後",
+      updatedAt: "2026-06-11T00:00:00Z",
+    };
+    mockUpdateIssue.mockResolvedValue(SAVED);
+
+    let saved = false;
+    let resolveSlowPoll: ((value: typeof CONSOLIDATED) => void) | undefined;
+    let pollCallsAfterSave = 0;
+
+    mockGetIssue.mockImplementation(() => {
+      if (!saved) return Promise.resolve(MOCK_ISSUE);
+      pollCallsAfterSave += 1;
+      // より早く開始した poll（遅延・整合後データ）
+      if (pollCallsAfterSave === 1) {
+        return new Promise((resolve) => {
+          resolveSlowPoll = resolve;
+        });
+      }
+      // より後に開始した poll（即時・stale）
+      return Promise.resolve(MOCK_ISSUE);
+    });
+
+    render(
+      <IssueDetailView
+        issueNumber={123}
+        onCreated={vi.fn()}
+        onClose={vi.fn()}
+        syncEnabled
+      />,
+    );
+
+    await waitFor(() => expect(screen.getByText("テスト Issue")).toBeTruthy());
+
+    fireEvent.click(screen.getByText("編集"));
+    fireEvent.change(screen.getByPlaceholderText("Issue のタイトル"), {
+      target: { value: "保存後タイトル" },
+    });
+    await act(async () => {
+      fireEvent.click(screen.getByRole("button", { name: "保存" }));
+    });
+    await waitFor(() => expect(screen.getByText("保存後タイトル")).toBeTruthy());
+
+    saved = true;
+    // editing=false で enabled が再有効化され、遅い poll が自動開始される
+    await act(async () => {
+      await Promise.resolve();
+    });
+    // より後に開始した poll が stale を即時返す
+    await act(async () => {
+      triggerPeriodicSync();
+      await Promise.resolve();
+    });
+
+    expect(screen.getByText("保存後タイトル")).toBeTruthy();
+    expect(screen.queryByText("GitHub 反映後")).toBeNull();
+
+    await act(async () => {
+      resolveSlowPoll?.(CONSOLIDATED);
+      await Promise.resolve();
+    });
+    await waitFor(() => expect(screen.getByText("GitHub 反映後")).toBeTruthy());
+  });
+
+  it("保存 API 応答待ち中に in-flight poll が完了しても state を巻き戻さない", async () => {
+    let resolvePoll: ((value: typeof MOCK_ISSUE) => void) | undefined;
+    let resolveUpdate: ((value: typeof MOCK_ISSUE) => void) | undefined;
+    const savedIssue = {
+      ...MOCK_ISSUE,
+      title: "保存後タイトル",
+      updatedAt: "2026-06-02T00:00:00Z",
+    };
+    mockGetIssue
+      .mockResolvedValueOnce(MOCK_ISSUE)
+      .mockImplementationOnce(
+        () =>
+          new Promise((resolve) => {
+            resolvePoll = resolve;
+          }),
+      )
+      .mockResolvedValue(savedIssue);
+    mockUpdateIssue.mockImplementation(
+      () =>
+        new Promise((resolve) => {
+          resolveUpdate = resolve;
+        }),
+    );
+
+    render(
+      <IssueDetailView
+        issueNumber={123}
+        onCreated={vi.fn()}
+        onClose={vi.fn()}
+        syncEnabled
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("テスト Issue")).toBeTruthy();
+    });
+
+    fireEvent.click(screen.getByText("編集"));
+    fireEvent.change(screen.getByPlaceholderText("Issue のタイトル"), {
+      target: { value: "保存後タイトル" },
+    });
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole("button", { name: "保存" }));
+    });
+
+    await act(async () => {
+      resolvePoll?.({
+        ...MOCK_ISSUE,
+        title: "poll の古い応答",
+        updatedAt: "2026-06-02T01:00:00Z",
+      });
+      await Promise.resolve();
+    });
+
+    await act(async () => {
+      resolveUpdate?.(savedIssue);
+      await Promise.resolve();
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText("保存後タイトル")).toBeTruthy();
+    });
+    expect(screen.queryByText("poll の古い応答")).toBeNull();
+  });
+});