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) =>