Add Call/Visit activity logging and timeline for contacts and companies

New ContactActivity table tracks calls/visits with notes and author,
surfaced via Call/Visit icon buttons (with an inline note textarea)
everywhere a contact appears — Contacts table rows, associated-contacts
lists on Companies/Leads/Deals, and the contact identity header in each
detail panel. Adds a per-contact activity timeline and a company-level
rollup that aggregates activity across every contact sharing that company.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

backend/app/database.py

@@ -210,6 +210,23 @@ class Company(Base):
     updated_at = Column(DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
 
 
+class ContactActivity(Base):
+    """A logged Call or Visit against a Contact — who logged it, what was discussed, when.
+    Powers the per-contact and per-company activity timelines. Always tied to a real Contact
+    row (never a bare Lead) so company-level rollups can reuse the same case-insensitive
+    Contact.company name match already used for associated-contacts lists."""
+
+    __tablename__ = "contact_activities"
+
+    id = Column(Integer, primary_key=True, index=True)
+    tenant_id = Column(Integer, ForeignKey("tenants.id"), nullable=True, index=True)
+    contact_id = Column(Integer, ForeignKey("contacts.id"), nullable=False, index=True)
+    user_id = Column(Integer, ForeignKey("users.id"), nullable=True)
+    activity_type = Column(String, nullable=False)  # "call" | "visit"
+    notes = Column(Text, default="")
+    created_at = Column(DateTime, default=datetime.utcnow, index=True)
+
+
 class CrmLead(Base):
     """Lead synced from Smartlead replies (webhook) — CRM pipeline status is local."""
 

backend/app/main.py

@@ -37,6 +37,7 @@ from .database import (
     SmartleadRun,
     Contact,
     Company,
+    ContactActivity,
     CrmLead,
     CrmDeal,
     UnipileAccount,
@@ -56,6 +57,7 @@ from .models import (
     CrmLeadPatchRequest,
     BulkLeadIdsRequest,
     BulkContactIdsRequest,
+    ActivityCreateRequest,
     CrmDealPatchRequest,
     CrmDealCreateRequest,
     ContactCreateRequest,
@@ -3355,6 +3357,71 @@ async def get_contacts_by_company(
     }
 
 
+def _activity_to_dict(a: ContactActivity, user: User | None, contact: Contact | None = None) -> dict:
+    d = {
+        "id": a.id,
+        "contact_id": a.contact_id,
+        "activity_type": a.activity_type,
+        "notes": a.notes or "",
+        "created_at": a.created_at.isoformat() if a.created_at else None,
+        "user_id": a.user_id,
+        "user_display_name": (user.name or user.email or "").strip() if user else "",
+        "user_initials": _user_initials_from_user(user),
+    }
+    if contact is not None:
+        d["contact_name"] = _format_contact_display(contact)
+    return d
+
+
+@app.post("/api/contacts/{contact_id}/activities")
+async def create_contact_activity(
+    contact_id: int, body: ActivityCreateRequest, t: TenantContext = Depends(get_tenant_context)
+):
+    """Log a Call or Visit against a contact, with optional notes on what was discussed."""
+    db = t.db
+    contact = (
+        db.query(Contact)
+        .filter(Contact.tenant_id == t.tenant_id, Contact.id == contact_id)
+        .first()
+    )
+    if not contact:
+        raise HTTPException(status_code=404, detail="Contact not found")
+    activity = ContactActivity(
+        tenant_id=t.tenant_id,
+        contact_id=contact_id,
+        user_id=t.user_id,
+        activity_type=body.activity_type,
+        notes=_safe_str(body.notes),
+    )
+    db.add(activity)
+    db.commit()
+    db.refresh(activity)
+    user = db.query(User).filter(User.id == t.user_id).first()
+    return _activity_to_dict(activity, user)
+
+
+@app.get("/api/contacts/{contact_id}/activities")
+async def list_contact_activities(contact_id: int, t: TenantContext = Depends(get_tenant_context)):
+    """Activity timeline (Calls/Visits, with notes and author) for a single contact."""
+    db = t.db
+    contact = (
+        db.query(Contact)
+        .filter(Contact.tenant_id == t.tenant_id, Contact.id == contact_id)
+        .first()
+    )
+    if not contact:
+        raise HTTPException(status_code=404, detail="Contact not found")
+    rows = (
+        db.query(ContactActivity)
+        .filter(ContactActivity.tenant_id == t.tenant_id, ContactActivity.contact_id == contact_id)
+        .order_by(ContactActivity.created_at.desc())
+        .all()
+    )
+    user_ids = {r.user_id for r in rows if r.user_id}
+    users_by_id = {u.id: u for u in db.query(User).filter(User.id.in_(user_ids)).all()} if user_ids else {}
+    return {"activities": [_activity_to_dict(r, users_by_id.get(r.user_id)) for r in rows]}
+
+
 @app.post("/api/contacts")
 async def create_contact(body: ContactCreateRequest, t: TenantContext = Depends(get_tenant_context)):
     """Create a contact manually (inline table add). Email must be unique."""
@@ -4461,6 +4528,41 @@ async def get_company(company_id: int, t: TenantContext = Depends(get_tenant_con
     return d
 
 
+@app.get("/api/companies/{company_id}/activities")
+async def list_company_activities(company_id: int, t: TenantContext = Depends(get_tenant_context)):
+    """Rolled-up activity timeline for a company — every Call/Visit logged against any contact
+    sharing this company's name (same case-insensitive match used for associated contacts)."""
+    db = t.db
+    company = (
+        db.query(Company)
+        .filter(Company.tenant_id == t.tenant_id, Company.id == company_id)
+        .first()
+    )
+    if not company:
+        raise HTTPException(status_code=404, detail="Company not found")
+    contacts = _contacts_for_company(db, t.tenant_id, company.name)
+    contacts_by_id = {c.id: c for c in contacts}
+    if not contacts_by_id:
+        return {"activities": []}
+    rows = (
+        db.query(ContactActivity)
+        .filter(
+            ContactActivity.tenant_id == t.tenant_id,
+            ContactActivity.contact_id.in_(contacts_by_id.keys()),
+        )
+        .order_by(ContactActivity.created_at.desc())
+        .all()
+    )
+    user_ids = {r.user_id for r in rows if r.user_id}
+    users_by_id = {u.id: u for u in db.query(User).filter(User.id.in_(user_ids)).all()} if user_ids else {}
+    return {
+        "activities": [
+            _activity_to_dict(r, users_by_id.get(r.user_id), contacts_by_id.get(r.contact_id))
+            for r in rows
+        ]
+    }
+
+
 @app.patch("/api/companies/{company_id}")
 async def patch_company(
     company_id: int, body: CompanyPatchRequest, t: TenantContext = Depends(get_tenant_context)

backend/app/models.py

@@ -99,6 +99,11 @@ class BulkContactIdsRequest(BaseModel):
     contact_ids: List[int]
 
 
+class ActivityCreateRequest(BaseModel):
+    activity_type: Literal["call", "visit"]
+    notes: str = Field(default="", max_length=8000)
+
+
 class CompanyCreateRequest(BaseModel):
     name: str
     category: str = ""

frontend/src/components/workspace/ActivityTimeline.jsx

@@ -0,0 +1,96 @@
+import React, { useEffect, useState } from 'react';
+import { Phone, MapPin, Loader2 } from 'lucide-react';
+import { apiFetch } from '@/lib/api';
+
+function formatWhen(iso) {
+    if (!iso) return '';
+    const d = new Date(iso);
+    if (Number.isNaN(d.getTime())) return '';
+    return d.toLocaleString(undefined, {
+        month: 'short',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: '2-digit',
+    });
+}
+
+/**
+ * Chronological Call/Visit activity feed. Self-fetching — pass `endpoint` (the GET URL) and bump
+ * `refreshKey` after logging a new activity elsewhere to re-fetch.
+ */
+export default function ActivityTimeline({ endpoint, refreshKey, heading = 'Activity timeline', className }) {
+    const [activities, setActivities] = useState([]);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        if (!endpoint) return;
+        let cancelled = false;
+        setLoading(true);
+        (async () => {
+            try {
+                const res = await apiFetch(endpoint);
+                if (!res.ok) return;
+                const data = await res.json();
+                if (!cancelled) setActivities(data.activities || []);
+            } catch (e) {
+                console.error(e);
+            } finally {
+                if (!cancelled) setLoading(false);
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [endpoint, refreshKey]);
+
+    if (!endpoint) return null;
+
+    return (
+        <div className={className}>
+            <h4 className="mb-3 font-semibold text-slate-800">{heading}</h4>
+            {loading ? (
+                <div className="flex items-center gap-2 text-sm text-slate-500">
+                    <Loader2 className="h-4 w-4 animate-spin" aria-hidden />
+                    Loading…
+                </div>
+            ) : activities.length === 0 ? (
+                <p className="text-sm text-slate-500">No calls or visits logged yet.</p>
+            ) : (
+                <ul className="space-y-2">
+                    {activities.map((a) => (
+                        <li
+                            key={a.id}
+                            className="flex gap-2.5 rounded-lg border border-slate-200 bg-white px-3 py-2"
+                        >
+                            <div
+                                className={
+                                    'mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full ' +
+                                    (a.activity_type === 'call' ? 'bg-emerald-100 text-emerald-700' : 'bg-violet-100 text-violet-700')
+                                }
+                            >
+                                {a.activity_type === 'call' ? (
+                                    <Phone className="h-3.5 w-3.5" aria-hidden />
+                                ) : (
+                                    <MapPin className="h-3.5 w-3.5" aria-hidden />
+                                )}
+                            </div>
+                            <div className="min-w-0 flex-1">
+                                <p className="text-xs text-slate-500">
+                                    <span className="font-medium text-slate-700">
+                                        {a.activity_type === 'call' ? 'Call' : 'Visit'}
+                                    </span>
+                                    {a.contact_name ? <span> with {a.contact_name}</span> : null}
+                                    {a.user_display_name ? <span> · {a.user_display_name}</span> : null}
+                                    {a.created_at ? <span> · {formatWhen(a.created_at)}</span> : null}
+                                </p>
+                                {a.notes ? (
+                                    <p className="mt-0.5 whitespace-pre-wrap text-sm text-slate-800">{a.notes}</p>
+                                ) : null}
+                            </div>
+                        </li>
+                    ))}
+                </ul>
+            )}
+        </div>
+    );
+}

frontend/src/components/workspace/AssociatedContactsList.jsx

@@ -1,14 +1,18 @@
 import React from 'react';
 import { Mail, Phone } from 'lucide-react';
+import ContactActivityLogger from '@/components/workspace/ContactActivityLogger';
 
 /**
  * Shared "Associated contacts" list for the Companies / Leads / Deals detail slide-overs.
  * Renders contacts sharing a company (case-insensitive name match, resolved server-side),
- * each row clickable to jump to that contact's own detail panel.
+ * each row clickable to jump to that contact's own detail panel, with Call/Visit logging
+ * icons alongside (kept as sibling interactive elements, not nested inside the row's own
+ * clickable area, since a <button> can't contain other <button>s).
  */
 export default function AssociatedContactsList({
     contacts = [],
     onContactClick,
+    onActivityLogged,
     heading = 'Associated contacts',
     headerActions = null,
     emptyMessage = 'No contacts linked to this company yet.',
@@ -29,29 +33,46 @@ export default function AssociatedContactsList({
                     {contacts.map((c) => {
                         const name = [c.first_name, c.last_name].filter(Boolean).join(' ') || c.email;
                         return (
-                            <li key={c.id}>
-                                <button
-                                    type="button"
-                                    onClick={() => onContactClick && onContactClick(c)}
-                                    className="w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-left text-sm hover:bg-violet-50/60 hover:border-violet-200 transition-colors"
-                                >
-                                    <p className="font-medium text-violet-800">{name}</p>
-                                    <p className="text-xs text-slate-500 flex flex-wrap items-center gap-x-3 gap-y-1 mt-0.5">
-                                        {c.title ? <span>{c.title}</span> : null}
-                                        {c.email ? (
-                                            <span className="inline-flex items-center gap-1">
-                                                <Mail className="h-3 w-3" />
-                                                {c.email}
-                                            </span>
-                                        ) : null}
-                                        {c.phone ? (
-                                            <span className="inline-flex items-center gap-1">
-                                                <Phone className="h-3 w-3" />
-                                                {c.phone}
-                                            </span>
-                                        ) : null}
-                                    </p>
-                                </button>
+                            <li
+                                key={c.id}
+                                className="rounded-lg border border-slate-200 bg-white px-3 py-2 hover:bg-violet-50/60 hover:border-violet-200 transition-colors"
+                            >
+                                <div className="flex items-start justify-between gap-2">
+                                    <div
+                                        role="button"
+                                        tabIndex={0}
+                                        onClick={() => onContactClick && onContactClick(c)}
+                                        onKeyDown={(e) => {
+                                            if (e.key === 'Enter' || e.key === ' ') {
+                                                e.preventDefault();
+                                                onContactClick && onContactClick(c);
+                                            }
+                                        }}
+                                        className="min-w-0 flex-1 cursor-pointer text-left text-sm"
+                                    >
+                                        <p className="font-medium text-violet-800">{name}</p>
+                                        <p className="text-xs text-slate-500 flex flex-wrap items-center gap-x-3 gap-y-1 mt-0.5">
+                                            {c.title ? <span>{c.title}</span> : null}
+                                            {c.email ? (
+                                                <span className="inline-flex items-center gap-1">
+                                                    <Mail className="h-3 w-3" />
+                                                    {c.email}
+                                                </span>
+                                            ) : null}
+                                            {c.phone ? (
+                                                <span className="inline-flex items-center gap-1">
+                                                    <Phone className="h-3 w-3" />
+                                                    {c.phone}
+                                                </span>
+                                            ) : null}
+                                        </p>
+                                    </div>
+                                    <ContactActivityLogger
+                                        contactId={c.id}
+                                        onLogged={onActivityLogged}
+                                        className="shrink-0"
+                                    />
+                                </div>
                             </li>
                         );
                     })}

frontend/src/components/workspace/ContactActivityLogger.jsx

@@ -0,0 +1,133 @@
+import React, { useState } from 'react';
+import { Phone, MapPin, Loader2, X } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { apiFetch } from '@/lib/api';
+import { cn } from '@/lib/utils';
+
+/**
+ * "Call" / "Visit" icon buttons for a contact. Clicking one opens an inline textarea to note
+ * what was discussed; saving POSTs to /api/contacts/{contactId}/activities. Self-contained —
+ * manages its own open/saving state, calls `onLogged` after a successful save so the parent can
+ * refresh whatever activity timeline is showing.
+ */
+export default function ContactActivityLogger({ contactId, onLogged, className, iconSize = 'h-3.5 w-3.5' }) {
+    const [openType, setOpenType] = useState(null); // 'call' | 'visit' | null
+    const [notes, setNotes] = useState('');
+    const [saving, setSaving] = useState(false);
+    const [error, setError] = useState('');
+
+    if (!contactId) return null;
+
+    const toggle = (type) => (e) => {
+        e.stopPropagation();
+        setError('');
+        setOpenType((cur) => (cur === type ? null : type));
+        setNotes('');
+    };
+
+    const cancel = (e) => {
+        e.stopPropagation();
+        setOpenType(null);
+        setNotes('');
+        setError('');
+    };
+
+    const save = async (e) => {
+        e.stopPropagation();
+        if (!openType) return;
+        setSaving(true);
+        setError('');
+        try {
+            const res = await apiFetch(`/api/contacts/${contactId}/activities`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ activity_type: openType, notes: notes.trim() }),
+            });
+            const data = await res.json().catch(() => ({}));
+            if (!res.ok) {
+                setError(typeof data.detail === 'string' ? data.detail : 'Could not save activity');
+                return;
+            }
+            setOpenType(null);
+            setNotes('');
+            onLogged && onLogged(data);
+        } catch (err) {
+            console.error(err);
+            setError('Network error');
+        } finally {
+            setSaving(false);
+        }
+    };
+
+    return (
+        <div className={className} onClick={(e) => e.stopPropagation()}>
+            <div className="flex items-center gap-1">
+                <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    className={cn(
+                        'h-7 w-7 text-slate-500 hover:text-emerald-700 hover:bg-emerald-50',
+                        openType === 'call' && 'bg-emerald-100 text-emerald-800 hover:bg-emerald-100'
+                    )}
+                    title="Log a call"
+                    aria-label="Log a call"
+                    onClick={toggle('call')}
+                >
+                    <Phone className={iconSize} aria-hidden />
+                </Button>
+                <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    className={cn(
+                        'h-7 w-7 text-slate-500 hover:text-violet-700 hover:bg-violet-50',
+                        openType === 'visit' && 'bg-violet-100 text-violet-800 hover:bg-violet-100'
+                    )}
+                    title="Log a visit"
+                    aria-label="Log a visit"
+                    onClick={toggle('visit')}
+                >
+                    <MapPin className={iconSize} aria-hidden />
+                </Button>
+            </div>
+
+            {openType ? (
+                <div className="mt-2 w-72 rounded-lg border border-slate-200 bg-white p-2 shadow-sm">
+                    <div className="mb-1 flex items-center justify-between">
+                        <span className="text-xs font-medium text-slate-600">
+                            {openType === 'call' ? 'What did you discuss on the call?' : 'What did you discuss on the visit?'}
+                        </span>
+                        <button
+                            type="button"
+                            className="text-slate-400 hover:text-slate-600"
+                            onClick={cancel}
+                            aria-label="Cancel"
+                        >
+                            <X className="h-3.5 w-3.5" aria-hidden />
+                        </button>
+                    </div>
+                    <textarea
+                        autoFocus
+                        rows={2}
+                        className="w-full resize-none rounded-md border border-slate-200 px-2 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-violet-400"
+                        placeholder="Notes (optional)"
+                        value={notes}
+                        onChange={(e) => setNotes(e.target.value)}
+                        disabled={saving}
+                        onClick={(e) => e.stopPropagation()}
+                    />
+                    {error ? <p className="mt-1 text-xs text-red-600">{error}</p> : null}
+                    <div className="mt-1.5 flex justify-end gap-1.5">
+                        <Button type="button" size="sm" variant="outline" className="h-7 px-2 text-xs" onClick={cancel} disabled={saving}>
+                            Cancel
+                        </Button>
+                        <Button type="button" size="sm" className="h-7 px-2 text-xs" onClick={save} disabled={saving}>
+                            {saving ? <Loader2 className="h-3.5 w-3.5 animate-spin" aria-hidden /> : 'Save'}
+                        </Button>
+                    </div>
+                </div>
+            ) : null}
+        </div>
+    );
+}

frontend/src/components/workspace/ContactIdentityEditor.jsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState, useRef } from 'react';
 import { Loader2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
+import ContactActivityLogger from '@/components/workspace/ContactActivityLogger';
 import { cn } from '@/lib/utils';
 
 /** API/CSV may return numbers; coerce before trim/compare so Inputs never throw. */
@@ -40,6 +41,8 @@ export default function ContactIdentityEditor({
     email = '',
     title = '',
     phone = '',
+    contactId = null,
+    onActivityLogged,
     onSave,
     disabled = false,
     className,
@@ -106,12 +109,15 @@ export default function ContactIdentityEditor({
         <div className={cn('rounded-xl border border-slate-200 bg-white p-4 mb-6', className)}>
             <div className="mb-3 flex items-center justify-between gap-2">
                 <h4 className="text-sm font-semibold text-slate-800">{heading}</h4>
-                {autoSave && saving ? (
-                    <span className="flex items-center gap-1 text-xs text-slate-500">
-                        <Loader2 className="h-3 w-3 animate-spin shrink-0" aria-hidden />
-                        Saving…
-                    </span>
-                ) : null}
+                <div className="flex items-center gap-2">
+                    {autoSave && saving ? (
+                        <span className="flex items-center gap-1 text-xs text-slate-500">
+                            <Loader2 className="h-3 w-3 animate-spin shrink-0" aria-hidden />
+                            Saving…
+                        </span>
+                    ) : null}
+                    <ContactActivityLogger contactId={contactId} onLogged={onActivityLogged} />
+                </div>
             </div>
             <div className="grid grid-cols-1 gap-3 text-sm sm:grid-cols-2">
                 <div>

frontend/src/pages/Companies.jsx

@@ -18,6 +18,7 @@ import MainTableWorkspace from '@/components/workspace/MainTableWorkspace';
 import SlideOverPanel from '@/components/workspace/SlideOverPanel';
 import CompanyDetailsEditor from '@/components/workspace/CompanyDetailsEditor';
 import AssociatedContactsList from '@/components/workspace/AssociatedContactsList';
+import ActivityTimeline from '@/components/workspace/ActivityTimeline';
 import { cn } from '@/lib/utils';
 import { apiFetch } from '@/lib/api';
 
@@ -46,6 +47,7 @@ export default function Companies() {
     const [bulkBusy, setBulkBusy] = useState(false);
     const [syncBusy, setSyncBusy] = useState(false);
     const [convertBusy, setConvertBusy] = useState(false);
+    const [activityRefreshKey, setActivityRefreshKey] = useState(0);
 
     const [addingInline, setAddingInline] = useState(false);
     const [inlineDraft, setInlineDraft] = useState({ name: '', category: '', type: '' });
@@ -644,6 +646,7 @@ export default function Companies() {
                             <AssociatedContactsList
                                 contacts={selected.contacts || []}
                                 onContactClick={(c) => navigate(`/contacts?contact=${c.id}`)}
+                                onActivityLogged={() => setActivityRefreshKey((k) => k + 1)}
                                 className="mb-4"
                                 headerActions={
                                     <Button
@@ -724,6 +727,13 @@ export default function Companies() {
                                 </Button>
                             </div>
                         </div>
+
+                        <div className="mt-8 pt-6 border-t border-slate-100">
+                            <ActivityTimeline
+                                endpoint={`/api/companies/${selected.id}/activities`}
+                                refreshKey={activityRefreshKey}
+                            />
+                        </div>
                     </>
                 )}
             </SlideOverPanel>

frontend/src/pages/Contacts.jsx

@@ -24,6 +24,8 @@ import { apiFetch } from '@/lib/api';
 import SlideOverPanel from '@/components/workspace/SlideOverPanel';
 import CompanyDetailsEditor from '@/components/workspace/CompanyDetailsEditor';
 import ContactIdentityEditor from '@/components/workspace/ContactIdentityEditor';
+import ContactActivityLogger from '@/components/workspace/ContactActivityLogger';
+import ActivityTimeline from '@/components/workspace/ActivityTimeline';
 import { EditableCell } from '@/components/workspace/EditableCell';
 import { cn } from '@/lib/utils';
 
@@ -74,6 +76,7 @@ export default function Contacts() {
     const [bulkBusy, setBulkBusy] = useState(null);
     /** Inline inputs only for this row id; pencil toggles. Row click opens slide-over. */
     const [tableEditRowId, setTableEditRowId] = useState(null);
+    const [activityRefreshKey, setActivityRefreshKey] = useState(0);
 
     const selectedIds = useMemo(
         () => Object.keys(rowSelection).filter((id) => rowSelection[id]).map(Number),
@@ -791,6 +794,7 @@ export default function Contacts() {
                                         <SortHeader field="email" label="Email" />
                                         <SortHeader field="company" label="Company" />
                                         <SortHeader field="title" label="Title" />
+                                        <th className="px-3 py-2 font-medium">Activity</th>
                                     </tr>
                                 </thead>
                                 <tbody>
@@ -913,6 +917,7 @@ export default function Contacts() {
                                                     <p className="text-xs text-red-600 mt-1 w-full">{inlineError}</p>
                                                 ) : null}
                                             </td>
+                                            <td className="px-3 py-2 align-top" aria-hidden />
                                         </tr>
                                     )}
                                     {contacts.map((contact) => {
@@ -1051,6 +1056,12 @@ export default function Contacts() {
                                                         </div>
                                                     )}
                                                 </td>
+                                                <td className="px-3 py-2 align-top" onClick={(e) => e.stopPropagation()}>
+                                                    <ContactActivityLogger
+                                                        contactId={contact.id}
+                                                        onLogged={() => setActivityRefreshKey((k) => k + 1)}
+                                                    />
+                                                </td>
                                             </tr>
                                         );
                                     })}
@@ -1124,6 +1135,8 @@ export default function Contacts() {
                                 email={selectedContactDetails.email || ''}
                                 title={selectedContactDetails.title || ''}
                                 phone={selectedContactDetails.phone || ''}
+                                contactId={selectedContact.id}
+                                onActivityLogged={() => setActivityRefreshKey((k) => k + 1)}
                                 onSave={(patch) => patchContact(selectedContact.id, patch)}
                                 disabled={!selectedContact}
                                 autoSave
@@ -1149,6 +1162,13 @@ export default function Contacts() {
                             )}
                         </div>
 
+                        <div className="mt-8 pt-6 border-t border-slate-100">
+                            <ActivityTimeline
+                                endpoint={`/api/contacts/${selectedContact.id}/activities`}
+                                refreshKey={activityRefreshKey}
+                            />
+                        </div>
+
                         <div className="mt-8 pt-6 border-t border-slate-100">
                         <h4 className="text-sm font-semibold text-slate-800 mb-2 flex items-center gap-2">
                             <FileText className="h-4 w-4" />

frontend/src/pages/Deals.jsx

@@ -11,6 +11,7 @@ import SlideOverPanel from '@/components/workspace/SlideOverPanel';
 import WonBillingModal from '@/components/workspace/WonBillingModal';
 import CompanyDetailsEditor from '@/components/workspace/CompanyDetailsEditor';
 import AssociatedContactsList from '@/components/workspace/AssociatedContactsList';
+import ActivityTimeline from '@/components/workspace/ActivityTimeline';
 import ContactIdentityEditor from '@/components/workspace/ContactIdentityEditor';
 import { DealContactSearch, DealCompanySearch } from '@/components/workspace/DealLinkSearch';
 import { EditableCell, EditableCurrencyCell, EditableDateCell } from '@/components/workspace/EditableCell';
@@ -935,6 +936,7 @@ export default function Deals() {
     const [companyFetchLoading, setCompanyFetchLoading] = useState(false);
     const [companyFetchError, setCompanyFetchError] = useState('');
     const [associatedContacts, setAssociatedContacts] = useState([]);
+    const [activityRefreshKey, setActivityRefreshKey] = useState(0);
     const [me, setMe] = useState(null);
     const [tenantMembers, setTenantMembers] = useState([]);
     const [selectedDealIds, setSelectedDealIds] = useState([]);
@@ -2121,6 +2123,8 @@ export default function Deals() {
                                         email={dealDetail.linked_contact.email || ''}
                                         title={dealDetail.linked_contact.title || ''}
                                         phone={dealDetail.linked_contact.phone || ''}
+                                        contactId={dealDetail.linked_contact.id}
+                                        onActivityLogged={() => setActivityRefreshKey((k) => k + 1)}
                                         onSave={(patch) =>
                                             patchLinkedContact(dealDetail.linked_contact.id, patch)
                                         }
@@ -2163,6 +2167,16 @@ export default function Deals() {
                                 <AssociatedContactsList
                                     contacts={associatedContacts}
                                     onContactClick={(c) => navigate(`/contacts?contact=${c.id}`)}
+                                    onActivityLogged={() => setActivityRefreshKey((k) => k + 1)}
+                                />
+                            </section>
+                        ) : null}
+
+                        {dealDetail.linked_contact?.id ? (
+                            <section className="border-t border-slate-100 pt-6 mt-2">
+                                <ActivityTimeline
+                                    endpoint={`/api/contacts/${dealDetail.linked_contact.id}/activities`}
+                                    refreshKey={activityRefreshKey}
                                 />
                             </section>
                         ) : null}

frontend/src/pages/Leads.jsx

@@ -20,6 +20,7 @@ import SlideOverPanel from '@/components/workspace/SlideOverPanel';
 import CompanyDetailsEditor from '@/components/workspace/CompanyDetailsEditor';
 import ContactIdentityEditor from '@/components/workspace/ContactIdentityEditor';
 import AssociatedContactsList from '@/components/workspace/AssociatedContactsList';
+import ActivityTimeline from '@/components/workspace/ActivityTimeline';
 import { EditableCell } from '@/components/workspace/EditableCell';
 import { cn } from '@/lib/utils';
 import { apiFetch } from '@/lib/api';
@@ -70,6 +71,7 @@ export default function Leads() {
     const [companyFetchLoading, setCompanyFetchLoading] = useState(false);
     const [companyFetchError, setCompanyFetchError] = useState('');
     const [associatedContacts, setAssociatedContacts] = useState([]);
+    const [activityRefreshKey, setActivityRefreshKey] = useState(0);
     const [seedBusy, setSeedBusy] = useState(false);
     const [rowSelection, setRowSelection] = useState({});
     const [bulkBusy, setBulkBusy] = useState(null);
@@ -741,6 +743,8 @@ export default function Leads() {
                             email={selected.email || ''}
                             title={selected.title || ''}
                             phone={selected.phone || ''}
+                            contactId={selected.contact_id || null}
+                            onActivityLogged={() => setActivityRefreshKey((k) => k + 1)}
                             onSave={(patch) => patchLead(selected.id, patch)}
                             autoSave
                         />
@@ -772,6 +776,16 @@ export default function Leads() {
                                 <AssociatedContactsList
                                     contacts={associatedContacts}
                                     onContactClick={(c) => navigate(`/contacts?contact=${c.id}`)}
+                                    onActivityLogged={() => setActivityRefreshKey((k) => k + 1)}
+                                />
+                            </div>
+                        ) : null}
+
+                        {selected.contact_id ? (
+                            <div className="mt-8 pt-6 border-t border-slate-100">
+                                <ActivityTimeline
+                                    endpoint={`/api/contacts/${selected.contact_id}/activities`}
+                                    refreshKey={activityRefreshKey}
                                 />
                             </div>
                         ) : null}