#13838: UI: fix config panel CI failures and modularize rendering
app: web-ui
stale
Cluster:
UI and Model Management Enhancements
## Summary
- reworked config UI layout and form/raw UX (full-screen config workspace, topbar metadata, optimized cards)
- improved Raw mode with structured JSON view (colors, collapsible nodes, parse error context, wrapping)
- fixed CI code-size failures by splitting large files into focused modules:
- `ui/src/ui/views/config.ts` -> `config-view-core.ts` + `config-view-raw.ts`
- `ui/src/ui/views/config-form.node.ts` -> `config-form.node.helpers.ts`
- `ui/src/ui/app-render.ts` -> `app-render.config.ts`
- removed duplicate-function regression detected by code-analysis
## Validation
- `oxlint` passed on touched files
- `oxfmt --check` passed on touched files
- `python scripts/analyze_code_files.py --compare-to upstream/main --threshold 1000 --strict` passed
<!-- greptile_comment -->
<h2>Greptile Overview</h2>
<h3>Greptile Summary</h3>
This PR refactors and modularizes the config panel UI to address CI code-size limits, splitting previously-large view and helper files into focused modules (`app-render.config.ts`, `config-view-core.ts`, `config-view-raw.ts`, and `config-form.node.helpers.ts`). It also updates the config layout/UX (full-screen workspace, sticky action bar, diff dropdown, section/subsection navigation) and improves Raw mode with structured JSON5 viewing and richer parse-error context.
Changes are largely internal to the UI layer: `renderApp` now delegates config-specific rendering and progressive “warm” rendering logic to the new `app-render.config.ts`, while `renderConfig` composes its new core/raw helpers for schema analysis, diff computation, and structured tree rendering.
<h3>Confidence Score: 5/5</h3>
- This PR appears safe to merge with minimal risk.
- Review found no verified logic or runtime errors introduced by the refactor; changes are modularization and UI behavior adjustments with corresponding test updates for schema analysis behavior.
- No files require special attention
<!-- greptile_other_comments_section -->
<sub>(3/5) Reply to the agent's comments like "Can you suggest a fix for this @greptileai?" or ask follow-up questions!</sub>
**Context used:**
- Context from `dashboard` - CLAUDE.md ([source](https://app.greptile.com/review/custom-context?memory=fd949e91-5c3a-4ab5-90a1-cbe184fd6ce8))
- Context from `dashboard` - AGENTS.md ([source](https://app.greptile.com/review/custom-context?memory=0d0c8278-ef8e-4d6c-ab21-f5527e322f13))
<!-- /greptile_comment -->
Most Similar PRs
#8546: Fix/config UI improvements
by RandomRaine · 2026-02-04
81.7%
#13960: fix(ui): preserve structured config validation error details
by constansino · 2026-02-11
80.8%
#7316: fix: /chat dashboard performance
by felipcsousa · 2026-02-02
80.4%
#9628: fix: resolve tsconfig rootDir errors by separating UI config (AI-as...
by KGBos · 2026-02-05
78.8%
#8342: Fix debug interface CSS layout issues
by Klopib · 2026-02-03
78.3%
#20064: UI: fix form overlapping subtitle in config screen
by powerdot · 2026-02-18
77.7%
#15215: fix(UI): Prevent config layout panel from overlapping description text
by Chityalaakhil · 2026-02-13
77.6%
#11663: fix: prevent config page header overlap with settings form
by shogunsea · 2026-02-08
77.6%
#7892: Claude/setup agent firewall ww xsv
by starwreckntx · 2026-02-03
77.6%
#14719: UI: fix debug event log layout and health history toggle
by detecti1 · 2026-02-12
77.5%