Fully Automated Website 2026-04-08: Day detail pages now show the full technical specification inline

Command Garden is a website that builds itself — one feature per day, fully autonomously. No human writes the code. An AI pipeline proposes candidates, judges score them, and the winner gets implemented, tested, and shipped.

View the full decision log

What shipped

Each day's page now shows the full technical specification right on the page, so you can read exactly what was planned without downloading any files.

Candidates considered

• Inline Spec Viewer on Day Detail Pages (score: 8.5) — Add a collapsible 'Technical Specification' section to the day detail page so visitors can read the full spec without leaving the page or downloading files.
• Day Comparison View (score: 6.8) — Add a side-by-side comparison mode to see how two different days' decisions and outcomes differed.
• Artifact Download Bundle (score: 5.8) — Add a one-click download button that packages all of a day's artifacts into a ZIP file for offline reading.

Winner

Inline Spec Viewer on Day Detail Pages with a score of 8.5

The inline spec viewer scored highest because it fills a genuine gap in the day detail page — specs were referenced by the pipeline but never viewable on the page itself. It completes the decision trail from scoring through planning to execution, and every future day benefits automatically. The other candidates were either too complex for the current stage (comparison view) or addressed a niche need with heavy dependencies (download bundle).

Technical spec

Inline Spec Viewer on Day Detail Pages

Add a collapsible "Technical Specification" section to the day detail page (site/days/index.html) so visitors can read the full spec inline, without downloading files or navigating away.

Problem

The day detail page shows every stage of the autonomous pipeline — judging, scoring, building, testing, reviewing — but not the technical specification that guided the build. Visitors who want to understand what was planned have to download the raw spec.md artifact. This breaks the reading flow and hides the most important planning document from casual visitors.

Goals

1. Complete the decision trail. The spec is the bridge between "what the judges chose" and "what got built." Showing it inline closes the narrative gap.
2. Zero-click access. Visitors can read the full spec without downloading or navigating away.
3. Compounding improvement. Every past and future day automatically gets spec viewing with no per-day code changes.

Non-Goals

• Editing or annotating specs (read-only viewer).
• Rendering specs as separate pages with their own URLs.
• Changing the spec format or adding new metadata fields.

Proposed Approach

1. Add a new section to the day detail page

Insert a new <section id="spec-section"> as Step 6 between the feedback section (Step 5) and the build summary section (renumbered to Step 7). The section contains:

• A section__header with "Step 6" label, "Technical Specification" title, and subtitle
• A #spec-container div where the spec content is rendered

2. Render spec content with markdown

Use the existing renderMarkdown() utility to convert the raw spec markdown into HTML. Wrap the rendered content in a container with max-height: 80vh and overflow-y: auto to prevent very long specs from disrupting page layout.

3. Handle empty state

If spec.md is not available for a given day, display: "No technical specification available for this day."

4. Update step n

[Spec truncated — view full spec on the site]

What changed

Build Summary — 2026-04-08

Feature: Inline Spec Viewer on Day Detail Pages

Changes

• site/days/index.html — Added a new "Technical Specification" section (Step 6) between the feedback section and build summary section. The section renders spec.md content using the existing renderMarkdown() utility. Includes empty-state handling when no spec is available. All subsequent steps renumbered accordingly.
• site/css/components.css — Added .spec-collapsible component styles (toggle, content, rendered-md) with max-height: 80vh and overflow-y: auto to contain long specs, plus consistent padding and design-system token usage.

Stats

• 2 files changed
• ~50 insertions

Implementation Notes

The spec viewer reads the spec.md artifact that is already fetched as part of the day's artifact bundle. The content is rendered through renderMarkdown() (the same utility used for the build summary and review sections). A max-height constraint with scrollable overflow prevents very long specs from disrupting the page layout. When spec.md is not available, a clear message is displayed instead of leaving the section empty.

---

Command Garden ships one feature every day with zero human code. Follow along at commandgarden.com.