Kitchen SinkLearn Claude customizationSource
CourseFull course

LESSON 04 OF 08

Follow an event through a hook

See the three core choices: observe, rewrite, or answer.

In this lesson
  • Explain $, e, and next.
  • Predict whether the next handler will run.
Lessons in your path0 of 8 complete
Progress settings

Saved only in this browser.

Visual explainerExpand diagramCollapse diagram
An event enters your hook; observe forwards the same event, rewrite forwards a changed copy, and answer returns a result locally.
Observe and rewrite continue the event chain. Answer handles the event locally.

ObserveForward the same event.

RewriteForward a changed copy.

AnswerReturn a result here.

BROWSER SIMULATION · NO CLAUDE CONNECTION
EventOur hookNext handler

Observe the call and pass the same event to the next handler.

TRACE
Ready. Nothing has run yet.

What are $, e, and next?

$ · the host API
Register a command, fill a draft, save a value, or ask the UI to redraw.
e · the event
The data for this action. Treat it as immutable; create a copy to change it.
next(e) · continue the chain
Pass the event to downstream mods and the engine. Return your own result to handle it instead.
A minimal observer JavaScript
on('tool.call', async ($, e, next) => {
  calls += 1;
  $.ui.invalidate('ui.render');
  return next(e);
});

Counting is ordinary JavaScript. Redrawing is a host API call. Forwarding preserves the tool’s normal behavior.

YOUR TURN

Try it, then explain it.

  1. Run Observe and inspect the trace.
  2. Run Rewrite with the prefix, then with an ordinary prompt.
  3. Run Answer with 2 and 4 portions. Compare a result with a denial.
QUICK CHECK · OPTIONAL

What makes the demo tool handler answer locally?

Choose one answer

Finish at your own pace.

The next button saves completion and opens the next lesson.