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

package/{notes-app → notes/app}/src/components/FileInfoPanel.tsx

@@ -1,4 +1,4 @@
-import { useState, useReducer, useEffect, useCallback } from "react";
+import { useState, useReducer, useEffect, useCallback, useRef } from "react";
 import { X, RefreshCw, FileText, Clock, GitBranch, AlertCircle, Loader2, ExternalLink } from "lucide-react";
 import {
   fetchHistoryApi,
@@ -11,6 +11,10 @@ import type { CommitEntry, BranchStatus, SessionInfo } from "@/lib/api";
 import type { CollabUser } from "@/hooks/useCollaboration";
 import type { FileContent } from "@/types";
 import { getFileExt } from "@/types";
+import PanelResizeHandle from "@/components/PanelResizeHandle";
+import { RESIZABLE_RIGHT_PANEL_ASIDE_CLASS, type PanelResizeProps } from "@/lib/resizable-panel";
+import { usePeriodicSync } from "@/hooks/usePeriodicSync";
+import { GITHUB_SYNC_POLL_INTERVAL_MS } from "@/lib/github-sync";
 
 type Tab = "details" | "history" | "branch";
 
@@ -18,6 +22,8 @@ type Props = {
   fileContent: FileContent;
   collabUsers: CollabUser[];
   onClose: () => void;
+  panelResize?: PanelResizeProps;
+  syncEnabled?: boolean;
 };
 
 function TabButton({
@@ -116,20 +122,43 @@ function historyReducer(state: HistoryState, action: HistoryAction): HistoryStat
 
 function HistoryTab({ filePath }: { filePath: string }) {
   const [state, dispatch] = useReducer(historyReducer, { items: [], loading: false, error: null });
+  const requestSeq = useRef(0);
+  const mountedRef = useRef(true);
+  const abortRef = useRef<AbortController | null>(null);
+
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
 
   const load = useCallback(() => {
+    // 進行中の取得をキャンセルし、後着の stale 応答で上書きされるのを防ぐ
+    abortRef.current?.abort();
+    const ac = new AbortController();
+    abortRef.current = ac;
+    const requestId = requestSeq.current + 1;
+    requestSeq.current = requestId;
+
     dispatch({ type: "LOADING" });
-    fetchHistoryApi(filePath)
-      .then((data) => dispatch({ type: "SUCCESS", items: data }))
+    fetchHistoryApi(filePath, { signal: ac.signal })
+      .then((data) => {
+        if (!mountedRef.current || requestSeq.current !== requestId) return;
+        dispatch({ type: "SUCCESS", items: data });
+      })
       .catch((err: unknown) => {
-        if (!isAbortError(err)) {
-          dispatch({ type: "ERROR", message: getErrorMessage(err, "履歴の取得に失敗しました") });
-        }
+        if (!mountedRef.current || requestSeq.current !== requestId) return;
+        if (isAbortError(err)) return;
+        dispatch({ type: "ERROR", message: getErrorMessage(err, "履歴の取得に失敗しました") });
       });
   }, [filePath]);
 
   useEffect(() => {
     load();
+    return () => {
+      abortRef.current?.abort();
+    };
   }, [load]);
 
   const { items: history, loading, error } = state;
@@ -152,7 +181,7 @@ function HistoryTab({ filePath }: { filePath: string }) {
         </div>
         <button
           type="button"
-          onClick={load}
+          onClick={() => load()}
           className="mt-2 text-xs text-blue-400 hover:text-blue-300 flex items-center gap-1"
         >
           <RefreshCw className="w-3 h-3" />
@@ -199,26 +228,92 @@ function branchReducer(state: BranchState, action: BranchAction): BranchState {
   }
 }
 
-function BranchTab() {
+function BranchTab({ syncEnabled }: { syncEnabled: boolean }) {
   const [state, dispatch] = useReducer(branchReducer, { status: null, sessions: [], loading: false, error: null });
+  // foreground（初回・明示的再取得）と background poll で seq を分離し、即時 background poll が
+  // in-flight の foreground SUCCESS を stale 扱いで破棄しないようにする（#934）
+  const loadRequestSeq = useRef(0);
+  const pollRequestSeq = useRef(0);
+  // freshness ゲート: 取得ごとに単調増加する世代を採番し、適用済み世代（appliedGen）以下の取得結果は
+  // データを上書きしない。これにより「遅い foreground load が、後から始まったより新しい background poll の
+  // 結果を上書きする」順序を防ぐ（#949・REQ-016-AC-13）。background 失敗時は appliedGen を進めないため、
+  // 後着の foreground SUCCESS は従来どおり適用される（#934 / AC-10 の失敗ケースを維持）。
+  // BranchTab は単一のグローバル資源（branch-status / sessions）を扱い ID 単位の識別がないため、
+  // appliedGen のリセットは不要（gen は単調増加のみ）
+  const fetchGenSeq = useRef(0);
+  const appliedGen = useRef(0);
+  const mountedRef = useRef(true);
+
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+
+  // foreground 取得開始時は poll seq も進め、in-flight の background poll を無効化する。
+  // 併せて取得世代を採番する
+  const beginLoadRequest = useCallback(() => {
+    loadRequestSeq.current += 1;
+    pollRequestSeq.current += 1;
+    fetchGenSeq.current += 1;
+    return { requestId: loadRequestSeq.current, gen: fetchGenSeq.current };
+  }, []);
+
+  // background poll は poll seq のみ進め、in-flight の foreground load は無効化しない
+  const beginPollRequest = useCallback(() => {
+    pollRequestSeq.current += 1;
+    fetchGenSeq.current += 1;
+    return { requestId: pollRequestSeq.current, gen: fetchGenSeq.current };
+  }, []);
 
   const load = useCallback(() => {
+    const { requestId, gen } = beginLoadRequest();
     dispatch({ type: "LOADING" });
     Promise.all([fetchBranchStatusApi(), fetchSessionsApi()])
-      .then(([branchStatus, allSessions]) =>
-        dispatch({ type: "SUCCESS", status: branchStatus, sessions: allSessions }),
-      )
+      .then(([branchStatus, allSessions]) => {
+        if (!mountedRef.current || requestId !== loadRequestSeq.current) return;
+        // より新しい取得が適用済みならデータは上書きしない（loading は poll の SUCCESS が解除済み）
+        if (gen <= appliedGen.current) return;
+        appliedGen.current = gen;
+        dispatch({ type: "SUCCESS", status: branchStatus, sessions: allSessions });
+      })
       .catch((err: unknown) => {
-        if (!isAbortError(err)) {
-          dispatch({ type: "ERROR", message: getErrorMessage(err, "ブランチ情報の取得に失敗しました") });
-        }
+        if (!mountedRef.current || requestId !== loadRequestSeq.current) return;
+        if (isAbortError(err)) return;
+        dispatch({ type: "ERROR", message: getErrorMessage(err, "ブランチ情報の取得に失敗しました") });
       });
-  }, []);
+  }, [beginLoadRequest]);
+
+  const poll = useCallback(() => {
+    const { requestId, gen } = beginPollRequest();
+    // Promise を返し、usePeriodicSync の in-flight ガード（#937）で並列 poll を防ぐ
+    return Promise.all([fetchBranchStatusApi(), fetchSessionsApi()])
+      .then(([branchStatus, allSessions]) => {
+        if (!mountedRef.current || requestId !== pollRequestSeq.current) return;
+        // より新しい取得が適用済みなら上書きしない（#949）
+        if (gen <= appliedGen.current) return;
+        appliedGen.current = gen;
+        dispatch({ type: "SUCCESS", status: branchStatus, sessions: allSessions });
+      })
+      .catch(() => {
+        // バックグラウンド同期の失敗は UI を乱さない（手動「再読み込み」でエラー表示）。
+        // loading は foreground load のみが管理するため、ここでは状態を更新しない
+      });
+  }, [beginPollRequest]);
 
   useEffect(() => {
     load();
   }, [load]);
 
+  usePeriodicSync({
+    enabled: syncEnabled,
+    intervalMs: GITHUB_SYNC_POLL_INTERVAL_MS,
+    onSync: poll,
+    // マウント時の初回 load と即時 sync の二重 dispatch を回避（#929）
+    skipInitialSync: true,
+  });
+
   const { status: branchStatus, sessions, loading, error } = state;
 
   if (loading) {
@@ -239,7 +334,7 @@ function BranchTab() {
         </div>
         <button
           type="button"
-          onClick={load}
+          onClick={() => load()}
           className="mt-2 text-xs text-blue-400 hover:text-blue-300 flex items-center gap-1"
         >
           <RefreshCw className="w-3 h-3" />
@@ -296,7 +391,7 @@ function BranchTab() {
             <p className="text-xs font-medium text-gray-400">アクティブセッション</p>
             <button
               type="button"
-              onClick={load}
+              onClick={() => load()}
               className="text-gray-500 hover:text-gray-300 transition-colors"
               aria-label="再読み込み"
             >
@@ -333,11 +428,31 @@ function BranchTab() {
   );
 }
 
-export default function FileInfoPanel({ fileContent, collabUsers, onClose }: Props) {
+export default function FileInfoPanel({
+  fileContent,
+  collabUsers,
+  onClose,
+  panelResize,
+  syncEnabled = false,
+}: Props) {
   const [tab, setTab] = useState<Tab>("details");
 
   return (
-    <aside className="absolute inset-0 md:static md:w-72 z-20 border-l border-gray-700 bg-gray-800 flex flex-col shrink-0">
+    <aside
+      className={RESIZABLE_RIGHT_PANEL_ASIDE_CLASS}
+      style={panelResize != null ? { width: panelResize.width } : undefined}
+    >
+      {panelResize && panelResize.showResizeHandle !== false && (
+        <PanelResizeHandle
+          edge="inline-start"
+          onPointerDown={panelResize.onPointerDown}
+          width={panelResize.width}
+          minWidth={panelResize.minWidth}
+          maxWidth={panelResize.maxWidth}
+          onWidthChange={panelResize.onWidthChange}
+          ariaLabel="ファイル情報パネルの幅を変更"
+        />
+      )}
       {/* Header */}
       <div className="flex items-center justify-between px-3 py-2 border-b border-gray-700 shrink-0">
         <h3 className="text-sm font-semibold text-gray-300">ファイル情報</h3>
@@ -375,7 +490,7 @@ export default function FileInfoPanel({ fileContent, collabUsers, onClose }: Pro
         {tab === "history" && (
           <HistoryTab filePath={fileContent.path} />
         )}
-        {tab === "branch" && <BranchTab />}
+        {tab === "branch" && <BranchTab syncEnabled={syncEnabled} />}
       </div>
     </aside>
   );

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

@@ -0,0 +1,93 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+
+vi.mock("@/lib/api", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@/lib/api")>();
+  return {
+    ...actual,
+    listIssueCommentsApi: vi.fn(),
+    createIssueCommentApi: vi.fn(),
+  };
+});
+
+const mockShowToast = vi.hoisted(() => vi.fn());
+vi.mock("@/contexts/ToastContext", () => ({
+  useToast: () => ({ showToast: mockShowToast }),
+}));
+
+vi.mock("@/components/FileContentView", () => ({
+  default: ({ content }: { content: string }) => (
+    <div data-testid="comment-body">{content}</div>
+  ),
+}));
+
+import { listIssueCommentsApi, createIssueCommentApi } from "@/lib/api";
+import IssueCommentThread from "./IssueCommentThread";
+
+const mockList = vi.mocked(listIssueCommentsApi);
+const mockCreate = vi.mocked(createIssueCommentApi);
+
+const COMMENT = {
+  id: 1001,
+  body: "Hello from GitHub",
+  author: "alice",
+  createdAt: "2026-05-19T10:00:00Z",
+  updatedAt: "2026-05-19T10:00:00Z",
+  url: "https://github.com/org/repo/issues/42#issuecomment-1001",
+};
+
+describe("IssueCommentThread", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockList.mockResolvedValue({ comments: [] });
+  });
+
+  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");
+    });
+  });
+
+  it("canEdit=true のとき投稿フォームを表示する", async () => {
+    render(<IssueCommentThread issueNumber={42} canEdit={true} />);
+    await waitFor(() => {
+      expect(screen.getByPlaceholderText("Markdown でコメントを入力…")).toBeTruthy();
+      expect(screen.getByText("コメント投稿")).toBeTruthy();
+    });
+  });
+
+  it("canEdit=false のとき投稿フォームを非表示にする", async () => {
+    render(<IssueCommentThread issueNumber={42} canEdit={false} />);
+    await waitFor(() => {
+      expect(screen.queryByPlaceholderText("Markdown でコメントを入力…")).toBeNull();
+    });
+  });
+
+  it("コメント投稿成功後に一覧へ追加する", async () => {
+    const newComment = { ...COMMENT, id: 1002, body: "Posted" };
+    mockCreate.mockResolvedValue(newComment);
+    render(<IssueCommentThread issueNumber={42} canEdit={true} />);
+    await waitFor(() => expect(screen.getByText("コメント投稿")).toBeTruthy());
+
+    fireEvent.change(screen.getByPlaceholderText("Markdown でコメントを入力…"), {
+      target: { value: "Posted" },
+    });
+    fireEvent.click(screen.getByText("コメント投稿"));
+
+    await waitFor(() => {
+      expect(mockCreate).toHaveBeenCalledWith(42, "Posted");
+      expect(screen.getByText("Posted")).toBeTruthy();
+    });
+  });
+
+  it("読み込み失敗時にエラーメッセージを表示する", async () => {
+    mockList.mockRejectedValue(new Error("GitHub API unavailable"));
+    render(<IssueCommentThread issueNumber={42} canEdit={true} />);
+    await waitFor(() => {
+      expect(screen.getByText("GitHub API unavailable")).toBeTruthy();
+    });
+  });
+});

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

@@ -0,0 +1,156 @@
+import { useState, useEffect, useCallback, lazy, Suspense } from "react";
+import { MessageSquare, Send, ExternalLink } from "lucide-react";
+import {
+  listIssueCommentsApi,
+  createIssueCommentApi,
+  getErrorMessage,
+  type IssueComment,
+} from "@/lib/api";
+import { useToast } from "@/contexts/ToastContext";
+import { ContentSkeleton } from "@/components/Skeleton";
+import { ISSUE_MOBILE_ACTION_BUTTON } from "@/lib/issue-mobile-layout";
+
+const FileContentView = lazy(() => import("@/components/FileContentView"));
+
+type Props = {
+  issueNumber: number;
+  canEdit: boolean;
+};
+
+function formatDate(iso: string): string {
+  const d = new Date(iso);
+  return d.toLocaleString("ja-JP", {
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
+
+export default function IssueCommentThread({ issueNumber, canEdit }: Props) {
+  const { showToast } = useToast();
+  const [comments, setComments] = useState<IssueComment[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [loadError, setLoadError] = useState<string | null>(null);
+  const [draft, setDraft] = useState("");
+  const [posting, setPosting] = useState(false);
+
+  const loadComments = useCallback(async () => {
+    setLoading(true);
+    setLoadError(null);
+    try {
+      const data = await listIssueCommentsApi(issueNumber);
+      setComments(data.comments);
+    } catch (e) {
+      setComments([]);
+      setLoadError(getErrorMessage(e, "コメントの読み込みに失敗しました"));
+    } finally {
+      setLoading(false);
+    }
+  }, [issueNumber]);
+
+  useEffect(() => {
+    void loadComments();
+  }, [loadComments]);
+
+  const handlePost = async () => {
+    const text = draft.trim();
+    if (!text) return;
+    setPosting(true);
+    try {
+      const created = await createIssueCommentApi(issueNumber, text);
+      setComments((prev) => [...prev, created]);
+      setDraft("");
+      showToast("コメントを投稿しました", "success");
+    } catch (e) {
+      showToast(`コメント投稿に失敗しました: ${getErrorMessage(e)}`, "error");
+    } finally {
+      setPosting(false);
+    }
+  };
+
+  return (
+    <div className="border-t border-gray-700 pt-4 mt-4">
+      <h2 className="text-sm font-semibold text-gray-300 flex items-center gap-2 mb-3">
+        <MessageSquare className="w-4 h-4" />
+        コメント
+        {!loading && (
+          <span className="text-gray-500 font-normal">({comments.length})</span>
+        )}
+      </h2>
+
+      {loading && <ContentSkeleton />}
+
+      {!loading && loadError && (
+        <p className="text-sm text-red-400">{loadError}</p>
+      )}
+
+      {!loading && !loadError && comments.length === 0 && (
+        <p className="text-sm text-gray-500 italic">コメントはまだありません</p>
+      )}
+
+      {!loading && !loadError && comments.length > 0 && (
+        <ul className="space-y-3 mb-4">
+          {comments.map((c) => (
+            <li
+              key={c.id}
+              className="rounded border border-gray-700 bg-gray-800/60 px-3 py-2 text-sm"
+            >
+              <div className="flex items-baseline justify-between gap-2 mb-1">
+                <span className="font-medium text-gray-200">{c.author}</span>
+                <div className="flex items-center gap-2 shrink-0 text-xs text-gray-500">
+                  <span>{formatDate(c.createdAt)}</span>
+                  {c.url && (
+                    <a
+                      href={c.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-blue-400 hover:text-blue-300"
+                      aria-label="GitHub で開く"
+                    >
+                      <ExternalLink className="w-3 h-3" />
+                    </a>
+                  )}
+                </div>
+              </div>
+              {c.body ? (
+                <Suspense fallback={<ContentSkeleton />}>
+                  <FileContentView
+                    path={`issue-comment-${c.id}.md`}
+                    content={c.body}
+                    encoding="utf-8"
+                  />
+                </Suspense>
+              ) : (
+                <p className="text-gray-500 italic text-xs">（空のコメント）</p>
+              )}
+            </li>
+          ))}
+        </ul>
+      )}
+
+      {canEdit && (
+        <div className="space-y-2">
+          <label className="block text-xs text-gray-400">コメントを追加</label>
+          <textarea
+            value={draft}
+            onChange={(e) => setDraft(e.target.value)}
+            placeholder="Markdown でコメントを入力…"
+            rows={4}
+            disabled={posting}
+            className="w-full px-3 py-2 rounded bg-gray-900 border border-gray-600 text-gray-200 placeholder-gray-500 outline-none focus:border-blue-500 text-sm font-mono resize-y"
+          />
+          <button
+            type="button"
+            onClick={() => void handlePost()}
+            disabled={posting || !draft.trim()}
+            className={`${ISSUE_MOBILE_ACTION_BUTTON} bg-blue-600 hover:bg-blue-700 text-white transition-colors disabled:opacity-50 flex items-center justify-center gap-1.5`}
+          >
+            <Send className="w-3.5 h-3.5" />
+            {posting ? "投稿中…" : "コメント投稿"}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}