site: merge hero into one terminal + real verification steps

[FiscalMindset]

Improves the hero terminal on the landing page.

What

• Merged the two terminals into one bigger terminal — running claude opens the Claude Code session inside the same window (the title flips to ◆ Claude Code, the window tints violet), which is how it actually works.
• Added real verification steps (captured from actual runs on the machine, nothing faked):
  • blindfold status → shows google_sheet_api_key 39 B real — name + byte-size only, the value is never shown
  • blindfold attest → chain to Intel root: ✅ valid · quotes verified: 3/3 + the RTMR3 code measurement
• Clarified that 1N5xuy8j… is the public Google Sheet ID (from the URL), not the key — the key is $GKEY, released only for that one command.
• Ends with the echo $GKEY proof: session ends → back in zsh → echo $GKEY is empty → the key only ever lived inside that one command.

Live at https://blindfold-rho.vercel.app

---

Summary by cubic

Merged the landing-page hero into one larger terminal that shows setup and the in-window claude session. Added real blindfold verification output and a final echo $GKEY proof that the key only lived inside one command.

• New Features
  • Shows real blindfold status (name + byte-size only) and blindfold attest (Intel root chain, 3/3 quotes, RTMR3 code measure).
  • Clarifies 1N5xuy8j… is the public Google Sheet ID; the actual key is $GKEY, released only for the command.
  • Session UX: title flips to ◆ Claude Code — ~/my-agent, window tints violet, and dividers mark entering/leaving the session.
  • Ends back in zsh with echo $GKEY empty to confirm no key in the shell.

^{Written for commit b11b56f. Summary will update on new commits.}

[gitar-bot]

Important

You are using the Gitar free plan. Upgrade to unlock code review, CI analysis, auto-apply, custom automations, and more.

_Gitar

[qodo-code-review]

PR Summary by Qodo

site: merge hero terminals into one session with real verification steps

✨ Enhancement 🕐 20-40 Minutes

AI Description

• Replace the two-window hero with a single terminal that “enters” Claude Code in-place.
• Add real captured blindfold status/attest outputs and clarify Sheet ID vs $GKEY.
• End the flow by returning to zsh and proving $GKEY is empty after the command.

Diagram

graph TD
  A["Landing page hero"] --> B["Hero terminal DOM"] --> C["Playback loop"] --> D["Session mode switch"]
  D --> E["Blindfold CLI steps"] --> F["Claude Code prompts"]
  D --> G["Back-in-shell proof"]

Loading

High-Level Assessment

The following are alternative approaches to this PR:

1. Pre-render as video/GIF (instead of typed playback)

• ➕ No timing/DOM complexity or JS replay loop edge cases
• ➕ Perfectly matches real output formatting
• ➕ Lower runtime overhead
• ➖ Less interactive/accessible (no selectable text, harder to theme)
• ➖ Harder to keep in sync with product changes
• ➖ Can feel less “real” than a live-typed terminal

2. Split hero into a small state machine + templates

• ➕ Clearer separation of concerns (render vs timing vs script data)
• ➕ Easier to extend with additional steps or branches
• ➕ Less risk of regressions as the script grows
• ➖ More code/more files for a marketing page
• ➖ Overhead may not be worth it unless the hero keeps expanding

Recommendation: Keep the current single-terminal approach: it improves realism (Claude Code appears inside the same window) while preserving selectable text and theming. If the script continues to grow, consider refactoring the inline step runner into a tiny state machine/templating helper to keep index.html maintainable.

Files changed (1) +47 / -43

Enhancement (1) +47 / -43

index.htmlUnify hero into one terminal with session toggles and real attestation outputs +47/-43

Unify hero into one terminal with session toggles and real attestation outputs

• Replaces the two-terminal hero stack with a single larger terminal and a dynamic title that flips between zsh and Claude Code states. Updates styling to support the unified layout and adds section separators/animations. Rewrites the hero playback script to include real 'blindfold status'/'blindfold attest' steps, clarifies Sheet ID vs '$GKEY', and ends by returning to the shell to show '$GKEY' is empty.

site/index.html

[qodo-code-review]

Code Review by Qodo

🐞 Bugs (2) 📘 Rule violations (0) 📜 Skill insights (0)

Context used

✅ Compliance rules (platform): 5 rules

✅ Skills: blindfold

1. Duplicate cursor CSS 🐞 Bug ⚙ Maintainability

Description

site/index.html defines .cursor and @keyframes blink twice back-to-back, which is redundant
and creates a future divergence risk if one copy is edited without the other. This also makes the
cascade harder to reason about when debugging animation behavior.

Code

site/index.html[R405-406]

+  .cursor{display:inline-block;width:7px;height:14px;background:#7fd1ff;vertical-align:-2px;margin-left:1px;animation:blink 1s step-end infinite}
+  @keyframes blink{50%{opacity:0}}

Evidence

The file contains two identical .cursor declarations and two identical @keyframes blink blocks
immediately one after another.

site/index.html[397-408]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The CSS for the hero terminal defines `.cursor` and `@keyframes blink` twice consecutively. This duplication is redundant and increases maintenance/debugging risk.

## Issue Context
Only one `.cursor` rule and one `@keyframes blink` block are needed; the second copy should be removed to avoid confusion and accidental divergence.

## Fix Focus Areas
- site/index.html[405-408]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

2. Dead termstack selector 🐞 Bug ⚙ Maintainability

Description

The hero markup no longer uses a .termstack wrapper after merging to a single terminal, but the
mobile overflow guard CSS still targets .termstack. This leaves dead CSS that can mislead future
edits about the intended hero structure.

Code

site/index.html[R466-469]

+    <div class="termhero reveal" id="term1">
+      <div class="bar"><i style="background:#ff6b63"></i><i style="background:#f0b429"></i><i style="background:#3fd07a"></i><span class="t" id="termTitle">zsh — you@mac</span></div>
+      <div class="tbody big" id="heroBody"></div>
    </div>

Evidence

CSS still includes .termstack in the overflow-guard rule, while the updated hero HTML now renders
only a single .termhero container and no .termstack element.

site/index.html[38-42]
site/index.html[466-469]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The `.termstack` class is no longer present in the hero HTML after the PR's merge to a single terminal, but the CSS still includes `.termstack` in a shared selector list.

## Issue Context
Since the hero no longer renders any `.termstack` element, `.termstack` should be removed from the selector list (unless it's still used elsewhere intentionally).

## Fix Focus Areas
- site/index.html[38-42]
- site/index.html[466-469]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

[qodo-code-review]

1. Duplicate cursor css 🐞 Bug ⚙ Maintainability

site/index.html defines .cursor and @keyframes blink twice back-to-back, which is redundant
and creates a future divergence risk if one copy is edited without the other. This also makes the
cascade harder to reason about when debugging animation behavior.

Agent Prompt

## Issue description
The CSS for the hero terminal defines `.cursor` and `@keyframes blink` twice consecutively. This duplication is redundant and increases maintenance/debugging risk.

## Issue Context
Only one `.cursor` rule and one `@keyframes blink` block are needed; the second copy should be removed to avoid confusion and accidental divergence.

## Fix Focus Areas
- site/index.html[405-408]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

[qodo-code-review]

2. Dead termstack selector 🐞 Bug ⚙ Maintainability

The hero markup no longer uses a .termstack wrapper after merging to a single terminal, but the
mobile overflow guard CSS still targets .termstack. This leaves dead CSS that can mislead future
edits about the intended hero structure.

Agent Prompt

## Issue description
The `.termstack` class is no longer present in the hero HTML after the PR's merge to a single terminal, but the CSS still includes `.termstack` in a shared selector list.

## Issue Context
Since the hero no longer renders any `.termstack` element, `.termstack` should be removed from the selector list (unless it's still used elsewhere intentionally).

## Fix Focus Areas
- site/index.html[38-42]
- site/index.html[466-469]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools