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

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

@@ -27,6 +27,10 @@ import IssueCommentThread from "./IssueCommentThread";
 const mockList = vi.mocked(listIssueCommentsApi);
 const mockCreate = vi.mocked(createIssueCommentApi);
 
+// Docker のフルスイート実行では 47 ファイル並列でリソースが競合し、既定の 1000ms を
+// 超えて非同期解決することがある（#1143）。CI に耐える余裕を持たせるため明示指定する。
+const WAIT_FOR_TIMEOUT = 3000;
+
 const COMMENT = {
   id: 1001,
   body: "Hello from GitHub",
@@ -45,49 +49,66 @@ describe("IssueCommentThread", () => {
   it("コメント一覧を時系列で表示する", async () => {
     mockList.mockResolvedValue({ comments: [COMMENT] });
     render(<IssueCommentThread issueNumber={42} canEdit={true} />);
-    await waitFor(() => {
-      expect(screen.getByText("alice")).toBeTruthy();
-      expect(screen.getByTestId("comment-body").textContent).toBe("Hello from GitHub");
-    });
+    await waitFor(
+      () => {
+        expect(screen.getByText("alice")).toBeTruthy();
+        expect(screen.getByTestId("comment-body").textContent).toBe("Hello from GitHub");
+      },
+      { timeout: WAIT_FOR_TIMEOUT },
+    );
   });
 
   it("canEdit=true のとき投稿フォームを表示する", async () => {
     render(<IssueCommentThread issueNumber={42} canEdit={true} />);
-    await waitFor(() => {
-      expect(screen.getByPlaceholderText("Markdown でコメントを入力…")).toBeTruthy();
-      expect(screen.getByText("コメント投稿")).toBeTruthy();
-    });
+    await waitFor(
+      () => {
+        expect(screen.getByPlaceholderText("Markdown でコメントを入力…")).toBeTruthy();
+        expect(screen.getByText("コメント投稿")).toBeTruthy();
+      },
+      { timeout: WAIT_FOR_TIMEOUT },
+    );
   });
 
   it("canEdit=false のとき投稿フォームを非表示にする", async () => {
     render(<IssueCommentThread issueNumber={42} canEdit={false} />);
-    await waitFor(() => {
-      expect(screen.queryByPlaceholderText("Markdown でコメントを入力…")).toBeNull();
-    });
+    await waitFor(
+      () => {
+        expect(screen.queryByPlaceholderText("Markdown でコメントを入力…")).toBeNull();
+      },
+      { timeout: WAIT_FOR_TIMEOUT },
+    );
   });
 
   it("コメント投稿成功後に一覧へ追加する", async () => {
     const newComment = { ...COMMENT, id: 1002, body: "Posted" };
     mockCreate.mockResolvedValue(newComment);
     render(<IssueCommentThread issueNumber={42} canEdit={true} />);
-    await waitFor(() => expect(screen.getByText("コメント投稿")).toBeTruthy());
+    await waitFor(() => expect(screen.getByText("コメント投稿")).toBeTruthy(), {
+      timeout: WAIT_FOR_TIMEOUT,
+    });
 
     fireEvent.change(screen.getByPlaceholderText("Markdown でコメントを入力…"), {
       target: { value: "Posted" },
     });
     fireEvent.click(screen.getByText("コメント投稿"));
 
-    await waitFor(() => {
-      expect(mockCreate).toHaveBeenCalledWith(42, "Posted");
-      expect(screen.getByText("Posted")).toBeTruthy();
-    });
+    await waitFor(
+      () => {
+        expect(mockCreate).toHaveBeenCalledWith(42, "Posted");
+        expect(screen.getByText("Posted")).toBeTruthy();
+      },
+      { timeout: WAIT_FOR_TIMEOUT },
+    );
   });
 
   it("読み込み失敗時にエラーメッセージを表示する", async () => {
     mockList.mockRejectedValue(new Error("GitHub API unavailable"));
     render(<IssueCommentThread issueNumber={42} canEdit={true} />);
-    await waitFor(() => {
-      expect(screen.getByText("GitHub API unavailable")).toBeTruthy();
-    });
+    await waitFor(
+      () => {
+        expect(screen.getByText("GitHub API unavailable")).toBeTruthy();
+      },
+      { timeout: WAIT_FOR_TIMEOUT },
+    );
   });
 });

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

@@ -22,47 +22,10 @@ vi.mock("@/contexts/ToastContext", () => ({
 
 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 の拡張が必要（現行テストはいずれも未依存）。
+  // 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: ({
-      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]);
-    },
-  };
+  const { faithfulPeriodicSyncMock } = require("../test/mockPeriodicSync.ts") as typeof import("../test/mockPeriodicSync");
+  return faithfulPeriodicSyncMock(triggerPeriodicSync);
 });
 
 vi.mock("@/components/FileContentView", () => ({

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

@@ -223,7 +223,7 @@ export default function IssueList({
                 : "text-gray-400 hover:text-gray-200"
             }`}
           >
-            <CircleDot className="w-3 h-3 inline mr-1" />
+            <CircleDot className="w-3 h-3 inline me-1" />
             Open
           </button>
           <button
@@ -235,7 +235,7 @@ export default function IssueList({
                 : "text-gray-400 hover:text-gray-200"
             }`}
           >
-            <CircleCheck className="w-3 h-3 inline mr-1" />
+            <CircleCheck className="w-3 h-3 inline me-1" />
             Closed
           </button>
         </div>
@@ -318,7 +318,7 @@ export default function IssueList({
             key={issue.number}
             type="button"
             onClick={() => onSelect(issue.number)}
-            className={`w-full text-left px-2 rounded text-xs sm:text-xs mb-0.5 transition-colors ${ISSUE_MOBILE_LIST_ITEM} ${
+            className={`w-full text-start px-2 rounded text-xs sm:text-xs mb-0.5 transition-colors ${ISSUE_MOBILE_LIST_ITEM} ${
               selectedIssue === issue.number
                 ? "bg-blue-600/20 text-blue-300"
                 : "text-gray-300 hover:bg-gray-700/50"

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

@@ -307,7 +307,7 @@ export default function LabelSelector({
                             style={{ backgroundColor: `#${label.color}` }}
                           />
                           <span
-                            className="flex-1 text-left truncate"
+                            className="flex-1 text-start truncate"
                             style={{ color: `#${label.color}` }}
                           >
                             {label.name}

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

@@ -770,7 +770,7 @@ export default function MarkdownEditor({
           <button
             type="button"
             onClick={() => setShowSearch(false)}
-            className="text-gray-500 hover:text-gray-300 text-xs ml-auto"
+            className="text-gray-500 hover:text-gray-300 text-xs ms-auto"
             aria-label="閉じる"
           >
             <X className="w-3 h-3" />

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

@@ -11,13 +11,13 @@ export function TreeSkeleton() {
   return (
     <div className="space-y-2 p-2">
       <SkeletonLine width="60%" />
-      <div className="ml-3 space-y-2">
+      <div className="ms-3 space-y-2">
         <SkeletonLine width="80%" />
         <SkeletonLine width="70%" />
         <SkeletonLine width="75%" />
       </div>
       <SkeletonLine width="55%" />
-      <div className="ml-3 space-y-2">
+      <div className="ms-3 space-y-2">
         <SkeletonLine width="65%" />
         <SkeletonLine width="85%" />
       </div>

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

@@ -16,7 +16,7 @@ export default function ToastContainer() {
   if (toasts.length === 0) return null;
 
   return (
-    <div className="fixed bottom-4 right-4 z-50 flex flex-col gap-2 max-w-sm">
+    <div className="fixed bottom-4 end-4 z-50 flex flex-col gap-2 max-w-sm">
       {toasts.map((toast) => {
         const style = STYLE_MAP[toast.type];
         return (

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

@@ -2,8 +2,8 @@ import { useState, useEffect } from "react";
 import { ChevronRight, ChevronDown, Folder, FolderOpen, File } from "lucide-react";
 import type { TreeEntry } from "@/types";
 
-export const DND_MIME = "application/x-notes-filepath";
-export const DND_TYPE_MIME = "application/x-notes-entrytype";
+const DND_MIME = "application/x-notes-filepath";
+const DND_TYPE_MIME = "application/x-notes-entrytype";
 
 const HIDDEN_FILES = new Set([".gitkeep"]);
 
@@ -95,14 +95,14 @@ export default function TreeNode({
           onDragOver={handleDragOver}
           onDragLeave={handleDragLeave}
           onDrop={handleDrop}
-          className={`w-full text-left py-1 px-2 text-sm rounded flex items-center gap-1 transition-colors ${
+          className={`w-full text-start py-1 px-2 text-sm rounded flex items-center gap-1 transition-colors ${
             dropOver
               ? "bg-blue-700/40 ring-1 ring-blue-500"
               : isActiveDir
                 ? "bg-blue-600/30 text-blue-200"
                 : "hover:bg-gray-700"
           }`}
-          style={{ paddingLeft: pl }}
+          style={{ paddingInlineStart: pl }}
         >
           {open
             ? <ChevronDown className="w-3.5 h-3.5 text-gray-400 shrink-0" />
@@ -142,10 +142,10 @@ export default function TreeNode({
       onDragStart={canDrag ? handleDragStart : undefined}
       onClick={() => onSelect(entry.path)}
       onContextMenu={handleCtx}
-      className={`w-full text-left py-1 px-2 text-sm rounded flex items-center gap-1 ${
+      className={`w-full text-start py-1 px-2 text-sm rounded flex items-center gap-1 ${
         isSelected ? "bg-blue-600 text-white" : "hover:bg-gray-700"
       }`}
-      style={{ paddingLeft: pl }}
+      style={{ paddingInlineStart: pl }}
     >
       <span className="w-3.5 shrink-0" />
       <File className="w-4 h-4 text-gray-400 shrink-0" />

package/notes/app/src/contexts/ToastContext.tsx

@@ -10,7 +10,7 @@ import type { ReactNode } from "react";
 
 export type ToastType = "success" | "error" | "warning" | "info";
 
-export type Toast = {
+type Toast = {
   id: string;
   message: string;
   type: ToastType;

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

@@ -12,7 +12,7 @@ import type { Comment, CommentCreateInput } from "@/lib/api";
 
 export type { Comment };
 
-export type CommentsState = {
+type CommentsState = {
   comments: Comment[];
   loading: boolean;
   error: string | null;

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

@@ -4,7 +4,7 @@ import { usePeriodicSync } from "@/hooks/usePeriodicSync";
 import { GITHUB_SYNC_POLL_INTERVAL_MS } from "@/lib/github-sync";
 
 /** `/pr/my-session` が GitHub から付与する PR のライブ状態（DB の prNumber/prUrl は保持） */
-export type SessionPrGithub = {
+type SessionPrGithub = {
   number: number;
   url: string;
   state: string;

package/notes/app/src/lib/api.ts

@@ -268,18 +268,6 @@ export async function fetchHistoryApi(
   return res.json();
 }
 
-export async function fetchFileAtRefApi(
-  path: string,
-  ref: string,
-): Promise<{ content: string; sha: string }> {
-  const res = await apiFetch(`/files/${encodePath(path)}?ref=${encodeURIComponent(ref)}`);
-  if (!res.ok) {
-    const body = await res.json().catch(() => null);
-    throw new Error(formatApiDetail(body, `Failed to fetch file at ref: ${res.status}`));
-  }
-  return res.json();
-}
-
 export async function updateSettingApi(
   key: string,
   value: unknown,
@@ -783,7 +771,7 @@ export function isAbortError(error: unknown): boolean {
   return false;
 }
 
-export function formatApiDetail(body: unknown, fallback: string): string {
+function formatApiDetail(body: unknown, fallback: string): string {
   if (!body || typeof body !== "object") return fallback;
   const detail = (body as Record<string, unknown>).detail;
   if (typeof detail === "string") return detail;

package/notes/app/src/lib/csv-utils.ts

@@ -2,7 +2,7 @@ import type { IWorkbookData, IWorksheetData, ICellData, IStyleData } from "@univ
 
 const LOCALE_EN_US = "enUS";
 
-export type SheetFreeze = {
+type SheetFreeze = {
   xSplit: number;
   ySplit: number;
   startRow: number;

package/notes/app/src/lib/postLoginRedirect.ts

@@ -1,7 +1,7 @@
 import type { Location } from "react-router-dom";
 
 /** Passed from RequireAuth via react-router location.state */
-export type LoginRedirectState = { from?: { pathname: string; search?: string } };
+type LoginRedirectState = { from?: { pathname: string; search?: string } };
 
 /** Reject protocol-relative paths and non-internal targets (open-redirect hardening). */
 function isSafeAppPath(pathname: string): boolean {

package/notes/app/src/lib/rtl-logical-properties.test.ts

@@ -0,0 +1,59 @@
+import { readdirSync, readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { describe, expect, it } from "vitest";
+
+const SOURCE_DIRECTORY = join(dirname(fileURLToPath(import.meta.url)), "..");
+const CLASS_DELIMITER = String.fromCharCode(96);
+const PHYSICAL_INLINE_CLASS = new RegExp(
+  "(?:^|[\\s\\\"" +
+    CLASS_DELIMITER +
+    "])" +
+    "(?:-?(?:pl|pr|ml|mr)-[^\\s\\\"" +
+    CLASS_DELIMITER +
+    "}]+|border-[lr](?:-[^\\s\\\"" +
+    CLASS_DELIMITER +
+    "}]+)?|rounded-[lr](?:-[^\\s\\\"" +
+    CLASS_DELIMITER +
+    "}]+)?|text-(?:left|right)|(?:left|right)-(?:auto|full|0|px|[0-9]|\\[))" +
+    "(?=$|[\\s\\\"" +
+    CLASS_DELIMITER +
+    "}])",
+  "gm",
+);
+
+function findTsxFiles(directory: string): string[] {
+  return readdirSync(directory, { withFileTypes: true }).flatMap((entry) => {
+    const path = join(directory, entry.name);
+    if (entry.isDirectory()) return findTsxFiles(path);
+    if (!entry.name.endsWith(".tsx") || entry.name.endsWith(".test.tsx")) return [];
+    return [path];
+  });
+}
+
+describe("Notes app の inline 方向クラス", () => {
+  it("コンテンツ要素へ物理 inline プロパティを再導入しない", () => {
+    const violations: string[] = [];
+
+    for (const file of findTsxFiles(SOURCE_DIRECTORY)) {
+      const source = readFileSync(file, "utf8");
+      for (const match of source.matchAll(PHYSICAL_INLINE_CLASS)) {
+        violations.push(file + ": " + match[0].trim());
+      }
+    }
+
+    expect(violations).toEqual([]);
+  });
+
+  it("TreeNode の階層インデントは inline-start で指定する", () => {
+    const source = readFileSync(join(SOURCE_DIRECTORY, "components/TreeNode.tsx"), "utf8");
+    expect(source).toContain("paddingInlineStart");
+    expect(source).not.toContain("paddingLeft");
+  });
+
+  it("inline-end に配置する Toast の入場方向も RTL で反転する", () => {
+    const styles = readFileSync(join(SOURCE_DIRECTORY, "styles/globals.css"), "utf8");
+    expect(styles).toContain("@keyframes slide-in-rtl");
+    expect(styles).toMatch(/:dir\(rtl\) \.animate-slide-in\s*\{\s*animation-name:\s*slide-in-rtl/);
+  });
+});

package/notes/app/src/lib/user-colors.ts

@@ -1,4 +1,4 @@
-export const USER_COLORS = [
+const USER_COLORS = [
   "#ef4444", "#f97316", "#eab308", "#22c55e",
   "#06b6d4", "#3b82f6", "#8b5cf6", "#ec4899",
 ] as const;

package/notes/app/src/pages/MainPage.tsx

@@ -979,7 +979,7 @@ export default function MainPage() {
                 <button
                   type="button"
                   onClick={logout}
-                  className="text-gray-500 hover:text-gray-300 ml-1"
+                  className="text-gray-500 hover:text-gray-300 ms-1"
                   title="ログアウト"
                   aria-label="ログアウト"
                 >
@@ -990,7 +990,7 @@ export default function MainPage() {
             <button
               type="button"
               onClick={() => setSidebarOpen(false)}
-              className="text-gray-500 hover:text-gray-300 ml-2 md:hidden"
+              className="text-gray-500 hover:text-gray-300 ms-2 md:hidden"
               title="閉じる"
               aria-label="閉じる"
             >

package/notes/app/src/pages/SettingsPage.test.tsx

@@ -12,6 +12,10 @@ const MOCK_SETTINGS = {
   lockout_duration_min: 15,
 };
 
+// CI の並列負荷で設定ロード・React の再描画が 1 秒を超えても、テストを早期に
+// timeout させない。Vitest のテスト単位 timeout（既定 5 秒）内で失敗を返せる値にする。
+const SETTINGS_WAIT_TIMEOUT_MS = 3_000;
+
 const mockGetSettings = vi.fn().mockResolvedValue(MOCK_SETTINGS);
 const mockUpdateSetting = vi.fn().mockImplementation(async (key: string, value: unknown) => ({
   key,
@@ -46,8 +50,15 @@ function renderPage() {
  * ので、タイムゾーンの反映が確認できれば他フィールドも反映済み。
  */
 async function waitForSettledSettings() {
-  const tz = (await screen.findByLabelText("タイムゾーン")) as HTMLInputElement;
-  await waitFor(() => expect(tz.value).toBe("Asia/Tokyo"));
+  const tz = (await screen.findByLabelText(
+    "タイムゾーン",
+    {},
+    { timeout: SETTINGS_WAIT_TIMEOUT_MS },
+  )) as HTMLInputElement;
+  await waitFor(
+    () => expect(tz.value).toBe("Asia/Tokyo"),
+    { timeout: SETTINGS_WAIT_TIMEOUT_MS },
+  );
   return tz;
 }
 
@@ -59,17 +70,31 @@ describe("SettingsPage", () => {
 
   it("renders settings after loading", async () => {
     renderPage();
-    await waitFor(() => expect(screen.getByText("一般設定")).toBeTruthy());
+    await waitFor(
+      () => expect(screen.getByText("一般設定")).toBeTruthy(),
+      { timeout: SETTINGS_WAIT_TIMEOUT_MS },
+    );
     expect(screen.getByText("セキュリティ設定")).toBeTruthy();
     expect(screen.getByLabelText("タイムゾーン")).toBeTruthy();
   });
 
   it("shows back link to main page", async () => {
     renderPage();
-    await waitFor(() => expect(screen.getByText("戻る")).toBeTruthy());
+    await waitFor(
+      () => expect(screen.getByText("戻る")).toBeTruthy(),
+      { timeout: SETTINGS_WAIT_TIMEOUT_MS },
+    );
   });
 
   it("calls updateSettingApi on save", async () => {
+    // 設定ロードが waitFor の既定 timeout（1 秒）をわずかに超える CI 負荷を再現する。
+    // 待機側に十分な明示 timeout がなければ、入力操作へ到達する前にテストが失敗する。
+    mockGetSettings.mockImplementationOnce(
+      () =>
+        new Promise((resolve) => {
+          setTimeout(() => resolve({ ...MOCK_SETTINGS }), 1_100);
+        }),
+    );
     renderPage();
     const input = await waitForSettledSettings();
 
@@ -77,17 +102,22 @@ describe("SettingsPage", () => {
       fireEvent.change(input, { target: { value: "UTC" } });
     });
 
-    await waitFor(() => {
-      const btn = screen.getAllByText("保存")[0] as HTMLButtonElement;
-      expect(btn.disabled).toBe(false);
-    });
+    await waitFor(
+      () => {
+        const btn = screen.getAllByText("保存")[0] as HTMLButtonElement;
+        expect(btn.disabled).toBe(false);
+      },
+      { timeout: SETTINGS_WAIT_TIMEOUT_MS },
+    );
 
     await act(async () => {
       fireEvent.click(screen.getAllByText("保存")[0]);
     });
 
-    await waitFor(() =>
-      expect(mockUpdateSetting).toHaveBeenCalledWith("timezone", "UTC"),
+    await waitFor(
+      () =>
+        expect(mockUpdateSetting).toHaveBeenCalledWith("timezone", "UTC"),
+      { timeout: SETTINGS_WAIT_TIMEOUT_MS },
     );
   });
 

package/notes/app/src/pages/SettingsPage.tsx

@@ -201,7 +201,7 @@ export default function SettingsPage() {
         </Link>
         <h1 className="text-base font-bold tracking-wide">設定</h1>
         {!isAdmin && (
-          <span className="ml-auto text-xs text-yellow-400 bg-yellow-900/30 border border-yellow-700/50 rounded px-2 py-0.5">
+          <span className="ms-auto text-xs text-yellow-400 bg-yellow-900/30 border border-yellow-700/50 rounded px-2 py-0.5">
             閲覧のみ
           </span>
         )}

package/notes/app/src/pages/UserManagementPage.tsx

@@ -303,7 +303,7 @@ function UserRow({
           <span className="text-sm font-medium text-gray-100">
             {user.displayName}
             {isSelf && (
-              <span className="ml-2 text-xs text-green-400 bg-green-900/30 border border-green-700/50 rounded px-1.5 py-0.5">
+              <span className="ms-2 text-xs text-green-400 bg-green-900/30 border border-green-700/50 rounded px-1.5 py-0.5">
                 自分
               </span>
             )}
@@ -467,7 +467,7 @@ export default function UserManagementPage() {
           <ArrowLeft className="inline w-4 h-4" /> 戻る
         </Link>
         <h1 className="text-base font-bold tracking-wide">ユーザー管理</h1>
-        <div className="ml-auto">
+        <div className="ms-auto">
           <button
             type="button"
             onClick={() => setShowCreateModal(true)}
@@ -492,19 +492,19 @@ export default function UserManagementPage() {
               <table className="w-full min-w-[600px]">
                 <thead>
                   <tr className="border-b border-gray-700 bg-gray-800/80">
-                    <th className="px-4 py-2.5 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">
+                    <th className="px-4 py-2.5 text-start text-xs font-semibold text-gray-400 uppercase tracking-wider">
                       ユーザー
                     </th>
-                    <th className="px-4 py-2.5 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">
+                    <th className="px-4 py-2.5 text-start text-xs font-semibold text-gray-400 uppercase tracking-wider">
                       ロール
                     </th>
-                    <th className="px-4 py-2.5 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">
+                    <th className="px-4 py-2.5 text-start text-xs font-semibold text-gray-400 uppercase tracking-wider">
                       状態
                     </th>
-                    <th className="px-4 py-2.5 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">
+                    <th className="px-4 py-2.5 text-start text-xs font-semibold text-gray-400 uppercase tracking-wider">
                       作成日
                     </th>
-                    <th className="px-4 py-2.5 text-right text-xs font-semibold text-gray-400 uppercase tracking-wider">
+                    <th className="px-4 py-2.5 text-end text-xs font-semibold text-gray-400 uppercase tracking-wider">
                       操作
                     </th>
                   </tr>

package/notes/app/src/styles/globals.css

@@ -88,6 +88,23 @@
   animation: slide-in 0.25s ease-out;
 }
 
+/* Toast は inline-end に配置するため、RTL では入場方向も反転し、
+   論理位置と同じ物理端からスライドさせる。 */
+@keyframes slide-in-rtl {
+  from {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+:dir(rtl) .animate-slide-in {
+  animation-name: slide-in-rtl;
+}
+
 /* Syntax highlighting — Atom One Dark inspired */
 .hljs-keyword,
 .hljs-selector-tag { color: #c678dd; }