From ab02a1ccaecde193853652145a69d07151b30319 Mon Sep 17 00:00:00 2001
From: Lann Martin <lmartin@akamai.com>
Date: Mon, 7 Sep 2026 19:31:25 -0400
Subject: [PATCH] Visor: hued oklch palette, two-half strip, overlay drawer
 with drafts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The strip becomes two halves — the running app on the left (glyph square,
plated title, petname) and the user/device on the right (petname, device
petname, glyph circle) — around a centre divider. Every colour derives
from `--hue`, set once on `#visor-root` in the open arm only, at the
specified oklch lightness/chroma for strip, drawer and accent; the
unclaimed dress is the same palette at zero chroma.

The drawer now overlays the app zone below the strip instead of pushing
it, so the strip never moves in any drawer state. It has a fixed height,
scroll shadows on overflow, animates open/closed, slides sheets
horizontally when switching while open, and is pinned open on the app
list while nothing runs. A scrim closes it when a session runs.

Settings and the new AppInfo sheet edit a draft (hue previews live);
Save writes to the kernel, Revert discards, and leaving a dirty sheet
raises a save/revert/cancel confirm.

New kernel `device.meta`/`set-meta` with `meta-scope = user | device |
app(id)`: free-form string maps in the sealed checkpoint for user-chosen
labels (petname, glyph) while the field set is still in flux.
---
 e2e/run.ts                            |  230 ++++-
 runtime/component/src/component.rs    |   26 +
 runtime/crates/kernel/src/device.rs   |   22 +
 runtime/crates/kernel/src/lib.rs      |   42 +-
 runtime/crates/kernel/tests/kernel.rs |   58 +-
 runtime/wit/internal.wit              |   10 +
 visor/src/kernel.rs                   |   35 +
 visor/src/state.rs                    |  121 ++-
 visor/src/style.rs                    |  215 ++++-
 visor/src/ui.rs                       | 1157 ++++++++++++++++++-------
 web/worker.ts                         |    3 +
 11 files changed, 1498 insertions(+), 421 deletions(-)

diff --git a/e2e/run.ts b/e2e/run.ts
index 6f158dd8..58dfecaa 100644
--- a/e2e/run.ts
+++ b/e2e/run.ts
@@ -221,20 +221,56 @@ async function open(ctx: BrowserContext, origin: string): Promise<Page> {
 // The visor, as these scenarios drive it
 //
 // Every selector and every label below is the visor's own tree (visor/src/
-// ui.rs): `#visor-strip` with `.unclaimed` until the device is open,
-// `#visor-circle` carrying the hue and nothing else ever painting it,
-// `#visor-drawer` holding one tenant at a time, `.sheet` / `.sheet-error` /
-// `.app-row` / `.device-row`. They live in one block so a visor rename is one
-// edit here rather than six.
+// ui.rs): `#visor-root` carrying `.unclaimed` until the device is open and
+// the `--hue` inline style when it is (nothing else ever paints it),
+// `#visor-strip` with its two halves `#visor-app` and `#visor-self`,
+// `#visor-drawer` holding one `.pane` per tenant, `.sheet` / `.sheet-error`
+// / `.app-row` / `.device-row`. They live in one block so a visor rename is
+// one edit here rather than six.
+//
+// The drawer is no longer a toggle: with nothing running it is pinned open
+// on the app list, so "close" means "back to the app list" and pressing the
+// half whose sheet is already showing does nothing at all.
 // ---------------------------------------------------------------------------
 
 const strip = (page: Page) => page.locator("#visor-strip");
 const drawer = (page: Page) => page.locator("#visor-drawer");
+/** The strip's left half: what is running (the app list, or the running
+ * app's own sheet). */
+const appsButton = (page: Page) => page.locator("#visor-app");
+/** The strip's right half: who this is, and this device's settings. */
+const settingsButton = (page: Page) => page.locator("#visor-self");
 
-/** Press one of the strip's tenant buttons and wait for the drawer. */
-async function openTenant(page: Page, label: string): Promise<void> {
-  await strip(page).getByRole("button", { name: label, exact: true }).click();
+/** Wait for the drawer to hold exactly one pane, done sliding.
+ *
+ * A tenant switch renders two panes for the length of the slide — the one
+ * arriving still wearing an `enter-` class — and a click into a moving
+ * target lands wherever the animation had got to. */
+async function paneSettled(page: Page): Promise<void> {
   await drawer(page).waitFor({ timeout: 10_000 });
+  await page.waitForFunction(
+    () => {
+      const panes = document.querySelectorAll("#visor-drawer .pane");
+      return panes.length === 1 &&
+        !(panes[0] as HTMLElement).className.includes("enter");
+    },
+    undefined,
+    { timeout: 10_000 },
+  );
+}
+
+/** Press the strip's left half and wait for the pane it raises. With
+ * nothing running that is the app list; with a session it is that session's
+ * own sheet. */
+async function openApps(page: Page): Promise<void> {
+  await appsButton(page).click();
+  await paneSettled(page);
+}
+
+/** Press the strip's right half: the settings sheet. */
+async function openSettingsSheet(page: Page): Promise<void> {
+  await settingsButton(page).click();
+  await paneSettled(page);
 }
 
 /** The `.sheet` whose head says `head` — the drawer stacks several. */
@@ -248,14 +284,16 @@ function sheet(page: Page, head: string | RegExp) {
  * `awaitFrame` is false for an app that is expected to be refused: the
  * hostile fixture's frame can be torn down before a `waitForSelector` on it
  * ever polls, and "the frame existed for a moment" is not part of any claim
- * — the claim is what the strip says afterwards.
+ * — the claim is what the visor says afterwards.
  */
 async function launchApp(
   page: Page,
   title: string,
   awaitFrame = true,
 ): Promise<void> {
-  await openTenant(page, "Apps");
+  // With nothing running the app list is already what the drawer is
+  // showing, so this press is usually a no-op — which is the point.
+  await openApps(page);
   const row = drawer(page).locator(".app-row").filter({ hasText: title })
     .first();
   await row.waitFor({ timeout: 10_000 });
@@ -271,14 +309,39 @@ async function launchTodoMvc(page: Page): Promise<void> {
   await launchApp(page, "TodoMVC");
 }
 
-/** Settings → the device's user-voice name. */
+/**
+ * Press `Save` in the settings sheet and wait for the draft to be clean.
+ *
+ * The button disables itself exactly when `draft == seed`, and the seed
+ * only catches up once every kernel call the save made has come back
+ * (visor/src/ui.rs `save_draft`) — so this is the one observable that says
+ * the device, and not merely the screen, has the new value. Reloading
+ * without it races the checkpoint.
+ */
+async function saveDraft(page: Page): Promise<void> {
+  await drawer(page).getByRole("button", { name: "Save", exact: true })
+    .click();
+  await page.waitForFunction(
+    () => {
+      const save = Array.from(
+        document.querySelectorAll("#visor-drawer button"),
+      ).find((b) => b.textContent === "Save") as HTMLButtonElement | undefined;
+      return save !== undefined && save.disabled;
+    },
+    undefined,
+    { timeout: 15_000 },
+  );
+}
+
+/** Settings → the device's user-voice petname. Typed into the draft, and
+ * `Save` is the only thing the kernel hears. */
 async function setDeviceName(page: Page, name: string): Promise<void> {
-  await openTenant(page, "Settings");
-  const field = drawer(page).locator("label").filter({ hasText: /^name$/ })
-    .locator("input");
+  await openSettingsSheet(page);
+  const field = drawer(page).locator("label").filter({
+    hasText: /^device petname$/,
+  }).locator("input");
   await field.fill(name);
-  // The visor writes on `change`, not on every keystroke.
-  await field.blur();
+  await saveDraft(page);
 }
 
 /**
@@ -292,7 +355,7 @@ async function keepDevice(
   petname: string,
   passphrase?: string,
 ): Promise<void> {
-  if (await drawer(page).count() === 0) await openTenant(page, "Settings");
+  await openSettingsSheet(page);
   const keep = sheet(page, "Keep this device");
   await keep.waitFor({ timeout: 10_000 });
   await keep.locator("input[type=text]").fill(petname);
@@ -309,15 +372,16 @@ async function keepDevice(
   await sheet(page, "kept as").waitFor({ timeout: 15_000 });
 }
 
-/** Is the strip painted with an identity? `.unclaimed` is the whole dress:
- * one class, and `#visor-circle` gets a background only in the open arm. */
+/** Is the visor painted with an identity? One class and one inline
+ * variable, both on `#visor-root`: `--hue` is emitted by the open arm alone
+ * and every colour in the stylesheet is a function of it. */
 async function claimed(page: Page): Promise<boolean> {
-  const cls = await strip(page).getAttribute("class") ?? "";
-  const style = await page.locator("#visor-circle").getAttribute("style") ?? "";
-  const painted = style.includes("hsl(");
-  if (cls.includes("unclaimed") && painted) {
+  const root = page.locator("#visor-root");
+  const cls = await root.getAttribute("class") ?? "";
+  const style = await root.getAttribute("style") ?? "";
+  if (cls.includes("unclaimed") && style.includes("--hue")) {
     throw new Failure(
-      "the strip is unclaimed and yet the anchor colour is painted — " +
+      "the visor is unclaimed and yet the anchor colour is painted — " +
         'docs/design.md "Devices" forbids exactly that',
     );
   }
@@ -346,13 +410,10 @@ async function claimed(page: Page): Promise<boolean> {
 
 const devicesSheet = (page: Page) => sheet(page, "Devices");
 
-const settingsButton = (page: Page) =>
-  strip(page).getByRole("button", { name: "Settings", exact: true });
-
 /** Settings open, showing the Devices section. */
 async function openSettings(page: Page): Promise<void> {
   if (await devicesSheet(page).count() > 0) return;
-  await settingsButton(page).click();
+  await openSettingsSheet(page);
   await devicesSheet(page).waitFor({ timeout: 10_000 });
 }
 
@@ -596,9 +657,11 @@ async function connectDrive(page: Page): Promise<void> {
     }
     await new Promise((r) => setTimeout(r, 500));
     // Re-read: the ceremony completes in the kernel, and this world has no
-    // timer. Closing and reopening Settings is the press that reads.
-    await settingsButton(page).click();
-    await settingsButton(page).click();
+    // timer. The press that opens Settings is the read — and the drawer is
+    // not a toggle any more, so leaving it and coming back is what makes
+    // that press happen again.
+    await openApps(page);
+    await openSettings(page);
   }
 }
 
@@ -773,8 +836,11 @@ const scenarios: Scenario[] = [
       check(box !== null, "#visor-strip has no box");
       eq(box!.height, 56, "#visor-strip height");
       // The strip says "waking" until `device.status` answers over the
-      // worker port; the placeholder is the first kernel-backed pixel.
-      await strip.getByText("this device").waitFor({ timeout: 10_000 });
+      // worker port; the placeholder is the first kernel-backed pixel, and
+      // it is the right half — the one that speaks for this device.
+      await page.locator("#visor-self").getByText("this device").waitFor({
+        timeout: 10_000,
+      });
     },
   },
 
@@ -900,7 +966,7 @@ const scenarios: Scenario[] = [
       eq(after, before, "#visor-strip geometry moved when the app mounted");
 
       const plated = await strip.locator("q").first().textContent();
-      eq(plated, "TodoMVC", "the strip's context should plate the app title");
+      eq(plated, "TodoMVC", "the strip's left half should plate the app title");
     },
   },
 
@@ -960,16 +1026,16 @@ const scenarios: Scenario[] = [
       );
 
       // Settle before measuring, and settle on facts rather than on a
-      // timeout: the strip's claim is about where it ends up, and launching
-      // went through the Apps drawer, which is part of the visor's own tree
-      // and legitimately moves the strip while it is open. Comparing a
-      // drawer-open frame against a drawer-closed baseline would fail for a
-      // reason that has nothing to do with the app.
-      const context = page.locator("#visor-context");
-      await context.getByText("ended", { exact: false }).waitFor({
+      // timeout: the strip's claim is about where it ends up. The drawer is
+      // no part of that any more — it overlays the app zone instead of
+      // pushing anything — so the baseline was taken with it open and the
+      // comparison is made with it open again, and neither is a special
+      // case. With nothing running the drawer is pinned on the app list, so
+      // the session ending puts it back there; the notice is read from it.
+      const notice = page.locator("#visor-notice");
+      await notice.getByText("ended", { exact: false }).waitFor({
         timeout: 10_000,
       });
-      await drawer(page).waitFor({ state: "detached", timeout: 10_000 });
 
       // The trusted pixels do not move because an app misbehaved.
       const after = await strip(page).boundingBox();
@@ -980,9 +1046,9 @@ const scenarios: Scenario[] = [
       // Framework voice for the reason, the app's own title plated: the
       // publisher's text never enters the sentence unquoted.
       eq(
-        await context.locator("q").first().textContent(),
+        await notice.locator("q").first().textContent(),
         "Hostile fixture",
-        "the strip should plate the ended app's title",
+        "the notice should plate the ended app's title",
       );
     },
   },
@@ -1079,7 +1145,7 @@ const scenarios: Scenario[] = [
       await visorReady(page);
       await strip(page).getByText("this device").waitFor({ timeout: 15_000 });
 
-      await openTenant(page, "Settings");
+      await openSettingsSheet(page);
       await drawer(page).getByRole("button", { name: "Other devices" }).click();
       const rows = drawer(page).locator(".device-row");
       await drawer(page).getByRole("button", { name: "Start fresh here" })
@@ -1451,6 +1517,80 @@ const scenarios: Scenario[] = [
     },
   },
 
+  {
+    // Unsaved changes are the user's, and the visor is the only thing that
+    // holds them: a field typed into the settings sheet reaches the kernel
+    // on `Save` and nowhere else, and a transition away from a dirty sheet
+    // asks rather than dropping it (visor/src/ui.rs `Draft`).
+    name: "visor-drafts",
+    async run(ctx, origin) {
+      const page = await open(ctx, origin);
+      await visorReady(page);
+      await openSettingsSheet(page);
+      const field = drawer(page).locator("label").filter({
+        hasText: /^device petname$/,
+      }).locator("input");
+      const confirm = page.locator("#visor-confirm");
+
+      await field.fill("half typed");
+
+      // Leaving a dirty sheet asks. Cancel means "I was not done": the
+      // sheet stays, and so does every character of it.
+      await appsButton(page).click();
+      await confirm.waitFor({ timeout: 10_000 });
+      await confirm.getByRole("button", { name: "Cancel", exact: true })
+        .click();
+      await confirm.waitFor({ state: "detached", timeout: 10_000 });
+      eq(await field.inputValue(), "half typed", "Cancel dropped the draft");
+
+      // Revert means "throw it away and go": the transition happens, and
+      // the sheet goes back to what the kernel last said — which for a
+      // device nobody has named is nothing.
+      await appsButton(page).click();
+      await confirm.waitFor({ timeout: 10_000 });
+      await confirm.getByRole("button", { name: "Revert", exact: true })
+        .click();
+      await paneSettled(page);
+      check(
+        await drawer(page).locator(".app-row").count() > 0,
+        "Revert did not go on to the transition it was asked about",
+      );
+      await openSettingsSheet(page);
+      eq(await field.inputValue(), "", "Revert kept the abandoned draft");
+
+      // Saved, and it is the kernel that remembers it: a reload has no
+      // draft at all, and reads the name back off the device.
+      await field.fill("the workbench");
+      await saveDraft(page);
+      await page.reload();
+      await visorReady(page);
+      await strip(page).getByText("the workbench").waitFor({ timeout: 15_000 });
+      await openSettingsSheet(page);
+      eq(
+        await field.inputValue(),
+        "the workbench",
+        "the saved device petname did not survive a reload",
+      );
+
+      // The user's own labels ride in the same draft and land on the strip:
+      // the petname in the right half's top line, and the glyph — of which
+      // only the first character is ever drawn — in the circle.
+      await drawer(page).locator("label").filter({ hasText: /^your petname$/ })
+        .locator("input").fill("ada");
+      await drawer(page).locator("label").filter({ hasText: /^your glyph$/ })
+        .locator("input").fill("🜁x");
+      await saveDraft(page);
+      await page.waitForFunction(
+        () => document.querySelector("#visor-circle")?.textContent === "🜁",
+        undefined,
+        { timeout: 10_000 },
+      );
+      await page.locator("#visor-self").getByText("ada").waitFor({
+        timeout: 10_000,
+      });
+    },
+  },
+
   {
     // Both realms on this side, named: the visor on the main thread and the
     // runtime in the SharedWorker. The worker is worth spelling out — a
diff --git a/runtime/component/src/component.rs b/runtime/component/src/component.rs
index fc1f038f..1d759a92 100644
--- a/runtime/component/src/component.rs
+++ b/runtime/component/src/component.rs
@@ -510,6 +510,32 @@ impl guest::device::Guest for Component {
     async fn reroll_word() -> Result<String, Error> {
         kernel()?.reroll_word().await.map_err(map_error)
     }
+    async fn meta(scope: guest::device::MetaScope) -> Result<Vec<(String, String)>, Error> {
+        let scope = match scope {
+            guest::device::MetaScope::User => polyvisor_kernel::MetaScope::User,
+            guest::device::MetaScope::Device => polyvisor_kernel::MetaScope::Device,
+            guest::device::MetaScope::App(id) => polyvisor_kernel::MetaScope::App(id),
+        };
+        Ok(kernel()?
+            .meta(scope)
+            .map_err(map_error)?
+            .into_iter()
+            .collect())
+    }
+    async fn set_meta(
+        scope: guest::device::MetaScope,
+        entries: Vec<(String, String)>,
+    ) -> Result<(), Error> {
+        let scope = match scope {
+            guest::device::MetaScope::User => polyvisor_kernel::MetaScope::User,
+            guest::device::MetaScope::Device => polyvisor_kernel::MetaScope::Device,
+            guest::device::MetaScope::App(id) => polyvisor_kernel::MetaScope::App(id),
+        };
+        kernel()?
+            .set_meta(scope, entries.into_iter().collect())
+            .await
+            .map_err(map_error)
+    }
     async fn keep(petname: String, passphrase: Option<String>) -> Result<(), Error> {
         kernel()?.keep(petname, passphrase).await.map_err(map_error)
     }
diff --git a/runtime/crates/kernel/src/device.rs b/runtime/crates/kernel/src/device.rs
index 29ca0327..055e9738 100644
--- a/runtime/crates/kernel/src/device.rs
+++ b/runtime/crates/kernel/src/device.rs
@@ -4,6 +4,7 @@
 
 use serde::{Deserialize, Serialize};
 
+use std::collections::BTreeMap;
 use std::sync::LazyLock;
 
 use crate::{Error, ErrorCode};
@@ -126,6 +127,26 @@ pub struct Device {
     pub name: String,
     pub hue: u16,
     pub word: String,
+    /// The user's own labels — petname, glyph, whatever the visor settles on
+    /// (internal.wit `meta-scope`). Absent from checkpoints written before
+    /// this field existed; `serde(default)` keeps those loading.
+    #[serde(default)]
+    pub meta: Meta,
+}
+
+/// One map per `MetaScope`; see internal.wit `meta-scope`.
+#[derive(Debug, Clone, PartialEq, Eq, Default, Serialize, Deserialize)]
+pub struct Meta {
+    pub user: BTreeMap<String, String>,
+    pub device: BTreeMap<String, String>,
+    pub app: BTreeMap<String, BTreeMap<String, String>>,
+}
+
+/// Which map `meta`/`set_meta` reads or replaces.
+pub enum MetaScope {
+    User,
+    Device,
+    App(String),
 }
 
 impl Device {
@@ -143,6 +164,7 @@ impl Device {
             name: String::new(),
             hue: (draw(rng) % 360) as u16,
             word: word_at(draw(rng)),
+            meta: Meta::default(),
         }
     }
 
diff --git a/runtime/crates/kernel/src/lib.rs b/runtime/crates/kernel/src/lib.rs
index f2634ff9..c513d44b 100644
--- a/runtime/crates/kernel/src/lib.rs
+++ b/runtime/crates/kernel/src/lib.rs
@@ -24,7 +24,7 @@ mod store;
 mod sync;
 
 pub use apps::{AppInfo, AssetInfo, ComponentArtifacts};
-pub use device::{DeviceStatus, IndexRow, Rest, State, Tier};
+pub use device::{DeviceStatus, IndexRow, MetaScope, Rest, State, Tier};
 pub use drive::{Binding, HttpResponse};
 pub use events::Event;
 pub use pairing::Phase;
@@ -555,6 +555,46 @@ impl Kernel {
         self.checkpoint().await
     }
 
+    /// internal.wit `device.meta`: an unknown app id answers an empty map
+    /// rather than an error — the visor asks before it knows whether the app
+    /// has ever set anything.
+    pub fn meta(&self, scope: MetaScope) -> Result<BTreeMap<String, String>, Error> {
+        self.open()?;
+        let state = self.state.borrow();
+        let device = state.device.as_ref().expect("open implies a device");
+        Ok(match scope {
+            MetaScope::User => device.meta.user.clone(),
+            MetaScope::Device => device.meta.device.clone(),
+            MetaScope::App(id) => device.meta.app.get(&id).cloned().unwrap_or_default(),
+        })
+    }
+
+    /// internal.wit `device.set-meta`: replaces the whole map for `scope`.
+    /// An empty map for an app scope removes that app's entry rather than
+    /// leaving an empty one behind.
+    pub async fn set_meta(
+        &self,
+        scope: MetaScope,
+        meta: BTreeMap<String, String>,
+    ) -> Result<(), Error> {
+        self.open()?;
+        self.with_device(|d| {
+            match scope {
+                MetaScope::User => d.meta.user = meta,
+                MetaScope::Device => d.meta.device = meta,
+                MetaScope::App(id) => {
+                    if meta.is_empty() {
+                        d.meta.app.remove(&id);
+                    } else {
+                        d.meta.app.insert(id, meta);
+                    }
+                }
+            }
+            Ok(())
+        })?;
+        self.checkpoint().await
+    }
+
     pub async fn reroll_word(&self) -> Result<String, Error> {
         self.open()?;
         let word = {
diff --git a/runtime/crates/kernel/tests/kernel.rs b/runtime/crates/kernel/tests/kernel.rs
index dd6c5a8c..c80e4386 100644
--- a/runtime/crates/kernel/tests/kernel.rs
+++ b/runtime/crates/kernel/tests/kernel.rs
@@ -13,8 +13,8 @@ use futures::stream::StreamExt as _;
 use futures::{executor::LocalPool, task::LocalSpawnExt as _};
 use polyvisor_kernel::{
     Accepted, BootConfig, Bound, Clock, Dialed, EngineTransport, Error, ErrorCode, Event, Fetch,
-    Files, HttpResponse, IndexRow, Kernel, LEASE_TTL_MS, LocalFuture, Locks, Net, NetHandle, Phase,
-    Platform, Rest, Rng, Seams, Spawn, State, Tier,
+    Files, HttpResponse, IndexRow, Kernel, LEASE_TTL_MS, LocalFuture, Locks, MetaScope, Net,
+    NetHandle, Phase, Platform, Rest, Rng, Seams, Spawn, State, Tier,
 };
 
 // -- harness -----------------------------------------------------------------
@@ -1427,6 +1427,60 @@ fn name_and_hue_persist_across_a_reload_and_an_out_of_range_hue_is_refused() {
     assert_eq!(reread.hue, 200);
 }
 
+#[test]
+fn meta_persists_across_a_reload_and_is_unavailable_while_sealed() {
+    let world = World::default();
+    let kernel = world.boot();
+    block_on(kernel.set_meta(
+        MetaScope::User,
+        BTreeMap::from([("petname".into(), "Lann".into())]),
+    ))
+    .unwrap();
+    block_on(kernel.set_meta(
+        MetaScope::App("app-1".into()),
+        BTreeMap::from([("glyph".into(), "L".into())]),
+    ))
+    .unwrap();
+    assert_eq!(
+        kernel.meta(MetaScope::User).unwrap(),
+        BTreeMap::from([("petname".into(), "Lann".into())])
+    );
+    assert_eq!(
+        kernel.meta(MetaScope::App("app-1".into())).unwrap(),
+        BTreeMap::from([("glyph".into(), "L".into())])
+    );
+    // An app with no meta ever set answers empty, not an error.
+    assert_eq!(
+        kernel.meta(MetaScope::App("unknown".into())).unwrap(),
+        BTreeMap::new()
+    );
+    block_on(kernel.keep("desk".into(), Some("open sesame".into()))).unwrap();
+
+    let reread = world.boot();
+    assert_eq!(
+        reread.device_status().unwrap().state,
+        State::Sealed,
+        "a durable device under a passphrase boots sealed"
+    );
+    assert_eq!(
+        reread.meta(MetaScope::User).unwrap_err().code,
+        ErrorCode::Unavailable,
+        "meta rides in the sealed checkpoint: unavailable while sealed"
+    );
+    assert_eq!(
+        block_on(reread.set_meta(MetaScope::Device, BTreeMap::new()))
+            .unwrap_err()
+            .code,
+        ErrorCode::Unavailable
+    );
+    block_on(reread.unseal("open sesame".into())).unwrap();
+    assert_eq!(
+        reread.meta(MetaScope::User).unwrap(),
+        BTreeMap::from([("petname".into(), "Lann".into())]),
+        "meta persisted across the reload, readable once unsealed"
+    );
+}
+
 #[test]
 fn tasks_survive_a_reload_but_sessions_do_not() {
     let world = World::default();
diff --git a/runtime/wit/internal.wit b/runtime/wit/internal.wit
index 50886232..04c23128 100644
--- a/runtime/wit/internal.wit
+++ b/runtime/wit/internal.wit
@@ -193,6 +193,16 @@ interface device {
     set-hue: async func(hue: u16) -> result<_, error>;
     reroll-word: async func() -> result<string, error>;
 
+    /// The user's own labels for themself, this device, and each installed
+    /// app — petname, glyph, whatever the visor settles on. Free-form while
+    /// the field set is in flux: keys are the visor's vocabulary, values are
+    /// user voice. Personal: rides in the sealed checkpoint with name/hue/
+    /// word, so `unavailable` while sealed.
+    variant meta-scope { user, device, app(string) }
+    meta: async func(scope: meta-scope) -> result<list<tuple<string, string>>, error>;
+    /// Replaces the whole map for `scope`.
+    set-meta: async func(scope: meta-scope, entries: list<tuple<string, string>>) -> result<_, error>;
+
     /// Promote to durable. `passphrase = none` is `rests-open`. Idempotent
     /// on the petname; changing the rest of a kept device is `refused`
     /// (reseal is a later milestone).
diff --git a/visor/src/kernel.rs b/visor/src/kernel.rs
index 31b2519e..fe2dcf76 100644
--- a/visor/src/kernel.rs
+++ b/visor/src/kernel.rs
@@ -256,6 +256,41 @@ pub(crate) async fn reroll_word() -> Result<String, String> {
     api::device::reroll_word().await.map_err(message)
 }
 
+/// Which map `meta`/`set_meta` reads or replaces (internal.wit `meta-scope`).
+#[derive(Clone, PartialEq, Debug)]
+pub(crate) enum MetaScope {
+    User,
+    Device,
+    App(String),
+}
+
+fn meta_scope(scope: MetaScope) -> api::device::MetaScope {
+    match scope {
+        MetaScope::User => api::device::MetaScope::User,
+        MetaScope::Device => api::device::MetaScope::Device,
+        MetaScope::App(id) => api::device::MetaScope::App(id),
+    }
+}
+
+pub(crate) type Meta = std::collections::BTreeMap<String, String>;
+
+/// The user's own labels for themself, this device, and one app
+/// (internal.wit `device.meta`).
+pub(crate) async fn meta(scope: MetaScope) -> Result<Meta, String> {
+    Ok(api::device::meta(meta_scope(scope))
+        .await
+        .map_err(message)?
+        .into_iter()
+        .collect())
+}
+
+/// Replaces the whole map for `scope` (internal.wit `device.set-meta`).
+pub(crate) async fn set_meta(scope: MetaScope, meta: Meta) -> Result<(), String> {
+    api::device::set_meta(meta_scope(scope), meta.into_iter().collect())
+        .await
+        .map_err(message)
+}
+
 pub(crate) async fn installed() -> Result<Vec<App>, String> {
     Ok(api::apps::installed()
         .await
diff --git a/visor/src/state.rs b/visor/src/state.rs
index ec76faa1..e7c3370d 100644
--- a/visor/src/state.rs
+++ b/visor/src/state.rs
@@ -2,17 +2,35 @@
 //! only stateful thing in the visor's chrome is testable natively.
 
 /// What the drawer is showing when it is open. A closed set, so this is an
-/// enum and not an abstraction. `Apps`/`Settings` are the strip's own
-/// buttons; `Unseal` and `Devices` are ceremonies the boot may raise on its
-/// own, and `Devices` is additionally reachable from `Settings`.
+/// enum and not an abstraction. `Apps`/`AppInfo` are what the strip's left
+/// half raises and `Settings` what its right half does; `Unseal` and
+/// `Devices` are ceremonies the boot may raise on its own, and `Devices` is
+/// additionally reachable from `Settings`.
 #[derive(Clone, Copy, PartialEq, Eq, Debug)]
 pub(crate) enum Tenant {
     Apps,
+    AppInfo,
     Settings,
     Unseal,
     Devices,
 }
 
+impl Tenant {
+    /// Where this tenant sits on the one axis the drawer slides along, so a
+    /// switch has a direction: a sheet reached from the strip's left half
+    /// enters from the left of one reached from its right half, and
+    /// "Other devices" — reached from Settings — enters from the right of
+    /// it. Ties (`Apps`/`AppInfo`, which are the same half) slide the same
+    /// way as any other rightward move; only the sign is read.
+    pub(crate) fn ordinal(self) -> u8 {
+        match self {
+            Tenant::Apps | Tenant::AppInfo => 0,
+            Tenant::Settings | Tenant::Unseal => 1,
+            Tenant::Devices => 2,
+        }
+    }
+}
+
 /// `device.state` from internal.wit, as a plain value: the reducer decides
 /// what the drawer does at boot, and that decision must be testable without
 /// the component bindings (which exist only on the wasm target).
@@ -46,6 +64,10 @@ pub(crate) enum Rest {
 /// brand new on an origin that already holds a kept one is far more likely
 /// to be a reload that lost its anchor than a deliberate second device.
 ///
+/// `Closed` here means "no ceremony to raise", not "show nothing": the
+/// caller runs the result through [`Drawer::reduce`] with the pinned flag,
+/// which at boot — nothing is running yet — rests it on the app list.
+///
 // CONTRACT: the dispatch spells the "brand new" test two ways ("state is
 // fresh" and "our status.tier == ephemeral && status.petname == \"\""). The
 // conservative reading is the conjunction — all three must hold — so a
@@ -190,22 +212,31 @@ pub(crate) enum Drawer {
 
 #[derive(Clone, Copy, PartialEq, Eq, Debug)]
 pub(crate) enum Action {
-    /// A strip button for a tenant was pressed.
-    Toggle(Tenant),
-    /// Something happened that the drawer must get out of the way of —
-    /// a session opening, or closing, or a seal opening.
+    /// A half of the strip was pressed, or a sheet sent the user on. Never
+    /// closes: showing what is already shown is identity, so the drawer is
+    /// not a toggle any more and a press can never leave the user looking
+    /// at nothing.
+    Show(Tenant),
+    /// Something happened that the drawer must get out of the way of — a
+    /// session opening, or closing, a seal opening, or the scrim pressed.
     Close,
 }
 
 impl Drawer {
-    pub(crate) fn reduce(self, action: Action) -> Drawer {
+    /// `pinned` is "nothing is running": with no app on screen there is
+    /// nothing for the drawer to be in the way of, so the app list is what
+    /// the visor rests at and `Closed` is not a state it can reach. With a
+    /// session running the app owns the screen and `Close` means it.
+    pub(crate) fn reduce(self, action: Action, pinned: bool) -> Drawer {
+        let rest = if pinned {
+            Drawer::Open(Tenant::Apps)
+        } else {
+            Drawer::Closed
+        };
         match action {
-            // The same button again closes: a strip button is a toggle,
-            // never a one-way trip, so the strip is always one press from
-            // showing nothing but itself.
-            Action::Toggle(t) if self == Drawer::Open(t) => Drawer::Closed,
-            Action::Toggle(t) => Drawer::Open(t),
-            Action::Close => Drawer::Closed,
+            Action::Show(t) if self == Drawer::Open(t) => self,
+            Action::Show(t) => Drawer::Open(t),
+            Action::Close => rest,
         }
     }
 
@@ -221,35 +252,70 @@ impl Drawer {
 mod tests {
     use super::*;
 
+    /// Showing what is already shown is identity: a press on the half of
+    /// the strip whose sheet is open must not shut it, or the drawer would
+    /// flicker every time a user pressed the thing they were reading.
     #[test]
-    fn same_tenant_twice_closes() {
-        let d = Drawer::default().reduce(Action::Toggle(Tenant::Apps));
-        assert_eq!(d, Drawer::Open(Tenant::Apps));
-        assert_eq!(d.reduce(Action::Toggle(Tenant::Apps)), Drawer::Closed);
+    fn showing_the_open_tenant_changes_nothing() {
+        for pinned in [true, false] {
+            let d = Drawer::Open(Tenant::Apps);
+            assert_eq!(d.reduce(Action::Show(Tenant::Apps), pinned), d);
+        }
     }
 
     #[test]
     fn other_tenant_replaces() {
-        let d = Drawer::default().reduce(Action::Toggle(Tenant::Apps));
+        let d = Drawer::default().reduce(Action::Show(Tenant::Apps), true);
         assert_eq!(
-            d.reduce(Action::Toggle(Tenant::Settings)),
+            d.reduce(Action::Show(Tenant::Settings), true),
             Drawer::Open(Tenant::Settings)
         );
     }
 
+    /// Nothing running: the app list is where the drawer rests, so a close
+    /// lands there and `Closed` is not reachable at all.
+    #[test]
+    fn pinned_close_opens_the_app_list() {
+        for from in [
+            Drawer::Open(Tenant::Settings),
+            Drawer::Open(Tenant::Devices),
+            Drawer::Open(Tenant::Unseal),
+            Drawer::Closed,
+        ] {
+            assert_eq!(
+                from.reduce(Action::Close, true),
+                Drawer::Open(Tenant::Apps),
+                "pinned close from {from:?}"
+            );
+        }
+    }
+
     /// A session opening (and closing) sends `Close`: the app frame gets
     /// the screen, the drawer never covers it.
     #[test]
-    fn session_change_closes_the_drawer() {
+    fn unpinned_close_shuts_the_drawer() {
         for open in [
             Drawer::Open(Tenant::Apps),
+            Drawer::Open(Tenant::AppInfo),
             Drawer::Open(Tenant::Settings),
             Drawer::Closed,
         ] {
-            assert_eq!(open.reduce(Action::Close), Drawer::Closed);
+            assert_eq!(open.reduce(Action::Close, false), Drawer::Closed);
         }
     }
 
+    /// The slide direction is a sign, and it has to be the one the strip
+    /// implies: the left half's sheets sit left of the right half's, and
+    /// "Other devices" sits right of Settings, which is where it is
+    /// reached from.
+    #[test]
+    fn ordinals_order_the_sheets_left_to_right() {
+        assert_eq!(Tenant::Apps.ordinal(), Tenant::AppInfo.ordinal());
+        assert!(Tenant::Apps.ordinal() < Tenant::Settings.ordinal());
+        assert_eq!(Tenant::Unseal.ordinal(), Tenant::Settings.ordinal());
+        assert!(Tenant::Settings.ordinal() < Tenant::Devices.ordinal());
+    }
+
     #[test]
     fn tenant_reports_what_is_open() {
         assert_eq!(Drawer::Closed.tenant(), None);
@@ -271,12 +337,13 @@ mod tests {
     }
 
     /// The seal opening is a `Close`: the ceremony is over and the strip is
-    /// now painted with a real identity, which is the thing to look at.
+    /// now painted with a real identity. Nothing is running at that moment,
+    /// so what the drawer rests at is the app list.
     #[test]
-    fn unseal_success_closes_the_drawer() {
+    fn unseal_success_rests_on_the_app_list() {
         assert_eq!(
-            Drawer::Open(Tenant::Unseal).reduce(Action::Close),
-            Drawer::Closed
+            Drawer::Open(Tenant::Unseal).reduce(Action::Close, true),
+            Drawer::Open(Tenant::Apps)
         );
     }
 
@@ -316,7 +383,7 @@ mod tests {
     #[test]
     fn devices_is_reachable_from_settings() {
         assert_eq!(
-            Drawer::Open(Tenant::Settings).reduce(Action::Toggle(Tenant::Devices)),
+            Drawer::Open(Tenant::Settings).reduce(Action::Show(Tenant::Devices), true),
             Drawer::Open(Tenant::Devices)
         );
     }
diff --git a/visor/src/style.rs b/visor/src/style.rs
index 76ae771d..186f75ae 100644
--- a/visor/src/style.rs
+++ b/visor/src/style.rs
@@ -3,41 +3,160 @@
 //! Shipped as a `<style>` element the visor creates itself, first thing:
 //! the trusted pixels run under no stream-dom policy and must not depend on
 //! anything the page provides, so there is exactly one stylesheet and it is
-//! this string. No theming, no variables beyond the anchor hue (which is
-//! per-element, since it is device identity and not decoration).
+//! this string.
+//!
+//! Every colour here is a function of one number the stylesheet does not
+//! contain: `--hue`, which `#visor-root` carries as an inline style and
+//! only in the arm that saw `device.status` say the device is open
+//! (docs/design.md "Devices"). So the palette cascades — strip, drawer,
+//! buttons and voices all shift together — while the fact that decides
+//! whether anything is painted at all stays one expression in one place.
 
 pub(crate) const CSS: &str = r#"
-#visor-strip, #visor-drawer { font: 14px/1.4 system-ui, sans-serif; color: #f4f4f5; }
+/* The two arms of the anchor rule, and the only place either is spelled.
+   Claimed: every colour is `--hue` at a fixed lightness/chroma. Unclaimed:
+   the same lightnesses at zero chroma, so an unpainted visor is the same
+   shape in grey rather than a second design. */
+#visor-root {
+  position: relative;
+  font: 14px/1.4 system-ui, sans-serif;
+  color: oklch(0.2 0.02 var(--hue));
+  --strip: oklch(0.62 0.14 var(--hue));
+  --drawer: oklch(0.7 0.11 var(--hue));
+  --accent: oklch(0.71 0.16 var(--hue));
+  --edge: oklch(0.45 0.09 var(--hue));
+  --quiet: oklch(0.38 0.05 var(--hue));
+  --plate: oklch(0.93 0.03 var(--hue));
+  --plate-ink: oklch(0.25 0.06 var(--hue));
+  --field: oklch(0.88 0.04 var(--hue));
+}
+#visor-root.unclaimed {
+  color: oklch(0.2 0 0);
+  --strip: oklch(0.62 0 0);
+  --drawer: oklch(0.7 0 0);
+  --accent: oklch(0.71 0 0);
+  --edge: oklch(0.45 0 0);
+  --quiet: oklch(0.38 0 0);
+  --plate: oklch(0.93 0 0);
+  --plate-ink: oklch(0.25 0 0);
+  --field: oklch(0.88 0 0);
+}
 
-/* Fixed on all three axes so no content can push the anchor around. */
+/* Fixed on all three axes so no content can push the anchor around, and
+   the one thing in this tree that is never overlaid: the drawer is
+   absolutely positioned below it rather than in flow, so opening anything
+   moves no pixel of the strip (docs/design.md M1: "strip geometry immobile
+   with the app mounted"). */
 #visor-strip {
   box-sizing: border-box;
   height: 56px; min-height: 56px; max-height: 56px;
-  display: flex; align-items: center; gap: 12px;
-  padding: 0 12px;
-  background: #18181b;
-  border-bottom: 1px solid #3f3f46;
+  display: flex; align-items: center;
+  padding: 0 8px;
+  position: relative; z-index: 3;
+  background: var(--strip);
+  border-bottom: 1px solid var(--edge);
+}
+
+/* The two halves. Each is a whole button so the target is the half, not
+   the glyph: one is "what is running", the other "who this is". */
+#visor-app, #visor-self {
+  flex: 1; min-width: 0;
+  display: flex; align-items: center; gap: 8px;
+  background: none; border: 0; border-radius: 8px;
+  padding: 4px 8px; text-align: left;
+}
+#visor-self { flex-direction: row-reverse; text-align: right; }
+#visor-app[aria-pressed="true"], #visor-self[aria-pressed="true"] { background: var(--drawer); }
+#visor-divider { width: 1px; align-self: stretch; margin: 5px; background: var(--edge); }
+#visor-app-glyph, #visor-circle {
+  width: 28px; height: 28px; flex: none;
+  display: flex; align-items: center; justify-content: center;
+  /* The plate, not the drawer colour: a pressed half wears the drawer
+     colour, and a glyph the same colour as its half vanishes. */
+  background: var(--plate); color: var(--plate-ink);
 }
+#visor-app-glyph { border-radius: 6px; }
+#visor-circle { border-radius: 50%; }
+.stack { flex: 1; min-width: 0; }
+.stack .top, .stack .bottom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.stack .bottom { font-size: 12px; }
 
-/* Content-sized, capped, and scrolling past the cap: growth is bounded so
-   the drawer can never squeeze the strip out of the viewport. */
+/* Everything below the strip is an overlay on the app zone, never a push:
+   the scrim covers the app, the drawer covers the scrim, and both start
+   exactly where the strip ends. */
+#visor-scrim { position: fixed; inset: 56px 0 0 0; z-index: 1; background: oklch(0 0 0 / 0.25); }
 #visor-drawer {
+  position: absolute; top: 56px; left: 0; right: 0; z-index: 2;
   box-sizing: border-box;
-  max-height: 60vh; overflow-y: auto;
+  height: min(60vh, 480px);
+  overflow: hidden;
+  background: var(--drawer);
+  border-bottom: 1px solid var(--edge);
+  animation: visor-drawer-open 180ms ease-out;
+}
+#visor-drawer.closing { animation: visor-drawer-close 180ms ease-in forwards; }
+
+/* One pane per tenant, stacked so two can be on screen at once while one
+   slides out. The drawer's height is fixed and the pane scrolls inside it,
+   so no sheet's length can move anything.
+
+   The four backgrounds are the local/scroll shadow technique: the first two
+   are drawer-coloured covers pinned to the content (`local`), the second
+   two are shadows pinned to the viewport (`scroll`). Where there is more
+   content above or below, the cover has scrolled away and the shadow shows
+   — so "there is more" is visible without a scrollbar being trusted to say
+   it. */
+.pane {
+  position: absolute; inset: 0;
+  overflow-y: auto;
   padding: 12px;
-  background: #27272a;
-  border-bottom: 1px solid #3f3f46;
+  box-sizing: border-box;
+  background:
+    linear-gradient(var(--drawer) 30%, transparent) center top / 100% 32px,
+    linear-gradient(transparent, var(--drawer) 70%) center bottom / 100% 32px,
+    radial-gradient(farthest-side at 50% 0, oklch(0 0 0 / 0.35), transparent) center top / 100% 12px,
+    radial-gradient(farthest-side at 50% 100%, oklch(0 0 0 / 0.35), transparent) center bottom / 100% 12px;
+  background-repeat: no-repeat;
+  background-attachment: local, local, scroll, scroll;
+  background-color: var(--drawer);
 }
+.pane.enter-from-right { animation: visor-enter-right 200ms ease-out; }
+.pane.enter-from-left { animation: visor-enter-left 200ms ease-out; }
+.pane.leave-to-left { animation: visor-leave-left 200ms ease-in forwards; }
+.pane.leave-to-right { animation: visor-leave-right 200ms ease-in forwards; }
 
-#visor-identity { display: flex; align-items: center; gap: 8px; }
-#visor-circle { width: 28px; height: 28px; border-radius: 50%; flex: none; }
-#visor-context { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-#visor-actions { display: flex; gap: 8px; flex: none; }
+@keyframes visor-drawer-open { from { height: 0; } }
+@keyframes visor-drawer-close { to { height: 0; } }
+@keyframes visor-enter-right { from { transform: translateX(100%); } }
+@keyframes visor-enter-left { from { transform: translateX(-100%); } }
+@keyframes visor-leave-left { to { transform: translateX(-100%); } }
+@keyframes visor-leave-right { to { transform: translateX(100%); } }
 
-button { font: inherit; color: inherit; background: #3f3f46; border: 1px solid #52525b; border-radius: 6px; padding: 6px 10px; cursor: pointer; }
-button[aria-pressed="true"] { background: #52525b; }
+/* Movement is decoration; the states it moves between are not. Zeroing the
+   duration keeps every `animationend` the visor unmounts on firing. */
+@media (prefers-reduced-motion: reduce) {
+  #visor-root * { animation-duration: 0s !important; }
+}
+
+/* Unsaved changes, over the drawer: the only thing in this tree that takes
+   the press away from what raised it. */
+#visor-confirm {
+  position: absolute; top: 56px; left: 0; right: 0; z-index: 4;
+  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
+  padding: 12px;
+  box-sizing: border-box;
+  background: var(--drawer);
+  border-bottom: 1px solid var(--edge);
+}
+
+/* The line at the top of every pane. Only the pane that is staying
+   carries the id — during a slide there are two of these on screen. */
+.notice { margin-bottom: 8px; min-height: 1.4em; }
+
+button { font: inherit; color: inherit; background: var(--accent); border: 1px solid var(--edge); border-radius: 6px; padding: 6px 10px; cursor: pointer; }
+button[aria-pressed="true"] { border-color: var(--plate-ink); }
 button[disabled] { opacity: 0.5; cursor: default; }
-input[type="text"], input[type="password"] { font: inherit; color: inherit; background: #18181b; border: 1px solid #52525b; border-radius: 6px; padding: 6px 8px; }
+input[type="text"], input[type="password"] { font: inherit; color: inherit; background: var(--field); border: 1px solid var(--edge); border-radius: 6px; padding: 6px 8px; }
 label { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
 
 .app-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
@@ -45,7 +164,7 @@ label { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
 
 /* The device ceremonies: unseal, keep, the entry picker, erase. Minimal
    on purpose — this chrome is slated for a redesign. */
-.sheet { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 8px 0; border-top: 1px solid #3f3f46; }
+.sheet { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--edge); }
 .sheet-head { margin-bottom: 4px; }
 .sheet-error { margin-top: 2px; }
 .choice { display: flex; gap: 8px; }
@@ -99,22 +218,17 @@ label { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
   user-select: all;
 }
 
-/* Unclaimed: before `device.status` reports `open` there is no identity to
-   show, so the strip wears zero chroma — no hue, no name, no word. The
-   circle gets its grey here and *only* here: the painted hue is an inline
-   style the open branch alone emits (docs/design.md "Devices": a page
-   imitating the picker must not be able to paint the user's colour). */
-#visor-strip.unclaimed #visor-circle { background: #52525b; }
-
 /* The three voices. polyvisor speaking. */
-.framework { color: #a1a1aa; font-style: italic; }
+.framework { color: var(--quiet); font-style: italic; }
 /* The user's own words, echoed: upright, weighted, never quoted. */
-.user { font-weight: 600; font-style: normal; color: #fafafa; }
+.user { font-weight: 600; font-style: normal; color: inherit; }
 /* A publisher's words: plated, monospace, quoted, so foreign text is
-   visibly foreign wherever it lands. */
+   visibly foreign wherever it lands. The plate is derived from the hue
+   like everything else, but far lighter than the drawer it sits on, so it
+   stays a plate at every hue. */
 .app {
   font-family: ui-monospace, monospace;
-  background: #e4e4e7; color: #18181b;
+  background: var(--plate); color: var(--plate-ink);
   border-radius: 4px; padding: 2px 6px;
   quotes: '"' '"';
 }
@@ -146,15 +260,36 @@ mod tests {
         assert!(CSS.contains("height: 56px; min-height: 56px; max-height: 56px;"));
     }
 
-    /// The unclaimed dress is a stylesheet fact, not a per-element one:
-    /// the strip carries the class and the circle's grey follows from it,
-    /// so no code path can grey the strip and still paint the circle.
+    /// The anchor rule, as a property of the stylesheet: no colour with any
+    /// chroma in it names a hue of its own. Every one of them reads
+    /// `var(--hue)`, and `--hue` is set at exactly one site — the inline
+    /// style on `#visor-root` that the open arm of `Ident` emits — so a
+    /// visor that never saw `device.status` say "open" cannot show the
+    /// user's colour, whatever else it renders (docs/design.md "Devices").
+    /// Achromatic colours (the greys of the unclaimed dress, the scroll
+    /// shadows) carry a hue component too, but it decides nothing.
     #[test]
-    fn stylesheet_greys_the_unclaimed_anchor() {
-        assert!(CSS.contains("#visor-strip.unclaimed #visor-circle"));
-        // ...and the stylesheet itself never names a hue: the anchor colour
-        // reaches the DOM only through the inline style the open branch of
-        // `Identity` emits.
+    fn no_colour_with_chroma_names_its_own_hue() {
+        let mut chromatic = 0;
+        for tail in CSS.split("oklch(").skip(1) {
+            let args = &tail[..tail.find(')').expect("unclosed oklch()")];
+            let parts: Vec<&str> = args.split_whitespace().collect();
+            assert!(parts.len() >= 3, "oklch({args}) has too few components");
+            if parts[1] == "0" {
+                continue;
+            }
+            chromatic += 1;
+            assert!(
+                parts[2].starts_with("var(--hue"),
+                "oklch({args}) has chroma and yet names its own hue"
+            );
+        }
+        assert!(chromatic > 0, "the stylesheet paints nothing from the hue");
+        // The palette both arms of the rule define, spelled once each.
+        assert!(CSS.contains("#visor-root.unclaimed"));
+        assert!(CSS.contains("--strip: oklch(0.62 0.14 var(--hue));"));
+        assert!(CSS.contains("--strip: oklch(0.62 0 0);"));
+        // No second colour syntax to smuggle a hue through.
         assert!(!CSS.contains("hsl("));
     }
 
diff --git a/visor/src/ui.rs b/visor/src/ui.rs
index 71b10273..9f87275a 100644
--- a/visor/src/ui.rs
+++ b/visor/src/ui.rs
@@ -1,16 +1,24 @@
-//! The trusted pixels: the strip, and the drawer behind it.
+//! The trusted pixels: the strip, and the drawer it opens over the app.
 //!
 //! The strip is the trust anchor — always present, fixed height, and the
-//! only place the device identity is shown. The drawer is everything that
-//! needs room: the app list, the device settings, and the two device
-//! ceremonies (unseal, and the entry picker). Both are rendered by this one
-//! component so there is exactly one tree, and no ordering question about
-//! which of them the receiver mounts first.
+//! only place the device identity is shown. Two halves and nothing else:
+//! what is running, and who this is. The drawer is everything that needs
+//! room: the app list, the running app's own labels, the device settings,
+//! and the two device ceremonies (unseal, and the entry picker). Both are
+//! rendered by this one component so there is exactly one tree, and no
+//! ordering question about which of them the receiver mounts first.
+//!
+//! The drawer *overlays* the app zone rather than pushing anything: the
+//! strip is the line between trusted pixels and the app, so it never moves,
+//! in any drawer state (docs/design.md M1: "strip geometry immobile with
+//! the app mounted").
 //!
 //! The visor holds no state of its own beyond what is on screen right now
 //! (docs/design.md "Visor and apps render through stream-dom"): identity,
-//! hue, word, the app list and the device index are kernel state, read at
-//! mount and re-read only when the visor itself changed them.
+//! hue, word, the labels, the app list and the device index are kernel
+//! state, read at mount and re-read only when the visor itself changed
+//! them. The one exception is a [`Draft`], which is what a user has typed
+//! and not saved — on screen, and nowhere else.
 //!
 //! The one rule the whole file is arranged around (design.md "Devices"):
 //! **the anchor colour is never painted before the device is `open`.** A
@@ -20,28 +28,164 @@
 
 use dioxus::prelude::*;
 
-use crate::kernel::{self, App, Binding, Entry, Event, Member, Peer, SessionId, Status};
+use crate::kernel::{
+    self, App, Binding, Entry, Event, Member, Meta, MetaScope, Peer, SessionId, Status,
+};
 use crate::state::{
     Action, Drawer, Gate, Phase, Rest, Tenant, Tier, boot_drawer, claim_code, grouped,
 };
 use crate::style::CSS;
 use crate::voice::{AppText, AppVoice, Voice, coarse_age};
 
-/// What the strip says when nothing is running. Two shapes because a
-/// session ending is framework voice with the app's *title* plated — the
-/// one place the two voices share a sentence.
+/// The two keys this visor writes into every meta map. internal.wit
+/// `device.meta` leaves the vocabulary to the visor ("keys are the visor's
+/// vocabulary, values are user voice"), so these two names are the whole
+/// of it, and they mean the same thing in all three scopes.
+const PETNAME: &str = "petname";
+const GLYPH: &str = "glyph";
+
+/// A glyph as the strip draws it: the first `char` of the field, or
+/// nothing. `chars().next()` and not a byte slice — the field is free text
+/// and an emoji is the likely case, so slicing would panic on exactly what
+/// users type.
+fn glyph_of(meta: &Meta) -> String {
+    meta.get(GLYPH)
+        .and_then(|s| s.chars().next())
+        .map(String::from)
+        .unwrap_or_default()
+}
+
+fn petname_of(meta: &Meta) -> String {
+    meta.get(PETNAME).cloned().unwrap_or_default()
+}
+
+/// Write one field of a draft's meta map. An emptied field removes its key
+/// rather than storing "": `set-meta` replaces the whole map, so an empty
+/// value would be a key that means nothing — and, worse, would leave the
+/// draft comparing unequal to its seed, which is the whole definition of
+/// "unsaved changes" here.
+fn set_field(meta: &mut Meta, key: &str, value: String) {
+    if value.is_empty() {
+        meta.remove(key);
+    } else {
+        meta.insert(key.to_string(), value);
+    }
+}
+
+/// What a sheet has been told but the kernel has not.
+///
+/// The visor still holds no state of its own beyond what is on screen
+/// (docs/design.md "Visor and apps render through stream-dom"): a draft is
+/// exactly what is on screen and not yet said. Two copies are kept — the
+/// seed as the sheet was opened, the draft as it stands — because their
+/// inequality is the only honest definition of "unsaved changes", and
+/// because a save writes only the fields that differ rather than restating
+/// the whole identity to the kernel.
+#[derive(Clone, PartialEq, Default)]
+struct Draft {
+    name: String,
+    hue: u16,
+    user: Meta,
+    app: Meta,
+}
+
+/// Commit a draft: one kernel call per field that actually changed, then
+/// the local apply, then the seed catches up so the sheet is clean again.
+///
+/// The gate is bumped before the first call and not after the local apply,
+/// for the reason [`read_status`] spells out: a read already in flight is
+/// answering about the identity this is replacing, whichever lands first.
+///
+/// A failure leaves the seed alone, so the sheet stays dirty and the
+/// user's text is still theirs to retry with — the kernel's refusal is the
+/// notice, not a silent revert.
+#[allow(clippy::too_many_arguments)]
+async fn save_draft(
+    draft: Signal<Draft>,
+    mut seed: Signal<Draft>,
+    mut status: Signal<Option<Status>>,
+    mut user_meta: Signal<Meta>,
+    mut app_meta: Signal<Meta>,
+    mut notice: Signal<Option<Notice>>,
+    app_id: Option<String>,
+    mut status_gate: CopyValue<Gate>,
+) {
+    let (was, now) = (seed(), draft());
+    status_gate.write().bump();
+    let mut failed = false;
+    let mut fail = |e: String, failed: &mut bool| {
+        notice.set(Some(Notice::Plain(e)));
+        *failed = true;
+    };
+
+    if now.name != was.name {
+        match kernel::set_name(now.name.clone()).await {
+            Ok(()) => status.with_mut(|s| {
+                if let Some(s) = s {
+                    s.name = now.name.clone()
+                }
+            }),
+            Err(e) => fail(e, &mut failed),
+        }
+    }
+    if now.hue != was.hue {
+        match kernel::set_hue(now.hue).await {
+            Ok(()) => status.with_mut(|s| {
+                if let Some(s) = s {
+                    s.hue = now.hue
+                }
+            }),
+            Err(e) => fail(e, &mut failed),
+        }
+    }
+    if now.user != was.user {
+        match kernel::set_meta(MetaScope::User, now.user.clone()).await {
+            Ok(()) => user_meta.set(now.user.clone()),
+            Err(e) => fail(e, &mut failed),
+        }
+    }
+    // Only ever the live app's map: `AppInfo` exists only while a session
+    // runs, and Settings seeds `app` from that same session, so there is no
+    // path here that could write one app's labels into another's.
+    if now.app != was.app
+        && let Some(id) = app_id
+    {
+        match kernel::set_meta(MetaScope::App(id), now.app.clone()).await {
+            Ok(()) => app_meta.set(now.app.clone()),
+            Err(e) => fail(e, &mut failed),
+        }
+    }
+    if !failed {
+        seed.set(now);
+    }
+}
+
+/// One app's labels (internal.wit `device.meta`, `meta-scope.app`). Read
+/// when a session opens — the strip's left half speaks for the running app
+/// — and again when its sheet is opened.
+async fn read_app_meta(id: String, mut app_meta: Signal<Meta>, mut notice: Signal<Option<Notice>>) {
+    match kernel::meta(MetaScope::App(id)).await {
+        Ok(m) => app_meta.set(m),
+        Err(e) => notice.set(Some(Notice::Plain(e))),
+    }
+}
+
+/// What the drawer says when something happened that the user did not ask
+/// for. Two shapes because a session ending is framework voice with the
+/// app's *title* plated — the one place the two voices share a sentence.
 #[derive(Clone, PartialEq)]
 enum Notice {
     Plain(String),
     Ended { app: AppText, reason: String },
 }
 
-/// Read the device's identity, and the app list unless the device is
-/// sealed. The app list is skipped while sealed on purpose: every kernel
-/// call other than `status`/`unseal`/`erase` answers `unavailable` then
-/// (internal.wit `device`), so asking would only manufacture an error to
-/// show. A `fresh` device is read in full — it is not sealed, and
-/// internal.wit `device` rules that "`fresh` is not a gate".
+/// Read the device's identity, and — unless the device is sealed — the app
+/// list and the user's own labels. Both are skipped while sealed on
+/// purpose: every kernel call other than `status`/`unseal`/`erase` answers
+/// `unavailable` then (internal.wit `device`), so asking would only
+/// manufacture an error to show. A `fresh` device is read in full — it is
+/// not sealed, and internal.wit `device` rules that "`fresh` is not a
+/// gate".
 ///
 /// Gated like [`read_status`]: this is called after the ceremonies that
 /// change the device, and a user write landing while it is out must win.
@@ -49,6 +193,7 @@ async fn read_identity(
     mut status: Signal<Option<Status>>,
     mut apps: Signal<Vec<App>>,
     mut notice: Signal<Option<Notice>>,
+    mut user_meta: Signal<Meta>,
     gate: CopyValue<Gate>,
 ) {
     let token = gate.peek().begin();
@@ -65,6 +210,7 @@ async fn read_identity(
             status.set(Some(s));
             if sealed {
                 apps.set(Vec::new());
+                user_meta.set(Meta::new());
                 return;
             }
         }
@@ -77,6 +223,17 @@ async fn read_identity(
         }
         Err(e) => notice.set(Some(Notice::Plain(e))),
     }
+    // The strip's right half shows these, so they are boot state and not
+    // sheet state: a user who never opens Settings still sees their own
+    // petname and glyph on the anchor.
+    match kernel::meta(MetaScope::User).await {
+        Ok(m) => {
+            if gate.peek().apply(token) {
+                user_meta.set(m);
+            }
+        }
+        Err(e) => notice.set(Some(Notice::Plain(e))),
+    }
 }
 
 /// Re-read the device identity alone, and only write it if it actually
@@ -206,7 +363,7 @@ async fn apply_phase(
     let paired = next == Phase::Done;
     pairing_phase.set(next);
     if paired {
-        // Framework voice, in the strip's context line: the ceremony is
+        // Framework voice, on the drawer's notice line: the ceremony is
         // over and the drawer may well be shut by the time it lands.
         notice.set(Some(Notice::Plain("device paired".into())));
         read_members(members, notice).await;
@@ -225,6 +382,25 @@ pub(crate) fn Visor() -> Element {
     let members = use_signal(Vec::<Member>::new);
     let pairing_phase = use_signal(Phase::default);
     let binding = use_signal(|| None::<Binding>);
+    // The user's own labels, and the running app's. Kernel state, like
+    // everything else here — and written back only by a save, so the strip
+    // never shows a label the kernel has not been told about.
+    let user_meta = use_signal(Meta::new);
+    let mut app_meta = use_signal(Meta::new);
+
+    // What the sheets are editing. `seed` is the identity as the sheet was
+    // opened, `draft` as it stands; dirty is exactly `draft != seed`.
+    let mut seed = use_signal(Draft::default);
+    let mut draft = use_signal(Draft::default);
+    // A transition the user asked for while the draft was dirty. It waits
+    // on `#visor-confirm` rather than happening.
+    let mut pending = use_signal(|| None::<Action>);
+    // Shut, but still on screen playing its close animation. The drawer
+    // stays `Open(t)` throughout — this is what says the tenant showing is
+    // the one on its way out — and `onanimationend` is what finally closes.
+    let mut closing = use_signal(|| false);
+    // The tenant sliding out under the new one, and whether it goes left.
+    let mut leaving = use_signal(|| None::<(Tenant, bool)>);
 
     // Two orderings, both between a spawned read and a user's write. They
     // are `CopyValue` rather than `Signal` on purpose: a generation is
@@ -232,15 +408,173 @@ pub(crate) fn Visor() -> Element {
     // to it would re-render the visor on every press that bumps it.
     //
     // `status_gate`: bumped by everything that changes this device
-    // (set-name, colour, word, keep, unseal), read by `read_status` and
+    // (a saved draft, word, keep, unseal), read by `read_status` and
     // `read_identity`.
     //
-    // `drawer_gate`: bumped by every press that opens or closes a tenant,
-    // read by the boot decision below — which is the only writer of
-    // `drawer` that the user did not ask for.
+    // `drawer_gate`: bumped by every transition the user caused, read by
+    // the boot decision below — which is the only writer of `drawer` that
+    // the user did not ask for.
     let mut status_gate = use_hook(|| CopyValue::new(Gate::default()));
     let mut drawer_gate = use_hook(|| CopyValue::new(Gate::default()));
 
+    // Settings carries three things that are only ever as fresh as their
+    // last read: the peer list, the group, and this device's own endpoint
+    // id — which is "" until the spawned bind completes, so first paint has
+    // none. All are read by the transition that shows the tenant. So one
+    // refresh, used by three things: that transition, the section's own
+    // "Refresh" button, and every pairing act (each of which is a phase
+    // change the kernel is the authority on).
+    let refresh_devices = use_callback(move |()| {
+        spawn(async move {
+            read_status(status, notice, status_gate).await;
+            read_peers(peers, notice).await;
+            read_members(members, notice).await;
+            read_pairing(pairing_phase, members, notice).await;
+        });
+    });
+
+    // The Storage section's own re-read: the transition that shows
+    // Settings, and every act in the section (connect, sync, disconnect),
+    // each of which changes what `storage.status` answers.
+    let refresh_storage = use_callback(move |()| {
+        spawn(async move {
+            read_storage(binding, notice).await;
+        });
+    });
+
+    // Open a sheet on what the kernel last said. Called once per *opening*
+    // — never on a press that lands on the tenant already showing — so a
+    // half-typed field is never taken away from the user who typed it.
+    let seed_draft = use_callback(move |()| {
+        let identity = status.read();
+        let next = Draft {
+            name: identity
+                .as_ref()
+                .map(|s| s.name.clone())
+                .unwrap_or_default(),
+            hue: identity.as_ref().map(|s| s.hue).unwrap_or(0),
+            user: user_meta(),
+            app: app_meta(),
+        };
+        drop(identity);
+        seed.set(next.clone());
+        draft.set(next);
+    });
+
+    // Every drawer transition, and the only writer of `drawer`, `closing`
+    // and `leaving` other than the two animation handlers and the boot.
+    //
+    // The animation bookkeeping is here rather than in the reducer because
+    // it is about the two renders either side of a transition, which is not
+    // something a plain value can know. Three shapes:
+    //
+    // * shutting — the drawer stays mounted with `closing`, and the
+    //   `onanimationend` below is what sets `Closed`. Any pane in mid-slide
+    //   is dropped first: the bridge carries no animation name
+    //   (stream-dom-dioxus `convert_animation_data` answers ""), so
+    //   `closing` has to be the whole discriminator, and that only holds if
+    //   the drawer's own animation is the only one under it.
+    // * switching — the old tenant keeps rendering as a second pane until
+    //   its own animation ends, and the direction is the sign of the
+    //   ordinals.
+    // * opening — nothing to slide out of the way.
+    let apply = use_callback(move |action: Action| {
+        drawer_gate.write().bump();
+        // Pinned is "nothing is running": with no app on screen the drawer
+        // has nothing to be in the way of, so it rests on the app list.
+        let pinned = session.read().is_none();
+        let from = drawer().tenant();
+        let next = drawer().reduce(action, pinned);
+        match (from, next.tenant()) {
+            (Some(_), None) => {
+                leaving.set(None);
+                closing.set(true);
+            }
+            (Some(a), Some(b)) if a != b => {
+                closing.set(false);
+                leaving.set(Some((a, b.ordinal() > a.ordinal())));
+                drawer.set(next);
+            }
+            (None, Some(_)) => {
+                closing.set(false);
+                drawer.set(next);
+            }
+            // The tenant showing is the one asked for. Still cancels a
+            // close in flight: pressing the half you just left reopens it.
+            _ => closing.set(false),
+        }
+        if from == next.tenant() {
+            return;
+        }
+        match next.tenant() {
+            Some(Tenant::Settings) => {
+                seed_draft.call(());
+                refresh_devices.call(());
+                refresh_storage.call(());
+            }
+            // The sheet is about the running app, so its labels are read
+            // before they are seeded — the strip has them already, but a
+            // second device of the group may have relabelled it since.
+            Some(Tenant::AppInfo) => {
+                let id = session
+                    .read()
+                    .as_ref()
+                    .map(|(_, a): &(SessionId, App)| a.id.clone());
+                spawn(async move {
+                    if let Some(id) = id {
+                        read_app_meta(id, app_meta, notice).await;
+                    }
+                    seed_draft.call(());
+                });
+            }
+            _ => {}
+        }
+    });
+
+    // Every transition the *user* asked for. A dirty sheet is not left
+    // silently: the transition is parked on `pending` and `#visor-confirm`
+    // asks. Everything that calls `apply` directly instead — the boot, a
+    // session opening or ending, an opened seal — is a transition the user
+    // did not ask for and cannot be asked about, so a dirty draft is simply
+    // dropped there.
+    let request = use_callback(move |action: Action| {
+        if draft() != seed() {
+            pending.set(Some(action));
+        } else {
+            apply.call(action);
+        }
+    });
+
+    let save_now = use_callback(move |after: Option<Action>| {
+        let app_id = session
+            .read()
+            .as_ref()
+            .map(|(_, a): &(SessionId, App)| a.id.clone());
+        spawn(async move {
+            save_draft(
+                draft,
+                seed,
+                status,
+                user_meta,
+                app_meta,
+                notice,
+                app_id,
+                status_gate,
+            )
+            .await;
+            if let Some(action) = after {
+                apply.call(action);
+            }
+        });
+    });
+
+    let revert_now = use_callback(move |after: Option<Action>| {
+        draft.set(seed());
+        if let Some(action) = after {
+            apply.call(action);
+        }
+    });
+
     // The boot read: identity first, then the index, then whichever
     // ceremony the two of them together call for.
     //
@@ -249,14 +583,14 @@ pub(crate) fn Visor() -> Element {
     // `src/use_future.rs:63`), so a later status re-read cannot re-run it.
     // Running once is not enough on its own, though: it *finishes* late.
     // `visorReady` and the strip only wait for `device.status`, so the
-    // Settings button goes live while `store.devices` is still in flight,
-    // and a user who presses it then had the drawer shut under them when
-    // the boot decided `Closed`. So the decision applies only if the user
-    // has not touched the drawer meanwhile — after which it is not the
-    // boot's business what is open.
+    // strip goes live while `store.devices` is still in flight, and a user
+    // who pressed it then had the drawer changed under them when the boot
+    // decided. So the decision applies only if the user has not touched the
+    // drawer meanwhile — after which it is not the boot's business what is
+    // open.
     use_future(move || async move {
         let token = drawer_gate.peek().begin();
-        read_identity(status, apps, notice, status_gate).await;
+        read_identity(status, apps, notice, user_meta, status_gate).await;
         let index = kernel::devices().await.unwrap_or_default();
         // The user has taken over: neither the decision nor the index it
         // was based on is the newest thing on screen any more. `entries` is
@@ -270,7 +604,15 @@ pub(crate) fn Visor() -> Element {
             let others_kept = index
                 .iter()
                 .any(|e| e.id != s.id && e.tier == Tier::Durable);
-            drawer.set(boot_drawer(s.state, s.tier, &s.petname, others_kept));
+            // `boot_drawer`'s `Closed` is "no ceremony to raise", not "show
+            // nothing": nothing is running at boot, so the reducer rests it
+            // on the app list.
+            drawer.set(
+                match boot_drawer(s.state, s.tier, &s.petname, others_kept) {
+                    Drawer::Closed => Drawer::Closed.reduce(Action::Close, true),
+                    raised => raised,
+                },
+            );
         }
         entries.set(index);
     });
@@ -287,10 +629,15 @@ pub(crate) fn Visor() -> Element {
                     {
                         let _ = kernel::close_frame(id).await;
                         session.set(None);
+                        app_meta.set(Meta::new());
                         notice.set(Some(Notice::Ended {
                             app: app.title,
                             reason,
                         }));
+                        // Nothing is running now, so this rests the drawer
+                        // on the app list — which is where the notice is
+                        // read, and the strip has not moved to say it.
+                        apply.call(Action::Close);
                     }
                 }
                 // The other device acted: a peer that confirmed, an offer
@@ -304,22 +651,18 @@ pub(crate) fn Visor() -> Element {
         }
     });
 
-    // Every `drawer.set` below is a user's own doing, and each bumps
-    // `drawer_gate` so a boot decision still in flight cannot undo it.
-    let mut set_drawer = move |next: Drawer| {
-        drawer_gate.write().bump();
-        drawer.set(next);
-    };
-
     let open = move |app: App| async move {
         match kernel::launch(&app.id).await {
             Err(e) => notice.set(Some(Notice::Plain(e))),
             Ok(id) => match kernel::open_frame(id).await {
                 Ok(()) => {
                     notice.set(None);
+                    let app_id = app.id.clone();
                     session.set(Some((id, app)));
+                    // The strip's left half now speaks for this app.
+                    read_app_meta(app_id, app_meta, notice).await;
                     // The frame gets the screen; the drawer never covers it.
-                    set_drawer(drawer().reduce(Action::Close));
+                    apply.call(Action::Close);
                 }
                 Err(e) => {
                     // The session outlived the frame that was to show it;
@@ -337,15 +680,18 @@ pub(crate) fn Visor() -> Element {
             notice.set(Some(Notice::Plain(e)));
         }
         session.set(None);
-        set_drawer(drawer().reduce(Action::Close));
+        app_meta.set(Meta::new());
+        apply.call(Action::Close);
     };
 
     // "Other devices": the index is cheap and the ages on it go stale, so
     // the press that shows the sheet is also the read.
-    let show_devices = move |_| async move {
-        entries.set(kernel::devices().await.unwrap_or_default());
-        set_drawer(drawer().reduce(Action::Toggle(Tenant::Devices)));
-    };
+    let show_devices = use_callback(move |()| {
+        spawn(async move {
+            entries.set(kernel::devices().await.unwrap_or_default());
+        });
+        request.call(Action::Show(Tenant::Devices));
+    });
 
     // Every handler below is passed to a child *component*, and so has to
     // survive a re-render unchanged or the child cannot memoize.
@@ -366,59 +712,19 @@ pub(crate) fn Visor() -> Element {
     // these `Callback<_, impl Future>` rather than `EventHandler<_>`. The
     // work is `spawn`ed instead, which is exactly what an async handler
     // would have done.
-    let toggle_apps = use_callback(move |t: Tenant| {
-        set_drawer(drawer().reduce(Action::Toggle(t)));
-    });
-
-    // Settings carries two things that are only ever as fresh as their last
-    // read: the peer list, and this device's own endpoint id — which is ""
-    // until the spawned bind completes, so first paint has none. Both are
-    // read by the press that shows the tenant, exactly as "Other devices"
-    // is for the index. A press that *closes* Settings reads nothing.
-    // Everything the Devices section shows is only ever as fresh as its
-    // last read, and there is no timer in this world to make it otherwise.
-    // So one refresh, used by three things: the press that opens Settings,
-    // the section's own "Refresh" button, and every pairing act (each of
-    // which is a phase change the kernel is the authority on).
-    let refresh_devices = use_callback(move |()| {
-        spawn(async move {
-            read_status(status, notice, status_gate).await;
-            read_peers(peers, notice).await;
-            read_members(members, notice).await;
-            read_pairing(pairing_phase, members, notice).await;
-        });
-    });
-
-    // The Storage section's own re-read: the press that opens Settings,
-    // and every act in the section (connect, sync, disconnect), each of
-    // which changes what `storage.status` answers.
-    let refresh_storage = use_callback(move |()| {
-        spawn(async move {
-            read_storage(binding, notice).await;
-        });
-    });
-
-    let show_settings = use_callback(move |t: Tenant| {
-        let next = drawer().reduce(Action::Toggle(t));
-        set_drawer(next);
-        if next == Drawer::Open(Tenant::Settings) {
-            refresh_devices.call(());
-            refresh_storage.call(());
-        }
-    });
-
-    // Unseal is the one ceremony where a *later* status read is the point:
-    // the seal opening is what the sheet was for. So the gate is bumped
-    // first and the read that follows carries the new generation.
     let on_unsealed = use_callback(move |()| {
+        // Unseal is the one ceremony where a *later* status read is the
+        // point: the seal opening is what the sheet was for. So the gate is
+        // bumped first and the read that follows carries the new
+        // generation.
         status_gate.write().bump();
         spawn(async move {
-            read_identity(status, apps, notice, status_gate).await;
-            set_drawer(drawer().reduce(Action::Close));
+            read_identity(status, apps, notice, user_meta, status_gate).await;
+            apply.call(Action::Close);
         });
     });
 
-    let on_stay = use_callback(move |()| set_drawer(drawer().reduce(Action::Close)));
+    let on_stay = use_callback(move |()| apply.call(Action::Close));
 
     let on_kept = use_callback(move |persisted: bool| {
         status_gate.write().bump();
@@ -428,14 +734,33 @@ pub(crate) fn Visor() -> Element {
                     "the browser declined to persist storage".into(),
                 )));
             }
-            read_identity(status, apps, notice, status_gate).await;
+            read_identity(status, apps, notice, user_meta, status_gate).await;
+        });
+    });
+
+    // The word is not part of the draft: a reroll is a new secret from the
+    // kernel, not an edit, and there is nothing to type or take back.
+    let on_reroll = use_callback(move |()| {
+        status_gate.write().bump();
+        spawn(async move {
+            match kernel::reroll_word().await {
+                Ok(word) => status.with_mut(|s| {
+                    if let Some(s) = s {
+                        s.word = word
+                    }
+                }),
+                Err(e) => notice.set(Some(Notice::Plain(e))),
+            }
         });
     });
 
-    let live = session.read().as_ref().map(|(id, app)| (*id, app.clone()));
+    let on_save = use_callback(move |()| save_now.call(None));
+    let on_revert = use_callback(move |()| revert_now.call(None));
+
+    let running = session.read().is_some();
     let tenant = drawer().tenant();
     let ident = Ident::of(&status.read());
-    // The whole strip wears the unclaimed dress while the seal is shut, so
+    // The whole visor wears the unclaimed dress while the seal is shut, so
     // "no identity to show" is one fact with one rendering, not a
     // per-element negotiation.
     //
@@ -445,196 +770,349 @@ pub(crate) fn Visor() -> Element {
     // \"keep\" gives an impostor nothing." Only the passphrase tier has a
     // screen worth imitating, and that is the one this greys.
     let claimed = matches!(ident, Ident::Open(_));
-    let strip_class = if claimed { "" } else { "unclaimed" };
-    let (self_id, tier, rest, petname, endpoint_id) = match status.read().as_ref() {
-        Some(s) => (
-            s.id.clone(),
-            s.tier,
-            s.rest,
-            s.petname.clone(),
-            s.endpoint_id.clone(),
-        ),
-        None => (
-            String::new(),
-            Tier::Ephemeral,
-            Rest::RestsOpen,
-            String::new(),
-            String::new(),
-        ),
+    let locked = !claimed;
+    let root_class = if claimed { "" } else { "unclaimed" };
+
+    // The single site that paints the anchor colour, and it is inside the
+    // `Open` arm — which is only ever constructed from a `device.status`
+    // that was not sealed, so a page imitating the picker has no branch
+    // that reaches it (docs/design.md "Devices"). It is a variable rather
+    // than one element's background because the whole palette derives from
+    // it now (visor/src/style.rs), but it is still one expression in one
+    // place, and `--hue` appears nowhere else in the DOM.
+    let painted = match &ident {
+        Ident::Open(a) => Some(format!(
+            "--hue: {}",
+            // The draft owns the colour while its sheet is open, so the
+            // visor recolours under the slider and reverts with it.
+            if tenant == Some(Tenant::Settings) {
+                draft().hue
+            } else {
+                a.hue
+            }
+        )),
+        Ident::Waking | Ident::Unclaimed => None,
     };
 
-    rsx! {
-        // The trusted pixels depend on nothing the page provides, so the
-        // visor ships its own stylesheet as part of its own tree.
-        style { "{CSS}" }
-
-        // Drawer above strip: the strip is the line between trusted pixels
-        // and the app zone, so whatever the visor opens goes on its own side
-        // of that line and pushes the strip down rather than sitting between
-        // it and the app.
-        if let Some(tenant) = tenant {
-            div { id: "visor-drawer",
-                match tenant {
-                    Tenant::Apps => rsx! {
-                        for app in apps.read().iter().cloned() {
-                            div { key: "{app.id}", class: "app-row",
-                                div { class: "app-row-title", AppVoice { text: app.title.clone() } }
-                                button {
-                                    onclick: move |_| { let app = app.clone(); async move { open(app).await } },
-                                    "Open"
-                                }
-                            }
-                        }
-                        if apps.read().is_empty() {
-                            span { class: "{Voice::Framework.class()}", "no apps are installed" }
-                        }
-                    },
+    // The device's own line in the right stack. Three ways to have no name
+    // and each says something different: not asked yet, asked and sealed,
+    // open but never named.
+    let (device_line, device_named) = match &ident {
+        Ident::Waking => ("waking".to_string(), false),
+        Ident::Unclaimed => ("no device open".to_string(), false),
+        Ident::Open(a) if a.name.is_empty() => ("this device".to_string(), false),
+        Ident::Open(a) => (a.name.clone(), true),
+    };
+    let user_petname = petname_of(&user_meta.read());
+    let app_petname = petname_of(&app_meta.read());
+    // No glyphs before the identity is painted: they are the user's own
+    // marks, and the same rule covers them as covers the colour.
+    let user_glyph = if claimed {
+        glyph_of(&user_meta.read())
+    } else {
+        String::new()
+    };
+    let app_glyph = if claimed {
+        glyph_of(&app_meta.read())
+    } else {
+        String::new()
+    };
+
+    let on_apps = tenant == Some(Tenant::Apps) || tenant == Some(Tenant::AppInfo);
+    let on_self = tenant == Some(Tenant::Settings);
+    let shutting = closing();
+    let drawer_class = if shutting { "closing" } else { "" };
+    let entering = match leaving() {
+        Some((_, true)) => "pane enter-from-right",
+        Some((_, false)) => "pane enter-from-left",
+        None => "pane",
+    };
+
+    // One pane's worth of drawer. Rendered twice while a switch is
+    // animating — the tenant coming in and the one going out — so it is a
+    // closure rather than an arm inlined in the tree. `current` is which of
+    // the two this is: only the pane that is staying carries the ids, since
+    // two elements with one id is a tree nobody can query.
+    let sheet_for = move |t: Tenant, current: bool| -> Element {
+        let (self_id, tier, rest, petname, endpoint_id, word) = match status.read().as_ref() {
+            Some(s) => (
+                s.id.clone(),
+                s.tier,
+                s.rest,
+                s.petname.clone(),
+                s.endpoint_id.clone(),
+                s.word.clone(),
+            ),
+            None => (
+                String::new(),
+                Tier::Ephemeral,
+                Rest::RestsOpen,
+                String::new(),
+                String::new(),
+                String::new(),
+            ),
+        };
+        let live = session.read().as_ref().map(|(id, app)| (*id, app.clone()));
+        let live_id = live.as_ref().map(|(id, _)| *id);
+        let (info_petname, info_glyph) = {
+            let d = draft.read();
+            (
+                d.app.get(PETNAME).cloned().unwrap_or_default(),
+                d.app.get(GLYPH).cloned().unwrap_or_default(),
+            )
+        };
 
-                    Tenant::Unseal => rsx! {
-                        UnsealSheet { petname: petname.clone(), on_open: on_unsealed }
+        rsx! {
+            // Whatever happened that the user did not ask for. It lives at
+            // the top of every pane because the strip has no room to say
+            // it any more and no business moving to make some.
+            div { id: if current { Some("visor-notice") } else { None }, class: "notice",
+                match &*notice.read() {
+                    Some(Notice::Ended { app, reason }) => rsx! {
+                        AppVoice { text: app.clone() }
+                        span { class: "{Voice::Framework.class()}", " ended: {reason}" }
                     },
+                    Some(Notice::Plain(message)) => rsx! {
+                        span { class: "{Voice::Framework.class()}", "{message}" }
+                    },
+                    None => rsx! {},
+                }
+            }
 
-                    Tenant::Devices => rsx! {
-                        DevicesSheet {
-                            entries: entries.read().clone(),
-                            self_id: self_id.clone(),
-                            on_stay,
+            match t {
+                Tenant::Apps => rsx! {
+                    for app in apps.read().iter().cloned() {
+                        div { key: "{app.id}", class: "app-row",
+                            div { class: "app-row-title", AppVoice { text: app.title.clone() } }
+                            button {
+                                onclick: move |_| { let app = app.clone(); async move { open(app).await } },
+                                "Open"
+                            }
                         }
-                    },
+                    }
+                    if apps.read().is_empty() {
+                        span { class: "{Voice::Framework.class()}", "no apps are installed" }
+                    }
+                },
 
-                    Tenant::Settings => rsx! {
+                // The running app, and the user's own words for it. Only
+                // reachable while a session runs — the strip's left half
+                // shows the app list otherwise — so the title is the live
+                // one and the draft's `app` map is that app's.
+                Tenant::AppInfo => rsx! {
+                    div { class: "sheet",
+                        match &live {
+                            Some((_, app)) => rsx! {
+                                div { class: "sheet-head", AppVoice { text: app.title.clone() } }
+                            },
+                            None => rsx! {
+                                span { class: "{Voice::Framework.class()}", "nothing running" }
+                            },
+                        }
                         label {
-                            span { class: "{Voice::Framework.class()}", "name" }
+                            span { class: "{Voice::Framework.class()}", "petname" }
+                            // Controlled, unlike the fields this replaced.
+                            // `value` is volatile in dioxus-html — written
+                            // on every diff — which is why the old fields
+                            // read the kernel once and let the DOM own the
+                            // text: a status re-read landing mid-typing
+                            // reset them. Nothing re-reads a draft, so the
+                            // signal is the field's only writer and the
+                            // volatility has nothing to overwrite with.
                             input {
                                 r#type: "text",
-                                // `initial_value`, not `value`. dioxus-html
-                                // marks `value` *volatile*: it is written to
-                                // the DOM on every diff, not only when it
-                                // changed — so any re-render while the user
-                                // is typing resets the field to whatever the
-                                // kernel last said the name was. That is not
-                                // hypothetical here: the press that opens
-                                // this sheet spawns a `device.status` read,
-                                // and the endpoint id binding makes it
-                                // return *changed* — so the field was being
-                                // cleared under the user between typing and
-                                // committing, and the name was silently
-                                // never set.
-                                //
-                                // Seeded once per opening of the tenant
-                                // instead (the drawer rebuilds this arm each
-                                // time), and the DOM owns the text from
-                                // there: the visor writes on `change`, so
-                                // there is nothing the signal needs to push
-                                // back in.
-                                initial_value: status.read().as_ref().map(|s| s.name.clone()).unwrap_or_default(),
-                                onchange: move |e| async move {
-                                    // Bumped before the kernel call, not
-                                    // after the local apply: a read already
-                                    // in flight is answering about the name
-                                    // this is replacing, whichever lands
-                                    // first.
-                                    status_gate.write().bump();
-                                    let name = e.value();
-                                    match kernel::set_name(name.clone()).await {
-                                        Ok(()) => status.with_mut(|s| { if let Some(s) = s { s.name = name } }),
-                                        Err(e) => notice.set(Some(Notice::Plain(e))),
-                                    }
+                                value: "{info_petname}",
+                                oninput: move |e| {
+                                    let mut d = draft.write();
+                                    set_field(&mut d.app, PETNAME, e.value());
                                 },
                             }
                         }
                         label {
-                            span { class: "{Voice::Framework.class()}", "colour" }
+                            span { class: "{Voice::Framework.class()}", "glyph" }
                             input {
-                                r#type: "range", min: "0", max: "359",
-                                // Volatile, exactly as the name field above:
-                                // a slider being dragged is a user write in
-                                // the DOM, and a status read landing mid-drag
-                                // would snap it back.
-                                initial_value: "{status.read().as_ref().map(|s| s.hue).unwrap_or(0)}",
-                                onchange: move |e| async move {
-                                    let Ok(hue) = e.value().parse::<u16>() else { return };
-                                    status_gate.write().bump();
-                                    match kernel::set_hue(hue).await {
-                                        Ok(()) => status.with_mut(|s| { if let Some(s) = s { s.hue = hue } }),
-                                        Err(e) => notice.set(Some(Notice::Plain(e))),
-                                    }
+                                r#type: "text",
+                                value: "{info_glyph}",
+                                oninput: move |e| {
+                                    let mut d = draft.write();
+                                    set_field(&mut d.app, GLYPH, e.value());
                                 },
                             }
                         }
-                        label {
-                            span { class: "{Voice::Framework.class()}", "word" }
-                            span { class: "{Voice::Framework.class()}", "{status.read().as_ref().map(|s| s.word.clone()).unwrap_or_default()}" }
+                        if let Some(id) = live_id {
                             button {
-                                onclick: move |_| async move {
-                                    status_gate.write().bump();
-                                    match kernel::reroll_word().await {
-                                        Ok(word) => status.with_mut(|s| { if let Some(s) = s { s.word = word } }),
-                                        Err(e) => notice.set(Some(Notice::Plain(e))),
-                                    }
-                                },
-                                "Reroll"
+                                onclick: move |_| async move { close_session(id).await },
+                                "Close app"
                             }
                         }
+                    }
+                },
 
-                        if tier == Tier::Durable {
-                            KeptNote { petname: petname.clone(), rest }
-                        } else {
-                            KeepSheet { on_kept }
-                        }
+                Tenant::Unseal => rsx! {
+                    UnsealSheet { petname: petname.clone(), on_open: on_unsealed }
+                },
 
-                        StorageSection {
-                            binding: binding.read().clone(),
-                            on_refresh: refresh_storage,
-                        }
+                Tenant::Devices => rsx! {
+                    DevicesSheet {
+                        entries: entries.read().clone(),
+                        self_id: self_id.clone(),
+                        on_stay,
+                    }
+                },
+
+                Tenant::Settings => rsx! {
+                    SettingsSheet {
+                        draft,
+                        seed,
+                        word: word.clone(),
+                        tier,
+                        petname: petname.clone(),
+                        rest,
+                        binding: binding.read().clone(),
+                        endpoint_id: endpoint_id.clone(),
+                        members: members.read().clone(),
+                        peers: peers.read().clone(),
+                        phase: pairing_phase.read().clone(),
+                        on_reroll,
+                        on_refresh_storage: refresh_storage,
+                        on_refresh_devices: refresh_devices,
+                        on_kept,
+                        on_devices: show_devices,
+                        on_save,
+                        on_revert,
+                    }
+                },
+            }
+        }
+    };
 
-                        DevicesSection {
-                            endpoint_id: endpoint_id.clone(),
-                            members: members.read().clone(),
-                            peers: peers.read().clone(),
-                            phase: pairing_phase.read().clone(),
-                            on_refresh: refresh_devices,
+    rsx! {
+        // One positioned root, so the drawer can overlay the app zone
+        // instead of pushing it: the strip is the line between trusted
+        // pixels and the app, and a line that moves when the visor opens
+        // something is not a line (docs/design.md M1, "strip geometry
+        // immobile with the app mounted").
+        div { id: "visor-root", class: "{root_class}", style: painted,
+            // The trusted pixels depend on nothing the page provides, so
+            // the visor ships its own stylesheet as part of its own tree.
+            style { "{CSS}" }
+
+            div { id: "visor-strip",
+                // Left half: what is running. Both halves need a kernel
+                // that answers, so neither is offered before the seal
+                // opens; the ceremony the boot raised is what the user has
+                // to act on instead.
+                button {
+                    id: "visor-app",
+                    disabled: "{locked}",
+                    aria_pressed: "{on_apps}",
+                    onclick: move |_| {
+                        request.call(Action::Show(if running { Tenant::AppInfo } else { Tenant::Apps }))
+                    },
+                    div { id: "visor-app-glyph", "{app_glyph}" }
+                    div { class: "stack",
+                        div { class: "top",
+                            match session.read().as_ref() {
+                                Some((_, app)) => rsx! { AppVoice { text: app.title.clone() } },
+                                None => rsx! {
+                                    span { class: "{Voice::Framework.class()}", "nothing running" }
+                                },
+                            }
+                        }
+                        div { class: "bottom",
+                            if !app_petname.is_empty() {
+                                span { class: "{Voice::User.class()}", "{app_petname}" }
+                            }
                         }
+                    }
+                }
+
+                div { id: "visor-divider" }
 
-                        div { class: "sheet",
-                            button { onclick: show_devices, "Other devices" }
-                            EraseControl {}
+                // Right half: who this is, and which device this is.
+                button {
+                    id: "visor-self",
+                    disabled: "{locked}",
+                    aria_pressed: "{on_self}",
+                    onclick: move |_| request.call(Action::Show(Tenant::Settings)),
+                    div { id: "visor-circle", "{user_glyph}" }
+                    div { class: "stack",
+                        div { class: "top",
+                            if user_petname.is_empty() {
+                                span { class: "{Voice::Framework.class()} placeholder", "you" }
+                            } else {
+                                span { class: "{Voice::User.class()}", "{user_petname}" }
+                            }
                         }
-                    },
+                        div { class: "bottom",
+                            if device_named {
+                                span { class: "{Voice::User.class()}", "{device_line}" }
+                            } else {
+                                span { class: "{Voice::Framework.class()} placeholder", "{device_line}" }
+                            }
+                        }
+                    }
                 }
+                // The anchor word is a recognition secret between the user
+                // and this device: spoken only in the settings sheet, on
+                // request, never left standing in the strip.
             }
-        }
 
-        div { id: "visor-strip", class: "{strip_class}",
-            Identity { ident }
-            div { id: "visor-context",
-                match (&live, &*notice.read()) {
-                    (Some((_, app)), _) => rsx! {
-                        span { class: "{Voice::Framework.class()}", "showing " }
-                        AppVoice { text: app.title.clone() }
-                    },
-                    (None, Some(Notice::Ended { app, reason })) => rsx! {
-                        AppVoice { text: app.clone() }
-                        span { class: "{Voice::Framework.class()}", " ended: {reason}" }
-                    },
-                    (None, Some(Notice::Plain(message))) => rsx! {
-                        span { class: "{Voice::Framework.class()}", "{message}" }
-                    },
-                    (None, None) => rsx! {
-                        span { class: "{Voice::Framework.class()}", "nothing is running" }
+            if let Some(t) = tenant {
+                // Only when there is something behind the drawer to
+                // dismiss back to. With nothing running the drawer is
+                // where the visor rests, and a scrim over an empty app
+                // zone would be a dismissal to nowhere.
+                if running {
+                    div { id: "visor-scrim", onclick: move |_| request.call(Action::Close) }
+                }
+                div {
+                    id: "visor-drawer",
+                    class: "{drawer_class}",
+                    onanimationend: move |_| {
+                        // `closing` is the whole discriminator: the bridge
+                        // reports no animation name, and the close path
+                        // drops any pane still sliding, so the drawer's own
+                        // animation is the only one that can be ending
+                        // under it while this is true.
+                        if closing() {
+                            closing.set(false);
+                            drawer.set(Drawer::Closed);
+                        }
                     },
+                    if let Some((from, forward)) = leaving() {
+                        div {
+                            key: "{from:?}",
+                            class: if forward { "pane leave-to-left" } else { "pane leave-to-right" },
+                            onanimationend: move |_| leaving.set(None),
+                            {sheet_for(from, false)}
+                        }
+                    }
+                    div { key: "{t:?}", class: "{entering}", {sheet_for(t, true)} }
                 }
             }
-            div { id: "visor-actions",
-                // Both tenants need a kernel that answers, so neither is
-                // offered before the seal opens; the ceremony the boot
-                // raised is what the user has to act on instead.
-                TenantButton { label: "Apps", tenant: Tenant::Apps, open: tenant == Some(Tenant::Apps), disabled: !claimed,
-                    onpress: toggle_apps }
-                TenantButton { label: "Settings", tenant: Tenant::Settings, open: tenant == Some(Tenant::Settings), disabled: !claimed,
-                    onpress: show_settings }
-                if let Some((id, _)) = live {
-                    button { onclick: move |_| async move { close_session(id).await }, "Close" }
+
+            // Unsaved changes, over the drawer that holds them. The three
+            // answers are the three things a user could mean, and none of
+            // them is "lose it quietly".
+            if let Some(action) = pending() {
+                div { id: "visor-confirm", role: "dialog",
+                    span { class: "{Voice::Framework.class()}", "unsaved changes" }
+                    button {
+                        onclick: move |_| {
+                            pending.set(None);
+                            save_now.call(Some(action));
+                        },
+                        "Save"
+                    }
+                    button {
+                        onclick: move |_| {
+                            pending.set(None);
+                            revert_now.call(Some(action));
+                        },
+                        "Revert"
+                    }
+                    button { onclick: move |_| pending.set(None), "Cancel" }
                 }
             }
         }
@@ -666,8 +1144,9 @@ impl Ident {
     }
 }
 
-/// The painted identity. A plain value so `Identity` is a pure function of
-/// it and re-renders only when the identity changed.
+/// The painted identity. A plain value, and the only shape a hue is
+/// carried in: constructing one is what says the kernel called this device
+/// unsealed.
 #[derive(Clone, PartialEq)]
 struct Anchor {
     name: String,
@@ -683,47 +1162,6 @@ impl Anchor {
     }
 }
 
-#[component]
-fn Identity(ident: Ident) -> Element {
-    let anchor = match ident {
-        // No circle colour, no name, no word: the greys come from the
-        // `.unclaimed` rule on the strip, and no hue is computed at all.
-        Ident::Waking => {
-            return rsx! {
-                div { id: "visor-identity",
-                    div { id: "visor-circle" }
-                    span { class: "{Voice::Framework.class()} placeholder", "waking" }
-                }
-            };
-        }
-        Ident::Unclaimed => {
-            return rsx! {
-                div { id: "visor-identity",
-                    div { id: "visor-circle" }
-                    span { class: "{Voice::Framework.class()} placeholder", "no device open" }
-                }
-            };
-        }
-        Ident::Open(a) => a,
-    };
-    rsx! {
-        div { id: "visor-identity",
-            // Per-element, not a theme variable: the hue is this device's
-            // identity, and identity does not cascade. This is the single
-            // site that paints it, and it is inside the `Open` arm.
-            div { id: "visor-circle", style: "background: hsl({anchor.hue}deg 65% 50%)" }
-            if anchor.name.is_empty() {
-                span { class: "{Voice::Framework.class()} placeholder", "this device" }
-            } else {
-                span { class: "{Voice::User.class()}", "{anchor.name}" }
-            }
-            // The anchor word is a recognition secret between the user and
-            // this device: spoken only in the settings sheet, on request,
-            // never left standing in the strip.
-        }
-    }
-}
-
 /// The login. Raised by the boot when `device.status` says `sealed`; the
 /// only thing on screen that can do anything, because every other kernel
 /// call is `unavailable` until it succeeds.
@@ -1356,22 +1794,129 @@ fn EraseControl() -> Element {
     }
 }
 
-/// A strip button that opens its tenant. `aria-pressed` is the open state
-/// the stylesheet keys off, so pressed-ness is one fact, not two.
+/// Everything about this device, and the user, that is a field rather
+/// than a ceremony.
+///
+/// The four editable fields go through the draft, not the kernel: what a
+/// user has typed and not saved is theirs, and the kernel hears about it
+/// once, on `Save`. `Revert` puts the sheet back to what the kernel last
+/// said. The word is the exception and is deliberately not a field — a
+/// reroll is a new secret from the kernel, immediate, with nothing to take
+/// back.
 #[component]
-fn TenantButton(
-    label: String,
-    tenant: Tenant,
-    open: bool,
-    disabled: bool,
-    onpress: EventHandler<Tenant>,
+#[allow(clippy::too_many_arguments)]
+fn SettingsSheet(
+    draft: Signal<Draft>,
+    seed: Signal<Draft>,
+    word: String,
+    tier: Tier,
+    petname: String,
+    rest: Rest,
+    binding: Option<Binding>,
+    endpoint_id: String,
+    members: Vec<Member>,
+    peers: Vec<Peer>,
+    phase: Phase,
+    on_reroll: EventHandler<()>,
+    on_refresh_storage: EventHandler<()>,
+    on_refresh_devices: EventHandler<()>,
+    on_kept: EventHandler<bool>,
+    on_devices: EventHandler<()>,
+    on_save: EventHandler<()>,
+    on_revert: EventHandler<()>,
 ) -> Element {
+    let mut draft = draft;
+    // Read out rather than held: the field values are wanted here, and a
+    // read guard alive across the tree would be one the input handlers
+    // below have to hope nobody took a write against.
+    let (name, hue, user_petname, user_glyph) = {
+        let d = draft.read();
+        (
+            d.name.clone(),
+            d.hue,
+            d.user.get(PETNAME).cloned().unwrap_or_default(),
+            d.user.get(GLYPH).cloned().unwrap_or_default(),
+        )
+    };
+    let clean = draft() == seed();
+
     rsx! {
-        button {
-            aria_pressed: "{open}",
-            disabled: "{disabled}",
-            onclick: move |_| onpress.call(tenant),
-            "{label}"
+        label {
+            span { class: "{Voice::Framework.class()}", "device petname" }
+            input {
+                r#type: "text",
+                value: "{name}",
+                oninput: move |e| draft.write().name = e.value(),
+            }
+        }
+        label {
+            span { class: "{Voice::Framework.class()}", "colour" }
+            // `oninput`, not `onchange`: the hue is what the whole visor is
+            // painted from, so the drag is the preview — the strip, the
+            // drawer and every button recolour under the thumb, and
+            // `Revert` is what undoes it.
+            input {
+                r#type: "range", min: "0", max: "359",
+                value: "{hue}",
+                oninput: move |e| {
+                    if let Ok(hue) = e.value().parse::<u16>() {
+                        draft.write().hue = hue;
+                    }
+                },
+            }
+        }
+        label {
+            span { class: "{Voice::Framework.class()}", "your petname" }
+            input {
+                r#type: "text",
+                value: "{user_petname}",
+                oninput: move |e| {
+                    let mut d = draft.write();
+                    set_field(&mut d.user, PETNAME, e.value());
+                },
+            }
+        }
+        label {
+            span { class: "{Voice::Framework.class()}", "your glyph" }
+            input {
+                r#type: "text",
+                value: "{user_glyph}",
+                oninput: move |e| {
+                    let mut d = draft.write();
+                    set_field(&mut d.user, GLYPH, e.value());
+                },
+            }
+        }
+        div { class: "choice",
+            button { disabled: "{clean}", onclick: move |_| on_save.call(()), "Save" }
+            button { onclick: move |_| on_revert.call(()), "Revert" }
+        }
+
+        label {
+            span { class: "{Voice::Framework.class()}", "word" }
+            span { class: "{Voice::Framework.class()}", "{word}" }
+            button { onclick: move |_| on_reroll.call(()), "Reroll" }
+        }
+
+        if tier == Tier::Durable {
+            KeptNote { petname: petname.clone(), rest }
+        } else {
+            KeepSheet { on_kept }
+        }
+
+        StorageSection { binding, on_refresh: on_refresh_storage }
+
+        DevicesSection {
+            endpoint_id,
+            members,
+            peers,
+            phase,
+            on_refresh: on_refresh_devices,
+        }
+
+        div { class: "sheet",
+            button { onclick: move |_| on_devices.call(()), "Other devices" }
+            EraseControl {}
         }
     }
 }
diff --git a/web/worker.ts b/web/worker.ts
index 18dc0e57..8478674c 100644
--- a/web/worker.ts
+++ b/web/worker.ts
@@ -415,6 +415,9 @@ self.onconnect = (ev: MessageEvent) => {
       setName: async (name: string) => (await ready)[I.device].setName(name),
       setHue: async (hue: number) => (await ready)[I.device].setHue(hue),
       rerollWord: async () => (await ready)[I.device].rerollWord(),
+      meta: async (scope: unknown) => (await ready)[I.device].meta(scope),
+      setMeta: async (scope: unknown, entries: [string, string][]) =>
+        (await ready)[I.device].setMeta(scope, entries),
       keep: async (petname: string, passphrase: string | undefined) =>
         (await ready)[I.device].keep(petname, passphrase),
       unseal: async (passphrase: string) =>