update

frontend/src/pages/Contacts.jsx

@@ -16,7 +16,7 @@ import {
     Sparkles,
     Trash2,
     Handshake,
-    PanelRight,
+    Pencil,
 } from 'lucide-react';
 import { Input } from '@/components/ui/input';
 import { Badge } from '@/components/ui/badge';
@@ -469,6 +469,12 @@ export default function Contacts() {
             )
         );
 
+    const focusFirstEditableInRow = (tr) => {
+        if (!tr) return;
+        const el = tr.querySelector('input:not([type="checkbox"]):not([type="hidden"]), textarea');
+        el?.focus?.();
+    };
+
     const SortHeader = ({ field, label, className = '' }) => {
         const active = sortBy === field;
         return (
@@ -612,7 +618,7 @@ export default function Contacts() {
                                                 aria-label="Select all on page"
                                             />
                                         </th>
-                                        <th className="w-9 px-0 py-2" aria-label="Details" />
+                                        <th className="w-9 px-0 py-2" aria-label="Table edit" />
                                         <SortHeader field="first_name" label="Name" />
                                         <SortHeader field="email" label="Email" />
                                         <SortHeader field="company" label="Company" />
@@ -786,10 +792,15 @@ export default function Contacts() {
                                                         variant="ghost"
                                                         size="icon"
                                                         className="h-8 w-8 text-slate-500 hover:text-violet-700"
-                                                        onClick={() => openContact(contact)}
-                                                        aria-label={`Open details for ${displayName}`}
+                                                        onClick={(e) => {
+                                                            e.stopPropagation();
+                                                            focusFirstEditableInRow(
+                                                                e.currentTarget.closest('tr')
+                                                            );
+                                                        }}
+                                                        aria-label={`Edit fields in row for ${displayName}`}
                                                     >
-                                                        <PanelRight className="h-4 w-4" aria-hidden />
+                                                        <Pencil className="h-4 w-4" aria-hidden />
                                                     </Button>
                                                 </td>
                                                 <td className="px-3 py-2 align-top">

frontend/src/pages/Deals.jsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
-import { Search, Loader2, LayoutGrid, PanelRight } from 'lucide-react';
+import { Search, Loader2, LayoutGrid, Pencil } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Select, SelectTrigger, SelectContent, SelectItem } from '@/components/ui/select';
 import AppShell from '@/components/layout/AppShell';
@@ -46,6 +46,12 @@ function isRowUiTarget(e) {
     );
 }
 
+function focusFirstEditableInRow(tr) {
+    if (!tr) return;
+    const el = tr.querySelector('input:not([type="checkbox"]):not([type="hidden"]), textarea');
+    el?.focus?.();
+}
+
 export default function Deals() {
     const [deals, setDeals] = useState([]);
     const [total, setTotal] = useState(0);
@@ -187,7 +193,7 @@ export default function Deals() {
                         <table className="w-full text-sm min-w-[960px]">
                             <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 details" />
+                                    <th className="px-2 py-2 w-[4.25rem]" aria-label="Select and table edit" />
                                     <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>
@@ -236,10 +242,15 @@ export default function Deals() {
                                                         variant="ghost"
                                                         size="icon"
                                                         className="h-7 w-7 text-slate-500 hover:text-violet-700"
-                                                        onClick={() => openDeal(deal)}
-                                                        aria-label={`Open details for ${deal.name || 'deal'}`}
+                                                        onClick={(e) => {
+                                                            e.stopPropagation();
+                                                            focusFirstEditableInRow(
+                                                                e.currentTarget.closest('tr')
+                                                            );
+                                                        }}
+                                                        aria-label={`Edit fields in row for ${deal.name || 'deal'}`}
                                                     >
-                                                        <PanelRight className="h-3.5 w-3.5" aria-hidden />
+                                                        <Pencil className="h-3.5 w-3.5" aria-hidden />
                                                     </Button>
                                                 </div>
                                             </td>

frontend/src/pages/Leads.jsx

@@ -10,7 +10,7 @@ import {
     UserPlus,
     Trash2,
     Handshake,
-    PanelRight,
+    Pencil,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Select, SelectTrigger, SelectContent, SelectItem } from '@/components/ui/select';
@@ -46,6 +46,12 @@ function isRowUiTarget(e) {
     );
 }
 
+function focusFirstEditableInRow(tr) {
+    if (!tr) return;
+    const el = tr.querySelector('input:not([type="checkbox"]):not([type="hidden"]), textarea');
+    el?.focus?.();
+}
+
 export default function Leads() {
     const navigate = useNavigate();
     const [leads, setLeads] = useState([]);
@@ -416,7 +422,7 @@ export default function Leads() {
                                             aria-label="Select all on page"
                                         />
                                     </th>
-                                    <th className="w-9 px-0 py-2" aria-label="Details" />
+                                    <th className="w-9 px-0 py-2" aria-label="Table edit" />
                                     <th className="px-3 py-2 font-medium">Lead</th>
                                     <th className="px-3 py-2 font-medium">Status</th>
                                     <th className="px-3 py-2 font-medium">Company</th>
@@ -469,10 +475,13 @@ export default function Leads() {
                                                     variant="ghost"
                                                     size="icon"
                                                     className="h-8 w-8 text-slate-500 hover:text-violet-700"
-                                                    onClick={() => openDetail(lead)}
-                                                    aria-label={`Open details for ${displayName}`}
+                                                    onClick={(e) => {
+                                                        e.stopPropagation();
+                                                        focusFirstEditableInRow(e.currentTarget.closest('tr'));
+                                                    }}
+                                                    aria-label={`Edit fields in row for ${displayName}`}
                                                 >
-                                                    <PanelRight className="h-4 w-4" aria-hidden />
+                                                    <Pencil className="h-4 w-4" aria-hidden />
                                                 </Button>
                                             </td>
                                             <td className="px-3 py-2 align-top max-w-[200px]">