P2 #11 + P3 #11-14: SMTP connector, skeletons, tooltips, mobile menu, observability badges

Sathwik Arroju · Sathwik Arroju · commit ffa8f1b93bb8 · 2026-05-04T12:18:48.000-04:00
diff --git a/tests/test_web.py b/tests/test_web.py
@@ -735,6 +735,80 @@ def test_connectors_save_list_delete_with_encryption(tmp_path, monkeypatch):
         assert r.status_code == 404
 
 
+def test_smtp_connector_save_validate_encrypt(tmp_path, monkeypatch):
+    """SMTP config: validation rejects bad shapes/ports/emails; happy path
+    encrypts the password at rest."""
+    db_path = tmp_path / "liveops_test.db"
+    monkeypatch.setenv("LIVEOPS_DB", str(db_path))
+    monkeypatch.setenv("SESSION_SECRET", "test-secret-deterministic")
+    import importlib, json as _j, agent.db as _db, agent.secret as _sec
+    importlib.reload(_db); importlib.reload(_sec); _db.init_db()
+    from web.server import create_app
+    from fastapi.testclient import TestClient
+
+    app = create_app()
+    with TestClient(app) as c:
+        c.post("/signup", data={"username": "alice", "password": "secret123",
+                                "confirm": "secret123", "next": "/"})
+
+        # Validation: not an object
+        r = c.post("/api/connectors/save",
+                   json={"kind": "smtp_config", "value": "bad"})
+        assert r.status_code == 400 and "must be an object" in r.json()["detail"]
+
+        # Validation: missing fields
+        r = c.post("/api/connectors/save",
+                   json={"kind": "smtp_config", "value": {"host": "x"}})
+        assert r.status_code == 400 and "missing field" in r.json()["detail"]
+
+        # Validation: bad port
+        r = c.post("/api/connectors/save", json={"kind": "smtp_config",
+            "value": {"host":"x","port":"abc","user":"u","password":"p","from_addr":"a@b.com"}})
+        assert r.status_code == 400 and "port must be" in r.json()["detail"]
+
+        # Validation: bad email
+        r = c.post("/api/connectors/save", json={"kind": "smtp_config",
+            "value": {"host":"x","port":587,"user":"u","password":"p","from_addr":"nope"}})
+        assert r.status_code == 400 and "email" in r.json()["detail"]
+
+        # Happy path
+        cfg = {"host":"smtp.example.com","port":587,"user":"alice@ex.com",
+               "password":"supersecret","from_addr":"alerts@ex.com","use_tls":True}
+        r = c.post("/api/connectors/save", json={"kind":"smtp_config","value":cfg})
+        assert r.status_code == 200
+
+        # Listed (no plaintext leaked)
+        listed = c.get("/api/connectors").json()["connectors"]
+        assert any(d["kind"] == "smtp_config" for d in listed)
+        assert all("password" not in str(d) for d in listed)
+
+        # Encrypted at rest
+        raw = _db.get_user_connector("alice", "smtp_config")
+        assert b"supersecret" not in raw
+        decoded = _j.loads(_sec.decrypt(raw))
+        assert decoded["password"] == "supersecret"
+        assert decoded["host"] == "smtp.example.com"
+        assert decoded["port"] == 587
+        assert decoded["use_tls"] is True
+
+
+def test_smtp_test_endpoint_requires_config(tmp_path, monkeypatch):
+    """Hitting /test with no SMTP saved returns 404."""
+    db_path = tmp_path / "liveops_test.db"
+    monkeypatch.setenv("LIVEOPS_DB", str(db_path))
+    monkeypatch.setenv("SESSION_SECRET", "test-secret-deterministic")
+    import importlib, agent.db as _db; importlib.reload(_db); _db.init_db()
+    from web.server import create_app
+    from fastapi.testclient import TestClient
+
+    app = create_app()
+    with TestClient(app) as c:
+        c.post("/signup", data={"username": "alice", "password": "secret123",
+                                "confirm": "secret123", "next": "/"})
+        r = c.post("/api/connectors/test", json={"kind": "smtp_config"})
+        assert r.status_code == 404
+
+
 def test_connectors_anonymous_redirected(client):
     """All connector routes are auth-gated — anon hits 303 to /login."""
     for path in ("/settings",):
diff --git a/web/server.py b/web/server.py
@@ -425,19 +425,44 @@ async def api_connectors_list(request: Request):
     async def api_connectors_save(request: Request,
                                    payload: Dict[str, Any] = Body(...)):
         user = _require_user(request)
-        kind  = (payload.get("kind") or "").strip()
-        value = (payload.get("value") or "").strip()
-        if kind not in ("slack_webhook",):
+        kind = (payload.get("kind") or "").strip()
+        if kind == "slack_webhook":
+            value = (payload.get("value") or "").strip()
+            if not value:
+                raise HTTPException(400, "value is required")
+            if not value.startswith("https://hooks.slack.com/"):
+                raise HTTPException(400,
+                    "slack_webhook must start with https://hooks.slack.com/")
+            stored = value
+        elif kind == "smtp_config":
+            cfg = payload.get("value") or {}
+            if not isinstance(cfg, dict):
+                raise HTTPException(400, "smtp_config value must be an object")
+            required = ("host", "port", "user", "password", "from_addr")
+            missing = [k for k in required if not str(cfg.get(k, "")).strip()]
+            if missing:
+                raise HTTPException(400, f"missing field(s): {missing}")
+            try:
+                port = int(cfg["port"])
+                assert 1 <= port <= 65535
+            except Exception:
+                raise HTTPException(400, "port must be an integer 1-65535")
+            if "@" not in cfg["from_addr"]:
+                raise HTTPException(400, "from_addr must be an email address")
+            stored = json.dumps({
+                "host":      str(cfg["host"]).strip(),
+                "port":      port,
+                "user":      str(cfg["user"]).strip(),
+                "password":  str(cfg["password"]),    # don't strip — leading spaces matter for some keys
+                "from_addr": str(cfg["from_addr"]).strip(),
+                "use_tls":   bool(cfg.get("use_tls", True)),
+            })
+        else:
             raise HTTPException(400, f"unsupported kind: {kind!r}")
-        if not value:
-            raise HTTPException(400, "value is required")
-        if kind == "slack_webhook" and not value.startswith("https://hooks.slack.com/"):
-            raise HTTPException(400,
-                "slack_webhook must start with https://hooks.slack.com/")
         from agent import db
         from agent.secret import encrypt
         db.upsert_user_connector(username=user, kind=kind,
-                                  value_encrypted=encrypt(value))
+                                  value_encrypted=encrypt(stored))
         return {"ok": True, "kind": kind}
 
     @app.post("/api/connectors/delete", response_class=JSONResponse)
@@ -485,6 +510,47 @@ async def api_connectors_test(request: Request,
                 raise
             except Exception as e:
                 raise HTTPException(502, f"slack ping failed: {type(e).__name__}: {e}")
+
+        if kind == "smtp_config":
+            try:
+                cfg = json.loads(value)
+            except Exception:
+                raise HTTPException(500, "stored SMTP config is corrupt")
+            to_addr = (payload.get("to") or cfg.get("from_addr"))
+            if not to_addr or "@" not in to_addr:
+                raise HTTPException(400,
+                    "specify a `to` address (or set from_addr to a real inbox)")
+            import smtplib
+            from email.message import EmailMessage
+            msg = EmailMessage()
+            msg["Subject"] = f"LiveOps Agent · test from @{user}"
+            msg["From"]    = cfg["from_addr"]
+            msg["To"]      = to_addr
+            msg.set_content(
+                f"This is a test message from LiveOps Agent.\n\n"
+                f"User:     @{user}\n"
+                f"Server:   {cfg['host']}:{cfg['port']}\n"
+                f"From:     {cfg['from_addr']}\n"
+                f"Mechanism: STARTTLS\n\n"
+                f"If you received this, your SMTP connector is configured correctly."
+            )
+            try:
+                with smtplib.SMTP(cfg["host"], int(cfg["port"]), timeout=15) as s:
+                    s.ehlo()
+                    if cfg.get("use_tls", True):
+                        s.starttls()
+                        s.ehlo()
+                    s.login(cfg["user"], cfg["password"])
+                    s.send_message(msg)
+                return {"ok": True, "to": to_addr}
+            except smtplib.SMTPAuthenticationError as e:
+                raise HTTPException(502,
+                    f"SMTP auth failed (check user/password): {e}")
+            except smtplib.SMTPException as e:
+                raise HTTPException(502, f"SMTP error: {type(e).__name__}: {e}")
+            except Exception as e:
+                raise HTTPException(502, f"SMTP send failed: {type(e).__name__}: {e}")
+
         raise HTTPException(400, f"test not implemented for kind: {kind!r}")
 
     # ---- JSON APIs (called from page JS) -------------------------------- #
diff --git a/web/templates/settings.html b/web/templates/settings.html
@@ -69,21 +69,80 @@ <h2 class="font-display text-lg font-semibold">Slack webhook</h2>
   </section>
 
   <!-- ====================================================== -->
-  <!-- SMTP / EMAIL — placeholder for the next iteration       -->
+  <!-- SMTP / EMAIL                                            -->
   <!-- ====================================================== -->
-  <section class="glass rounded-xl p-6 opacity-70">
+  <section class="glass rounded-xl p-6">
     <div class="flex items-center gap-2">
-      <span class="grid h-9 w-9 place-items-center rounded-md border border-white/10 bg-white/[0.04] text-slate-400">
+      <span class="grid h-9 w-9 place-items-center rounded-md border border-white/10 bg-white/[0.04] text-accent-400">
         <svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <path d="M4 4h16v16H4z"/><path d="M4 4l8 8 8-8"/>
         </svg>
       </span>
       <h2 class="font-display text-lg font-semibold">Email (SMTP)</h2>
-      <span class="rounded-md border border-white/10 bg-white/[0.03] px-2 py-0.5 text-[10px] font-medium uppercase tracking-widest text-slate-500">coming soon</span>
+      <template x-if="hasSmtp">
+        <span class="rounded-md border border-accent-500/30 bg-accent-500/10 px-2 py-0.5 text-[10px] font-medium uppercase tracking-widest text-accent-400">configured</span>
+      </template>
     </div>
     <p class="mt-2 text-sm leading-relaxed text-slate-400">
-      SMTP host / port / user / pass / from-address. Same encryption-at-rest model as Slack.
+      Same encryption-at-rest model as Slack. Connection uses STARTTLS by default — works with Gmail (port 587), SES, Mailgun, Postmark, etc.
     </p>
+
+    <div class="mt-5 grid gap-3 sm:grid-cols-2">
+      <label class="text-xs">
+        <span class="block font-medium text-slate-300">SMTP host</span>
+        <input x-model="smtp.host" type="text" placeholder="smtp.gmail.com"
+               class="focus-ring mt-1 w-full rounded-md border border-white/10 bg-ink-950/60 px-3 py-2 text-sm placeholder-slate-600">
+      </label>
+      <label class="text-xs">
+        <span class="block font-medium text-slate-300">Port</span>
+        <input x-model.number="smtp.port" type="number" min="1" max="65535" placeholder="587"
+               class="focus-ring mt-1 w-full rounded-md border border-white/10 bg-ink-950/60 px-3 py-2 text-sm placeholder-slate-600">
+      </label>
+      <label class="text-xs">
+        <span class="block font-medium text-slate-300">Username</span>
+        <input x-model="smtp.user" type="text" placeholder="ops@example.com" autocomplete="off"
+               class="focus-ring mt-1 w-full rounded-md border border-white/10 bg-ink-950/60 px-3 py-2 text-sm placeholder-slate-600">
+      </label>
+      <label class="text-xs">
+        <span class="block font-medium text-slate-300">Password / app token</span>
+        <input x-model="smtp.password" type="password" placeholder="•••••••••" autocomplete="new-password"
+               class="focus-ring mt-1 w-full rounded-md border border-white/10 bg-ink-950/60 px-3 py-2 text-sm placeholder-slate-600">
+      </label>
+      <label class="text-xs sm:col-span-2">
+        <span class="block font-medium text-slate-300">From address</span>
+        <input x-model="smtp.from_addr" type="email" placeholder="alerts@example.com"
+               class="focus-ring mt-1 w-full rounded-md border border-white/10 bg-ink-950/60 px-3 py-2 text-sm placeholder-slate-600">
+      </label>
+    </div>
+
+    <div class="mt-4 flex flex-wrap items-center gap-3">
+      <label class="flex items-center gap-2 text-xs text-slate-400">
+        <input x-model="smtp.use_tls" type="checkbox" class="rounded border-white/10 bg-ink-950/60 text-accent-500 focus:ring-accent-500/40">
+        Use STARTTLS
+      </label>
+      <label class="ml-auto text-xs">
+        <span class="block font-medium text-slate-300">Send test to</span>
+        <input x-model="smtpTestTo" type="email" placeholder="defaults to From address"
+               class="focus-ring mt-1 w-64 rounded-md border border-white/10 bg-ink-950/60 px-3 py-1.5 text-xs placeholder-slate-600">
+      </label>
+    </div>
+
+    <div class="mt-4 flex flex-wrap gap-3">
+      <button type="button" @click="saveSmtp()" :disabled="saving || !smtpComplete"
+              class="rounded-md bg-accent-500 px-4 py-2 text-sm font-medium text-ink-950 shadow-sm transition hover:bg-accent-400 disabled:opacity-50">
+        <span x-show="!saving">Save</span>
+        <span x-show="saving">Saving…</span>
+      </button>
+      <button type="button" @click="testSmtp()" :disabled="!hasSmtp || testing"
+              class="rounded-md border border-white/10 bg-white/[0.03] px-4 py-2 text-sm text-slate-200 transition hover:border-accent-500/40 hover:text-accent-400 disabled:opacity-40">
+        <span x-show="!testing">Send test email</span>
+        <span x-show="testing">Sending…</span>
+      </button>
+      <template x-if="hasSmtp">
+        <button type="button" @click="remove('smtp_config')"
+                class="ml-auto text-xs text-slate-500 hover:text-rose2-400">Remove SMTP config</button>
+      </template>
+    </div>
   </section>
 </div>
 
@@ -92,11 +151,19 @@ <h2 class="font-display text-lg font-semibold">Email (SMTP)</h2>
     return {
       configured: [],         // [{kind, updated_at}]
       slackValue: '',
+      smtp: { host: '', port: 587, user: '', password: '', from_addr: '', use_tls: true },
+      smtpTestTo: '',
       saving: false,
       testing: false,
       message: '',
       messageKind: 'success',
       get hasSlack() { return this.configured.some(c => c.kind === 'slack_webhook'); },
+      get hasSmtp()  { return this.configured.some(c => c.kind === 'smtp_config');  },
+      get smtpComplete() {
+        const s = this.smtp;
+        return s.host && s.port && s.user && s.password &&
+               s.from_addr && s.from_addr.includes('@');
+      },
       flash(text, kind) { this.message = text; this.messageKind = kind || 'success';
                            setTimeout(() => { this.message = ''; }, 6000); },
       async load() {
@@ -146,6 +213,38 @@ <h2 class="font-display text-lg font-semibold">Email (SMTP)</h2>
         } catch (e) { this.flash(e.message, 'error'); }
         finally { this.testing = false; }
       },
+      async saveSmtp() {
+        if (!this.smtpComplete) return;
+        this.saving = true;
+        try {
+          const r = await fetch('/api/connectors/save', {
+            method: 'POST', headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ kind: 'smtp_config', value: this.smtp }),
+          });
+          const body = await r.json();
+          if (!r.ok) throw new Error(body.detail || 'save failed');
+          // Don't keep the password in memory after save.
+          this.smtp.password = '';
+          await this.load();
+          this.flash('SMTP saved.', 'success');
+        } catch (e) { this.flash(e.message, 'error'); }
+        finally { this.saving = false; }
+      },
+      async testSmtp() {
+        this.testing = true;
+        try {
+          const body_ = { kind: 'smtp_config' };
+          if (this.smtpTestTo) body_.to = this.smtpTestTo;
+          const r = await fetch('/api/connectors/test', {
+            method: 'POST', headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(body_),
+          });
+          const body = await r.json();
+          if (!r.ok) throw new Error(body.detail || 'test failed');
+          this.flash('✓ Test email sent to ' + body.to, 'success');
+        } catch (e) { this.flash(e.message, 'error'); }
+        finally { this.testing = false; }
+      },
     };
   }
 </script>
