Merge pull request #1101 from smalruby/feature/admin-claude-prompts

feat(admin): バグ報告詳細に状態別のClaude連携プロンプト(ワンクリックコピー)

Author: smalruby3-editor-bot[bot]

docs/admin/README.md

@@ -18,7 +18,7 @@
 
 1. **みんなの課題**（S3 #1083）: 通報キュー（多い順）/ 全投稿一覧 / 詳細（ページ・画像・クレジット）/ 非公開⇄再公開（2 段階確認・audit）
 2. **クラス・課題**（S4 #1084）: 全クラス検索（参加コード完全一致・名前部分一致）/ 詳細（参加・提出カウント）/ アーカイブ切替 / **期限切れクラスの復元**（ddb-archive スナップショット検索 → dry-run プラン → 実行。EPIC #1049 の CLI `bin/restore-classroom.ts` の UI 後継）
-3. **バグ報告**（S5 #1085 + 対応機能追加）: 既存バグ報告の一覧・状態フィルタ・詳細・添付 presigned DL に加え、**状態の変更と進捗コメント（開発者からの返信）**を既存 bug-report admin API の PATCH で行える（2 段階確認・終端ステータスは自動削除 TTL の警告つき。返信は報告者の「私の不具合報告」に表示され、非表示にしていた報告も再表示される — サーバー側の既存挙動）
+3. **バグ報告**（S5 #1085 + 対応機能追加）: 既存バグ報告の一覧・状態フィルタ・詳細・添付 presigned DL に加え、**状態の変更と進捗コメント（開発者からの返信）**を既存 bug-report admin API の PATCH で行える（2 段階確認・終端ステータスは自動削除 TTL の警告つき。返信は報告者の「私の不具合報告」に表示され、非表示にしていた報告も再表示される — サーバー側の既存挙動）。詳細には**状態に応じた Claude 連携プロンプト**（`/bug-report` スキル向け・受付→Issue 化 / 改修 / 解決返信 / 再開）が表示され、ワンクリックでコピーして Claude Code に貼り付けられる
 
 ## 認証・認可モデル（要点）
 
@@ -44,6 +44,7 @@
 | `src/components/bug-reports-view.jsx` | バグ報告閲覧（read-only） |
 | `src/lib/admin-api.js` | admin API クライアント（トークンはモジュールメモリ） |
 | `src/lib/bug-report-api.js` | bug-report API クライアント（一覧・詳細 + 状態/返信の PATCH。既存 API のみ使用） |
+| `src/lib/bug-report-prompts.js` | 状態別の Claude 連携プロンプト生成（`/bug-report` スキルにワンクリックコピーで渡す） |
 | `src/lib/google-auth.js` | GIS ロード + `?devlogin=` バイパス（stg のみ） |
 | `webpack.config.js` | 独立ビルド（publicPath `/admin/`、port 8602、DefinePlugin で endpoint 埋め込み） |
 

packages/admin/src/components/app.css

@@ -279,3 +279,24 @@ body {
     border: 1px solid hsl(220, 15%, 75%);
     border-radius: 0.4rem;
 }
+
+.admin-prompt {
+    margin-top: 0.75rem;
+}
+
+.admin-prompt-head {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 0.25rem;
+}
+
+.admin-prompt-head button {
+    padding: 0.2rem 0.7rem;
+    border: 1px solid hsl(260, 60%, 55%);
+    border-radius: 0.4rem;
+    background: white;
+    color: hsl(260, 60%, 45%);
+    cursor: pointer;
+    font-size: 0.85rem;
+}

packages/admin/src/components/app.jsx

@@ -112,7 +112,7 @@ const App = () => {
                     <h2>{SECTIONS.find(s => s.key === section).label}</h2>
                     {section === 'shared' && <SharedAssignmentsView />}
                     {section === 'classrooms' && <ClassroomsView />}
-                    {section === 'bug-reports' && <BugReportsView />}
+                    {section === 'bug-reports' && <BugReportsView stage={me.stage} />}
                 </main>
                 {sessionExpired && (
                     <div

packages/admin/src/components/bug-reports-view.jsx

@@ -8,6 +8,7 @@
 import PropTypes from 'prop-types';
 import {useCallback, useEffect, useState} from 'react';
 import {fetchBugReport, fetchBugReports, updateBugReport} from '../lib/bug-report-api.js';
+import {buildClaudePrompts} from '../lib/bug-report-prompts.js';
 
 const STATUS_LABELS = {
     open: '未対応',
@@ -44,14 +45,15 @@ const hideBrokenImage = event => {
     event.currentTarget.style.display = 'none';
 };
 
-const BugReportDetail = ({reportId, onBack, onChanged}) => {
+const BugReportDetail = ({reportId, stage, onBack, onChanged}) => {
     const [detail, setDetail] = useState(null);
     const [error, setError] = useState('');
     const [nextStatus, setNextStatus] = useState('');
     const [reply, setReply] = useState('');
     const [confirming, setConfirming] = useState(false);
     const [busy, setBusy] = useState(false);
     const [savedAt, setSavedAt] = useState(null);
+    const [copiedKey, setCopiedKey] = useState(null);
 
     useEffect(() => {
         fetchBugReport(reportId)
@@ -93,6 +95,16 @@ const BugReportDetail = ({reportId, onBack, onChanged}) => {
         }
     }, [detail, nextStatus, reply, reportId, onChanged]);
 
+    const handleCopyPrompt = useCallback(async e => {
+        const {key, prompt} = e.currentTarget.dataset;
+        try {
+            await navigator.clipboard.writeText(prompt);
+            setCopiedKey(key);
+        } catch {
+            setCopiedKey(null);
+        }
+    }, []);
+
     if (error && !detail) {
         return (<p
             className="admin-error"
@@ -220,17 +232,47 @@ const BugReportDetail = ({reportId, onBack, onChanged}) => {
                     ) : null}
                 </div>
             </div>
+            <div
+                className="admin-respond"
+                data-testid="bug-admin-claude"
+            >
+                <h4>{'Claude に依頼（/bug-report スキル）'}</h4>
+                <p className="admin-meta">
+                    {'いまの状態に合わせたプロンプト案です。コピーして Claude Code に貼り付けてください。'}
+                </p>
+                {buildClaudePrompts(detail, stage).map(suggestion => (
+                    <div
+                        className="admin-prompt"
+                        key={suggestion.key}
+                    >
+                        <div className="admin-prompt-head">
+                            <strong>{suggestion.title}</strong>
+                            <button
+                                data-key={suggestion.key}
+                                data-prompt={suggestion.prompt}
+                                data-testid={`bug-admin-copy-${suggestion.key}`}
+                                type="button"
+                                onClick={handleCopyPrompt}
+                            >
+                                {copiedKey === suggestion.key ? 'コピーしました ✓' : 'コピー'}
+                            </button>
+                        </div>
+                        <pre className="admin-pre">{suggestion.prompt}</pre>
+                    </div>
+                ))}
+            </div>
         </div>
     );
 };
 
 BugReportDetail.propTypes = {
     onBack: PropTypes.func.isRequired,
     onChanged: PropTypes.func.isRequired,
-    reportId: PropTypes.string.isRequired
+    reportId: PropTypes.string.isRequired,
+    stage: PropTypes.string
 };
 
-const BugReportsView = () => {
+const BugReportsView = ({stage}) => {
     const [status, setStatus] = useState('');
     const [reports, setReports] = useState(null);
     const [selectedId, setSelectedId] = useState(null);
@@ -254,6 +296,7 @@ const BugReportsView = () => {
         return (
             <BugReportDetail
                 reportId={selectedId}
+                stage={stage}
                 onBack={handleBack}
                 onChanged={reload}
             />
@@ -323,4 +366,8 @@ const BugReportsView = () => {
     );
 };
 
+BugReportsView.propTypes = {
+    stage: PropTypes.string
+};
+
 export default BugReportsView;

packages/admin/src/lib/bug-report-prompts.js

@@ -0,0 +1,105 @@
+/**
+ * Claude 連携プロンプト生成 (バグ報告)。
+ *
+ * バグ報告の受付・改修・返信は Claude の /bug-report スキル
+ * (.claude/skills/bug-report/SKILL.md) で進める運用。この lib は報告の
+ * 状態に応じた「次にやること」のプロンプト案を組み立て、管理画面から
+ * ワンクリックでコピーして Claude に貼れるようにする。
+ *
+ * スキル仕様に合わせる点:
+ * - サブコマンド: show / issue / reply <reportId> [stg|prod]
+ * - ステージ引数は prod がデフォルトなので stg のときだけ付ける
+ * - 返信 (developerReply) は子どもが読む前提のやさしい日本語
+ * - メールアドレスはマスキングされる前提 (プロンプトには含めない)
+ */
+
+/**
+ * @param {string} [stage] - deployment stage
+ * @returns {string} the stage argument for the skill ('' on prod)
+ */
+const stageArg = stage => (stage && stage !== 'prod' ? ` ${stage}` : '');
+
+/**
+ * 報告の 1 行コンテキスト (コピペ先で取り違えに気付けるように)。
+ * メールは含めない (スキル側のマスキング方針に合わせる)。
+ * @param {object} report - report detail
+ * @returns {string} one-line summary
+ */
+const contextLine = report => {
+    const name = report.projectName || '(プロジェクト名なし)';
+    const desc = String(report.description || '').slice(0, 60);
+    return `# ${name} / ${String(report.createdAt || '').slice(0, 10)} / ${desc}`;
+};
+
+/**
+ * 状態に応じた Claude 向けプロンプト案を返す。
+ * @param {object} report - report detail ({reportId, status, ...})
+ * @param {string} [stage] - 'stg' | 'prod' (既定 prod)
+ * @returns {{key: string, title: string, prompt: string}[]} suggestions
+ */
+const buildClaudePrompts = (report, stage) => {
+    const id = report.reportId;
+    const s = stageArg(stage);
+    const ctx = contextLine(report);
+
+    if (report.status === 'open') {
+        return [
+            {
+                key: 'triage',
+                title: '受付 → 再現確認 → Issue 化',
+                prompt: `/bug-report show ${id}${s}
+
+${ctx}
+上記の不具合報告を受け付けてください。添付作品をダウンロードして再現確認し、\
+再現したら /bug-report issue ${id}${s} で GitHub Issue 化してください。\
+最後に /bug-report reply ${id}${s} で状態を in_progress にし、\
+報告者へ「受け付けました」のやさしい返信を書き戻してください。`
+            },
+            {
+                key: 'quick-look',
+                title: 'まず内容だけ確認',
+                prompt: `/bug-report show ${id}${s}
+
+${ctx}
+上記の不具合報告の内容と添付を確認して、再現手順・原因の当たり・対応の要否を要約してください。書き戻しはまだしないでください。`
+            }
+        ];
+    }
+
+    if (report.status === 'in_progress') {
+        return [
+            {
+                key: 'fix',
+                title: '改修を進める',
+                prompt: `/bug-report show ${id}${s}
+
+${ctx}
+上記の不具合報告は対応中です。関連する GitHub Issue と修正状況を確認し、未修正なら原因を特定して改修を進めてください（TDD で。トピックブランチ + PR の通常フロー）。`
+            },
+            {
+                key: 'resolve',
+                title: '修正済み → 解決の返信',
+                prompt: `/bug-report reply ${id}${s}
+
+${ctx}
+上記の不具合の修正がリリース済みです。状態を resolved にして、報告者へ修正内容のやさしい返信（子ども向けの日本語）を書き戻してください。`
+            }
+        ];
+    }
+
+    // resolved / wont_fix — 完了後の見直し・再開
+    return [
+        {
+            key: 'reopen',
+            title: '対応を再開する',
+            prompt: `/bug-report show ${id}${s}
+
+${ctx}
+上記の報告は完了扱い（${report.status}）ですが、対応を再開します。内容を再確認し、\
+/bug-report reply ${id}${s} で状態を open に戻して（自動削除タイマーが解除されます）、\
+次のアクションを提案してください。`
+        }
+    ];
+};
+
+export {buildClaudePrompts};

packages/admin/test/unit/bug-report-prompts.test.js

@@ -0,0 +1,44 @@
+import {buildClaudePrompts} from '../../src/lib/bug-report-prompts.js';
+
+const report = {
+    reportId: 'abcd1234-5678-90ef-ghij-klmnopqrstuv',
+    projectName: 'ねこあつめ',
+    description: 'ブロックが消える',
+    createdAt: '2026-07-18T00:00:00.000Z',
+    status: 'open'
+};
+
+describe('buildClaudePrompts (/bug-report スキル連携)', () => {
+    test('open: 受付〜Issue 化 と 内容確認 の 2 案、フル reportId 入り', () => {
+        const prompts = buildClaudePrompts(report, 'prod');
+        expect(prompts.map(p => p.key)).toEqual(['triage', 'quick-look']);
+        expect(prompts[0].prompt).toContain(`/bug-report show ${report.reportId}`);
+        expect(prompts[0].prompt).toContain('in_progress');
+        expect(prompts[0].prompt).toContain('やさしい返信');
+        // 取り違え防止のコンテキスト行 (メールは含めない)
+        expect(prompts[0].prompt).toContain('# ねこあつめ / 2026-07-18 / ブロックが消える');
+    });
+
+    test('stg では skill のステージ引数が付き、prod では付かない (スキルの既定が prod)', () => {
+        const stg = buildClaudePrompts(report, 'stg');
+        expect(stg[0].prompt).toContain(`/bug-report show ${report.reportId} stg`);
+        const prod = buildClaudePrompts(report, 'prod');
+        expect(prod[0].prompt).not.toContain(' stg');
+    });
+
+    test('in_progress: 改修続行 と 解決の返信 (reply サブコマンド)', () => {
+        const prompts = buildClaudePrompts({...report, status: 'in_progress'}, 'prod');
+        expect(prompts.map(p => p.key)).toEqual(['fix', 'resolve']);
+        expect(prompts[1].prompt).toContain(`/bug-report reply ${report.reportId}`);
+        expect(prompts[1].prompt).toContain('resolved');
+    });
+
+    test('resolved / wont_fix: 再開プロンプト (open へ戻すと TTL 解除の注意つき)', () => {
+        for (const status of ['resolved', 'wont_fix']) {
+            const prompts = buildClaudePrompts({...report, status}, 'prod');
+            expect(prompts.map(p => p.key)).toEqual(['reopen']);
+            expect(prompts[0].prompt).toContain('open に戻して');
+            expect(prompts[0].prompt).toContain('自動削除タイマー');
+        }
+    });
+});

packages/admin/test/unit/bug-reports-view.test.jsx

@@ -112,6 +112,24 @@ describe('BugReportsView (issue #1085 + 状態変更/コメント)', () => {
         await waitFor(() => expect(mockUpdateReport).toHaveBeenCalledWith('r1', {status: 'resolved'}));
     });
 
+    test('Claude prompt suggestions match the status and copy on one click', async () => {
+        const writeText = jest.fn().mockResolvedValue();
+        Object.assign(navigator, {clipboard: {writeText}});
+
+        render(<BugReportsView stage="stg" />);
+        await waitFor(() => screen.getByTestId('bug-admin-item-r1'));
+        fireEvent.click(screen.getByTestId('bug-admin-item-r1'));
+        await waitFor(() => screen.getByTestId('bug-admin-detail'));
+
+        // status=open → 受付プロンプトが提示され、スキル呼び出し + stg 引数を含む
+        expect(screen.getByTestId('bug-admin-claude')).toBeInTheDocument();
+        const copy = screen.getByTestId('bug-admin-copy-triage');
+        fireEvent.click(copy);
+        await waitFor(() => expect(writeText).toHaveBeenCalled());
+        expect(writeText.mock.calls[0][0]).toContain('/bug-report show r1 stg');
+        await waitFor(() => expect(copy.textContent).toContain('コピーしました'));
+    });
+
     test('the confirmation can be cancelled without any API call', async () => {
         render(<BugReportsView />);
         await waitFor(() => screen.getByTestId('bug-admin-item-r1'));