v1.9.9 – Version Tracking, Cost Calculator, Deep Dive Slides

Version Tracking + "New Content" Badge

• Workshop version (WORKSHOP_VERSION) saved to localStorage alongside progression
• Resume modal now shows a green "Neue Inhalte!" / "New content!" badge when the version has changed since the user's last visit
• Badge shows version diff (e.g. "Version 1.9.9 (vorher 1.9.5)") and new slide count
• Version + total slides shown in modal footer: v1.9.9 • 125 slides
• To update: change WORKSHOP_VERSION constant in main.js

Cost Calculator (#cost-calculator)

New slide after benchmarks with concrete pricing:

• 9 models compared: Opus, Sonnet, Haiku, GPT-5.1, GPT-4.1 Nano, Gemini, DeepSeek, Qwen, Ollama
• 2048 game example: 50K input + 20K output tokens = $0.45 (Sonnet), $0.15 (Haiku), <$0.01 (DeepSeek)
• Token saving tip: Haiku for Explore/Plan = 80-90% less cost
• Live prices linked to pricepertoken.com

4 New Deep Dive Slides

• OpenCode Agents (#deepdive-agents): Built-in + custom, permissions, token savings
• OpenCode Skills (#deepdive-skills-detail): SKILL.md structure, ideas, permissions
• Model Recommendations (#deepdive-models): Task-to-model table, cost optimization
• Best Practices Repo (#deepdive-bestpractices): github.com/weisser-dev/opencode-best-practices + CLI vision

Cleanup

• Removed old "Skills + Alle Links" catchall slide (content now in dedicated slides)

v1.9.8 – Cost Calculator, Deep Dive Agents/Skills/Models/Best Practices

New: Cost Calculator Slide (#cost-calculator)

After the benchmarks slide, a new cost comparison with a concrete 2048 game example:

Model	2048 Game Cost	Quality
Claude Opus 4.6	~$0.75	★★★★★
Claude Sonnet 4.6	~$0.45	★★★★
Claude Haiku 4.5	~$0.15	★★★
GPT-5.1 Codex	~$0.33	★★★★
GPT-4.1 Nano	~$0.01	★★
DeepSeek V3.2	<$0.01	★★★
Ollama (local)	$0.00	★-★★★

Token saving tip: Haiku for Explore/Plan + Sonnet for Build = ~$0.25 per game.
Live prices: pricepertoken.com

4 New Deep Dive Slides

• OpenCode Agents: Built-in + custom agents, permissions, token savings
• OpenCode Skills: SKILL.md structure, ideas, permission control
• Model Recommendations: Task-to-model table, 80-90% cost reduction tips
• Best Practices Repo: github.com/weisser-dev/opencode-best-practices + CLI vision

Cleanup

• Removed old "Skills + Alle Links" slide (replaced by dedicated deep dives)

v1.9.7 – Deep Dive: Agents, Skills, Models, Best Practices

4 New Deep Dive Slides (DE + EN)

OpenCode Agents (#deepdive-agents)

• Built-in agents: Build (full tools), Plan (read-only), General (subagent), Explore (fast search)
• Create custom agents via .opencode/agents/review.md with markdown frontmatter
• JSON config with fine-grained permissions per agent (allow/ask/deny per tool)
• Pro tips: Tab to switch, @mention subagents, Haiku for simple tasks = 90% savings
• Links: Docs, OpenAgentsControl, Claude Sub-Agents

OpenCode Skills (#deepdive-skills-detail)

• SKILL.md structure with YAML frontmatter (name, description)
• Storage: .opencode/skills/<name>/SKILL.md (project) or ~/.config/opencode/skills/ (global)
• Compatible with .claude/skills/ and .agents/skills/
• Skill ideas: git-release, pr-review, migration, test-patterns, deploy
• Permission control with glob patterns (allow/deny/ask)

Model Recommendations (#deepdive-models)

Task-to-model mapping for cost optimization:

Task	Model	Cost
Complex Coding	Opus 4.6	$$$$
Standard Coding	Sonnet 4.6	$$
Code Review	Sonnet 4.6	$$
Docs / Explore	Haiku 4.5	$
Title / Summary	Haiku / MiniMax	¢
Brainstorming	GPT-5 / Gemini	$$
Local Testing	Ollama + Qwen	Free

Token saving tip: Haiku for Explore + Plan + Docs = 80-90% less cost

Best Practices Repo (#deepdive-bestpractices)

• Links to github.com/weisser-dev/opencode-best-practices
• Vision: npx opencode-advanced-setup CLI that analyzes your project, suggests agents/skills/models, creates configs
• Contributions welcome!

v1.9.6 – Internal Slide Scroll, Arch Diagram Cap, Spec Stage Fix

Fixes

Slide Internal Scroll

Slides now have fixed height: 100vh (was min-height) so that overflow-y: auto creates actual scrollbars for slides with long content. The wheel/trackpad handler detects when a slide is internally scrollable and lets you scroll through the content first — only navigating to the next slide when you reach the bottom edge. Verified: 15 slides with internal scroll at 1280x800.

Architecture Builder Diagram Cap

The diagram container is now capped at max-height: 60vh with overflow: auto. The dropdown selector and title always remain visible at the top. If a diagram is too tall (e.g. Docs Agent with many nodes), the white diagram area scrolls internally.

Kiro Spec Stage (Self-Paced)

The initialization code that shows all 3 spec columns was inside a presenterMode-only block and never executed in self-paced mode. Now runs in both modes: self-paced shows all columns immediately (step=2), presenter mode retains step-by-step reveal.

Wheel Handler

Correctly checks slideEl.scrollHeight > slideEl.clientHeight on the slide element itself (not .slide-content), enabling proper overflow detection now that slides have fixed height.

v1.9.5 – Scroll Fix, Kiro Specs, Modal, Security Slide

Fixes

Wheel Scroll on Overflowing Slides

Slides with content taller than the viewport can now be scrolled internally. The wheel handler checks if the current slide has scrollable content and only navigates to the next/prev slide when you've reached the top or bottom edge. Previously, all wheel events were intercepted, making it impossible to scroll long slides.

Kiro Spec Stage (Self-Paced Mode)

All 3 spec columns (Requirements, Design, Implementation) are now immediately visible in self-paced/experience mode. Previously only the first column was shown (step-by-step reveal intended for presenter mode only). Presenter mode retains the step-by-step animation.

Resume Modal Overlay

The "Welcome back" modal now has a much darker overlay (92% opacity + 8px blur) so white slide backgrounds don't bleed through, especially on mobile.

New

Security Notice Slide (#handson-security)

First slide in Hands-On section with:

• 3 questions to ask for every MCP tool (what can it do, permissions, worst case)
• 4 concrete worst-case examples with mitigations (GitHub, Confluence, Shell, Database)
• "Agent = intern with your credentials" rule of thumb
• Forward reference to Deep Dive Docker sandbox slide

v1.9.4 – Security Slides, MCP Build, Sandbox Docker, Smooth Scroll

Security Notice (Hands-On)

New slide #handson-security as first slide after Hands-On divider:

• 3 questions for every MCP: What can it do? What permissions? What's the worst case?
• 4 concrete examples with mitigations:
  • GitHub MCP: all repos deleted → read-only token
  • Confluence MCP: content overwritten → read-only API key
  • Shell/Filesystem: files deleted → Docker sandbox
  • Database MCP: DROP TABLE → read-only DB user
• Faustregel: "Agent = new intern with your credentials"
• Forward reference to Deep Dive Docker sandbox

Sandbox Recommendation (Deep Dive)

New slide #deepdive-recommendation:

• Docker example for isolated OpenCode execution
• Only mount project folder, tokens via -e env var, --rm
• Token security rules: no global credentials, project-specific, read-only

Build Your Own MCP

New slide #build-mcp in Agentic AI:

• Node.js MCP Server example with registerTool + Zod schema
• OpenCode opencode.json integration
• mcp.so linked (18,000+ ready MCPs)
• Links to official MCP docs (build-server, build-client)

Other Changes

• mcp.so linked as clickable URL on KI-Internet slide
• agent-architecture removed from Basics (covered in Agentic AI)
• Forward references on llm-to-agent to Basics + Agentic AI
• Light-theme code elements fixed (no more black-on-black)
• Custom smooth scroll (900ms easeInOutQuart)
• Deep-link flicker fix + ?uc= compact layout

v1.9.3 – MCP Build Slide, mcp.so Links, Smooth Scroll, Arch Cleanup

New Slide: Build Your Own MCP (#build-mcp)

New slide in the Agentic AI section:

• Node.js MCP Server example: registerTool with Zod schema, STDIO transport
• OpenCode integration: opencode.json config snippet
• 3-step setup: npm install → tsc → node
• Use cases: Internal API, DB, Jira, Email, K8s, Monitoring
• Docs: Build Server + Build Client + 18,000+ MCPs on mcp.so

mcp.so Links

• "18.000+ MCP Server" on the KI-Internet MCP slide now links to mcp.so (DE + EN)
• Build MCP slide footer also links to mcp.so

Custom Smooth Scroll

• Removed CSS scroll-snap on desktop — JS animation (900ms easeInOutQuart)
• Wheel handler: 1 slide per scroll, 1s cooldown
• Calm, pleasant transitions

Architecture Cleanup

• Removed agent-architecture from Basics (duplicate, covered in Agentic AI)
• Forward references on llm-to-agent: points to Basics + Agentic AI deep dive

Fixes

• Deep-link scroll flicker eliminated
• ?uc= auto-load with compact layout
• Architecture Builder auto-generates on dropdown change

v1.9.2 – Smooth Scroll, Arch Builder Polish, Deep-Link Fixes

Custom Smooth Scroll

The desktop slide transitions have been completely reworked:

• Removed CSS scroll-snap — no more "harsh snapping" between slides
• Custom JS animation: 900ms with easeInOutQuart easing for a calm, pleasant transition
• Wheel handler: Each mouse wheel scroll navigates exactly one slide with a 1-second cooldown
• isScrolling lock: Prevents multiple scrolls from overlapping during animation
• Jumps of more than 3 slides still use instant scroll (no slow animation across many slides)

Architecture Builder Polish

• Auto-generate: Selecting a use case from the dropdown immediately generates the diagram (no button click needed)
• Centered CTA: "Wähle einen Use Case, um die Architektur zu sehen:" shown when nothing selected
• Compact layout: After first selection, dropdown moves left-aligned and CTA disappears
• Deep-link fix: ?uc=anomaly#arch-builder now immediately shows compact layout
• Watermark: agentic-ai.weisser.dev → [Use Case] Agentic AI Architecture rendered live in SVG inside the largest subgraph box
• Simplified PNG export: No extra diagonal watermark — SVG watermark carries over to PNG

Deep-Link Fix

• Opening URLs like ?uc=anomaly#arch-builder no longer causes visible scrolling/flashing through all slides. The app container is hidden until the browser has jumped to the target slide.

Changelog

• CHANGELOG.md updated with v1.9.2 entry

v1.9.1 – Deep-Link Fix, README & Changelog

Fixes

• Deep-link scroll flicker: Opening URLs like ?uc=anomaly#arch-builder no longer visibly scrolls through all slides. App container is hidden until browser has jumped to the target slide.

Documentation

• README.md completely updated (DE + EN):
  • Added "Agentic AI" section with all 6 new topics
  • Added workshop feedback slides (GPT, Training vs Inference, NN Learning, Common Sense, npm, Vite, Dev-Workflow)
  • Added Progression Resume, Architecture Builder, Mobile improvements
  • Updated tech stack (Mermaid.js, Playwright)
  • Updated project structure (06c-agentic.js)
  • Added 6 new sources (Dataiku, Vectorize, blog posts, Mermaid)
• CHANGELOG.md created with complete history from v1.0.0 to v1.9.1

Summary of all changes since v1.0.0

This release brings the workshop from 100 slides to 117 slides across 11 sections (was 10), with:

• 🎯 New "Agentic AI" section (7 slides: Definition, Layer Models, Architecture Deep Dive, Interactive Builder, Disruption, Resilience)
• 🏗️ Interactive Architecture Builder with 11 Mermaid.js diagrams, deployment zones, share/export
• 📱 Mobile overhaul: swipe fixes, table scrolling, text overflow fixes, progression resume
• 🧠 Workshop feedback slides: GPT explained, Training vs Inference, NN Learning, Common Sense, npm/Vite/Dev-Workflow
• ⚡ UX improvements: Progression resume modal, deep-linking, desktop nav fix, clean share/export buttons

v1.9.0 – Mobile Tables, Arch Builder UX, Watermark

Mobile Tables Fix

• All tables on mobile are now horizontally scrollable instead of squished
• Table cells keep white-space: nowrap so words like "Ökosystem" don't break mid-word
• Tables are wrapped in scroll containers that the swipe handler recognizes — scrolling a table does NOT trigger slide navigation
• Affects all 7 slides with tables (LLM comparison, npm packages, Vite, Bedrock models, etc.)

Architecture Builder UX

• No more "Generate" button — selecting a use case from the dropdown immediately generates the diagram
• Centered CTA with prompt text "Wähle einen Use Case, um die Architektur zu sehen:" when nothing is selected
• Left-aligned dropdown after first selection (CTA text disappears, layout shifts to compact)
• Grouped dropdown with <optgroup>: Lokal (2), Remote (6), Headless (3) = 11 use cases total

Watermark & Export

• Live watermark in SVG: agentic-ai.weisser.dev → [Use Case] Agentic AI Architecture placed inside the largest subgraph box (8px, 50% opacity)
• PNG export simply clones the SVG as-is (watermark included), no extra overlay needed
• Clean buttons: Link (SVG chain icon, copies URL with ?uc= param) + PNG (SVG download icon)
• Footer: Shows use case title as diagram caption

Architecture Deep Dive (2-Column, Full Layers)

Both columns now show ALL 7 layers (Interface/Trigger → Framework → LLM → Context → MCP/Tools → Backends → Output) with concrete options per layer

All Mermaid Diagrams

• Horizontal layout (LR) optimized for desktop
• User actors on all 11 presets (Developer, Customer, Employee, Admin, Cron, Log Stream)
• Bidirectional arrows fixed (Git MCP reads+writes, Confluence write-only, Search reads back)
• Descriptive labels (Whisper STT "Wandelt Audio → Text", etc.)
• 3 headless use cases: CVE Auto-Patching, Anomaly Detection, Daily System Health Check

Other Fixes

• Arch builder max-width only applies on desktop (min-width: 769px), no more squishing on mobile
• Mobile "Desktop only" hint for arch builder renders at full width
• Removed circular share widget, LinkedIn/X buttons, toast system