I can see the exact bug. Line 542 renders {proj.openQuestions} which is an array (of strings), not a number. Let me read the surrounding stat box code to fix it cleanly:
Now I can see the full picture. proj.openQuestions is an array of strings (e.g. ["What should the first collection be called?", ...]) being rendered directly — I need to render .length instead. I also need to check the project data shape for decisions and nextSteps to make sure those are already numbers:
Now I see the full picture. The project data has two openQuestions fields — a numeric one (e.g. line 56: openQuestions: 5) and an array one (e.g. line 88: openQuestions: [...]). The array overwrites the numeric field in the same object. The stat card on line 542 renders proj.openQuestions which ends up being the array because the array definition comes later in the object.
The fix: in the stat box, render Array.isArray(proj.openQuestions) ? proj.openQuestions.length : proj.openQuestions. But more cleanly — I should fix the data to remove the duplicate numeric field and always use .length in the card. Let me check the type definition:
The type has duplicate openQuestions fields — number on line 235 and string[] on line 247. In TypeScript, the second definition wins, so the array overwrites the number in the type AND in the data objects.
The cleanest fix: rename the numeric stat field to questionCount in both the type, all 4 project data objects, and the stat card rendering — keeping the openQuestions: string[] array intact for use elsewhere.
Now I have full context. The issue is clear: each project data object has openQuestions: 5 (number) early on, then openQuestions: ["...", ...] (array) later — the array silently overwrites the number. The stat card renders proj.openQuestions which resolves to the array.
The cleanest fix with minimal changes: rename the numeric field to questionCount in the type, in all 4 project objects, and in the stat card rendering.
Now rename the numeric openQuestions field in each of the 4 project data objects. Each one appears right after decisions: and before nextSteps::
Now fix the stat card to use proj.questionCount and fix the card layout so all stat boxes have equal height:
The root cause was a duplicate key conflict in each project data object: openQuestions: 5 (number) was defined early, then openQuestions: [...] (string array) was defined later in the same object — the array silently overwrote the number, causing the full list of question strings to render inside the stat box.
The fix renames the numeric stat field to questionCount in the TypeScript interface, in all 4 project data objects, and in the card rendering — eliminating the conflict entirely. The stat boxes also now have min-h-[72px] with flex flex-col items-center justify-center so they stay equal-height and centered regardless of which project is selected.
Now I understand the current state. Let me create a completely redesigned visual dashboard that follows the new design direction - much cleaner, more visual, less text, with the Brain Map, Memory Health ring, Source Constellation, and progressive disclosure.
I've completely redesigned the ProjectBrain AI demo with a much cleaner, more visual approach. The new design features:
The redesign reduces text by ~60%, uses more whitespace, progressive disclosure (click to expand nodes), and visual elements (rings, gradients, colored status indicators) to create a premium consumer SaaS feel rather than a dense developer dashboard.