Kitchen SinkLearn Claude customizationSource
CourseFull course

LESSON 05 OF 08

Draw a pane. Change its state.

Connect a button press, an in-memory value, and the next drawing.

In this lesson
  • Understand the local redraw loop.
  • Distinguish temporary state from a saved note.
Lessons in your path0 of 8 complete
Progress settings

Saved only in this browser.

Visual explainerExpand diagramCollapse diagram
A local counter cycle: click, update state, request redraw, render the new UI, then click again. This interaction needs no model request.
This local counter loop does not need a model request. Other mod actions can have different effects.

A drawing is a description of the current state.

The ui.render handler returns boxes, text, buttons and fields supported by the current surface. A button callback changes a variable and calls $.ui.invalidate. The host asks for a new tree and draws the updated value.

BROWSER COUNTER EXAMPLE

A click updates local state, then redraws the number.

Try it in the real starter.

In a supported local Code session, run /kitchen, open Recipes, and click the counter. Its value lives in the loaded module and resets on reload. The Notes tab explicitly saves a separate value to the plugin store. That note is local plain-text data shared across this plugin’s sessions; use synthetic notes.

Compose with other mods.

The band above the prompt keeps the downstream drawing returned by await next(e) and adds this mod’s elements. The Pane hook also checks the pane ID before drawing. Those two choices keep the example from assuming it owns every render site.

Respect a draft.

The starter’s draft button checks for existing input. It fills an empty draft and leaves sending to the user; it preserves existing text. Filling a prompt box is distinct from submitting a prompt.

YOUR TURN

Try it, then explain it.

  1. Click the browser counter and identify which value changes.
  2. In the real Code mod, save a synthetic note and reopen a session.
  3. Explain why the saved note survives while the counter can reset.
QUICK CHECK · OPTIONAL

Which value is designed to survive a module reload in this starter?

Choose one answer

Finish at your own pace.

The next button saves completion and opens the next lesson.