update

frontend/src/components/workspace/CompanyDetailsEditor.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { Loader2, Sparkles } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -20,6 +20,10 @@ function formFromDetails(cd, fallbackCompany = '') {
     };
 }
 
+function formsCompanyEqual(a, b) {
+    return Object.keys(a).every((k) => (a[k] || '').trim() === (b[k] || '').trim());
+}
+
 function buildPatch(variant, form, dealLinkedContact) {
     const detail = {
         company_name_for_emails: form.companyNameForEmails,
@@ -51,8 +55,8 @@ function buildPatch(variant, form, dealLinkedContact) {
 }
 
 /**
- * Editable “Company details” card (two-column grid) + Save, for Contacts / Leads / Deals slide-overs.
- * `companyDetails` uses Apollo-style keys from the API (`company_details` or contact `raw_data`).
+ * Editable “Company details” card for Contacts / Leads / Deals slide-overs.
+ * `autoSave`: debounced save after typing pauses (no Save button).
  */
 export default function CompanyDetailsEditor({
     variant,
@@ -65,12 +69,16 @@ export default function CompanyDetailsEditor({
     onFetch,
     fetchLoading = false,
     fetchError = '',
+    autoSave = false,
 }) {
     const [form, setForm] = useState(() => formFromDetails(companyDetails, fallbackCompanyName));
     const [saving, setSaving] = useState(false);
+    const baselineRef = useRef(formFromDetails(companyDetails, fallbackCompanyName));
 
     useEffect(() => {
-        setForm(formFromDetails(companyDetails, fallbackCompanyName));
+        const b = formFromDetails(companyDetails, fallbackCompanyName);
+        baselineRef.current = b;
+        setForm(b);
     }, [companyDetails, fallbackCompanyName]);
 
     const dealLimited = variant === 'deal' && !dealLinkedContact;
@@ -79,6 +87,7 @@ export default function CompanyDetailsEditor({
     const setField = (key, value) => setForm((f) => ({ ...f, [key]: value }));
 
     const handleSave = async () => {
+        if (!onSave) return;
         setSaving(true);
         try {
             await onSave(buildPatch(variant, form, dealLinkedContact));
@@ -87,34 +96,58 @@ export default function CompanyDetailsEditor({
         }
     };
 
+    useEffect(() => {
+        if (!autoSave || !onSave) return;
+        const baseline = baselineRef.current;
+        if (formsCompanyEqual(form, baseline)) return;
+        const t = setTimeout(async () => {
+            setSaving(true);
+            try {
+                await onSave(buildPatch(variant, form, dealLinkedContact));
+                baselineRef.current = { ...form };
+            } finally {
+                setSaving(false);
+            }
+        }, 700);
+        return () => clearTimeout(t);
+    }, [form, autoSave, onSave, variant, dealLinkedContact]);
+
     const row = (label, key, opts = {}) => (
         <div className={opts.span === 2 ? 'sm:col-span-2' : ''}>
-            <label className="block text-xs font-medium text-slate-500 mb-1">{label}</label>
+            <label className="mb-1 block text-xs font-medium text-slate-500">{label}</label>
             <Input
                 value={form[key]}
                 onChange={(e) => setField(key, e.target.value)}
                 disabled={isInputDisabled(key)}
-                className="text-sm bg-white"
+                className="bg-white text-sm"
                 placeholder={opts.placeholder}
             />
         </div>
     );
 
     return (
-        <div className={cn('rounded-xl border border-slate-200 bg-slate-50/50 p-4 flex flex-col gap-4 mb-6', className)}>
+        <div className={cn('mb-6 flex flex-col gap-4 rounded-xl border border-slate-200 bg-slate-50/50 p-4', className)}>
             <div className="flex flex-wrap items-start justify-between gap-2">
-                <h4 className="text-sm font-semibold text-slate-700">Company details</h4>
+                <div className="flex items-center gap-2">
+                    <h4 className="text-sm font-semibold text-slate-700">Company details</h4>
+                    {autoSave && saving ? (
+                        <span className="flex items-center gap-1 text-xs text-slate-500">
+                            <Loader2 className="h-3 w-3 shrink-0 animate-spin" aria-hidden />
+                            Saving…
+                        </span>
+                    ) : null}
+                </div>
                 {showFetch && onFetch ? (
                     <Button
                         type="button"
                         variant="outline"
                         size="sm"
-                        className="gap-1.5 shrink-0 text-violet-700 border-violet-200 hover:bg-violet-50"
+                        className="shrink-0 gap-1.5 border-violet-200 text-violet-700 hover:bg-violet-50"
                         onClick={() => onFetch()}
                         disabled={fetchLoading}
                     >
                         {fetchLoading ? (
-                            <Loader2 className="h-3.5 w-3.5 animate-spin shrink-0" aria-hidden />
+                            <Loader2 className="h-3.5 w-3.5 shrink-0 animate-spin" aria-hidden />
                         ) : (
                             <Sparkles className="h-3.5 w-3.5 shrink-0" aria-hidden />
                         )}
@@ -136,31 +169,33 @@ export default function CompanyDetailsEditor({
                 </p>
             ) : null}
 
-            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
+            <div className="grid grid-cols-1 gap-3 text-sm sm:grid-cols-2">
                 {row('Company Name', 'companyName')}
                 {row('Company Name for Emails', 'companyNameForEmails')}
                 {row('Industry', 'industry', { span: 2 })}
-                {row('Employees', 'employees', { detail: true })}
-                {row('Annual Revenue', 'annualRevenue', { detail: true })}
-                {row('Last Raised At', 'lastRaisedAt', { detail: true })}
-                {row('Website', 'website', { detail: true, placeholder: 'https://' })}
-                {row('City', 'city', { detail: true })}
-                {row('State', 'state', { detail: true })}
-                {row('Country', 'country', { detail: true })}
+                {row('Employees', 'employees')}
+                {row('Annual Revenue', 'annualRevenue')}
+                {row('Last Raised At', 'lastRaisedAt')}
+                {row('Website', 'website', { placeholder: 'https://' })}
+                {row('City', 'city')}
+                {row('State', 'state')}
+                {row('Country', 'country')}
             </div>
 
-            <div className="pt-2 border-t border-slate-200/80">
-                <Button type="button" className="w-full" onClick={handleSave} disabled={saving}>
-                    {saving ? (
-                        <>
-                            <Loader2 className="h-4 w-4 animate-spin mr-2" aria-hidden />
-                            Saving…
-                        </>
-                    ) : (
-                        'Save'
-                    )}
-                </Button>
-            </div>
+            {!autoSave ? (
+                <div className="border-t border-slate-200/80 pt-2">
+                    <Button type="button" className="w-full" onClick={handleSave} disabled={saving}>
+                        {saving ? (
+                            <>
+                                <Loader2 className="mr-2 h-4 w-4 animate-spin" aria-hidden />
+                                Saving…
+                            </>
+                        ) : (
+                            'Save'
+                        )}
+                    </Button>
+                </div>
+            ) : null}
         </div>
     );
 }

frontend/src/components/workspace/ContactIdentityEditor.jsx

@@ -1,11 +1,31 @@
-import React, { useEffect, useState } from 'react';
+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 { cn } from '@/lib/utils';
 
+function baselineFromProps(firstName, lastName, email, title) {
+    return {
+        firstName: firstName || '',
+        lastName: lastName || '',
+        email: email || '',
+        title: title || '',
+    };
+}
+
+function formsEqual(a, b) {
+    return (
+        (a.firstName || '').trim() === (b.firstName || '').trim() &&
+        (a.lastName || '').trim() === (b.lastName || '').trim() &&
+        (a.email || '').trim() === (b.email || '').trim() &&
+        (a.title || '').trim() === (b.title || '').trim()
+    );
+}
+
 /**
- * Editable person fields (first / last name, email, title) + Save — slide-over top section.
+ * Editable person fields (first / last name, email, title).
+ * `autoSave`: debounced PATCH after typing pauses (no Save button).
+ * Otherwise: Save button commits all fields.
  */
 export default function ContactIdentityEditor({
     firstName = '',
@@ -16,17 +36,16 @@ export default function ContactIdentityEditor({
     disabled = false,
     className,
     heading = 'Contact details',
+    autoSave = false,
 }) {
-    const [form, setForm] = useState({
-        firstName,
-        lastName,
-        email,
-        title,
-    });
+    const [form, setForm] = useState(() => baselineFromProps(firstName, lastName, email, title));
     const [saving, setSaving] = useState(false);
+    const baselineRef = useRef(baselineFromProps(firstName, lastName, email, title));
 
     useEffect(() => {
-        setForm({ firstName, lastName, email, title });
+        const b = baselineFromProps(firstName, lastName, email, title);
+        baselineRef.current = b;
+        setForm(b);
     }, [firstName, lastName, email, title]);
 
     const setField = (key, value) => setForm((f) => ({ ...f, [key]: value }));
@@ -46,12 +65,46 @@ export default function ContactIdentityEditor({
         }
     };
 
+    useEffect(() => {
+        if (!autoSave || !onSave || disabled) return;
+        const baseline = baselineRef.current;
+        if (formsEqual(form, baseline)) return;
+        const t = setTimeout(async () => {
+            setSaving(true);
+            try {
+                await onSave({
+                    first_name: form.firstName,
+                    last_name: form.lastName,
+                    email: form.email,
+                    title: form.title,
+                });
+                baselineRef.current = {
+                    firstName: form.firstName,
+                    lastName: form.lastName,
+                    email: form.email,
+                    title: form.title,
+                };
+            } finally {
+                setSaving(false);
+            }
+        }, 650);
+        return () => clearTimeout(t);
+    }, [form, autoSave, disabled, onSave, firstName, lastName, email, title]);
+
     return (
         <div className={cn('rounded-xl border border-slate-200 bg-white p-4 mb-6', className)}>
-            <h4 className="text-sm font-semibold text-slate-800 mb-3">{heading}</h4>
-            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
+            <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>
+            <div className="grid grid-cols-1 gap-3 text-sm sm:grid-cols-2">
                 <div>
-                    <label className="block text-xs font-medium text-slate-500 mb-1">First name</label>
+                    <label className="mb-1 block text-xs font-medium text-slate-500">First name</label>
                     <Input
                         value={form.firstName}
                         onChange={(e) => setField('firstName', e.target.value)}
@@ -60,7 +113,7 @@ export default function ContactIdentityEditor({
                     />
                 </div>
                 <div>
-                    <label className="block text-xs font-medium text-slate-500 mb-1">Last name</label>
+                    <label className="mb-1 block text-xs font-medium text-slate-500">Last name</label>
                     <Input
                         value={form.lastName}
                         onChange={(e) => setField('lastName', e.target.value)}
@@ -69,7 +122,7 @@ export default function ContactIdentityEditor({
                     />
                 </div>
                 <div className="sm:col-span-2">
-                    <label className="block text-xs font-medium text-slate-500 mb-1">Email</label>
+                    <label className="mb-1 block text-xs font-medium text-slate-500">Email</label>
                     <Input
                         type="email"
                         value={form.email}
@@ -79,7 +132,7 @@ export default function ContactIdentityEditor({
                     />
                 </div>
                 <div className="sm:col-span-2">
-                    <label className="block text-xs font-medium text-slate-500 mb-1">Title</label>
+                    <label className="mb-1 block text-xs font-medium text-slate-500">Title</label>
                     <Input
                         value={form.title}
                         onChange={(e) => setField('title', e.target.value)}
@@ -88,18 +141,25 @@ export default function ContactIdentityEditor({
                     />
                 </div>
             </div>
-            <div className="mt-4">
-                <Button type="button" className="w-full sm:w-auto" onClick={handleSave} disabled={disabled || saving}>
-                    {saving ? (
-                        <>
-                            <Loader2 className="h-4 w-4 animate-spin mr-2" aria-hidden />
-                            Saving…
-                        </>
-                    ) : (
-                        'Save'
-                    )}
-                </Button>
-            </div>
+            {!autoSave ? (
+                <div className="mt-4">
+                    <Button
+                        type="button"
+                        className="w-full sm:w-auto"
+                        onClick={handleSave}
+                        disabled={disabled || saving}
+                    >
+                        {saving ? (
+                            <>
+                                <Loader2 className="mr-2 h-4 w-4 animate-spin" aria-hidden />
+                                Saving…
+                            </>
+                        ) : (
+                            'Save'
+                        )}
+                    </Button>
+                </div>
+            ) : null}
         </div>
     );
 }

frontend/src/pages/Contacts.jsx

@@ -1100,6 +1100,7 @@ export default function Contacts() {
                                 title={selectedContactDetails.title || ''}
                                 onSave={(patch) => patchContact(selectedContact.id, patch)}
                                 disabled={!selectedContact}
+                                autoSave
                             />
                         )}
 
@@ -1117,6 +1118,7 @@ export default function Contacts() {
                                     onFetch={enrichContactFromGpt}
                                     fetchLoading={enrichLoading}
                                     fetchError={enrichError}
+                                    autoSave
                                 />
                             )}
                         </div>

frontend/src/pages/Deals.jsx

@@ -1,8 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Link } from 'react-router-dom';
-import { GitBranch, Loader2, LayoutGrid, MessageSquare, Pencil } from 'lucide-react';
+import { GitBranch, Loader2, LayoutGrid, MessageSquare } from 'lucide-react';
 import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
 import { Select, SelectTrigger, SelectContent, SelectItem } from '@/components/ui/select';
 import AppShell from '@/components/layout/AppShell';
 import { apiFetch } from '@/lib/api';
@@ -86,13 +85,6 @@ function isRowUiTarget(e) {
     );
 }
 
-function isoToDateInput(iso) {
-    if (!iso) return '';
-    const d = new Date(iso);
-    if (Number.isNaN(d.getTime())) return '';
-    return d.toISOString().slice(0, 10);
-}
-
 /** Maps stored probability to Select value: __clear__ or "10"…"100" (nearest 10, min 10). */
 function closeProbabilitySelectValue(p) {
     if (p == null || p === '') return '__clear__';
@@ -150,8 +142,6 @@ function GroupedDealTbody({
     barClassName,
     headerContent,
     deals,
-    tableEditRowId,
-    setTableEditRowId,
     patchDeal,
     updateStage,
     openDeal,
@@ -174,8 +164,6 @@ function GroupedDealTbody({
                 <DealRow
                     key={deal.id}
                     deal={deal}
-                    tableEditRowId={tableEditRowId}
-                    setTableEditRowId={setTableEditRowId}
                     patchDeal={patchDeal}
                     updateStage={updateStage}
                     openDeal={openDeal}
@@ -372,17 +360,7 @@ function PipelineBoard({ columns, openDeal, patchDeal, createDeal, createBusy })
     );
 }
 
-function DealRow({
-    deal,
-    tableEditRowId,
-    setTableEditRowId,
-    patchDeal,
-    updateStage,
-    openDeal,
-    isAdmin,
-    currentUserId,
-    tenantMembers,
-}) {
+function DealRow({ deal, patchDeal, updateStage, openDeal, isAdmin, currentUserId, tenantMembers }) {
     const meta = stageMeta(deal.stage);
     const safeStage = STAGES.some((s) => s.value === deal.stage) ? deal.stage : 'new';
     const closeSel = closeProbabilitySelectValue(deal.close_probability);
@@ -393,62 +371,26 @@ function DealRow({
             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);
                 }
             }}
             className="border-b border-slate-100 hover:bg-violet-50/40 cursor-pointer"
         >
-            <td className="px-1 py-1.5 w-[4.25rem]" onClick={(e) => e.stopPropagation()}>
-                <div className="flex flex-col items-center gap-0.5">
-                    <input type="checkbox" className="rounded border-slate-300" />
-                    <Button
-                        type="button"
-                        variant="ghost"
-                        size="icon"
-                        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();
-                            const tr = e.currentTarget.closest('tr');
-                            if (tableEditRowId === deal.id) {
-                                setTableEditRowId(null);
-                                return;
-                            }
-                            setTableEditRowId(deal.id);
-                            requestAnimationFrame(() => focusFirstEditableInRow(tr));
-                        }}
-                        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 className="px-2 py-2 w-10 text-center align-middle" onClick={(e) => e.stopPropagation()}>
+                <input type="checkbox" className="rounded border-slate-300" aria-label="Select row" />
             </td>
-            <td className="px-3 py-2 align-top max-w-[220px] font-medium">
-                {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 className="px-3 py-2 align-top max-w-[220px] font-medium" onClick={(e) => e.stopPropagation()}>
+                <EditableCell
+                    value={deal.name || ''}
+                    onCommit={(v) => patchDeal(deal.id, { name: v })}
+                    inputClassName="font-medium text-slate-900"
+                />
             </td>
             <td className="px-3 py-2" onClick={(e) => e.stopPropagation()}>
                 <Select value={safeStage} onValueChange={(v) => updateStage(deal.id, v)}>
@@ -581,7 +523,7 @@ function DealRow({
                 )}
             </td>
             <td
-                className="px-2 py-2 align-top tabular-nums w-[9rem] max-w-[9rem] shrink-0"
+                className="px-2 py-2 align-top tabular-nums w-[min(11rem,100%)] min-w-[10rem] max-w-[12rem] shrink-0"
                 onClick={(e) => e.stopPropagation()}
             >
                 <EditableCurrencyCell
@@ -623,43 +565,19 @@ function DealRow({
                     </SelectContent>
                 </Select>
             </td>
-            <td className="px-3 py-2 align-top max-w-[180px]">
-                {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 className="px-3 py-2 align-top max-w-[180px]" onClick={(e) => e.stopPropagation()}>
+                <EditableCell
+                    value={deal.contact_display || ''}
+                    onCommit={(v) => patchDeal(deal.id, { contact_display: v })}
+                    inputClassName="text-xs"
+                />
             </td>
-            <td className="px-3 py-2 align-top max-w-[200px]">
-                {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 className="px-3 py-2 align-top max-w-[200px]" onClick={(e) => e.stopPropagation()}>
+                <EditableCell
+                    value={deal.account_name || ''}
+                    onCommit={(v) => patchDeal(deal.id, { account_name: v })}
+                    inputClassName="text-xs"
+                />
             </td>
             <td className="px-3 py-2 align-top" onClick={(e) => e.stopPropagation()}>
                 <EditableDateCell
@@ -737,13 +655,10 @@ 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 [dealsView, setDealsView] = useState('main');
     const [createBusy, setCreateBusy] = useState(false);
     const [companyFetchLoading, setCompanyFetchLoading] = useState(false);
     const [companyFetchError, setCompanyFetchError] = useState('');
-    const [dealPanelForm, setDealPanelForm] = useState(null);
-    const [dealPanelSaving, setDealPanelSaving] = useState(false);
     const [me, setMe] = useState(null);
     const [tenantMembers, setTenantMembers] = useState([]);
 
@@ -795,10 +710,6 @@ export default function Deals() {
         return () => clearTimeout(t);
     }, [fetchDeals]);
 
-    useEffect(() => {
-        setTableEditRowId(null);
-    }, [dealsView]);
-
     const dealsByStage = useMemo(() => {
         return STAGES.map((s) => ({
             ...s,
@@ -909,8 +820,7 @@ export default function Deals() {
                 throw new Error(msg || 'Could not create deal');
             }
             await fetchDeals();
-            setTableEditRowId(data.id);
-            openDeal(data, { keepTableEdit: true });
+            openDeal(data);
             requestAnimationFrame(() => {
                 requestAnimationFrame(() => {
                     const tr = document.querySelector(`tr[data-deal-id="${data.id}"]`);
@@ -996,11 +906,9 @@ export default function Deals() {
 
     const updateStage = (dealId, stage) => patchDeal(dealId, { stage });
 
-    const openDeal = async (deal, opts = {}) => {
-        if (!opts.keepTableEdit) setTableEditRowId(null);
+    const openDeal = async (deal) => {
         setPanelOpen(true);
         setDealDetail(deal);
-        setDealPanelForm(null);
         try {
             const res = await apiFetch(`/api/deals/${deal.id}`);
             if (res.ok) {
@@ -1012,58 +920,14 @@ export default function Deals() {
         }
     };
 
-    useEffect(() => {
-        if (!dealDetail) {
-            setDealPanelForm(null);
-            return;
-        }
-        setDealPanelForm({
-            name: dealDetail.name || '',
-            deal_value: dealDetail.deal_value != null ? String(dealDetail.deal_value) : '',
-            revenue_type: revenueTypeSelectValue(dealDetail),
-            close_prob: closeProbabilitySelectValue(dealDetail.close_probability),
-            expected_close: isoToDateInput(dealDetail.expected_close_date),
-            contact_display: dealDetail.contact_display || '',
-            last_interaction: isoToDateInput(dealDetail.last_interaction_at),
-        });
-    }, [dealDetail]);
-
-    const saveDealPanel = async () => {
-        if (!dealDetail || !dealPanelForm) return;
-        setDealPanelSaving(true);
-        try {
-            let deal_value = null;
-            if (dealPanelForm.deal_value.trim() !== '') {
-                const n = Math.round(Number(dealPanelForm.deal_value));
-                if (Number.isFinite(n)) deal_value = n;
-            }
-            let close_probability = 0;
-            if (dealPanelForm.close_prob !== '__clear__') {
-                close_probability = Number(dealPanelForm.close_prob);
-                if (!Number.isFinite(close_probability)) close_probability = 0;
-            }
-            await patchDeal(dealDetail.id, {
-                name: dealPanelForm.name.trim() || 'Untitled deal',
-                deal_value,
-                revenue_type: dealPanelForm.revenue_type,
-                close_probability,
-                expected_close_date: dealPanelForm.expected_close.trim() ? dealPanelForm.expected_close.trim() : null,
-                contact_display: dealPanelForm.contact_display.trim(),
-                last_interaction_at: dealPanelForm.last_interaction.trim()
-                    ? dealPanelForm.last_interaction.trim()
-                    : null,
-            });
-        } finally {
-            setDealPanelSaving(false);
-        }
-    };
-
     const closePanel = () => {
-        setTableEditRowId(null);
         setPanelOpen(false);
         setDealDetail(null);
     };
 
+    const dealPanelCloseSel =
+        dealDetail != null ? closeProbabilitySelectValue(dealDetail.close_probability) : '__clear__';
+
     return (
         <AppShell
             title="Deals"
@@ -1161,11 +1025,11 @@ export default function Deals() {
                         <table className="w-full text-sm min-w-[1040px]">
                             <thead>
                                 <tr className="bg-slate-50 text-left text-slate-600 border-b border-slate-200">
-                                    <th className="px-2 py-2 w-[4.25rem]" aria-label="Select and table edit" />
+                                    <th className="px-2 py-2 w-10" aria-label="Select row" />
                                     <th className="px-3 py-2 font-medium">Deal</th>
                                     <th className="px-3 py-2 font-medium">Stage</th>
                                     <th className="px-3 py-2 font-medium">Owner</th>
-                                    <th className="px-2 py-2 font-medium text-right w-[9rem] max-w-[9rem]">
+                                    <th className="px-2 py-2 font-medium text-right w-[min(11rem,100%)] min-w-[10rem] max-w-[12rem]">
                                         Deal value
                                     </th>
                                     <th className="px-3 py-2 font-medium">Revenue</th>
@@ -1184,8 +1048,6 @@ export default function Deals() {
                                         <DealRow
                                             key={deal.id}
                                             deal={deal}
-                                            tableEditRowId={tableEditRowId}
-                                            setTableEditRowId={setTableEditRowId}
                                             patchDeal={patchDeal}
                                             updateStage={updateStage}
                                             openDeal={openDeal}
@@ -1220,8 +1082,6 @@ export default function Deals() {
                                             </div>
                                         }
                                         deals={group.deals}
-                                        tableEditRowId={tableEditRowId}
-                                        setTableEditRowId={setTableEditRowId}
                                         patchDeal={patchDeal}
                                         updateStage={updateStage}
                                         openDeal={openDeal}
@@ -1246,8 +1106,6 @@ export default function Deals() {
                                             />
                                         }
                                         deals={group.deals}
-                                        tableEditRowId={tableEditRowId}
-                                        setTableEditRowId={setTableEditRowId}
                                         patchDeal={patchDeal}
                                         updateStage={updateStage}
                                         openDeal={openDeal}
@@ -1282,8 +1140,6 @@ export default function Deals() {
                                             </div>
                                         }
                                         deals={group.deals}
-                                        tableEditRowId={tableEditRowId}
-                                        setTableEditRowId={setTableEditRowId}
                                         patchDeal={patchDeal}
                                         updateStage={updateStage}
                                         openDeal={openDeal}
@@ -1304,18 +1160,18 @@ export default function Deals() {
                 open={panelOpen && !!dealDetail}
                 onClose={closePanel}
                 title={
-                    dealPanelForm ? (
-                        <Input
-                            value={dealPanelForm.name}
-                            onChange={(e) =>
-                                setDealPanelForm((f) => ({ ...f, name: e.target.value }))
+                    dealDetail ? (
+                        <EditableCell
+                            key={dealDetail.id}
+                            value={dealDetail.name || ''}
+                            onCommit={(v) =>
+                                patchDeal(dealDetail.id, { name: (v || '').trim() || 'Untitled deal' })
                             }
-                            className="text-lg font-semibold text-slate-900 border-slate-200 h-10 px-3 w-full max-w-full shadow-sm"
-                            placeholder="Deal name"
-                            aria-label="Deal name"
+                            className="text-lg font-semibold"
+                            inputClassName="text-lg font-semibold text-slate-900 px-2 py-1.5 border border-slate-200 rounded-md bg-white shadow-sm w-full max-w-full"
                         />
                     ) : (
-                        dealDetail?.name || 'Deal'
+                        'Deal'
                     )
                 }
                 subtitle={
@@ -1325,45 +1181,43 @@ export default function Deals() {
                 }
                 widthClassName="max-w-xl"
             >
-                {dealDetail && dealPanelForm && (
+                {dealDetail ? (
                     <div className="space-y-6 text-sm">
                         <section className="rounded-xl border border-slate-200 bg-slate-50/50 p-4">
                             <h4 className="text-sm font-semibold text-slate-800 mb-3">Deal information</h4>
-                            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-4">
-                                <div>
+                            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                                <div onClick={(e) => e.stopPropagation()}>
                                     <label className="block text-xs font-medium text-slate-500 mb-1">
                                         Deal value (USD)
                                     </label>
-                                    <Input
-                                        type="number"
-                                        min={0}
-                                        step={1}
-                                        value={dealPanelForm.deal_value}
-                                        onChange={(e) =>
-                                            setDealPanelForm((f) => ({
-                                                ...f,
-                                                deal_value: e.target.value,
-                                            }))
-                                        }
-                                        className="text-sm tabular-nums bg-white"
-                                        placeholder="—"
+                                    <EditableCurrencyCell
+                                        value={dealDetail.deal_value != null ? String(dealDetail.deal_value) : ''}
+                                        onCommit={(v) => {
+                                            if (v.trim() === '') {
+                                                patchDeal(dealDetail.id, { deal_value: null });
+                                                return;
+                                            }
+                                            const n = Math.round(Number(v));
+                                            if (!Number.isFinite(n)) return;
+                                            patchDeal(dealDetail.id, { deal_value: n });
+                                        }}
+                                        className="w-full bg-white rounded-md border border-slate-200 px-2 py-2"
+                                        inputClassName="text-sm tabular-nums"
                                     />
                                 </div>
-                                <div>
+                                <div onClick={(e) => e.stopPropagation()}>
                                     <label className="block text-xs font-medium text-slate-500 mb-1">
                                         Revenue
                                     </label>
                                     <Select
-                                        value={dealPanelForm.revenue_type}
-                                        onValueChange={(v) =>
-                                            setDealPanelForm((f) => ({ ...f, revenue_type: v }))
-                                        }
+                                        value={revenueTypeSelectValue(dealDetail)}
+                                        onValueChange={(v) => patchDeal(dealDetail.id, { revenue_type: v })}
                                     >
                                         <SelectTrigger className="h-10 border-slate-200 bg-white shadow-sm text-sm">
                                             <span className="font-medium">
                                                 {
                                                     REVENUE_TYPES.find(
-                                                        (t) => t.value === dealPanelForm.revenue_type
+                                                        (t) => t.value === revenueTypeSelectValue(dealDetail)
                                                     )?.label
                                                 }
                                             </span>
@@ -1377,21 +1231,23 @@ export default function Deals() {
                                         </SelectContent>
                                     </Select>
                                 </div>
-                                <div>
+                                <div onClick={(e) => e.stopPropagation()}>
                                     <label className="block text-xs font-medium text-slate-500 mb-1">
                                         Close probability
                                     </label>
                                     <Select
-                                        value={dealPanelForm.close_prob}
-                                        onValueChange={(v) =>
-                                            setDealPanelForm((f) => ({ ...f, close_prob: v }))
-                                        }
+                                        value={dealPanelCloseSel}
+                                        onValueChange={(v) => {
+                                            if (v === '__clear__') {
+                                                patchDeal(dealDetail.id, { close_probability: 0 });
+                                                return;
+                                            }
+                                            patchDeal(dealDetail.id, { close_probability: Number(v) });
+                                        }}
                                     >
                                         <SelectTrigger className="h-10 border-slate-200 bg-white shadow-sm">
                                             <span className="tabular-nums">
-                                                {dealPanelForm.close_prob === '__clear__'
-                                                    ? '—'
-                                                    : `${dealPanelForm.close_prob}%`}
+                                                {dealPanelCloseSel === '__clear__' ? '—' : `${dealPanelCloseSel}%`}
                                             </span>
                                         </SelectTrigger>
                                         <SelectContent>
@@ -1406,70 +1262,48 @@ export default function Deals() {
                                         </SelectContent>
                                     </Select>
                                 </div>
-                                <div>
+                                <div onClick={(e) => e.stopPropagation()}>
                                     <label className="block text-xs font-medium text-slate-500 mb-1">
                                         Expected close
                                     </label>
-                                    <Input
-                                        type="date"
-                                        value={dealPanelForm.expected_close}
-                                        onChange={(e) =>
-                                            setDealPanelForm((f) => ({
-                                                ...f,
-                                                expected_close: e.target.value,
-                                            }))
+                                    <EditableDateCell
+                                        value={dealDetail.expected_close_date}
+                                        onCommit={(dateStr) =>
+                                            patchDeal(dealDetail.id, {
+                                                expected_close_date: dateStr || null,
+                                            })
                                         }
-                                        className="text-sm bg-white"
+                                        className="text-sm bg-white rounded-md border border-slate-200 px-2 py-2 w-full"
                                     />
                                 </div>
-                                <div>
+                                <div onClick={(e) => e.stopPropagation()}>
                                     <label className="block text-xs font-medium text-slate-500 mb-1">
                                         Last interaction
                                     </label>
-                                    <Input
-                                        type="date"
-                                        value={dealPanelForm.last_interaction}
-                                        onChange={(e) =>
-                                            setDealPanelForm((f) => ({
-                                                ...f,
-                                                last_interaction: e.target.value,
-                                            }))
+                                    <EditableDateCell
+                                        value={dealDetail.last_interaction_at}
+                                        onCommit={(dateStr) =>
+                                            patchDeal(dealDetail.id, {
+                                                last_interaction_at: dateStr || null,
+                                            })
                                         }
-                                        className="text-sm bg-white"
+                                        className="text-sm bg-white rounded-md border border-slate-200 px-2 py-2 w-full"
                                     />
                                 </div>
-                                <div className="sm:col-span-2">
+                                <div className="sm:col-span-2" onClick={(e) => e.stopPropagation()}>
                                     <label className="block text-xs font-medium text-slate-500 mb-1">
                                         Contact (display)
                                     </label>
-                                    <Input
-                                        value={dealPanelForm.contact_display}
-                                        onChange={(e) =>
-                                            setDealPanelForm((f) => ({
-                                                ...f,
-                                                contact_display: e.target.value,
-                                            }))
+                                    <EditableCell
+                                        value={dealDetail.contact_display || ''}
+                                        onCommit={(v) =>
+                                            patchDeal(dealDetail.id, { contact_display: v.trim() })
                                         }
-                                        className="text-sm bg-white"
-                                        placeholder="Name shown on deal card"
+                                        className="bg-white rounded-md border border-slate-200 px-2 py-2 w-full"
+                                        inputClassName="text-sm"
                                     />
                                 </div>
                             </div>
-                            <Button
-                                type="button"
-                                className="w-full sm:w-auto"
-                                onClick={saveDealPanel}
-                                disabled={dealPanelSaving}
-                            >
-                                {dealPanelSaving ? (
-                                    <>
-                                        <Loader2 className="h-4 w-4 animate-spin mr-2" aria-hidden />
-                                        Saving…
-                                    </>
-                                ) : (
-                                    'Save deal'
-                                )}
-                            </Button>
                             {dealDetail.source_campaign_name ? (
                                 <p className="mt-3 text-xs text-slate-500">
                                     Source campaign:{' '}
@@ -1495,6 +1329,7 @@ export default function Deals() {
                                             patchLinkedContact(dealDetail.linked_contact.id, patch)
                                         }
                                         className="mb-0"
+                                        autoSave
                                     />
                                     <div className="mt-2">
                                         <Button asChild variant="outline" size="sm">
@@ -1523,10 +1358,11 @@ export default function Deals() {
                                 onFetch={fetchDealCompanyAi}
                                 fetchLoading={companyFetchLoading}
                                 fetchError={companyFetchError}
+                                autoSave
                             />
                         </section>
                     </div>
-                )}
+                ) : null}
             </SlideOverPanel>
         </AppShell>
     );

frontend/src/pages/Leads.jsx

@@ -699,6 +699,7 @@ export default function Leads() {
                             email={selected.email || ''}
                             title={selected.title || ''}
                             onSave={(patch) => patchLead(selected.id, patch)}
+                            autoSave
                         />
                         {selected.contact ? (
                             <p className="text-xs text-violet-700 mb-4">
@@ -719,6 +720,7 @@ export default function Leads() {
                                 onFetch={fetchLeadCompanyAi}
                                 fetchLoading={companyFetchLoading}
                                 fetchError={companyFetchError}
+                                autoSave
                             />
                         </div>