@solidxai/core-ui 0.1.12-beta.3 → 0.1.12-beta.6

package/dist/routes/pages/admin/core/DatasourceIntrospectionPage.tsx

@@ -1,4 +1,6 @@
 import {
+  ArrowLeft,
+  Check,
   Cog,
   Database,
   ExternalLink,
@@ -11,10 +13,12 @@ import {
 import { camelCase, startCase } from "lodash";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useDispatch } from "react-redux";
-import { useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import { showToast } from "../../../../redux/features/toastSlice";
 import { SolidJsonEditor } from "../../../../components/core/json/SolidJsonEditor";
 import { Column, SolidDataTable } from "../../../../components/core/list/SolidDataTable";
+import FieldMetaDataForm from "../../../../components/core/model/FieldMetaDataForm";
+import { waitForBackendAvailability } from "../../../../helpers/waitForBackendAvailability";
 import {
   SolidButton,
   SolidCheckbox,
@@ -38,11 +42,16 @@ import {
   type DatasourceIntrospectionMappingPreview,
   type DatasourceIntrospectionMappingRequest,
   type DatasourceIntrospectionTableRecord,
+  type DatasourceIntrospectionApplyResponse,
+  type DatasourceIntrospectionCreateMigrationResponse,
   useApplyDatasourceIntrospectionMappingMutation,
+  useCreateDatasourceIntrospectionMigrationArtifactsMutation,
+  useGenerateDatasourceIntrospectionCodeMutation,
   useGetDatasourceIntrospectionBootstrapQuery,
   useGetDatasourceIntrospectionTableDetailQuery,
   useGetDatasourceIntrospectionTablesQuery,
   usePreviewDatasourceIntrospectionMappingMutation,
+  useRunDatasourceIntrospectionMigrationMutation,
 } from "../../../../redux/api/datasourceIntrospectionApi";
 import { useGetmodelByIdQuery } from "../../../../redux/api/modelApi";
 import "./DatasourceIntrospectionPage.css";
@@ -52,9 +61,17 @@ type SessionSettings = {
   prioritizeUnmappedTables: boolean;
 };
 
+type WorkspaceStep =
+  | "configure"
+  | "review-json"
+  | "generate-code"
+  | "create-migrations"
+  | "run-migration";
+
 type DrawerColumnDraft = {
   columnName: string;
   fieldName: string;
+  displayName: string;
   dataType: string;
   solidFieldType: string;
   ormType: string;
@@ -65,12 +82,14 @@ type DrawerColumnDraft = {
   numericScale: number | null;
   ordinalPosition: number | null;
   isAutoGenerated: boolean;
+  isDetectedPrimaryKey: boolean;
   handledBySuperclass: boolean;
   superclassFieldName: string | null;
   fieldId: number | null;
   include: boolean;
   matched: boolean;
   isPrimaryKey: boolean;
+  fieldConfig: Record<string, any> | null;
 };
 
 type DrawerDraft = {
@@ -121,6 +140,49 @@ const scalarFieldTypeOptions = [
 ];
 
 const scalarFieldTypeValueSet = new Set(scalarFieldTypeOptions.map((option) => option.value));
+const mappingStrategyOptions = [
+  { value: "generated_id", label: "Legacy generated id" },
+  { value: "existing_id", label: "Legacy existing id" },
+];
+
+function getBaseClassNameForLegacyType(value: "none" | "existing_id" | "generated_id") {
+  return value === "existing_id"
+    ? "LegacyCommonEntityWithExistingId"
+    : "LegacyCommonEntityWithGeneratedId";
+}
+
+function getSuperclassFieldNameForLegacyType(columnName: string, legacyTableType: "none" | "existing_id" | "generated_id") {
+  const normalized = columnName.toLowerCase();
+  const legacyFieldMap: Record<string, string> = {
+    ss_created_at: "createdAt",
+    ss_updated_at: "updatedAt",
+    ss_deleted_at: "deletedAt",
+    ss_deleted_tracker: "deletedTracker",
+    ss_published_at: "publishedAt",
+    ss_locale_name: "localeName",
+    ss_default_entity_locale_id: "defaultEntityLocaleId",
+    ss_created_by_id: "createdBy",
+    ss_updated_by_id: "updatedBy",
+  };
+
+  if (normalized === "ss_id" && legacyTableType === "generated_id") {
+    return "id";
+  }
+
+  return legacyFieldMap[normalized] ?? null;
+}
+
+function getSuggestedFieldNameForLegacyType(column: Pick<DrawerColumnDraft, "columnName" | "isAutoGenerated">, legacyTableType: "none" | "existing_id" | "generated_id") {
+  if (legacyTableType === "existing_id" && column.isAutoGenerated) {
+    return "id";
+  }
+
+  if (legacyTableType === "generated_id" && column.columnName.toLowerCase() === "id") {
+    return "legacyId";
+  }
+
+  return camelCase(column.columnName.replace(/^ss_/i, ""));
+}
 
 function getDefaultOrmTypeForSolidFieldType(dataSourceType: string, solidFieldType: string) {
   const normalizedDatasourceType = dataSourceType.toLowerCase();
@@ -179,12 +241,6 @@ function getDefaultOrmTypeForSolidFieldType(dataSourceType: string, solidFieldTy
   return ormTypesByDatasource[normalizedDatasourceType]?.[solidFieldType] ?? "varchar";
 }
 
-function legacyTypeLabel(value: string) {
-  if (value === "generated_id") return "Legacy generated id";
-  if (value === "existing_id") return "Legacy existing id";
-  return "Legacy generated id";
-}
-
 function statusLabel(record: DatasourceIntrospectionTableRecord) {
   return record.mapped ? "Mapped" : "Ready to map";
 }
@@ -198,6 +254,30 @@ function readQueryError(error: any) {
   );
 }
 
+function isRecoverableGenerateCodeError(error: any) {
+  const status = error?.status ?? error?.originalStatus;
+  const message = [
+    error?.error,
+    error?.message,
+    error?.data?.message,
+    error?.data?.error,
+  ]
+    .filter(Boolean)
+    .join(" ")
+    .toLowerCase();
+
+  if (status === "FETCH_ERROR" || status === "TIMEOUT_ERROR" || status === "PARSING_ERROR") {
+    return true;
+  }
+
+  return (
+    message.includes("failed to fetch")
+    || message.includes("network")
+    || message.includes("load failed")
+    || message.includes("fetch")
+  );
+}
+
 function normalizeName(value: string) {
   return value.trim().toLowerCase();
 }
@@ -249,6 +329,7 @@ function buildDrawerDraft(
     return {
       columnName: column.columnName,
       fieldName: matchingField?.name ?? column.fieldName,
+      displayName: matchingField?.displayName ?? column.displayName,
       dataType: column.dataType,
       solidFieldType: matchingField?.type ?? column.solidFieldType,
       ormType: matchingField?.ormType ?? column.ormType,
@@ -259,12 +340,14 @@ function buildDrawerDraft(
       numericScale: column.numericScale,
       ordinalPosition: column.ordinalPosition,
       isAutoGenerated: column.isAutoGenerated,
+      isDetectedPrimaryKey: column.isPrimaryKey,
       handledBySuperclass: column.handledBySuperclass,
       superclassFieldName: column.superclassFieldName,
       fieldId: matchingField?.id ?? null,
       include: column.handledBySuperclass ? false : Boolean(matchingField) || !selectedTable.mapped,
       matched: Boolean(matchingField),
-      isPrimaryKey: Boolean(matchingField?.isPrimaryKey) || (column.isAutoGenerated && column.fieldName === "id"),
+      isPrimaryKey: Boolean(matchingField?.isPrimaryKey) || column.isPrimaryKey || (column.isAutoGenerated && column.fieldName === "id"),
+      fieldConfig: matchingField ? sanitizeExistingFieldPayload(matchingField) : null,
     };
   });
 
@@ -319,6 +402,11 @@ function getDrawerValidationErrors(draft: DrawerDraft) {
       continue;
     }
 
+    if (!column.displayName.trim()) {
+      errors.push(`Field label is required for column "${column.columnName}".`);
+      continue;
+    }
+
     if (!scalarFieldTypeValueSet.has(column.solidFieldType)) {
       errors.push(`SolidX type "${column.solidFieldType}" is not allowed in step 1 for column "${column.columnName}".`);
       continue;
@@ -377,6 +465,7 @@ function buildMappingRequest(
     columns: draft.columns.map((column) => ({
       columnName: column.columnName,
       fieldName: column.fieldName,
+      displayName: column.displayName,
       dataType: column.dataType,
       solidFieldType: column.solidFieldType,
       ormType: column.ormType,
@@ -393,6 +482,7 @@ function buildMappingRequest(
       include: column.include,
       matched: column.matched,
       isPrimaryKey: column.isPrimaryKey,
+      fieldConfig: column.fieldConfig,
     })),
   };
 }
@@ -541,6 +631,7 @@ function parseAndValidateReviewedModelJson(
 
 export function DatasourceIntrospectionPage() {
   const params = useParams();
+  const navigate = useNavigate();
   const dispatch = useDispatch();
   const moduleId = Number(params.moduleId ?? 0);
   const isValidModuleId = Number.isFinite(moduleId) && moduleId > 0;
@@ -556,21 +647,31 @@ export function DatasourceIntrospectionPage() {
   });
 
   const [selectedDatasource, setSelectedDatasource] = useState("");
-  const [selectedTableKey, setSelectedTableKey] = useState("");
+  const [selectedRows, setSelectedRows] = useState<DatasourceIntrospectionTableRecord[]>([]);
+  const [workspaceTableKey, setWorkspaceTableKey] = useState("");
   const [tableSearch, setTableSearch] = useState("");
   const [settingsOpen, setSettingsOpen] = useState(false);
   const [settingsTab, setSettingsTab] = useState("datasource-info");
-  const [drawerOpen, setDrawerOpen] = useState(false);
   const [drawerDraft, setDrawerDraft] = useState<DrawerDraft | null>(null);
   const [drawerTab, setDrawerTab] = useState("general-info");
-  const [drawerStep, setDrawerStep] = useState<"edit" | "review">("edit");
-  const [reviewTab, setReviewTab] = useState("metadata-json");
+  const [workspaceStep, setWorkspaceStep] = useState<WorkspaceStep>("configure");
   const [mappingPreview, setMappingPreview] = useState<DatasourceIntrospectionMappingPreview | null>(null);
+  const [persistedMappingResult, setPersistedMappingResult] = useState<DatasourceIntrospectionApplyResponse | null>(null);
+  const [migrationArtifactsResult, setMigrationArtifactsResult] = useState<DatasourceIntrospectionCreateMigrationResponse | null>(null);
+  const [generateCodeOutput, setGenerateCodeOutput] = useState("");
+  const [isGeneratingCodeWorkflow, setIsGeneratingCodeWorkflow] = useState(false);
+  const [generateCodeStatusMessage, setGenerateCodeStatusMessage] = useState("");
+  const [generateCodeTimeoutMessage, setGenerateCodeTimeoutMessage] = useState<string | null>(null);
+  const [generateCodeReady, setGenerateCodeReady] = useState(false);
+  const [hasAttemptedGenerateCode, setHasAttemptedGenerateCode] = useState(false);
+  const [runMigrationOutput, setRunMigrationOutput] = useState("");
+  const [runMigrationCompleted, setRunMigrationCompleted] = useState(false);
   const [reviewedMetadataJsonValue, setReviewedMetadataJsonValue] = useState<any>(null);
   const [metadataJsonText, setMetadataJsonText] = useState("");
   const [metadataJsonValidationError, setMetadataJsonValidationError] = useState<string | null>(null);
   const [metadataJsonResetToken, setMetadataJsonResetToken] = useState("initial");
   const [drawerBootstrapping, setDrawerBootstrapping] = useState(false);
+  const [fieldConfigColumnName, setFieldConfigColumnName] = useState<string | null>(null);
   const [sessionSettings, setSessionSettings] = useState<SessionSettings>({
     relationInferenceEnabled: false,
     prioritizeUnmappedTables: true,
@@ -578,15 +679,6 @@ export function DatasourceIntrospectionPage() {
   const [draftSessionSettings, setDraftSessionSettings] = useState<SessionSettings>(sessionSettings);
   const drawerBootstrapTimerRef = useRef<number | null>(null);
 
-  const scrollDrawerBodyToTop = () => {
-    if (typeof document === "undefined") return;
-
-    window.requestAnimationFrame(() => {
-      const drawerBody = document.querySelector<HTMLDivElement>(".sdix-drawer-body");
-      drawerBody?.scrollTo({ top: 0, left: 0 });
-    });
-  };
-
   const [
     previewMapping,
     { isLoading: isPreviewMappingLoading },
@@ -596,8 +688,32 @@ export function DatasourceIntrospectionPage() {
     applyMapping,
     { isLoading: isApplyMappingLoading },
   ] = useApplyDatasourceIntrospectionMappingMutation();
+  const [
+    createMigrationArtifacts,
+    { isLoading: isCreateMigrationArtifactsLoading },
+  ] = useCreateDatasourceIntrospectionMigrationArtifactsMutation();
+  const [
+    generateCode,
+    { isLoading: isGenerateCodeLoading },
+  ] = useGenerateDatasourceIntrospectionCodeMutation();
+  const [
+    runMigration,
+    { isLoading: isRunMigrationLoading },
+  ] = useRunDatasourceIntrospectionMigrationMutation();
 
   const isSavingMapping = isApplyMappingLoading;
+  const isCreatingMigrationArtifacts = isCreateMigrationArtifactsLoading;
+
+  const showFieldDraftToaster = (message: any, severity: any) => {
+    const errorMessages = Object.values(message ?? {});
+    if (!errorMessages.length) return;
+    dispatch(showToast({
+      severity,
+      summary: "Datasource introspection",
+      detail: errorMessages.map(String).join(", "),
+      life: 3000,
+    }));
+  };
 
   useEffect(() => {
     if (!bootstrap) return;
@@ -608,13 +724,23 @@ export function DatasourceIntrospectionPage() {
   }, [bootstrap, selectedDatasource]);
 
   useEffect(() => {
-    setSelectedTableKey("");
+    setSelectedRows([]);
+    setWorkspaceTableKey("");
     setDrawerDraft(null);
-    setDrawerOpen(false);
+    setFieldConfigColumnName(null);
     setTableSearch("");
-    setDrawerStep("edit");
-    setReviewTab("metadata-json");
+    setWorkspaceStep("configure");
     setMappingPreview(null);
+    setPersistedMappingResult(null);
+    setMigrationArtifactsResult(null);
+    setGenerateCodeOutput("");
+    setIsGeneratingCodeWorkflow(false);
+    setGenerateCodeStatusMessage("");
+    setGenerateCodeTimeoutMessage(null);
+    setGenerateCodeReady(false);
+    setHasAttemptedGenerateCode(false);
+    setRunMigrationOutput("");
+    setRunMigrationCompleted(false);
     setReviewedMetadataJsonValue(null);
     setMetadataJsonText("");
     setMetadataJsonValidationError(null);
@@ -627,11 +753,6 @@ export function DatasourceIntrospectionPage() {
     }
   }, []);
 
-  useEffect(() => {
-    if (!drawerOpen) return;
-    scrollDrawerBodyToTop();
-  }, [drawerOpen, drawerStep, drawerTab, reviewTab, selectedTableKey]);
-
   const datasourceOptions = useMemo(
     () => (bootstrap?.datasources ?? []).map((datasource) => ({
       label: `${datasource.displayName} (${providerLabel(datasource.type)})`,
@@ -653,9 +774,13 @@ export function DatasourceIntrospectionPage() {
     },
   );
 
+  const selectedListRow = selectedRows[0] ?? null;
+  const selectedListRowKey = selectedListRow ? `${selectedListRow.schema ?? ""}::${selectedListRow.tableName}` : "";
+  const isWorkspaceMode = Boolean(workspaceTableKey);
+
   const selectedTable = useMemo(
-    () => tablesResponse?.records?.find((record) => `${record.schema ?? ""}::${record.tableName}` === selectedTableKey) ?? null,
-    [tablesResponse, selectedTableKey],
+    () => tablesResponse?.records?.find((record) => `${record.schema ?? ""}::${record.tableName}` === workspaceTableKey) ?? null,
+    [tablesResponse, workspaceTableKey],
   );
 
   const {
@@ -672,7 +797,7 @@ export function DatasourceIntrospectionPage() {
       schema: selectedTable?.schema ?? undefined,
     },
     {
-      skip: !drawerOpen || !isValidModuleId || !selectedDatasource || !selectedTable || !!tablesResponse?.synchronizeBlocked,
+      skip: !isWorkspaceMode || !isValidModuleId || !selectedDatasource || !selectedTable || !!tablesResponse?.synchronizeBlocked,
     },
   );
 
@@ -682,11 +807,63 @@ export function DatasourceIntrospectionPage() {
     isFetching: isMappedModelFetching,
     error: mappedModelError,
   } = useGetmodelByIdQuery(selectedTable?.mappedModelId ?? 0, {
-    skip: !drawerOpen || !selectedTable?.mapped || !selectedTable?.mappedModelId,
+    skip: !isWorkspaceMode || !selectedTable?.mapped || !selectedTable?.mappedModelId,
   });
 
   const mappedModelData = mappedModelResponse?.data;
   const selectedDatasourceRecord = bootstrap?.datasources?.find((datasource) => datasource.name === selectedDatasource) ?? null;
+  const activeFieldConfigColumn = drawerDraft?.columns.find((column) => column.columnName === fieldConfigColumnName) ?? null;
+  const activeFieldConfigMetaData = useMemo(() => {
+    if (!drawerDraft || !activeFieldConfigColumn) {
+      return null;
+    }
+
+    const configured = activeFieldConfigColumn.fieldConfig ?? {};
+    const suggestedMax =
+      activeFieldConfigColumn.characterMaximumLength && ["shortText", "longText"].includes(activeFieldConfigColumn.solidFieldType)
+        ? activeFieldConfigColumn.characterMaximumLength
+        : configured.max;
+
+    return {
+      ...configured,
+      ...(activeFieldConfigColumn.fieldId ? { id: activeFieldConfigColumn.fieldId } : {}),
+      name: activeFieldConfigColumn.fieldName,
+      displayName: activeFieldConfigColumn.displayName,
+      description: configured.description ?? activeFieldConfigColumn.displayName,
+      type: activeFieldConfigColumn.solidFieldType,
+      ormType: activeFieldConfigColumn.ormType,
+      columnName: activeFieldConfigColumn.columnName,
+      defaultValue: configured.defaultValue ?? activeFieldConfigColumn.defaultValue ?? undefined,
+      required: configured.required ?? (!activeFieldConfigColumn.nullable || activeFieldConfigColumn.isPrimaryKey),
+      unique: configured.unique ?? false,
+      encrypt: configured.encrypt ?? false,
+      index: configured.index ?? false,
+      max: suggestedMax ?? undefined,
+      min: configured.min ?? undefined,
+      private: configured.private ?? false,
+      isSystem: false,
+      isPrimaryKey: activeFieldConfigColumn.isPrimaryKey,
+      isUserKey: drawerDraft.userKeyField === activeFieldConfigColumn.fieldName,
+      enableAuditTracking: configured.enableAuditTracking ?? drawerDraft.enableAuditTracking,
+      isMultiSelect: configured.isMultiSelect ?? false,
+      length: configured.length ?? activeFieldConfigColumn.characterMaximumLength ?? undefined,
+    };
+  }, [activeFieldConfigColumn, drawerDraft]);
+  const fieldDraftAllFields = useMemo(() => {
+    if (!drawerDraft || !activeFieldConfigColumn) {
+      return [];
+    }
+
+    return drawerDraft.columns
+      .filter((column) => column.columnName !== activeFieldConfigColumn.columnName)
+      .map((column) => ({
+        id: column.fieldId ?? undefined,
+        name: column.fieldName,
+        displayName: column.displayName,
+        type: column.solidFieldType,
+        columnName: column.columnName,
+      }));
+  }, [activeFieldConfigColumn, drawerDraft]);
   const drawerLoadingError = selectedTable?.mapped ? (tableDetailError || mappedModelError) : tableDetailError;
   const isDrawerBlockingLoading = Boolean(
     selectedTable
@@ -700,7 +877,45 @@ export function DatasourceIntrospectionPage() {
   );
 
   useEffect(() => {
-    if (!drawerOpen || !selectedTable || !tableDetail) return;
+    if (!isWorkspaceMode) {
+      setDrawerDraft(null);
+      setFieldConfigColumnName(null);
+      return;
+    }
+
+    if (drawerBootstrapTimerRef.current) {
+      window.clearTimeout(drawerBootstrapTimerRef.current);
+    }
+
+    setDrawerDraft(null);
+    setFieldConfigColumnName(null);
+    setDrawerTab("general-info");
+    setWorkspaceStep("configure");
+    setMappingPreview(null);
+    setPersistedMappingResult(null);
+    setMigrationArtifactsResult(null);
+    setGenerateCodeOutput("");
+    setIsGeneratingCodeWorkflow(false);
+    setGenerateCodeStatusMessage("");
+    setGenerateCodeTimeoutMessage(null);
+    setGenerateCodeReady(false);
+    setHasAttemptedGenerateCode(false);
+    setRunMigrationOutput("");
+    setRunMigrationCompleted(false);
+    setReviewedMetadataJsonValue(null);
+    setMetadataJsonText("");
+    setMetadataJsonValidationError(null);
+    setMetadataJsonResetToken(`table-${workspaceTableKey}-${Date.now()}`);
+    setDrawerBootstrapping(true);
+  }, [isWorkspaceMode, workspaceTableKey]);
+
+  useEffect(() => {
+    if (!isWorkspaceMode || !selectedTable) return;
+    setSelectedRows([selectedTable]);
+  }, [isWorkspaceMode, selectedTable]);
+
+  useEffect(() => {
+    if (!isWorkspaceMode || !selectedTable || !tableDetail) return;
     if (selectedTable.mapped && (!mappedModelData || mappedModelData.id !== selectedTable.mappedModelId)) return;
 
     if (drawerBootstrapTimerRef.current) {
@@ -715,7 +930,7 @@ export function DatasourceIntrospectionPage() {
     drawerBootstrapTimerRef.current = window.setTimeout(() => {
       setDrawerBootstrapping(false);
     }, 150);
-  }, [drawerOpen, selectedTable, tableDetail, mappedModelData, mappedModelResponse]);
+  }, [isWorkspaceMode, selectedTable, tableDetail, mappedModelData, mappedModelResponse]);
 
   const filteredRecords = useMemo(() => {
     const records = [...(tablesResponse?.records ?? [])];
@@ -723,7 +938,7 @@ export function DatasourceIntrospectionPage() {
 
     const filtered = searchNeedle
       ? records.filter((record) => {
-        const haystack = `${record.tableName} ${record.schema ?? ""} ${record.mappedModelSingularName ?? ""} ${record.mappedModelDisplayName ?? ""}`.toLowerCase();
+        const haystack = `${record.tableName} ${record.schema ?? ""} ${record.mappedModelSingularName ?? ""} ${record.mappedModelDisplayName ?? ""} ${record.mappedModuleName ?? ""} ${record.mappedModuleDisplayName ?? ""}`.toLowerCase();
         return haystack.includes(searchNeedle);
       })
       : records;
@@ -848,28 +1063,46 @@ export function DatasourceIntrospectionPage() {
     if (selectedDatasource) {
       await refetchTables();
     }
-    if (selectedTable) {
+    if (isWorkspaceMode && selectedTable) {
       await refetchTableDetail();
     }
   };
 
-  const openTableDrawer = (record: DatasourceIntrospectionTableRecord) => {
+  const startMappingForRecord = (record: DatasourceIntrospectionTableRecord) => {
     if (drawerBootstrapTimerRef.current) {
       window.clearTimeout(drawerBootstrapTimerRef.current);
     }
 
-    setSelectedTableKey(`${record.schema ?? ""}::${record.tableName}`);
+    setSelectedRows([record]);
+    setWorkspaceTableKey(`${record.schema ?? ""}::${record.tableName}`);
+  };
+
+  const leaveWorkspace = () => {
+    if (drawerBootstrapTimerRef.current) {
+      window.clearTimeout(drawerBootstrapTimerRef.current);
+    }
+
+    setWorkspaceTableKey("");
     setDrawerDraft(null);
+    setFieldConfigColumnName(null);
+    setWorkspaceStep("configure");
     setDrawerTab("general-info");
-    setDrawerStep("edit");
-    setReviewTab("metadata-json");
     setMappingPreview(null);
+    setPersistedMappingResult(null);
+    setMigrationArtifactsResult(null);
+    setGenerateCodeOutput("");
+    setIsGeneratingCodeWorkflow(false);
+    setGenerateCodeStatusMessage("");
+    setGenerateCodeTimeoutMessage(null);
+    setGenerateCodeReady(false);
+    setHasAttemptedGenerateCode(false);
+    setRunMigrationOutput("");
+    setRunMigrationCompleted(false);
     setReviewedMetadataJsonValue(null);
     setMetadataJsonText("");
     setMetadataJsonValidationError(null);
-    setMetadataJsonResetToken(`table-${record.schema ?? "default"}-${record.tableName}-${Date.now()}`);
-    setDrawerBootstrapping(true);
-    setDrawerOpen(true);
+    setMetadataJsonResetToken(`workspace-closed-${Date.now()}`);
+    setDrawerBootstrapping(false);
   };
 
   const applyDraftSettings = () => {
@@ -879,6 +1112,15 @@ export function DatasourceIntrospectionPage() {
 
   const updateDrawerDraft = (updater: (current: DrawerDraft) => DrawerDraft) => {
     setMappingPreview(null);
+    setPersistedMappingResult(null);
+    setMigrationArtifactsResult(null);
+    setGenerateCodeOutput("");
+    setIsGeneratingCodeWorkflow(false);
+    setGenerateCodeStatusMessage("");
+    setGenerateCodeTimeoutMessage(null);
+    setGenerateCodeReady(false);
+    setHasAttemptedGenerateCode(false);
+    setRunMigrationOutput("");
     setDrawerDraft((current) => (current ? updater(current) : current));
   };
 
@@ -891,7 +1133,28 @@ export function DatasourceIntrospectionPage() {
       ...current,
       columns: current.columns.map((column) => {
         if (column.columnName !== columnName) return column;
-        return { ...column, fieldName: camelCase(nextFieldName) };
+
+        const previousSuggestedLabel = startCase(column.fieldName);
+        const nextNormalizedFieldName = camelCase(nextFieldName);
+        const nextFieldConfig = column.fieldConfig
+          ? {
+            ...column.fieldConfig,
+            name: nextNormalizedFieldName,
+            displayName: !column.displayName.trim() || column.displayName === previousSuggestedLabel
+              ? startCase(nextNormalizedFieldName)
+              : column.displayName,
+            isUserKey: current.userKeyField === column.fieldName,
+            isPrimaryKey: column.isPrimaryKey,
+          }
+          : column.fieldConfig;
+        return {
+          ...column,
+          fieldName: nextNormalizedFieldName,
+          displayName: !column.displayName.trim() || column.displayName === previousSuggestedLabel
+            ? startCase(nextNormalizedFieldName)
+            : column.displayName,
+          fieldConfig: nextFieldConfig,
+        };
       }),
       userKeyField: current.userKeyField === current.columns.find((column) => column.columnName === columnName)?.fieldName
         ? camelCase(nextFieldName)
@@ -899,6 +1162,26 @@ export function DatasourceIntrospectionPage() {
     }));
   };
 
+  const updateColumnDisplayName = (columnName: string, nextDisplayName: string) => {
+    updateDrawerDraft((current) => ({
+      ...current,
+      columns: current.columns.map((column) => (
+        column.columnName === columnName
+          ? {
+            ...column,
+            displayName: nextDisplayName,
+            fieldConfig: column.fieldConfig
+              ? {
+                ...column.fieldConfig,
+                displayName: nextDisplayName,
+              }
+              : column.fieldConfig,
+          }
+          : column
+      )),
+    }));
+  };
+
   const updateColumnSolidFieldType = (columnName: string, nextSolidFieldType: string) => {
     updateDrawerDraft((current) => ({
       ...current,
@@ -910,11 +1193,142 @@ export function DatasourceIntrospectionPage() {
           ...column,
           solidFieldType: nextSolidFieldType,
           ormType: getDefaultOrmTypeForSolidFieldType(current.dataSourceType, nextSolidFieldType),
+          fieldConfig: column.fieldConfig
+            ? {
+              ...column.fieldConfig,
+              type: nextSolidFieldType,
+              ormType: getDefaultOrmTypeForSolidFieldType(current.dataSourceType, nextSolidFieldType),
+            }
+            : column.fieldConfig,
         };
       }),
     }));
   };
 
+  const openFieldConfigEditor = (columnName: string) => {
+    setFieldConfigColumnName(columnName);
+  };
+
+  const applyFieldConfigDraft = (columnName: string, nextFieldConfig: Record<string, any>) => {
+    const sanitized = sanitizeExistingFieldPayload(nextFieldConfig);
+    updateDrawerDraft((current) => {
+      const currentColumn = current.columns.find((column) => column.columnName === columnName);
+      if (!currentColumn) {
+        return current;
+      }
+
+      const nextFieldName = typeof sanitized.name === "string" && sanitized.name.trim()
+        ? sanitized.name.trim()
+        : currentColumn.fieldName;
+      const nextDisplayName = typeof sanitized.displayName === "string" && sanitized.displayName.trim()
+        ? sanitized.displayName.trim()
+        : currentColumn.displayName;
+      const nextSolidFieldType = typeof sanitized.type === "string" && sanitized.type.trim()
+        ? sanitized.type.trim()
+        : currentColumn.solidFieldType;
+      const nextOrmType = typeof sanitized.ormType === "string" && sanitized.ormType.trim()
+        ? sanitized.ormType.trim()
+        : getDefaultOrmTypeForSolidFieldType(current.dataSourceType, nextSolidFieldType);
+      const nextUserKeyField = current.userKeyField === currentColumn.fieldName
+        ? nextFieldName
+        : current.userKeyField;
+
+      return {
+        ...current,
+        userKeyField: nextUserKeyField,
+        columns: current.columns.map((column) => {
+          if (column.columnName !== columnName) {
+            return column.fieldConfig
+              ? {
+                ...column,
+                fieldConfig: {
+                  ...column.fieldConfig,
+                  isUserKey: column.fieldName === nextUserKeyField,
+                },
+              }
+              : column;
+          }
+
+          return {
+            ...column,
+            fieldName: nextFieldName,
+            displayName: nextDisplayName,
+            solidFieldType: nextSolidFieldType,
+            ormType: nextOrmType,
+            fieldConfig: {
+              ...sanitized,
+              name: nextFieldName,
+              displayName: nextDisplayName,
+              type: nextSolidFieldType,
+              ormType: nextOrmType,
+              columnName: column.columnName,
+              isPrimaryKey: column.isPrimaryKey,
+              isUserKey: nextUserKeyField === nextFieldName,
+            },
+          };
+        }),
+      };
+    });
+    setFieldConfigColumnName(null);
+  };
+
+  const updateLegacyTableType = (legacyTableType: "none" | "existing_id" | "generated_id") => {
+    updateDrawerDraft((current) => {
+      const renamedUserKeyColumns = new Map<string, string>();
+
+      const columns = current.columns.map((column) => {
+        const nextSuperclassFieldName = getSuperclassFieldNameForLegacyType(column.columnName, legacyTableType);
+        const nextHandledBySuperclass = Boolean(nextSuperclassFieldName);
+        const nextSuggestedFieldName = getSuggestedFieldNameForLegacyType(column, legacyTableType);
+        const shouldRebuildFieldName = column.handledBySuperclass !== nextHandledBySuperclass
+          || (legacyTableType === "existing_id" && column.isAutoGenerated && (column.fieldName === "id" || column.fieldName === "legacyId"))
+          || (legacyTableType === "generated_id" && column.columnName.toLowerCase() === "id");
+        const nextFieldName = shouldRebuildFieldName ? nextSuggestedFieldName : column.fieldName;
+        const nextDisplayName = !column.displayName.trim() || column.displayName === startCase(column.fieldName)
+          ? startCase(nextFieldName)
+          : column.displayName;
+        const nextInclude = nextHandledBySuperclass
+          ? false
+          : (legacyTableType === "existing_id" && column.isAutoGenerated ? true : column.include);
+        const nextIsPrimaryKey = (
+          legacyTableType === "existing_id" && column.isAutoGenerated && nextFieldName === "id"
+        ) || (
+          legacyTableType === "generated_id" && column.isDetectedPrimaryKey
+        );
+
+        if (current.userKeyField === column.fieldName && current.userKeyField !== nextFieldName) {
+          renamedUserKeyColumns.set(column.fieldName, nextFieldName);
+        }
+
+        return {
+          ...column,
+          fieldName: nextFieldName,
+          displayName: nextDisplayName,
+          handledBySuperclass: nextHandledBySuperclass,
+          superclassFieldName: nextSuperclassFieldName,
+          include: nextInclude,
+          isPrimaryKey: nextIsPrimaryKey,
+          fieldConfig: column.fieldConfig
+            ? {
+              ...column.fieldConfig,
+              name: nextFieldName,
+              displayName: nextDisplayName,
+              isPrimaryKey: nextIsPrimaryKey,
+            }
+            : column.fieldConfig,
+        };
+      });
+
+      return {
+        ...current,
+        legacyTableType,
+        baseClassName: getBaseClassNameForLegacyType(legacyTableType),
+        columns,
+        userKeyField: renamedUserKeyColumns.get(current.userKeyField) ?? current.userKeyField,
+      };
+    });
+  };
+
   const setColumnIncluded = (columnName: string, include: boolean) => {
     updateDrawerDraft((current) => ({
       ...current,
@@ -930,11 +1344,19 @@ export function DatasourceIntrospectionPage() {
     updateDrawerDraft((current) => ({
       ...current,
       userKeyField: fieldName,
-      columns: current.columns.map((column) => (
-        column.fieldName === fieldName
-          ? { ...column, include: column.handledBySuperclass ? false : true }
-          : column
-      )),
+      columns: current.columns.map((column) => {
+        const isUserKey = column.fieldName === fieldName;
+        return {
+          ...column,
+          include: isUserKey ? (column.handledBySuperclass ? false : true) : column.include,
+          fieldConfig: column.fieldConfig
+            ? {
+              ...column.fieldConfig,
+              isUserKey,
+            }
+            : column.fieldConfig,
+        };
+      }),
     }));
   };
 
@@ -956,7 +1378,7 @@ export function DatasourceIntrospectionPage() {
     window.open(`/admin/core/solid-core/model-metadata/form/${targetModelId}`, "_blank", "noopener,noreferrer");
   };
 
-  const viewChanges = async () => {
+  const reviewMappingJson = async () => {
     if (!drawerDraft || !bootstrap?.module?.id) return;
 
     const validationErrors = getDrawerValidationErrors(drawerDraft);
@@ -978,8 +1400,11 @@ export function DatasourceIntrospectionPage() {
       setMetadataJsonText(JSON.stringify(preview.metadataJson.model, null, 2));
       setMetadataJsonValidationError(null);
       setMetadataJsonResetToken(`preview-${preview.metadataJson.filePath}-${Date.now()}`);
-      setReviewTab("metadata-json");
-      setDrawerStep("review");
+      setPersistedMappingResult(null);
+      setMigrationArtifactsResult(null);
+      setGenerateCodeOutput("");
+      setRunMigrationOutput("");
+      setWorkspaceStep("review-json");
     } catch (error: any) {
       dispatch(showToast({
         severity: "error",
@@ -989,7 +1414,7 @@ export function DatasourceIntrospectionPage() {
     }
   };
 
-  const saveMapping = async () => {
+  const persistMappingArtifacts = async () => {
     if (!drawerDraft || !bootstrap?.module?.id) return;
 
     const validationErrors = getDrawerValidationErrors(drawerDraft);
@@ -997,15 +1422,14 @@ export function DatasourceIntrospectionPage() {
       validationErrors.forEach((detail) => {
         dispatch(showToast({ severity: "error", summary: "Validation", detail }));
       });
-      setDrawerStep("edit");
+      setWorkspaceStep("configure");
       return;
     }
 
     const reviewedModelValidation = parseAndValidateReviewedModelJson(metadataJsonText, drawerDraft);
     if (reviewedModelValidation.error || !reviewedModelValidation.parsed) {
       setMetadataJsonValidationError(reviewedModelValidation.error ?? "Metadata JSON is invalid.");
-      setReviewTab("metadata-json");
-      setDrawerStep("review");
+      setWorkspaceStep("review-json");
       dispatch(showToast({
         severity: "error",
         summary: "Validation",
@@ -1027,28 +1451,180 @@ export function DatasourceIntrospectionPage() {
 
       dispatch(showToast({
         severity: "success",
-        summary: "Saved",
+        summary: "Mapping saved",
+        detail: drawerDraft.mapped
+          ? "The model mapping metadata was updated successfully."
+          : "The model mapping metadata was created successfully.",
+      }));
+
+      setPersistedMappingResult(response);
+      setMigrationArtifactsResult(null);
+      setGenerateCodeOutput("");
+      setIsGeneratingCodeWorkflow(false);
+      setGenerateCodeStatusMessage("");
+      setGenerateCodeTimeoutMessage(null);
+      setGenerateCodeReady(false);
+      setHasAttemptedGenerateCode(false);
+      setRunMigrationOutput("");
+      setRunMigrationCompleted(false);
+      setDrawerDraft((current) => (
+        current
+          ? {
+            ...current,
+            mapped: true,
+            modelId: response.modelId,
+          }
+          : current
+      ));
+      setWorkspaceStep("generate-code");
+    } catch (error: any) {
+      dispatch(showToast({
+        severity: "error",
+        summary: "Save failed",
+        detail: readQueryError(error),
+      }));
+    }
+  };
+
+  const handleGenerateCode = async () => {
+    if (!bootstrap?.module?.id) return;
+
+    setHasAttemptedGenerateCode(true);
+    setRunMigrationCompleted(false);
+    setIsGeneratingCodeWorkflow(true);
+    setGenerateCodeStatusMessage("Submitting module generate-code request...");
+    setGenerateCodeTimeoutMessage(null);
+    setGenerateCodeReady(false);
+    let responseMessage = "";
+
+    try {
+      const response = await generateCode({ moduleId: bootstrap.module.id }).unwrap();
+      responseMessage = response.output || response.message || "";
+      setGenerateCodeOutput(responseMessage);
+      setGenerateCodeStatusMessage("Waiting briefly for the backend restart window...");
+    } catch (error: any) {
+      if (!isRecoverableGenerateCodeError(error)) {
+        setIsGeneratingCodeWorkflow(false);
+        setGenerateCodeStatusMessage("");
+        setGenerateCodeTimeoutMessage(null);
+        setGenerateCodeReady(false);
+        dispatch(showToast({
+          severity: "error",
+          summary: "Generate code failed",
+          detail: readQueryError(error),
+        }));
+        return;
+      }
+
+      setGenerateCodeStatusMessage("The API connection dropped during restart. Waiting for the backend to come back online...");
+    }
+
+    await new Promise((resolve) => window.setTimeout(resolve, 5000));
+    setGenerateCodeStatusMessage("Checking if the backend is back online...");
+
+    const isBackendAvailable = await waitForBackendAvailability({
+      retries: 40,
+      delayMs: 1500,
+    });
+
+    setIsGeneratingCodeWorkflow(false);
+
+    if (!isBackendAvailable) {
+      setGenerateCodeTimeoutMessage(
+        "Code generation took longer than expected. The backend did not come back within 60 seconds, so there may be a compilation failure or another startup issue. Please review the generated code manually and check the API logs before continuing.",
+      );
+      dispatch(showToast({
+        severity: "warn",
+        summary: "Backend restart taking too long",
+        detail: "The generate-code request completed, but the backend did not come back within 60 seconds.",
+      }));
+      return;
+    }
+
+    setGenerateCodeStatusMessage("Backend is back online. You can continue.");
+    setGenerateCodeReady(true);
+    setMigrationArtifactsResult(null);
+    setRunMigrationOutput("");
+    dispatch(showToast({
+      severity: "success",
+      summary: "Code generated",
+      detail: responseMessage || "The backend is back online. You can continue to the migration artifacts step.",
+    }));
+  };
+
+  const handleCreateMigrationArtifacts = async () => {
+    if (!drawerDraft || !bootstrap?.module?.id || !persistedMappingResult?.modelId) return;
+
+    const reviewedModelValidation = parseAndValidateReviewedModelJson(metadataJsonText, drawerDraft);
+    if (reviewedModelValidation.error || !reviewedModelValidation.parsed) {
+      setMetadataJsonValidationError(reviewedModelValidation.error ?? "Metadata JSON is invalid.");
+      setWorkspaceStep("review-json");
+      dispatch(showToast({
+        severity: "error",
+        summary: "Validation",
+        detail: reviewedModelValidation.error ?? "Metadata JSON is invalid.",
+      }));
+      return;
+    }
+
+    try {
+      const response = await createMigrationArtifacts({
+        moduleId: bootstrap.module.id,
+        payload: {
+          ...buildMappingRequest(
+            {
+              ...drawerDraft,
+              mapped: true,
+              modelId: persistedMappingResult.modelId,
+            },
+            mappingPreview?.migration.timestamp ?? null,
+          ),
+          reviewedModel: reviewedModelValidation.parsed,
+        },
+      }).unwrap();
+
+      setMigrationArtifactsResult(response);
+      setWorkspaceStep("run-migration");
+      dispatch(showToast({
+        severity: "success",
+        summary: "Migration artifacts created",
         detail: response.migration.written
-          ? "The mapping, metadata JSON, and migration template were written successfully."
-          : drawerDraft.mapped
-            ? "The model mapping was updated and written back to metadata JSON."
-            : "The model mapping was created and written to metadata JSON.",
+          ? "The migration file and datasource registration were written successfully."
+          : "No migration file was required, but the datasource registration was updated successfully.",
+      }));
+    } catch (error: any) {
+      dispatch(showToast({
+        severity: "error",
+        summary: "Create migration artifacts failed",
+        detail: readQueryError(error),
+      }));
+    }
+  };
+
+  const handleRunMigration = async () => {
+    if (!bootstrap?.module?.id || !selectedDatasource) return;
+
+    try {
+      const response = await runMigration({
+        moduleId: bootstrap.module.id,
+        datasource: selectedDatasource,
+      }).unwrap();
+
+      setRunMigrationOutput(response.output || response.message || "");
+      setRunMigrationCompleted(true);
+      dispatch(showToast({
+        severity: "success",
+        summary: "Migration workflow complete",
+        detail: response.message || `Migration, build, and seed ran successfully for datasource "${selectedDatasource}".`,
       }));
 
-      setDrawerOpen(false);
-      setDrawerDraft(null);
-      setMappingPreview(null);
-      setReviewedMetadataJsonValue(null);
-      setMetadataJsonText("");
-      setMetadataJsonValidationError(null);
-      setMetadataJsonResetToken(`saved-${Date.now()}`);
-      setDrawerStep("edit");
       await refetchTables();
       await refetchBootstrap();
     } catch (error: any) {
+      setRunMigrationOutput(readQueryError(error));
       dispatch(showToast({
         severity: "error",
-        summary: "Save failed",
+        summary: "Run migration failed",
         detail: readQueryError(error),
       }));
     }
@@ -1066,6 +1642,65 @@ export function DatasourceIntrospectionPage() {
     );
   }
 
+  const stepSequence: WorkspaceStep[] = [
+    "configure",
+    "review-json",
+    "generate-code",
+    "create-migrations",
+    "run-migration",
+  ];
+  const currentStepIndex = stepSequence.indexOf(workspaceStep);
+  const stepperItems = [
+    {
+      key: "configure" as const,
+      label: "Configure Mapping",
+      complete: currentStepIndex > 0,
+      active: workspaceStep === "configure",
+      disabled: false,
+      onClick: () => setWorkspaceStep("configure"),
+    },
+    {
+      key: "review-json" as const,
+      label: "Review Mapping JSON",
+      complete: currentStepIndex > 1,
+      active: workspaceStep === "review-json",
+      disabled: !mappingPreview,
+      onClick: () => {
+        if (mappingPreview) setWorkspaceStep("review-json");
+      },
+    },
+    {
+      key: "generate-code" as const,
+      label: "Generate Code",
+      complete: currentStepIndex > 2,
+      active: workspaceStep === "generate-code",
+      disabled: !persistedMappingResult,
+      onClick: () => {
+        if (persistedMappingResult) setWorkspaceStep("generate-code");
+      },
+    },
+    {
+      key: "create-migrations" as const,
+      label: "Create Migrations",
+      complete: currentStepIndex > 3,
+      active: workspaceStep === "create-migrations",
+      disabled: !hasAttemptedGenerateCode,
+      onClick: () => {
+        if (hasAttemptedGenerateCode) setWorkspaceStep("create-migrations");
+      },
+    },
+    {
+      key: "run-migration" as const,
+      label: "Run Migration",
+      complete: false,
+      active: workspaceStep === "run-migration",
+      disabled: !migrationArtifactsResult,
+      onClick: () => {
+        if (migrationArtifactsResult) setWorkspaceStep("run-migration");
+      },
+    },
+  ];
+
   const selectableUnmappedColumns = drawerDraft?.columns.filter(
     (column) => !column.handledBySuperclass && !column.matched && !column.isPrimaryKey,
   ) ?? [];
@@ -1107,19 +1742,20 @@ export function DatasourceIntrospectionPage() {
               </div>
               <div className="sdix-form-field">
                 <label htmlFor="sdix-user-key-field">User Key Field</label>
-                <SolidSelect
-                  id="sdix-user-key-field"
-                  value={drawerDraft.userKeyField}
-                  options={drawerUserKeyOptions}
-                  placeholder="Select user key field"
+                    <SolidSelect
+                      id="sdix-user-key-field"
+                      value={drawerDraft.userKeyField}
+                      options={drawerUserKeyOptions}
+                      placeholder="Select user key field"
                   onChange={(event) => changeUserKeyField(event.value)}
                 />
               </div>
               <div className="sdix-form-field sdix-form-field--full">
                 <label htmlFor="sdix-description">Description</label>
                 <SolidTextarea
+                  className="sdix-description-textarea"
                   id="sdix-description"
-                  rows={3}
+                  rows={2}
                   value={drawerDraft.description}
                   onChange={(event) => updateGeneralField("description", event.target.value)}
                 />
@@ -1163,20 +1799,16 @@ export function DatasourceIntrospectionPage() {
                 />
               </div>
               <div className="sdix-form-field">
-                <label htmlFor="sdix-legacy-type">Legacy Strategy</label>
-                <SolidInput
+                <label htmlFor="sdix-legacy-type">Mapping Strategy</label>
+                <SolidSelect
                   id="sdix-legacy-type"
-                  value={legacyTypeLabel(drawerDraft.legacyTableType)}
-                  disabled
-                />
-              </div>
-              <div className="sdix-form-field">
-                <label htmlFor="sdix-base-class">Superclass</label>
-                <SolidInput
-                  id="sdix-base-class"
-                  value={drawerDraft.baseClassName}
-                  disabled
+                  value={drawerDraft.legacyTableType}
+                  options={mappingStrategyOptions}
+                  onChange={(event) => updateLegacyTableType(event.value)}
                 />
+                <small className="sdix-inline-note">
+                  This will use <strong>{drawerDraft.baseClassName}</strong> for the generated entity.
+                </small>
               </div>
             </div>
           </section>
@@ -1196,10 +1828,6 @@ export function DatasourceIntrospectionPage() {
           </div>
           <div className="sdix-column-table">
             <div className="sdix-column-row sdix-column-row--head sdix-column-row--mapping">
-              <span>Column</span>
-              <span>Field</span>
-              <span>Database</span>
-              <span>SolidX</span>
               <span className="sdix-column-select-header">
                 {selectableUnmappedColumns.length ? (
                   <SolidCheckbox
@@ -1211,11 +1839,17 @@ export function DatasourceIntrospectionPage() {
                   "Include"
                 )}
               </span>
+              <span>Column</span>
+              <span>Field</span>
+              <span>Label</span>
+              <span>Database</span>
+              <span>SolidX</span>
               <span>Status</span>
               <span>Action</span>
             </div>
             {drawerDraft.columns.map((column) => {
               const isUserKey = drawerDraft.userKeyField === column.fieldName;
+              const isPrimaryKeyField = column.isPrimaryKey;
               const statusClassName = column.handledBySuperclass
                 ? "is-superclass"
                 : column.include
@@ -1236,6 +1870,20 @@ export function DatasourceIntrospectionPage() {
 
               return (
                 <div key={column.columnName} className="sdix-column-row sdix-column-row--mapping">
+                  <span className="sdix-column-include">
+                    {column.handledBySuperclass ? (
+                      <span className="sdix-column-placeholder">-</span>
+                    ) : column.matched ? (
+                      <span className="sdix-column-placeholder">-</span>
+                    ) : column.isPrimaryKey ? (
+                      <SolidCheckbox checked disabled aria-label="Required included column" />
+                    ) : (
+                      <SolidCheckbox
+                        checked={column.include}
+                        onChange={(event) => setColumnIncluded(column.columnName, event.target.checked)}
+                      />
+                    )}
+                  </span>
                   <span className="sdix-column-meta">
                     <strong>{column.columnName}</strong>
                     {column.isAutoGenerated ? <small>Generated id column</small> : null}
@@ -1246,7 +1894,19 @@ export function DatasourceIntrospectionPage() {
                       disabled={column.handledBySuperclass}
                       onChange={(event) => updateColumnFieldName(column.columnName, event.target.value)}
                     />
-                    {isUserKey ? <small className="sdix-inline-note">User key</small> : null}
+                    {isUserKey || isPrimaryKeyField ? (
+                      <div className="sdix-inline-note-stack">
+                        {isUserKey ? <small className="sdix-inline-note">User key</small> : null}
+                        {isPrimaryKeyField ? <small className="sdix-inline-note">Primary key</small> : null}
+                      </div>
+                    ) : null}
+                  </span>
+                  <span>
+                    <SolidInput
+                      value={column.displayName}
+                      disabled={column.handledBySuperclass}
+                      onChange={(event) => updateColumnDisplayName(column.columnName, event.target.value)}
+                    />
                   </span>
                   <span className="sdix-column-meta">
                     <strong>{column.dataType}</strong>
@@ -1262,39 +1922,38 @@ export function DatasourceIntrospectionPage() {
                       />
                     )}
                   </span>
-                  <span className="sdix-column-include">
-                    {column.handledBySuperclass ? (
-                      <span className="sdix-column-placeholder">-</span>
-                    ) : column.matched ? (
-                      <span className="sdix-column-placeholder">-</span>
-                    ) : column.isPrimaryKey ? (
-                      <SolidCheckbox checked disabled label="Required" />
-                    ) : (
-                      <SolidCheckbox
-                        checked={column.include}
-                        onChange={(event) => setColumnIncluded(column.columnName, event.target.checked)}
-                      />
-                    )}
-                  </span>
                   <span>
                     <span className={`sdix-status-badge ${statusClassName}`}>{statusText}</span>
                   </span>
                   <span className="sdix-column-action">
-                    {column.handledBySuperclass ? (
-                      <SolidButton size="small" variant="outline" disabled>
-                        Managed
-                      </SolidButton>
-                    ) : column.isPrimaryKey ? (
-                      <SolidButton size="small" variant="outline" disabled>
-                        Required
-                      </SolidButton>
-                    ) : column.matched ? (
-                      <SolidButton size="small" variant="outline" onClick={() => setColumnIncluded(column.columnName, false)}>
-                        Remove mapping
-                      </SolidButton>
-                    ) : (
-                      <span className="sdix-column-placeholder">-</span>
-                    )}
+                    <div className="sdix-column-action-stack">
+                      {!column.handledBySuperclass && (column.include || column.matched) ? (
+                        <SolidButton
+                          size="small"
+                          variant="outline"
+                          className="sdix-column-action-icon"
+                          onClick={() => openFieldConfigEditor(column.columnName)}
+                          aria-label={`Configure ${column.fieldName || column.columnName} field`}
+                        >
+                          <Cog size={14} />
+                        </SolidButton>
+                      ) : null}
+                      {column.handledBySuperclass ? (
+                        <SolidButton size="small" variant="outline" disabled className="sdix-column-action-chip sdix-column-action-chip--managed">
+                          Managed
+                        </SolidButton>
+                      ) : column.isPrimaryKey ? (
+                        <SolidButton size="small" variant="outline" disabled className="sdix-column-action-chip sdix-column-action-chip--required">
+                          Required
+                        </SolidButton>
+                      ) : column.matched ? (
+                        <SolidButton size="small" variant="outline" onClick={() => setColumnIncluded(column.columnName, false)}>
+                          Remove mapping
+                        </SolidButton>
+                      ) : (
+                        <span className="sdix-column-placeholder">-</span>
+                      )}
+                    </div>
                   </span>
                 </div>
               );
@@ -1321,120 +1980,229 @@ export function DatasourceIntrospectionPage() {
     },
   ] : [];
 
-  const reviewTabs = mappingPreview ? [
-    {
-      value: "metadata-json",
-      label: "Metadata JSON",
-      content: (
-        <div className="sdix-review-panel sdix-review-panel--metadata">
+  const reviewJsonPanel = mappingPreview ? (
+    <div className="sdix-review-panel sdix-review-panel--metadata">
+      <div className="sdix-review-meta sdix-review-meta--compact">
+        <span>Target file</span>
+        <strong>{mappingPreview.metadataJson.filePath}</strong>
+      </div>
+      <SolidJsonEditor
+        className="sdix-json-editor"
+        value={reviewedMetadataJsonValue ?? mappingPreview.metadataJson.model}
+        resetToken={metadataJsonResetToken}
+        onValueChange={(nextValue) => {
+          setReviewedMetadataJsonValue(nextValue);
+          if (metadataJsonValidationError) {
+            setMetadataJsonValidationError(null);
+          }
+        }}
+        onTextChange={(nextText) => {
+          setMetadataJsonText(nextText);
+        }}
+        onErrorChange={setMetadataJsonValidationError}
+      />
+      {metadataJsonValidationError ? (
+        <div className="sdix-json-validation-error">
+          <span>{metadataJsonValidationError}</span>
+        </div>
+      ) : null}
+    </div>
+  ) : null;
+
+  const createMigrationsPanel = mappingPreview ? (
+    <div className="sdix-review-panel sdix-review-panel--migration">
+      {mappingPreview.migration.willGenerate && mappingPreview.migration.filePath ? (
+        <>
           <div className="sdix-review-meta sdix-review-meta--compact">
             <span>Target file</span>
-            <strong>{mappingPreview.metadataJson.filePath}</strong>
+            <strong>{mappingPreview.migration.filePath}</strong>
           </div>
-          <SolidJsonEditor
-            className="sdix-json-editor"
-            value={reviewedMetadataJsonValue ?? mappingPreview.metadataJson.model}
-            resetToken={metadataJsonResetToken}
-            onValueChange={(nextValue) => {
-              setReviewedMetadataJsonValue(nextValue);
-              if (metadataJsonValidationError) {
-                setMetadataJsonValidationError(null);
-              }
-            }}
-            onTextChange={(nextText) => {
-              setMetadataJsonText(nextText);
-            }}
-            onErrorChange={setMetadataJsonValidationError}
-          />
-          {metadataJsonValidationError ? (
-            <div className="sdix-json-validation-error">
-              <span>{metadataJsonValidationError}</span>
-            </div>
+          <p className="sdix-review-note">
+            This migration preview is generated from the current mapping and stays read-only here. Moving ahead writes the migration file to disk and updates the datasource registration now that the entity code already exists.
+          </p>
+          {mappingPreview.migration.content ? (
+            <pre className="sdix-ddl-code sdix-ddl-code--fill"><code>{mappingPreview.migration.content}</code></pre>
           ) : null}
+        </>
+      ) : (
+        <div className="sdix-empty-state is-inline sdix-ddl-empty">
+          <Database size={18} />
+          <p>{mappingPreview.migration.note}</p>
         </div>
-      ),
-    },
-    {
-      value: "migration",
-      label: "Migration",
-      content: (
-        <div className="sdix-review-panel sdix-review-panel--migration">
-          {mappingPreview.migration.willGenerate && mappingPreview.migration.filePath ? (
-            <>
-              <div className="sdix-review-meta sdix-review-meta--compact">
-                <span>Target file</span>
-                <strong>{mappingPreview.migration.filePath}</strong>
-              </div>
-              <p className="sdix-review-note">
-                This migration preview is generated from the current mapping and is read-only here. Saving the mapping will write a new template migration file to the target location.
-              </p>
-              {mappingPreview.migration.content ? (
-                <pre className="sdix-ddl-code sdix-ddl-code--fill"><code>{mappingPreview.migration.content}</code></pre>
-              ) : null}
-            </>
-          ) : (
-            <div className="sdix-empty-state is-inline sdix-ddl-empty">
-              <Database size={18} />
-              <p>{mappingPreview.migration.note}</p>
-            </div>
-          )}
+      )}
+    </div>
+  ) : null;
+
+  const generateCodePanel = (
+    <div className="sdix-stage-panel">
+      <div className="sdix-stage-panel__header">
+        <span className="sdix-stage-panel__eyebrow">Step 3</span>
+        <h3>Generate module code</h3>
+        <p>The reviewed metadata JSON is now persisted. Run the normal SolidX module generation flow next so the entity, DTOs, repository, service, controller, and UI code are refreshed before we register the entity on the datasource and write the migration.</p>
+      </div>
+      <div className="sdix-stage-panel__body">
+        <div className="sdix-stage-panel__card">
+          <div className="sdix-stage-panel__card-title">What happens here</div>
+          <ul className="sdix-stage-panel__list">
+            <li>The module generate-code pipeline runs for <strong>{bootstrap?.module?.displayName}</strong>.</li>
+            <li>The newly mapped model entity is generated inside the module source folder.</li>
+            <li>Any existing generated assets for this module may be refreshed.</li>
+          </ul>
         </div>
-      ),
-    },
-  ] : [];
-
-  return (
-    <div className="sdix-page">
-      <div className="sdix-toolbar">
-        <div className="sdix-toolbar__left">
-          <div className="sdix-toolbar-search">
-            <Search size={15} />
-            <SolidInput
-              value={tableSearch}
-              onChange={(event) => setTableSearch(event.target.value)}
-              placeholder="Search tables"
-              disabled={!selectedDatasource}
-            />
-          </div>
+        <div className="sdix-stage-panel__actions">
+          <SolidButton
+            leftIcon={<Sparkles size={14} />}
+            loading={isGenerateCodeLoading || isGeneratingCodeWorkflow}
+            disabled={isGenerateCodeLoading || isGeneratingCodeWorkflow}
+            onClick={() => void handleGenerateCode()}
+          >
+            Generate Code
+          </SolidButton>
         </div>
+        {isGeneratingCodeWorkflow ? (
+          <div className="sdix-empty-state is-inline sdix-stage-progress">
+            <SolidSpinner size={30} />
+            <h3>Generating code</h3>
+            <p>{generateCodeStatusMessage || "Waiting for the backend to finish restarting..."}</p>
+          </div>
+        ) : null}
+        {!isGeneratingCodeWorkflow && generateCodeTimeoutMessage ? (
+          <div className="sdix-error is-inline sdix-stage-progress sdix-stage-progress--warning">
+            <ShieldAlert size={22} />
+            <h3>Manual review recommended</h3>
+            <p>{generateCodeTimeoutMessage}</p>
+          </div>
+        ) : null}
+        {generateCodeOutput ? (
+          <pre className="sdix-ddl-code sdix-ddl-code--fill"><code>{generateCodeOutput}</code></pre>
+        ) : null}
+      </div>
+    </div>
+  );
 
-        <div className="sdix-toolbar__actions">
-          {isBootstrapFetching || isTablesFetching || isTableDetailFetching || isMappedModelFetching ? (
-            <div className="sdix-inline-status">
-              <SolidSpinner size={16} />
-              <span>Refreshing</span>
-            </div>
-          ) : null}
-          <SolidSelect
-            value={selectedDatasource}
-            options={datasourceOptions}
-            placeholder="Datasource"
-            className="sdix-toolbar-select sdix-toolbar-select--compact"
-            onChange={(event) => setSelectedDatasource(event.value)}
-          />
-          <SolidButton
-            size="small"
-            className="sdix-icon-button"
-            leftIcon={<RefreshCw size={16} />}
-            onClick={() => void handleRefresh()}
-            tooltip="Refresh"
-            aria-label="Refresh"
-          />
-          <SolidButton
-            size="small"
-            className="sdix-icon-button"
-            leftIcon={<Cog size={16} />}
-            onClick={() => {
-              setDraftSessionSettings(sessionSettings);
-              setSettingsTab("datasource-info");
-              setSettingsOpen(true);
-            }}
-            tooltip="Session settings"
-            aria-label="Session settings"
-          />
+  const runMigrationPanel = (
+    <div className="sdix-stage-panel">
+      {!runMigrationCompleted ? (
+        <div className="sdix-stage-panel__header">
+          <span className="sdix-stage-panel__eyebrow">Step 5</span>
+          <h3>Run migration, build, and seed</h3>
+          <p>With the datasource file updated and module code generated, SolidX can now run the TypeORM migration for the selected datasource, rebuild the project, and reseed the mapped module metadata.</p>
         </div>
+      ) : null}
+      <div className="sdix-stage-panel__body">
+        {!runMigrationCompleted ? (
+          <div className="sdix-stage-panel__card">
+            <div className="sdix-stage-panel__card-title">Commands</div>
+            <pre className="sdix-stage-panel__command"><code>{`npx @solidxai/solidctl@latest migration -d ${selectedDatasource} run
+npx @solidxai/solidctl@latest build
+npx @solidxai/solidctl@latest seed --modules-to-seed ${bootstrap?.module?.name || ""}`}</code></pre>
+          </div>
+        ) : null}
+        {runMigrationCompleted ? (
+          <div className="sdix-empty-state is-inline sdix-stage-progress">
+            <Check size={24} />
+            <h3>Migration workflow finished</h3>
+            <p>Review the command output below. When you are satisfied, click Finish to return to the model list.</p>
+          </div>
+        ) : null}
+        {runMigrationOutput ? (
+          <pre className="sdix-ddl-code sdix-ddl-code--fill"><code>{runMigrationOutput}</code></pre>
+        ) : null}
       </div>
+    </div>
+  );
+
+  const workspaceContent = drawerDraft ? (() => {
+    switch (workspaceStep) {
+      case "review-json":
+        return reviewJsonPanel;
+      case "create-migrations":
+        return createMigrationsPanel;
+      case "generate-code":
+        return generateCodePanel;
+      case "run-migration":
+        return runMigrationPanel;
+      case "configure":
+      default:
+        return (
+          <SolidTabGroup
+            tabs={drawerTabs}
+            value={drawerTab}
+            onValueChange={setDrawerTab}
+            className="sdix-drawer-tabs sdix-wizard-tabs"
+            panelClassName="sdix-drawer-tab-panel sdix-wizard-tab-panel"
+          />
+        );
+    }
+  })() : null;
+
+  const workspaceMeta = drawerDraft ? (() => {
+    switch (workspaceStep) {
+      case "review-json":
+        return (
+          <span>
+            Review the generated metadata JSON before it is written to the module metadata file.
+          </span>
+        );
+      case "generate-code":
+        return persistedMappingResult ? (
+          <span>
+            Metadata JSON has been saved for
+            {" "}
+            <strong>{drawerDraft.displayName || drawerDraft.singularName}</strong>
+            . Generate the module code next so the entity file exists before datasource registration is updated. Continue stays disabled until you attempt code generation at least once.
+          </span>
+        ) : (
+          <span>Save the metadata JSON before generating code.</span>
+        );
+      case "create-migrations":
+        return mappingPreview ? (
+          <span>
+            Create the migration artifacts for
+            {" "}
+            <strong>{mappingPreview.summary.includedColumnNames.length}</strong>
+            {" "}
+            mapped columns
+            {mappingPreview.summary.generatedSystemColumnCount
+              ? ` and ${mappingPreview.summary.generatedSystemColumnCount} SolidX system column migration changes`
+              : ""}
+            .
+          </span>
+        ) : null;
+      case "run-migration":
+        return runMigrationCompleted ? (
+          <span>
+            The migration, build, and seed workflow has completed for
+            {" "}
+            <strong>{selectedDatasource}</strong>
+            . Review the output below and click Finish when you are ready to return to the model list.
+          </span>
+        ) : (
+          <span>
+            Run the migration, build, and seed workflow for
+            {" "}
+            <strong>{selectedDatasource}</strong>
+            {" "}
+            to apply the SolidX system columns on the legacy table and refresh the module metadata state.
+          </span>
+        );
+      case "configure":
+      default:
+        return drawerDraft.mapped ? (
+          <span>
+            Editing mapped model
+            {" "}
+            <strong>{selectedTable?.mappedModelDisplayName || selectedTable?.mappedModelSingularName}</strong>
+            {drawerDraft.mappedModuleLabel ? ` in ${drawerDraft.mappedModuleLabel}` : ""}
+          </span>
+        ) : (
+          <span>Configure the field mapping draft before generating the metadata JSON preview.</span>
+        );
+    }
+  })() : null;
 
+  return (
+    <div className="sdix-page">
       {isBootstrapLoading ? (
         <div className="sdix-loading">
           <SolidSpinner size={28} />
@@ -1449,6 +2217,70 @@ export function DatasourceIntrospectionPage() {
         </div>
       ) : (
         <>
+          {!isWorkspaceMode ? (
+            <div className="sdix-toolbar">
+              <div className="sdix-toolbar__left">
+                <div className="sdix-toolbar-search">
+                  <Search size={15} />
+                  <SolidInput
+                    value={tableSearch}
+                    onChange={(event) => setTableSearch(event.target.value)}
+                    placeholder="Search tables"
+                    disabled={!selectedDatasource}
+                  />
+                </div>
+              </div>
+
+              <div className="sdix-toolbar__actions">
+                {isBootstrapFetching || isTablesFetching ? (
+                  <div className="sdix-inline-status">
+                    <SolidSpinner size={16} />
+                    <span>Refreshing</span>
+                  </div>
+                ) : null}
+                <SolidButton
+                  size="small"
+                  leftIcon={<Sparkles size={14} />}
+                  onClick={() => {
+                    if (selectedListRow) {
+                      startMappingForRecord(selectedListRow);
+                    }
+                  }}
+                  disabled={!selectedListRow}
+                >
+                  Start Mapping
+                </SolidButton>
+                <SolidSelect
+                  value={selectedDatasource}
+                  options={datasourceOptions}
+                  placeholder="Datasource"
+                  className="sdix-toolbar-select sdix-toolbar-select--compact"
+                  onChange={(event) => setSelectedDatasource(event.value)}
+                />
+                <SolidButton
+                  size="small"
+                  className="sdix-icon-button"
+                  leftIcon={<RefreshCw size={16} />}
+                  onClick={() => void handleRefresh()}
+                  tooltip="Refresh"
+                  aria-label="Refresh"
+                />
+                <SolidButton
+                  size="small"
+                  className="sdix-icon-button"
+                  leftIcon={<Cog size={16} />}
+                  onClick={() => {
+                    setDraftSessionSettings(sessionSettings);
+                    setSettingsTab("datasource-info");
+                    setSettingsOpen(true);
+                  }}
+                  tooltip="Session settings"
+                  aria-label="Session settings"
+                />
+              </div>
+            </div>
+          ) : null}
+
           {selectedDatasource && tablesResponse?.synchronizeBlocked ? (
             <div className="sdix-blocker">
               <ShieldAlert size={20} />
@@ -1459,93 +2291,310 @@ export function DatasourceIntrospectionPage() {
             </div>
           ) : null}
 
-          <div className="sdix-workbench">
-            <div className="sdix-table-shell">
-            {!selectedDatasource ? (
-              <div className="sdix-empty-state is-inline">
-                <Database size={22} />
-                <p>Select a datasource to load its tables.</p>
-              </div>
-            ) : isTablesLoading ? (
-              <div className="sdix-loading is-inline">
-                <SolidSpinner size={24} />
-                <p>Inspecting datasource tables...</p>
+          {!isWorkspaceMode ? (
+            <div className="sdix-workbench">
+              <div className="sdix-table-shell">
+                {!selectedDatasource ? (
+                  <div className="sdix-empty-state is-inline">
+                    <Database size={22} />
+                    <p>Select a datasource to load its tables.</p>
+                  </div>
+                ) : isTablesLoading ? (
+                  <div className="sdix-loading is-inline">
+                    <SolidSpinner size={24} />
+                    <p>Inspecting datasource tables...</p>
+                  </div>
+                ) : tablesError ? (
+                  <div className="sdix-error is-inline">
+                    <span>{readQueryError(tablesError)}</span>
+                    <SolidButton size="small" variant="outline" onClick={() => void refetchTables()}>
+                      Retry
+                    </SolidButton>
+                  </div>
+                ) : !filteredRecords.length ? (
+                  <div className="sdix-empty-state is-inline">
+                    <Database size={22} />
+                    <p>{tableSearch ? "No tables match the current quick filter." : "No database tables were discovered for this datasource."}</p>
+                  </div>
+                ) : (
+                  <div className="sdix-table-area">
+                    <SolidDataTable
+                      value={filteredRecords}
+                      dataKey="tableName"
+                      viewportHeight="calc(100vh - 162px)"
+                      size="small"
+                      onRowClick={({ data }) => setSelectedRows([data])}
+                      rowClassName={(rowData) => `${rowData.schema ?? ""}::${rowData.tableName}` === selectedListRowKey ? "sdix-table-row-selected" : ""}
+                      emptyMessage="No datasource tables found"
+                    >
+                      <Column
+                        header=""
+                        body={(rowData: DatasourceIntrospectionTableRecord) => {
+                          const rowKey = `${rowData.schema ?? ""}::${rowData.tableName}`;
+                          return (
+                            <div className="sdix-selection-cell" data-no-row-click="true">
+                              <SolidCheckbox
+                                checked={rowKey === selectedListRowKey}
+                                onChange={(event) => setSelectedRows(event.target.checked ? [rowData] : [])}
+                              />
+                            </div>
+                          );
+                        }}
+                        style={{ width: 52, minWidth: 52 }}
+                      />
+                      <Column
+                        field="tableName"
+                        header="Table"
+                        body={(rowData: DatasourceIntrospectionTableRecord) => (
+                          <div className="sdix-table-primary-cell">
+                            <strong>{rowData.tableName}</strong>
+                          </div>
+                        )}
+                        style={{ minWidth: 240 }}
+                      />
+                      <Column field="schema" header="Schema" body={(rowData: DatasourceIntrospectionTableRecord) => rowData.schema || "dbo/default"} style={{ minWidth: 120 }} />
+                      <Column
+                        header="Status"
+                        body={(rowData: DatasourceIntrospectionTableRecord) => (
+                          <span
+                            className={`sdix-status-badge ${rowData.mapped ? "is-mapped" : "is-unmapped"}`}
+                          >
+                            {statusLabel(rowData)}
+                          </span>
+                        )}
+                        style={{ minWidth: 150 }}
+                      />
+                      <Column
+                        header="Superclass"
+                        body={(rowData: DatasourceIntrospectionTableRecord) => rowData.suggestedBaseClassName}
+                        style={{ minWidth: 220 }}
+                      />
+                      <Column field="suggestedUserKeyField" header="User Key" style={{ minWidth: 160 }} />
+                      <Column
+                        header="Mapped Model"
+                        body={(rowData: DatasourceIntrospectionTableRecord) => (
+                          rowData.mapped
+                            ? (
+                              <div className="sdix-table-primary-cell">
+                                <strong>{rowData.mappedModelDisplayName || rowData.mappedModelSingularName || "-"}</strong>
+                                {rowData.mappedModuleDisplayName || rowData.mappedModuleName ? (
+                                  <span>{rowData.mappedModuleDisplayName || rowData.mappedModuleName}</span>
+                                ) : null}
+                              </div>
+                            )
+                            : <span className="sdix-muted-cell">Not mapped</span>
+                        )}
+                        style={{ minWidth: 200 }}
+                      />
+                      <Column
+                        header="System Columns"
+                        body={(rowData: DatasourceIntrospectionTableRecord) => Math.max(rowData.columnCount - rowData.physicalColumnCount, 0)}
+                        style={{ minWidth: 130 }}
+                      />
+                      <Column
+                        header="Columns"
+                        body={(rowData: DatasourceIntrospectionTableRecord) => rowData.physicalColumnCount}
+                        style={{ minWidth: 110 }}
+                      />
+                    </SolidDataTable>
+                  </div>
+                )}
               </div>
-            ) : tablesError ? (
-              <div className="sdix-error is-inline">
-                <span>{readQueryError(tablesError)}</span>
-                <SolidButton size="small" variant="outline" onClick={() => void refetchTables()}>
-                  Retry
+            </div>
+          ) : (
+            <div className="sdix-workspace-screen">
+              <div className="sdix-workspace-header">
+                <SolidButton size="small" variant="outline" leftIcon={<ArrowLeft size={14} />} onClick={leaveWorkspace}>
+                  Back
                 </SolidButton>
+                <div className="sdix-workspace-header__identity sdix-workspace-header__identity--right">
+                  <h2>{selectedTable?.tableName || "Mapping workspace"}</h2>
+                  <p>
+                    {selectedTable
+                      ? `${selectedTable.schema || "dbo"} · ${selectedDatasourceRecord?.database || selectedDatasourceRecord?.displayName || "Datasource"}${selectedDatasourceRecord ? ` · ${providerLabel(selectedDatasourceRecord.type)}` : ""}`
+                      : "Complete the legacy table mapping in a dedicated workspace."}
+                  </p>
+                </div>
               </div>
-            ) : !filteredRecords.length ? (
-              <div className="sdix-empty-state is-inline">
-                <Database size={22} />
-                <p>{tableSearch ? "No tables match the current quick filter." : "No database tables were discovered for this datasource."}</p>
-              </div>
-            ) : (
-              <div className="sdix-table-area">
-                <SolidDataTable
-                  value={filteredRecords}
-                  dataKey="tableName"
-                  viewportHeight="calc(100vh - 162px)"
-                  size="small"
-                  onRowClick={({ data }) => openTableDrawer(data)}
-                  rowClassName={(rowData) => `${rowData.schema ?? ""}::${rowData.tableName}` === selectedTableKey && drawerOpen ? "sdix-table-row-selected" : ""}
-                  emptyMessage="No datasource tables found"
-                >
-                  <Column
-                    field="tableName"
-                    header="Table"
-                    body={(rowData: DatasourceIntrospectionTableRecord) => (
-                      <div className="sdix-table-primary-cell">
-                        <strong>{rowData.tableName}</strong>
-                      </div>
-                    )}
-                    style={{ minWidth: 240 }}
-                  />
-                  <Column field="schema" header="Schema" body={(rowData: DatasourceIntrospectionTableRecord) => rowData.schema || "dbo/default"} style={{ minWidth: 120 }} />
-                  <Column
-                    header="Status"
-                    body={(rowData: DatasourceIntrospectionTableRecord) => (
-                      <span
-                        className={`sdix-status-badge ${rowData.mapped ? "is-mapped" : "is-unmapped"}`}
+
+              {!selectedTable && !isTablesLoading ? (
+                <div className="sdix-error">
+                  <span>The selected table is no longer available for this datasource.</span>
+                  <SolidButton size="small" variant="outline" onClick={leaveWorkspace}>
+                    Back to table list
+                  </SolidButton>
+                </div>
+              ) : drawerLoadingError ? (
+                <div className="sdix-error">
+                  <span>{readQueryError(drawerLoadingError)}</span>
+                  <SolidButton size="small" variant="outline" onClick={() => void refetchTableDetail()}>
+                    Retry
+                  </SolidButton>
+                </div>
+              ) : isDrawerBlockingLoading ? (
+                <div className="sdix-loading sdix-workspace-loading">
+                  <SolidSpinner size={24} />
+                  <p>Preparing column mapping preview...</p>
+                </div>
+              ) : (
+                <div className="sdix-wizard-shell">
+                  <div className="sdix-wizard-stepper">
+                    {stepperItems.map((step, index) => (
+                      <button
+                        key={step.key}
+                        type="button"
+                        className={[
+                          "sdix-wizard-stepper-item",
+                          step.active ? "is-active" : "",
+                          step.complete ? "is-complete" : "",
+                          step.disabled ? "is-disabled" : "",
+                        ].filter(Boolean).join(" ")}
+                        onClick={step.onClick}
+                        disabled={step.disabled}
                       >
-                        {statusLabel(rowData)}
-                      </span>
-                    )}
-                    style={{ minWidth: 150 }}
-                  />
-                  <Column
-                    header="Superclass"
-                    body={(rowData: DatasourceIntrospectionTableRecord) => rowData.suggestedBaseClassName}
-                    style={{ minWidth: 220 }}
-                  />
-                  <Column field="suggestedUserKeyField" header="User Key" style={{ minWidth: 160 }} />
-                  <Column
-                    header="Mapped Model"
-                    body={(rowData: DatasourceIntrospectionTableRecord) => (
-                      rowData.mapped
-                        ? (rowData.mappedModelDisplayName || rowData.mappedModelSingularName || "-")
-                        : <span className="sdix-muted-cell">Not mapped</span>
-                    )}
-                    style={{ minWidth: 200 }}
-                  />
-                  <Column
-                    header="System Columns"
-                    body={(rowData: DatasourceIntrospectionTableRecord) => Math.max(rowData.columnCount - rowData.physicalColumnCount, 0)}
-                    style={{ minWidth: 130 }}
-                  />
-                  <Column
-                    header="Columns"
-                    body={(rowData: DatasourceIntrospectionTableRecord) => rowData.physicalColumnCount}
-                    style={{ minWidth: 110 }}
-                  />
-                </SolidDataTable>
-              </div>
-            )}
+                        <span className="sdix-wizard-stepper-badge">
+                          {step.complete ? <Check size={12} /> : index + 1}
+                        </span>
+                        <span className="sdix-wizard-stepper-label">{step.label}</span>
+                      </button>
+                    ))}
+                  </div>
+
+                  <div className="sdix-wizard-panel">
+                    <div className="sdix-wizard-panel__body">
+                      {workspaceContent}
+                    </div>
+                  </div>
+
+                  {drawerDraft ? (
+                    <div className="sdix-wizard-footer">
+                      <div className="sdix-wizard-footer__meta">{workspaceMeta}</div>
+                      <div className="sdix-wizard-footer__actions">
+                        {drawerDraft.mapped && drawerDraft.modelId ? (
+                          <SolidButton size="small" variant="outline" leftIcon={<ExternalLink size={14} />} onClick={openMappedModelForm}>
+                            Open model form
+                          </SolidButton>
+                        ) : null}
+                        {workspaceStep === "configure" ? (
+                          <SolidButton
+                            size="small"
+                            leftIcon={<Save size={14} />}
+                            loading={isPreviewMappingLoading}
+                            onClick={() => void reviewMappingJson()}
+                          >
+                            Review Mapping
+                          </SolidButton>
+                        ) : null}
+                        {workspaceStep === "review-json" ? (
+                          <>
+                            <SolidButton size="small" variant="outline" onClick={() => setWorkspaceStep("configure")}>
+                              Back
+                            </SolidButton>
+                            <SolidButton size="small" leftIcon={<Save size={14} />} loading={isSavingMapping} onClick={() => void persistMappingArtifacts()}>
+                              Continue
+                            </SolidButton>
+                          </>
+                        ) : null}
+                        {workspaceStep === "generate-code" ? (
+                          <>
+                            <SolidButton size="small" variant="outline" onClick={() => setWorkspaceStep("review-json")}>
+                              Back
+                            </SolidButton>
+                            <SolidButton
+                              size="small"
+                              disabled={!hasAttemptedGenerateCode || isGenerateCodeLoading || isGeneratingCodeWorkflow}
+                              onClick={() => setWorkspaceStep("create-migrations")}
+                            >
+                              Continue
+                            </SolidButton>
+                          </>
+                        ) : null}
+                        {workspaceStep === "create-migrations" ? (
+                          <>
+                            <SolidButton size="small" variant="outline" onClick={() => setWorkspaceStep("generate-code")}>
+                              Back
+                            </SolidButton>
+                            <SolidButton size="small" leftIcon={<Save size={14} />} loading={isCreatingMigrationArtifacts} onClick={() => void handleCreateMigrationArtifacts()}>
+                              Continue
+                            </SolidButton>
+                          </>
+                        ) : null}
+                        {workspaceStep === "run-migration" ? (
+                          runMigrationCompleted ? (
+                            <SolidButton
+                              size="small"
+                              leftIcon={<Check size={14} />}
+                              onClick={() => navigate("/admin/core/solid-core/model-metadata/list")}
+                            >
+                              Finish
+                            </SolidButton>
+                          ) : (
+                            <>
+                              <SolidButton size="small" variant="outline" onClick={() => setWorkspaceStep("create-migrations")}>
+                                Back
+                              </SolidButton>
+                              <SolidButton size="small" leftIcon={<Database size={14} />} loading={isRunMigrationLoading} onClick={() => void handleRunMigration()}>
+                                Continue
+                              </SolidButton>
+                            </>
+                          )
+                        ) : null}
+                      </div>
+                    </div>
+                  ) : null}
+                </div>
+              )}
             </div>
-          </div>
+          )}
+
+          <SolidDialog
+            open={Boolean(activeFieldConfigColumn)}
+            onOpenChange={(open) => {
+              if (!open) {
+                setFieldConfigColumnName(null);
+              }
+            }}
+            style={{ width: "min(1080px, calc(100vw - 48px))" }}
+          >
+            <SolidDialogHeader>
+              <div>
+                <SolidDialogTitle>Field configuration</SolidDialogTitle>
+                <SolidDialogDescription>
+                  Reuse the standard field form here to fine-tune the mapped SolidX field before saving the introspection draft.
+                </SolidDialogDescription>
+              </div>
+              <SolidDialogClose />
+            </SolidDialogHeader>
+            <SolidDialogSeparator />
+            <SolidDialogBody>
+              {activeFieldConfigColumn && activeFieldConfigMetaData && drawerDraft ? (
+                <FieldMetaDataForm
+                  modelMetaData={{
+                    singularName: drawerDraft.singularName,
+                    pluralName: drawerDraft.pluralName,
+                  }}
+                  fieldMetaData={activeFieldConfigMetaData}
+                  setFieldMetaData={() => undefined}
+                  setVisiblePopup={() => undefined}
+                  setIsDirty={() => undefined}
+                  allFields={fieldDraftAllFields}
+                  deleteModelFunction={() => undefined}
+                  params={params}
+                  setIsRequiredPopUp={() => undefined}
+                  showToaster={showFieldDraftToaster}
+                  onDraftSubmit={(nextFieldConfig: Record<string, any>) => applyFieldConfigDraft(activeFieldConfigColumn.columnName, nextFieldConfig)}
+                  onClose={() => setFieldConfigColumnName(null)}
+                  availableFieldTypes={scalarFieldTypeOptions.map((option) => option.value)}
+                  forceShowTypeSelector
+                  selectorRequireContinue
+                  selectorContinueLabel="Next"
+                  selectorInitialFieldType={activeFieldConfigColumn.solidFieldType}
+                  disableIdentityEditingForExisting={false}
+                  submitLabel="Save field config"
+                />
+              ) : null}
+            </SolidDialogBody>
+          </SolidDialog>
 
           <SolidDialog
             open={settingsOpen}
@@ -1580,138 +2629,6 @@ export function DatasourceIntrospectionPage() {
               </SolidButton>
             </SolidDialogFooter>
           </SolidDialog>
-
-          <SolidDialog
-            open={drawerOpen}
-            onOpenChange={setDrawerOpen}
-            className="sdix-drawer"
-            overlayClassName="sdix-drawer-overlay"
-            dismissible
-          >
-            <SolidDialogHeader className="sdix-drawer-header">
-              <div className="sdix-drawer-header__identity">
-                <SolidDialogTitle>{selectedTable?.tableName || "Table details"}</SolidDialogTitle>
-                <SolidDialogDescription className="sdix-drawer-header__meta">
-                  {selectedTable
-                    ? `${selectedTable.schema || "default"} · ${selectedDatasourceRecord?.database || selectedDatasourceRecord?.displayName || "Datasource"}${selectedDatasourceRecord ? ` · ${providerLabel(selectedDatasourceRecord.type)}` : ""}`
-                    : "Review mapping details"}
-                </SolidDialogDescription>
-              </div>
-              <SolidDialogClose />
-            </SolidDialogHeader>
-            <SolidDialogSeparator />
-            <SolidDialogBody className="sdix-drawer-body">
-              {!selectedTable ? (
-                <div className="sdix-empty-state is-inline">
-                  <Sparkles size={22} />
-                  <p>Select a table row to review its structure.</p>
-                </div>
-              ) : drawerLoadingError ? (
-                <div className="sdix-error is-inline">
-                  <span>{readQueryError(drawerLoadingError)}</span>
-                  <SolidButton size="small" variant="outline" onClick={() => void refetchTableDetail()}>
-                    Retry
-                  </SolidButton>
-                </div>
-              ) : isDrawerBlockingLoading ? (
-                <div className="sdix-loading is-inline">
-                  <SolidSpinner size={24} />
-                  <p>Preparing column mapping preview...</p>
-                </div>
-              ) : (
-                <div className="sdix-drawer-stack">
-                  {drawerDraft && !drawerDraft.mapped && drawerStep === "edit" ? (
-                    <div className="sdix-detail-callout sdix-system-fields-callout">
-                      <h3>SolidX system fields are added later</h3>
-                      <p>
-                        This preview only lists the legacy table columns that already exist today.
-                        {" "}
-                        Framework system fields from the selected superclass, including the namespaced
-                        {" "}
-                        <code>ss_*</code>
-                        {" "}
-                        columns, are introduced when you save the mapping and then generate/apply the follow-up migrations.
-                      </p>
-                    </div>
-                  ) : null}
-                  {drawerStep === "edit" ? (
-                    <SolidTabGroup
-                      tabs={drawerTabs}
-                      value={drawerTab}
-                      onValueChange={setDrawerTab}
-                      className="sdix-drawer-tabs"
-                      panelClassName="sdix-drawer-tab-panel"
-                    />
-                  ) : (
-                    <SolidTabGroup
-                      tabs={reviewTabs}
-                      value={reviewTab}
-                      onValueChange={setReviewTab}
-                      className="sdix-drawer-tabs"
-                      panelClassName="sdix-drawer-tab-panel"
-                    />
-                  )}
-                </div>
-              )}
-            </SolidDialogBody>
-            {drawerDraft && !isDrawerBlockingLoading ? (
-              <>
-                <SolidDialogSeparator />
-                <SolidDialogFooter className="sdix-drawer-footer">
-                  <div className="sdix-drawer-footer__meta">
-                    {drawerStep === "review" && mappingPreview ? (
-                      <span>
-                        Review the metadata update first, then save to apply
-                        {" "}
-                        <strong>{mappingPreview.summary.includedColumnNames.length}</strong>
-                        {" "}
-                        mapped columns
-                        {mappingPreview.summary.generatedSystemColumnCount
-                          ? ` and ${mappingPreview.summary.generatedSystemColumnCount} SolidX system column migration changes`
-                          : ""}
-                        .
-                      </span>
-                    ) : drawerDraft.mapped ? (
-                      <span>
-                        Editing mapped model
-                        {" "}
-                        <strong>{selectedTable?.mappedModelDisplayName || selectedTable?.mappedModelSingularName}</strong>
-                        {drawerDraft.mappedModuleLabel ? ` in ${drawerDraft.mappedModuleLabel}` : ""}
-                      </span>
-                    ) : (
-                      <span>Saving will create the model metadata and write it to the module JSON.</span>
-                    )}
-                  </div>
-                  <div className="sdix-drawer-footer__actions">
-                    {drawerDraft.mapped && drawerDraft.modelId ? (
-                      <SolidButton size="small" variant="outline" leftIcon={<ExternalLink size={14} />} onClick={openMappedModelForm}>
-                        Open model form
-                      </SolidButton>
-                    ) : null}
-                    {drawerStep === "review" ? (
-                      <>
-                        <SolidButton size="small" variant="outline" onClick={() => setDrawerStep("edit")}>
-                          Back to editing
-                        </SolidButton>
-                        <SolidButton size="small" leftIcon={<Save size={14} />} loading={isSavingMapping} onClick={() => void saveMapping()}>
-                          Save mapping
-                        </SolidButton>
-                      </>
-                    ) : (
-                      <SolidButton
-                        size="small"
-                        leftIcon={<Save size={14} />}
-                        loading={isPreviewMappingLoading}
-                        onClick={() => void viewChanges()}
-                      >
-                        View Changes
-                      </SolidButton>
-                    )}
-                  </div>
-                </SolidDialogFooter>
-              </>
-            ) : null}
-          </SolidDialog>
         </>
       )}
     </div>