Skip to content

redesign(docs): dark-themed responsive presentation + accuracy fixes#34

Merged
FiscalMindset merged 1 commit into
mainfrom
redesign/dark-presentation
Jul 14, 2026
Merged

redesign(docs): dark-themed responsive presentation + accuracy fixes#34
FiscalMindset merged 1 commit into
mainfrom
redesign/dark-presentation

Conversation

@FiscalMindset

@FiscalMindset FiscalMindset commented Jul 14, 2026

Copy link
Copy Markdown
Owner

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

  • Dark dev-tool theme — Inter + JetBrains Mono, accent #3d7bfd, boundary-coded flow boxes, dark code/diagram/table/demo panels
  • 🛡️ hero + closing mark (consistent with the site + share card)
  • Strengthened responsive rules (1024 / 768 / 480 + landscape/short-viewport)

Accuracy (deck had drifted from the shipped product)

  • Scoped npm name everywhere: @fiscalmindset/blindfold (was bare blindfold / npm install)
  • Quickstart now shows the real self-serve flow: npm i -gblindfold signupregisterproxy / use
  • Dropped stale "Hackathon Demo / Agent Dev Kit Challenge" framing → "Live on npm · MIT · Open source"
  • Added Live site + npm CTAs on the closing slide and a Live-site nav link → https://blindfold-rho.vercel.app

Preserved

  • The slide framework (keyboard, swipe, wheel-on-controls, progress dots, autoplay, fullscreen) is untouched

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.

  • New Features
    • Dark dev-tool theme (Inter + JetBrains Mono), accent #3d7bfd, updated panels, and boundary-coded flow boxes.
    • Stronger responsive rules for 1024 / 768 / 480 and landscape/short viewports.
    • Content accuracy: use @fiscalmindset/blindfold everywhere; updated Quickstart to npm i -gblindfold signupregisterproxy / use; removed stale hackathon framing.
    • Navigation and CTAs: added Live-site nav link and closing-slide CTAs for the live site and npm.
    • Slide engine preserved (keyboard, swipe, wheel-on-controls, progress dots, autoplay, fullscreen).
    • Verified hero, quickstart, and closing slides at desktop and key breakpoints.

Written for commit 91ada34. Summary will update on new commits.

Review in cubic

- 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>
@FiscalMindset
FiscalMindset merged commit 5901112 into main Jul 14, 2026
2 of 4 checks passed
@FiscalMindset
FiscalMindset deleted the redesign/dark-presentation branch July 14, 2026 19:01
@gitar-bot

gitar-bot Bot commented Jul 14, 2026

Copy link
Copy Markdown

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

Copy link
Copy Markdown

PR Summary by Qodo

docs: dark-theme responsive slide deck + shipped-product accuracy updates

📝 Documentation ✨ Enhancement 🕐 20-40 Minutes

Grey Divider

AI Description

• Redesign docs slide deck with dark dev-tool theme, new typography, and refined components.
• Fix deck accuracy: scoped npm package and real self-serve quickstart flow.
• Add live-site navigation/CTAs and strengthen responsiveness across key breakpoints.
Diagram

graph TD
  U(["User"]) --> B["Browser"] --> H["docs/index.html"]
  H --> F[/"Google Fonts"/] --> C["Dark theme CSS"] --> D["Slides content"] --> X{{"CTAs / nav links"}}
  H --> J["Slide framework JS"] --> D

  subgraph Legend
    direction LR
    _u(["User"]) ~~~ _doc["Document/UI"] ~~~ _ext[/"External resource"/] ~~~ _cta{{"External link"}}
  end
Loading
High-Level Assessment

The following are alternative approaches to this PR:

1. Split CSS/JS into separate assets
  • ➕ Improves maintainability and diffs (smaller review chunks)
  • ➕ Enables caching and reuse across other docs pages
  • ➕ Easier to lint/format and run CSS/JS tooling
  • ➖ Adds build/asset pipeline or hosting considerations
  • ➖ Makes the deck less portable as a single-file artifact
2. Adopt a presentation framework (Reveal.js, Slidev)
  • ➕ Built-in theming, transitions, and responsive behavior
  • ➕ Plugin ecosystem for code highlighting and layouts
  • ➖ Introduces a dependency and framework constraints
  • ➖ Harder to keep the current lightweight, self-contained deck

Recommendation: The current single-file approach is reasonable for a self-contained, easy-to-host docs deck, especially since the slide interaction framework is intentionally preserved. If the deck continues to grow or needs shared styling with the landing page, consider extracting CSS/JS into separate files as a follow-up for maintainability without changing behavior.

Files changed (1) +314 / -616

Documentation (1) +314 / -616
index.htmlDark theme redesign, responsive polish, and updated quickstart/CTAs +314/-616

Dark theme redesign, responsive polish, and updated quickstart/CTAs

• Reworks the deck styling into a dark, dev-tool theme with CSS variables, updated typography (Inter/JetBrains Mono), and refreshed UI components (cards, banners, tables, code blocks, CTAs). Updates slide copy and examples to match the shipped product, including the scoped npm package name and the self-serve onboarding/quickstart flow. Adds a live-site nav link and closing-slide CTAs while keeping the existing slide navigation/autoplay/fullscreen logic intact.

docs/index.html

@qodo-code-review

Copy link
Copy Markdown

Code Review by Qodo

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

Context used
✅ Compliance rules (platform): 25 rules
✅ Skills: blindfold

Grey Divider


Action required

1. process.env.OPENAI_API_KEY shown 📜 Skill insight ⛨ Security
Description
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.
Code

docs/index.html[R491-492]

const value = process.env.OPENAI_API_KEY;<br />
await t3.seedSecret(opts.name, value);<br />
-// value drops out of scope — never logged, never returned
Evidence
PR Compliance ID 1915813 disallows reading provider API keys from process.env (except
T3N_API_KEY). The modified presentation explicitly includes `const value =
process.env.OPENAI_API_KEY;` in the new content.

docs/index.html[488-494]
Skill: blindfold

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

## 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



Remediation recommended

2. explain.md not updated 📘 Rule violation § Compliance
Description
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.
Code

docs/index.html[R589-605]

+<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&nbsp;&nbsp;<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>
Evidence
PR Compliance ID 1915713 requires a status-row update and a new dated log entry for material
changes. The PR materially changes the Quickstart content and other deck content in
docs/index.html, while explain.md shows no 2026-07-14 entry (latest visible entry is
2026-06-28).

Rule 1915713: Update explain.md status row and dated log entry for each material change
docs/index.html[589-605]
explain.md[41-53]
explain.md[70-78]

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

## 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


3. Docs npm name mismatch 🐞 Bug ≡ Correctness
Description
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.
Code

docs/index.html[R564-571]

+          <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> });
Evidence
The published package name is @fiscalmindset/blindfold, but the presentation now documents that
scoped name while other docs still show import ... from "blindfold", which would not resolve to
the scoped package.

packages/blindfold/package.json[1-5]
docs/index.html[564-572]
README.md[472-480]
usage.md[88-96]
usage.md[226-234]
docs/04-usage.md[176-185]

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 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



Informational

4. Google Fonts runtime dependency 🐞 Bug ☼ Reliability
Description
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.
Code

docs/index.html[R10-12]

+  <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" />
Evidence
The HTML now explicitly preconnects to and loads CSS from Google Fonts domains, which introduces
external network calls at render time.

docs/index.html[9-13]

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 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


Grey Divider

Qodo Logo

Comment thread docs/index.html
Comment on lines 491 to 492
const value = process.env.OPENAI_API_KEY;<br />
await t3.seedSecret(opts.name, value);<br />

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Action required

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

Comment thread docs/index.html
Comment on lines +589 to 605
<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&nbsp;&nbsp;<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>

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remediation recommended

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

Comment thread docs/index.html
Comment on lines +564 to +571
<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> });

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remediation recommended

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

Comment thread docs/index.html
Comment on lines +10 to +12
<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" />

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Informational

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant