update

frontend/src/pages/Contacts.jsx

@@ -64,6 +64,8 @@ export default function Contacts() {
     const [enrichError, setEnrichError] = useState('');
     const [rowSelection, setRowSelection] = useState({});
     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 selectedIds = useMemo(
         () => Object.keys(rowSelection).filter((id) => rowSelection[id]).map(Number),
@@ -176,6 +178,7 @@ export default function Contacts() {
     };
 
     const openContact = async (contact) => {
+        setTableEditRowId(null);
         setSelectedContact(contact);
         setSelectedContactDetails(null);
         setEnrichError('');
@@ -202,6 +205,7 @@ export default function Contacts() {
     };
 
     const closePanel = () => {
+        setTableEditRowId(null);
         setSelectedContact(null);
         setSelectedContactDetails(null);
         setSequences([]);
@@ -760,12 +764,14 @@ export default function Contacts() {
                                                 tabIndex={0}
                                                 onClick={(e) => {
                                                     if (isRowUiTarget(e)) return;
+                                                    setTableEditRowId(null);
                                                     openContact(contact);
                                                 }}
                                                 onKeyDown={(e) => {
                                                     if (isRowUiTarget(e)) return;
                                                     if (e.key === 'Enter' || e.key === ' ') {
                                                         e.preventDefault();
+                                                        setTableEditRowId(null);
                                                         openContact(contact);
                                                     }
                                                 }}
@@ -791,54 +797,95 @@ export default function Contacts() {
                                                         type="button"
                                                         variant="ghost"
                                                         size="icon"
-                                                        className="h-8 w-8 text-slate-500 hover:text-violet-700"
+                                                        className={cn(
+                                                            'h-8 w-8 text-slate-500 hover:text-violet-700',
+                                                            tableEditRowId === contact.id &&
+                                                                'bg-violet-100 text-violet-800 hover:bg-violet-100'
+                                                        )}
                                                         onClick={(e) => {
                                                             e.stopPropagation();
-                                                            focusFirstEditableInRow(
-                                                                e.currentTarget.closest('tr')
+                                                            const tr = e.currentTarget.closest('tr');
+                                                            const off = tableEditRowId === contact.id;
+                                                            if (off) {
+                                                                setTableEditRowId(null);
+                                                                return;
+                                                            }
+                                                            setTableEditRowId(contact.id);
+                                                            requestAnimationFrame(() =>
+                                                                focusFirstEditableInRow(tr)
                                                             );
                                                         }}
-                                                        aria-label={`Edit fields in row for ${displayName}`}
+                                                        aria-label={
+                                                            tableEditRowId === contact.id
+                                                                ? `Stop editing row for ${displayName}`
+                                                                : `Edit fields in row for ${displayName}`
+                                                        }
                                                     >
                                                         <Pencil className="h-4 w-4" aria-hidden />
                                                     </Button>
                                                 </td>
                                                 <td className="px-3 py-2 align-top">
-                                                    <div className="flex flex-col gap-1 min-w-[140px] max-w-[200px]">
+                                                    {tableEditRowId === contact.id ? (
+                                                        <div className="flex flex-col gap-1 min-w-[140px] max-w-[200px]">
+                                                            <EditableCell
+                                                                value={contact.first_name || ''}
+                                                                onCommit={(v) =>
+                                                                    patchContact(contact.id, { first_name: v })
+                                                                }
+                                                                inputClassName="font-medium text-violet-800"
+                                                            />
+                                                            <EditableCell
+                                                                value={contact.last_name || ''}
+                                                                onCommit={(v) =>
+                                                                    patchContact(contact.id, { last_name: v })
+                                                                }
+                                                                inputClassName="font-medium text-violet-800"
+                                                            />
+                                                        </div>
+                                                    ) : (
+                                                        <div className="min-h-[2.25rem] py-1 text-sm font-medium text-violet-800 leading-snug">
+                                                            {displayName}
+                                                        </div>
+                                                    )}
+                                                </td>
+                                                <td className="px-3 py-2 align-top max-w-[240px]">
+                                                    {tableEditRowId === contact.id ? (
                                                         <EditableCell
-                                                            value={contact.first_name || ''}
-                                                            onCommit={(v) =>
-                                                                patchContact(contact.id, { first_name: v })
-                                                            }
-                                                            inputClassName="font-medium text-violet-800"
+                                                            type="email"
+                                                            value={contact.email || ''}
+                                                            onCommit={(v) => patchContact(contact.id, { email: v })}
                                                         />
+                                                    ) : (
+                                                        <div className="min-h-[2.25rem] py-1 text-sm text-slate-700 truncate">
+                                                            {contact.email || '—'}
+                                                        </div>
+                                                    )}
+                                                </td>
+                                                <td className="px-3 py-2 align-top max-w-[220px]">
+                                                    {tableEditRowId === contact.id ? (
                                                         <EditableCell
-                                                            value={contact.last_name || ''}
+                                                            value={contact.company || ''}
                                                             onCommit={(v) =>
-                                                                patchContact(contact.id, { last_name: v })
+                                                                patchContact(contact.id, { company: v })
                                                             }
-                                                            inputClassName="font-medium text-violet-800"
                                                         />
-                                                    </div>
-                                                </td>
-                                                <td className="px-3 py-2 align-top max-w-[240px]">
-                                                    <EditableCell
-                                                        type="email"
-                                                        value={contact.email || ''}
-                                                        onCommit={(v) => patchContact(contact.id, { email: v })}
-                                                    />
-                                                </td>
-                                                <td className="px-3 py-2 align-top max-w-[220px]">
-                                                    <EditableCell
-                                                        value={contact.company || ''}
-                                                        onCommit={(v) => patchContact(contact.id, { company: v })}
-                                                    />
+                                                    ) : (
+                                                        <div className="min-h-[2.25rem] py-1 text-sm text-slate-700 truncate">
+                                                            {contact.company || '—'}
+                                                        </div>
+                                                    )}
                                                 </td>
                                                 <td className="px-3 py-2 align-top max-w-[200px]">
-                                                    <EditableCell
-                                                        value={contact.title || ''}
-                                                        onCommit={(v) => patchContact(contact.id, { title: v })}
-                                                    />
+                                                    {tableEditRowId === contact.id ? (
+                                                        <EditableCell
+                                                            value={contact.title || ''}
+                                                            onCommit={(v) => patchContact(contact.id, { title: v })}
+                                                        />
+                                                    ) : (
+                                                        <div className="min-h-[2.25rem] py-1 text-sm text-slate-600 truncate">
+                                                            {contact.title || '—'}
+                                                        </div>
+                                                    )}
                                                 </td>
                                             </tr>
                                         );

frontend/src/pages/Deals.jsx

@@ -61,6 +61,7 @@ export default function Deals() {
     const [seedBusy, setSeedBusy] = useState(false);
     const [panelOpen, setPanelOpen] = useState(false);
     const [dealDetail, setDealDetail] = useState(null);
+    const [tableEditRowId, setTableEditRowId] = useState(null);
 
     const fetchDeals = useCallback(async () => {
         setLoading(true);
@@ -126,6 +127,7 @@ export default function Deals() {
     const updateStage = (dealId, stage) => patchDeal(dealId, { stage });
 
     const openDeal = async (deal) => {
+        setTableEditRowId(null);
         setPanelOpen(true);
         setDealDetail(deal);
         try {
@@ -140,6 +142,7 @@ export default function Deals() {
     };
 
     const closePanel = () => {
+        setTableEditRowId(null);
         setPanelOpen(false);
         setDealDetail(null);
     };
@@ -220,12 +223,14 @@ export default function Deals() {
                                             tabIndex={0}
                                             onClick={(e) => {
                                                 if (isRowUiTarget(e)) return;
+                                                setTableEditRowId(null);
                                                 openDeal(deal);
                                             }}
                                             onKeyDown={(e) => {
                                                 if (isRowUiTarget(e)) return;
                                                 if (e.key === 'Enter' || e.key === ' ') {
                                                     e.preventDefault();
+                                                    setTableEditRowId(null);
                                                     openDeal(deal);
                                                 }
                                             }}
@@ -241,25 +246,45 @@ export default function Deals() {
                                                         type="button"
                                                         variant="ghost"
                                                         size="icon"
-                                                        className="h-7 w-7 text-slate-500 hover:text-violet-700"
+                                                        className={cn(
+                                                            'h-7 w-7 text-slate-500 hover:text-violet-700',
+                                                            tableEditRowId === deal.id &&
+                                                                'bg-violet-100 text-violet-800 hover:bg-violet-100'
+                                                        )}
                                                         onClick={(e) => {
                                                             e.stopPropagation();
-                                                            focusFirstEditableInRow(
-                                                                e.currentTarget.closest('tr')
+                                                            const tr = e.currentTarget.closest('tr');
+                                                            if (tableEditRowId === deal.id) {
+                                                                setTableEditRowId(null);
+                                                                return;
+                                                            }
+                                                            setTableEditRowId(deal.id);
+                                                            requestAnimationFrame(() =>
+                                                                focusFirstEditableInRow(tr)
                                                             );
                                                         }}
-                                                        aria-label={`Edit fields in row for ${deal.name || 'deal'}`}
+                                                        aria-label={
+                                                            tableEditRowId === deal.id
+                                                                ? `Stop editing row for ${deal.name || 'deal'}`
+                                                                : `Edit fields in row for ${deal.name || 'deal'}`
+                                                        }
                                                     >
                                                         <Pencil className="h-3.5 w-3.5" aria-hidden />
                                                     </Button>
                                                 </div>
                                             </td>
                                             <td className="px-3 py-2 align-top max-w-[220px] font-medium">
-                                                <EditableCell
-                                                    value={deal.name || ''}
-                                                    onCommit={(v) => patchDeal(deal.id, { name: v })}
-                                                    inputClassName="font-medium text-slate-900"
-                                                />
+                                                {tableEditRowId === deal.id ? (
+                                                    <EditableCell
+                                                        value={deal.name || ''}
+                                                        onCommit={(v) => patchDeal(deal.id, { name: v })}
+                                                        inputClassName="font-medium text-slate-900"
+                                                    />
+                                                ) : (
+                                                    <div className="min-h-[2rem] py-1 text-sm font-medium text-slate-900 truncate">
+                                                        {deal.name || '—'}
+                                                    </div>
+                                                )}
                                             </td>
                                             <td className="px-3 py-2" onClick={(e) => e.stopPropagation()}>
                                                 <Select
@@ -297,73 +322,130 @@ export default function Deals() {
                                                 </Select>
                                             </td>
                                             <td className="px-3 py-2 align-top">
-                                                <EditableCell
-                                                    value={deal.owner_initials || ''}
-                                                    onCommit={(v) =>
-                                                        patchDeal(deal.id, {
-                                                            owner_initials: (v || '').slice(0, 8).toUpperCase(),
-                                                        })
-                                                    }
-                                                    inputClassName="text-center uppercase tracking-wide max-w-[4.5rem] font-semibold"
-                                                />
+                                                {tableEditRowId === deal.id ? (
+                                                    <EditableCell
+                                                        value={deal.owner_initials || ''}
+                                                        onCommit={(v) =>
+                                                            patchDeal(deal.id, {
+                                                                owner_initials: (v || '')
+                                                                    .slice(0, 8)
+                                                                    .toUpperCase(),
+                                                            })
+                                                        }
+                                                        inputClassName="text-center uppercase tracking-wide max-w-[4.5rem] font-semibold"
+                                                    />
+                                                ) : (
+                                                    <div className="h-8 w-8 rounded-full bg-violet-100 text-violet-700 text-xs font-semibold flex items-center justify-center border border-violet-200">
+                                                        {deal.owner_initials || '?'}
+                                                    </div>
+                                                )}
                                             </td>
                                             <td className="px-3 py-2 align-top tabular-nums max-w-[120px]">
-                                                <EditableCell
-                                                    type="number"
-                                                    value={deal.deal_value != null ? String(deal.deal_value) : ''}
-                                                    onCommit={(v) => {
-                                                        if (v.trim() === '') {
-                                                            patchDeal(deal.id, { deal_value: null });
-                                                            return;
+                                                {tableEditRowId === deal.id ? (
+                                                    <EditableCell
+                                                        type="number"
+                                                        value={
+                                                            deal.deal_value != null ? String(deal.deal_value) : ''
                                                         }
-                                                        const n = Math.round(Number(v));
-                                                        if (!Number.isFinite(n)) return;
-                                                        patchDeal(deal.id, { deal_value: n });
-                                                    }}
-                                                />
+                                                        onCommit={(v) => {
+                                                            if (v.trim() === '') {
+                                                                patchDeal(deal.id, { deal_value: null });
+                                                                return;
+                                                            }
+                                                            const n = Math.round(Number(v));
+                                                            if (!Number.isFinite(n)) return;
+                                                            patchDeal(deal.id, { deal_value: n });
+                                                        }}
+                                                    />
+                                                ) : (
+                                                    <div className="min-h-[2rem] py-1 text-sm text-slate-700 tabular-nums">
+                                                        {fmtMoney(deal.deal_value)}
+                                                    </div>
+                                                )}
                                             </td>
                                             <td className="px-3 py-2 align-top max-w-[180px]">
-                                                <EditableCell
-                                                    value={deal.contact_display || ''}
-                                                    onCommit={(v) => patchDeal(deal.id, { contact_display: v })}
-                                                    inputClassName="text-xs"
-                                                />
+                                                {tableEditRowId === deal.id ? (
+                                                    <EditableCell
+                                                        value={deal.contact_display || ''}
+                                                        onCommit={(v) =>
+                                                            patchDeal(deal.id, { contact_display: v })
+                                                        }
+                                                        inputClassName="text-xs"
+                                                    />
+                                                ) : (
+                                                    <div className="min-h-[2rem] py-1">
+                                                        {deal.contact_display ? (
+                                                            <span className="inline-flex rounded-md bg-slate-100 px-2 py-0.5 text-xs font-medium text-slate-800">
+                                                                {deal.contact_display}
+                                                            </span>
+                                                        ) : (
+                                                            <span className="text-slate-500">—</span>
+                                                        )}
+                                                    </div>
+                                                )}
                                             </td>
                                             <td className="px-3 py-2 align-top max-w-[200px]">
-                                                <EditableCell
-                                                    value={deal.account_name || ''}
-                                                    onCommit={(v) => patchDeal(deal.id, { account_name: v })}
-                                                    inputClassName="text-xs"
-                                                />
+                                                {tableEditRowId === deal.id ? (
+                                                    <EditableCell
+                                                        value={deal.account_name || ''}
+                                                        onCommit={(v) => patchDeal(deal.id, { account_name: v })}
+                                                        inputClassName="text-xs"
+                                                    />
+                                                ) : (
+                                                    <div className="min-h-[2rem] py-1">
+                                                        {deal.account_name ? (
+                                                            <span className="inline-flex rounded-md bg-violet-50 px-2 py-0.5 text-xs font-medium text-violet-800">
+                                                                {deal.account_name}
+                                                            </span>
+                                                        ) : (
+                                                            <span className="text-slate-500">—</span>
+                                                        )}
+                                                    </div>
+                                                )}
                                             </td>
                                             <td className="px-3 py-2 align-top">
-                                                <EditableDateCell
-                                                    value={deal.expected_close_date}
-                                                    onCommit={(dateStr) =>
-                                                        patchDeal(deal.id, {
-                                                            expected_close_date: dateStr || null,
-                                                        })
-                                                    }
-                                                />
+                                                {tableEditRowId === deal.id ? (
+                                                    <EditableDateCell
+                                                        value={deal.expected_close_date}
+                                                        onCommit={(dateStr) =>
+                                                            patchDeal(deal.id, {
+                                                                expected_close_date: dateStr || null,
+                                                            })
+                                                        }
+                                                    />
+                                                ) : (
+                                                    <div className="min-h-[2rem] py-1 text-sm text-slate-600">
+                                                        {fmtDate(deal.expected_close_date)}
+                                                    </div>
+                                                )}
                                             </td>
                                             <td className="px-3 py-2 align-top tabular-nums max-w-[90px]">
-                                                <EditableCell
-                                                    type="number"
-                                                    value={
-                                                        deal.close_probability != null
-                                                            ? String(deal.close_probability)
-                                                            : ''
-                                                    }
-                                                    onCommit={(v) => {
-                                                        if (v.trim() === '') {
-                                                            patchDeal(deal.id, { close_probability: 0 });
-                                                            return;
+                                                {tableEditRowId === deal.id ? (
+                                                    <EditableCell
+                                                        type="number"
+                                                        value={
+                                                            deal.close_probability != null
+                                                                ? String(deal.close_probability)
+                                                                : ''
                                                         }
-                                                        const n = Math.min(100, Math.max(0, Math.round(Number(v))));
-                                                        if (!Number.isFinite(n)) return;
-                                                        patchDeal(deal.id, { close_probability: n });
-                                                    }}
-                                                />
+                                                        onCommit={(v) => {
+                                                            if (v.trim() === '') {
+                                                                patchDeal(deal.id, { close_probability: 0 });
+                                                                return;
+                                                            }
+                                                            const n = Math.min(
+                                                                100,
+                                                                Math.max(0, Math.round(Number(v)))
+                                                            );
+                                                            if (!Number.isFinite(n)) return;
+                                                            patchDeal(deal.id, { close_probability: n });
+                                                        }}
+                                                    />
+                                                ) : (
+                                                    <div className="min-h-[2rem] py-1 text-sm text-slate-700 tabular-nums">
+                                                        {deal.close_probability ?? '—'}%
+                                                    </div>
+                                                )}
                                             </td>
                                             <td
                                                 className="px-3 py-2 tabular-nums text-slate-700"
@@ -372,20 +454,32 @@ export default function Deals() {
                                                 {fmtMoney(deal.forecast_value)}
                                             </td>
                                             <td className="px-3 py-2 align-top">
-                                                <EditableDateCell
-                                                    value={deal.last_interaction_at}
-                                                    onCommit={(dateStr) =>
-                                                        patchDeal(deal.id, {
-                                                            last_interaction_at: dateStr || null,
-                                                        })
-                                                    }
-                                                />
+                                                {tableEditRowId === deal.id ? (
+                                                    <EditableDateCell
+                                                        value={deal.last_interaction_at}
+                                                        onCommit={(dateStr) =>
+                                                            patchDeal(deal.id, {
+                                                                last_interaction_at: dateStr || null,
+                                                            })
+                                                        }
+                                                    />
+                                                ) : (
+                                                    <div className="min-h-[2rem] py-1 text-sm text-slate-600">
+                                                        {fmtDate(deal.last_interaction_at)}
+                                                    </div>
+                                                )}
                                             </td>
                                             <td className="px-3 py-2 align-top max-w-[120px]">
-                                                <EditableCell
-                                                    value={deal.country || ''}
-                                                    onCommit={(v) => patchDeal(deal.id, { country: v })}
-                                                />
+                                                {tableEditRowId === deal.id ? (
+                                                    <EditableCell
+                                                        value={deal.country || ''}
+                                                        onCommit={(v) => patchDeal(deal.id, { country: v })}
+                                                    />
+                                                ) : (
+                                                    <div className="min-h-[2rem] py-1 text-sm text-slate-700">
+                                                        {deal.country || '—'}
+                                                    </div>
+                                                )}
                                             </td>
                                         </tr>
                                     );

frontend/src/pages/Leads.jsx

@@ -66,6 +66,7 @@ export default function Leads() {
     const [seedBusy, setSeedBusy] = useState(false);
     const [rowSelection, setRowSelection] = useState({});
     const [bulkBusy, setBulkBusy] = useState(null);
+    const [tableEditRowId, setTableEditRowId] = useState(null);
 
     const selectedIds = useMemo(
         () => Object.keys(rowSelection).filter((id) => rowSelection[id]).map(Number),
@@ -165,6 +166,7 @@ export default function Leads() {
     };
 
     const openDetail = async (lead) => {
+        setTableEditRowId(null);
         setSelected(lead);
         setThreadData(null);
         try {
@@ -179,6 +181,7 @@ export default function Leads() {
     };
 
     const closePanel = () => {
+        setTableEditRowId(null);
         setSelected(null);
         setThreadData(null);
     };
@@ -443,12 +446,14 @@ export default function Leads() {
                                             tabIndex={0}
                                             onClick={(e) => {
                                                 if (isRowUiTarget(e)) return;
+                                                setTableEditRowId(null);
                                                 openDetail(lead);
                                             }}
                                             onKeyDown={(e) => {
                                                 if (isRowUiTarget(e)) return;
                                                 if (e.key === 'Enter' || e.key === ' ') {
                                                     e.preventDefault();
+                                                    setTableEditRowId(null);
                                                     openDetail(lead);
                                                 }
                                             }}
@@ -474,29 +479,51 @@ export default function Leads() {
                                                     type="button"
                                                     variant="ghost"
                                                     size="icon"
-                                                    className="h-8 w-8 text-slate-500 hover:text-violet-700"
+                                                    className={cn(
+                                                        'h-8 w-8 text-slate-500 hover:text-violet-700',
+                                                        tableEditRowId === lead.id &&
+                                                            'bg-violet-100 text-violet-800 hover:bg-violet-100'
+                                                    )}
                                                     onClick={(e) => {
                                                         e.stopPropagation();
-                                                        focusFirstEditableInRow(e.currentTarget.closest('tr'));
+                                                        const tr = e.currentTarget.closest('tr');
+                                                        if (tableEditRowId === lead.id) {
+                                                            setTableEditRowId(null);
+                                                            return;
+                                                        }
+                                                        setTableEditRowId(lead.id);
+                                                        requestAnimationFrame(() =>
+                                                            focusFirstEditableInRow(tr)
+                                                        );
                                                     }}
-                                                    aria-label={`Edit fields in row for ${displayName}`}
+                                                    aria-label={
+                                                        tableEditRowId === lead.id
+                                                            ? `Stop editing row for ${displayName}`
+                                                            : `Edit fields in row for ${displayName}`
+                                                    }
                                                 >
                                                     <Pencil className="h-4 w-4" aria-hidden />
                                                 </Button>
                                             </td>
                                             <td className="px-3 py-2 align-top max-w-[200px]">
-                                                <div className="flex flex-col gap-1">
-                                                    <EditableCell
-                                                        value={lead.first_name || ''}
-                                                        onCommit={(v) => patchLead(lead.id, { first_name: v })}
-                                                        inputClassName="font-medium text-violet-800"
-                                                    />
-                                                    <EditableCell
-                                                        value={lead.last_name || ''}
-                                                        onCommit={(v) => patchLead(lead.id, { last_name: v })}
-                                                        inputClassName="font-medium text-violet-800"
-                                                    />
-                                                </div>
+                                                {tableEditRowId === lead.id ? (
+                                                    <div className="flex flex-col gap-1">
+                                                        <EditableCell
+                                                            value={lead.first_name || ''}
+                                                            onCommit={(v) => patchLead(lead.id, { first_name: v })}
+                                                            inputClassName="font-medium text-violet-800"
+                                                        />
+                                                        <EditableCell
+                                                            value={lead.last_name || ''}
+                                                            onCommit={(v) => patchLead(lead.id, { last_name: v })}
+                                                            inputClassName="font-medium text-violet-800"
+                                                        />
+                                                    </div>
+                                                ) : (
+                                                    <div className="min-h-[2.25rem] py-1 text-sm font-medium text-violet-800 leading-snug">
+                                                        {displayName}
+                                                    </div>
+                                                )}
                                                 {lead.contact_id ? (
                                                     <span className="mt-1 text-xs text-emerald-600">
                                                         (in Contacts)
@@ -545,48 +572,91 @@ export default function Leads() {
                                             <td className="px-3 py-2 align-top max-w-[220px]">
                                                 <span className="inline-flex items-start gap-1.5 w-full">
                                                     <Building2 className="h-3.5 w-3.5 text-slate-400 shrink-0 mt-1" />
-                                                    <EditableCell
-                                                        value={lead.company_name || ''}
-                                                        onCommit={(v) => patchLead(lead.id, { company_name: v })}
-                                                    />
+                                                    {tableEditRowId === lead.id ? (
+                                                        <EditableCell
+                                                            value={lead.company_name || ''}
+                                                            onCommit={(v) => patchLead(lead.id, { company_name: v })}
+                                                        />
+                                                    ) : (
+                                                        <span className="min-h-[2.25rem] py-1 text-sm text-slate-700">
+                                                            {lead.company_name || '—'}
+                                                        </span>
+                                                    )}
                                                 </span>
                                             </td>
                                             <td className="px-3 py-2 align-top max-w-[200px]">
                                                 <span className="inline-flex items-start gap-1.5 w-full">
                                                     <Briefcase className="h-3.5 w-3.5 text-slate-400 shrink-0 mt-1" />
-                                                    <EditableCell
-                                                        value={lead.title || ''}
-                                                        onCommit={(v) => patchLead(lead.id, { title: v })}
-                                                    />
+                                                    {tableEditRowId === lead.id ? (
+                                                        <EditableCell
+                                                            value={lead.title || ''}
+                                                            onCommit={(v) => patchLead(lead.id, { title: v })}
+                                                        />
+                                                    ) : (
+                                                        <span className="min-h-[2.25rem] py-1 text-sm text-slate-700">
+                                                            {lead.title || '—'}
+                                                        </span>
+                                                    )}
                                                 </span>
                                             </td>
                                             <td className="px-3 py-2 align-top max-w-[260px]">
-                                                <div className="flex items-start gap-1.5">
-                                                    <EditableCell
-                                                        type="email"
-                                                        value={lead.email || ''}
-                                                        onCommit={(v) => patchLead(lead.id, { email: v })}
-                                                        className="min-w-0 flex-1"
-                                                    />
-                                                    {lead.email ? (
-                                                        <a
-                                                            href={`mailto:${lead.email}`}
-                                                            className="mt-1 shrink-0 text-violet-600 hover:text-violet-800"
-                                                            title="Send email"
-                                                            onClick={(e) => e.stopPropagation()}
-                                                        >
-                                                            <Mail className="h-3.5 w-3.5" />
-                                                        </a>
-                                                    ) : null}
-                                                </div>
+                                                {tableEditRowId === lead.id ? (
+                                                    <div className="flex items-start gap-1.5">
+                                                        <EditableCell
+                                                            type="email"
+                                                            value={lead.email || ''}
+                                                            onCommit={(v) => patchLead(lead.id, { email: v })}
+                                                            className="min-w-0 flex-1"
+                                                        />
+                                                        {lead.email ? (
+                                                            <a
+                                                                href={`mailto:${lead.email}`}
+                                                                className="mt-1 shrink-0 text-violet-600 hover:text-violet-800"
+                                                                title="Send email"
+                                                                onClick={(e) => e.stopPropagation()}
+                                                            >
+                                                                <Mail className="h-3.5 w-3.5" />
+                                                            </a>
+                                                        ) : null}
+                                                    </div>
+                                                ) : (
+                                                    <div className="flex items-center gap-1.5 min-h-[2.25rem] py-1 text-sm text-slate-700 truncate">
+                                                        {lead.email ? (
+                                                            <>
+                                                                <Mail className="h-3.5 w-3.5 shrink-0 text-slate-400" />
+                                                                <a
+                                                                    href={`mailto:${lead.email}`}
+                                                                    className="text-violet-600 hover:underline truncate"
+                                                                    onClick={(e) => e.stopPropagation()}
+                                                                >
+                                                                    {lead.email}
+                                                                </a>
+                                                            </>
+                                                        ) : (
+                                                            '—'
+                                                        )}
+                                                    </div>
+                                                )}
                                             </td>
                                             <td className="px-3 py-2 align-top text-slate-600 max-w-[280px]">
-                                                <EditableCell
-                                                    multiline
-                                                    value={lead.last_reply_body || ''}
-                                                    onCommit={(v) => patchLead(lead.id, { last_reply_body: v })}
-                                                    inputClassName="text-xs"
-                                                />
+                                                {tableEditRowId === lead.id ? (
+                                                    <EditableCell
+                                                        multiline
+                                                        value={lead.last_reply_body || ''}
+                                                        onCommit={(v) => patchLead(lead.id, { last_reply_body: v })}
+                                                        inputClassName="text-xs"
+                                                    />
+                                                ) : (
+                                                    <div
+                                                        className="min-h-[2.25rem] max-h-[5.5rem] overflow-hidden py-1 text-xs"
+                                                        title={lead.last_reply_body || ''}
+                                                    >
+                                                        {lead.last_reply_body
+                                                            ? lead.last_reply_body.slice(0, 200) +
+                                                              (lead.last_reply_body.length > 200 ? '…' : '')
+                                                            : '—'}
+                                                    </div>
+                                                )}
                                             </td>
                                         </tr>
                                     );