Build a Smart Test & Glossary Generator with AI

Build me a single-file HTML tool called "Smart Test & Glossary Generator". It should have:

- A dark background using #0a0f1a with surface cards at #111827
- A top header with the title in a serif font and a short subtitle
- A left column with: a textarea labeled "Paste your JavaScript function here", a dropdown to select skill level (Beginner, Intermediate, Advanced), and a green "Analyze" button
- A right section with three output panels stacked vertically:
  1. "Generated Tests" — shows AI-written Jest unit tests
  2. "Glossary Terms" — shows tech terms and plain-English definitions
  3. "AI Decision Log" — shows what decisions the sampling logic made and why
- Each panel should have a "Copy" button in the top-right corner
- Use 'DM Sans' for body text and 'JetBrains Mono' for code blocks
- Include placeholder text in each output panel that says "Run analysis to see results here"
- All panels should have a subtle border at rgba(255,255,255,0.05) and rounded corners
- Do not wire up any JavaScript logic yet — just the HTML and CSS layout

Now add the JavaScript logic for the test generator. When the user clicks "Analyze", read the code from the textarea and the selected skill level from the dropdown.

For the "Generated Tests" panel, write a function called generateTests(code, skillLevel) that:
1. Parses the function name from the code string using a regex
2. Builds a detailed prompt string that instructs an AI (simulated here) to write Jest unit tests
3. The prompt string should explicitly ask for: one happy path test, one edge case test (empty input, zero, null), and one test that expects an error or failure
4. For now, instead of calling a real API, have the function return a realistic hardcoded example output block of Jest tests as a template string — use a simple addition function called "add(a, b)" as the example, with describe() and it() blocks
5. Display the output in the "Generated Tests" panel inside a styled code block
6. If no function is detected in the textarea, show an error message in the panel instead

Do not touch the other two panels yet. Show me the full updated index.html file.

Now add the glossary extractor logic to the existing file. When the user clicks "Analyze", also run a function called extractGlossaryTerms(code, skillLevel) that does the following:

1. Scan the code string for any of these technical terms (match case-insensitively): async, await, callback, promise, prototype, destructuring, closure, arrow function, reduce, map, filter, typeof, spread operator, rest parameter, try/catch
2. Return only the terms that actually appear in the pasted code
3. For each matched term, generate a plain-English definition object with: { term, definition, example }
4. Adjust the definition depth based on skillLevel:
   - Beginner: one sentence, no jargon, real-world analogy
   - Intermediate: two sentences with one code concept mentioned
   - Advanced: two sentences using correct technical vocabulary
5. Hardcode realistic definitions for at least 5 of the terms above as a dictionary inside the function
6. Render each term in the "Glossary Terms" panel as a card with: the term in green bold, the definition below it, and the example in a small monospaced block
7. If no known terms are found, show "No recognized terms found — try pasting a more complex function"

Show me the full updated file.

Now build the "AI Decision Log" panel logic. This panel simulates MCP sampling — the idea that an AI agent inspects context and makes a series of small decisions rather than applying one fixed rule.

Write a function called runSamplingLog(code, skillLevel, detectedTerms) that returns an array of decision log entries. Each entry is a plain-English sentence explaining a judgment call the system made. Include at least these decision checks:

1. Code length check: If the code is under 5 lines, log "Code is short — generating minimal test suite (1 happy path, 1 edge case)". If over 5 lines, log "Code is substantial — expanding test suite to include error condition tests."
2. Skill level routing: Log which definition depth was chosen and why, e.g. "User selected Beginner — using analogy-first definitions to reduce jargon load."
3. Term count decision: If more than 3 glossary terms were found, log "High term density detected — prioritizing the 3 most commonly misunderstood terms in the glossary.". If 0 terms found, log "No recognized terms in code — skipping glossary generation."
4. Async detection: If the word 'async' appears in the code, log "Async pattern detected — flagging Promise and await for glossary inclusion even if not explicitly listed."
5. Final summary line: Always log "Analysis complete. Decisions made: [N]. Confidence: High."

Render each log entry in the "AI Decision Log" panel as a numbered line in a monospaced font, with a small green dot icon before each line. Show me the full updated file.

Do a final polish pass on the tool. Make these changes to the existing file:

1. Loading state: When the user clicks "Analyze", immediately change the button text to "Analyzing..." and disable it. After a 600ms simulated delay (using setTimeout), run all three panel functions and then re-enable the button with its original text. This makes it feel like real processing is happening.

2. Reset button: Add a secondary "Reset" button next to the Analyze button. When clicked, it should: clear the textarea, reset the skill-level dropdown to Beginner, and restore all three panels to their original placeholder text.

3. Empty state guard: Before running analysis, check that the textarea is not empty or only whitespace. If it is, show a small red error message below the textarea that says "Please paste a JavaScript function before analyzing." — remove this message once the user starts typing.

4. Scroll behavior: After analysis completes, smoothly scroll the page down to the output panels using scrollIntoView with behavior: smooth.

5. Page footer: Add a simple footer that says "Built with Claude · Smart Test & Glossary Generator" in small muted text.

Show me the complete final index.html file with all five steps integrated.