feat: update component migration orchestrator and add deletion manifest script- Simplify COMPONENT_DIRS to process all TSX components under src/components, excluding specific files.- Introduce EXCLUDED_FILENAMES to filter out non-relevant TSX files.- Enhance documentation for component registry entry format and JSON return structure.- Add a new script to generate a deletion manifest for legacy TSX components with JSON equivalents.

.claude/settings.local.json

@@ -39,21 +39,16 @@
       "Bash(git restore:*)",
       "Bash(tree:*)",
       "Bash(powershell:*)",
-      "Bash(npx tsc:*)",
-      "Bash(node -c:*)",
-      "Bash(tee:*)",
-      "Bash(git log:*)",
-      "Bash(__NEW_LINE_d25a97dbcf730748__ git show 5a70926:src/components/molecules/FileTabs.tsx)",
-      "Bash(__NEW_LINE_133e2efdc2fa9e3f__ cp /tmp/EditorToolbar.tsx /Users/rmac/Documents/GitHub/low-code-react-app-b/src/components/molecules/)",
-      "Bash(__NEW_LINE_60a67b52c0555a4f__ ls -la /Users/rmac/Documents/GitHub/low-code-react-app-b/src/components/molecules/File*)",
-      "Bash(__NEW_LINE_db723daab8184235__ git show 5a70926:src/components/atoms/ComponentTreeNode.tsx)",
-      "Bash(__NEW_LINE_225433a826af561c__ git show 5a70926:src/components/molecules/index.ts)",
-      "Bash(__NEW_LINE_3ace36b310bc6599__ head -5 /Users/rmac/Documents/GitHub/low-code-react-app-b/src/components/atoms/DataTable.tsx)",
-      "Bash(__NEW_LINE_5257b4833161515f__ echo \"=== BUILD SUCCESS ===\")",
-      "Bash(__NEW_LINE_609b943e39e1ac8d__ cp /tmp/COMPREHENSIVE_BUILD_REPORT.md /Users/rmac/Documents/GitHub/low-code-react-app-b/BUILD_REPORT.md)",
-      "Bash(for component in \"Accordion\" \"CopyButton\" \"FileUpload\" \"FilterInput\" \"Image\" \"Input\" \"PasswordInput\" \"Popover\")",
-      "Bash(git add:*)",
-      "Bash(git commit -m \"$\\(cat <<''EOF''\nfeat: Complete JSON component migration for 9 components \\(atoms + BindingEditor\\)\n\nMigration complete for:\n- 5 atoms: Accordion, CopyButton, FileUpload, FilterInput, Image, Input, PasswordInput, Popover \\(8 total\\)\n- 1 molecule: BindingEditor\n\nChanges:\n- Deleted 9 legacy TSX files that have complete JSON equivalents\n- Exported BindingEditor from json-components.ts with useBindingEditor hook\n- Registered useBindingEditor in hooks-registry.ts\n- Updated all imports across codebase to use JSON-based components\n- Fixed build errors: schema-loader dynamic import, DataSourceGroupSection\n- Cleaned up component index exports\n\nBuild status: ✅ PASSING\n- 0 TypeScript errors\n- All 9,408 modules transformed successfully\n- No blocking build warnings\n\nNext steps:\n- 3 organisms still need conversion: DataSourceManager, NavigationMenu, TreeListPanel\n- 120+ additional components have TSX versions \\(need individual migration\\)\n- 22 JSON components now available for use throughout the app\n\nCo-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>\nEOF\n\\)\")"
+      "Bash(git checkout:*)",
+      "Bash(git revert:*)",
+      "Bash(for comp in GitHubBuildStatus LazyD3BarChart StorageSettings LoadingFallback NavigationItem PageHeaderContent SaveIndicator SeedDataManager TreeCard)",
+      "Bash(do grep -r \"from ''@/components/molecules/$comp''\" src/ --files-with-matches)"
     ]
+  },
+  "mcpServers": {
+    "codeql": {
+      "command": "node",
+      "args": ["scripts/mcp/codeql-mcp.cjs"]
+    }
   }
 }

AGENTS.md

@@ -0,0 +1,32 @@
+# Project Agent Guide
+
+This repo is migrating legacy TSX components to JSON-driven components with hooks.
+Use this file as the quick, local guide for automation and review.
+
+## Conversion Workflow (TSX -> JSON)
+1) Identify component under `src/components/atoms|molecules|organisms`.
+2) Read TSX and decide if stateful.
+3) If stateful, extract logic to `src/hooks/use-<component>.ts`.
+4) Create JSON definition in `src/components/json-definitions/<component>.json`.
+5) Add interface in `src/lib/json-ui/interfaces/<component>.ts`.
+6) Export hook (if any) in `src/hooks/index.ts` and `src/lib/json-ui/hooks-registry.ts`.
+7) Export interface in `src/lib/json-ui/interfaces/index.ts`.
+8) Export JSON component in `src/lib/json-ui/json-components.ts`.
+9) Update imports to `@/lib/json-ui/json-components` and delete TSX.
+10) Verify with `npm run build` and `npm run audit:json`.
+
+## CodeQL Helpers
+Custom query pack: `codeql/custom-queries/`
+Optimized DB (source-root `src/`): `codeql-db-optimized/`
+Latest SARIF: `codeql-db-optimized/diagnostic/migration-queries.sarif`
+
+Key queries:
+- Legacy component imports and barrels
+- Hooks usage in components (guides hook extraction)
+- JSX presence in components
+- Imports from json-definitions (should be zero)
+- Migration target folder inventory
+
+## Related Docs
+- `CLAUDE.md` for migration status and CodeQL results
+- `docs/reference/AGENTS.md` for agent architecture background

BUILD_REPORT.md

@@ -1,260 +0,0 @@
-# Comprehensive Build Analysis Report
-
-## Executive Summary
-After the EditorToolbar fix and restoration of 56+ deleted component files, **the build now completes successfully with ZERO TypeScript errors**. All blocking build issues have been resolved.
-
----
-
-## Build Status: ✅ PASSING
-
-```
-✓ 9,417 modules transformed
-✓ Built in 8.81s
-✓ All 330+ component types generated
-✓ No TypeScript errors
-✓ Zero blocking issues
-```
-
----
-
-## Issues Identified & Fixed
-
-### Phase 1: Initial Build Failure
-
-**Error:** Missing EditorToolbar component import in CodeEditor.tsx
-```
-error during build:
-[vite:load-fallback] Could not load /src/components/molecules/EditorToolbar
-```
-
-**Root Cause:** EditorToolbar.tsx was deleted in a recent commit as part of the JSON migration strategy, but CodeEditor.tsx still imports it.
-
-**Fix Applied:** Restored EditorToolbar.tsx from commit 5a70926
-
----
-
-### Phase 2: Cascading Missing Dependencies
-
-As imports were resolved, more missing files were discovered:
-- SearchBar.tsx
-- ComponentTreeNode.tsx
-- PropertyEditorField.tsx
-- And 50+ others
-
-**Root Cause:** A bulk deletion of component files occurred during the JSON migration cleanup without corresponding updates to dependent components.
-
-**Fix Applied:** Systematically restored all 56+ deleted component files from commit 5a70926 using:
-```bash
-git ls-tree -r --name-only 5a70926 -- src/components | grep "\.tsx$" | while read file; do
-  if [ ! -f "$file" ]; then
-    git show 5a70926:"$file" > "$file"
-  fi
-done
-```
-
----
-
-### Phase 3: Export Index Errors
-
-**Error:** Missing exports in component index files
-```
-"AppLogo" is not exported by "src/components/atoms/index.ts"
-Could not resolve "./TreeListHeader" from "src/components/molecules/index.ts"
-Could not resolve "./TreeCard" from "src/components/molecules/index.ts"
-```
-
-**Root Cause:** 
-- Component index files were not updated when files were restored
-- Some exports referenced non-existent files (TreeCard, TreeListHeader)
-
-**Fixes Applied:**
-1. Restored `src/components/atoms/index.ts` from commit 5a70926 (126 exports)
-2. Restored `src/components/molecules/index.ts`
-3. Restored `src/components/organisms/index.ts`
-4. Restored `src/components/index.ts`
-5. Removed orphaned export references:
-   - Removed: `export { TreeListHeader } from './TreeListHeader'`
-   - Removed: `export { TreeCard } from './TreeCard'`
-
----
-
-## Complete List of Restored Files
-
-### Atoms (87 total)
-```
-Accordion, ActionButton, ActionCard, ActionIcon, Alert, AppLogo, Avatar,
-AvatarGroup, Badge, BindingIndicator, Breadcrumb, Button, ButtonGroup,
-Calendar, Card, Checkbox, Chip, CircularProgress, Code, ColorSwatch,
-CommandPalette, CompletionCard, ComponentPaletteItem, ComponentTreeNode,
-ConfirmButton, Container, ContextMenu, CopyButton, CountBadge, DataList,
-DataSourceBadge, DataTable, DatePicker, DetailRow, Divider, Dot, Drawer,
-EmptyMessage, EmptyState, EmptyStateIcon, ErrorBadge, FileIcon, FileUpload,
-FilterInput, Flex, Form, GlowCard, Grid, Heading, HelperText, HoverCard,
-IconButton, IconText, IconWrapper, Image, InfoBox, InfoPanel, Input, Kbd,
-KeyValue, Label, Link, List, ListItem, LiveIndicator, LoadingSpinner,
-LoadingState, Menu, MetricCard, MetricDisplay, Modal, Notification,
-NumberInput, PageHeader, PanelHeader, PasswordInput, Popover, ProgressBar,
-PropertyEditorField, Pulse, QuickActionButton, Radio, RangeSlider, Rating,
-ResponsiveGrid, ScrollArea, SearchInput, Section, SeedDataStatus, Select,
-Separator, Skeleton, Slider, Spacer, Sparkle, Spinner, Stack, StatCard,
-StatusBadge, StatusIcon, StepIndicator, Stepper, Switch, TabIcon, Table,
-Tabs, Tag, Text, TextArea, TextGradient, TextHighlight, Timeline, Timestamp,
-TipsCard, Toggle, Tooltip, TreeIcon
-```
-
-### Molecules (32 total)
-```
-AppBranding, Breadcrumb, CanvasRenderer, CodeExplanationDialog,
-ComponentBindingDialog, ComponentPalette, ComponentTree, DataSourceCard,
-DataSourceEditorDialog, EditorActions, EditorToolbar, EmptyEditorState,
-FileTabs, GitHubBuildStatus, LazyBarChart, LazyD3BarChart,
-LazyInlineMonacoEditor, LazyLineChart, LazyMonacoEditor, MonacoEditorPanel,
-NavigationGroupHeader, PropertyEditor, SaveIndicator, SearchBar,
-SearchInput, SeedDataManager, StorageSettings, ToolbarButton,
-TreeFormDialog
-```
-
-### Organisms (11 total)
-```
-AppHeader, EmptyCanvasState, PageHeader, SchemaCodeViewer,
-SchemaEditorCanvas, SchemaEditorLayout, SchemaEditorPropertiesPanel,
-SchemaEditorSidebar, SchemaEditorStatusBar, SchemaEditorToolbar,
-ToolbarActions
-```
-
-**Total Files Restored: 130**
-
----
-
-## Build Metrics
-
-| Metric | Value |
-|--------|-------|
-| Build Time | 8.81s |
-| Total Bundle Size | 8.9 MB |
-| Main JS Bundle | 1,737 KB (437 KB gzip) |
-| CSS Bundle | 481 KB (81 KB gzip) |
-| Modules Transformed | 9,417 |
-| Component Types Generated | 330+ |
-| TypeScript Errors | 0 |
-| Build-blocking Errors | 0 |
-
----
-
-## Non-Blocking Warnings
-
-### 1. Dynamic/Static Import Conflicts (8 instances)
-```
-(!) /src/config/pages/component-tree.json is dynamically imported 
-    by /src/hooks/use-schema-loader.ts but also statically imported 
-    by /src/components/JSONComponentTreeManager.tsx
-```
-
-**Impact:** None - warnings only, build succeeds
-**Action Needed:** Can be fixed by standardizing import style (dynamic vs static)
-
-### 2. Chunk Size Warnings
-```
-(!) Some chunks are larger than 1000 kB after minification.
-```
-
-**Impact:** Performance advisory only
-**Action Needed:** Optional code-splitting optimization
-
----
-
-## File Changes Summary
-
-### Modified Files (10)
-- `.claude/settings.local.json`
-- `src/components/atoms/index.ts` (updated exports)
-- `src/components/molecules/index.ts` (updated exports, removed 2 orphaned)
-- `src/components/organisms/index.ts` (updated exports)
-- `src/components/index.ts` (updated exports)
-- `src/hooks/index.ts`
-- `src/hooks/use-schema-loader.ts`
-- `src/lib/json-ui/hooks-registry.ts`
-- `src/lib/json-ui/interfaces/index.ts`
-- `src/lib/json-ui/json-components.ts`
-- `src/components/organisms/data-source-manager/DataSourceGroupSection.tsx`
-
-### Restored Files (130)
-- 87 atoms
-- 32 molecules
-- 11 organisms
-
-### Removed From Exports (2)
-- TreeListHeader (non-existent file)
-- TreeCard (non-existent file)
-
----
-
-## Root Cause Analysis
-
-The build failures were caused by a **mismatch between code deletions and dependency updates** in the JSON migration process:
-
-1. **What Happened:** A previous commit deleted 130+ component files as part of migrating from TSX to JSON definitions
-2. **What Broke:** Files that depended on these components were not updated, causing import errors
-3. **Why This Happened:** The deletion was likely automated or incomplete, without verifying all dependent files
-4. **Impact:** Build broke immediately after the deletion
-
----
-
-## Current State
-
-✅ **Build:** Passing with zero errors
-✅ **Components:** All 130+ files restored and properly exported
-✅ **TypeScript:** Zero compilation errors
-✅ **Bundle:** Successfully generated (8.9 MB)
-✅ **Types:** All 330+ component types generated
-
----
-
-## Recommendations
-
-### Immediate (Required)
-1. ✅ All blocking issues resolved
-2. ✅ Build is stable and ready to deploy
-
-### Short-term (1-2 weeks)
-1. Review the JSON migration strategy to ensure proper handling of file deletions
-2. Implement pre-commit checks to catch missing imports
-3. Add integration tests for component dependencies
-4. Fix 2 dynamic/static import conflicts (optional but recommended)
-
-### Medium-term (1-2 months)
-1. Continue JSON migration for the 130 restored components
-2. Implement code splitting to reduce chunk sizes
-3. Add dependency analysis tooling to prevent future issues
-
-### Long-term (Ongoing)
-1. Complete full TSX → JSON migration as planned
-2. Remove all remaining TSX components once JSON equivalents exist
-3. Maintain clean component dependency graph
-
----
-
-## Verification
-
-To verify the build is working:
-
-```bash
-# Run build (should complete successfully)
-npm run build
-
-# Expected output:
-# ✓ [number] modules transformed
-# ✓ built in X.XXs
-
-# Build artifacts should be in ./dist/
-ls -lh dist/
-# Should show: index.html, assets/, icons/, schemas/, manifest.json, etc.
-```
-
----
-
-## Conclusion
-
-The application is now in a stable state with a fully working build. All TypeScript compilation errors have been resolved, and the bundle successfully generates. The application is ready for testing and deployment.
-
-The restoration of 130 component files represents a return to a stable state pending completion of the JSON migration strategy. Future work should focus on completing this migration rather than repeating the deletion cycle.

CLAUDE.md

@@ -287,6 +287,21 @@ npm run components:generate-types
 npm run build
 ```
 
+## CodeQL Migration Helpers (Jan 2026)
+
+Custom query pack lives in `codeql/custom-queries/` with SARIF output at:
+`codeql-db-optimized/diagnostic/migration-queries.sarif`
+
+Latest optimized DB results (source-root `src/`):
+- custom/component-files-with-jsx: 400
+- custom/component-hooks-usage: 98
+- custom/component-custom-hook-usage: 191
+- custom/legacy-component-barrel-imports: 470
+- custom/components-in-migration-target-folders: 21
+- custom/legacy-imports-in-migration-targets: 0
+- custom/imports-json-definitions: 0
+- custom/imports-converted-json-components: 0
+
 ## Key Files
 
 - `json-components-registry.json` - Master registry of all components

MIGRATION_SUMMARY.md

@@ -1,181 +0,0 @@
-# JSON Component Migration - Session Summary
-
-## Status: ✅ COMPLETE (9 Components)
-
-### What Was Done
-
-#### 1. **5 Atoms Successfully Migrated**
-- ✅ Accordion → JSON definition + useAccordion hook
-- ✅ CopyButton → JSON definition + useCopyState hook
-- ✅ FileUpload → JSON definition + useFileUpload hook
-- ✅ FilterInput → JSON definition + useFocusState hook
-- ✅ Image → JSON definition + useImageState hook
-- ✅ Input → Pure JSON (stateless)
-- ✅ PasswordInput → JSON definition + usePasswordVisibility hook
-- ✅ Popover → JSON definition + usePopoverState hook
-
-#### 2. **1 Molecule Successfully Migrated**
-- ✅ BindingEditor → JSON definition + useBindingEditor hook
-
-#### 3. **Key Changes Made**
-1. **BindingEditor Export** (was missing)
-   - Added `BindingEditorProps` import to `src/lib/json-ui/json-components.ts`
-   - Added `bindingEditorDef` JSON import
-   - Created `createJsonComponentWithHooks` export with hook binding
-   - Registered `useBindingEditor` in hooks-registry.ts
-   - Exported hook from `src/hooks/index.ts`
-
-2. **Import Updates** (5 files)
-   - `SearchInput.tsx` → uses Input from json-components
-   - `SearchBar.tsx` → uses Input from json-components
-   - `ComponentBindingDialog.tsx` → uses BindingEditor from json-components
-   - `FormsTab.tsx` → uses Input, CopyButton, FileUpload, PasswordInput
-   - `DisplayTab.tsx` → uses Accordion
-   - `FormControlsSection.tsx` → uses FilterInput
-
-3. **Build Fixes**
-   - Fixed `use-schema-loader.ts` dynamic import (added .json extension)
-   - Fixed `DataSourceGroupSection.tsx` (removed missing DataSourceCard dependency)
-   - Restored and cleaned up component files (130 files recovered)
-
-4. **Cleanup**
-   - Deleted 9 legacy TSX files (atoms + BindingEditor)
-   - Updated component index exports to remove deleted components
-   - Removed orphaned exports from index files
-
-### Architecture Overview
-
-```
-src/components/json-definitions/
-├── accordion.json
-├── copy-button.json
-├── file-upload.json
-├── filter-input.json
-├── image.json
-├── input.json
-├── password-input.json
-├── popover.json
-├── binding-editor.json
-└── ... (13 other JSON definitions)
-
-src/lib/json-ui/
-├── json-components.ts (exports 22 components)
-├── create-json-component.tsx (pure JSON factory)
-├── create-json-component-with-hooks.tsx (stateful factory)
-├── hooks-registry.ts (12 registered hooks)
-└── interfaces/ (TypeScript interfaces for each component)
-
-src/hooks/
-├── use-accordion.ts
-├── use-binding-editor.ts
-├── use-copy-state.ts
-├── use-file-upload.ts
-├── use-focus-state.ts
-├── use-image-state.ts
-├── use-menu-state.ts
-├── use-password-visibility.ts
-├── use-popover-state.ts
-└── ... (40+ other application hooks)
-```
-
-### Build Status: ✅ PASSING
-
-```
-✓ TypeScript compilation: OK (0 errors)
-✓ Vite build: OK
-✓ Modules transformed: 9,408
-✓ Build time: 9.22 seconds
-✓ Production bundle: Generated successfully
-```
-
-**Non-blocking warnings:** 8 dynamic/static import conflicts (do not prevent build)
-
-### Statistics
-
-| Metric | Value |
-|--------|-------|
-| JSON Components Created | 22 |
-| JSON Definitions | 22 |
-| Registered Hooks | 12 |
-| TSX Files Deleted | 9 |
-| Components with JSON+Hooks | 15 |
-| Pure JSON Components | 8 |
-| Registry Entries | 342 |
-| Build Status | ✅ PASSING |
-
-### What Remains
-
-#### Documented in CLAUDE.md
-- 3 Organisms still TSX: DataSourceManager, NavigationMenu, TreeListPanel
-- These should be converted following the same pattern
-
-#### Beyond Scope (120+ additional components)
-- Many TSX files were restored during build fixes
-- These have JSON equivalents in `src/config/pages/` but aren't yet exported
-- Should be migrated in future phases using the same process
-
-### Key Learnings
-
-1. **Pure JSON vs JSON+Hooks Pattern:**
-   - Stateless components: `createJsonComponent(jsonDef)`
-   - Stateful components: `createJsonComponentWithHooks(jsonDef, { hooks: {...} })`
-   - No wrapper files needed—hooks are registered centrally
-
-2. **Export Strategy:**
-   - All JSON components exported from `src/lib/json-ui/json-components.ts`
-   - Consistent import path: `import { Component } from '@/lib/json-ui/json-components'`
-   - Replaces scattered imports from `src/components/`
-
-3. **Hook Registration:**
-   - Hooks live in `src/hooks/` directory
-   - Registered in `src/lib/json-ui/hooks-registry.ts`
-   - Exported from `src/hooks/index.ts`
-
-### Next Steps
-
-1. **Immediate** (if continuing migration):
-   - Convert 3 remaining organisms (DataSourceManager, NavigationMenu, TreeListPanel)
-   - Follow same pattern: JSON def + hook (if needed) + export + delete TSX
-
-2. **Medium-term** (optional):
-   - Clean up 120+ additional components that have JSON but aren't exported
-   - Address 6 orphaned JSON definitions in registry
-   - Fix 7 broken load paths in registry
-
-3. **Testing** (recommended):
-   - Run test suite to verify components work as expected
-   - Test pages that use these components
-   - Verify no runtime issues with JSON rendering
-
-### Files Changed This Session
-
-**Created:**
-- BUILD_REPORT.md (build analysis documentation)
-- build-output.txt (build logs)
-
-**Modified (code):**
-- src/lib/json-ui/json-components.ts (+BindingEditor export)
-- src/lib/json-ui/hooks-registry.ts (+useBindingEditor registration)
-- src/hooks/index.ts (+useBindingEditor export)
-- src/lib/json-ui/interfaces/index.ts (+BindingEditorProps export)
-- src/hooks/use-schema-loader.ts (fixed dynamic import)
-- src/components/organisms/data-source-manager/DataSourceGroupSection.tsx (removed DataSourceCard)
-- 5 components with import updates
-
-**Deleted:**
-- src/components/atoms/Accordion.tsx
-- src/components/atoms/CopyButton.tsx
-- src/components/atoms/FileUpload.tsx
-- src/components/atoms/FilterInput.tsx
-- src/components/atoms/Image.tsx
-- src/components/atoms/Input.tsx
-- src/components/atoms/PasswordInput.tsx
-- src/components/atoms/Popover.tsx
-- src/components/molecules/BindingEditor.tsx
-
-**Updated (exports):**
-- src/components/atoms/index.ts (removed 8 exports)
-- src/components/molecules/index.ts (removed 1 export)
-
-### Commit Hash
-`f05f896` - "feat: Complete JSON component migration for 9 components (atoms + BindingEditor)"

REMAINING_MIGRATION_STRATEGY.md

@@ -1,237 +0,0 @@
-# Complete Migration Strategy - Remaining Work
-
-## The Goal
-**End state: Only `src/main.tsx` and `src/index.html` as TSX/HTML**
-- Everything else in `src/components/` → JSON + custom hooks
-
-## Current Reality (After Today's Work)
-
-```
-Completed: 9 components (8 atoms + 1 molecule)
-├── Accordion, CopyButton, FileUpload, FilterInput, Image, Input, PasswordInput, Popover (atoms)
-└── BindingEditor (molecule)
-
-Remaining: ~220 TSX files (excluding main.tsx and demo/showcase pages)
-├── 3 organisms: DataSourceManager, NavigationMenu, TreeListPanel
-├── 110+ atoms: ActionButton, ActionCard, Alert, Button, Card, etc.
-├── 35+ molecules: AppBranding, ComponentTree, PropertyEditor, etc.
-├── 7 app bootstrap components: AppBootstrap, AppLayout, etc.
-└── 55+ demo/showcase pages
-```
-
-## Priority Tiers
-
-### Tier 1: Core App Bootstrap (7 files - High Impact)
-**These are used by every page. Converting them unblocks everything.**
-
-1. `src/components/app/AppBootstrap.tsx`
-   - Uses: `useAppBootstrap` hook
-   - Action: Create JSON, register hook, export, delete TSX
-   
-2. `src/components/app/AppLayout.tsx`
-   - Action: Same pattern
-   
-3. `src/components/app/LoadingScreen.tsx`
-   - Likely stateless UI component
-   - Action: Convert to pure JSON
-   
-4. `src/components/app/AppDialogs.tsx`
-   - Action: Assess and migrate
-   
-5. `src/components/app/AppMainPanel.tsx`
-   - Action: Assess and migrate
-   
-6. `src/components/app/AppRouterBootstrap.tsx`
-   - Router mode variant of bootstrap
-   
-7. `src/components/app/AppRouterLayout.tsx`
-   - Router mode variant of layout
-
-**Impact:** Converting these 7 components would eliminate the need for TSX anywhere in the bootstrap flow
-
-### Tier 2: 3 Documented Organisms (3 files - Medium Impact)
-**Mentioned in CLAUDE.md as remaining work**
-
-1. `src/components/organisms/DataSourceManager.tsx`
-2. `src/components/organisms/NavigationMenu.tsx`
-3. `src/components/organisms/TreeListPanel.tsx`
-
-**Impact:** Completes the documented migration targets
-
-### Tier 3: Core UI Atoms & Molecules (150+ files - Large Scale)
-**The bulk of component library**
-
-**Atoms** (~110 files):
-- ActionButton, ActionCard, Alert, Avatar, Badge, Breadcrumb, Button, Calendar, Card, Checkbox, CommandPalette, DatePicker, Dialog, Divider, Drawer, EmptyState, FileIcon, Form, Grid, Heading, HoverCard, Input, Kbd, Label, Link, List, Menu, Modal, NumberInput, PasswordInput, Popover, ProgressBar, Radio, RangeSlider, Rating, ScrollArea, SearchInput, Select, Separator, Skeleton, Slider, Stack, Switch, Table, Tabs, Tag, Text, TextArea, Toggle, Tooltip, TreeIcon, etc.
-
-**Molecules** (~35 files):
-- AppBranding, CanvasRenderer, ComponentTree, ComponentPalette, PropertyEditor, SearchBar, ToolbarButton, TreeFormDialog, etc.
-
-**Current strategy:** These have JSON definitions in `src/config/pages/` but aren't yet exported from `json-components.ts`. Need to:
-1. Create JSON definitions in `src/components/json-definitions/` (if not already there)
-2. Create TypeScript interfaces
-3. Register hooks (if stateful)
-4. Export from `json-components.ts`
-5. Delete TSX files
-
-### Tier 4: Demo/Showcase Pages (55+ files - No Impact on App)
-**These are development/demo utilities**
-
-Examples:
-- AtomicComponentShowcase.tsx
-- JSONConversionShowcase.tsx
-- DashboardDemoPage.tsx
-- DataBindingDesigner.tsx
-- JSONFlaskDesigner.tsx
-- etc.
-
-**Decision:** These are optional. Could be:
-- Converted to JSON (least effort)
-- Deleted if not needed
-- Left as-is if they're development tools
-
-## Recommended Execution Order
-
-### Phase 1: Bootstrap (Highest ROI)
-1. **AppBootstrap** → JSON + useAppBootstrap hook
-2. **AppLayout** → JSON + appropriate hooks
-3. **LoadingScreen** → Pure JSON
-4. Repeat for other 4 app components
-
-**Why first:** These are on the critical path. Every app render goes through them. Converting them proves the architecture works for complex components.
-
-**Expected time:** 2-3 hours
-
-### Phase 2: Documented Organisms
-1. **DataSourceManager** → JSON + hooks
-2. **NavigationMenu** → JSON + hooks  
-3. **TreeListPanel** → JSON + hooks
-
-**Why next:** Completes the documented migration targets from CLAUDE.md
-
-**Expected time:** 2-3 hours
-
-### Phase 3: Core Component Library (If Time/Priority)
-**Option A: Batch similar components**
-- All simple buttons/links as one batch
-- All inputs as one batch
-- All containers/layouts as one batch
-
-**Option B: Focus on most-used**
-- Button, Input, Card, Dialog, Menu → highest impact
-- Others as needed
-
-**Expected time:** 8-20 hours (depending on thoroughness)
-
-### Phase 4: Demo Pages (Nice-to-have)
-Convert or delete as appropriate. Low priority.
-
-## Pattern to Follow (Proven)
-
-For each component:
-
-```bash
-# 1. Create/verify JSON definition
-src/components/json-definitions/[component].json
-
-# 2. Create/verify TypeScript interface  
-src/lib/json-ui/interfaces/[component].ts
-
-# 3. If stateful, create custom hook
-src/hooks/use-[component].ts
-# Then register in hooks-registry.ts
-# Then export from hooks/index.ts
-
-# 4. Export from json-components.ts
-export const ComponentName = createJsonComponent[WithHooks]<Props>(def, ...)
-
-# 5. Update registry entry
-json-components-registry.json
-
-# 6. Delete legacy TSX
-rm src/components/[category]/[ComponentName].tsx
-
-# 7. Update index.ts exports
-src/components/[category]/index.ts
-
-# 8. Update all imports across codebase
-# From: import { X } from '@/components/...'
-# To: import { X } from '@/lib/json-ui/json-components'
-
-# 9. Verify build passes
-npm run build
-```
-
-## Parallel Work Opportunities
-
-**Can work on simultaneously:**
-- AppBootstrap + AppLayout (independent)
-- DataSourceManager + NavigationMenu (independent)
-- Multiple atoms in parallel (Button, Input, Card, Dialog don't depend on each other)
-
-**Must sequence:**
-- ChildComponent → ParentComponent (parent depends on child)
-- Example: Button must be JSON before ButtonGroup
-
-## Success Metrics
-
-**Current State:**
-- 22 JSON components exported
-- 230 TSX files remaining
-- Build passes ✅
-
-**Phase 1 Success:**
-- 29+ JSON components (added 7 app bootstrap)
-- 223 TSX files remaining
-- Build passes ✅
-
-**Phase 2 Success:**
-- 32+ JSON components (added 3 organisms)
-- 220 TSX files remaining
-- Build passes ✅
-
-**Phase 3 Success (Core Library):**
-- 150+ JSON components
-- 75 TSX files remaining (mostly demo pages)
-- Build passes ✅
-
-**Final State (Full Migration):**
-- 200+ JSON components
-- 2 TSX files (main.tsx + ErrorFallback.tsx as optional)
-- 1 HTML file (index.html)
-- Build passes ✅
-
-## Key Advantages Once Complete
-
-1. **No component duplication** - Single source of truth (JSON)
-2. **Easier maintenance** - All components follow same pattern
-3. **Better code reuse** - Hooks shared across components
-4. **Smaller bundle** - JSON more compressible than TSX
-5. **Faster iteration** - Change JSON, no rebuild needed (with hot reload)
-6. **Better tooling** - Can build JSON editing UI without code knowledge
-
-## Risks & Mitigation
-
-| Risk | Mitigation |
-|------|-----------|
-| Breaking changes | Run tests frequently, commit after each component |
-| Performance regression | Monitor bundle size, hook performance |
-| Import path issues | Use find-replace to update all imports systematically |
-| Circular dependencies | Review `src/lib/json-ui/` structure before major changes |
-| Hook registration errors | Test each hook in hooks-registry before moving to next |
-
-## Next Immediate Steps
-
-1. **Run audit** to get baseline
-   ```bash
-   npm run audit:json
-   ```
-
-2. **Pick one app bootstrap component** (e.g., LoadingScreen - simplest)
-
-3. **Follow the pattern** from today's work with Accordion/BindingEditor
-
-4. **Commit after each component** with clear message
-
-5. **Run tests** to catch regressions
-

SESSION_COMPLETE.md

@@ -1,165 +0,0 @@
-# JSON Migration Session Complete ✅
-
-## What Was Accomplished
-
-### 1. **Completed 9 Component Migrations** ✅
-- 8 atoms: Accordion, CopyButton, FileUpload, FilterInput, Image, Input, PasswordInput, Popover
-- 1 molecule: BindingEditor
-
-**Process:**
-- All had JSON definitions pre-created
-- All had custom hooks ready
-- Needed: Export from json-components.ts + hook registration + delete TSX files
-- Result: 9 components now available exclusively through `@/lib/json-ui/json-components`
-
-### 2. **Fixed Critical Build Issues** ✅
-- Fixed `use-schema-loader.ts` dynamic import (JSON extension)
-- Fixed `DataSourceGroupSection.tsx` (removed missing dependency)
-- Recovered 130 files from git history
-- Restored and cleaned component exports
-- **Build now passes with 0 errors**
-
-### 3. **Established Proven Migration Pattern** ✅
-Pattern applied successfully to 9 components, ready to scale:
-
-```
-1. JSON definition (in src/components/json-definitions/)
-2. TypeScript interface (in src/lib/json-ui/interfaces/)
-3. Custom hook (if stateful, in src/hooks/)
-4. Hook registration (in src/lib/json-ui/hooks-registry.ts)
-5. Export from json-components.ts
-6. Delete legacy TSX file
-7. Update component index exports
-8. Update all imports across codebase
-9. Run build to verify
-```
-
-### 4. **Created Comprehensive Migration Strategy** ✅
-Strategy document outlines:
-- **Clear goal:** Only `src/main.tsx` + `src/index.html` remain as non-JSON
-- **4 priority tiers** with ROI analysis:
-  - Tier 1: 7 app bootstrap components (highest ROI)
-  - Tier 2: 3 organisms (documented in CLAUDE.md)
-  - Tier 3: 150+ core atoms/molecules
-  - Tier 4: 55+ demo/showcase pages
-- **Execution plan** with parallel opportunities
-- **Success metrics** showing progress milestones
-
-## Current State
-
-```
-Build Status:           ✅ PASSING (0 errors)
-JSON Components:        22 (up from 12)
-TSX Files Remaining:    230 (from 420 originally)
-Deleted This Session:   9 legacy TSX files
-Files with JSON+Hooks:  15 components
-Pure JSON Components:   8 components (no hooks)
-Registry Entries:       342 components
-
-Recent Commits:
-- 9aa3e96: Migration strategy document
-- cf426ef: Migration summary for 9 components
-- f05f896: Complete JSON migration for 9 components
-```
-
-## Architecture Proven
-
-The architecture can handle:
-- ✅ Pure stateless components (JSON only)
-- ✅ Stateful components (JSON + hooks)
-- ✅ Components with complex rendering logic (via custom hooks)
-- ✅ Hooks that manage state, side effects, and callbacks
-- ✅ Components that render other components (via JSON composition)
-
-**Key insight:** Custom hooks can express ANY TSX logic in JSON form.
-
-## What Remains
-
-### Immediate Next Steps (If Continuing)
-1. Run audit: `npm run audit:json`
-2. Pick Tier 1 component (e.g., `LoadingScreen` - simplest)
-3. Apply proven pattern from today's work
-4. Commit and verify build
-5. Repeat for next component
-
-### Expected Timeline
-- **Phase 1 (Tier 1 - 7 app bootstrap):** 2-3 hours
-- **Phase 2 (Tier 2 - 3 organisms):** 2-3 hours
-- **Phase 3 (Tier 3 - 150+ core components):** 8-20 hours (batch work)
-- **Phase 4 (Tier 4 - demo pages):** 2-5 hours (optional)
-
-**Total to completion:** 14-31 hours (distributed across multiple sessions)
-
-### Scale Strategy
-- Can work on multiple components in parallel (independent commits)
-- Recommend batching similar components (all buttons, all inputs, etc.)
-- Tests should run between batches to catch regressions
-
-## Documentation Created
-
-1. **MIGRATION_SUMMARY.md** - Today's completed work
-   - What was done, key changes, build status, statistics
-   
-2. **REMAINING_MIGRATION_STRATEGY.md** - Full roadmap
-   - 4 priority tiers with ROI analysis
-   - Proven pattern to follow
-   - Parallel work opportunities
-   - Success metrics
-   - Risk mitigation
-
-3. **This document** - Session overview
-
-## Commits This Session
-
-```
-9aa3e96 docs: Add comprehensive migration strategy for remaining 220 TSX files
-cf426ef docs: Add migration summary for 9 completed components
-f05f896 feat: Complete JSON component migration for 9 components (atoms + BindingEditor)
-```
-
-## Key Files to Reference
-
-- `CLAUDE.md` - Architecture docs (read again with new understanding)
-- `REMAINING_MIGRATION_STRATEGY.md` - Execution roadmap
-- `src/lib/json-ui/json-components.ts` - Where components are exported (22 now)
-- `json-components-registry.json` - Component metadata (342 entries)
-- `src/hooks/` - Custom hook implementations (50+ hooks available)
-
-## Verification Commands
-
-```bash
-# See current audit status
-npm run audit:json
-
-# Build to verify no errors
-npm run build
-
-# List all JSON definitions
-ls src/components/json-definitions/*.json | wc -l
-
-# Check how many components are exported
-grep "export const" src/lib/json-ui/json-components.ts | wc -l
-
-# See registered hooks
-cat src/lib/json-ui/hooks-registry.ts
-```
-
-## Moving Forward
-
-The migration is **systematic, repeatable, and scalable**. Each component follows the same pattern. The architecture is proven to work for both simple and complex components through the use of custom hooks.
-
-**Recommended approach for next session:**
-1. Start with Tier 1 app bootstrap components (highest ROI)
-2. Use the pattern from today's work
-3. Commit after each component
-4. Run build to verify
-5. Document progress in MIGRATION_SUMMARY.md
-
-The end goal is clear: **Only `main.tsx` and `index.html` remain, everything else is JSON + hooks.**
-
----
-
-**Session completed:** January 21, 2026  
-**Branch:** festive-mestorf  
-**Build status:** ✅ PASSING  
-**Ready for:** Next migration phase or deployment

build-output.txt

@@ -1,26 +0,0 @@
-
-> spark-template@0.0.0 prebuild
-> npm run components:generate-types && mkdir -p /tmp/dist || true
-
-
-> spark-template@0.0.0 components:generate-types
-> tsx scripts/generate-json-ui-component-types.ts
-
-✅ Wrote 330 component types to /Users/rmac/Documents/GitHub/low-code-react-app-b/src/types/json-ui-component-types.ts
-
-> spark-template@0.0.0 build
-> tsc -b --noCheck && vite build
-
-vite v7.3.1 building client environment for production...
-<script src="/runtime-config.js"> in "/index.html" can't be bundled without type="module" attribute
-transforming...
-✓ 7152 modules transformed.
-✗ Build failed in 1.85s
-error during build:
-[vite:load-fallback] Could not load /Users/rmac/Documents/GitHub/low-code-react-app-b/src/components/molecules/EditorToolbar (imported by src/components/CodeEditor.tsx): ENOENT: no such file or directory, open '/Users/rmac/Documents/GitHub/low-code-react-app-b/src/components/molecules/EditorToolbar'
-    at async open (node:internal/fs/promises:637:25)
-    at async Object.readFile (node:internal/fs/promises:1269:14)
-    at async Object.handler (file:///Users/rmac/Documents/GitHub/low-code-react-app-b/node_modules/vite/dist/node/chunks/config.js:33169:21)
-    at async PluginDriver.hookFirstAndGetPlugin (file:///Users/rmac/Documents/GitHub/low-code-react-app-b/node_modules/rollup/dist/es/shared/node-entry.js:22333:28)
-    at async file:///Users/rmac/Documents/GitHub/low-code-react-app-b/node_modules/rollup/dist/es/shared/node-entry.js:21333:33
-    at async Queue.work (file:///Users/rmac/Documents/GitHub/low-code-react-app-b/node_modules/rollup/dist/es/shared/node-entry.js:22561:32)

codeql-db-optimized/codeql-database.yml

@@ -0,0 +1,13 @@
+---
+sourceLocationPrefix: /Users/rmac/.claude-worktrees/low-code-react-app-b/distracted-hawking/src
+baselineLinesOfCode: 43449
+unicodeNewlines: true
+columnKind: utf16
+primaryLanguage: javascript
+creationMetadata:
+  cliVersion: 2.23.9
+  creationTime: 2026-01-19T09:16:15.632234Z
+buildMode: none
+finalised: true
+overlayBaseDatabase: false
+overlayDatabase: false