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

package/notes/app/src/hooks/usePeriodicSync.test.ts

@@ -0,0 +1,244 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { renderHook } from "@testing-library/react";
+import { usePeriodicSync } from "./usePeriodicSync";
+
+describe("usePeriodicSync", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    Object.defineProperty(document, "visibilityState", {
+      configurable: true,
+      value: "visible",
+    });
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("enabled 時に interval ごとに onSync を呼ぶ", () => {
+    const onSync = vi.fn();
+    renderHook(() =>
+      usePeriodicSync({ enabled: true, intervalMs: 10_000, onSync }),
+    );
+
+    expect(onSync).toHaveBeenCalledTimes(1);
+    vi.advanceTimersByTime(10_000);
+    expect(onSync).toHaveBeenCalledTimes(2);
+  });
+
+  it("disabled 時は onSync を呼ばない", () => {
+    const onSync = vi.fn();
+    renderHook(() =>
+      usePeriodicSync({ enabled: false, intervalMs: 10_000, onSync }),
+    );
+
+    vi.advanceTimersByTime(30_000);
+    expect(onSync).not.toHaveBeenCalled();
+  });
+
+  it("タブ非表示中は interval でも onSync しない", () => {
+    const onSync = vi.fn();
+    renderHook(() =>
+      usePeriodicSync({ enabled: true, intervalMs: 10_000, onSync }),
+    );
+
+    onSync.mockClear();
+    Object.defineProperty(document, "visibilityState", {
+      configurable: true,
+      value: "hidden",
+    });
+    vi.advanceTimersByTime(10_000);
+    expect(onSync).not.toHaveBeenCalled();
+  });
+
+  it("タブ再表示時に onSync する", () => {
+    const onSync = vi.fn();
+    renderHook(() =>
+      usePeriodicSync({ enabled: true, intervalMs: 10_000, onSync }),
+    );
+
+    onSync.mockClear();
+    Object.defineProperty(document, "visibilityState", {
+      configurable: true,
+      value: "hidden",
+    });
+    document.dispatchEvent(new Event("visibilitychange"));
+    expect(onSync).not.toHaveBeenCalled();
+
+    Object.defineProperty(document, "visibilityState", {
+      configurable: true,
+      value: "visible",
+    });
+    document.dispatchEvent(new Event("visibilitychange"));
+    expect(onSync).toHaveBeenCalledTimes(1);
+  });
+
+  it("skipInitialSync 時は初回マウントの即時 sync を行わない", () => {
+    const onSync = vi.fn();
+    renderHook(() =>
+      usePeriodicSync({
+        enabled: true,
+        intervalMs: 10_000,
+        onSync,
+        skipInitialSync: true,
+      }),
+    );
+
+    expect(onSync).not.toHaveBeenCalled();
+  });
+
+  it("skipInitialSync でも interval では onSync する", () => {
+    const onSync = vi.fn();
+    renderHook(() =>
+      usePeriodicSync({
+        enabled: true,
+        intervalMs: 10_000,
+        onSync,
+        skipInitialSync: true,
+      }),
+    );
+
+    vi.advanceTimersByTime(10_000);
+    expect(onSync).toHaveBeenCalledTimes(1);
+  });
+
+  it("skipInitialSync でもタブ再表示時は onSync する", () => {
+    const onSync = vi.fn();
+    renderHook(() =>
+      usePeriodicSync({
+        enabled: true,
+        intervalMs: 10_000,
+        onSync,
+        skipInitialSync: true,
+      }),
+    );
+
+    Object.defineProperty(document, "visibilityState", {
+      configurable: true,
+      value: "hidden",
+    });
+    document.dispatchEvent(new Event("visibilitychange"));
+    Object.defineProperty(document, "visibilityState", {
+      configurable: true,
+      value: "visible",
+    });
+    document.dispatchEvent(new Event("visibilitychange"));
+    expect(onSync).toHaveBeenCalledTimes(1);
+  });
+
+  it("skipInitialSync でも後から enabled が有効化された場合は即時 sync する", () => {
+    const onSync = vi.fn();
+    const { rerender } = renderHook(
+      ({ enabled }) =>
+        usePeriodicSync({
+          enabled,
+          intervalMs: 10_000,
+          onSync,
+          skipInitialSync: true,
+        }),
+      { initialProps: { enabled: false } },
+    );
+
+    expect(onSync).not.toHaveBeenCalled();
+
+    rerender({ enabled: true });
+    expect(onSync).toHaveBeenCalledTimes(1);
+  });
+
+  it("非同期 onSync が in-flight の間は interval で並列実行しない（#937）", async () => {
+    let resolveSync: (() => void) | undefined;
+    const onSync = vi.fn(
+      () =>
+        new Promise<void>((resolve) => {
+          resolveSync = resolve;
+        }),
+    );
+    renderHook(() =>
+      usePeriodicSync({ enabled: true, intervalMs: 10_000, onSync }),
+    );
+
+    // 初回即時 sync で 1 回呼ばれ in-flight になる
+    expect(onSync).toHaveBeenCalledTimes(1);
+
+    // in-flight 中は interval が複数回発火しても並列実行しない
+    await vi.advanceTimersByTimeAsync(30_000);
+    expect(onSync).toHaveBeenCalledTimes(1);
+
+    // 前回 onSync 完了後は次回 interval で実行される
+    resolveSync?.();
+    await Promise.resolve();
+    await Promise.resolve();
+    await vi.advanceTimersByTimeAsync(10_000);
+    expect(onSync).toHaveBeenCalledTimes(2);
+  });
+
+  it("非同期 onSync が in-flight の間はタブ再表示でも並列実行しない（#937）", async () => {
+    let resolveSync: (() => void) | undefined;
+    const onSync = vi.fn(
+      () =>
+        new Promise<void>((resolve) => {
+          resolveSync = resolve;
+        }),
+    );
+    renderHook(() =>
+      usePeriodicSync({ enabled: true, intervalMs: 10_000, onSync }),
+    );
+
+    expect(onSync).toHaveBeenCalledTimes(1); // 初回即時 sync（in-flight）
+
+    // in-flight 中の visibility 復帰では再実行しない
+    Object.defineProperty(document, "visibilityState", { configurable: true, value: "hidden" });
+    document.dispatchEvent(new Event("visibilitychange"));
+    Object.defineProperty(document, "visibilityState", { configurable: true, value: "visible" });
+    document.dispatchEvent(new Event("visibilitychange"));
+    expect(onSync).toHaveBeenCalledTimes(1);
+
+    // 完了後の visibility 復帰では実行する
+    resolveSync?.();
+    await Promise.resolve();
+    await Promise.resolve();
+    Object.defineProperty(document, "visibilityState", { configurable: true, value: "hidden" });
+    document.dispatchEvent(new Event("visibilitychange"));
+    Object.defineProperty(document, "visibilityState", { configurable: true, value: "visible" });
+    document.dispatchEvent(new Event("visibilitychange"));
+    expect(onSync).toHaveBeenCalledTimes(2);
+  });
+
+  it("同期 onSync は in-flight ガードの影響を受けず毎 interval 実行する", () => {
+    const onSync = vi.fn(); // void 返却（同期）
+    renderHook(() =>
+      usePeriodicSync({ enabled: true, intervalMs: 10_000, onSync }),
+    );
+
+    expect(onSync).toHaveBeenCalledTimes(1); // 初回即時
+    vi.advanceTimersByTime(30_000);
+    expect(onSync).toHaveBeenCalledTimes(4); // 初回 + interval 3 回
+  });
+
+  it("in-flight 中に enabled 再有効化で再setup された場合は即時 sync を抑止しない（#937 / PR #953）", () => {
+    let resolveSync: (() => void) | undefined;
+    const onSync = vi.fn(
+      () =>
+        new Promise<void>((resolve) => {
+          resolveSync = resolve;
+        }),
+    );
+    const { rerender } = renderHook(
+      ({ enabled }) => usePeriodicSync({ enabled, intervalMs: 10_000, onSync }),
+      { initialProps: { enabled: true } },
+    );
+
+    // enabled=true の初回即時 sync で in-flight（未 resolve のまま）
+    expect(onSync).toHaveBeenCalledTimes(1);
+
+    // 前回 onSync が in-flight のまま enabled を false→true へトグル（effect 再setup）
+    rerender({ enabled: false });
+    rerender({ enabled: true });
+
+    // in-flight 追跡が effect スコープのため、再setup 直後の即時 sync は抑止されない
+    expect(onSync).toHaveBeenCalledTimes(2);
+
+    // 後始末（未解決 Promise の解放）
+    resolveSync?.();
+  });
+});

package/notes/app/src/hooks/usePeriodicSync.ts

@@ -0,0 +1,83 @@
+import { useEffect, useRef } from "react";
+
+type Options = {
+  enabled: boolean;
+  intervalMs: number;
+  onSync: () => void | Promise<void>;
+  /**
+   * 初回マウント時の即時 sync を抑制する。consumer 側がマウント時に独自の初回 fetch を
+   * 行う場合、即時 sync と重複して同一 API が二重 dispatch されるのを避ける（#929）。
+   * マウント後に enabled が false→true へ切り替わった場合は対象外で、即時 sync する。
+   *
+   * 注意: React StrictMode 有効の dev ビルドでは effect が setup→cleanup→setup と
+   * 二重実行されるため、2 回目の setup で初回 sync が発火し抑制が無効化される。
+   * 本番ビルドは二重実行されないため抑制は機能する（受け入れ条件 REQ-016-AC-08 は本番挙動が対象）。
+   */
+  skipInitialSync?: boolean;
+};
+
+/**
+ * 一定間隔で onSync を実行する。タブ非表示中は停止し、再表示時に即時 sync する。
+ */
+export function usePeriodicSync({
+  enabled,
+  intervalMs,
+  onSync,
+  skipInitialSync = false,
+}: Options): void {
+  const onSyncRef = useRef(onSync);
+  const isInitialMountRef = useRef(true);
+
+  useEffect(() => {
+    onSyncRef.current = onSync;
+  }, [onSync]);
+
+  useEffect(() => {
+    const isInitialMount = isInitialMountRef.current;
+    isInitialMountRef.current = false;
+
+    if (!enabled || intervalMs <= 0) return;
+
+    let cancelled = false;
+    // この effect インスタンス内で前回の非同期 onSync が in-flight かどうか。
+    // effect スコープに閉じることで、enabled 等の変化で再setup された場合は状態を
+    // 引き継がず、再setup 直後の即時 sync を抑止しない（#937 / PR #953 レビュー対応）
+    let isSyncing = false;
+
+    const runSync = () => {
+      if (cancelled || document.visibilityState === "hidden") return;
+      // 前回の非同期 onSync が完了するまでは重複実行をスキップ（#937）。
+      // 同期 onSync（void 返却）は即時完了するため対象外。
+      if (isSyncing) return;
+      const result = onSyncRef.current();
+      if (result instanceof Promise) {
+        isSyncing = true;
+        void result
+          .catch(() => {
+            // onSync 内部のエラーは consumer 側で処理する。ここでは in-flight フラグの解放のみ行う
+          })
+          .finally(() => {
+            isSyncing = false;
+          });
+      }
+    };
+
+    const handleVisibility = () => {
+      if (document.visibilityState === "visible") {
+        runSync();
+      }
+    };
+
+    if (!(skipInitialSync && isInitialMount)) {
+      runSync();
+    }
+    const timer = window.setInterval(runSync, intervalMs);
+    document.addEventListener("visibilitychange", handleVisibility);
+
+    return () => {
+      cancelled = true;
+      window.clearInterval(timer);
+      document.removeEventListener("visibilitychange", handleVisibility);
+    };
+  }, [enabled, intervalMs, skipInitialSync]);
+}

package/notes/app/src/hooks/useResizablePanelWidth.test.ts

@@ -0,0 +1,251 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { renderHook, act, render, fireEvent } from "@testing-library/react";
+import { createElement } from "react";
+import {
+  PANEL_WIDTH_SAVE_DEBOUNCE_MS,
+  RIGHT_PANEL_LAYOUT,
+  saveStoredPanelWidth,
+} from "@/lib/resizable-panel";
+import { useResizablePanelWidth } from "./useResizablePanelWidth";
+
+vi.mock("@/lib/resizable-panel", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@/lib/resizable-panel")>();
+  return {
+    ...actual,
+    saveStoredPanelWidth: vi.fn(),
+  };
+});
+
+const mockSave = vi.mocked(saveStoredPanelWidth);
+
+function ResizeHarness({
+  edge = "inline-start" as const,
+  dir,
+}: {
+  edge?: "inline-start" | "inline-end";
+  dir?: "ltr" | "rtl";
+}) {
+  const panel = useResizablePanelWidth({
+    ...RIGHT_PANEL_LAYOUT,
+    edge,
+  });
+  return createElement(
+    "div",
+    {
+      "data-testid": "resize-handle",
+      dir,
+      onPointerDown: panel.onResizePointerDown,
+    },
+    panel.width,
+  );
+}
+
+describe("useResizablePanelWidth", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.useFakeTimers();
+    localStorage.clear();
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+  });
+
+  it("applyWidth は debounce 後に localStorage へ保存する", () => {
+    const { result } = renderHook(() =>
+      useResizablePanelWidth({
+        ...RIGHT_PANEL_LAYOUT,
+        edge: "inline-start",
+      }),
+    );
+
+    mockSave.mockClear();
+
+    act(() => {
+      result.current.applyWidth(400);
+    });
+
+    expect(mockSave).not.toHaveBeenCalled();
+
+    act(() => {
+      vi.advanceTimersByTime(PANEL_WIDTH_SAVE_DEBOUNCE_MS);
+    });
+
+    expect(mockSave).toHaveBeenCalledWith(RIGHT_PANEL_LAYOUT.storageKey, 400);
+  });
+
+  it("連続 applyWidth は最後の幅のみ debounce 保存する", () => {
+    const { result } = renderHook(() =>
+      useResizablePanelWidth({
+        ...RIGHT_PANEL_LAYOUT,
+        edge: "inline-start",
+      }),
+    );
+
+    mockSave.mockClear();
+
+    act(() => {
+      result.current.applyWidth(360);
+      result.current.applyWidth(376);
+      result.current.applyWidth(392);
+    });
+
+    act(() => {
+      vi.advanceTimersByTime(PANEL_WIDTH_SAVE_DEBOUNCE_MS);
+    });
+
+    expect(mockSave).toHaveBeenCalledTimes(1);
+    expect(mockSave).toHaveBeenCalledWith(RIGHT_PANEL_LAYOUT.storageKey, 392);
+  });
+
+  it("初回マウントでは debounce 保存しない", () => {
+    renderHook(() =>
+      useResizablePanelWidth({
+        ...RIGHT_PANEL_LAYOUT,
+        edge: "inline-start",
+      }),
+    );
+
+    mockSave.mockClear();
+
+    act(() => {
+      vi.advanceTimersByTime(PANEL_WIDTH_SAVE_DEBOUNCE_MS);
+    });
+
+    expect(mockSave).not.toHaveBeenCalled();
+  });
+
+  it("アンマウント時に pending save をフラッシュする", () => {
+    const { result, unmount } = renderHook(() =>
+      useResizablePanelWidth({
+        ...RIGHT_PANEL_LAYOUT,
+        edge: "inline-start",
+      }),
+    );
+
+    mockSave.mockClear();
+
+    act(() => {
+      result.current.applyWidth(400);
+    });
+
+    expect(mockSave).not.toHaveBeenCalled();
+
+    unmount();
+
+    expect(mockSave).toHaveBeenCalledWith(RIGHT_PANEL_LAYOUT.storageKey, 400);
+  });
+
+  it("幅未変更のアンマウントでは localStorage を再書き込みしない", () => {
+    const { unmount } = renderHook(() =>
+      useResizablePanelWidth({
+        ...RIGHT_PANEL_LAYOUT,
+        edge: "inline-start",
+      }),
+    );
+
+    mockSave.mockClear();
+    unmount();
+    expect(mockSave).not.toHaveBeenCalled();
+  });
+
+  it("beforeunload で pending save をフラッシュする", () => {
+    const { result } = renderHook(() =>
+      useResizablePanelWidth({
+        ...RIGHT_PANEL_LAYOUT,
+        edge: "inline-start",
+      }),
+    );
+
+    mockSave.mockClear();
+
+    act(() => {
+      result.current.applyWidth(400);
+    });
+
+    act(() => {
+      window.dispatchEvent(new Event("beforeunload"));
+    });
+
+    expect(mockSave).toHaveBeenCalledWith(RIGHT_PANEL_LAYOUT.storageKey, 400);
+  });
+
+  it("ポインタドラッグ終了時に flushSave する", () => {
+    const { getByTestId } = render(createElement(ResizeHarness));
+    const handle = getByTestId("resize-handle");
+    handle.setPointerCapture = vi.fn();
+    handle.releasePointerCapture = vi.fn();
+
+    mockSave.mockClear();
+
+    act(() => {
+      fireEvent.pointerDown(handle, { clientX: 100, pointerId: 1 });
+      fireEvent.pointerMove(window, { clientX: 120, pointerId: 1 });
+      fireEvent.pointerUp(window, { clientX: 120, pointerId: 1 });
+    });
+
+    expect(mockSave).toHaveBeenCalledWith(RIGHT_PANEL_LAYOUT.storageKey, 300);
+  });
+
+  it("#1009 RTL: inline-start エッジは物理ドラッグ符号が反転する（右ドラッグで拡大）", () => {
+    const { getByTestId } = render(createElement(ResizeHarness, { dir: "rtl" }));
+    const handle = getByTestId("resize-handle");
+    handle.setPointerCapture = vi.fn();
+    handle.releasePointerCapture = vi.fn();
+
+    mockSave.mockClear();
+
+    act(() => {
+      fireEvent.pointerDown(handle, { clientX: 100, pointerId: 1 });
+      fireEvent.pointerMove(window, { clientX: 120, pointerId: 1 });
+      fireEvent.pointerUp(window, { clientX: 120, pointerId: 1 });
+    });
+
+    // LTR では 320-20=300。RTL では符号反転で 320+20=340。
+    expect(mockSave).toHaveBeenCalledWith(RIGHT_PANEL_LAYOUT.storageKey, 340);
+  });
+
+  it("ドラッグ中のアンマウントで body style とリスナーを cleanup する", () => {
+    const removeListenerSpy = vi.spyOn(window, "removeEventListener");
+    const { getByTestId, unmount } = render(createElement(ResizeHarness));
+    const handle = getByTestId("resize-handle");
+    handle.setPointerCapture = vi.fn();
+    handle.releasePointerCapture = vi.fn();
+
+    act(() => {
+      fireEvent.pointerDown(handle, { clientX: 100, pointerId: 1 });
+    });
+
+    expect(document.body.style.cursor).toBe("col-resize");
+
+    unmount();
+
+    expect(document.body.style.cursor).toBe("");
+    expect(document.body.style.userSelect).toBe("");
+    expect(removeListenerSpy).toHaveBeenCalledWith("pointermove", expect.any(Function));
+    expect(removeListenerSpy).toHaveBeenCalledWith("pointerup", expect.any(Function));
+    removeListenerSpy.mockRestore();
+  });
+
+  it("ドラッグ中のアンマウントで変更幅をフラッシュ保存する", () => {
+    const { getByTestId, unmount } = render(createElement(ResizeHarness));
+    const handle = getByTestId("resize-handle");
+    handle.setPointerCapture = vi.fn();
+    handle.releasePointerCapture = vi.fn();
+
+    mockSave.mockClear();
+
+    act(() => {
+      fireEvent.pointerDown(handle, { clientX: 100, pointerId: 1 });
+      fireEvent.pointerMove(window, { clientX: 120, pointerId: 1 });
+    });
+
+    unmount();
+
+    expect(mockSave).toHaveBeenCalledWith(RIGHT_PANEL_LAYOUT.storageKey, 300);
+  });
+});