redesign(docs): dark-themed responsive presentation + accuracy fixes#34
Conversation
- Full dark theme matching the landing page (Inter + JetBrains Mono, accent #3d7bfd, boundary-coded flow boxes) - Accuracy: scoped npm name (@fiscalmindset/blindfold), real self-serve quickstart (signup → register → proxy → use), drop stale hackathon framing - Add live-site + npm CTAs on the closing slide and a Live-site nav link (blindfold-rho.vercel.app) - Keep the slide framework intact (keyboard / swipe / progress dots / autoplay / fullscreen) Co-authored-by: algsoch <algsoch@gmail.com>
PR Summary by Qododocs: dark-theme responsive slide deck + shipped-product accuracy updates
AI Description
Diagram
High-Level Assessment
Files changed (1)
|
Code Review by Qodo
1. process.env.OPENAI_API_KEY shown
|
| const value = process.env.OPENAI_API_KEY;<br /> | ||
| await t3.seedSecret(opts.name, value);<br /> |
There was a problem hiding this comment.
1. process.env.openai_api_key shown 📜 Skill insight ⛨ Security
The updated docs presentation includes a code snippet that reads process.env.OPENAI_API_KEY. This violates the requirement to avoid referencing provider API keys from process.env (only T3N_API_KEY is allowed), and it may encourage non-compliant usage patterns.
Agent Prompt
## Issue description
`docs/index.html` includes an example that reads `process.env.OPENAI_API_KEY`, which violates the compliance requirement that code must not reference `process.env.<PROVIDER>_API_KEY` (except `T3N_API_KEY`).
## Issue Context
This is shown in the “Sealing (register.ts)” snippet in the presentation deck. Even though it is documentation, it is still changed content in the repo and directly instructs users to use a disallowed secret-access pattern.
## Fix Focus Areas
- docs/index.html[488-494]
ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools
| <span class="cmt"># 1 · install + create a funded testnet tenant (self-serve)</span><br /> | ||
| npm i -g @fiscalmindset/blindfold<br /> | ||
| blindfold signup --email you@example.com<br /> | ||
| <br /> | ||
| # Full demo — no T3 credentials needed (mock mode)<br /> | ||
| BLINDFOLD_MOCK=1 npm run demo<br /> | ||
| <span class="cmt"># 2 · seal a key — hidden prompt, never touches disk</span><br /> | ||
| blindfold register --name openai_api_key<br /> | ||
| <br /> | ||
| # Seal a real key into the T3 enclave<br /> | ||
| npm run blindfold -- register --name openai_api_key<br /> | ||
| <br /> | ||
| # Fetch it in code — just one line<br /> | ||
| const key = await release("openai_api_key"); | ||
| <span class="cmt"># 3 · use it — the agent sends the sentinel, never the key</span><br /> | ||
| blindfold proxy <span class="cmt"># point your agent at 127.0.0.1:8787</span><br /> | ||
| blindfold use --name openai_api_key -- your-command | ||
| </code> | ||
| </div> | ||
|
|
||
| <div class="banner"> | ||
| <strong>CI/CD ready:</strong> GitHub Actions runs both demo scenarios on every push using | ||
| <code>BLINDFOLD_MOCK=1</code> — no T3 credentials needed in CI. | ||
| <strong>Prefer the source?</strong> <code style="font-family:var(--mono);color:#c9d4ff">git clone</code> + <code style="font-family:var(--mono);color:#c9d4ff">npm install</code>, then | ||
| <code style="font-family:var(--mono);color:#c9d4ff">BLINDFOLD_MOCK=1 npm run demo</code> — no T3 credentials needed. CI runs both demo scenarios on every push. | ||
| </div> |
There was a problem hiding this comment.
2. explain.md not updated 📘 Rule violation § Compliance
This PR makes material documentation/UX changes to the interactive deck (docs/index.html), but explain.md was not updated with a new status update and a dated change-log entry for 2026-07-14. This breaks the project’s required documentation change-tracking discipline.
Agent Prompt
## Issue description
Material changes were made to `docs/index.html`, but `explain.md` does not include an updated status row and a new dated log entry describing this change.
## Issue Context
The compliance checklist requires `explain.md` to be updated for each material change with (1) a status table update for the affected area and (2) a dated (YYYY-MM-DD) entry appended to the change log/history.
## Fix Focus Areas
- explain.md[41-53]
- explain.md[70-78]
- docs/index.html[589-605]
ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools
| <h3 style="font-size: 1.05rem; margin-bottom: 8px; text-align: left; color: var(--ink);">Option B — wrap() SDK</h3> | ||
| <div class="code-block" style="margin: 0 0 16px;"> | ||
| <code> | ||
| import OpenAI from "openai";<br /> | ||
| import { wrap } from "blindfold";<br /> | ||
| import { wrap } from <span style="color:var(--blue)">"@fiscalmindset/blindfold"</span>;<br /> | ||
| <br /> | ||
| const openai = wrap(new OpenAI());<br /> | ||
| const r = await openai.chat.completions.create({ /* … */ }); | ||
| const r = await openai.chat.completions.create({ <span class="cmt">/* … */</span> }); |
There was a problem hiding this comment.
3. Docs npm name mismatch 🐞 Bug ≡ Correctness
docs/index.html now tells users to import from "@fiscalmindset/blindfold", but other repo docs still instruct importing from "blindfold"; since the published package name is scoped, those examples will fail to resolve for users. This PR therefore leaves the documentation set internally inconsistent and breaks copy/paste adoption depending on which doc a user follows.
Agent Prompt
## Issue description
The repo’s published package name is scoped (`@fiscalmindset/blindfold`), but multiple docs still instruct importing from the unscoped specifier (`"blindfold"`). This will cause runtime/module-resolution failures for users following those docs.
## Issue Context
This PR updated `docs/index.html` to the scoped name, which makes the mismatch more apparent and creates conflicting instructions across the repo.
## Fix Focus Areas
- packages/blindfold/package.json[1-6]
- README.md[472-480]
- usage.md[88-96]
- usage.md[226-234]
- docs/04-usage.md[176-185]
## What to change
- Replace `import { ... } from "blindfold";` with `import { ... } from "@fiscalmindset/blindfold";` in the docs noted above.
- If there is an intentional reason to keep `"blindfold"` (e.g., a separately published compatibility package), explicitly document that and add the install instructions for it; otherwise, make the import specifier consistent everywhere.
ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | ||
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" /> |
There was a problem hiding this comment.
4. Google fonts runtime dependency 🐞 Bug ☼ Reliability
docs/index.html now loads fonts from fonts.googleapis.com/fonts.gstatic.com, adding a third-party network dependency that can be blocked in offline/CSP-restricted environments and can slow first paint. The page will still work via fallback fonts, but typography/layout will differ and rendering may be delayed depending on network policy.
Agent Prompt
## Issue description
The presentation now depends on Google Fonts at runtime. In environments where Google domains are blocked (corporate networks, privacy tools, offline viewing), the intended typography won’t load and can introduce additional load latency.
## Issue Context
This is not a functional break (fallback fonts exist), but it is a new operational dependency for `docs/index.html`.
## Fix Focus Areas
- docs/index.html[9-12]
## What to change
- Option A (self-contained docs): download/self-host Inter + JetBrains Mono under `docs/` and replace the Google Fonts `<link>` with local `@font-face` declarations.
- Option B (no external fonts): remove the Google Fonts links and rely on system fonts only.
- Option C (keep external): explicitly document that the deck uses Google Fonts and should be expected to fall back when blocked.
ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools
Full dark redesign of the interactive presentation (
docs/index.html) to match the new landing page, plus accuracy fixes for the now-shipped product.Design
#3d7bfd, boundary-coded flow boxes, dark code/diagram/table/demo panelsAccuracy (deck had drifted from the shipped product)
@fiscalmindset/blindfold(was bareblindfold/npm install)npm i -g→blindfold signup→register→proxy/usePreserved
Verified rendered slides (hero / quickstart / closing) at desktop and the responsive breakpoints.
Summary by cubic
Redesigned the docs presentation (
docs/index.html) with a dark, responsive theme and updated the content to match the shipped self-serve product. The slide framework is unchanged; naming, quickstart, and CTAs are corrected.#3d7bfd, updated panels, and boundary-coded flow boxes.@fiscalmindset/blindfoldeverywhere; updated Quickstart tonpm i -g→blindfold signup→register→proxy/use; removed stale hackathon framing.Written for commit 91ada34. Summary will update on new commits.