Building Tool Time

Adventures are feature-focused (activities about TNT itself). Tool Time is code-quality focused (external novice code improved by AI). Mixing them would dilute both. A clean separate card on the home page, its own subdirectory, its own color identity — confirmed in Session 1 and never revisited.

The triple-layer pun — Home Improvement reference, Tool Time format, Al = A.I. — became the organizing metaphor for the entire venue. Tim is the novice (everyone). Al is the AI sidekick. The workshop is the code. Everything else flows from this.

The TNT snapshot confirmed what intuition suggested: no structured entry point for first-time students exists anywhere on the site. Tool Time’s short code + visible SPARK process + modeled improvement is exactly that on-ramp. This elevated the project from “fun addition” to “fills a documented need.”

Of seven naming candidates analyzed (Tool Time, The Workshop, Al’s Corner, More Code Power, The Upgrade Shop, SPARK Shop), “Tool Time: AI Edition” won because it names the format (a show about improving things), not just the content. It works for a visitor who has never heard of the show, and rewards the one who has.

An <a> element cannot legally contain another <a> element. This is one of HTML’s oldest and most commonly broken rules. The fix — using a div with click/keyboard handlers for the outer wrapper — is the standard workaround for “card that is clickable but also contains inner links.”

Cross Training’s entry cards solved this same problem and the solution was already in the codebase. Good developers reuse patterns they’ve already solved — and good AI users think to ask “have I seen this before?”

Other destination cards use opacity: 0.5 on the background image. Tool Time’s card uses opacity: 0.72 — a deliberate exception because the image is doing pedagogical work: Tim and the AI robot are the entire story of the venue at a glance. Muting that story to match grid convention would be the wrong trade. A custom body gradient (rgba(17,10,2,0.93) → rgba(100,45,5,0.18)) keeps the text readable while the image breathes at full warmth behind it.

Placement: immediately after Dept. of Innovation and before S.P.A.R.K. Speeches. Both neighbors are pedagogy-focused (course guide; student presentations). Tool Time fits naturally between them as the applied practice layer: learn the courses → watch SPARK in action on real code → present your own SPARK journey.

Three placement options were considered:

• Expand the principle cards (right column of “What is Tool Time?”) — rejected: would crowd the existing four principles and dilute both.
• Inline callout in the body copy — rejected: CRAFT deserves full visual treatment, not a parenthetical box.
• New section between Entry Gallery and S.P.A.R.K. links — chosen: restores the light→dark→light→dark alternating rhythm and positions CRAFT as the natural bridge between “here are the entries” and “here’s where to learn more.”

Framing: “Tim always had the tools in front of him. The difference between Tim and Al wasn’t the drill — it was knowing how to use it.” This opening ties CRAFT to the venue’s metaphor directly rather than introducing the acronym cold. The R card reads “Cast your Al” — a deliberate nod to the Al = A.I. pun that rewards close readers.

No third button. Instead:

1. Hero text-nudge — a small amber-on-translucent line below the two buttons: “🔧 New to prompting? Meet your five C.R.A.F.T. tools ↓” Fades from dim to amber on hover. Clearly subordinate; not competing.
2. “Your turn” callout link — the existing callout box in the What section gains one closing sentence: “Not sure how to write that first prompt? Meet your five C.R.A.F.T. tools ↓” Contextually placed at the exact moment the visitor is thinking about prompting.

This preserves the two-button hero hierarchy, adds zero visual noise, and creates two distinct entry paths to CRAFT for visitors at different scroll depths.

Four design decisions worth noting:

1. Hero image: the Tool Time AI-generated photo. Not a Home Improvement still (copyright risk) but our own generated image — Tim with the drill, Al the robot in red flannel. It tells the whole story and is entirely TNT’s own asset.
2. Amber palette throughout. The iRobot page uses I,Robot’s steel-blue. This page uses Tool Time’s amber #E8862A consistently. The color signals which TNT venue this clip belongs to before the visitor reads a word.
3. Tim vs. Al comparison cards. Instead of a plain text explanation of the TNT connection, a two-column comparison grid (Tim’s side in warm red, Al’s side in amber) makes the parallel visual and immediately scannable.
4. Clip descriptions flagged as TTG-to-update. A <!-- TTG: update clip-label and intro paragraph --> comment marks both clip sections. The structure is complete; only the scene-specific context needs filling in once the clips are confirmed.

Per-app chatlogs, in each entry’s folder, starting with Entry #2. Rationale:

• Different readers, different questions — venue vs. entry
• Scale: 20 entries × detailed chatlog = unmanageable main document
• Navigation: the entry chatlog is a natural companion to the entry page, one link away
• Self-containment: each app folder holds everything about that app

The main Tool Time chatlog will note this transition: “Starting with Entry #2, app-specific development logs live in each entry’s folder. See jacksonIrisChatlog.html in JacksonIris/ for the Entry #1 model.”

Root cause: #hero in jacksonIrisStyles.css used display: flex; align-items: center (vertical centering only) but was missing text-align: center (horizontal text centering). The exemplar (iRobot) never set display:flex on the hero — it used simpler layout and relied on .hero-content from tnt-base-styles.css. When the Jackson hero added flex for vertical alignment, it deviated from the exemplar without carrying over the text-align that the base styles had been providing.

Fix: Two properties added to #hero in the shared stylesheet:

justify-content: center;
text-align: center;

Why one fix covers two pages: Both jacksonIrisOriginal.html and jacksonIrisChatlog.html link to the same jacksonIrisStyles.css. Shared stylesheets mean shared fixes — and shared bugs. This is why the shared-style architecture was the right call.

The Home Improvement movie clips are a venue-level hook, not an entry-level element. The connection works like this:

• The Tool Time home page explains the Tim/Al/A.I. metaphor and links to the movie clips — that is the right place for that context.
• The Tool Time chatlog documents the clips as the venue’s founding hook — also the right place.
• Individual entries are about a specific student’s code. The clip connection is irrelevant once a visitor is inside an entry. Adding it there creates navigation noise without adding value.

For all future entries, the back bar standard is: ← Tool Time Home  |  Entry Chatlog  |  (optional: any entry-specific companion link). No Home Improvement clip link.

The base styles already define #hero { text-align: center } — so every page that loads tnt-base-styles.css gets text centering in the hero for free. But that is not what is failing.

The problem is .hero-content { max-width: 820px } with no margin: 0 auto. Here is the full nesting chain:

<section id="hero">              ← text-align: center (from base styles)
  <div class="container">        ← full-width Bootstrap block
    <div class="hero-content">    ← max-width: 820px, but LEFT-aligned!

On wide screens where .container exceeds 820px, the .hero-content box starts from the LEFT edge and only fills 820px of the available width. Text inside it is centered within that left-positioned box — so the text is technically centered in its container, but the container itself is stuck against the left margin. Visually: left-aligned.

margin: 0 auto is what centers a block element horizontally within its parent. Without it, max-width: 820px constrains the width but does not move the box to the center of the page.

Updated in both jacksonIrisStyles.css and seanWeightlifterOriginalStyles.css:

/* BEFORE (broke on wide screens) */
.hero-content { max-width: 820px; }

/* AFTER (correct) */
.hero-content {
    max-width: 820px;
    margin: 0 auto;       /* centers the box within .container */
    text-align: center;   /* centers text within the box */
}

Two properties, two different jobs: margin: 0 auto positions the block; text-align: center positions the text within it. Both are required.

C.R.A.P. is a four-principle design framework used in graphic design, UI design, and document layout. It stands for:

Quick rule of thumb: If something looks “a bit off” in your layout, it is usually a C.R.A.P. violation. Ask: is the contrast too weak? Is something inconsistently styled? Is an element misaligned? Is something placed far from what it describes?

The before: Each card had an emoji icon floating over the thumbnail image. This violated Proximity — the icon identified the entry content, but it was placed adjacent to the artwork rather than beside the entry label it belongs to. For Jackson’s eye sketch the icon happened to reinforce the image; for Sean’s weightlifter artwork it actively competed with it.

The fix: Move the icon to sit immediately to the left of the Entry #N / Title stack — exactly the pattern Creative Cross Training uses (cct-entry-header). Now the icon, entry number, and title form a visual unit that reads left-to-right as a single piece of identifying information.

Which C.R.A.P. principles this satisfies:

• Proximity — the icon and its label now live together, creating a clear header unit
• Alignment — icon and text are vertically aligned on a flex baseline
• Repetition — every card now has the same header structure: icon | entry# / title. Consistent across all entries.
• Contrast — the artwork (thumbnail) and the entry identity (header) are now visually separated and serve distinct purposes

The <pre> code blocks in Sessions 14 and 15 were styled with color: rgba(255,255,255,0.80) (near-white text) and background: rgba(255,255,255,0.04) or rgba(232,134,42,0.07) (nearly transparent backgrounds). On a dark page those colors work. On this chatlog’s warm cream body (#f8f4ef), both backgrounds render as cream — and white text on cream is invisible.

The same error appeared on three data tables styled with color: rgba(255,255,255,0.82).

Root cause: The AI generated these color values thinking in terms of a dark-background page (the per-entry chatlogs use dark backgrounds). The main Tool Time chatlog uses a light background. The AI did not check the rendering context before assigning text colors — and did not notice the mismatch. TTG did.

Code blocks: Changed to background: #1c1208 (dark warm) with color: #fbbf24 (amber). Dark background + warm amber text = high contrast code display consistent with the Tool Time palette.

Tables: Changed color: rgba(255,255,255,0.82) to color: #2d1b04 (dark brown) — inherits the page’s dark text convention and reads clearly on the cream background.

Mojibake (from Japanese: “garbled character”) is what happens when text encoded in one character encoding is read and displayed using a different one. In this case:

1. The chatlog had correctly encoded UTF-8 emoji (e.g., 💡 LIGHT BULB, stored as bytes F0 9F 92 A1).
2. A PowerShell Set-Content command re-saved the entire file. PowerShell’s default encoding on this system read those bytes as Windows-1252 (CP1252), treating each byte as a separate character: F0→ð, 9F→Ÿ, 92→’, A1→¡.
3. Those Latin characters were then saved back as UTF-8, permanently encoding the wrong characters. What was 💡 became ðŸ'¡ in the file.
4. A UTF-8 BOM (Byte Order Mark, EF BB BF) was also prepended by Set-Content -Encoding UTF8, which can cause further rendering issues.

The PowerShell command that caused it: The table-color fix in Session 16 used Get-Content $path -Raw (which read with the wrong encoding) followed by Set-Content $path $fixed -Encoding UTF8 (which saved with BOM and preserved the corrupted content).

Because the corruption was complex (four distinct mojibake patterns, some with undefined CP1252 bytes stripped at different stages), three Python fix passes were required:

• Pass 1: Stripped the BOM, replaced 692 direct Unicode characters (bullets •, em-dashes —, nbsp) with HTML entities.
• Pass 2: Computed the CP1252 mojibake form for each emoji and replaced 201 garbled sequences (check marks, warning signs, em-dashes in text, arrows, pencil icon).
• Pass 3: Handled 8 truncated sequences where an undefined CP1252 byte had already been stripped (the 4th byte of 🔍 and the 3rd byte of ←).

Result: Zero suspect characters remaining. All emoji are now HTML entities (encoding-neutral) and the file has no BOM.

Rule 1 — Never use Get-Content / Set-Content on HTML files. This single command is the root cause of every mojibake session we experienced. Any time a bulk string replacement must happen in PowerShell, use the safe pattern instead:

$txt = [System.IO.File]::ReadAllText($path, [System.Text.Encoding]::UTF8)
$txt = $txt -replace 'old-pattern', 'new-value'
[System.IO.File]::WriteAllText($path, $txt,
    (New-Object System.Text.UTF8Encoding $false))
# The $false = no BOM. Bypasses PowerShell's encoding layer entirely.

Rule 2 — Use the edit tool for all file modifications. The AI’s built-in edit tool handles encoding correctly and never touches PowerShell’s encoding layer. PowerShell is only needed for bulk multi-line replacements — and even then, use Rule 1.

Rule 3 — Write emoji as HTML entities from the start. 🎯 survives any text-processing pipeline. A direct 🎯 in source code does not. Every Tool Time chatlog session uses HTML entities in SPARK banner icons for exactly this reason.

If mojibake ever appears again in any TNT HTML file, give the AI this single prompt and nothing else:

The vibe code phrase:

"Fix UTF-8 mojibake in [filename]. Strip BOM,
replace all direct emoji and special characters
with HTML entities, remove all C1 control
characters (U+0080–U+009F), and save as
UTF-8 without BOM using Python."

That phrase contains every piece of information the AI needs to generate the correct fix script in one pass:

• “Fix UTF-8 mojibake” — names the problem type precisely; triggers the correct diagnosis path
• “Strip BOM” — addresses the UTF-8 Byte Order Mark that Set-Content adds
• “Replace emoji/special chars with HTML entities” — the encoding-neutral fix that survives any future pipeline
• “Remove C1 control characters (U+0080–U+009F)” — kills the invisible residue left by undefined CP1252 bytes like 0x8F
• “UTF-8 without BOM using Python” — specifies the safe write method that skips PowerShell’s encoding layer

TTG’s observation is exactly right, and the phrasing “I’m embarrassed I just noticed” is worth examining: the prompts are the human side of the AI-human conversation. Without them, a chatlog is a monologue — Copilot talking to itself. With them, it’s a record of a real collaboration that novices can study, pattern-match against, and improve upon.

Specifically, prompts serve three functions that the Copilot analysis alone cannot:

1. They are the model for novice prompting. Seeing what TTG asked — and being able to critique it — is the entire pedagogical point of the chatlog critique boxes.
2. They make the record honest. What was the human’s role? What did they decide vs. what did the AI suggest? Without the prompt, the record suggests Copilot operated autonomously. It didn’t.
3. They anchor the K-Know takeaways. Advice like “name the task” or “attach the context” has no example to point to without the actual prompt in front of the reader.

Every session in every app-level chatlog must include TTG’s prompt in a chat-turn bubble-user element. Applied retroactively to:

• JacksonIris/jacksonIrisChatlog.html — Session 1 initiating prompt added; Sessions 2–3 marked as “continuation of Session 1”
• SeansWeightlifter/seanWeightlifterChatlog.html — Session 1 initiating prompt added; Sessions 2–3 marked as continuation; Session 4 editor-error prompt added

For all future app entries: The session with the initiating build prompt comes first, before any analysis or decision boxes. If a session was generated as a sub-analysis of the same prompt (no new user input), mark it explicitly as “Continuation of Session N — no separate prompt.” Never leave a session without clear attribution of where the direction came from.

Two placements, both woven rather than appended:

1. Callout box in “What is Tool Time?” — full-border amber box after the “Your turn” callout, with the vibe-code-talent-recruiter framing and a direct link. Lives in the light section where first-time visitors read the explanation.
2. Featured full-width card in the S.P.A.R.K. cross-links — below the 2×2 grid of link cards, spanning the full column width with enlarged icon and emphasized text. Visible to visitors who have scrolled through the entries and are looking for depth.

The mojibake illustration in Session 17 used ðŸ'¡ to show the garbled form of 💡 (the 💡 emoji). Three of the four entities are valid. One is not.

The conceptual trap: When Windows-1252 decodes byte 0x9F, it displays the character Ÿ (U+0178, LATIN CAPITAL LETTER Y WITH DIAERESIS). But HTML5 numeric references map directly to Unicode code points — and Unicode code point U+009F is a C1 control character, not Ÿ. The byte and the code point share the same hex number, but they are in completely different encoding systems.

The fix: Replace Ÿ with Ÿ (U+0178 = Ÿ). This represents the character that actually appears when Windows-1252 decodes byte 0x9F, which is the correct character for the mojibake illustration.

The rule: HTML5 forbids numeric character references in the range U+0080–U+009F (the C1 control block). Never use € through Ÿ as HTML entities. Use the corresponding Windows-1252 character’s actual Unicode code point instead if you need to display it.

The critique across 26 sessions has flagged a missing “deliverables list” as a recurring weakness. TTG’s challenge forces a cleaner definition of what that actually means. There are two different things that could be required:

The corrected rule: A deliverables specification is complete when all expected outputs are named and the AI can identify each one unambiguously. A numbered list is the clearest format — but it is not the only valid format. Session 26 met the substance of the requirement, even without the canonical format.

The A−→A upgrade is warranted. The deliverables were present. The critique was penalizing a stylistic preference, not a genuine gap. If a prompt names every output and the AI produces every output without a follow-up round, the deliverables specification was sufficient. Session 26 qualifies.