Mailbox UI — Hinata Studio Tab

Intent

Two-state interface:

• Concentrated — icon-only with unread badge (sidebar entry / topbar widget).
• Expanded — full detail modal: To / From / CCs / Subject / body / summary / "Generate Response" button.

Mock React/JSX captured below; treat as starting scaffold, not final.

Architecture

graph TD
    A[Mailbox Tab in Studio Sidebar] --> B[Mailbox Icon — Concentrated]
    B -->|Click| C[Mailbox Expanded — Detail Modal]
    C --> D[Email Metadata: To, From, CC, Subject]
    C --> E[Body + Summary]
    C --> F[Generate Response Button]
    F --> G[Compose Modal — Draft Response]

Component (scaffold from Minato 2026-05-22)

import React, { useState } from 'react';
import { Mail, X, Send, Zap } from 'lucide-react';
import './mailbox.css';

export default function MailboxUI() {
  const [expanded, setExpanded] = useState(false);
  const [selectedEmail, setSelectedEmail] = useState(null);
  const [showCompose, setShowCompose] = useState(false);
  const [draftResponse, setDraftResponse] = useState('');

  // Mock email data — replace with live connector
  const emails = [/* … */];

  // CONCENTRATED VIEW — Mailbox Icon
  if (!expanded) {
    const unreadCount = emails.filter((e) => e.unread).length;
    return (
      <div className="mailbox-concentrated">
        <button
          className="mailbox-icon-button"
          onClick={() => setExpanded(true)}
          title={`Mailbox${unreadCount > 0 ? ` (${unreadCount} unread)` : ''}`}
        >
          <Mail size={20} />
          {unreadCount > 0 && <span className="unread-badge">{unreadCount}</span>}
        </button>
      </div>
    );
  }
  // EXPANDED VIEW — Full Mailbox (omitted in this stub)
}

Data source

Existing /opt/jimmy-brain-ops/scripts/mail-actionable-archive.py already produces a daily JSONL of mail metadata at ~/Sandpit/hinata/mail-archive/YYYY-MM-DD.jsonl. The Mailbox UI's concentrated view reads this directly. Expanded view + Generate-Response requires email bodies — a separate ingestion job under #840024.

Pickup work

1. Wire to existing mail-archive JSONL (no new ingestion needed for concentrated view).
2. Decide Generate-Response provider — local Claude/Minato vs. inline composition.
3. Status of #840024 (mail body archive) — needed before expanded view.
4. CSS in line with design system tokens per display-format-standards.