実装完了

作成・変更したファイル
バックエンド（新規）:

apps/mail/models.py — MailSender, MailEmail, MailNotificationToken
apps/mail/serializers.py
apps/mail/views.py — Windmill用API、フィードバック、ルール管理
apps/mail/urls.py
apps/mail/admin.py
マイグレーション（自動生成・適用済み）
バックエンド（変更）:

settings.py — apps.mail 追加、MAIL_API_KEY/FRONTEND_URL 環境変数
urls.py — /api/mail/ 追加
フロントエンド（新規）:

mail/feedback/[token]/page.tsx — 認証不要、フィードバック3択＋スコープ選択
mail/rules/page.tsx — ルール管理（一覧・追加・削除）
フロントエンド（変更）:

Navbar.tsx — 「メールルール」メニュー追加
types/index.ts — MailSender, MailEmailFeedback 型追加
次のステップ（Windmill側）
Keinaシステム側の実装は完了しています。次はWindmillにIMAPポーリングスクリプトを書く必要があります。Windmillのスクリプトが必要になったタイミングでお声がけください。

frontend/src/app/mail/feedback/[token]/page.tsx

@@ -0,0 +1,271 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useParams } from 'next/navigation';
+
+interface MailEmailFeedback {
+  id: number;
+  sender_email: string;
+  sender_domain: string;
+  subject: string;
+  body_preview: string;
+  received_at: string;
+  feedback: 'important' | 'not_important' | 'never_notify' | null;
+}
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
+
+export default function FeedbackPage() {
+  const params = useParams();
+  const token = params.token as string;
+
+  const [email, setEmail] = useState<MailEmailFeedback | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const [selected, setSelected] = useState<'important' | 'not_important' | 'never_notify' | null>(null);
+  const [showScopeChoice, setShowScopeChoice] = useState(false);
+  const [scope, setScope] = useState<'address' | 'domain'>('address');
+  const [submitting, setSubmitting] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+
+  useEffect(() => {
+    const fetchEmail = async () => {
+      try {
+        const res = await fetch(`${API_URL}/api/mail/feedback/${token}/`);
+        if (!res.ok) {
+          if (res.status === 404) {
+            setError('このフィードバックリンクは無効です');
+          } else {
+            setError('メール情報の取得に失敗しました');
+          }
+          return;
+        }
+        const data = await res.json();
+        setEmail(data);
+        if (data.feedback) {
+          setSelected(data.feedback);
+          if (data.feedback === 'never_notify') {
+            setShowScopeChoice(true);
+          }
+        }
+      } catch {
+        setError('サーバーに接続できませんでした');
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchEmail();
+  }, [token]);
+
+  const handleSelect = (value: 'important' | 'not_important' | 'never_notify') => {
+    setSelected(value);
+    setShowScopeChoice(value === 'never_notify');
+    setSubmitted(false);
+    if (value !== 'never_notify') {
+      submitFeedback(value, undefined);
+    }
+  };
+
+  const submitFeedback = async (
+    feedback: 'important' | 'not_important' | 'never_notify',
+    feedbackScope: 'address' | 'domain' | undefined
+  ) => {
+    setSubmitting(true);
+    try {
+      const body: Record<string, string> = { feedback };
+      if (feedbackScope) body.scope = feedbackScope;
+
+      const res = await fetch(`${API_URL}/api/mail/feedback/${token}/`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      });
+      if (!res.ok) throw new Error('送信に失敗しました');
+      setSubmitted(true);
+      setShowScopeChoice(false);
+      setEmail((prev) => (prev ? { ...prev, feedback } : prev));
+    } catch {
+      setError('送信に失敗しました。もう一度お試しください。');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const handleNeverNotifyConfirm = () => {
+    submitFeedback('never_notify', scope);
+  };
+
+  const formatDate = (iso: string) => {
+    const d = new Date(iso);
+    return d.toLocaleString('ja-JP', {
+      year: 'numeric', month: '2-digit', day: '2-digit',
+      hour: '2-digit', minute: '2-digit',
+    });
+  };
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+        <p className="text-gray-500">読み込み中...</p>
+      </div>
+    );
+  }
+
+  if (error && !email) {
+    return (
+      <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
+        <div className="bg-white rounded-lg shadow p-6 max-w-md w-full text-center">
+          <p className="text-red-600">{error}</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!email) return null;
+
+  const feedbackLabel = {
+    important: '✅ 重要だった',
+    not_important: '📧 普通のメール',
+    never_notify: '🔇 今後通知しない',
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-50 flex items-start justify-center p-4 pt-8">
+      <div className="bg-white rounded-lg shadow-lg w-full max-w-lg">
+
+        {/* ヘッダー */}
+        <div className="px-6 py-4 border-b border-gray-200">
+          <h1 className="text-lg font-bold text-green-700">KeinaSystem</h1>
+          <p className="text-xs text-gray-500 mt-0.5">メール通知フィードバック</p>
+        </div>
+
+        {/* メール情報 */}
+        <div className="px-6 py-4 space-y-2 border-b border-gray-200">
+          <div className="flex gap-2 text-sm">
+            <span className="text-gray-500 w-14 shrink-0">送信者</span>
+            <span className="text-gray-800 font-medium break-all">{email.sender_email}</span>
+          </div>
+          <div className="flex gap-2 text-sm">
+            <span className="text-gray-500 w-14 shrink-0">件名</span>
+            <span className="text-gray-800 font-medium break-all">{email.subject}</span>
+          </div>
+          <div className="flex gap-2 text-sm">
+            <span className="text-gray-500 w-14 shrink-0">受信</span>
+            <span className="text-gray-600">{formatDate(email.received_at)}</span>
+          </div>
+          {email.body_preview && (
+            <div className="mt-3 p-3 bg-gray-50 rounded text-xs text-gray-600 whitespace-pre-wrap leading-relaxed">
+              {email.body_preview}
+            </div>
+          )}
+        </div>
+
+        {/* フィードバック操作 */}
+        <div className="px-6 py-4">
+          {submitted && (
+            <div className="mb-4 p-3 bg-green-50 border border-green-200 rounded text-sm text-green-700 text-center">
+              受け付けました
+            </div>
+          )}
+
+          {error && (
+            <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded text-sm text-red-600">
+              {error}
+            </div>
+          )}
+
+          {/* 現在のフィードバック表示 */}
+          {email.feedback && !submitted && (
+            <p className="text-xs text-gray-400 mb-3">
+              現在の評価: {feedbackLabel[email.feedback]} （変更できます）
+            </p>
+          )}
+
+          <div className="space-y-2">
+            {/* 重要だった */}
+            <button
+              onClick={() => handleSelect('important')}
+              disabled={submitting}
+              className={`w-full text-left px-4 py-3 rounded-lg border text-sm font-medium transition-colors disabled:opacity-50 ${
+                selected === 'important'
+                  ? 'bg-green-50 border-green-400 text-green-700'
+                  : 'border-gray-200 text-gray-700 hover:bg-gray-50'
+              }`}
+            >
+              ✅ 重要だった
+            </button>
+
+            {/* 普通のメール */}
+            <button
+              onClick={() => handleSelect('not_important')}
+              disabled={submitting}
+              className={`w-full text-left px-4 py-3 rounded-lg border text-sm font-medium transition-colors disabled:opacity-50 ${
+                selected === 'not_important'
+                  ? 'bg-blue-50 border-blue-400 text-blue-700'
+                  : 'border-gray-200 text-gray-700 hover:bg-gray-50'
+              }`}
+            >
+              📧 普通のメール（通知不要）
+            </button>
+
+            {/* 今後通知しない */}
+            <button
+              onClick={() => handleSelect('never_notify')}
+              disabled={submitting}
+              className={`w-full text-left px-4 py-3 rounded-lg border text-sm font-medium transition-colors disabled:opacity-50 ${
+                selected === 'never_notify'
+                  ? 'bg-orange-50 border-orange-400 text-orange-700'
+                  : 'border-gray-200 text-gray-700 hover:bg-gray-50'
+              }`}
+            >
+              🔇 今後通知しない
+            </button>
+
+            {/* 今後通知しない → スコープ選択 */}
+            {showScopeChoice && (
+              <div className="ml-4 mt-1 p-4 bg-orange-50 border border-orange-200 rounded-lg space-y-3">
+                <p className="text-xs text-orange-700 font-medium">通知をやめる範囲を選んでください</p>
+                <label className="flex items-start gap-3 cursor-pointer">
+                  <input
+                    type="radio"
+                    name="scope"
+                    value="address"
+                    checked={scope === 'address'}
+                    onChange={() => setScope('address')}
+                    className="mt-0.5 text-orange-500 focus:ring-orange-400"
+                  />
+                  <div>
+                    <p className="text-sm text-gray-800 font-medium">このアドレスだけ</p>
+                    <p className="text-xs text-gray-500">{email.sender_email}</p>
+                  </div>
+                </label>
+                <label className="flex items-start gap-3 cursor-pointer">
+                  <input
+                    type="radio"
+                    name="scope"
+                    value="domain"
+                    checked={scope === 'domain'}
+                    onChange={() => setScope('domain')}
+                    className="mt-0.5 text-orange-500 focus:ring-orange-400"
+                  />
+                  <div>
+                    <p className="text-sm text-gray-800 font-medium">このドメインごと</p>
+                    <p className="text-xs text-gray-500">{email.sender_domain}</p>
+                  </div>
+                </label>
+                <button
+                  onClick={handleNeverNotifyConfirm}
+                  disabled={submitting}
+                  className="w-full py-2 bg-orange-500 text-white text-sm font-medium rounded-lg hover:bg-orange-600 disabled:opacity-50 transition-colors"
+                >
+                  {submitting ? '送信中...' : '確定する'}
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/app/mail/rules/page.tsx

@@ -0,0 +1,218 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { Trash2, Plus, Mail } from 'lucide-react';
+import Navbar from '@/components/Navbar';
+import { api } from '@/lib/api';
+
+interface MailSender {
+  id: number;
+  type: 'address' | 'domain';
+  email: string | null;
+  domain: string | null;
+  rule: 'never_notify';
+  note: string;
+  created_at: string;
+}
+
+export default function MailRulesPage() {
+  const router = useRouter();
+  const [senders, setSenders] = useState<MailSender[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // 追加フォーム
+  const [addType, setAddType] = useState<'address' | 'domain'>('address');
+  const [addValue, setAddValue] = useState('');
+  const [addNote, setAddNote] = useState('');
+  const [adding, setAdding] = useState(false);
+  const [addError, setAddError] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetchSenders();
+  }, []);
+
+  const fetchSenders = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await api.get('/mail/senders/');
+      setSenders(res.data);
+    } catch {
+      setError('ルール一覧の取得に失敗しました');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleDelete = async (id: number) => {
+    if (!confirm('このルールを削除してもよいですか？')) return;
+    try {
+      await api.delete(`/mail/senders/${id}/`);
+      setSenders((prev) => prev.filter((s) => s.id !== id));
+    } catch {
+      alert('削除に失敗しました');
+    }
+  };
+
+  const handleAdd = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setAddError(null);
+
+    if (!addValue.trim()) {
+      setAddError('値を入力してください');
+      return;
+    }
+
+    setAdding(true);
+    try {
+      const body: Record<string, string> = {
+        rule: 'never_notify',
+        note: addNote.trim(),
+      };
+      if (addType === 'address') {
+        body.email = addValue.trim();
+      } else {
+        body.domain = addValue.trim();
+      }
+
+      const res = await api.post('/mail/senders/', body);
+      setSenders((prev) => [res.data, ...prev]);
+      setAddValue('');
+      setAddNote('');
+    } catch (err: unknown) {
+      if (err && typeof err === 'object' && 'response' in err) {
+        const axiosError = err as { response?: { data?: Record<string, string[]> } };
+        const data = axiosError.response?.data;
+        if (data) {
+          const messages = Object.values(data).flat().join(' ');
+          setAddError(messages || '追加に失敗しました');
+        } else {
+          setAddError('追加に失敗しました');
+        }
+      } else {
+        setAddError('追加に失敗しました');
+      }
+    } finally {
+      setAdding(false);
+    }
+  };
+
+  const formatDate = (iso: string) => {
+    const d = new Date(iso);
+    return d.toLocaleDateString('ja-JP', { year: 'numeric', month: '2-digit', day: '2-digit' });
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <Navbar />
+      <div className="max-w-3xl mx-auto px-4 py-8">
+        <div className="flex items-center gap-3 mb-6">
+          <Mail className="h-6 w-6 text-gray-600" />
+          <h1 className="text-2xl font-bold text-gray-900">メール通知ルール</h1>
+        </div>
+
+        {/* 追加フォーム */}
+        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-5 mb-6">
+          <h2 className="text-sm font-semibold text-gray-700 mb-4">ルールを追加</h2>
+          <form onSubmit={handleAdd} className="space-y-3">
+            <div className="flex gap-2">
+              <select
+                value={addType}
+                onChange={(e) => setAddType(e.target.value as 'address' | 'domain')}
+                className="px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-green-500"
+              >
+                <option value="address">アドレス</option>
+                <option value="domain">ドメイン</option>
+              </select>
+              <input
+                type="text"
+                value={addValue}
+                onChange={(e) => setAddValue(e.target.value)}
+                placeholder={addType === 'address' ? 'promo@example.com' : 'example.com'}
+                className="flex-1 px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-green-500"
+              />
+            </div>
+            <div className="flex gap-2">
+              <input
+                type="text"
+                value={addNote}
+                onChange={(e) => setAddNote(e.target.value)}
+                placeholder="メモ（任意）例: ○○の営業メール"
+                className="flex-1 px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-green-500"
+              />
+              <button
+                type="submit"
+                disabled={adding}
+                className="flex items-center gap-1.5 px-4 py-2 bg-green-600 text-white text-sm font-medium rounded-md hover:bg-green-700 disabled:opacity-50 transition-colors"
+              >
+                <Plus className="h-4 w-4" />
+                追加
+              </button>
+            </div>
+            {addError && (
+              <p className="text-sm text-red-600">{addError}</p>
+            )}
+          </form>
+        </div>
+
+        {/* ルール一覧 */}
+        <div className="bg-white rounded-lg shadow-sm border border-gray-200">
+          <div className="px-5 py-3 border-b border-gray-200">
+            <h2 className="text-sm font-semibold text-gray-700">
+              通知しない送信者一覧
+              {!loading && <span className="ml-2 text-gray-400 font-normal">（{senders.length}件）</span>}
+            </h2>
+          </div>
+
+          {loading && (
+            <div className="p-8 text-center text-gray-400 text-sm">読み込み中...</div>
+          )}
+
+          {error && (
+            <div className="p-4 text-center text-red-600 text-sm">{error}</div>
+          )}
+
+          {!loading && !error && senders.length === 0 && (
+            <div className="p-8 text-center text-gray-400 text-sm">
+              登録されているルールはありません
+            </div>
+          )}
+
+          {!loading && !error && senders.length > 0 && (
+            <div className="divide-y divide-gray-100">
+              {senders.map((sender) => (
+                <div key={sender.id} className="flex items-center gap-3 px-5 py-3">
+                  <span className={`text-xs px-2 py-0.5 rounded-full font-medium shrink-0 ${
+                    sender.type === 'address'
+                      ? 'bg-blue-100 text-blue-700'
+                      : 'bg-purple-100 text-purple-700'
+                  }`}>
+                    {sender.type === 'address' ? 'アドレス' : 'ドメイン'}
+                  </span>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm font-medium text-gray-800 truncate">
+                      {sender.email || sender.domain}
+                    </p>
+                    {sender.note && (
+                      <p className="text-xs text-gray-400 truncate">{sender.note}</p>
+                    )}
+                  </div>
+                  <span className="text-xs text-gray-400 shrink-0">{formatDate(sender.created_at)}</span>
+                  <button
+                    onClick={() => handleDelete(sender.id)}
+                    className="text-gray-300 hover:text-red-500 transition-colors shrink-0"
+                    title="削除"
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/Navbar.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useRouter, usePathname } from 'next/navigation';
-import { LogOut, Wheat, MapPin, FileText, Upload, LayoutDashboard } from 'lucide-react';
+import { LogOut, Wheat, MapPin, FileText, Upload, LayoutDashboard, Mail } from 'lucide-react';
 import { logout } from '@/lib/api';
 
 export default function Navbar() {
@@ -78,6 +78,17 @@ export default function Navbar() {
                 <Upload className="h-4 w-4 mr-2" />
                 データ取込
               </button>
+              <button
+                onClick={() => router.push('/mail/rules')}
+                className={`flex items-center px-3 py-2 text-sm rounded-md transition-colors ${
+                  pathname?.startsWith('/mail/')
+                    ? 'text-green-700 bg-green-50'
+                    : 'text-gray-700 hover:text-gray-900 hover:bg-gray-100'
+                }`}
+              >
+                <Mail className="h-4 w-4 mr-2" />
+                メールルール
+              </button>
             </div>
           </div>
           <div className="flex items-center">

frontend/src/types/index.ts

@@ -55,3 +55,23 @@ export interface Plan {
   variety_name: string;
   notes: string | null;
 }
+
+export interface MailSender {
+  id: number;
+  type: 'address' | 'domain';
+  email: string | null;
+  domain: string | null;
+  rule: 'never_notify';
+  note: string;
+  created_at: string;
+}
+
+export interface MailEmailFeedback {
+  id: number;
+  sender_email: string;
+  sender_domain: string;
+  subject: string;
+  body_preview: string;
+  received_at: string;
+  feedback: 'important' | 'not_important' | 'never_notify' | null;
+}