Phase 2: Gmail IMAP fetch (IPv4), FR-2 source address, real mail in dashboard (AUD-67)

- internal/mailfetch: stdlib-only read-only IMAP client (LOGIN, SELECT,
  UID SEARCH, UID FETCH) that always dials tcp4; IPv6 to Gmail is broken
  from .13 and caused a socket EOF.
- MIME parsing to text, RFC2047 header decoding, FR-2 source address:
  X-Pm-Original-To -> To -> Received 'for <addr>' -> Return-Path, never
  Delivered-To. The matched header is recorded for audit.
- store: Message upsert/list/count + LogAction; schema migration v2 adds
  imap_uid and imap_uidvalidity.
- server: dashboard and /partials/inbox render real mail grouped by
  category with a recommended action; POST /actions/fetch runs a scan
  (CSRF-checked); nav counts; 'Check mail' button.
- config: GMAIL_USER, GMAIL_APP_PASSWORD, IMAP host/port/lookback/max.
- cmd: -fetch runs one scan and exits (n8n/CLI entry point, FR-1).
- compose/.env.example expose the Gmail + IMAP settings.
- tests: FR-2 precedence, MIME bodies, IMAP literal/parser, store
  upsert/migration, inbox rendering.

Co-Authored-By: Paperclip <noreply@paperclip.ing>

web/static/app.css

@@ -215,6 +215,17 @@ a:hover { text-decoration: underline; }
   border-bottom: 1px solid var(--hairline);
 }
 .panel-head h2 { font: var(--type-title); color: var(--ink); }
+.panel-actions { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; }
+
+/* scan status line above the message list */
+.scan-note-slot:empty { display: none; }
+.scan-note {
+  padding: var(--space-xs) var(--space-md);
+  font: var(--type-body-sm);
+  color: var(--ink-muted);
+  background: var(--surface-2);
+  border-bottom: 1px solid var(--hairline);
+}
 
 .panel-body { padding: var(--space-md); }
 
@@ -261,6 +272,21 @@ a:hover { text-decoration: underline; }
 
 /* centre list */
 .msg-list { display: flex; flex-direction: column; }
+.msg-group { display: flex; flex-direction: column; }
+.msg-group-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-sm);
+  padding: var(--space-xs) var(--space-md);
+  background: var(--surface-2);
+  border-bottom: 1px solid var(--hairline);
+  font: var(--type-eyebrow);
+  color: var(--ink-muted);
+  text-transform: uppercase;
+  letter-spacing: .125px;
+}
+.msg-group-head .count { font: var(--type-caption); color: var(--ink-faint); text-transform: none; }
 .msg-row {
   display: flex;
   align-items: center;
@@ -270,6 +296,15 @@ a:hover { text-decoration: underline; }
   border-bottom: 1px solid var(--hairline);
 }
 .msg-row:last-child { border-bottom: 0; }
+.msg-main { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
+.msg-from { font: var(--type-body-sm); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.msg-subject { font: var(--type-body-sm); color: var(--ink-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.msg-source { font: var(--type-caption); color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.msg-source .source-addr { color: var(--ink-muted); }
+.msg-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; }
+.msg-when { font: var(--type-caption); color: var(--ink-faint); white-space: nowrap; }
+.action-pill { background: var(--primary-soft, var(--surface-2)); color: var(--primary); border-color: var(--primary); white-space: nowrap; }
+.nav-item-active { background: var(--surface-2); color: var(--ink); font-weight: 500; }
 
 .empty-state {
   display: flex;

web/templates/dashboard.html

@@ -46,11 +46,16 @@
           <div class="nav-group">
             <div class="nav-group-title">Categories</div>
             <div class="nav-group-items">
+              <a class="nav-item nav-item-active" href="#">
+                <span class="dot" style="background: var(--primary)"></span>
+                <span>All mail</span>
+                <span class="count">{{.Total}}</span>
+              </a>
               {{range .Categories}}
               <a class="nav-item" href="#">
                 <span class="dot" style="background: {{.Color}}"></span>
                 <span>{{.Name}}</span>
-                <span class="count">0</span>
+                <span class="count">{{.Count}}</span>
               </a>
               {{end}}
             </div>
@@ -73,10 +78,17 @@
       <section class="panel" aria-label="Message list">
         <div class="panel-head">
           <h2>Inbox</h2>
-          <button class="btn btn-utility" type="button"
-                  hx-get="/partials/inbox" hx-target="#inbox-list" hx-swap="innerHTML">
-            Refresh
-          </button>
+          <div class="panel-actions">
+            <button class="btn btn-primary" type="button"
+                    hx-post="/actions/fetch" hx-target="#inbox-list" hx-swap="innerHTML"
+                    hx-headers='{"X-CSRF-Token": "{{.CSRFToken}}"}'>
+              Check mail
+            </button>
+            <button class="btn btn-utility" type="button"
+                    hx-get="/partials/inbox" hx-target="#inbox-list" hx-swap="innerHTML">
+              Refresh
+            </button>
+          </div>
         </div>
         <div id="inbox-list" class="msg-list"
              hx-get="/partials/inbox" hx-trigger="load" hx-swap="innerHTML"></div>

web/templates/inbox.html

@@ -1,5 +1,33 @@
+<div class="scan-note-slot">
+  {{if .Note}}<div class="scan-note" role="status">{{.Note}}</div>{{end}}
+</div>
+
+{{if .Groups}}
+  {{range .Groups}}
+  <section class="msg-group" aria-label="{{.Name}}">
+    <div class="msg-group-head">
+      <span class="msg-group-name">{{.Name}}</span>
+      <span class="count">{{len .Messages}}</span>
+    </div>
+    {{range .Messages}}
+    <div class="msg-row">
+      <div class="msg-main">
+        <div class="msg-from">{{.From}}</div>
+        <div class="msg-subject">{{.Subject}}</div>
+        {{if .SourceAddr}}<div class="msg-source">arrived at <span class="source-addr">{{.SourceAddr}}</span></div>{{end}}
+      </div>
+      <div class="msg-meta">
+        <span class="pill action-pill">{{.Action}}</span>
+        {{if .When}}<span class="msg-when">{{.When}}</span>{{end}}
+      </div>
+    </div>
+    {{end}}
+  </section>
+  {{end}}
+{{else}}
 <div class="empty-state">
   <div class="empty-title">No messages yet</div>
-  <p class="empty-copy">Mail fetch arrives in Phase 2. New messages will appear here, grouped by category, with a recommended action on each row.</p>
-  <span class="pill">IMAP scan not connected</span>
+  <p class="empty-copy">Use <strong>Check mail</strong> to fetch from Gmail. New messages appear here, grouped by category, with a recommended action on each row.</p>
+  <span class="pill">No stored messages</span>
 </div>
+{{end}}