comment-mode

コメントモード

テキストに対するきめ細かなフィードバックを得るため、クリックするとコメントが表示される、ハイライト付きの HTML を生成します。文章を書き直す代わりに使えます。ユーザーは自分の文体を保ったまま、コメントを一つずつ確認できます。

仕様

入力：

• コメント対象の下書きテキスト（直接貼り付けるか、ファイルパスを指定）
• 任意の観点：編集者としてのフィードバック、視点のシミュレーション（例：「brian ならどう反応するか」）、特定の観点に限定（例：「単語選びのみ」）

出力：

• ハイライトされた箇所と、クリックすると表示されるコメントオーバーレイを含む HTML ファイル _private/views/{name}-comments-temp.html

作成／変更：

• _private/views/{name}-comments-temp.html に書き込みます

外部への副作用：

• open _private/views/{name}-comments-temp.html を実行し、既定のブラウザーでファイルを開きます

確認が必要な場合：

• ありません。ファイルは _private/ 内の一時的な表示用ファイルであり、ソースファイルは変更しません。

委任先：

• ありません。

使用する場面

• ユーザーが「これにコメントして」「コメントを残して」「フィードバックをください」と言った場合
• ユーザーがテキストを貼り付けて、フィードバックや批評を求めた場合
• 全文の書き直しではなく、対象を絞ったフィードバックを求めている場合

コメントする前に確認すること

依頼の範囲が曖昧な場合は、AskUserQuestion を使って確認します。コメントが多すぎて圧倒したり、少なすぎて要点を逃したりしないようにします。

確認する場合：

• 観点の指定がない → どの観点を希望するか尋ねます
• 文書が長い → 全体を対象にするか、重要なセクションだけにするか尋ねます
• 想定読者が不明 → 誰に向けた文書か尋ねます（視点に基づくコメントに影響します）

確認を省略する場合：

• 観点が明示されている（「単語選びのみコメントして」など）
• 文書が短い（500 語未満）
• 会話の文脈から意図が明らか

確認の例：

User: "comment on this"
[long doc, no lens specified]

→ Use AskUserQuestion:
  "What should I focus on?"
  Options:
  - "Editor feedback (structure, clarity, word choice)"
  - "Recipient POV (how [person] would react)"
  - "Specific angle (tell me what)"

観点

観点	色	コメントのスタイル
編集者	黄色（#fff3cd）	気づいた点や提案：「書き出しが弱い」「ここに根拠を追加」
視点（人物として）	青色（#e3f2fd）	その人物の視点からの反応：「これはもう知っている」「法務は大騒ぎしそう」
焦点を絞る	黄色	特定の観点のみ：「単語選び」「トーン」「弱い論拠」

コメントのスタイル

• 常に小文字にします
• 短くまとめます（5～15 語）
• 内容に合った形式にします。指摘には気づいた点、代案が役立つ場合は提案、視点をシミュレートする場合は反応を使います
• 伝える価値のある箇所にだけコメントします。網羅するより、絞り込むことを優先します

出力ルール

必ず行うこと：

• _private/views/{name}-comments-temp.html に書き込みます
• open _private/views/{name}-comments-temp.html で開きます
• 観点に合ったハイライト色を使います
• コメントは少数に絞り、重要度の高い内容にします

行わないこと：

• すべてにコメントしません。明らかな修正点や気づきがある箇所だけにします
• コメントで詳しく説明しすぎません。簡潔にまとめます
• 1 つの出力で複数の観点を混在させません。観点を 1 つ選び、統一します

テンプレート

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{title}</title>
  <style>
    * { box-sizing: border-box; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      max-width: 700px;
      margin: 0 auto;
      padding: 40px 20px;
      line-height: 1.7;
      color: #1a1a1a;
      background: #fafafa;
    }
    h1, h2, h3 { margin-top: 2em; font-weight: 600; }
    h1 { font-size: 1.4em; }
    h2 { font-size: 1.2em; color: #333; }
    p { margin: 1em 0; }

    .highlight {
      background: {highlight-bg};  /* #fff3cd yellow for editor, #e3f2fd blue for POV */
      padding: 1px 4px;
      border-radius: 3px;
      cursor: pointer;
      border-bottom: 2px solid {highlight-border};  /* #ffc107 for editor, #2196f3 for POV */
      transition: background 0.15s;
    }
    .highlight:hover, .highlight.active {
      background: {highlight-hover};  /* #ffe69c for editor, #bbdefb for POV */
    }

    .comment {
      display: none;
      background: {comment-bg};  /* #1a1a1a for editor, #0052cc for POV */
      color: #fff;
      padding: 8px 12px;
      border-radius: 6px;
      font-size: 0.85em;
      margin: 8px 0;
      line-height: 1.5;
    }
    .comment.show { display: block; }

    .section-break {
      border: none;
      border-top: 1px solid #ddd;
      margin: 2em 0;
    }

    .legend {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background: #fff;
      padding: 12px 16px;
      border-radius: 8px;
      box-shadow: 0 2px 12px rgba(0,0,0,0.1);
      font-size: 0.8em;
      color: #666;
    }
  </style>
</head>
<body>

{content with <span class="highlight" data-comment="comment text">highlighted phrase</span>}

<div class="legend">{count} comments · click highlights to reveal</div>

<script>
document.querySelectorAll('.highlight').forEach(el => {
  const commentText = el.getAttribute('data-comment');
  const commentDiv = document.createElement('div');
  commentDiv.className = 'comment';
  commentDiv.textContent = commentText;
  el.insertAdjacentElement('afterend', commentDiv);

  el.addEventListener('click', () => {
    const wasActive = el.classList.contains('active');
    document.querySelectorAll('.highlight').forEach(h => h.classList.remove('active'));
    document.querySelectorAll('.comment').forEach(c => c.classList.remove('show'));
    if (!wasActive) {
      el.classList.add('active');
      commentDiv.classList.add('show');
    }
  });
});
</script>
</body>
</html>

色の参照

編集者の観点（黄色）：

.highlight { background: #fff3cd; border-bottom: 2px solid #ffc107; }
.highlight:hover, .highlight.active { background: #ffe69c; }
.comment { background: #1a1a1a; }

視点の観点（青色）：

.highlight { background: #e3f2fd; border-bottom: 2px solid #2196f3; }
.highlight:hover, .highlight.active { background: #bbdefb; }
.comment { background: #0052cc; }

ワークフロー

1. ユーザーがテキストを貼り付け、コメントを依頼します
2. 曖昧な場合：AskUserQuestion を使って観点や範囲を確認します
3. テキストを読み、コメントする価値のある重要な表現を特定します（少数に絞り、重要度の高い箇所を選びます）
4. ハイライトと data-comment 属性を含む HTML を生成します
5. _private/views/{name}-comments-temp.html に書き込みます
6. open _private/views/{name}-comments-temp.html を実行します

例

編集者の観点：

User: "comment on this, focus on word choice"
→ Yellow highlights, suggestions like "vague, try 'specifically'" or "jargon, simplify"

視点の観点：

User: "comment on this as brian would react"
→ Blue highlights, reactions like "i already know this" or "legal would push back here"

焦点を絞った観点：

User: "leave comments on this, only flag weak arguments"
→ Yellow highlights on weak claims, comments like "needs evidence" or "assumes too much"

少数に絞った鋭い観点：

User: "comment only where there's an obvious fix"
→ Minimal highlights, only typos, missing words, or clear improvements