Section templates not populating

[eric-cathell]

Hi all, I'm just getting started, and this is a phenomenal app. It's amazing! One question I have, and it's probably something I'm doing wrong, absolutely, but the sections are not populating. What I mean by this is I'm filling out the sections, doing the design section or shape section process, and at the end it is taking the screenshot and doing all that, but the section on the design of the workflow kind of thing is not populating at all.

And it could absolutely be a step that I missed, because to be honest, I haven't watched the whole video. I jumped right in with both feet, like yeah, like that, so this could absolutely be something I'm doing wrong, but I appreciate any help.

[kcibak]

I think I see what's happening from your screenshots.

Your section artifacts are actually being generated correctly — the repo view shows the expected files:

product/sections/

spec.md
data.json
types.ts
*.png previews

But the Sections panel in the workflow UI only populates after the tool indexes those artifacts into the workflow graph.

So what's likely happening is that the files exist, but the UI hasn’t registered them yet.

A few things to try:

1. Refresh / restart the app
   Some tools only rebuild the workflow graph on startup.

2. Trigger a regeneration
   Try re-running the section step (even if the files already exist). That usually forces the system to register the artifacts.

3. Make sure the sections were created through the tool
   If the folders were added manually or copied in, the workflow UI may not detect them until a generation step runs.

4. Check the root product spec
   Sometimes the sections list is driven from product-overview.md or a similar product file. If the section isn’t referenced there, the UI may not include it in the workflow.

Since your files look correct, this is probably just the indexing step not running yet rather than a missing file.

[eric-cathell]

Thanks for the quick reply.

How often does the re-index run?

This is held over from last evening. I have restarted vs-code since and even have restarted my pc...I did try npm run build as well, but that didn't help.

Still could be something I'm missing... when you say "created through the tool," you mean through the Claude code CLI, right? I am not manually creating them or copying.

The sections are not listed in the product overview MD file. They are listed in the product roadmap MD file.

[eric-cathell]

---

@CasJam

Title: Section parser skips alphanumeric section numbers and generates wrong folder IDs

Description

Two bugs in src/lib/product-loader.ts (parseProductRoadmap) cause sections to silently disappear from the
sections list or fail to detect their existing files.

---

Bug 1: Regex rejects alphanumeric section numbers

The section heading regex only matches pure integers:

/### (\d+).\s*(.+)\n+.../g

Any section numbered with a letter suffix (e.g. 3a, 3b, 3c) is silently skipped. This is a valid convention
for sub-sections grouped under a parent section. In this project, three service sub-pages (3a, 3b, 3c)
never appeared in the sections list.

Fix: Change (\d+) to (\d+[a-z]?) in the regex.

---

Bug 2: Parenthetical suffixes are included in the ID slug

Section titles often include parenthetical notes for human readers, like:

Individual Headshots (Service Page)
Testimonials (Not in Main Navigation)

The ID slug is generated from the full title including the parenthetical. This produces IDs like
individual-headshots-service-page instead of individual-headshots, which won't match any folder on disk.

Fix: Strip parenthetical suffixes before slugifying:
const idTitle = title.replace(/\s*([^)])\s/g, '').trim()
id: slugify(idTitle)

The title field should still store the full display title (with parenthetical) for the UI.

---

Bug 3: Slugify converts / and & in titles, breaking folder lookups

The slugify function converts & to -and- and replaces / with -. If a section title contains either
character, the generated ID won't match a folder that was named with a simpler convention.

Examples from this project:

┌──────────────────────────────────┬────────────────────────────┬────────────────────────┐
│ Title │ Generated ID │ Actual folder │
├──────────────────────────────────┼────────────────────────────┼────────────────────────┤
│ Home / Services Landing (URL: /) │ home-services-landing │ home │
├──────────────────────────────────┼────────────────────────────┼────────────────────────┤
│ Portfolio / Gallery │ portfolio-gallery │ portfolio │
├──────────────────────────────────┼────────────────────────────┼────────────────────────┤
│ About, Approach & Contact │ about-approach-and-contact │ about-approach-contact │
└──────────────────────────────────┴────────────────────────────┴────────────────────────┘

All three sections had full spec, data, screen design, and screenshot files, but showed as empty in the UI.

Fix options:

• Document that section titles must slugify to match their folder name, and provide a helper or warning
  when they don't
• Or: strip /-separated subtitles and secondary descriptors from the ID title before slugifying (similar to
  the parenthetical fix above)

In this project the titles were updated to match the existing folder names (Home (URL: /), Portfolio,
About, Approach, Contact).

---

Affected file: src/lib/product-loader.ts, function parseProductRoadmap (lines 131-144)

Severity: High. Sections silently disappear from the list or show as having no files, even when all
artifacts exist on disk. No error is thrown.