feat(typegen): enhance logging and update form handling in TableOptionsForm

- Added $schema to proofkit-typegen.config.jsonc for schema validation.
- Improved logging in createApiApp to track received data, parsed config, and transformed data.
- Updated handleSaveAll in App component to use form.getValues() for current form state, ensuring accurate data submission.
- Refactored TableOptionsForm to utilize watch() for dynamic field updates, improving form state management.
- Adjusted MetadataTablesEditor for better column sizing and pinning options.

Co-Authored-By: Claude Opus 4.5 <[email protected]>

Author: eluce2

packages/typegen/proofkit-typegen.config.jsonc

@@ -1,4 +1,5 @@
 {
+  "$schema": "https://proofkit.dev/typegen-config-schema.json",
   "config": [
     {
       "type": "fmodata",

packages/typegen/src/server/app.ts

@@ -113,6 +113,7 @@ export function createApiApp(context: ApiContext) {
       async (c) => {
         try {
           const data = c.req.valid("json");
+          console.log("[Server POST /config] Received data:", JSON.stringify(data, null, 2));
 
           // Transform validated data using runtime schema (applies transforms)
           const transformedData = {
@@ -124,9 +125,12 @@ export function createApiApp(context: ApiContext) {
                   ? config
                   : { ...(config as Record<string, unknown>), type: "fmdapi" as const };
               // Parse with runtime schema to apply transforms
-              return typegenConfigSingle.parse(configWithType);
+              const parsed = typegenConfigSingle.parse(configWithType);
+              console.log("[Server POST /config] After parse, config:", JSON.stringify(parsed, null, 2));
+              return parsed;
             }),
           };
+          console.log("[Server POST /config] Transformed data:", JSON.stringify(transformedData, null, 2));
 
           // Validate with Zod (data is already { config: [...], postGenerateCommand?: string })
           const validation = typegenConfig.safeParse(transformedData);
@@ -162,12 +166,14 @@ export function createApiApp(context: ApiContext) {
           const fullPath = path.resolve(context.cwd, context.configPath);
           // Add $schema at the top of the config
           const configData = validation.data as Record<string, unknown>;
+          console.log("[Server POST /config] Validation data to write:", JSON.stringify(configData, null, 2));
           const { $schema: _, ...rest } = configData;
           const configWithSchema = {
             $schema: "https://proofkit.dev/typegen-config-schema.json",
             ...rest,
           };
           const jsonContent = `${JSON.stringify(configWithSchema, null, 2)}\n`;
+          console.log("[Server POST /config] Final JSON content:\n", jsonContent);
 
           await fs.ensureDir(path.dirname(fullPath));
           await fs.writeFile(fullPath, jsonContent, "utf8");

packages/typegen/web/src/App.tsx

@@ -153,14 +153,29 @@ function App() {
     },
   });
 
-  const handleSaveAll = form.handleSubmit(async (data) => {
+  const handleSaveAll = form.handleSubmit(async (_data) => {
+    // IMPORTANT: Use form.getValues() instead of the `data` parameter passed to handleSubmit.
+    // react-hook-form's handleSubmit callback receives stale data for dynamically added nested
+    // fields (like table-level options set via setValue in child components).
+    // form.getValues() returns the current live form state with all updates.
+    const currentConfigs = form.getValues("config");
+    const currentPostGenerateCommand = form.getValues("postGenerateCommand");
+    console.log(
+      "[App.handleSaveAll] Form data being submitted:",
+      JSON.stringify({ config: currentConfigs, postGenerateCommand: currentPostGenerateCommand }, null, 2),
+    );
+    console.log("[App.handleSaveAll] Form dirty fields:", form.formState.dirtyFields);
     try {
-      await saveMutation.mutateAsync({ configsToSave: data.config, postGenerateCommand: data.postGenerateCommand });
+      await saveMutation.mutateAsync({
+        configsToSave: currentConfigs,
+        postGenerateCommand: currentPostGenerateCommand,
+      });
       // Reset the form with the current form state to clear dirty state
-      // Use getValues() to get the current state, preserving any changes made during the save request
       // The accordion state is preserved because it's controlled and the component doesn't unmount
-      const currentConfigs = form.getValues("config");
-      const currentPostGenerateCommand = form.getValues("postGenerateCommand");
+      console.log(
+        "[App.handleSaveAll] After save, form values:",
+        JSON.stringify({ config: currentConfigs, postGenerateCommand: currentPostGenerateCommand }, null, 2),
+      );
       form.reset({ config: currentConfigs, postGenerateCommand: currentPostGenerateCommand });
     } catch (err) {
       // Error is handled by the mutation

packages/typegen/web/src/components/MetadataTablesEditor.tsx

@@ -472,7 +472,7 @@ export function MetadataTablesEditor({ configIndex }: MetadataTablesEditorProps)
         id: "actions",
         header: () => null,
         enableSorting: false,
-        size: 150,
+        size: 1,
         cell: (info) => {
           const row = info.row.original;
           return (
@@ -494,7 +494,9 @@ export function MetadataTablesEditor({ configIndex }: MetadataTablesEditorProps)
           );
         },
         meta: {
-          skeleton: <Skeleton className="h-9 w-32" />,
+          skeleton: <Skeleton className="h-8 w-[72px]" />,
+          cellClassName: "!w-px",
+          headerClassName: "!w-px",
         },
       },
     ],
@@ -511,6 +513,9 @@ export function MetadataTablesEditor({ configIndex }: MetadataTablesEditorProps)
     globalFilterFn: "includesString",
     state: {
       globalFilter: searchFilter,
+      columnPinning: {
+        right: ["actions"],
+      },
     },
     onGlobalFilterChange: setSearchFilter,
   });
@@ -647,6 +652,7 @@ export function MetadataTablesEditor({ configIndex }: MetadataTablesEditorProps)
               width: "auto",
               headerSticky: true,
               dense: true,
+              columnsPinnable: true,
             }}
           >
             <DataGridContainer>

packages/typegen/web/src/components/metadata-fields-dialog/MetadataFieldsDialog.tsx

@@ -1,11 +1,12 @@
 import { useReactTable } from "@tanstack/react-table";
-import { Search } from "lucide-react";
+import { Search, X } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
 import { useFormContext } from "react-hook-form";
 import { useTableMetadata } from "../../hooks/useTableMetadata";
 import type { SingleConfig } from "../../lib/config-utils";
-import { Dialog, DialogBody, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog";
+import { Dialog, DialogBody, DialogClose, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog";
 import { Input, InputWrapper } from "../ui/input";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 import { FieldsDataGrid } from "./FieldsDataGrid";
 import { createFieldsColumns } from "./fieldsColumns";
 import { TableOptionsForm } from "./TableOptionsForm";
@@ -138,16 +139,26 @@ export function MetadataFieldsDialog({ open, onOpenChange, tableName, configInde
   return (
     <Dialog onOpenChange={onOpenChange} open={open}>
       <DialogContent
-        className="!top-[5vh] !translate-y-0 flex max-h-[90vh] w-full max-w-6xl flex-col"
+        className="top-[5vh]! flex max-h-[90vh] w-full max-w-6xl translate-y-0! flex-col"
+        showCloseButton={false}
         variant="default"
       >
-        <DialogHeader className="flex-shrink-0">
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <DialogClose className="absolute end-5 top-5 flex cursor-pointer items-center gap-1.5 rounded-sm opacity-60 outline-0 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden disabled:pointer-events-none">
+              <span className="text-muted-foreground text-xs">Close</span>
+              <X className="size-4" />
+            </DialogClose>
+          </TooltipTrigger>
+          <TooltipContent>Selections will persist when you close the dialog</TooltipContent>
+        </Tooltip>
+        <DialogHeader className="shrink-0">
           <DialogTitle>
             Including {selectedFieldsCount} of {fieldsData.length} fields for {tableName || "Table"}
           </DialogTitle>
         </DialogHeader>
         <DialogBody className="flex min-h-0 flex-1 flex-col overflow-x-auto overflow-y-auto">
-          <div className="mb-2 flex-shrink-0 space-y-2">
+          <div className="mb-2 shrink-0 space-y-2">
             <InputWrapper>
               <Search className="size-4" />
               <Input