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.

feat: Add JSON definitions for menu, password input, and popover comp…

.claude/settings.local.json

@@ -3,7 +3,52 @@
     "allow": [
       "Bash(ls:*)",
       "Bash(find:*)",
-      "Bash(grep:*)"
+      "Bash(grep:*)",
+      "Bash(wc:*)",
+      "Bash(for file in accordion alert aspect-ratio avatar badge button card checkbox collapsible dialog hover-card input label popover progress radio-group resizable scroll-area separator skeleton sheet switch tabs textarea toggle tooltip)",
+      "Bash(do)",
+      "Bash([ -f \"src/config/pages/ui/$file.json\" ])",
+      "Bash(echo:*)",
+      "Bash(done)",
+      "Bash(for file in data-source-card editor-toolbar empty-editor-state monaco-editor-panel search-bar)",
+      "Bash([ -f \"src/config/pages/molecules/$file.json\" ])",
+      "Bash(for file in empty-canvas-state page-header schema-editor-canvas schema-editor-properties-panel schema-editor-sidebar schema-editor-status-bar schema-editor-toolbar toolbar-actions)",
+      "Bash([ -f \"src/config/pages/organisms/$file.json\" ])",
+      "Bash([ -f \"src/config/pages/atoms/input.json\" ])",
+      "Bash(npm run tsx:*)",
+      "Bash(npx tsx:*)",
+      "Bash(npm run test:e2e:*)",
+      "Bash(npx playwright:*)",
+      "Bash(timeout 15 npm run dev:*)",
+      "Bash(netstat:*)",
+      "Bash(findstr:*)",
+      "Bash(taskkill:*)",
+      "Bash(xargs:*)",
+      "Bash(npm run build:*)",
+      "Bash(npm install)",
+      "Bash(for file in ComponentBindingDialog.tsx DataSourceEditorDialog.tsx GitHubBuildStatus.tsx SaveIndicator.tsx ComponentTree.tsx SeedDataManager.tsx LazyD3BarChart.tsx StorageSettings.tsx)",
+      "Bash(do if [ -f \"$file\" ])",
+      "Bash(then echo \"EXISTS: $file\")",
+      "Bash(fi)",
+      "Bash(npm install:*)",
+      "Bash(for file in AppBranding BindingEditor Breadcrumb CanvasRenderer CodeExplanationDialog ComponentPalette)",
+      "Bash(do echo -n \"$file: \")",
+      "Bash(tsx scripts/audit-json-components.ts:*)",
+      "Bash(npm run audit:json:*)",
+      "Bash(bash:*)",
+      "Bash(git restore:*)",
+      "Bash(tree:*)",
+      "Bash(powershell:*)",
+      "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

CLAUDE.md

@@ -0,0 +1,362 @@
+# Claude Code Documentation
+
+## Architecture Overview
+
+This is a low-code React application builder that is migrating from TypeScript/TSX components to a JSON-driven architecture.
+
+### Current State (Jan 2026)
+
+- **~420 TSX files** in `src/components/` (legacy - being phased out)
+- **338 JSON definitions** in `src/config/pages/` (target architecture)
+- **342 entries** in `json-components-registry.json`
+- **19 complete JSON implementations** in `src/components/json-definitions/`
+- **141 duplicate TSX files deleted** (had JSON equivalents)
+- **5 atoms remaining** to convert: Accordion, FileUpload, Image, Menu, Popover
+- **1 molecule remaining**: BindingEditor
+- **3 organisms remaining**: DataSourceManager, NavigationMenu, TreeListPanel
+
+## Migration Strategy
+
+### Core Principle
+
+**ALL components can be converted to JSON except the application entrypoint**, because custom hooks can handle any stateful/complex logic.
+
+### Directory Structure
+
+```
+src/
+├── components/              # 🔴 LEGACY - Phase out
+│   ├── atoms/              # Basic UI components (6 TSX remaining)
+│   │   ├── json-ui/        # JSON-specific atoms
+│   │   ├── Accordion.tsx
+│   │   ├── FileUpload.tsx
+│   │   ├── Image.tsx
+│   │   ├── Menu.tsx
+│   │   └── Popover.tsx
+│   ├── molecules/          # Composite components (1 TSX remaining)
+│   │   └── BindingEditor.tsx
+│   ├── organisms/          # Complex feature components (3 TSX remaining)
+│   │   ├── DataSourceManager.tsx
+│   │   ├── NavigationMenu.tsx
+│   │   └── TreeListPanel.tsx
+│   └── json-definitions/   # ✅ JSON implementations (19 files)
+│       ├── loading-fallback.json
+│       ├── navigation-item.json
+│       ├── page-header-content.json
+│       ├── component-binding-dialog.json
+│       ├── data-source-editor-dialog.json
+│       ├── github-build-status.json
+│       ├── save-indicator.json
+│       ├── component-tree.json
+│       ├── seed-data-manager.json
+│       ├── lazy-d3-bar-chart.json
+│       ├── storage-settings.json
+│       ├── tree-card.json
+│       ├── filter-input.json
+│       ├── copy-button.json
+│       ├── input.json
+│       └── password-input.json
+│
+├── config/
+│   ├── pages/              # ✅ TARGET - JSON definitions (338 files)
+│   │   ├── atoms/          # JSON schema for atoms
+│   │   ├── molecules/      # JSON schema for molecules
+│   │   ├── organisms/      # JSON schema for organisms
+│   │   ├── templates/      # Page templates
+│   │   └── *.json          # Page definitions
+│   └── pages.json          # Central routing manifest
+│
+├── hooks/                  # ✅ Custom hooks for JSON components
+│   ├── use-save-indicator.ts
+│   ├── use-component-tree.ts
+│   ├── use-storage-backend-info.ts
+│   ├── use-d3-bar-chart.ts
+│   ├── use-focus-state.ts      # NEW: For FilterInput
+│   ├── use-copy-state.ts       # NEW: For CopyButton
+│   ├── use-password-visibility.ts  # NEW: For PasswordInput
+│   └── index.ts
+│
+├── lib/
+│   └── json-ui/
+│       ├── component-registry.ts         # Component resolver
+│       ├── component-renderer.tsx        # JSON → React renderer
+│       ├── json-components.ts            # JSON component exports (27 components)
+│       ├── create-json-component.tsx     # Pure JSON component factory
+│       ├── create-json-component-with-hooks.tsx  # JSON + hooks factory
+│       ├── hooks.ts                      # Data source/action hooks
+│       ├── hooks-registry.ts             # Hook registration (12 hooks registered)
+│       ├── constants/                    # Shared constants for JSON transforms
+│       │   ├── sizes.ts                  # Button sizes, icon sizes, dimensions
+│       │   ├── placements.ts             # Popover/tooltip positioning
+│       │   ├── styles.ts                 # Common CSS classes (transitions, animations, etc.)
+│       │   ├── object-fit.ts             # Image object-fit classes
+│       │   └── index.ts
+│       └── interfaces/                   # TypeScript interfaces (1 per file)
+│           ├── loading-fallback.ts
+│           ├── navigation-item.ts
+│           ├── page-header-content.ts
+│           ├── save-indicator.ts
+│           ├── lazy-bar-chart.ts
+│           ├── lazy-line-chart.ts
+│           ├── lazy-d3-bar-chart.ts
+│           ├── seed-data-manager.ts
+│           ├── storage-settings.ts
+│           ├── github-build-status.ts
+│           ├── component-binding-dialog.ts
+│           ├── data-source-editor-dialog.ts
+│           ├── component-tree.ts
+│           ├── tree-card.ts
+│           ├── filter-input.ts
+│           ├── copy-button.ts
+│           ├── input.ts
+│           ├── password-input.ts
+│           ├── image.ts
+│           ├── popover.ts
+│           ├── menu.ts
+│           ├── file-upload.ts
+│           ├── accordion.ts
+│           └── index.ts
+│
+├── scripts/                # Migration and audit tools
+│   ├── audit-json-components.ts
+│   ├── analyze-duplicates.ts
+│   ├── cleanup-registry.ts
+│   └── fix-index-files.ts
+│
+└── json-components-registry.json   # Master component registry
+```
+
+## How It Works
+
+### 1. Routing Flow
+
+```
+pages.json → json-components-registry.json → Component Implementation
+```
+
+**Example:**
+```json
+// pages.json
+{
+  "id": "dashboard",
+  "component": "ProjectDashboard"
+}
+
+// json-components-registry.json
+{
+  "type": "ProjectDashboard",
+  "source": "organisms",
+  "load": {
+    "path": "@/components/ProjectDashboard",
+    "export": "ProjectDashboard"
+  }
+}
+```
+
+### 2. Component Types
+
+#### Pure JSON Components (No Hooks)
+Simple stateless components defined entirely in JSON:
+
+```json
+// src/components/json-definitions/tree-card.json
+{
+  "id": "tree-card-container",
+  "type": "Card",
+  "bindings": {
+    "className": {
+      "source": "isSelected",
+      "transform": "data ? 'ring-2 ring-primary' : 'hover:bg-accent/50'"
+    }
+  },
+  "children": [...]
+}
+```
+
+Exported from `src/lib/json-ui/json-components.ts`:
+```typescript
+import treeCardDef from '@/components/json-definitions/tree-card.json'
+export const TreeCard = createJsonComponent<TreeCardProps>(treeCardDef)
+```
+
+#### JSON Components with Hooks
+Stateful components using custom hooks (**NO WRAPPER FILES NEEDED**):
+
+```typescript
+// src/lib/json-ui/json-components.ts
+export const ComponentTree = createJsonComponentWithHooks<ComponentTreeProps>(
+  componentTreeDef,
+  {
+    hooks: {
+      treeData: {
+        hookName: 'useComponentTree',
+        args: (props) => [props.components || [], props.selectedId || null]
+      }
+    }
+  }
+)
+```
+
+The custom hook is defined in `src/hooks/use-component-tree.ts` (or other hook files) and registered in `src/lib/json-ui/hooks-registry.ts`.
+
+#### TSX Components (Legacy)
+Currently imported directly - these need migration:
+
+```typescript
+// ❌ OLD: Direct TSX import
+import { AppBranding } from '@/components/molecules/AppBranding'
+
+// ✅ NEW: JSON-based import
+import { AppBranding } from '@/lib/json-ui/json-components'
+```
+
+### 3. Registry System
+
+The `json-components-registry.json` defines how components are loaded:
+
+```json
+{
+  "type": "SaveIndicator",
+  "source": "molecules",
+  "jsonCompatible": true
+}
+```
+
+- **jsonCompatible**: Whether component can be expressed as JSON
+- **load.path**: Explicit path to component file (for TSX legacy components)
+- **source**: Where the component comes from (atoms, molecules, organisms, ui)
+
+**Note:** `wrapperRequired` and `wrapperComponent` fields in the registry are **obsolete** and should be removed. All stateful logic is handled via `createJsonComponentWithHooks`.
+
+## Current Issues (Jan 2026)
+
+### Audit Results
+
+Run `npm run audit:json` to see current status:
+
+- ❌ **Errors**
+  - 6 orphaned JSON files (no registry entry)
+  - 7 broken load paths
+
+- ⚠️ **153 warnings**
+  - 153 duplicate implementations (TSX + JSON)
+
+### Critical Tasks
+
+1. **Phase Out `src/components/`**
+   - 153 components have both TSX and JSON definitions
+   - TSX versions should be deleted and routed through JSON
+
+2. **Clean Up Registry**
+   - Remove `wrapperRequired` and `wrapperComponent` fields (obsolete)
+   - All stateful logic is handled via `createJsonComponentWithHooks`
+   - Custom hooks defined in `src/lib/json-ui/hooks.ts`
+
+3. **Fix Registry Issues**
+   - Add missing registry entries for orphaned JSON
+   - Fix broken load paths
+   - Verify all source mappings
+
+## Migration Checklist
+
+For each component:
+
+- [ ] Create JSON definition in `src/components/json-definitions/`
+- [ ] Add TypeScript interface in `src/lib/json-ui/interfaces/` (one file per interface)
+- [ ] If stateful: Define custom hook in `src/hooks/use-[component-name].ts`
+- [ ] If stateful: Register hook in `src/lib/json-ui/hooks-registry.ts`
+- [ ] If stateful: Export hook from `src/hooks/index.ts`
+- [ ] Export from `src/lib/json-ui/json-components.ts`:
+  - Use `createJsonComponent` for pure/stateless
+  - Use `createJsonComponentWithHooks` for stateful
+- [ ] Update registry in `json-components-registry.json`
+- [ ] Update all imports to use `@/lib/json-ui/json-components`
+- [ ] Delete legacy TSX file from `src/components/`
+- [ ] Run tests and build to verify
+
+## Useful Commands
+
+```bash
+# Run audit to check migration status
+npm run audit:json
+
+# Generate component types
+npm run components:generate-types
+
+# Build (will fail if components missing)
+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
+- `src/config/pages.json` - Page routing configuration
+- `src/lib/json-ui/component-registry.ts` - Component resolver logic
+- `src/lib/json-ui/json-components.ts` - JSON component exports
+- `src/lib/json-ui/hooks.ts` - Custom hooks for stateful components
+- `src/lib/json-ui/hooks-registry.ts` - Hook registration
+- `scripts/audit-json-components.ts` - Audit tool
+
+## Notes
+
+- **Never create new TSX components** - use JSON instead
+- **All components can be JSON** except the app entrypoint
+- **Use custom hooks** for stateful logic (via `createJsonComponentWithHooks`)
+- **NO wrapper files needed** - hooks are defined in `hooks.ts` and registered in `hooks-registry.ts`
+- **One interface per file** in `src/lib/json-ui/interfaces/`
+- **Meta JSON files** in `src/config/pages/` are routing schemas
+- **Full JSON definitions** live in `src/components/json-definitions/`
+
+## Recent Changes (Jan 2026)
+
+### Phase 1: Setup & Cleanup
+- ✅ Fixed e2e build failures (TreeCard, TreeListHeader routing)
+- ✅ Removed 8 initial duplicate TSX files with JSON equivalents
+- ✅ Split wrapper-interfaces.ts into individual interface files
+- ✅ Created audit script to track migration progress
+- ✅ Updated imports to use `@/lib/json-ui/json-components`
+- ✅ Clarified: NO wrapper system - use JSON + custom hooks
+
+### Phase 2: Mass Cleanup
+- ✅ Cleaned registry - removed 107 obsolete `wrapperRequired`/`wrapperComponent` fields
+- ✅ Analyzed 153 duplicates, categorized safe deletions
+- ✅ Deleted 141 duplicate TSX files (had complete JSON implementations)
+- ✅ Created fix-index-files.ts script to auto-update exports
+
+### Phase 3: Active Conversions (In Progress)
+- ✅ Converted FilterInput to JSON with useFocusState hook
+- ✅ Converted CopyButton to JSON with useCopyState hook
+- ✅ Converted Input to JSON (pure component with forwardRef support)
+- ✅ Converted PasswordInput to JSON with usePasswordVisibility hook
+- ✅ Moved custom hooks from `lib/json-ui/hooks.ts` to `src/hooks/` directory
+- ✅ Created use-focus-state.ts, use-copy-state.ts, and use-password-visibility.ts
+- ✅ Updated hooks-registry.ts to include 7 registered hooks
+
+### Remaining Work
+- 🔄 5 atoms left: Accordion, FileUpload, Image, Menu, Popover
+- 🔄 1 molecule left: BindingEditor
+- 🔄 3 organisms left: DataSourceManager, NavigationMenu, TreeListPanel
+- ✅ 20 JSON components complete (up from 12)
+
+## Next Steps
+
+1. Clean up registry - remove `wrapperRequired` and `wrapperComponent` fields
+2. Convert the 153 duplicate TSX components to JSON-only
+3. Fix 6 orphaned JSON files (add registry entries)
+4. Fix 7 broken load paths in registry
+5. Complete full migration of `src/components/` to JSON

CLAUDE_UPDATE.md

@@ -0,0 +1,59 @@
+# Update for Current State section (lines 8-15)
+
+- **~400 TSX files** in `src/components/` (legacy - being phased out)
+- **338 JSON definitions** in `src/config/pages/` (target architecture)
+- **342 entries** in `json-components-registry.json`
+- **27 complete JSON implementations** in `src/components/json-definitions/`
+- **141 duplicate TSX files deleted** (had JSON equivalents)
+- **✅ ALL ATOMS CONVERTED!** (0 remaining)
+- **1 molecule remaining**: BindingEditor
+- **3 organisms remaining**: DataSourceManager, NavigationMenu, TreeListPanel
+
+# Update for atoms section (lines 28-34)
+
+│   ├── atoms/              # ✅ ALL CONVERTED! (0 TSX remaining)
+│   │   └── json-ui/        # JSON-specific atoms
+
+# Update for json-definitions (lines 41-57)
+
+│   └── json-definitions/   # ✅ JSON implementations (27 files)
+│       ├── loading-fallback.json
+│       ├── navigation-item.json
+│       ├── page-header-content.json
+│       ├── component-binding-dialog.json
+│       ├── data-source-editor-dialog.json
+│       ├── github-build-status.json
+│       ├── save-indicator.json
+│       ├── component-tree.json
+│       ├── seed-data-manager.json
+│       ├── lazy-d3-bar-chart.json
+│       ├── storage-settings.json
+│       ├── tree-card.json
+│       ├── filter-input.json
+│       ├── copy-button.json
+│       ├── input.json
+│       ├── password-input.json
+│       ├── image.json
+│       ├── popover.json
+│       ├── menu.json
+│       ├── file-upload.json
+│       └── accordion.json
+
+# Update for hooks (lines 73-76)
+
+│   ├── use-focus-state.ts      # For FilterInput
+│   ├── use-copy-state.ts       # For CopyButton
+│   ├── use-password-visibility.ts  # For PasswordInput
+│   ├── use-image-state.ts      # For Image
+│   ├── use-popover-state.ts    # For Popover
+│   ├── use-menu-state.ts       # For Menu
+│   ├── use-file-upload.ts      # For FileUpload
+│   ├── use-accordion.ts        # For Accordion
+
+# Update for json-components count (line 82)
+
+│       ├── json-components.ts            # JSON component exports (27 components)
+
+# Update for hooks-registry count (line 86)
+
+│       ├── hooks-registry.ts             # Hook registration (12 hooks registered)

ROOT_CAUSE_ANALYSIS.md

@@ -0,0 +1,195 @@
+# Root Cause Analysis: JSON-Based React Component System
+
+## Executive Summary
+
+The repository is attempting to transition from a traditional TypeScript React component architecture to a JSON-based declarative UI system. The build is currently failing because the transition is incomplete - some TypeScript components were deleted but their imports remain, and the JSON component system cannot yet fully replace them.
+
+## Current State: Hybrid System Failure
+
+### What Was Attempted
+1. **123 TypeScript components were deleted** (commit aa51074) and marked as "json-compatible" in the registry
+2. **JSON component registry created** with 375+ component definitions
+3. **JSON UI rendering system built** with component-renderer.tsx, expression evaluator, data binding, etc.
+4. **Wrapper components created** for complex molecules that need special handling
+
+### What's Broken
+The build fails with these errors:
+```
+✘ [ERROR] No matching export in "src/components/molecules/index.ts" for import "NavigationItem"
+✘ [ERROR] No matching export in "src/components/molecules/index.ts" for import "PageHeaderContent"
+✘ [ERROR] No matching export in "src/components/molecules/index.ts" for import "TreeCard"
+✘ [ERROR] No matching export in "src/components/molecules/index.ts" for import "TreeListHeader"
+✘ [ERROR] No matching export in "src/components/molecules/index.ts" for import "preloadMonacoEditor"
+✘ [ERROR] No matching export in "src/components/molecules/index.ts" for import "LoadingFallback"
+```
+
+## Root Causes
+
+### 1. **Incomplete Conversion Strategy**
+Components were marked as JSON-compatible and deleted, but:
+- The **consuming code still imports them as TypeScript modules**
+- No migration was done to convert consumers to use the JSON renderer
+- The JSON system exists but isn't wired into the main application flow
+
+### 2. **Misunderstanding of JSON Component Architecture**
+The JSON system is designed for **declarative page configurations**, not as a drop-in replacement for React components. Example:
+
+**Traditional React:**
+```tsx
+import { TreeCard } from '@/components/molecules'
+<TreeCard tree={data} onSelect={handleSelect} />
+```
+
+**JSON System:**
+```json
+{
+  "type": "TreeCard",
+  "bindings": {
+    "tree": { "source": "currentTree" }
+  },
+  "events": {
+    "onSelect": { "action": "selectTree" }
+  }
+}
+```
+
+The JSON system requires:
+- JSON configuration files
+- JSONSchemaPageLoader or PageRenderer wrapper
+- Data sources defined in JSON
+- Event handlers defined in JSON
+- Cannot be imported like a normal React component
+
+### 3. **Deleted Components Still Referenced**
+Components deleted but still imported:
+- **TreeCard** - Used in TreeListPanel.tsx
+- **TreeListHeader** - Used in TreeListPanel.tsx  
+- **LoadingFallback** - Used in JSONSchemaPageLoader.tsx and routes.tsx
+- **NavigationItem** - File exists but not exported from index.ts
+- **PageHeaderContent** - File exists but not exported from index.ts
+- **preloadMonacoEditor** - Function exists but not exported from index.ts
+
+### 4. **Module System vs Component Registry Mismatch**
+The component-registry.ts uses `import.meta.glob` to load ALL .tsx files:
+```ts
+const moleculeModules = import.meta.glob('@/components/molecules/*.tsx', { eager: true })
+```
+
+This means:
+- It CAN dynamically load TreeCard, TreeListHeader, etc. IF they exist as .tsx files
+- But they were DELETED, so they can't be found
+- The registry says they're "json-compatible" but provides no fallback
+- The JSON renderer can use them IF loaded via JSON config, but direct imports fail
+
+## The Fundamental Problem: No Working JSON System Examples
+
+**Key Issue:** While the JSON UI infrastructure exists, there are NO working examples of pages that successfully:
+1. Define a complex page entirely in JSON
+2. Handle state management in JSON
+3. Wire up all events in JSON
+4. Replace an existing TypeScript page
+
+The infrastructure exists but hasn't been proven to work end-to-end.
+
+## Architecture Deep Dive
+
+### JSON UI System Components
+```
+src/lib/json-ui/
+├── component-renderer.tsx    # Renders individual components from JSON
+├── page-renderer.tsx          # Renders full pages from JSON
+├── component-registry.ts      # Maps component names to React components
+├── expression-evaluator.ts    # Evaluates data binding expressions
+├── hooks.ts                   # Data source hooks
+├── schema.ts                  # TypeScript types
+└── wrappers/                  # Special wrappers for complex components
+```
+
+### How It Should Work (Theory)
+1. Create JSON page definition in `src/config/ui-examples/my-page.json`
+2. Load it with `<JSONSchemaPageLoader schemaPath="/config/ui-examples/my-page.json" />`
+3. JSON renderer looks up components in registry
+4. Registry loads them via import.meta.glob
+5. Components render with data bindings and events
+
+### Why It Doesn't Work (Reality)
+1. **Deleted components can't be loaded** - glob can't find non-existent files
+2. **Existing TypeScript pages import components directly** - they don't use JSON loader
+3. **No migration path** - can't gradually convert pages
+4. **Registry assumes all components exist as .tsx files** - no JSON-only components
+
+## Two Possible Solutions
+
+### Option A: Restore Components (Backward Compatibility)
+**Goal:** Make the build work by restoring deleted components
+
+Steps:
+1. Restore TreeCard, TreeListHeader, LoadingFallback as .tsx files
+2. Export NavigationItem, PageHeaderContent, preloadMonacoEditor
+3. Keep JSON system for future use
+4. Gradual migration when JSON system proven
+
+**Pros:** Quick fix, maintains compatibility, low risk
+**Cons:** Delays JSON transition, maintains technical debt
+
+### Option B: Full JSON Transition (Forward-Looking)
+**Goal:** Convert consuming pages to use JSON system
+
+Steps:
+1. Convert TreeListPanel.tsx to use JSON renderer
+2. Convert routes.tsx to load JSON configs
+3. Create JSON definitions for missing components
+4. Delete rigid TypeScript components
+5. Prove JSON system works end-to-end
+
+**Pros:** Achieves goal of JSON system, modern architecture
+**Cons:** High risk, requires extensive testing, may reveal more issues
+
+## Recommendation
+
+**Start with Option A**, then gradually move toward Option B:
+
+1. **Immediate Fix** (Option A):
+   - Restore the 3 deleted components (TreeCard, TreeListHeader, LoadingFallback)
+   - Fix exports for existing components (NavigationItem, PageHeaderContent, preloadMonacoEditor)
+   - Get the build working
+
+2. **Validation Phase**:
+   - Create 1-2 complete working examples of JSON pages
+   - Test all JSON system features (data binding, events, conditionals, loops)
+   - Document the conversion process
+   - Identify limitations
+
+3. **Gradual Migration** (Option B):
+   - Convert simple pages first
+   - Build tooling to help convert TypeScript to JSON
+   - Only delete TypeScript after JSON proven working
+   - Keep wrappers for complex components
+
+## Files Requiring Immediate Attention
+
+1. `src/components/molecules/TreeCard.tsx` - RESTORE from aa51074~1
+2. `src/components/molecules/TreeListHeader.tsx` - RESTORE from aa51074~1
+3. `src/components/molecules/LoadingFallback.tsx` - RESTORE from aa51074~1
+4. `src/components/molecules/index.ts` - ADD exports for NavigationItem, PageHeaderContent
+5. `src/components/molecules/LazyMonacoEditor.tsx` - Already exports preloadMonacoEditor, just needs index.ts export
+
+## Testing Plan
+
+After fixes:
+1. Run `npm run dev` - should start without errors
+2. Run `npm run build` - should complete successfully
+3. Run `npm run test:e2e` - should pass
+4. Manually test pages that use restored components
+5. Test JSON UI showcase page to verify JSON system still works
+
+## Long-Term Vision Questions
+
+1. Can complex state management work in JSON?
+2. How do we handle TypeScript types and intellisense for JSON configs?
+3. What about component composition and reusability?
+4. Performance implications of JSON parsing and dynamic loading?
+5. How do non-developers edit JSON configs safely?
+6. Can we generate JSON from existing TypeScript components?
+7. What's the migration path for 250+ existing pages?
+

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