context-course/pr_7/en/_app/immutable/nodes/32.3bbcdb7a.js

import{s as Ne,n as Pe,o as Qe}from"../chunks/scheduler.4048030c.js";import{S as Ve,i as Se,e as a,s as l,c as u,h as Le,a as i,d as n,b as s,f as _e,j as h,g as r,k as me,l as je,m as o,n as p,t as c,o as m,p as f}from"../chunks/index.5d0b9360.js";import{C as Ie,H as B,E as Be}from"../chunks/MermaidChart.svelte_svelte_type_style_lang.99c2e6c8.js";import{C as Ge}from"../chunks/CodeBlock.ff2a3276.js";function Oe(fe){let d,A,G,E,M,R,U,W,C,F,T,ye="Hooks are user-defined handlers that run at deterministic points in an agent’s lifecycle. When an agent is about to call a tool, finish a turn, or start a new session, the runtime pauses, invokes any hooks registered for that event, and then continues. Hooks let you observe what the agent is doing, block unsafe actions, inject extra context, or stream events to an external system. Crucially, they let you do this without asking the model to do it itself.",z,g,q,w,Me="Skills, MCP, plugins, and subagents all shape <em>what the agent can do</em>. Hooks shape <em>what happens around every step the agent takes</em>. That makes them the right surface for observability, guardrails, and automation glue.",X,v,Y,k,Ue="A model asked to “always run the linter after editing” will eventually forget or may not be consistent in its implementation. A hook on <code>PostToolUse</code> that runs the linter is consistent every single time and always runs. Hooks turn conventions into code.",Z,y,Ce="<p>A linter is a tool that checks code for common mistakes, style issues, and project rule violations. It does not usually run the whole program; it scans the code and reports things that look wrong or inconsistent.</p>",D,$,Te="Three common patterns benefit the most:",K,b,ge="<strong>Observability.</strong> Every tool call, prompt, and stop event can be captured in a log or dashboard so you can see what the agent actually did — not what it said it did.",ee,x,we="<strong>Guardrails.</strong> A hook can inspect a <code>Bash</code> command before it runs and deny anything that touches <code>~/.ssh/</code> or <code>rm -rf /</code>. Guardrails expressed as code are more reliable than guardrails expressed as prompt instructions.",te,J,ve="<strong>Automation.</strong> Hooks can run formatters, linters, type-checkers, or test suites automatically after a file edit. The agent does not need to remember to do it — the runtime does.",ne,H,oe,_,ke="The four platforms in this course all support hooks, but with different shapes:",le,N,$e="<li><strong>Claude Code</strong> — JSON configuration in <code>.claude/settings.json</code> (or inside a plugin). Events use <code>PascalCase</code> names like <code>PreToolUse</code> and <code>Stop</code>. Hooks can be shell commands, HTTP endpoints, prompts, or subagents.</li> <li><strong>Codex</strong> — JSON configuration in <code>.codex/hooks.json</code>, gated behind a feature flag in <code>config.toml</code>. A smaller set of events (also <code>PascalCase</code>), and shell-command handlers that receive a JSON payload on stdin.</li> <li><strong>OpenCode</strong> — TypeScript/JavaScript plugin modules in <code>.opencode/plugins/</code>. Hooks are object keys on the exported plugin, like <code>&quot;tool.execute.before&quot;</code> or a generic <code>event</code> callback. There is no JSON event config — everything is code.</li> <li><strong>Pi</strong> — TypeScript/JavaScript extensions in <code>.pi/extensions/</code> or <code>~/.pi/agent/extensions/</code>. Events use <code>lower_snake_case</code> names like <code>before_agent_start</code>, <code>tool_call</code>, and <code>tool_result</code>, and handlers are registered in code with <code>pi.on(...)</code>.</li>",se,P,be="The mental model is consistent across all four: events fire, handlers run, and handlers can influence the agent’s next step. Only the syntax and the event names change.",ae,Q,ie,V,xe="This unit walks through the hook lifecycle, shows the exact config shape for each platform, and then builds a working <strong>Agent Activity Dashboard</strong>: a Gradio app that receives hook events over HTTP and visualizes tool calls, prompts, and sessions in real time. By the end you will have one dashboard that works against all four agents.",re,S,de,L,Je="This unit covers the common hook lifecycle shared by Claude Code, Codex, OpenCode, and Pi; where hook configuration lives on each platform and what JSON or code shape it takes; how hook handlers influence the agent through exit codes, JSON output, thrown errors, or returned values; and how to build a Gradio dashboard that turns hook events into a live view of agent activity.",ue,j,He="Next, a tour of the hook events themselves.",he,I,pe,O,ce;return M=new Ie({props:{containerStyle:"float: right; margin-left: 10px; display: inline-flex; position: relative; z-index: 10;"}}),U=new B({props:{title:"Unit 5: Hooks",local:"unit-5-hooks",headingTag:"h1"}}),C=new B({props:{title:"What Are Hooks?",local:"what-are-hooks",headingTag:"h2"}}),g=new Ge({props:{code:"VXNlciUyMHByb21wdCUwQSUyMCUyMCUyMCUyMCVFMiU5NCU4MiUwQSUyMCUyMCUyMCUyMCVFMiU5NCU5QyVFMiU5NCU4MCU1QlVzZXJQcm9tcHRTdWJtaXQlMjBob29rJTVEJUUyJTk0JTgwJUUyJTk2JUJBJTIwbG9nJTIwJTJGJTIwaW5qZWN0JTIwY29udGV4dCUwQSUyMCUyMCUyMCUyMCVFMiU5NiVCQyUwQU1vZGVsJTIwcmVhc29uaW5nJTBBJTIwJTIwJTIwJTIwJUUyJTk0JTgyJTBBJTIwJTIwJTIwJTIwJUUyJTk0JTlDJUUyJTk0JTgwJTVCUHJlVG9vbFVzZSUyMGhvb2slNUQlRTIlOTQlODAlRTIlOTYlQkElMjBhbGxvdyUyQyUyMGRlbnklMkMlMjByZXdyaXRlJTIwYXJncyUwQSUyMCUyMCUyMCUyMCVFMiU5NiVCQyUwQVRvb2wlMjBleGVjdXRlcyUwQSUyMCUyMCUyMCUyMCVFMiU5NCU4MiUwQSUyMCUyMCUyMCUyMCVFMiU5NCU5QyVFMiU5NCU4MCU1QlBvc3RUb29sVXNlJTIwaG9vayU1RCVFMiU5NCU4MCVFMiU5NiVCQSUyMGxvZyUyQyUyMGFuYWx5emUlMkMlMjBwb3N0LXByb2Nlc3MlMEElMjAlMjAlMjAlMjAlRTIlOTYlQkMlMEFNb2RlbCUyMGNvbnRpbnVlcyUwQSUyMCUyMCUyMCUyMCVFMiU5NCU4MiUwQSUyMCUyMCUyMCUyMCVFMiU5NCU5NCVFMiU5NCU4MCU1QlN0b3AlMjAlMkYlMjBTZXNzaW9uRW5kJTIwaG9va3MlNUQlRTIlOTQlODAlRTIlOTYlQkElMjBwZXJzaXN0JTJDJTIwbm90aWZ5JTJDJTIwdGVhciUyMGRvd24=",highlighted:`User prompt
    │
    ├─[UserPromptSubmit hook]─► log / inject context
    ▼
Model reasoning
    │
    ├─[PreToolUse hook]─► allow, deny, rewrite args
    ▼
Tool executes
    │
    ├─[PostToolUse hook]─► log, analyze, post-process
    ▼
Model continues
    │
    └─[Stop / SessionEnd hooks]─► persist, notify, tear down`,wrap:!1}}),v=new B({props:{title:"Why Hooks Matter",local:"why-hooks-matter",headingTag:"h2"}}),H=new B({props:{title:"Platform Landscape",local:"platform-landscape",headingTag:"h2"}}),Q=new B({props:{title:"What You’ll Build",local:"what-youll-build",headingTag:"h2"}}),S=new B({props:{title:"What You’ll Learn",local:"what-youll-learn",headingTag:"h2"}}),I=new Be({props:{source:"https://github.com/huggingface/context-course/blob/main/units/en/unit5/introduction.mdx"}}),{c(){d=a("meta"),A=l(),G=a("p"),E=l(),u(M.$$.fragment),R=l(),u(U.$$.fragment),W=l(),u(C.$$.fragment),F=l(),T=a("p"),T.textContent=ye,z=l(),u(g.$$.fragment),q=l(),w=a("p"),w.innerHTML=Me,X=l(),u(v.$$.fragment),Y=l(),k=a("p"),k.innerHTML=Ue,Z=l(),y=a("blockquote"),y.innerHTML=Ce,D=l(),$=a("p"),$.textContent=Te,K=l(),b=a("p"),b.innerHTML=ge,ee=l(),x=a("p"),x.innerHTML=we,te=l(),J=a("p"),J.innerHTML=ve,ne=l(),u(H.$$.fragment),oe=l(),_=a("p"),_.textContent=ke,le=l(),N=a("ul"),N.innerHTML=$e,se=l(),P=a("p"),P.textContent=be,ae=l(),u(Q.$$.fragment),ie=l(),V=a("p"),V.innerHTML=xe,re=l(),u(S.$$.fragment),de=l(),L=a("p"),L.textContent=Je,ue=l(),j=a("p"),j.textContent=He,he=l(),u(I.$$.fragment),pe=l(),O=a("p"),this.h()},l(e){const t=Le("svelte-u9bgzb",document.head);d=i(t,"META",{name:!0,content:!0}),t.forEach(n),A=s(e),G=i(e,"P",{}),_e(G).forEach(n),E=s(e),h(M.$$.fragment,e),R=s(e),h(U.$$.fragment,e),W=s(e),h(C.$$.fragment,e),F=s(e),T=i(e,"P",{"data-svelte-h":!0}),r(T)!=="svelte-zqhczd"&&(T.textContent=ye),z=s(e),h(g.$$.fragment,e),q=s(e),w=i(e,"P",{"data-svelte-h":!0}),r(w)!=="svelte-1f6o2ab"&&(w.innerHTML=Me),X=s(e),h(v.$$.fragment,e),Y=s(e),k=i(e,"P",{"data-svelte-h":!0}),r(k)!=="svelte-rsco57"&&(k.innerHTML=Ue),Z=s(e),y=i(e,"BLOCKQUOTE",{class:!0,"data-svelte-h":!0}),r(y)!=="svelte-qbisuq"&&(y.innerHTML=Ce),D=s(e),$=i(e,"P",{"data-svelte-h":!0}),r($)!=="svelte-1dqxpz7"&&($.textContent=Te),K=s(e),b=i(e,"P",{"data-svelte-h":!0}),r(b)!=="svelte-1qcho6z"&&(b.innerHTML=ge),ee=s(e),x=i(e,"P",{"data-svelte-h":!0}),r(x)!=="svelte-1d98sk5"&&(x.innerHTML=we),te=s(e),J=i(e,"P",{"data-svelte-h":!0}),r(J)!=="svelte-1t4u02l"&&(J.innerHTML=ve),ne=s(e),h(H.$$.fragment,e),oe=s(e),_=i(e,"P",{"data-svelte-h":!0}),r(_)!=="svelte-vhz6jp"&&(_.textContent=ke),le=s(e),N=i(e,"UL",{"data-svelte-h":!0}),r(N)!=="svelte-cfjbwr"&&(N.innerHTML=$e),se=s(e),P=i(e,"P",{"data-svelte-h":!0}),r(P)!=="svelte-14lpj1a"&&(P.textContent=be),ae=s(e),h(Q.$$.fragment,e),ie=s(e),V=i(e,"P",{"data-svelte-h":!0}),r(V)!=="svelte-10fkn7v"&&(V.innerHTML=xe),re=s(e),h(S.$$.fragment,e),de=s(e),L=i(e,"P",{"data-svelte-h":!0}),r(L)!=="svelte-1jt7p5l"&&(L.textContent=Je),ue=s(e),j=i(e,"P",{"data-svelte-h":!0}),r(j)!=="svelte-jclqkm"&&(j.textContent=He),he=s(e),h(I.$$.fragment,e),pe=s(e),O=i(e,"P",{}),_e(O).forEach(n),this.h()},h(){me(d,"name","hf:doc:metadata"),me(d,"content",Ae),me(y,"class","note")},m(e,t){je(document.head,d),o(e,A,t),o(e,G,t),o(e,E,t),p(M,e,t),o(e,R,t),p(U,e,t),o(e,W,t),p(C,e,t),o(e,F,t),o(e,T,t),o(e,z,t),p(g,e,t),o(e,q,t),o(e,w,t),o(e,X,t),p(v,e,t),o(e,Y,t),o(e,k,t),o(e,Z,t),o(e,y,t),o(e,D,t),o(e,$,t),o(e,K,t),o(e,b,t),o(e,ee,t),o(e,x,t),o(e,te,t),o(e,J,t),o(e,ne,t),p(H,e,t),o(e,oe,t),o(e,_,t),o(e,le,t),o(e,N,t),o(e,se,t),o(e,P,t),o(e,ae,t),p(Q,e,t),o(e,ie,t),o(e,V,t),o(e,re,t),p(S,e,t),o(e,de,t),o(e,L,t),o(e,ue,t),o(e,j,t),o(e,he,t),p(I,e,t),o(e,pe,t),o(e,O,t),ce=!0},p:Pe,i(e){ce||(c(M.$$.fragment,e),c(U.$$.fragment,e),c(C.$$.fragment,e),c(g.$$.fragment,e),c(v.$$.fragment,e),c(H.$$.fragment,e),c(Q.$$.fragment,e),c(S.$$.fragment,e),c(I.$$.fragment,e),ce=!0)},o(e){m(M.$$.fragment,e),m(U.$$.fragment,e),m(C.$$.fragment,e),m(g.$$.fragment,e),m(v.$$.fragment,e),m(H.$$.fragment,e),m(Q.$$.fragment,e),m(S.$$.fragment,e),m(I.$$.fragment,e),ce=!1},d(e){e&&(n(A),n(G),n(E),n(R),n(W),n(F),n(T),n(z),n(q),n(w),n(X),n(Y),n(k),n(Z),n(y),n(D),n($),n(K),n(b),n(ee),n(x),n(te),n(J),n(ne),n(oe),n(_),n(le),n(N),n(se),n(P),n(ae),n(ie),n(V),n(re),n(de),n(L),n(ue),n(j),n(he),n(pe),n(O)),n(d),f(M,e),f(U,e),f(C,e),f(g,e),f(v,e),f(H,e),f(Q,e),f(S,e),f(I,e)}}}const Ae='{"title":"Unit 5: Hooks","local":"unit-5-hooks","sections":[{"title":"What Are Hooks?","local":"what-are-hooks","sections":[],"depth":2},{"title":"Why Hooks Matter","local":"why-hooks-matter","sections":[],"depth":2},{"title":"Platform Landscape","local":"platform-landscape","sections":[],"depth":2},{"title":"What You’ll Build","local":"what-youll-build","sections":[],"depth":2},{"title":"What You’ll Learn","local":"what-youll-learn","sections":[],"depth":2}],"depth":1}';function Ee(fe){return Qe(()=>{new URLSearchParams(window.location.search).get("fw")}),[]}class qe extends Ve{constructor(d){super(),Se(this,d,Ee,Oe,Ne,{})}}export{qe as component};