Change what a screen shows

Say "show a renewal countdown on each lease" and a Component fills one named slot of a derived screen, while every other part keeps deriving.

In the design, a Component fills one named slot of a derived screen, and every other part keeps deriving. A fix to the derived screen still reaches your App, around the slot.

Before it runs
Needs	An App, from Build my app
Who says yes	You. Your agent shows you the change and waits for your Approval.
You leave the chat	Never
Offered	Not by your agent: the guide record waits for an App Verb that sets a slot

What you get

In the design, each derived screen names its slots. A slot binds the record or records in view, and takes any Component whose props bind to them.

Slot	Where it sits	Binds
`list.toolbar`	above a list, beside its search box	the list's records and its search
`list.empty`	in place of a list with no records	the Noun
`record.header`	at the top of a record page	the record
`record.aside`	beside the record page's fields	the record
`record.actions`	with the record page's buttons	the record and the Verbs the reader may call
`record.tab`	as one more tab on a record page	the record
`form.after`	below a form's inputs	the values in the form
`dashboard.section`	as one section of a Dashboard	the Dashboard's scope

For a Lease on leaseclock.com, a countdown to endsOn sits in record.aside. The list, the fields, the forms and the Renew button still derive from the Lease Noun.

Your agent does

In the design, your agent writes the Component, names it in a slot, and publishes the App with App.publish.

Ask

Show a renewal countdown on each lease.
Put a first-lease prompt on the empty lease list.

components/RenewalCountdown.mdx

---
props:
  lease: { type: Lease, required: true }
renderers: [web, markdown]
---
Shows the days left until a lease's endsOn date, and turns amber at 90 days.

apps/app/app.mdx

---
kind: saas
mount: /app
nouns: [Property, Lease]
personas:
  manager: { access: admin, opens: leases }
  assistant: { access: member, opens: leases }
  landlord: { access: viewer, opens: properties }
slots:
  Lease:
    record.aside: RenewalCountdown
    list.empty: FirstLeasePrompt
---

Your agent writes components/RenewalCountdown.mdx, with one prop typed Lease.
It names the Component in record.aside for Lease.
It checks that the lease prop binds to the record that record.aside binds.
It shows you the record page with the countdown, and waits for your yes.
It publishes the App, and each Persona that may read a lease sees the countdown.

The markdown renderer gives an agent the countdown as text, beside every other part of the record page.

Change it

Say	What changes
"Show the countdown on the list too."	The Component also fills `list.toolbar`, bound to the list's records
"Add a documents tab to each lease."	A second Component fills `record.tab`, bound to the lease
"Replace the whole lease record page."	A view file replaces one screen; the list and forms keep deriving

A whole-screen change is a view file at one route of the App:

apps/app/leases/[lease]/view.mdx

<ThingDetail />
<RenewalCountdown />
<VerbSheet verb="Lease.renew" />

Under the hood

A slot never widens what the reader may do. A Component in record.actions calls Verbs through the same Permissions as the derived buttons, and the Verb's rules decide.

Part	Entries
Nouns	App, Component, Persona, Permission
Calls	`App.publish`; the record waits for a Verb that sets a slot
Events	`App.published`
Depth	Every slot, screens the definition cannot derive

Change what a screen shows

What you getCopy Anchor Link

Your agent doesCopy Anchor Link

Change itCopy Anchor Link

Under the hoodCopy Anchor Link

Contents

What you get

Your agent does

Change it

Under the hood