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

package/notes/app/DESIGN.md

@@ -120,7 +120,7 @@
 | ホバー | `transition-colors` |
 | ローディング（スケルトン） | `animate-pulse` |
 | ローディング（スピナー） | `animate-spin` |
-| パネル登場 | `animate-slide-in`（`translateX(100%)→0`, 0.25s ease-out。`globals.css` で定義） |
+| パネル登場 | `animate-slide-in`（LTR は `translateX(100%)→0`、RTL は `translateX(-100%)→0`。0.25s ease-out。`globals.css` で定義） |
 
 ---
 
@@ -196,6 +196,9 @@
 > 日本語本文・見出し・和欧混植・改行・フォーム密度を AI/人間が壊さないための契約を固定する。
 > §1–8（TypeUI ベースの色・状態・レイアウト契約）と矛盾せず**補完**する。§9.2–9.3 の recipes は
 > #1020 で `notes/app/src/styles/globals.css` に実装済み（長文プローズ `max-width` のみ保留 — §9.3 参照。本書はトークン・ルールの正本）。
+> 見出しの語中改行禁止・本文 line-height・長い URL/パスの折り返しは、実ブラウザの視覚回帰 E2E
+> （`notes/app/e2e/ja-typography-visual.spec.ts`：モバイル 360px / デスクトップ 1280px、`toHaveScreenshot` +
+> `Range.getClientRects` による幾何アサーション）で退行を自動検出する（#1065）。
 
 ### 9.1 タイポグラフィ役割スケール（日本語前提）
 
@@ -250,7 +253,7 @@
 | 本文 `line-height` ≥ 1.5 | ✅ PASS | `globals.css` の `:lang(ja) :is(p,li,dd)` で `line-height: 1.55` を明示（#1020） |
 | 見出しと本文の行間ロジック分離 | ✅ PASS | 見出し `h1:1.35 / h2:1.4 / h3,h4:1.45` を本文（1.55）と分離して明示（#1020 / §9.1 スケール準拠） |
 | テーブル / フォームの本文からの分離 | ✅ PASS | 本文レシピは `p,li,dd` にスコープし `table` は非継承。フォームは `label/input/textarea/select/button` に個別ルール（入力系のみ `line-height: 1.5`）を明示（#1020 / §9.3） |
-| 和欧混植見出しのモバイル目視検証 | ✅ PASS | 固定 360px 幅（モバイル相当）で Windows/Chromium 実機確認済み（#1020）。H1/H2 の和欧混植（`GoDD Notes` / `API Gateway` / `OAuth 2.0`）が語中改行せず折り返し、長い URL / パスもコンテナ内で折り返し横溢れなし |
+| 和欧混植見出しのモバイル目視検証 | ✅ PASS | 固定 360px 幅（モバイル相当）で Windows/Chromium 実機確認済み（#1020）。H1/H2 の和欧混植（`GoDD Notes` / `API Gateway` / `OAuth 2.0`）が語中改行せず折り返し、長い URL / パスもコンテナ内で折り返し横溢れなし。以降の退行は手動目視ではなく `notes/app/e2e/ja-typography-visual.spec.ts`（モバイル 360px / デスクトップ 1280px、Docker `notes-e2e-test` で自動実行）が検出する（#1065） |
 | macOS / Windows レンダリング確認 | 🟡 WARN | Windows/Chromium は実機確認済み（#1020）。使用プロパティは標準（`overflow-wrap: anywhere` は全ブラウザ対応、`word-break: auto-phrase` は `@supports` ガードで安全に段階適用、`text-autospace` は未対応環境で無害に無視）。**macOS 実機の目視のみ未実施**（当該環境が手元になく AI では実行不能・UAT 推奨） |
 | タッチターゲット（44px） | ✅ PASS | §4 / §5 で `min-h-11` を契約・実装済み |
 

package/notes/app/e2e/fixtures.ts

@@ -17,6 +17,45 @@ interface Fixtures {
 }
 
 export const test = base.extend<Fixtures>({
+  // The API intentionally returns the mock tree with `mode: "mock"` when no
+  // GitHub App credentials are available.  The file-view and panel scenarios
+  // still exercise the authenticated editor UI against that deterministic
+  // mock data; normalize only the UI mode marker so MainPage exposes the
+  // editor controls.  Write endpoints remain mock-disabled and are not
+  // called by these browser scenarios.
+  page: async ({ page }, use) => {
+    await page.route("**/api/tree**", async (route) => {
+      const response = await route.fetch();
+      if (!response.ok()) {
+        await route.fulfill({ response });
+        return;
+      }
+
+      const data: unknown = await response.json();
+      if (
+        typeof data === "object" &&
+        data !== null &&
+        "mode" in data &&
+        (data as { mode?: unknown }).mode === "mock"
+      ) {
+        const normalized = { ...(data as Record<string, unknown>), mode: "live" };
+        await route.fulfill({
+          status: response.status(),
+          contentType: "application/json",
+          body: JSON.stringify(normalized),
+        });
+        return;
+      }
+
+      await route.fulfill({
+        status: response.status(),
+        contentType: "application/json",
+        body: JSON.stringify(data),
+      });
+    });
+
+    await use(page);
+  },
   loginPage: async ({ page }, use) => {
     await use(new LoginPage(page));
   },

package/notes/app/e2e/ja-typography-visual.spec.ts

@@ -0,0 +1,185 @@
+import { test, expect, type Locator, type Page } from "./fixtures";
+
+/**
+ * #1065: 日本語組版契約（`notes/app/DESIGN.md` §9.1–9.3 / `src/styles/globals.css`）の
+ * 視覚回帰テスト。PR #1064 のレビュー指摘（本 PR スコープ外の Suggestion / #1020 フォローアップ）を追跡する。
+ *
+ * 対象（§9.1–9.3、issue #1065 のスコープ）:
+ *  - 見出し（h1–h3）の和欧混植（`GoDD Notes` / `API Gateway` / `OAuth 2.0`）が語中で改行しないこと
+ *  - 本文（p）の line-height が契約範囲 1.5–1.65（既定 1.55）内であること
+ *  - 長い URL / パスがコンテナ内で折り返し、横溢れしないこと
+ * スコープ外: 長文プローズ `max-width: 42em`（§9.3 で実装意図的に保留。要否は 質問リスト.md / #1020 で追跡）。
+ *
+ * 検証方針（3 段構え）:
+ *  1. 見出しの `computed style`（`word-break`）が `break-all`（§9.4 の禁止事項）に退行していないことを
+ *     直接検証する。短い和欧混植トークンは行幅に余裕があると break-all 下でも偶然折り返し位置が
+ *     変わらないことがあるため、レンダリング結果だけに頼らない一次検証として置く。
+ *  2. 幾何アサーション（`Range.getClientRects`）で「語中改行しない」ことを実測する。
+ *     PR #1041（`panel-resize-handle.spec.ts`）の `getBoundingClientRect` 数値比較パターンを踏襲し、
+ *     クロス OS のフォント描画差に左右されにくい決定的な二次検証とする。
+ *  3. Playwright `toHaveScreenshot` でプロース領域のピクセル差分も取得し、issue #1065 の受け入れ基準
+ *     （ベースライン確定後に `globals.css` の組版 recipe を変更すると視覚回帰テストが fail すること）を満たす。
+ *
+ * 対象コンテンツは実際の本番レンダリングパス（`FileContentView` → `MarkdownView` の
+ * marked + `.prose`）を通す。API 応答のみ `page.route` でモックする（`file-view.spec.ts` と同じ方針）。
+ *
+ * ベースラインスナップショット（`ja-typography-visual.spec.ts-snapshots/*.png`）は
+ * Docker（`notes-e2e-test` / Linux + Playwright 同梱 Chromium 固定）でのみ生成・更新すること。
+ * ローカル Windows/macOS で `--update-snapshots` を実行すると、フォントレンダリング差で
+ * CI のベースラインと乖離し無効化される（issue #1065 の留意点）。
+ *
+ *   docker compose --profile test run --rm notes-app-test pnpm build
+ *   docker compose up --build -d postgres notes-api notes-app
+ *   docker compose --profile e2e run --rm -v "$(pwd)/notes/app/e2e:/app/e2e" notes-e2e-test \
+ *     npx playwright test e2e/ja-typography-visual.spec.ts --update-snapshots
+ */
+
+const FIXTURE_PATH = "e2e-fixtures/ja-typography-contract.md";
+
+// DESIGN.md §9 の和欧混植サンプル（GoDD Notes / API Gateway / OAuth 2.0）+ 長い URL/パス。
+const MARKDOWN_FIXTURE = `# GoDD Notes と API Gateway 連携
+
+## API Gateway 経由のリクエストフロー
+
+### OAuth 2.0 によるトークン発行
+
+このセクションでは、GoDD Notes が API Gateway を経由して外部サービスと連携する際の認証フローを説明します。認証には OAuth 2.0 を使用し、アクセストークンを発行します。
+
+トークンエンドポイントの例です。長い URL はコンテナ内で折り返され、横溢れしません。
+
+https://api.example.com/v1/oauth/token/exchange?client_id=godd-notes-app&scope=read-write-admin&redirect_uri=https%3A%2F%2Fnotes.example.com%2Fcallback
+
+設定ファイルのパス例: /var/lib/godd/config/notes-api-gateway-oauth-client-credentials.json
+`;
+
+async function mockFixtureFile(page: Page): Promise<void> {
+  await page.route(`**/api/files/${FIXTURE_PATH}`, async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify({
+        path: FIXTURE_PATH,
+        content: MARKDOWN_FIXTURE,
+        sha: "e2e-fixture-sha",
+        size: MARKDOWN_FIXTURE.length,
+        encoding: "utf-8",
+        styles: null,
+      }),
+    });
+  });
+}
+
+/**
+ * `heading` 内で `token` が単一行に収まっている（= 語中改行していない）ことを検証する。
+ * `Range.getClientRects()` の `top` 座標がすべて同じなら、その文字列は 1 行に収まっている。
+ * `word-break: break-all` 等への回帰でトークン内に改行が入ると `top` が複数値に分かれ fail する。
+ */
+async function assertNoMidWordWrap(heading: Locator, token: string): Promise<void> {
+  const lineCount = await heading.evaluate((el, needle: string) => {
+    const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
+    let node: Text | null;
+    while ((node = walker.nextNode() as Text | null)) {
+      const text = node.textContent ?? "";
+      const idx = text.indexOf(needle);
+      if (idx === -1) continue;
+      const range = document.createRange();
+      range.setStart(node, idx);
+      range.setEnd(node, idx + needle.length);
+      const tops = Array.from(range.getClientRects()).map((r) => Math.round(r.top));
+      return new Set(tops).size;
+    }
+    return 0;
+  }, token);
+
+  expect(lineCount, `"${token}" は語中改行せず単一行に収まる必要があります`).toBe(1);
+}
+
+async function runTypographyContractAssertions(page: Page): Promise<void> {
+  const prose = page.locator("main .prose");
+  await expect(prose).toBeVisible({ timeout: 10_000 });
+
+  const h1 = prose.locator("h1");
+  const h2 = prose.locator("h2");
+  const h3 = prose.locator("h3");
+  await expect(h1).toBeVisible();
+  await expect(h2).toBeVisible();
+  await expect(h3).toBeVisible();
+
+  await test.step("見出しに本文へのグローバル break-all が波及していない（DESIGN.md §9.4 禁止事項）", async () => {
+    // 短い和欧混植トークン（GoDD / API 等）は現行フォント・ビューポート幅では
+    // word-break: break-all に規制退行しても偶然折り返し位置が変わらないことがあるため
+    // （語自体が行に収まってしまう）、レンダリング結果だけに頼らず computed style も直接検証する。
+    for (const heading of [h1, h2, h3]) {
+      const wordBreak = await heading.evaluate((el) => getComputedStyle(el).wordBreak);
+      expect(wordBreak, "見出しに word-break: break-all が適用されてはならない").not.toBe(
+        "break-all",
+      );
+    }
+  });
+
+  await test.step("見出しが和欧混植で語中改行しない（DESIGN.md §9.3）", async () => {
+    await assertNoMidWordWrap(h1, "GoDD");
+    await assertNoMidWordWrap(h1, "Notes");
+    await assertNoMidWordWrap(h1, "API");
+    await assertNoMidWordWrap(h1, "Gateway");
+    await assertNoMidWordWrap(h2, "Gateway");
+    await assertNoMidWordWrap(h3, "OAuth");
+    await assertNoMidWordWrap(h3, "2.0");
+  });
+
+  await test.step("本文 line-height が契約範囲 1.5–1.65 内（DESIGN.md §9.1）", async () => {
+    const metrics = await prose.locator("p").first().evaluate((el) => {
+      const style = getComputedStyle(el);
+      return {
+        lineHeight: Number.parseFloat(style.lineHeight),
+        fontSize: Number.parseFloat(style.fontSize),
+      };
+    });
+    const ratio = metrics.lineHeight / metrics.fontSize;
+    expect(ratio).toBeGreaterThanOrEqual(1.5);
+    expect(ratio).toBeLessThanOrEqual(1.65);
+  });
+
+  await test.step("長い URL / パスがコンテナ内で折り返し横溢れしない（DESIGN.md §9.3）", async () => {
+    const overflow = await prose.evaluate((el) => el.scrollWidth - el.clientWidth);
+    expect(overflow).toBeLessThanOrEqual(1);
+  });
+}
+
+test.describe("日本語組版契約の視覚回帰 (#1065)", () => {
+  test.describe("モバイル 360px", () => {
+    test.use({ viewport: { width: 360, height: 800 } });
+
+    test("見出し折り返し・本文 line-height・長文 URL 折り返しが契約どおり", async ({
+      page,
+      mainPage,
+    }) => {
+      await mockFixtureFile(page);
+      await mainPage.goto(FIXTURE_PATH);
+
+      await runTypographyContractAssertions(page);
+
+      await expect(page.locator("main .prose")).toHaveScreenshot(
+        "ja-typography-mobile-360.png",
+      );
+    });
+  });
+
+  test.describe("デスクトップ 1280px", () => {
+    test.use({ viewport: { width: 1280, height: 800 } });
+
+    test("見出し折り返し・本文 line-height・長文 URL 折り返しが契約どおり", async ({
+      page,
+      mainPage,
+    }) => {
+      await mockFixtureFile(page);
+      await mainPage.goto(FIXTURE_PATH);
+
+      await runTypographyContractAssertions(page);
+
+      await expect(page.locator("main .prose")).toHaveScreenshot(
+        "ja-typography-desktop-1280.png",
+      );
+    });
+  });
+});

package/notes/app/e2e/rtl-logical-properties.spec.ts

@@ -0,0 +1,36 @@
+import { test, expect } from "./fixtures";
+
+/**
+ * #1043: TreeNode の階層インデントが dir に応じて inline-start 側へ移ることを
+ * 実ブラウザで検証する。jsdom は論理プロパティの物理側を計算できないため、
+ * paddingInlineStart の反転は E2E でガードする。
+ */
+test.describe("RTL 論理プロパティ (#1043)", () => {
+  test.use({ viewport: { width: 1280, height: 720 } });
+
+  test("ファイルツリーの階層インデントが RTL で物理右へ反転する", async ({ page, mainPage }) => {
+    await mainPage.goto();
+    await page.getByRole("button", { name: /001_project/ }).click();
+
+    const nestedFile = page.getByRole("button", { name: /features\.csv/ });
+    await expect(nestedFile).toBeVisible();
+
+    const measurePadding = () =>
+      nestedFile.evaluate((element) => {
+        const style = getComputedStyle(element);
+        return {
+          left: Number.parseFloat(style.paddingLeft),
+          right: Number.parseFloat(style.paddingRight),
+        };
+      });
+
+    const ltr = await measurePadding();
+    expect(ltr.left).toBeGreaterThan(ltr.right);
+
+    await page.evaluate(() => document.documentElement.setAttribute("dir", "rtl"));
+
+    const rtl = await measurePadding();
+    expect(rtl.right).toBeGreaterThan(rtl.left);
+    expect(rtl.right).toBeCloseTo(ltr.left, 0);
+  });
+});

package/notes/app/package-lock.json

@@ -46,7 +46,6 @@
         "@playwright/test": "^1.59.1",
         "@tailwindcss/vite": "^4.1.18",
         "@testing-library/react": "^16.3.2",
-        "@types/marked": "^5.0.2",
         "@types/node": "^24.10.1",
         "@types/react": "^19.2.7",
         "@types/react-dom": "^19.2.3",
@@ -3898,13 +3897,6 @@
         "@types/mdurl": "^2"
       }
     },
-    "node_modules/@types/marked": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/@types/marked/-/marked-5.0.2.tgz",
-      "integrity": "sha512-OucS4KMHhFzhz27KxmWg7J+kIYqyqoW5kdIEI319hqARQQUTqhao3M/F+uFnDXD0Rg72iDDZxZNxq5gvctmLlg==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/@types/mdurl": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz",

package/notes/app/package.json

@@ -51,7 +51,6 @@
     "@playwright/test": "^1.59.1",
     "@tailwindcss/vite": "^4.1.18",
     "@testing-library/react": "^16.3.2",
-    "@types/marked": "^5.0.2",
     "@types/node": "^24.10.1",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",

package/notes/app/playwright.config.ts

@@ -17,6 +17,13 @@ export default defineConfig({
     screenshot: "only-on-failure",
   },
 
+  // #1065: 日本語組版契約の視覚回帰（toHaveScreenshot）向けの既定閾値。
+  // Docker（notes-e2e-test / Linux+bundled Chromium）でベースラインを固定する前提で、
+  // フォントのアンチエイリアス差を吸収しつつレイアウト崩れ（語中改行・行間変化）は検出する値。
+  expect: {
+    toHaveScreenshot: { maxDiffPixelRatio: 0.02, animations: "disabled" },
+  },
+
   projects: [
     {
       name: "setup",

package/notes/app/pnpm-lock.yaml

@@ -117,9 +117,6 @@ importers:
       '@testing-library/react':
         specifier: ^16.3.2
         version: 16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@types/marked':
-        specifier: ^5.0.2
-        version: 5.0.2
       '@types/node':
         specifier: ^24.10.1
         version: 24.10.13
@@ -1535,9 +1532,6 @@ packages:
   '@types/markdown-it@14.1.2':
     resolution: {integrity: sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==}
 
-  '@types/marked@5.0.2':
-    resolution: {integrity: sha512-OucS4KMHhFzhz27KxmWg7J+kIYqyqoW5kdIEI319hqARQQUTqhao3M/F+uFnDXD0Rg72iDDZxZNxq5gvctmLlg==}
-
   '@types/mdurl@2.0.0':
     resolution: {integrity: sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==}
 
@@ -5042,8 +5036,6 @@ snapshots:
       '@types/linkify-it': 5.0.0
       '@types/mdurl': 2.0.0
 
-  '@types/marked@5.0.2': {}
-
   '@types/mdurl@2.0.0': {}
 
   '@types/node@24.10.13':

package/notes/app/src/components/BranchSelectorModal.tsx

@@ -82,9 +82,9 @@ export default function BranchSelectorModal({
         <button
           type="button"
           onClick={() => { onSelect(null); onClose(); }}
-          className={`block w-full text-left px-4 py-3 border-b border-gray-700/50 transition-colors ${
+          className={`block w-full text-start px-4 py-3 border-b border-gray-700/50 transition-colors ${
             currentBranch === null
-              ? "bg-blue-900/40 border-l-2 border-l-blue-400"
+              ? "bg-blue-900/40 border-s-2 border-s-blue-400"
               : "hover:bg-gray-700/30"
           }`}
         >
@@ -92,7 +92,7 @@ export default function BranchSelectorModal({
             <GitBranch className="w-3.5 h-3.5 text-green-400 shrink-0" />
             <span className="text-sm font-medium">main</span>
             {currentBranch === null && (
-              <span className="text-[10px] text-blue-400 ml-auto">表示中</span>
+              <span className="text-[10px] text-blue-400 ms-auto">表示中</span>
             )}
           </div>
         </button>
@@ -120,9 +120,9 @@ export default function BranchSelectorModal({
                 key={pr.number}
                 type="button"
                 onClick={() => { onSelect(pr.branch); onClose(); }}
-                className={`block w-full text-left px-4 py-3 border-b border-gray-700/50 transition-colors ${
+                className={`block w-full text-start px-4 py-3 border-b border-gray-700/50 transition-colors ${
                   isSelected
-                    ? "bg-blue-900/40 border-l-2 border-l-blue-400"
+                    ? "bg-blue-900/40 border-s-2 border-s-blue-400"
                     : "hover:bg-gray-700/30"
                 }`}
               >
@@ -137,10 +137,10 @@ export default function BranchSelectorModal({
                     <span className="text-[10px] text-blue-400 shrink-0">表示中</span>
                   )}
                 </div>
-                <div className="text-[10px] text-gray-500 font-mono truncate mb-0.5 pl-4">
+                <div className="text-[10px] text-gray-500 font-mono truncate mb-0.5 ps-4">
                   {pr.branch}
                 </div>
-                <div className="flex items-center gap-2 text-[10px] text-gray-500 pl-4">
+                <div className="flex items-center gap-2 text-[10px] text-gray-500 ps-4">
                   <span>#{pr.number}</span>
                   <span>{pr.author}</span>
                   <span>
@@ -156,7 +156,7 @@ export default function BranchSelectorModal({
                     href={pr.url}
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="text-blue-400 hover:text-blue-300 ml-auto"
+                    className="text-blue-400 hover:text-blue-300 ms-auto"
                     onClick={(e) => e.stopPropagation()}
                   >
                     GitHub

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

@@ -79,7 +79,7 @@ function CommentItem({
             )}
           </div>
           {comment.anchor_text && (
-            <blockquote className="mt-1 pl-2 border-l-2 border-blue-600 text-gray-400 truncate">
+            <blockquote className="mt-1 ps-2 border-s-2 border-blue-600 text-gray-400 truncate">
               {comment.anchor_text}
             </blockquote>
           )}
@@ -185,7 +185,7 @@ function CommentItem({
           <button
             type="button"
             onClick={() => onDelete(comment.id)}
-            className="flex items-center gap-0.5 hover:text-red-400 transition-colors ml-auto"
+            className="flex items-center gap-0.5 hover:text-red-400 transition-colors ms-auto"
             title="削除"
           >
             <Trash2 className="w-3 h-3" />
@@ -195,7 +195,7 @@ function CommentItem({
 
       {/* Replies */}
       {expanded && replies.length > 0 && (
-        <div className="border-t border-gray-700 ml-4 space-y-0 divide-y divide-gray-700/50">
+        <div className="border-t border-gray-700 ms-4 space-y-0 divide-y divide-gray-700/50">
           {replies.map((reply) => (
             <div key={reply.id} className="px-2.5 py-1.5">
               <div className="flex items-baseline gap-1.5 flex-wrap">
@@ -208,7 +208,7 @@ function CommentItem({
                   <button
                     type="button"
                     onClick={() => onDelete(reply.id)}
-                    className="flex items-center gap-0.5 hover:text-red-400 transition-colors ml-auto"
+                    className="flex items-center gap-0.5 hover:text-red-400 transition-colors ms-auto"
                     title="削除"
                   >
                     <Trash2 className="w-3 h-3" />
@@ -315,7 +315,7 @@ export default function CommentPanel({
         <h3 className="text-sm font-semibold text-gray-300">
           コメント
           {allComments.length > 0 && (
-            <span className="ml-1.5 text-xs text-gray-500">({allComments.length})</span>
+            <span className="ms-1.5 text-xs text-gray-500">({allComments.length})</span>
           )}
         </h3>
         <div className="flex items-center gap-1">

package/notes/app/src/components/DiffPreview.tsx

@@ -30,7 +30,7 @@ export default function DiffPreview({ original, modified, onClose }: Props) {
         <span className="text-sm font-medium text-gray-300">変更プレビュー</span>
         <span className="text-xs text-green-400">+{stats.added}</span>
         <span className="text-xs text-red-400">-{stats.removed}</span>
-        <div role="toolbar" aria-label="差分表示モード" className="flex items-center gap-0.5 rounded bg-gray-700 p-0.5 ml-2">
+        <div role="toolbar" aria-label="差分表示モード" className="flex items-center gap-0.5 rounded bg-gray-700 p-0.5 ms-2">
           <button
             type="button"
             aria-pressed={viewMode === "unified"}
@@ -98,10 +98,10 @@ function UnifiedView({ changes }: { changes: ReturnType<typeof diffLines> }) {
           const prefix = part.added ? "+" : part.removed ? "-" : " ";
           return (
             <div key={`${i}-${j}`} className={`flex ${bg}`}>
-              <span className="w-12 text-right pr-3 text-gray-600 select-none shrink-0">
+              <span className="w-12 text-end pe-3 text-gray-600 select-none shrink-0">
                 {!part.added && !part.removed ? lineNum : ""}
               </span>
-              <span className={`pr-2 ${part.added ? "text-green-500" : part.removed ? "text-red-500" : "text-gray-600"} select-none`}>
+              <span className={`pe-2 ${part.added ? "text-green-500" : part.removed ? "text-red-500" : "text-gray-600"} select-none`}>
                 {prefix}
               </span>
               <span className={textColor}>{line || " "}</span>
@@ -151,7 +151,7 @@ function SideBySideView({ original, modified }: { original: string; modified: st
 
   return (
     <div className="flex min-w-0 overflow-x-auto">
-      <div className="flex-1 min-w-[200px] border-r border-gray-700 p-4">
+      <div className="flex-1 min-w-[200px] border-e border-gray-700 p-4">
         <div className="text-[10px] text-gray-500 mb-2 uppercase">元のバージョン</div>
         {Array.from({ length: maxLines }).map((_, i) => {
           const line = leftLines[i];

package/notes/app/src/components/FileContentView.tsx

@@ -57,7 +57,7 @@ function CsvTable({ content }: { content: string }) {
             {header.map((cell, i) => (
               <th
                 key={i}
-                className="border border-gray-600 bg-gray-700 px-3 py-2 text-left font-semibold text-gray-200 whitespace-nowrap"
+                className="border border-gray-600 bg-gray-700 px-3 py-2 text-start font-semibold text-gray-200 whitespace-nowrap"
               >
                 {cell}
               </th>

package/notes/app/src/components/FileContextMenu.tsx

@@ -54,7 +54,7 @@ export default function FileContextMenu({ x, y, isDir, onAction, onClose }: Prop
           role="menuitem"
           key={item.action}
           onClick={() => onAction(item.action)}
-          className={`w-full text-left px-3 py-1.5 text-sm hover:bg-gray-700 flex items-center gap-2 ${
+          className={`w-full text-start px-3 py-1.5 text-sm hover:bg-gray-700 flex items-center gap-2 ${
             item.action === "delete" ? "text-red-400 hover:text-red-300" : "text-gray-200"
           }`}
         >

package/notes/app/src/components/FileInfoPanel.branch-tab.test.tsx

@@ -5,42 +5,10 @@ import type { FileContent } from "@/types";
 const triggerPeriodicSync = vi.hoisted(() => vi.fn());
 
 vi.mock("@/hooks/usePeriodicSync", () => {
+  // vi.mock factory は hoist されるため、共有ヘルパも factory 内で解決する。
   // eslint-disable-next-line @typescript-eslint/no-require-imports -- mock factory 制約
-  const { useEffect, useRef } = require("react") as typeof import("react");
-  return {
-    // 実フック（usePeriodicSync.ts）の即時 sync 挙動を忠実に再現する:
-    // onSync は ref 捕捉し、effect 依存は実フックと同じ [enabled, intervalMs, skipInitialSync]。
-    // enabled 時の effect setup（初回マウント / enabled false→true 遷移）で onSync を発火し、
-    // 初回マウントは skipInitialSync で抑制する。これにより「mount 直後の foreground load 中に
-    // 即時 background poll が走る」競合（#934）を再現する。
-    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(() => {
-        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]);
-    },
-  };
+  const { faithfulPeriodicSyncMock } = require("../test/mockPeriodicSync.ts") as typeof import("../test/mockPeriodicSync");
+  return faithfulPeriodicSyncMock(triggerPeriodicSync);
 });
 
 vi.mock("@/lib/api", () => ({