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

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

@@ -1,13 +1,19 @@
 import { useState, useRef } from "react";
-import { X, RefreshCw, Send, Trash2, CheckCircle, ChevronDown, ChevronRight, Reply } from "lucide-react";
+import { X, RefreshCw, Send, Trash2, CheckCircle, ChevronDown, ChevronRight, Reply, Pencil, MessageSquare } from "lucide-react";
 import type { UseCommentsReturn, Comment } from "@/hooks/useComments";
+import type { CommentAnchor } from "@/lib/commentAnchor";
 import type { UserInfo } from "@/lib/api";
+import PanelResizeHandle from "@/components/PanelResizeHandle";
+import { RESIZABLE_RIGHT_PANEL_ASIDE_CLASS, type PanelResizeProps } from "@/lib/resizable-panel";
 
 type Props = {
   filePath: string;
   currentUser: UserInfo | null;
   comments: UseCommentsReturn;
+  pendingAnchor: CommentAnchor | null;
+  onClearAnchor: () => void;
   onClose: () => void;
+  panelResize?: PanelResizeProps;
 };
 
 function formatDate(iso: string): string {
@@ -25,6 +31,7 @@ type CommentItemProps = {
   currentUser: UserInfo | null;
   onResolve: (id: string) => Promise<boolean>;
   onDelete: (id: string) => Promise<boolean>;
+  onEdit: (id: string, body: string) => Promise<boolean>;
   onReply: (parentId: string, parentText: string) => void;
   replies: Comment[];
 };
@@ -34,10 +41,14 @@ function CommentItem({
   currentUser,
   onResolve,
   onDelete,
+  onEdit,
   onReply,
   replies,
 }: CommentItemProps) {
   const [expanded, setExpanded] = useState(true);
+  const [editing, setEditing] = useState(false);
+  const [editBody, setEditBody] = useState(comment.body);
+  const [savingEdit, setSavingEdit] = useState(false);
   const isResolved = comment.resolved_at !== null;
   const isAuthor = currentUser?.id === comment.author_id;
   const isAdmin = currentUser?.role === "admin";
@@ -92,13 +103,49 @@ function CommentItem({
       </div>
 
       {/* Body */}
-      <p className="px-2.5 pb-2 text-gray-200 whitespace-pre-wrap break-words">
-        {comment.body}
-      </p>
+      {editing ? (
+        <div className="px-2.5 pb-2 space-y-1">
+          <textarea
+            value={editBody}
+            onChange={(e) => setEditBody(e.target.value)}
+            rows={3}
+            className="w-full resize-none rounded bg-gray-900 border border-gray-600 text-xs text-gray-200 px-2 py-1.5 outline-none focus:border-blue-500"
+          />
+          <div className="flex justify-end gap-1">
+            <button
+              type="button"
+              onClick={() => {
+                setEditing(false);
+                setEditBody(comment.body);
+              }}
+              className="px-2 py-0.5 rounded text-xs text-gray-400 hover:text-gray-200"
+            >
+              キャンセル
+            </button>
+            <button
+              type="button"
+              disabled={!editBody.trim() || savingEdit}
+              onClick={async () => {
+                setSavingEdit(true);
+                const ok = await onEdit(comment.id, editBody.trim());
+                setSavingEdit(false);
+                if (ok) setEditing(false);
+              }}
+              className="px-2 py-0.5 rounded text-xs bg-blue-600 hover:bg-blue-700 text-white disabled:opacity-40"
+            >
+              {savingEdit ? "保存中…" : "保存"}
+            </button>
+          </div>
+        </div>
+      ) : (
+        <p className="px-2.5 pb-2 text-gray-200 whitespace-pre-wrap break-words">
+          {comment.body}
+        </p>
+      )}
 
       {/* Actions */}
       <div className="flex items-center gap-2 px-2.5 pb-2 text-gray-500">
-        {!isResolved && (
+        {!isResolved && !editing && (
           <button
             type="button"
             onClick={() => onReply(comment.id, comment.anchor_text ?? comment.body)}
@@ -109,7 +156,21 @@ function CommentItem({
             返信
           </button>
         )}
-        {!isResolved && canManage && (
+        {!isResolved && canManage && !editing && (
+          <button
+            type="button"
+            onClick={() => {
+              setEditBody(comment.body);
+              setEditing(true);
+            }}
+            className="flex items-center gap-0.5 hover:text-blue-400 transition-colors"
+            title="編集"
+          >
+            <Pencil className="w-3 h-3" />
+            編集
+          </button>
+        )}
+        {!isResolved && canManage && !editing && (
           <button
             type="button"
             onClick={() => onResolve(comment.id)}
@@ -120,7 +181,7 @@ function CommentItem({
             解決
           </button>
         )}
-        {canManage && (
+        {canManage && !editing && (
           <button
             type="button"
             onClick={() => onDelete(comment.id)}
@@ -162,7 +223,15 @@ function CommentItem({
   );
 }
 
-export default function CommentPanel({ filePath, currentUser, comments, onClose }: Props) {
+export default function CommentPanel({
+  filePath,
+  currentUser,
+  comments,
+  pendingAnchor,
+  onClearAnchor,
+  onClose,
+  panelResize,
+}: Props) {
   const {
     comments: allComments,
     loading,
@@ -171,6 +240,7 @@ export default function CommentPanel({ filePath, currentUser, comments, onClose
     reload,
     setIncludeResolved,
     addComment,
+    editComment,
     resolveComment,
     removeComment,
   } = comments;
@@ -191,12 +261,21 @@ export default function CommentPanel({ filePath, currentUser, comments, onClose
     const result = await addComment({
       file_path: filePath,
       body,
-      ...(replyTo ? { parent_id: replyTo.id } : {}),
+      ...(replyTo
+        ? { parent_id: replyTo.id }
+        : pendingAnchor
+          ? {
+              anchor_text: pendingAnchor.anchor_text,
+              position_from: pendingAnchor.position_from,
+              position_to: pendingAnchor.position_to,
+            }
+          : {}),
     });
     setSubmitting(false);
     if (result) {
       setNewBody("");
       setReplyTo(null);
+      onClearAnchor();
     }
   };
 
@@ -208,6 +287,7 @@ export default function CommentPanel({ filePath, currentUser, comments, onClose
   };
 
   const handleReply = (parentId: string, parentText: string) => {
+    onClearAnchor();
     setReplyTo({ id: parentId, preview: parentText });
     textareaRef.current?.focus();
   };
@@ -215,7 +295,21 @@ export default function CommentPanel({ filePath, currentUser, comments, onClose
   const canPost = currentUser?.role !== "viewer";
 
   return (
-    <aside className="absolute inset-0 md:static md:w-80 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="コメントパネルの幅を変更"
+        />
+      )}
       {/* Panel 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">
@@ -275,6 +369,7 @@ export default function CommentPanel({ filePath, currentUser, comments, onClose
               currentUser={currentUser}
               onResolve={resolveComment}
               onDelete={removeComment}
+              onEdit={editComment}
               onReply={handleReply}
               replies={repliesFor(comment.id)}
             />
@@ -284,6 +379,20 @@ export default function CommentPanel({ filePath, currentUser, comments, onClose
       {/* New comment form */}
       {canPost && (
         <div className="border-t border-gray-700 p-2 shrink-0">
+          {pendingAnchor && !replyTo && (
+            <div className="mb-1.5 flex items-start gap-1 text-xs text-gray-400 bg-yellow-500/10 border border-yellow-500/30 rounded px-2 py-1">
+              <MessageSquare className="w-3 h-3 mt-0.5 shrink-0 text-yellow-400" />
+              <span className="flex-1 truncate">{pendingAnchor.anchor_text}</span>
+              <button
+                type="button"
+                onClick={onClearAnchor}
+                className="text-gray-500 hover:text-gray-300 shrink-0"
+                aria-label="アンカーを解除"
+              >
+                <X className="w-3 h-3" />
+              </button>
+            </div>
+          )}
           {replyTo && (
             <div className="mb-1.5 flex items-start gap-1 text-xs text-gray-400 bg-gray-700/50 rounded px-2 py-1">
               <Reply className="w-3 h-3 mt-0.5 shrink-0" />

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

@@ -0,0 +1,26 @@
+import { MessageSquare } from "lucide-react";
+
+type Props = {
+  top: number;
+  left: number;
+  onAddComment: () => void;
+};
+
+export default function CommentSelectionPopover({ top, left, onAddComment }: Props) {
+  return (
+    <div
+      className="fixed z-50 -translate-x-1/2 -translate-y-full"
+      style={{ top, left }}
+    >
+      <button
+        type="button"
+        onMouseDown={(e) => e.preventDefault()}
+        onClick={onAddComment}
+        className="flex items-center gap-1 rounded border border-gray-600 bg-gray-800 px-2 py-1 text-xs text-gray-100 shadow-lg hover:bg-gray-700 transition-colors"
+      >
+        <MessageSquare className="w-3.5 h-3.5" />
+        コメント
+      </button>
+    </div>
+  );
+}

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

@@ -0,0 +1,102 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent, act } from "@testing-library/react";
+import EditToolbar from "./EditToolbar";
+import type { EditSession } from "@/hooks/useEditSession";
+
+const BASE_SESSION: EditSession = {
+  branchName: "edit/user-20260329",
+  prNumber: 42,
+  prUrl: "https://github.com/org/repo/pull/42",
+  prGithub: null,
+  commitCount: 3,
+  businessDate: "2026-03-29",
+  status: "active",
+  changedFiles: ["docs/README.md"],
+};
+
+const defaultProps = {
+  saving: false,
+  error: null,
+  canEdit: true,
+  onCreatePr: vi.fn(async () => null),
+  onClearError: vi.fn(),
+};
+
+describe("EditToolbar", () => {
+  it("session の prNumber / prUrl を PR リンクに表示する", () => {
+    render(<EditToolbar session={BASE_SESSION} {...defaultProps} />);
+    const link = screen.getByRole("link", { name: /PR #42/i });
+    expect(link.getAttribute("href")).toBe(BASE_SESSION.prUrl);
+  });
+
+  it("session 更新時に PR 番号と URL が即座に追従する（リロード不要）", () => {
+    const { rerender } = render(
+      <EditToolbar session={BASE_SESSION} {...defaultProps} />,
+    );
+    expect(screen.getByRole("link", { name: /PR #42/i })).toBeTruthy();
+
+    const updated: EditSession = {
+      ...BASE_SESSION,
+      prNumber: 99,
+      prUrl: "https://github.com/org/repo/pull/99",
+    };
+    rerender(<EditToolbar session={updated} {...defaultProps} />);
+
+    const link = screen.getByRole("link", { name: /PR #99/i });
+    expect(link.getAttribute("href")).toBe(updated.prUrl);
+    expect(screen.queryByRole("link", { name: /PR #42/i })).toBeNull();
+  });
+
+  it("session が null のとき PR リンクを表示しない", () => {
+    render(<EditToolbar session={null} {...defaultProps} />);
+    expect(screen.queryByRole("link", { name: /PR #/i })).toBeNull();
+  });
+
+  it("prNumber が null のとき PR リンクを表示しない", () => {
+    render(
+      <EditToolbar
+        session={{ ...BASE_SESSION, prNumber: null, prUrl: null }}
+        {...defaultProps}
+      />,
+    );
+    expect(screen.queryByRole("link", { name: /PR #/i })).toBeNull();
+  });
+
+  it("コミットあり・PR 未作成時に PR 作成ボタンを表示する", () => {
+    render(
+      <EditToolbar
+        session={{ ...BASE_SESSION, prNumber: null, prUrl: null }}
+        {...defaultProps}
+      />,
+    );
+    expect(screen.getByRole("button", { name: /PR 作成/i })).toBeTruthy();
+  });
+
+  it("PR 作成後は onCreatePr のみ呼び出し、session 更新でリンクが表示される", async () => {
+    const onCreatePr = vi.fn(async () => "https://github.com/org/repo/pull/1");
+    const sessionNoPr: EditSession = {
+      ...BASE_SESSION,
+      prNumber: null,
+      prUrl: null,
+    };
+    const sessionWithPr: EditSession = {
+      ...BASE_SESSION,
+      prNumber: 1,
+      prUrl: "https://github.com/org/repo/pull/1",
+    };
+
+    const { rerender } = render(
+      <EditToolbar session={sessionNoPr} {...defaultProps} onCreatePr={onCreatePr} />,
+    );
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole("button", { name: /PR 作成/i }));
+    });
+    expect(onCreatePr).toHaveBeenCalledOnce();
+
+    rerender(
+      <EditToolbar session={sessionWithPr} {...defaultProps} onCreatePr={onCreatePr} />,
+    );
+    expect(screen.getByRole("link", { name: /PR #1/i })).toBeTruthy();
+  });
+});

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

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { GitPullRequest, GitBranch, Trash2, ExternalLink, AlertCircle, Loader2, Send, BookOpen } from "lucide-react";
+import { GitPullRequest, GitBranch, ExternalLink, AlertCircle, Loader2 } from "lucide-react";
 import type { EditSession } from "@/hooks/useEditSession";
 
 type Props = {
@@ -8,9 +8,6 @@ type Props = {
   error: string | null;
   canEdit: boolean;
   onCreatePr: () => Promise<string | null>;
-  onSubmitPr: () => Promise<boolean>;
-  onConvertToDraft: () => Promise<boolean>;
-  onDiscardChanges: () => Promise<boolean>;
   onClearError: () => void;
 };
 
@@ -36,13 +33,9 @@ export default function EditToolbar({
   error,
   canEdit,
   onCreatePr,
-  onSubmitPr,
-  onConvertToDraft,
-  onDiscardChanges,
   onClearError,
 }: Props) {
   const [actionState, setActionState] = useState<ActionState>("idle");
-  const [prUrl, setPrUrl] = useState<string | null>(session?.prUrl ?? null);
   const busy = saving || actionState === "busy";
 
   const run = async (fn: () => Promise<unknown>) => {
@@ -56,16 +49,13 @@ export default function EditToolbar({
   };
 
   const handleCreatePr = async () => {
-    const url = await onCreatePr();
-    if (url) setPrUrl(url);
+    await onCreatePr();
     setActionState("idle");
   };
 
   const prNumber = session?.prNumber ?? null;
-  const effectivePrUrl = prUrl ?? session?.prUrl ?? null;
+  const prUrl = session?.prUrl ?? null;
   const hasCommits = (session?.commitCount ?? 0) > 0;
-  const isDraft = session?.status === "draft";
-  const isSubmitted = session?.status === "submitted";
 
   if (!canEdit || !session) return null;
 
@@ -101,9 +91,9 @@ export default function EditToolbar({
       )}
 
       {/* PR link */}
-      {effectivePrUrl && (
+      {prUrl && prNumber != null && (
         <a
-          href={effectivePrUrl}
+          href={prUrl}
           target="_blank"
           rel="noopener noreferrer"
           className="flex items-center gap-1 text-blue-400 hover:text-blue-300 transition-colors"
@@ -129,45 +119,6 @@ export default function EditToolbar({
           PR 作成
         </button>
       )}
-
-      {prNumber && !isSubmitted && !isDraft && !busy && (
-        <button
-          type="button"
-          onClick={() => void run(onConvertToDraft)}
-          className="flex items-center gap-1 px-2 py-0.5 rounded text-yellow-400 hover:bg-yellow-900/30 border border-yellow-700/40 transition-colors"
-          title="PR をドラフトに変更する"
-        >
-          <BookOpen className="w-3 h-3" />
-          ドラフト
-        </button>
-      )}
-
-      {prNumber && !isSubmitted && !busy && (
-        <button
-          type="button"
-          onClick={() => void run(onSubmitPr)}
-          className="flex items-center gap-1 px-2 py-0.5 rounded bg-blue-600 hover:bg-blue-500 text-white transition-colors"
-          title="PR を提出する（マージ可能状態にする）"
-        >
-          <Send className="w-3 h-3" />
-          提出
-        </button>
-      )}
-
-      {hasCommits && !busy && (
-        <button
-          type="button"
-          onClick={() => {
-            if (!window.confirm("変更をすべて破棄しますか？ブランチとセッションが削除されます。")) return;
-            void run(onDiscardChanges);
-          }}
-          className="flex items-center gap-1 px-2 py-0.5 rounded text-red-400 hover:bg-red-900/30 border border-red-700/40 transition-colors"
-          title="変更を破棄してブランチを削除する"
-        >
-          <Trash2 className="w-3 h-3" />
-          破棄
-        </button>
-      )}
     </div>
   );
 }