# ccc-pages: web pages with a memory

A page is a web address with a memory. The memory is a set of records and files that your agent writes; the page reads them and draws them. Nothing on a page is typed by hand: you tell your agent what you want to see, and it writes. When the numbers change, the agent rewrites a record and everyone who opens the page sees the new numbers. Nobody rebuilds the page, and nobody sends a new link.

That makes a page a cheap way to share something that keeps changing: an order sheet, a shift dashboard, a quote for one customer, a log of what the machines did today. A page can also take things in. A machine can post events to it, and a short script published with the page (`handler.js`) can compute totals or answer a form. The script runs on the page service at page.sui.pics, so you run no server.

Who can open a page is your choice. By default a page is unlisted: anyone who has the link can read it, and nobody can find it without the link. A private page shows only an unlock form until the reader opens it with a share link made for them, one link per person, and each link can be switched off on its own.

```mermaid
flowchart LR
  A[your agent<br/>in the terminal] -- "page-data put" --> D[(the page's records<br/>/d/slug/key)]
  A -- "page-file upload" --> F[(files<br/>/f/slug/id)]
  M[a machine or system] -- "POST /i/slug + secret" --> D
  B[a browser] -- "POST /h/slug/…" --> H[the page's own API<br/>handler.js]
  H -- "reads" --> D
  D -- "?raw=1 · ~view" --> Pg[the page<br/>/a/slug/]
  F --> Pg
  Pg --> R[anyone with the link]
```

## Seven live examples

Each example below is a real page, running now, with made-up data for a mask factory. Each one has a short explanation, a live box that reads the example page as you look at it, a **Tell your agent** text you can copy to have your own agent build the same thing, and a closed section on how it is built.

| Example | What you see | What it shows a page can do |
|---|---|---|
| [Shift dashboard](#pages/demo.shift-dashboard) | four headline numbers and fourteen days of output | a dashboard whose numbers change when one record is rewritten |
| [Order sheet](#pages/demo.order-sheet) | a sortable table of orders | a table whose rows are one record |
| [A computed view](#pages/demo.computed-view) | order totals by status for the customer you pick | a page that does arithmetic over its own records, with no server of yours |
| [Webhook inbox](#pages/demo.webhook-inbox) | the newest events that machines sent to the page | machines and systems writing to a page with a secret |
| [A page with its own API](#pages/demo.marks-api) | a one-line form; your line appears in the list | a page that is a small backend |
| [A private quote page](#pages/demo.private-quote) | a quote as one customer sees it | private pages, one share link per customer, a quote that expires |
| [This page](#pages/demo.this-page) | the handbook's own latest change and the address of the text you are reading | a page whose words are records; an edit lands without a rebuild |

After the examples come [five ideas for a mask factory](#pages/chapter.pages-ideas), each a text to hand your agent, and a closed chapter on how a page works inside, for the reader who wants the addresses and commands.

## Where the detail lives

Your agent learns all of this from the **ccc-pages** skill, which the install puts on your computer. Every text on this route begins with "Load the ccc-pages skill", so the agent reads the skill before it builds anything.