<html lang="en">

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Context Engineering Course — Interactive Trajectory Visuals</title>

<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&display=swap" rel="stylesheet">

<style>

:root {

--bg: #0b0f19;

--card-bg: #111827;

--card-border: #1f2937;

--card-hover-border: #3b82f6;

--text-main: #f9fafb;

--text-muted: #9ca3af;

--accent: #3b82f6;

--accent-hover: #2563eb;

--badge-bg: rgba(59, 130, 246, 0.15);

--badge-text: #60a5fa;

--tag-warn-bg: rgba(239, 68, 68, 0.15);

--tag-warn-text: #f87171;

}

* {

box-sizing: border-box;

margin: 0;

padding: 0;

}

body {

font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

background-color: var(--bg);

color: var(--text-main);

line-height: 1.6;

padding: 2.5rem 1.25rem;

}

.container {

max-width: 1080px;

margin: 0 auto;

}

header {

margin-bottom: 3rem;

text-align: center;

padding: 2rem 1rem;

border-bottom: 1px solid var(--card-border);

}

.badge {

display: inline-block;

padding: 0.25rem 0.75rem;

border-radius: 9999px;

font-size: 0.8125rem;

font-weight: 600;

background: var(--badge-bg);

color: var(--badge-text);

margin-bottom: 1rem;

letter-spacing: 0.025em;

text-transform: uppercase;

}

h1 {

font-size: 2.35rem;

font-weight: 700;

letter-spacing: -0.025em;

margin-bottom: 1rem;

color: #ffffff;

}

.subtitle {

max-width: 760px;

margin: 0 auto;

font-size: 1.05rem;

color: var(--text-muted);

}

.module-section {

margin-bottom: 3rem;

}

.module-header {

display: flex;

align-items: center;

gap: 0.75rem;

margin-bottom: 1.25rem;

padding-bottom: 0.5rem;

border-bottom: 1px solid var(--card-border);

}

.module-number {

font-size: 0.875rem;

font-weight: 700;

color: var(--accent);

background: var(--badge-bg);

padding: 0.2rem 0.6rem;

border-radius: 4px;

}

.module-title {

font-size: 1.35rem;

font-weight: 600;

color: #ffffff;

}

.grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));

gap: 1.25rem;

}

.card {

background: var(--card-bg);

border: 1px solid var(--card-border);

border-radius: 10px;

padding: 1.5rem;

display: flex;

flex-direction: column;

justify-content: space-between;

transition: all 0.2s ease;

text-decoration: none;

color: inherit;

}

.card:hover {

transform: translateY(-2px);

border-color: var(--card-hover-border);

box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.1);

}

.card-top {

margin-bottom: 1.25rem;

}

.card-tag {

display: inline-block;

font-size: 0.75rem;

font-weight: 600;

padding: 0.2rem 0.5rem;

border-radius: 4px;

margin-bottom: 0.75rem;

background: var(--tag-warn-bg);

color: var(--tag-warn-text);

}

.card-title {

font-size: 1.1rem;

font-weight: 600;

color: #ffffff;

margin-bottom: 0.5rem;

}

.card-desc {

font-size: 0.9rem;

color: var(--text-muted);

line-height: 1.5;

}

.card-footer {

display: flex;

align-items: center;

justify-content: space-between;

padding-top: 1rem;

border-top: 1px solid var(--card-border);

font-size: 0.875rem;

font-weight: 500;

color: var(--accent);

}

.card-footer svg {

width: 16px;

height: 16px;

transition: transform 0.2s ease;

}

.card:hover .card-footer svg {

transform: translateX(4px);

}

footer {

text-align: center;

margin-top: 4rem;

padding-top: 2rem;

border-top: 1px solid var(--card-border);

font-size: 0.875rem;

color: var(--text-muted);

}

footer a {

color: var(--accent);

text-decoration: none;

}

footer a:hover {

text-decoration: underline;

}

</style>

<div class="container">

<header>

<span class="badge">DeepLearning.AI</span>

<h1>Context Engineering Course</h1>

<p class="subtitle">

Interactive turn-by-turn trajectory visuals for course quizzes and case studies. Inspect context window saturation, tool payloads, and context engineering failure modes in real time.

</p>

</header>

<main>

<!-- Module 1 -->

<section class="module-section">

<div class="module-header">

<span class="module-number">Module 1</span>

<h2 class="module-title">Failure Modes in Multi-Turn Agents</h2>

</div>

<div class="grid">

<a class="card" href="Quiz_Visuals/Module_1_Trajectory_1.html">

<div class="card-top">

<span class="card-tag">Context Poisoning</span>

<h3 class="card-title">Trajectory 1: Customer Service Agent</h3>

<p class="card-desc">

An agent handling shoe size exchanges ingests unindexed, conflicting legacy documentation (30-day cutoff), poisoning its reasoning and wrongly rejecting an eligible request under the 60-day policy.

</p>

</div>

<div class="card-footer">

<span>Launch Visual App</span>

<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>

</div>

</a>

<a class="card" href="Quiz_Visuals/Module_1_Trajectory_2.html">

<div class="card-top">

<span class="card-tag">Rapid Saturation</span>

<h3 class="card-title">Trajectory 2: Customer Service Agent</h3>

<p class="card-desc">

Multi-hop logistics queries for regional inventory stock and freight dispatch return large, unpruned payloads, causing explosive context growth and saturating the token budget.

</p>

</div>

<div class="card-footer">

<span>Launch Visual App</span>

<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>

</div>

</a>

</div>

</section>

<!-- Module 2 -->

<section class="module-section">

<div class="module-header">

<span class="module-number">Module 2</span>

<h2 class="module-title">Agentic Search & Retrieval</h2>

</div>

<div class="grid">

<a class="card" href="Quiz_Visuals/Module_2_Trajectory_1.html">

<div class="card-top">

<span class="card-tag">Strategy Mismatch</span>

<h3 class="card-title">Trajectory 1: FreshCart Coding Agent</h3>

<p class="card-desc">

The agent attempts to locate exact code constants using pure vector semantic search and policy concepts using keyword search, failing to adapt or recover without hybrid retrieval.

</p>

</div>

<div class="card-footer">

<span>Launch Visual App</span>

<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>

</div>

</a>

<a class="card" href="Quiz_Visuals/Module_2_Trajectory_2.html">

<div class="card-top">

<span class="card-tag">Naive Chunking</span>

<h3 class="card-title">Trajectory 2: FreshCart Coding Agent</h3>

<p class="card-desc">

Fixed character-count splitting without language-aware AST parsing splits model validation logic across boundaries, leading to hallucinated data constraints.

</p>

</div>

<div class="card-footer">

<span>Launch Visual App</span>

<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>

</div>

</a>

</div>

</section>

<!-- Module 3 -->

<section class="module-section">

<div class="module-header">

<span class="module-number">Module 3</span>

<h2 class="module-title">Context Formatting & Compaction</h2>

</div>

<div class="grid">

<a class="card" href="Quiz_Visuals/Module_3_Trajectory_1.html">

<div class="card-top">

<span class="card-tag">Compaction Erosion</span>

<h3 class="card-title">Trajectory 1: Cinema Research Agent</h3>

<p class="card-desc">

Compacting summaries of summaries across turns progressively strips vital clues (jazz score, European jury award) needed to identify an obscure animated film.

</p>

</div>

<div class="card-footer">

<span>Launch Visual App</span>

<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>

</div>

</a>

<a class="card" href="Quiz_Visuals/Module_3_Trajectory_2.html">

<div class="card-top">

<span class="card-tag">Missing Pointer</span>

<h3 class="card-title">Trajectory 2: Cinema Research Agent</h3>

<p class="card-desc">

Externalizing full document bodies to a scratchpad without returning the external document ID pointer strands retrieved records outside the agent's reach.

</p>

</div>

<div class="card-footer">

<span>Launch Visual App</span>

<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>

</div>

</a>

</div>

</section>

<!-- Module 4 -->

<section class="module-section">

<div class="module-header">

<span class="module-number">Module 4</span>

<h2 class="module-title">Agent Memory & State Persistence</h2>

</div>

<div class="grid">

<a class="card" href="Quiz_Visuals/Module_4_Trajectory_1.html">

<div class="card-top">

<span class="card-tag">Memory Deduplication</span>

<h3 class="card-title">Trajectory 1: Doctor's Appointment Assistant</h3>

<p class="card-desc">

Demonstrates memory writing pipelines reconciling newly paraphrased patient preferences against long-term vector memory to prevent duplicate rule entries.

</p>

</div>

<div class="card-footer">

<span>Launch Visual App</span>

<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>

</div>

</a>

<a class="card" href="Quiz_Visuals/Module_4_Trajectory_2.html">

<div class="card-top">

<span class="card-tag">Forgotten Rules</span>

<h3 class="card-title">Trajectory 2: Doctor's Appointment Assistant</h3>

<p class="card-desc">

A stateless assistant using exact flat-file keyword search fails to equate "Friday" with "end-of-week", forgetting user preferences across sessions.

</p>

</div>

<div class="card-footer">

<span>Launch Visual App</span>

<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>

</div>

</a>

</div>

</section>

</main>

<footer>

<p>Context Engineering Course &copy; DeepLearning.AI. All rights reserved.</p>

<p style="margin-top: 0.5rem;"><a href="README.md">View Repository README</a></p>

</footer>

</div>