@postxl/generators 1.12.3 → 1.14.0

package/dist/frontend-admin/generators/import-review-page-review-stage.generator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"import-review-page-review-stage.generator.js","sourceRoot":"","sources":["../../../src/frontend-admin/generators/import-review-page-review-stage.generator.ts"],"names":[],"mappings":";;AAAA,0EAkgCC;AAlgCD,SAAgB,+BAA+B;IAC7C,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAggCR,CAAA;AACD,CAAC"}

package/dist/frontend-admin/generators/import-review-page-upload-stage.generator.d.ts

@@ -0,0 +1 @@
+export declare function generateImportReviewUploadStage(): string;

package/dist/frontend-admin/generators/import-review-page-upload-stage.generator.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateImportReviewUploadStage = generateImportReviewUploadStage;
+function generateImportReviewUploadStage() {
+    return `
+function UploadStage({
+  isLoading,
+  onUpload,
+}: Readonly<{
+  isLoading: boolean
+  onUpload: (file: File, options: { includeDetailedUnchangedRecords: boolean }) => Promise<void>
+}>) {
+  const [selectedFile, setSelectedFile] = useState<File | null>(null)
+  const [includeDetailedUnchangedRecords, setIncludeDetailedUnchangedRecords] = useState(false)
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Upload Excel File</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="import-review-file">Select an .xlsx or .xls file to preview before importing</Label>
+          <Input
+            id="import-review-file"
+            type="file"
+            accept=".xlsx,.xls"
+            disabled={isLoading}
+            onChange={(event) => setSelectedFile(event.target.files?.[0] ?? null)}
+          />
+          {selectedFile && <p className="text-sm text-muted-foreground">Selected file: {selectedFile.name}</p>}
+        </div>
+
+        <div className="flex items-center gap-2">
+          <Checkbox
+            id="detailed-unchanged"
+            checked={includeDetailedUnchangedRecords}
+            checkIcon="check"
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+              setIncludeDetailedUnchangedRecords(event.target.checked)
+            }
+          />
+          <Label htmlFor="detailed-unchanged">Include detailed unchanged records</Label>
+          <TooltipProvider delayDuration={150}>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  aria-label="Info about detailed unchanged records"
+                  className="inline-flex h-5 w-5 items-center justify-center rounded-full border text-xs text-muted-foreground"
+                >
+                  i
+                </button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>On large datasets, including unchanged row details may take longer.</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+
+        <div className="flex gap-3">
+          <Button
+            disabled={isLoading || !selectedFile}
+            onClick={() => selectedFile && void onUpload(selectedFile, { includeDetailedUnchangedRecords })}
+          >
+            {isLoading ? 'Building preview...' : 'Create Preview'}
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+`;
+}
+//# sourceMappingURL=import-review-page-upload-stage.generator.js.map

package/dist/frontend-admin/generators/import-review-page-upload-stage.generator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"import-review-page-upload-stage.generator.js","sourceRoot":"","sources":["../../../src/frontend-admin/generators/import-review-page-upload-stage.generator.ts"],"names":[],"mappings":";;AAAA,0EAwEC;AAxED,SAAgB,+BAA+B;IAC7C,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsER,CAAA;AACD,CAAC"}

package/dist/frontend-admin/generators/import-review-page.generator.d.ts

@@ -0,0 +1,7 @@
+import { ContextResult } from '../admin.generator';
+/**
+ * Generator function that generates the Import Review admin page.
+ */
+export declare function generateImportReviewPage({ context }: {
+    context: ContextResult;
+}): string;

package/dist/frontend-admin/generators/import-review-page.generator.js

@@ -0,0 +1,180 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateImportReviewPage = generateImportReviewPage;
+const import_review_page_result_stage_generator_1 = require("./import-review-page-result-stage.generator");
+const import_review_page_review_stage_generator_1 = require("./import-review-page-review-stage.generator");
+const import_review_page_upload_stage_generator_1 = require("./import-review-page-upload-stage.generator");
+/**
+ * Generator function that generates the Import Review admin page.
+ */
+function generateImportReviewPage({ context }) {
+    const models = [...context.models.values()].sort((a, b) => a.userFriendlyName.localeCompare(b.userFriendlyName));
+    const modelSchemaMapEntries = models
+        .map((model) => `  ${model._conjugated.camelCasePlural}: '${model.databaseSchema}',`)
+        .join('\n');
+    const modelLabelMapEntries = models
+        .map((model) => `  ${model._conjugated.camelCasePlural}: '${model.userFriendlyName.replaceAll("'", "\\'")}',`)
+        .join('\n');
+    const modelFieldOrderEntries = models
+        .map((model) => {
+        const fields = Array.from(model.fields.values())
+            .map((field) => `'${field.name}'`)
+            .join(', ');
+        return `  ${model._conjugated.camelCasePlural}: [${fields}],`;
+    })
+        .join('\n');
+    const schemaOrderEntries = [...new Set(models.map((model) => model.databaseSchema))]
+        .sort((a, b) => a.localeCompare(b))
+        .map((schema) => `'${schema}'`)
+        .join(', ');
+    return `
+import { AdminSidebar } from '@admin/admin-sidebar'
+
+import type { ColumnDef } from '@tanstack/react-table'
+import { useEffect, useMemo, useState } from 'react'
+import { AlertTriangleIcon, MinusIcon, PencilIcon, PlusIcon, Trash2Icon } from 'lucide-react'
+
+import type {
+  ImportExecutionSummary,
+  ImportPreviewItem,
+  ImportPreviewModelSummary,
+  ImportPreviewResponse,
+  SelectedDeltaIndicesByModel,
+} from '@hooks/use-import-review'
+import { useImportReview } from '@hooks/use-import-review'
+import {
+  Alert,
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDescription,
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Checkbox,
+  DataGrid,
+  Input,
+  Label,
+  SidebarInset,
+  SidebarProvider,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+  cn,
+  useDataGrid,
+} from '@postxl/ui-components'
+
+const MODEL_SCHEMA_MAP: Record<string, string> = {
+${modelSchemaMapEntries}
+}
+
+const MODEL_LABEL_MAP: Record<string, string> = {
+${modelLabelMapEntries}
+}
+
+const MODEL_FIELD_ORDER: Record<string, string[]> = {
+${modelFieldOrderEntries}
+}
+
+const SCHEMA_ORDER: string[] = [${schemaOrderEntries}]
+
+const TYPE_ORDER: ImportPreviewItem['type'][] = ['errors', 'delete', 'update', 'create', 'unchanged']
+
+const TYPE_BADGE_CLASSES: Record<ImportPreviewItem['type'], string> = {
+  create: 'text-green-700 border-green-300 dark:text-green-400 dark:border-green-700',
+  update: 'text-blue-700 border-blue-300 dark:text-blue-400 dark:border-blue-700',
+  delete: 'text-red-700 border-red-300 dark:text-red-400 dark:border-red-700',
+  unchanged: 'text-muted-foreground border-border',
+  errors: 'text-red-700 border-red-300 dark:text-red-400 dark:border-red-700',
+}
+
+const EXECUTABLE_TYPES = new Set<ImportPreviewItem['type']>(['create', 'update', 'delete'])
+
+export default function ImportReviewPage() {
+  const { stage, preview, executionResult, error, isLoading, uploadAndPreview, execute, reset } = useImportReview()
+
+  const showAdminSidebar = stage === 'upload' || stage === 'previewing' || stage === 'result'
+
+  return (
+    <SidebarProvider defaultOpen>
+      {showAdminSidebar && <AdminSidebar />}
+
+      <SidebarInset className="p-4">
+        <div className="mx-auto flex w-full max-w-[1400px] flex-col gap-4">
+          <PageHeader stage={stage} />
+
+          {error && (
+            <Alert variant="destructive">
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
+          )}
+
+          {(stage === 'upload' || stage === 'previewing') && (
+            <UploadStage isLoading={isLoading} onUpload={uploadAndPreview} />
+          )}
+
+          {stage === 'review' && preview && (
+            <ReviewStage preview={preview} isLoading={isLoading} onExecute={execute} onReset={reset} />
+          )}
+
+          {stage === 'executing' && (
+            <Card>
+              <CardContent className="py-8 text-center">
+                <p className="text-lg font-medium">Executing selected changes...</p>
+                <p className="mt-2 text-sm text-muted-foreground">Applying selected rows to the database.</p>
+              </CardContent>
+            </Card>
+          )}
+
+          {stage === 'result' && executionResult && <ResultStage result={executionResult} onReset={reset} />}
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
+
+function PageHeader({ stage }: Readonly<{ stage: 'upload' | 'previewing' | 'review' | 'executing' | 'result' }>) {
+  const currentStep = stage === 'upload' || stage === 'previewing' ? 1 : stage === 'review' || stage === 'executing' ? 2 : 3
+
+  return (
+    <div className="space-y-3">
+      <h1 className="text-3xl font-bold">Import Review</h1>
+      <p className="text-sm text-muted-foreground">
+        Upload an Excel file, review and select changes, then execute a controlled import.
+      </p>
+      <div className="grid grid-cols-3 gap-2">
+        <StepChip label="1. Upload" active={currentStep === 1} done={currentStep > 1} />
+        <StepChip label="2. Preview & Select" active={currentStep === 2} done={currentStep > 2} />
+        <StepChip label="3. Results" active={currentStep === 3} done={false} />
+      </div>
+    </div>
+  )
+}
+
+function StepChip({ label, active, done }: Readonly<{ label: string; active: boolean; done: boolean }>) {
+  const stateClass = done
+    ? 'border-green-300 bg-green-50 text-green-700 dark:border-green-800 dark:bg-green-950/40 dark:text-green-300'
+    : active
+      ? 'border-blue-300 bg-blue-50 text-blue-700 dark:border-blue-800 dark:bg-blue-950/40 dark:text-blue-300'
+      : 'border-border bg-background text-muted-foreground'
+
+  return <div className={cn('rounded border px-3 py-2 text-sm font-medium', stateClass)}>{label}</div>
+}
+
+${(0, import_review_page_upload_stage_generator_1.generateImportReviewUploadStage)()}
+
+${(0, import_review_page_review_stage_generator_1.generateImportReviewReviewStage)()}
+
+${(0, import_review_page_result_stage_generator_1.generateImportReviewResultStage)()}
+`;
+}
+//# sourceMappingURL=import-review-page.generator.js.map

package/dist/frontend-admin/generators/import-review-page.generator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"import-review-page.generator.js","sourceRoot":"","sources":["../../../src/frontend-admin/generators/import-review-page.generator.ts"],"names":[],"mappings":";;AASA,4DA8KC;AArLD,2GAA6F;AAC7F,2GAA6F;AAC7F,2GAA6F;AAE7F;;GAEG;AACH,SAAgB,wBAAwB,CAAC,EAAE,OAAO,EAA8B;IAC9E,MAAM,MAAM,GAAG,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAA;IAEhH,MAAM,qBAAqB,GAAG,MAAM;SACjC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,KAAK,CAAC,WAAW,CAAC,eAAe,MAAM,KAAK,CAAC,cAAc,IAAI,CAAC;SACpF,IAAI,CAAC,IAAI,CAAC,CAAA;IAEb,MAAM,oBAAoB,GAAG,MAAM;SAChC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,KAAK,CAAC,WAAW,CAAC,eAAe,MAAM,KAAK,CAAC,gBAAgB,CAAC,UAAU,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,CAAC;SAC7G,IAAI,CAAC,IAAI,CAAC,CAAA;IAEb,MAAM,sBAAsB,GAAG,MAAM;SAClC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;QACb,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;aAC7C,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,KAAK,CAAC,IAAI,GAAG,CAAC;aACjC,IAAI,CAAC,IAAI,CAAC,CAAA;QACb,OAAO,KAAK,KAAK,CAAC,WAAW,CAAC,eAAe,MAAM,MAAM,IAAI,CAAA;IAC/D,CAAC,CAAC;SACD,IAAI,CAAC,IAAI,CAAC,CAAA;IAEb,MAAM,kBAAkB,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC;SACjF,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;SAClC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,IAAI,MAAM,GAAG,CAAC;SAC9B,IAAI,CAAC,IAAI,CAAC,CAAA;IAEb,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+CP,qBAAqB;;;;EAIrB,oBAAoB;;;;EAIpB,sBAAsB;;;kCAGU,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqFlD,IAAA,2EAA+B,GAAE;;EAEjC,IAAA,2EAA+B,GAAE;;EAEjC,IAAA,2EAA+B,GAAE;CAClC,CAAA;AACD,CAAC"}

package/dist/frontend-admin/generators/model-admin-page.generator.js

@@ -52,6 +52,7 @@ function generateModelAdminPage({ model, context, }) {
             Generator.toFunctionName('useState'),
             Generator.toFunctionName('useCallback'),
             Generator.toFunctionName('useMemo'),
+            Generator.toFunctionName('useEffect'),
         ],
     })
         .addImport({
@@ -69,7 +70,34 @@ function generateModelAdminPage({ model, context, }) {
     })
         .addImport({
         from: Generator.toPackageName('@tanstack/react-router'),
-        items: [Generator.toFunctionName('useNavigate')],
+        items: [Generator.toFunctionName('useNavigate'), Generator.toFunctionName('useSearch')],
+    })
+        .addImport({
+        from: Generator.toBackendModuleLocation('@app-actions/command-palette-action'),
+        items: [
+            Generator.toFunctionName('command'),
+            Generator.toFunctionName('input'),
+            Generator.toFunctionName('waitForNextFrame'),
+        ],
+    })
+        .addImport({
+        from: Generator.toBackendModuleLocation('@app-actions/command-palette-store'),
+        items: [Generator.toFunctionName('useCommandPaletteActions')],
+    })
+        .addImport({
+        from: Generator.toBackendModuleLocation('@app-actions/ai-assistant-store'),
+        items: [Generator.toFunctionName('useAiAssistantActions'), Generator.toFunctionName('useAiAssistantState')],
+    })
+        .addImport({
+        from: Generator.toBackendModuleLocation('@lib/command-palette-filter.utils'),
+        items: [
+            Generator.toConstantName('stringFilterInputSchema'),
+            Generator.toConstantName('numberFilterInputSchema'),
+            Generator.toConstantName('dateFilterInputSchema'),
+            Generator.toConstantName('booleanFilterInputSchema'),
+            Generator.toFunctionName('parseBooleanQuery'),
+            Generator.toFunctionName('toFilterActionLabel'),
+        ],
     });
     const showComments = model.name !== 'Comment' && !!context.admin.components.commentSidebar;
     const relatedModels = [];
@@ -83,6 +111,7 @@ function generateModelAdminPage({ model, context, }) {
         });
     }
     let createModalHook = '';
+    let createModalIntentHook = '';
     let createModal = '';
     if (!model.isReadonly) {
         imports
@@ -96,6 +125,33 @@ function generateModelAdminPage({ model, context, }) {
         const variableName = hasLabelField ? `created${model.name}` : '_';
         const label = hasLabelField ? ` "\${${variableName}.${model.labelField.name}}"` : '';
         createModalHook = ` const [isCreateModalOpen, setIsCreateModalOpen] = useState(false)`;
+        createModalIntentHook = `
+  useEffect(() => {
+    if (typeof globalThis === 'undefined') {
+      return
+    }
+
+    const storageKey = 'pxl:create-intent-model'
+    const targetModel = '${model.name}'
+    const openFromIntent = (intentModel: unknown) => {
+      if (intentModel === targetModel) {
+        setIsCreateModalOpen(true)
+        globalThis.sessionStorage.removeItem(storageKey)
+      }
+    }
+
+    openFromIntent(globalThis.sessionStorage.getItem(storageKey))
+
+    const onIntent = (event: Event) => {
+      const detail = (event as CustomEvent<{ model?: string }>).detail
+      openFromIntent(detail?.model)
+    }
+
+    globalThis.addEventListener('pxl:create-intent', onIntent)
+    return () => {
+      globalThis.removeEventListener('pxl:create-intent', onIntent)
+    }
+  }, [])`;
         createModal = `
     <${model.forms.createModal.name}
         open={isCreateModalOpen}
@@ -110,44 +166,34 @@ function generateModelAdminPage({ model, context, }) {
       />`;
     }
     return `
-import { SidebarInset, SidebarProvider, SidebarTrigger, useDebouncedCallback } from '@postxl/ui-components'
+import { SidebarInset, SidebarProvider, useDebouncedCallback } from '@postxl/ui-components'
 import useLocalStorageState from 'use-local-storage-state'
-import useSessionStorageState from 'use-session-storage-state'
 import { useAuth } from '@context-providers/auth-context-provider'
 ${imports.generate()}
 
-type CellSelection = {
-  rowIndex: number
-  columnId: string
-}
-
-const STORAGE_KEY = 'audit-log-collapse-state'
 const SIDEBAR_WIDTH_KEY = 'audit-log-sidebar-width'
 
-type ${model.admin.page.pageComponent.name}Props = {
-  selectedKey?: string
-}
-
-export default function ${model.admin.page.pageComponent.name}({ selectedKey }: ${model.admin.page.pageComponent.name}Props) {
+export default function ${model.admin.page.pageComponent.name}() {
   const navigate = useNavigate()
   const { viewerData } = useAuth()
   const currentUserId = viewerData?.user?.id
   const isAdmin = viewerData?.userRoles?.includes('admin') ?? false
-  ${createModalHook}
-
-  // audit log sidebar collapse state
-  const [collapseState, setCollapseState] = useSessionStorageState<boolean>(STORAGE_KEY, {
-    defaultValue: false,
+  
+  const { selectedKey, focusedCell } = useSearch({
+    from: '/_auth-routes${model.admin.page.route}',
+    select: (search) => ({ selectedKey: search.selectedKey, focusedCell: search.focusedCell }),
   })
+  
+  ${createModalHook}
+  ${createModalIntentHook}
+  const sidepanelOpen = useAiAssistantState((state) => state.open)
+  const { setOpen: setSidepanelOpen } = useAiAssistantActions()
 
   // audit log sidebar width
   const [sidebarWidth, setSidebarWidth] = useLocalStorageState(SIDEBAR_WIDTH_KEY, {
     defaultValue: 350,
   })
   
-  // Track the currently focused cell for audit log filtering
-  const [focusedCell, setFocusedCell] = useState<CellSelection | null>(null)
-
   // Track selected row IDs from checkbox selection
   const [selectedRowIds, setSelectedRowIds] = useState<string[]>([])
 
@@ -158,6 +204,7 @@ export default function ${model.admin.page.pageComponent.name}({ selectedKey }:
 
   // Global search input state (debounced filter update happens via handleSearchInputChange)
   const [searchInput, setSearchInput] = useState('')
+  const { registerComponentActions, deregisterComponentActions } = useCommandPaletteActions()
 
    const {
     ${model.itemsHook.filteredList.name}: filteredDataList,
@@ -171,21 +218,15 @@ export default function ${model.admin.page.pageComponent.name}({ selectedKey }:
   ${relatedModels.map((rm) => rm.mapDefinition).join('\n  ')}
 
 
-  // Get the selected entity ID based on focused cell
-  const selectedEntityId = useMemo(() => {
-    if (!filteredDataList || !focusedCell || focusedCell.rowIndex < 0 || focusedCell.rowIndex >= filteredDataList.length) {
-      return null
-    }
-    const row = filteredDataList[focusedCell.rowIndex]
-    return row?.id ?? null
-  }, [focusedCell, filteredDataList])
+  // The selected entity ID comes from the URL selectedKey (which is the entity's id)
+  const selectedEntityId = selectedKey ?? null
 
-  // Get the selected field name based on focused cell
+  // Get the selected field name based on focused cell (columnId from search params)
   const selectedField = useMemo(() => {
-    if (!focusedCell || focusedCell.columnId === 'select' || focusedCell.columnId === 'actions') {
+    if (!focusedCell || focusedCell === 'select' || focusedCell === 'actions') {
       return null
     }
-    return focusedCell.columnId
+    return focusedCell
   }, [focusedCell])
 
   ${showComments
@@ -200,35 +241,25 @@ export default function ${model.admin.page.pageComponent.name}({ selectedKey }:
   )
   `
         : ''}
-  // Callback when cell focus changes in the table
-  const handleCellChange = useCallback((args: { rowIndex: number; columnId: string }) => {
-    setFocusedCell({ rowIndex: args.rowIndex, columnId: args.columnId })
-    // Clear checkbox selection when focusing a cell
-    setSelectedRowIds([])
-  }, [])
-
   // Callback when row selection changes (checkbox)
   const handleRowSelectionChange = useCallback((rowIds: string[]) => {
     setSelectedRowIds(rowIds)
     // Clear cell selection when using checkbox selection
     if (rowIds.length > 0) {
-      setFocusedCell(null)
+      void navigate({ to: '${model.admin.page.route}', search: { selectedKey: undefined, focusedCell: undefined } })
     }
-  }, [])
+  }, [navigate])
 
   // Clear field filter (go up to entity level)
   const handleClearField = useCallback(() => {
-    if (focusedCell) {
-      // Keep the entity selected but clear the field
-      setFocusedCell({ rowIndex: focusedCell.rowIndex, columnId: '' })
-    }
-  }, [focusedCell])
+    void navigate({ to: '${model.admin.page.route}', search: { selectedKey, focusedCell: undefined } })
+  }, [navigate, selectedKey])
 
   // Clear entity filter (go back to model overview)
   const handleClearEntity = useCallback(() => {
-    setFocusedCell(null)
+    void navigate({ to: '${model.admin.page.route}', search: { selectedKey: undefined, focusedCell: undefined } })
     setSelectedRowIds([])
-  }, [])
+  }, [navigate])
 
   const handleFilterChange = useCallback((key: ${model.types.filter.fieldType.name} | 'globalSearch', val: any) => {
     setFilters((prev) => {
@@ -249,14 +280,124 @@ export default function ${model.admin.page.pageComponent.name}({ selectedKey }:
     debouncedFilterChange('globalSearch', value)
   }, [debouncedFilterChange])
 
-  // Handle row click - navigate to URL with keyField value
-  const handleRowClick = useCallback((key: string | null) => {
-    if (key) {
-      void navigate({ to: '${model.admin.page.route}/$key', params: { key } })
-    } else {
-      void navigate({ to: '${model.admin.page.route}' })
+  // Callback when cell focus changes in the table — also sets selectedKey from the focused row
+  const handleCellChange = useCallback((args: { rowIndex: number; columnId: string }) => {
+    const row = filteredDataList?.[args.rowIndex]
+    const key = row?.${model.keyField.name} != null ? String(row.${model.keyField.name}) : undefined
+    void navigate({ to: '${model.admin.page.route}', search: { selectedKey: key, focusedCell: args.columnId || undefined } })
+    // Clear checkbox selection when focusing a cell
+    setSelectedRowIds([])
+  }, [navigate, filteredDataList])
+    
+  useEffect(() => {
+    const prefix = 'admin-${model._conjugated.kebabCase}-filter'
+
+    const filterActions = Object.entries(${model.types.filter.config.name}).map(([field, fieldConfig]) =>
+      input({
+        key: prefix + '-' + field,
+        visibility: 'visible',
+        group: 'Filter records by...',
+        label: toFilterActionLabel(field),
+        inputSchema:
+          fieldConfig.valueType === 'number'
+            ? numberFilterInputSchema
+            : fieldConfig.valueType === 'date'
+              ? dateFilterInputSchema
+              : fieldConfig.valueType === 'boolean'
+                ? booleanFilterInputSchema
+                : stringFilterInputSchema,
+        run: async (query, inputValue) => {
+          if (fieldConfig.valueType === 'number') {
+            const parsed = numberFilterInputSchema.safeParse(inputValue)
+            if (parsed.success && Object.values(parsed.data).some((value) => value !== undefined)) {
+              handleFilterChange(fieldConfig.filterKey as ${model.types.filter.fieldType.name}, parsed.data)
+            } else {
+              const numericValue = Number(query.trim())
+              if (!Number.isNaN(numericValue)) {
+                handleFilterChange(fieldConfig.filterKey as ${model.types.filter.fieldType.name}, { values: [numericValue] })
+              }
+            }
+          } else if (fieldConfig.valueType === 'date') {
+            const parsed = dateFilterInputSchema.safeParse(inputValue)
+            if (parsed.success && Object.values(parsed.data).some((value) => value !== undefined)) {
+              handleFilterChange(fieldConfig.filterKey as ${model.types.filter.fieldType.name}, parsed.data)
+            } else if (query.trim()) {
+              handleFilterChange(fieldConfig.filterKey as ${model.types.filter.fieldType.name}, { values: [query.trim()] })
+            }
+          } else if (fieldConfig.valueType === 'boolean') {
+            const parsed = booleanFilterInputSchema.safeParse(inputValue)
+            if (parsed.success && parsed.data.values && parsed.data.values.length > 0) {
+              handleFilterChange(fieldConfig.filterKey as ${model.types.filter.fieldType.name}, parsed.data.values)
+            } else {
+              const parsedFromQuery = parseBooleanQuery(query)
+              if (parsedFromQuery) {
+                handleFilterChange(fieldConfig.filterKey as ${model.types.filter.fieldType.name}, parsedFromQuery)
+              }
+            }
+          } else {
+            const parsed = stringFilterInputSchema.safeParse(inputValue)
+            if (parsed.success && Object.values(parsed.data).some((value) => value !== undefined && value !== '')) {
+              handleFilterChange(fieldConfig.filterKey as ${model.types.filter.fieldType.name}, parsed.data)
+            } else if (query.trim()) {
+              handleFilterChange(fieldConfig.filterKey as ${model.types.filter.fieldType.name}, { contains: query.trim() })
+            }
+          }
+
+          await waitForNextFrame()
+          return { kind: 'close' }
+        },
+      }),
+    )
+
+    const actions = [
+      command({
+        key: 'admin-${model._conjugated.kebabCase}-clear-all-filters',
+        visibility: 'visible',
+        group: 'Filter records by...',
+        label: 'Clear all filters',
+        run: async () => {
+          setFilters({})
+          setSearchInput('')
+          await waitForNextFrame()
+          return { kind: 'close' }
+        },
+      }),
+      command({
+        key: 'admin-${model._conjugated.kebabCase}-query-filters',
+        visibility: 'llm',
+        group: 'Filter records by...',
+        label: 'Query active filters',
+        run: () => Promise.resolve({ kind: 'output', output: { filters, searchInput } }),
+      }),
+      input({
+        key: 'admin-${model._conjugated.kebabCase}-search',
+        visibility: 'visible',
+        group: 'Filter records by...',
+        label: 'Global search',
+        run: async (query) => {
+          handleSearchInputChange(query)
+          await waitForNextFrame()
+          return { kind: 'close' }
+        },
+      }),
+      ...filterActions,
+    ]
+
+    registerComponentActions(actions)
+
+    return () => {
+      deregisterComponentActions(actions)
     }
-  }, [navigate])
+  }, [
+    deregisterComponentActions,
+    filters,
+    handleFilterChange,
+    handleSearchInputChange,
+    registerComponentActions,
+    searchInput,
+    setFilters,
+    setSearchInput,
+  ])
 
   ${model.isReadonly
         ? ''
@@ -276,7 +417,7 @@ export default function ${model.admin.page.pageComponent.name}({ selectedKey }:
 
   return (
     ${model.isReadonly ? '' : '<>'}
-      <SidebarProvider open={collapseState} onOpenChange={setCollapseState} width={sidebarWidth} onWidthChange={setSidebarWidth}>
+      <SidebarProvider open={sidepanelOpen} onOpenChange={setSidepanelOpen} width={sidebarWidth} onWidthChange={setSidebarWidth}>
         <AdminSidebar collapsible="none" className="w-64" />
 
         <SidebarInset className="p-4 overflow-hidden gap-4">
@@ -307,7 +448,6 @@ export default function ${model.admin.page.pageComponent.name}({ selectedKey }:
             onCellChange={handleCellChange}
             onRowSelectionChange={handleRowSelectionChange}
             selectedKey={selectedKey}
-            onRowClick={handleRowClick}
             keyField="${model.keyField.name}"
             hasNextPage={hasNextPage}
             fetchNextPage={fetchNextPage}
@@ -321,8 +461,6 @@ export default function ${model.admin.page.pageComponent.name}({ selectedKey }:
           />
         </SidebarInset>
 
-        <SidebarTrigger />
-
         <AdminDetailSidebar
           side="right"
           collapsible="offcanvas"