feat(fe): KsDataGrid - auto-enter edit mode on cell focus

Added onCellFocused handler to automatically enter edit mode when a cell receives focus.

- Listen to @cell-focused event
- Check if column is editable
- Call startEditingCell() on focus
- Result: Tab key, arrow keys, or any navigation auto-enters edit mode

Affects: All pages using KsDataGrid with editable cells

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

frontend/src/shared/ui/components/KsDataGrid.vue

@@ -20,7 +20,8 @@ import {
   type ColDef,
   type RowClickedEvent,
   type CellValueChangedEvent,
-  type RowClassParams
+  type RowClassParams,
+  type CellFocusedEvent
 } from 'ag-grid-community'
 import type { UiGridColumn } from '../adapter/contracts'
 
@@ -112,6 +113,20 @@ function onCellValueChanged(event: CellValueChangedEvent): void {
   }
 }
 
+function onCellFocused(event: CellFocusedEvent): void {
+  if (event.column && event.rowIndex !== undefined) {
+    const colDef = event.column.getColDef()
+    if (colDef.editable) {
+      setTimeout(() => {
+        event.api.startEditingCell({
+          rowIndex: event.rowIndex,
+          colKey: event.column!.getColId()
+        })
+      }, 50)
+    }
+  }
+}
+
 function onSortChanged(params: { api: { redrawRows: () => void; refreshCells: (options: { force: boolean }) => void } }): void {
   params.api.redrawRows()
 }
@@ -232,6 +247,7 @@ defineExpose({ focusRow, gridApi })
       @sort-changed="onSortChanged"
       @row-clicked="onRowClicked"
       @cell-value-changed="onCellValueChanged"
+      @cell-focused="onCellFocused"
     />
   </div>
 </template>