[danyaberezun]

Problem

#991 adds the GUI overview post and the code behind its clickable thumbnails. Reviewing it turned up a few gaps:

• Four screenshots (15_review, 22_chat, 26_terminal, 30_notifications) were committed but never used, yet the new image route still shipped them.
• The intro promised highlighted elements and links to related posts; neither was there.
• Some captions were inaccurate (Resources, Extensions, Changes, Layout). The excerpt read "Below, you will find…" on index cards and in RSS. The UTM campaign was copied from the 0.2.0 post.
• Each row was a header-only table (28 <table>s, 0 <td>s), so screen readers announced every caption as a column header, and the alt text repeated it.
• The image route swallowed every read error and resolved paths from the working directory, so a misconfigured build would have shipped 404 links silently.
• Thumbnails were a fixed 280 px, which left the wide strips (token usage, project path) unreadable, and the screenshots weighed 7.2 MB.

Approach

This PR is stacked on #991 (base: blog_gui_features), so the author can take all of it, some commits, or none. Commits are split by concern: code fixes first, then the screenshot frames, the copy, the compression and the spec.

• The author's zigzag layout stays. Each row is still a two-cell table, but under an empty header row that CSS hides, so the cells are real <td>s.
• A linked screenshot takes two thirds of its row at its own aspect ratio and still reserves its space before it lazy-loads. Below 520 px of content width the cells stack. This uses a container query, because the blog pane's width does not follow the viewport.
• Highlight frames are orange, to stand apart from the lime UI accent and the red/green diff colours. Compression is lossless (oxipng): pixels are bit-identical and the ICC profile is kept.
• Copy edits keep the author's voice. Left untouched: the 0.3.0 (Nightly) note, the footer and positioning, the draft flag and the date.

Changes

• Image route (src/pages/blog/[slug]/images/[file].ts, new src/blogImages.ts with tests): the post folder resolves from the Astro root via astro:config/server. A post without images/ has no images; any other read error now fails the build.
• validateBuild: fails when a relative link or src on a blog post has no built file (relativeLinkTargets, tested).
• imageZoom.ts: the click filter is extracted as zoomsInPlace, and non-primary buttons now follow the link too (tested). The dialog takes its name from the image's alt, and the image is cleared on close so the previous screenshot never flashes.
• styles.css: hidden empty table header, the thumbnail sizing above, and a zoom-in cursor only on linked images.
• Post:
  • rows for the four unused screenshots
  • sections: The chat / The workspace / Settings
  • corrected captions and descriptive alt text
  • links to the workspaces, spec-driven development, pi skills and 0.2.0 posts
  • a "Not pictured here" paragraph
  • a new excerpt and utm_campaign=gui-overview
  • the "planned post" promise removed
• Screenshots: highlight frames on all 32; 7.2 MB → 3.8 MB losslessly.
• Docs: apps/website/SPEC.md (Blog) and content/blog/BLOG.md (header-less tables, oxipng).

Screenshots

Same viewport and scroll position: the head of #991 (before) against this branch (after).

Desktop 1280×900, dark: the first Settings rows

Before	After

Desktop 1280×900, dark: the token usage strip

Before	After

Mobile 390×844, light: the first chat rows

Before	After

Related issues

Stacked on #991; closes no issue.

Checklist

• Fast gates pass: bun run lint, bun run typecheck, bun run test
  • bun run lint: 0 errors (one existing warning: design-audit/buttons.html exceeds 1 MiB).
  • bun run typecheck: 25/25 tasks pass.
  • bun run test: 24/25 tasks pass. The one failure is boot.test.ts › boot applies the stored environment before serving, and launch variables win, which only fails because THINKRAIL_PORT was set in the shell the suite ran in. With it unset, bun test src/host/boot.test.ts passes 19/19.
  • Website: bun test 312 pass. astro build + bun src/validateBuild.ts pass, and removing one built original makes it fail with missing local output. astro build --root apps/website run from the repo root emits all 32 originals.
• E2E suite passes for app-affecting changes (bun run e2e, or bun run e2e:full when touching agent behavior): not applicable, as this is website-only and the e2e suite does not cover apps/website
• Before/after screenshots are included for frontend changes, or marked not applicable
• Relevant SPEC.md / top-level specs updated to reflect any boundary, contract, or behavior change
• I have read the Contributing guide and agree to the Code of Conduct

[github-actions]

🌐 Website preview

Preview	https://pr-999.thinkrail-website.pages.dev
Routes	Landing · Blog · Vibecoding · Agentic development · Agentic IDE
Commit	1a665e4

This comment updates in place on every push that touches the website or shared build inputs.

[jetbrains-air]

Approved — ready to merge.

[jetbrains-air]

Non-blocking:
Problem: The new check treats URL-encoded paths as literal disk filenames, rejecting valid relative image links.
Failure scenario: In a local fixture, Astro 7.3.3 successfully emitted screenshot one.png and écran.png, but links to ./images/screenshot%20one.png and ./images/écran.png made validation fail with missing local output: the existence check looks for %20 and %C3%A9 on disk. This prevents publishing posts using those supported filenames.
Suggested fix: Decode the URL pathname once when converting it to a filesystem path in outputPathExists, and cover a space and a non-ASCII filename in the validation tests.

[Maciej Gorywoda (makingthematrix)]

1. Added a screenshot of the whole main GUI
2. The elements visible on the main screenshot are numbered
3. Added a new section for starting a new project with 3 new screenshots
4. Copyedited the blog post, esp. the "Not pictured here" part
5. Updated screenshots for Settings / Appearance, Extensions, and Language
6. The screenshot for Settings / Appearance is now in the Minimal Dark theme to show how a differet theme looks like

[jetbrains-air]

Approved — ready to merge.