@object-ui/fields 6.2.3 → 7.1.0

package/src/widgets/LookupField.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useCallback, useRef, useContext, useMemo } from 'react';
-import { Button, 
+import { cn,
+  Button,
   Input,
   Badge,
   Popover,
@@ -8,8 +9,10 @@ import { Button,
 import { Search, X, Loader2, AlertCircle, Plus, TableProperties } from 'lucide-react';
 import { FieldWidgetProps } from './types';
 import type { DataSource, QueryParams, LookupColumnDef } from '@object-ui/types';
-import { RecordPickerDialog } from './RecordPickerDialog';
+import { RecordPickerDialog, lookupFiltersToRecord } from './RecordPickerDialog';
 import type { RecordPickerFilterColumn } from './RecordPickerDialog';
+import { deriveLookupColumns } from './deriveLookupColumns';
+import { getRecentLookupIds, pushRecentLookupId } from './recentLookups';
 import { getCellRendererResolver } from './_cell-renderer-bridge';
 import { SchemaRendererContext as ImportedSchemaRendererContext } from '@object-ui/react';
 import { useFieldTranslation } from './useFieldTranslation';
@@ -127,6 +130,7 @@ export function LookupField({ value, onChange, field, readonly, ...props }: Fiel
   const [isOpen, setIsOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
   const { t } = useFieldTranslation();
+  const listboxId = React.useId();
 
   // Dynamic data loading state
   const [fetchedOptions, setFetchedOptions] = useState<LookupOption[]>([]);
@@ -158,16 +162,19 @@ export function LookupField({ value, onChange, field, readonly, ...props }: Fiel
 
   const staticOptions: LookupOption[] = fieldMeta?.options || [];
   const multiple = fieldMeta?.multiple || false;
-  const displayField = fieldMeta?.display_field || fieldMeta?.reference_field || 'name';
-  const descriptionField: string | undefined = fieldMeta?.description_field;
+  const displayField = fieldMeta?.display_field || fieldMeta?.displayField || fieldMeta?.reference_field || 'name';
+  const descriptionField: string | undefined = fieldMeta?.description_field ?? fieldMeta?.descriptionField;
   const idField = fieldMeta?.id_field || 'id';
   // ObjectStack convention uses `reference`; types define `reference_to` — support both
   const referenceTo: string | undefined = fieldMeta?.reference_to || fieldMeta?.reference;
+  // Opt-in inline quick-create: when set, an empty/zero-result picker offers to
+  // create a record from the typed text via dataSource.create.
+  const allowCreate: boolean = !!(fieldMeta?.allow_create ?? fieldMeta?.allowCreate);
 
   // Enterprise Record Picker configuration
-  const lookupColumns: Array<string | LookupColumnDef> | undefined = fieldMeta?.lookup_columns;
-  const lookupPageSize: number | undefined = fieldMeta?.lookup_page_size;
-  const lookupFilters: import('@object-ui/types').LookupFilterDef[] | undefined = fieldMeta?.lookup_filters;
+  const lookupColumns: Array<string | LookupColumnDef> | undefined = fieldMeta?.lookup_columns ?? fieldMeta?.lookupColumns;
+  const lookupPageSize: number | undefined = fieldMeta?.lookup_page_size ?? fieldMeta?.lookupPageSize;
+  const lookupFilters: import('@object-ui/types').LookupFilterDef[] | undefined = fieldMeta?.lookup_filters ?? fieldMeta?.lookupFilters;
 
   /**
    * Dependent lookups — restrict candidates based on values of *other* fields
@@ -194,24 +201,6 @@ export function LookupField({ value, onChange, field, readonly, ...props }: Fiel
 
   // Resolve dependent field values from explicit prop or SchemaRendererContext.data
   const dependentValuesProp = (props as any).dependentValues as Record<string, any> | undefined;
-  // Derive filter columns from lookup_columns that have type info
-  const filterColumns = useMemo<RecordPickerFilterColumn[] | undefined>(() => {
-    if (!lookupColumns) return undefined;
-    const cols: RecordPickerFilterColumn[] = [];
-    for (const c of lookupColumns) {
-      if (typeof c === 'object' && c.type) {
-        const filterType = mapFieldTypeToFilterType(c.type);
-        if (filterType) {
-          cols.push({
-            field: c.field,
-            label: c.label,
-            type: filterType,
-          });
-        }
-      }
-    }
-    return cols.length > 0 ? cols : undefined;
-  }, [lookupColumns]);
 
   // Resolve DataSource: explicit prop > field-level > wrapper field > SchemaRendererContext > none
   const ctx = useContext(SchemaRendererContext);
@@ -262,6 +251,42 @@ export function LookupField({ value, onChange, field, readonly, ...props }: Fiel
     return null;
   }, [refObjectSchema]);
 
+  /**
+   * Picker columns. Honour explicit `lookup_columns` when authored; otherwise
+   * derive a multi-column, disambiguating set from the referenced object's
+   * schema so every lookup gets a useful picker with zero field-level config.
+   */
+  const pickerColumns = useMemo<Array<string | LookupColumnDef> | undefined>(() => {
+    if (lookupColumns && lookupColumns.length > 0) return lookupColumns;
+    const derived = deriveLookupColumns(refObjectSchema, { displayField });
+    return derived.length > 0 ? derived : undefined;
+  }, [lookupColumns, refObjectSchema, displayField]);
+
+  /**
+   * Secondary line under each quick-select option. Honour explicit
+   * `description_field`; otherwise reuse the first derived non-display column so
+   * the inline popover also benefits from the richer schema.
+   */
+  const effectiveDescriptionField = useMemo<string | undefined>(() => {
+    if (descriptionField) return descriptionField;
+    const extra = pickerColumns?.find((c) => (typeof c === 'string' ? c : c.field) !== displayField);
+    if (!extra) return undefined;
+    return typeof extra === 'string' ? extra : extra.field;
+  }, [descriptionField, pickerColumns, displayField]);
+
+  // Derive filter-bar columns from any typed picker columns.
+  const filterColumns = useMemo<RecordPickerFilterColumn[] | undefined>(() => {
+    if (!pickerColumns) return undefined;
+    const cols: RecordPickerFilterColumn[] = [];
+    for (const c of pickerColumns) {
+      if (typeof c === 'object' && c.type) {
+        const filterType = mapFieldTypeToFilterType(c.type);
+        if (filterType) cols.push({ field: c.field, label: c.label, type: filterType });
+      }
+    }
+    return cols.length > 0 ? cols : undefined;
+  }, [pickerColumns]);
+
   // Optional create-new callback
   const onCreateNew: ((searchQuery: string) => void) | undefined =
     (props as any).onCreateNew ?? lookupField?.onCreateNew;
@@ -325,9 +350,15 @@ export function LookupField({ value, onChange, field, readonly, ...props }: Fiel
           }
         }
 
+        // Apply base scoping filters so the quick-select popover matches the
+        // full picker dialog (lookupFilters were previously dialog-only).
+        if (lookupFilters && lookupFilters.length > 0) {
+          params.$filter = { ...(params.$filter ?? {}), ...lookupFiltersToRecord(lookupFilters) };
+        }
+
         const result = await dataSource.find(referenceTo, params);
         const records: any[] = result?.data ?? result ?? [];
-        const mapped = records.map(r => recordToOption(r, displayField, idField, descriptionField, refTitleFormat));
+        const mapped = records.map(r => recordToOption(r, displayField, idField, effectiveDescriptionField, refTitleFormat));
 
         setFetchedOptions(mapped);
         setTotalCount(result?.total ?? records.length);
@@ -339,7 +370,7 @@ export function LookupField({ value, onChange, field, readonly, ...props }: Fiel
         setLoading(false);
       }
     },
-    [dataSource, referenceTo, displayField, idField, descriptionField, refTitleFormat, dependenciesMissing, dependsOn, resolvedDependentValues],
+    [dataSource, referenceTo, displayField, idField, effectiveDescriptionField, refTitleFormat, dependenciesMissing, dependsOn, resolvedDependentValues, lookupFilters],
   );
 
   // Re-fetch when dependent values change while the picker is open. This keeps
@@ -424,14 +455,14 @@ export function LookupField({ value, onChange, field, readonly, ...props }: Fiel
         for (const id of unresolved) {
           if (typeof (dataSource as any).findOne === 'function') {
             const rec = await (dataSource as any).findOne(referenceTo, id);
-            if (rec) fetched.push(recordToOption(rec, displayField, idField, descriptionField, refTitleFormat));
+            if (rec) fetched.push(recordToOption(rec, displayField, idField, effectiveDescriptionField, refTitleFormat));
           } else {
             const res = await dataSource.find(referenceTo, {
               $filter: { [idField]: id },
               $top: 1,
             } as QueryParams);
             const rows = res?.data ?? res ?? [];
-            if (rows[0]) fetched.push(recordToOption(rows[0], displayField, idField, descriptionField, refTitleFormat));
+            if (rows[0]) fetched.push(recordToOption(rows[0], displayField, idField, effectiveDescriptionField, refTitleFormat));
           }
         }
         if (!cancelled && fetched.length) {
@@ -449,7 +480,7 @@ export function LookupField({ value, onChange, field, readonly, ...props }: Fiel
       cancelled = true;
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [value, hasDataSource, referenceTo, displayField, idField, descriptionField, multiple]);
+  }, [value, hasDataSource, referenceTo, displayField, idField, effectiveDescriptionField, multiple]);
 
   // Get selected option(s) — check static, fetched, and picker-resolved options
   const findOption = useCallback(
@@ -467,23 +498,32 @@ export function LookupField({ value, onChange, field, readonly, ...props }: Fiel
     ? (Array.isArray(value) ? value : []).map(findOption).filter(Boolean)
     : value ? [findOption(value)].filter(Boolean) : [];
 
+  // Optional: receive the FULL selected record (not just its id) so a host can
+  // auto-fill sibling fields from it — e.g. a line-item grid copying a product's
+  // unit_price/description when the item is chosen. When provided (single
+  // select), it drives the update and the host owns the resulting value change.
+  const onSelectRecord = (props as any).onSelectRecord as ((record: LookupOption) => void) | undefined;
+
   const handleSelect = useCallback(
     (option: LookupOption) => {
       if (multiple) {
         const currentValues = Array.isArray(value) ? value : [];
         const isSelected = currentValues.includes(option.value);
-        
+
         if (isSelected) {
           onChange(currentValues.filter((v: any) => v !== option.value));
         } else {
+          if (referenceTo) pushRecentLookupId(referenceTo, option.value);
           onChange([...currentValues, option.value]);
         }
       } else {
-        onChange(option.value);
+        if (referenceTo) pushRecentLookupId(referenceTo, option.value);
+        if (onSelectRecord) onSelectRecord(option);
+        else onChange(option.value);
         setIsOpen(false);
       }
     },
-    [multiple, value, onChange],
+    [multiple, value, onChange, onSelectRecord, referenceTo],
   );
 
   const handleRemove = (optionValue: any) => {
@@ -499,10 +539,89 @@ export function LookupField({ value, onChange, field, readonly, ...props }: Fiel
   // findOption can resolve display labels after the dialog closes.
   const handlePickerSelectRecords = useCallback(
     (records: any[]) => {
-      const mapped = records.map(r => recordToOption(r, displayField, idField, descriptionField, refTitleFormat));
+      const mapped = records.map(r => recordToOption(r, displayField, idField, effectiveDescriptionField, refTitleFormat));
+      if (referenceTo) mapped.forEach((o) => pushRecentLookupId(referenceTo, o.value));
       setPickerResolvedRecords(mapped);
     },
-    [displayField, idField, descriptionField, refTitleFormat],
+    [displayField, idField, effectiveDescriptionField, refTitleFormat, referenceTo],
+  );
+
+  // ── Recently-used, quick-create, combined option list ────────────────────
+  const [recentOptions, setRecentOptions] = useState<LookupOption[]>([]);
+  useEffect(() => {
+    if (!isOpen || !hasDataSource || !dataSource || !referenceTo || searchQuery) return;
+    const ids = getRecentLookupIds(referenceTo);
+    if (!ids.length) { setRecentOptions([]); return; }
+    let cancelled = false;
+    (async () => {
+      try {
+        const recs: LookupOption[] = [];
+        for (const id of ids) {
+          const cached = findOption(id);
+          if (cached) { recs.push(cached); continue; }
+          if (typeof (dataSource as any).findOne === 'function') {
+            const r = await (dataSource as any).findOne(referenceTo, id);
+            if (r) recs.push(recordToOption(r, displayField, idField, effectiveDescriptionField, refTitleFormat));
+          }
+        }
+        if (!cancelled) setRecentOptions(recs);
+      } catch { if (!cancelled) setRecentOptions([]); }
+    })();
+    return () => { cancelled = true; };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen, hasDataSource, referenceTo, searchQuery]);
+
+  // Recently-used first (only before the user types), then live results — one
+  // de-duped list that drives BOTH rendering and arrow-key navigation.
+  const recentCount = (!searchQuery && hasDataSource) ? recentOptions.length : 0;
+  const visibleOptions = useMemo(() => {
+    if (searchQuery || !hasDataSource || recentOptions.length === 0) return filteredOptions;
+    const recentIds = new Set(recentOptions.map((o) => o.value));
+    return [...recentOptions, ...filteredOptions.filter((o) => !recentIds.has(o.value))];
+  }, [searchQuery, hasDataSource, recentOptions, filteredOptions]);
+  useEffect(() => { setActiveIndex(-1); }, [visibleOptions.length]);
+
+  const [creating, setCreating] = useState(false);
+  const canCreate = !!onCreateNew || (allowCreate && hasDataSource);
+  const handleCreateNew = useCallback(
+    async (q: string) => {
+      const label = (q || '').trim();
+      if (onCreateNew) { onCreateNew(label); setIsOpen(false); return; }
+      if (!allowCreate || !dataSource || !referenceTo || !label) return;
+      setCreating(true);
+      setError(null);
+      try {
+        const created = await (dataSource as any).create(referenceTo, { [displayField]: label });
+        const opt = recordToOption(created, displayField, idField, effectiveDescriptionField, refTitleFormat);
+        setPickerResolvedRecords((prev) => [opt, ...prev.filter((o) => o.value !== opt.value)]);
+        handleSelect(opt);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : String(err));
+      } finally {
+        setCreating(false);
+      }
+    },
+    [onCreateNew, allowCreate, dataSource, referenceTo, displayField, idField, effectiveDescriptionField, refTitleFormat, handleSelect],
+  );
+
+  // Compact one-line preview of an option's extra (non-display) columns —
+  // shown as a native tooltip so users can disambiguate without opening it.
+  const previewOf = useCallback(
+    (option: LookupOption): string | undefined => {
+      if (!pickerColumns || pickerColumns.length === 0) return undefined;
+      const parts: string[] = [];
+      for (const c of pickerColumns) {
+        const f = typeof c === 'string' ? c : c.field;
+        if (f === displayField) continue;
+        const v = (option as any)[f];
+        if (v === null || v === undefined || v === '') continue;
+        const lbl = typeof c === 'string' ? f : (c.label || f);
+        const text = typeof v === 'object' ? (v.name ?? v.label ?? JSON.stringify(v)) : v;
+        parts.push(`${lbl}: ${text}`);
+      }
+      return parts.length ? parts.join(' · ') : undefined;
+    },
+    [pickerColumns, displayField],
   );
 
   // Keyboard handler for the search input — arrow keys + Enter
@@ -511,19 +630,19 @@ export function LookupField({ value, onChange, field, readonly, ...props }: Fiel
       if (e.key === 'ArrowDown') {
         e.preventDefault();
         setActiveIndex(prev =>
-          prev < filteredOptions.length - 1 ? prev + 1 : prev,
+          prev < visibleOptions.length - 1 ? prev + 1 : prev,
         );
       } else if (e.key === 'ArrowUp') {
         e.preventDefault();
         setActiveIndex(prev => (prev > 0 ? prev - 1 : 0));
       } else if (e.key === 'Enter') {
         e.preventDefault();
-        if (activeIndex >= 0 && activeIndex < filteredOptions.length) {
-          handleSelect(filteredOptions[activeIndex]);
+        if (activeIndex >= 0 && activeIndex < visibleOptions.length) {
+          handleSelect(visibleOptions[activeIndex]);
         }
       }
     },
-    [filteredOptions, activeIndex, handleSelect],
+    [visibleOptions, activeIndex, handleSelect],
   );
 
   // Scroll active item into view
@@ -558,14 +677,20 @@ export function LookupField({ value, onChange, field, readonly, ...props }: Fiel
     );
   }
 
+  // Compact mode (e.g. inside a line-item grid cell): show the selected value
+  // INSIDE a borderless trigger on a single line — no chip stacked above a
+  // separate "Select…" button (which double-stacks and wastes the row height).
+  const compact = !!(props as any).compact;
+  const singleSelectedLabel = selectedOptions[0]?.label || selectedOptions[0]?.[displayField];
+
   return (
-    <div className="space-y-2">
-      {/* Selected values display */}
-      {selectedOptions.length > 0 && (
+    <div className={compact ? '' : 'space-y-2'}>
+      {/* Selected values display (full mode only — compact shows it in-trigger) */}
+      {selectedOptions.length > 0 && !compact && (
         <div className="flex flex-wrap gap-1">
           {selectedOptions.map((opt, idx) => (
-            <Badge 
-              key={idx} 
+            <Badge
+              key={idx}
               variant="outline"
               className="gap-1"
             >
@@ -574,7 +699,7 @@ export function LookupField({ value, onChange, field, readonly, ...props }: Fiel
                 onClick={() => handleRemove(opt?.value)}
                 className="ml-1 hover:text-destructive"
                 type="button"
-                aria-label={`Remove ${opt?.label || opt?.[displayField]}`}
+                aria-label={t('lookup.remove', { label: opt?.label || opt?.[displayField] })}
               >
                 <X className="size-3" />
               </button>
@@ -587,23 +712,33 @@ export function LookupField({ value, onChange, field, readonly, ...props }: Fiel
       <div className="flex items-center gap-1.5">
       <Popover open={isOpen} onOpenChange={(o) => !dependenciesMissing && setIsOpen(o)}>
         <PopoverTrigger asChild>
-          <Button 
-            variant="outline" 
-            className="min-w-0 flex-1 justify-start text-left font-normal"
+          <Button
+            variant="outline"
+            className={cn(
+              'min-w-0 flex-1 justify-start text-left font-normal',
+              compact && 'h-8 rounded-none border-0 bg-transparent px-2 shadow-none focus-visible:ring-1 focus-visible:ring-ring/60',
+            )}
             type="button"
+            aria-haspopup="listbox"
+            aria-expanded={isOpen}
+            aria-controls={listboxId}
             disabled={dependenciesMissing || (props as any).disabled}
-            data-testid={dependenciesMissing ? 'lookup-trigger-gated' : undefined}
+            data-testid={dependenciesMissing ? 'lookup-trigger-gated' : (((props as any).name || lookupField?.name) ? `lookup-trigger-${(props as any).name || lookupField.name}` : 'lookup-trigger')}
             title={dependenciesMissing
-              ? `Select ${dependsOn.map(d => d.field).join(', ')} first`
+              ? t('lookup.selectFirst', { fields: dependsOn.map(d => d.field).join(', ') })
               : undefined}
           >
-            <Search className="mr-2 size-4" />
+            <Search className={cn('size-4 shrink-0 text-muted-foreground', compact ? 'mr-1.5' : 'mr-2')} />
+            <span className={cn('truncate', compact && selectedOptions.length === 0 && 'text-muted-foreground')}>
             {dependenciesMissing
-              ? `Select ${dependsOn.map(d => d.field).join(', ')} first`
-              : selectedOptions.length === 0 
-                ? lookupField?.placeholder || t('common.select')
-                : multiple ? t('table.selected', { count: selectedOptions.length }) : t('common.select')
+              ? t('lookup.selectFirst', { fields: dependsOn.map(d => d.field).join(', ') })
+              : compact && !multiple && selectedOptions.length > 0
+                ? singleSelectedLabel
+                : selectedOptions.length === 0
+                  ? lookupField?.placeholder || t('common.select')
+                  : multiple ? t('table.selected', { count: selectedOptions.length }) : t('common.select')
             }
+            </span>
           </Button>
         </PopoverTrigger>
         <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0" align="start">
@@ -617,6 +752,11 @@ export function LookupField({ value, onChange, field, readonly, ...props }: Fiel
                 onChange={(e) => handleSearchChange(e.target.value)}
                 onKeyDown={handleSearchKeyDown}
                 className="w-full pl-9 h-8 text-sm"
+                role="combobox"
+                aria-autocomplete="list"
+                aria-controls={listboxId}
+                aria-expanded={isOpen}
+                aria-activedescendant={activeIndex >= 0 ? `${listboxId}-opt-${activeIndex}` : undefined}
               />
               {loading && (
                 <Loader2
@@ -638,7 +778,7 @@ export function LookupField({ value, onChange, field, readonly, ...props }: Fiel
                 onClick={() => fetchLookupData(searchQuery || undefined)}
                 type="button"
               >
-                Retry
+                {t('lookup.retry')}
               </Button>
             </div>
           )}
@@ -647,77 +787,90 @@ export function LookupField({ value, onChange, field, readonly, ...props }: Fiel
           {loading && filteredOptions.length === 0 && !error && (
             <div className="flex flex-col items-center gap-2 py-6" role="status" aria-live="polite">
               <Loader2 className="size-6 animate-spin text-muted-foreground" />
-              <p className="text-sm text-muted-foreground">Loading…</p>
+              <p className="text-sm text-muted-foreground">{t('lookup.loading')}</p>
             </div>
           )}
 
           {/* Options list */}
           {!error && !(loading && filteredOptions.length === 0) && (
-            <div ref={listRef} className="max-h-64 overflow-y-auto px-1 pb-1" role="listbox">
-              {filteredOptions.length === 0 ? (
+            <div ref={listRef} className="max-h-64 overflow-y-auto px-1 pb-1" role="listbox" id={listboxId}>
+              {visibleOptions.length === 0 ? (
                 <div className="py-4 text-center">
                   <p className="text-sm text-muted-foreground">
-                    No options found
+                    {t('lookup.noOptions')}
                   </p>
                   {/* Quick-create entry */}
-                  {onCreateNew && (
+                  {canCreate && (
                     <Button
                       variant="ghost"
                       size="sm"
                       className="mt-2 gap-1"
                       type="button"
-                      onClick={() => {
-                        onCreateNew(searchQuery);
-                        setIsOpen(false);
-                      }}
+                      disabled={creating}
+                      onClick={() => handleCreateNew(searchQuery)}
                     >
-                      <Plus className="size-4" />
-                      Create new
+                      {creating ? <Loader2 className="size-4 animate-spin" /> : <Plus className="size-4" />}
+                      {searchQuery ? t('lookup.createNamed', { name: searchQuery }) : t('lookup.createNew')}
                     </Button>
                   )}
                 </div>
               ) : (
                 <>
-                  {filteredOptions.map((option, idx) => {
+                  {visibleOptions.map((option, idx) => {
                     const isSelected = multiple
                       ? (Array.isArray(value) ? value : []).includes(option.value)
                       : value === option.value;
                     const isActive = idx === activeIndex;
+                    const showRecentHeader = recentCount > 0 && idx === 0;
+                    const showResultsHeader = recentCount > 0 && idx === recentCount;
 
                     return (
-                      <button
-                        key={option.value}
-                        data-lookup-index={idx}
-                        role="option"
-                        aria-selected={isSelected}
-                        onClick={() => handleSelect(option)}
-                        className={`w-full text-left px-3 py-2 rounded-md text-sm hover:bg-accent flex items-center justify-between ${
-                          isActive
-                            ? 'bg-accent text-accent-foreground'
-                            : isSelected
-                              ? 'bg-accent/50 text-accent-foreground'
-                              : ''
-                        }`}
-                        type="button"
-                      >
-                        <div className="min-w-0 flex-1">
-                          <span className="block truncate">{option.label}</span>
-                          {option.description && (
-                            <span className="block truncate text-xs text-muted-foreground">
-                              {option.description}
-                            </span>
-                          )}
-                        </div>
-                        {isSelected && (
-                          <Badge variant="default" className="ml-2 shrink-0">Selected</Badge>
+                      <React.Fragment key={option.value}>
+                        {showRecentHeader && (
+                          <div className="px-3 pt-2 pb-1 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+                            {t('lookup.recentlyUsed')}
+                          </div>
                         )}
-                      </button>
+                        {showResultsHeader && (
+                          <div className="mt-1 border-t px-3 pt-2 pb-1 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+                            {t('lookup.allResults')}
+                          </div>
+                        )}
+                        <button
+                          id={`${listboxId}-opt-${idx}`}
+                          data-lookup-index={idx}
+                          role="option"
+                          aria-selected={isSelected}
+                          title={previewOf(option)}
+                          onClick={() => handleSelect(option)}
+                          className={`w-full text-left px-3 py-2 rounded-md text-sm hover:bg-accent flex items-center justify-between ${
+                            isActive
+                              ? 'bg-accent text-accent-foreground'
+                              : isSelected
+                                ? 'bg-accent/50 text-accent-foreground'
+                                : ''
+                          }`}
+                          type="button"
+                        >
+                          <div className="min-w-0 flex-1">
+                            <span className="block truncate">{option.label}</span>
+                            {option.description && (
+                              <span className="block truncate text-xs text-muted-foreground">
+                                {option.description}
+                              </span>
+                            )}
+                          </div>
+                          {isSelected && (
+                            <Badge variant="default" className="ml-2 shrink-0">{t('lookup.selectedBadge')}</Badge>
+                          )}
+                        </button>
+                      </React.Fragment>
                     );
                   })}
                   {/* Show total count when fetched from DataSource */}
                   {hasDataSource && totalCount > filteredOptions.length && (
                     <p className="text-xs text-muted-foreground text-center py-2">
-                      Showing {filteredOptions.length} of {totalCount} results.
+                      {t('lookup.showingResults', { shown: filteredOptions.length, total: totalCount })}
                     </p>
                   )}
                   {/* "Show All Results" button — opens the full Record Picker (Level 2) */}
@@ -732,21 +885,19 @@ export function LookupField({ value, onChange, field, readonly, ...props }: Fiel
                       data-testid="show-all-results"
                     >
                       <TableProperties className="size-3.5" />
-                      Show All Results ({totalCount})
+                      {t('lookup.showAllResults', { count: totalCount })}
                     </button>
                   )}
                   {/* Quick-create entry (below results) */}
-                  {onCreateNew && (
+                  {canCreate && (
                     <button
                       type="button"
                       className="w-full text-left px-3 py-2 rounded-md text-sm hover:bg-accent flex items-center gap-1.5 text-muted-foreground"
-                      onClick={() => {
-                        onCreateNew(searchQuery);
-                        setIsOpen(false);
-                      }}
+                      disabled={creating}
+                      onClick={() => handleCreateNew(searchQuery)}
                     >
-                      <Plus className="size-3.5" />
-                      Create new{searchQuery ? ` "${searchQuery}"` : ''}
+                      {creating ? <Loader2 className="size-3.5 animate-spin" /> : <Plus className="size-3.5" />}
+                      {searchQuery ? t('lookup.createNamed', { name: searchQuery }) : t('lookup.createNew')}
                     </button>
                   )}
                 </>
@@ -764,8 +915,8 @@ export function LookupField({ value, onChange, field, readonly, ...props }: Fiel
           className="shrink-0"
           type="button"
           onClick={() => setIsPickerOpen(true)}
-          aria-label="Browse all records"
-          title="Browse all records"
+          aria-label={t('lookup.browseAll')}
+          title={t('lookup.browseAll')}
           data-testid="browse-all-records"
         >
           <TableProperties className="size-4" />
@@ -778,11 +929,11 @@ export function LookupField({ value, onChange, field, readonly, ...props }: Fiel
         <RecordPickerDialog
           open={isPickerOpen}
           onOpenChange={setIsPickerOpen}
-          title={lookupField?.label || 'Select'}
+          title={lookupField?.label || t('common.select')}
           multiple={multiple}
           dataSource={dataSource}
           objectName={referenceTo}
-          columns={lookupColumns}
+          columns={pickerColumns}
           displayField={displayField}
           titleFormat={refTitleFormat}
           idField={idField}

package/src/widgets/MarkdownContent.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import rehypeSanitize from 'rehype-sanitize';
+
+/**
+ * Heavy markdown renderer, split into its own module so it can be lazy-loaded
+ * by the cell/detail renderers (react-markdown pulls in ~100-200 KB). GitHub
+ * Flavored Markdown + sanitization (defense against XSS in stored content).
+ */
+export default function MarkdownContent({ value }: { value: string }) {
+  return (
+    <div className="prose prose-sm max-w-none dark:prose-invert break-words">
+      <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeSanitize]}>
+        {value}
+      </ReactMarkdown>
+    </div>
+  );
+}