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

package/notes/app/docker/Dockerfile.test

@@ -0,0 +1,17 @@
+FROM node:22-alpine
+
+WORKDIR /app
+
+# pnpm バージョンは compose の x-pnpm-version アンカー（build-arg PNPM_VERSION）を正本とする。
+# ARG default は standalone `docker build` 用フォールバックで root packageManager と一致させる（#984 / #1004）。
+ARG PNPM_VERSION=10.15.0
+RUN corepack enable && corepack prepare pnpm@${PNPM_VERSION} --activate
+
+COPY package.json pnpm-lock.yaml ./
+# pnpm v10 は無視されたビルドスクリプトをエラーにする（ERR_PNPM_IGNORED_BUILDS）ため、
+# CI（.github/workflows/ci.yml）と同様に --ignore-scripts でインストールし esbuild のみ明示 rebuild する。
+RUN pnpm install --frozen-lockfile --ignore-scripts && pnpm rebuild esbuild
+
+COPY . .
+
+CMD ["sh", "-c", "pnpm lint && pnpm test && pnpm build"]

package/notes/app/e2e/file-tree.spec.ts

@@ -0,0 +1,26 @@
+import { test, expect } from "./fixtures";
+
+test.describe("File tree (mock mode)", () => {
+  test("displays mock tree entries on main page", async ({ mainPage }) => {
+    await mainPage.goto();
+
+    await expect(mainPage.sidebar.getByText("README.md")).toBeVisible();
+    await expect(mainPage.sidebar.getByText("001_project")).toBeVisible();
+  });
+
+  test("expands directory to show children", async ({ page, mainPage }) => {
+    await mainPage.goto();
+
+    await page.getByRole("button", { name: /001_project/ }).click();
+
+    await expect(page.getByText("features.csv")).toBeVisible();
+  });
+
+  test("selects file and updates URL", async ({ page, mainPage }) => {
+    await mainPage.goto();
+
+    await page.getByText("README.md").first().click();
+
+    await expect(page).toHaveURL(/[?&]file=docs.*README\.md/);
+  });
+});

package/notes/app/e2e/file-view.spec.ts

@@ -0,0 +1,25 @@
+import { test, expect } from "./fixtures";
+
+const README_FILE = "docs/README.md";
+
+test.describe("File viewing (mock mode)", () => {
+  test("shows markdown content when a .md file is selected", async ({ mainPage }) => {
+    await mainPage.goto(README_FILE);
+
+    await expect(mainPage.content.locator(".prose")).toBeVisible({ timeout: 10_000 });
+  });
+
+  test("shows edit button for authenticated user", async ({ mainPage }) => {
+    await mainPage.goto(README_FILE);
+
+    await expect(mainPage.editButton).toBeVisible();
+  });
+
+  test("enters edit mode on edit button click", async ({ mainPage }) => {
+    await mainPage.goto(README_FILE);
+
+    await mainPage.editButton.click();
+
+    await expect(mainPage.editor).toBeVisible({ timeout: 10_000 });
+  });
+});

package/notes/app/e2e/fixtures.ts

@@ -0,0 +1,28 @@
+import { test as base } from "@playwright/test";
+import { LoginPage } from "./pages/login-page";
+import { MainPage } from "./pages/main-page";
+
+/**
+ * E2E 共通フィクスチャ（#974）。
+ * Page Object とテスト認証情報を一元化し、各 spec はシナリオ固有の操作・検証のみを持つ。
+ */
+
+/** テスト用認証情報。global-setup と login spec で共有する。 */
+export const TEST_USERNAME = process.env.TEST_USERNAME ?? "admin";
+export const TEST_PASSWORD = process.env.TEST_PASSWORD ?? "admin123";
+
+interface Fixtures {
+  loginPage: LoginPage;
+  mainPage: MainPage;
+}
+
+export const test = base.extend<Fixtures>({
+  loginPage: async ({ page }, use) => {
+    await use(new LoginPage(page));
+  },
+  mainPage: async ({ page }, use) => {
+    await use(new MainPage(page));
+  },
+});
+
+export { expect } from "@playwright/test";

package/{notes-app → notes/app}/e2e/global-setup.ts

@@ -1,19 +1,17 @@
 import { test as setup, expect } from "@playwright/test";
 import fs from "node:fs";
 import path from "node:path";
+import { LoginPage } from "./pages/login-page";
+import { TEST_USERNAME, TEST_PASSWORD } from "./fixtures";
 
 const AUTH_FILE = "e2e/.auth/user.json";
 
 setup("authenticate", async ({ page }) => {
   fs.mkdirSync(path.dirname(AUTH_FILE), { recursive: true });
 
-  const username = process.env.TEST_USERNAME ?? "admin";
-  const password = process.env.TEST_PASSWORD ?? "admin123";
-
-  await page.goto("/login");
-  await page.locator("#login-username").fill(username);
-  await page.locator("#login-password").fill(password);
-  await page.locator('button[type="submit"]').click();
+  const loginPage = new LoginPage(page);
+  await loginPage.goto();
+  await loginPage.login(TEST_USERNAME, TEST_PASSWORD);
 
   await expect(page).not.toHaveURL(/\/login/);
 

package/notes/app/e2e/login.spec.ts

@@ -0,0 +1,25 @@
+import { test, expect, TEST_USERNAME, TEST_PASSWORD } from "./fixtures";
+
+test.describe("Login flow", () => {
+  test.use({ storageState: { cookies: [], origins: [] } });
+
+  test("redirects unauthenticated user to /login", async ({ page, mainPage }) => {
+    await mainPage.goto();
+    await expect(page).toHaveURL(/\/login/);
+  });
+
+  test("logs in with valid credentials", async ({ page, loginPage }) => {
+    await loginPage.goto();
+    await loginPage.login(TEST_USERNAME, TEST_PASSWORD);
+
+    await expect(page).not.toHaveURL(/\/login/);
+  });
+
+  test("shows error for invalid credentials", async ({ page, loginPage }) => {
+    await loginPage.goto();
+    await loginPage.login("wrong-user-e2e", "wrong-pass-e2e");
+
+    await expect(loginPage.errorAlert).toBeVisible();
+    await expect(page).toHaveURL(/\/login/);
+  });
+});

package/notes/app/e2e/pages/login-page.ts

@@ -0,0 +1,29 @@
+import type { Locator, Page } from "@playwright/test";
+
+/**
+ * ログイン画面の Page Object（#974）。
+ * ログインフォームの主要ロケータと認証操作を集約し、global-setup と login spec が共有する。
+ */
+export class LoginPage {
+  readonly usernameInput: Locator;
+  readonly passwordInput: Locator;
+  readonly submitButton: Locator;
+  readonly errorAlert: Locator;
+
+  constructor(private readonly page: Page) {
+    this.usernameInput = page.locator("#login-username");
+    this.passwordInput = page.locator("#login-password");
+    this.submitButton = page.locator('button[type="submit"]');
+    this.errorAlert = page.locator('[role="alert"]');
+  }
+
+  async goto(): Promise<void> {
+    await this.page.goto("/login");
+  }
+
+  async login(username: string, password: string): Promise<void> {
+    await this.usernameInput.fill(username);
+    await this.passwordInput.fill(password);
+    await this.submitButton.click();
+  }
+}

package/notes/app/e2e/pages/main-page.ts

@@ -0,0 +1,29 @@
+import type { Locator, Page } from "@playwright/test";
+
+/**
+ * メイン画面（ファイルツリー + コンテンツ表示）の Page Object（#974）。
+ * ベース遷移と主要ロケータ（サイドバー / コンテンツ / 編集ボタン / エディタ）を集約する。
+ * ツリー項目の選択など各シナリオ固有の操作は spec 側に残す。
+ */
+export class MainPage {
+  /** ファイルツリーを含むサイドバー */
+  readonly sidebar: Locator;
+  /** ファイル内容を表示するメイン領域 */
+  readonly content: Locator;
+  /** 編集モードへ切り替えるボタン */
+  readonly editButton: Locator;
+  /** 編集モードの Tiptap / ProseMirror エディタ */
+  readonly editor: Locator;
+
+  constructor(private readonly page: Page) {
+    this.sidebar = page.locator("aside").first();
+    this.content = page.locator("main");
+    this.editButton = page.getByRole("button", { name: /編集/ });
+    this.editor = page.locator(".tiptap, .ProseMirror");
+  }
+
+  /** ルートへ遷移する。`file` を渡すと `?file=<path>` クエリ付きで開く。 */
+  async goto(file?: string): Promise<void> {
+    await this.page.goto(file ? `/?file=${file}` : "/");
+  }
+}

package/notes/app/e2e/panel-resize-handle.spec.ts

@@ -0,0 +1,213 @@
+import { test, expect } from "./fixtures";
+import type { Locator, Page } from "@playwright/test";
+import type { MainPage } from "./pages/main-page";
+
+/**
+ * REQ-UI-AC-05 / #1008: リサイズハンドルの視覚線（hover/drag インジケーター）と親 aside の
+ * border（border-r / border-l）の **ピクセル一致** を実ブラウザ（Playwright）で検証する視覚回帰テスト。
+ *
+ * jsdom はレイアウトエンジンを持たず className トークン一致しか検証できない（既存
+ * PanelResizeHandle.test.tsx）。サブピクセルの実位置は #991 / PR #1007 で `edge` 別 translate
+ * （right=translate-x-0 / left=-translate-x-full）により 0.5px ずれを修正済みだが、実ピクセル位置の
+ * 回帰は jsdom では検出できない。本テストは getBoundingClientRect の数値比較（スナップショット比較より
+ * 安定・軽量。issue #1008 推奨方針 (B)）で、視覚線中心と border 中心の x 座標一致を検証する。
+ *
+ * 視覚線の幾何は hover / drag(group-active) / 既定で不変（状態で変わるのは色のみ。focus-visible のみ
+ * w-px→w-0.5 で幅変化）。したがって hover と drag の双方で同一位置に重なることを確認する。
+ */
+
+const README_FILE = "docs/README.md";
+
+// 視覚線中心と border 中心の許容差(px)。#991 の回帰はちょうど 0.5px ずれるため、それを確実に
+// 検出できるよう 0.5px 未満に設定する（修正版は設計上 0px 一致）。
+const ALIGN_TOLERANCE_PX = 0.25;
+
+// group-active（ドラッグ）状態にするためのポインタ移動量(px)。min/max クランプに掛からない小さな値。
+const DRAG_DELTA_PX = 8;
+
+// translate / boundingBox 判定の許容差(px)。サブピクセル丸めを吸収する小さな値。
+const ONSCREEN_TOLERANCE_PX = 0.5;
+
+interface Alignment {
+  lineCenter: number;
+  borderCenter: number;
+  lineWidth: number;
+  borderWidth: number;
+}
+
+/** ハンドル内視覚線の中心 x と、親 aside の border 中心 x を実測して返す。 */
+async function measureAlignment(
+  handle: Locator,
+  aside: Locator,
+  side: "left" | "right",
+): Promise<Alignment> {
+  const border = await aside.evaluate((el, s) => {
+    const r = el.getBoundingClientRect();
+    const cs = getComputedStyle(el);
+    const width = parseFloat(s === "right" ? cs.borderRightWidth : cs.borderLeftWidth);
+    // border-box の border は要素の外縁 1px。right 端は [right-w, right]、left 端は [left, left+w]。
+    const center = s === "right" ? r.right - width / 2 : r.left + width / 2;
+    return { center, width };
+  }, side);
+
+  const line = await handle.evaluate((el) => {
+    // ハンドル（role=slider）の唯一の子 div が視覚線。
+    const lineEl = el.firstElementChild as HTMLElement;
+    const r = lineEl.getBoundingClientRect();
+    return { center: (r.left + r.right) / 2, width: r.width };
+  });
+
+  return {
+    lineCenter: line.center,
+    borderCenter: border.center,
+    lineWidth: line.width,
+    borderWidth: border.width,
+  };
+}
+
+/**
+ * aside が md+ で水平 translate されておらず、viewport 内に収まることを検証する（#1009）。
+ * ハンドルは aside の子で、aside ごと translate されても視覚線と border の相対整列は保たれ偽陽性になるため、
+ * パネル自体の物理位置を独立に確認する。
+ *
+ * 重要: Tailwind v4 の `translate-x-*` は `transform` ではなく **`translate` プロパティ**に値を入れる
+ * （`translate: var(--tw-translate-x) var(--tw-translate-y)`）。よって `transform` は常に `none` になり判定に使えない。
+ * ドロワー退避（`max-md:rtl:translate-x-full`）が md+ に漏れると `translate` の x 成分が要素幅ぶん非ゼロになるため、
+ * `translate` プロパティの x 成分で判定する。
+ */
+async function expectAsideOnScreen(aside: Locator, page: Page): Promise<void> {
+  const translateX = await aside.evaluate((el) => {
+    const t = getComputedStyle(el).translate; // "none" | "<x>[ <y>]"（px 解決値）
+    return t === "none" || t === "" ? 0 : Number.parseFloat(t);
+  });
+  expect(Math.abs(translateX)).toBeLessThanOrEqual(ONSCREEN_TOLERANCE_PX);
+  const box = await aside.boundingBox();
+  if (!box) throw new Error("aside の boundingBox を取得できない");
+  const viewport = page.viewportSize();
+  if (!viewport) throw new Error("viewport を取得できない");
+  expect(box.x).toBeGreaterThanOrEqual(-ONSCREEN_TOLERANCE_PX);
+  expect(box.x + box.width).toBeLessThanOrEqual(viewport.width + ONSCREEN_TOLERANCE_PX);
+}
+
+function expectAligned(m: Alignment): void {
+  // 視覚線・border とも 1px 幅であること（w-px / border 1px）。
+  expect(m.lineWidth).toBeCloseTo(1, 1);
+  expect(m.borderWidth).toBeCloseTo(1, 1);
+  // 中心 x が同一ピクセル位置に重なること。
+  expect(Math.abs(m.lineCenter - m.borderCenter)).toBeLessThanOrEqual(ALIGN_TOLERANCE_PX);
+}
+
+/** ハンドル中央で pointer down + 移動し、group-active（ドラッグ）状態にする。呼び出し側で mouse.up する。 */
+async function startDrag(handle: Locator, page: Page): Promise<void> {
+  const box = await handle.boundingBox();
+  if (!box) throw new Error("リサイズハンドルの boundingBox を取得できない");
+  const cx = box.x + box.width / 2;
+  const cy = box.y + box.height / 2;
+  await page.mouse.move(cx, cy);
+  await page.mouse.down();
+  // 小さく移動して group-active を有効化（過大ドラッグで min/max クランプに掛からない範囲）。
+  await page.mouse.move(cx + DRAG_DELTA_PX, cy);
+}
+
+/** 編集モードで base 参照パネル（右パネル / border-l）を開き、その左端ハンドルと aside を返す。 */
+async function openRightReferencePanel(
+  mainPage: MainPage,
+  page: Page,
+): Promise<{ handle: Locator; aside: Locator }> {
+  await mainPage.goto(README_FILE);
+  await expect(mainPage.content.locator(".prose")).toBeVisible({ timeout: 10_000 });
+  await mainPage.editButton.click();
+  await expect(mainPage.editor).toBeVisible({ timeout: 10_000 });
+  await page.getByRole("button", { name: /^base:/ }).click();
+  const handle = page.getByRole("slider", { name: "参照パネルの幅を変更" });
+  await expect(handle).toBeVisible();
+  const aside = page.locator("aside").filter({ has: handle });
+  return { handle, aside };
+}
+
+test.describe("PanelResizeHandle 視覚線と border のピクセル一致 (REQ-UI-AC-05 / #1008)", () => {
+  // ハンドルは md+ のみ表示（`hidden md:block` / resolveMdUpPanelResize）。md+ 前提を明示し、
+  // Playwright 既定 viewport（DPR=1）への暗黙依存を排して許容差比較を安定させる。
+  test.use({ viewport: { width: 1280, height: 720 } });
+
+  test("左サイドバー右端ハンドル: hover 時に視覚線が border-r と一致する", async ({ mainPage, page }) => {
+    await mainPage.goto();
+    const handle = page.getByRole("slider", { name: "左サイドバーの幅を変更" });
+    await expect(handle).toBeVisible();
+
+    await handle.hover();
+
+    expectAligned(await measureAlignment(handle, mainPage.sidebar, "right"));
+  });
+
+  test("左サイドバー右端ハンドル: drag 中も視覚線が border-r と一致する", async ({ mainPage, page }) => {
+    await mainPage.goto();
+    const handle = page.getByRole("slider", { name: "左サイドバーの幅を変更" });
+    await expect(handle).toBeVisible();
+
+    await startDrag(handle, page);
+    try {
+      expectAligned(await measureAlignment(handle, mainPage.sidebar, "right"));
+    } finally {
+      await page.mouse.up();
+    }
+  });
+
+  test("右パネル左端ハンドル: hover 時に視覚線が border-l と一致する", async ({ mainPage, page }) => {
+    const { handle, aside } = await openRightReferencePanel(mainPage, page);
+
+    await handle.hover();
+
+    expectAligned(await measureAlignment(handle, aside, "left"));
+  });
+
+  test("右パネル左端ハンドル: drag 中も視覚線が border-l と一致する", async ({ mainPage, page }) => {
+    const { handle, aside } = await openRightReferencePanel(mainPage, page);
+
+    await startDrag(handle, page);
+    try {
+      expectAligned(await measureAlignment(handle, aside, "left"));
+    } finally {
+      await page.mouse.up();
+    }
+  });
+});
+
+/**
+ * #1009: 物理プロパティ→論理プロパティ移行の RTL ガード。`dir="rtl"` では論理 border / inset が
+ * 物理左右を反転させるため、ハンドルの視覚線が「反転後の物理側」の border と一致することを実ブラウザで検証する。
+ * jsdom はレイアウトエンジンを持たず、論理プロパティの実反転（物理側の特定）を検証できないため E2E でガードする。
+ */
+test.describe("PanelResizeHandle RTL での border 一致 (#1009 / REQ-UI-AC-12)", () => {
+  test.use({ viewport: { width: 1280, height: 720 } });
+
+  test("RTL: 左サイドバーの border-e は物理左へ反転し、視覚線がそれと一致する", async ({ mainPage, page }) => {
+    await mainPage.goto();
+    await page.evaluate(() => {
+      document.documentElement.setAttribute("dir", "rtl");
+    });
+    const handle = page.getByRole("slider", { name: "左サイドバーの幅を変更" });
+    await expect(handle).toBeVisible();
+
+    // #1009 リグレッションガード: md+ では RTL でもドロワーの translate を残さない
+    // （`max-md:rtl:translate-x-full` が md+ に漏れると red になる）。
+    const sidebar = mainPage.sidebar;
+    await expectAsideOnScreen(sidebar, page);
+
+    await handle.hover();
+
+    // LTR では border-e=物理右だが、RTL では border-e=物理左。視覚線も論理 inset で同じ側へ移る。
+    expectAligned(await measureAlignment(handle, sidebar, "left"));
+  });
+
+  test("RTL: 右参照パネルの border-s は物理右へ反転し、視覚線がそれと一致する", async ({ mainPage, page }) => {
+    const { handle, aside } = await openRightReferencePanel(mainPage, page);
+    await page.evaluate(() => {
+      document.documentElement.setAttribute("dir", "rtl");
+    });
+    await handle.hover();
+
+    // LTR では border-s=物理左だが、RTL では border-s=物理右。
+    expectAligned(await measureAlignment(handle, aside, "right"));
+  });
+});

package/{notes-app → notes/app}/eslint.config.js

@@ -20,4 +20,13 @@ export default defineConfig([
       globals: globals.browser,
     },
   },
+  {
+    // Playwright E2E は React アプリではないため React 専用ルールを除外する（#974）。
+    // 特に Playwright フィクスチャの慣用引数 `use` を react-hooks が React Hook と誤検出するのを防ぐ。
+    files: ["e2e/**/*.ts"],
+    rules: {
+      "react-hooks/rules-of-hooks": "off",
+      "react-refresh/only-export-components": "off",
+    },
+  },
 ]);

package/{notes-app → notes/app}/package.json

@@ -46,9 +46,6 @@
     "y-websocket": "^3.0.0",
     "yjs": "^13.6.30"
   },
-  "pnpm": {
-    "onlyBuiltDependencies": ["esbuild"]
-  },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
     "@playwright/test": "^1.59.1",

package/{notes-app → notes/app}/pnpm-workspace.yaml

@@ -1,2 +1,3 @@
 # notes-app is a standalone project (not part of godd-mcp-server workspace)
 # This file prevents pnpm from inheriting the parent pnpm-workspace.yaml
+allowBuild: esbuild

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

@@ -0,0 +1,194 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import CommentPanel from "./CommentPanel";
+import type { UseCommentsReturn } from "@/hooks/useComments";
+import type { UserInfo } from "@/lib/api";
+
+const mockUser: UserInfo = {
+  id: "user-1",
+  username: "alice",
+  displayName: "Alice",
+  role: "editor",
+};
+
+const mockComment = {
+  id: "c1",
+  file_path: "docs/readme.md",
+  body: "Original body",
+  author_id: "user-1",
+  author_name: "Alice",
+  parent_id: null,
+  anchor_text: "selected text",
+  position_from: 0,
+  position_to: 13,
+  resolved_at: null,
+  resolved_by: null,
+  created_at: "2026-05-25T00:00:00Z",
+  updated_at: "2026-05-25T00:00:00Z",
+};
+
+function buildCommentsMock(overrides: Partial<UseCommentsReturn> = {}): UseCommentsReturn {
+  return {
+    comments: [mockComment],
+    loading: false,
+    error: null,
+    includeResolved: false,
+    reload: vi.fn(),
+    setIncludeResolved: vi.fn(),
+    addComment: vi.fn().mockResolvedValue(mockComment),
+    editComment: vi.fn().mockResolvedValue(true),
+    resolveComment: vi.fn().mockResolvedValue(true),
+    removeComment: vi.fn().mockResolvedValue(true),
+    ...overrides,
+  };
+}
+
+describe("CommentPanel", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("pendingAnchor 付き投稿で anchor フィールドを addComment に渡す", async () => {
+    const addComment = vi.fn().mockResolvedValue(mockComment);
+    render(
+      <CommentPanel
+        filePath="docs/readme.md"
+        currentUser={mockUser}
+        comments={buildCommentsMock({ addComment })}
+        pendingAnchor={{
+          anchor_text: "hello",
+          position_from: 1,
+          position_to: 6,
+        }}
+        onClearAnchor={vi.fn()}
+        onClose={vi.fn()}
+      />,
+    );
+
+    fireEvent.change(screen.getByPlaceholderText(/コメントを入力/), {
+      target: { value: "New comment" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "投稿" }));
+
+    await waitFor(() => {
+      expect(addComment).toHaveBeenCalledWith({
+        file_path: "docs/readme.md",
+        body: "New comment",
+        anchor_text: "hello",
+        position_from: 1,
+        position_to: 6,
+      });
+    });
+  });
+
+  it("著者がコメントを編集できる", async () => {
+    const editComment = vi.fn().mockResolvedValue(true);
+    render(
+      <CommentPanel
+        filePath="docs/readme.md"
+        currentUser={mockUser}
+        comments={buildCommentsMock({ editComment })}
+        pendingAnchor={null}
+        onClearAnchor={vi.fn()}
+        onClose={vi.fn()}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "編集" }));
+    const textarea = screen.getAllByRole("textbox")[0];
+    fireEvent.change(textarea, { target: { value: "Updated body" } });
+    fireEvent.click(screen.getByRole("button", { name: "保存" }));
+
+    await waitFor(() => {
+      expect(editComment).toHaveBeenCalledWith("c1", "Updated body");
+    });
+  });
+
+  it("panelResize.width を aside の inline width に適用する", () => {
+    const { container } = render(
+      <CommentPanel
+        filePath="docs/readme.md"
+        currentUser={mockUser}
+        comments={buildCommentsMock()}
+        pendingAnchor={null}
+        onClearAnchor={vi.fn()}
+        onClose={vi.fn()}
+        panelResize={{
+          width: 420,
+          minWidth: 240,
+          maxWidth: 560,
+          onPointerDown: vi.fn(),
+          onWidthChange: vi.fn(),
+        }}
+      />,
+    );
+
+    const aside = container.querySelector("aside");
+    expect(aside?.getAttribute("style")).toContain("width: 420px");
+  });
+
+  it("panelResize 指定時に右パネル用リサイズハンドルを表示する", () => {
+    render(
+      <CommentPanel
+        filePath="docs/readme.md"
+        currentUser={mockUser}
+        comments={buildCommentsMock()}
+        pendingAnchor={null}
+        onClearAnchor={vi.fn()}
+        onClose={vi.fn()}
+        panelResize={{
+          width: 320,
+          minWidth: 240,
+          maxWidth: 560,
+          onPointerDown: vi.fn(),
+          onWidthChange: vi.fn(),
+        }}
+      />,
+    );
+
+    expect(
+      screen.getByRole("slider", { name: "コメントパネルの幅を変更" }),
+    ).toBeTruthy();
+  });
+
+  it("showResizeHandle: false のとき幅は適用するがハンドルは非表示", () => {
+    const { container } = render(
+      <CommentPanel
+        filePath="docs/readme.md"
+        currentUser={mockUser}
+        comments={buildCommentsMock()}
+        pendingAnchor={null}
+        onClearAnchor={vi.fn()}
+        onClose={vi.fn()}
+        panelResize={{
+          width: 360,
+          minWidth: 240,
+          maxWidth: 560,
+          onPointerDown: vi.fn(),
+          onWidthChange: vi.fn(),
+          showResizeHandle: false,
+        }}
+      />,
+    );
+
+    expect(container.querySelector("aside")?.getAttribute("style")).toContain("width: 360px");
+    expect(screen.queryByRole("slider")).toBeNull();
+  });
+
+  it("md+ 用に aside を relative 配置する", () => {
+    const { container } = render(
+      <CommentPanel
+        filePath="docs/readme.md"
+        currentUser={mockUser}
+        comments={buildCommentsMock()}
+        pendingAnchor={null}
+        onClearAnchor={vi.fn()}
+        onClose={vi.fn()}
+      />,
+    );
+
+    const aside = container.querySelector("aside");
+    expect(aside?.className).toContain("md:relative");
+    expect(aside?.className).not.toContain("md:static");
+  });
+});