merge main a725178 into feat/voice-outlines

src/ui/sceneControls.js

@@ -21,6 +21,9 @@ export class SceneControls {
     this.rowRemovers = [];
     this.playbackKeyRemover = null;
     if (!elements.select) return;
+    // The radio's PLAY means "listen"; this one plays the scene.
+    const playLabel = t('PLAY', { context: 'scene' });
+    if (elements.start) elements.start.textContent = playLabel;
     if (subscribe)
       this.unsubscribe = subscribe((notification) =>
         this.present(notification),
@@ -94,7 +97,21 @@ export class SceneControls {
       this.renderShotList();
     if (type === 'selection-changed')
       presentSceneSelection(this.elements.shots, state.selectedShotId);
-    if (initial || type === 'buttons-changed') this.setButtons(state.running);
+    if (
+      initial ||
+      [
+        'buttons-changed',
+        'selection-changed',
+        'scene-options-changed',
+        'scene-created',
+        'scene-deleted',
+        'shots-changed',
+        'shot-captured',
+        'shot-deleted',
+        'project-imported',
+      ].includes(type)
+    )
+      this.setButtons(state.running);
     if (initial || type === 'progress-changed')
       this.setProgress(state.progress);
     if (initial || type === 'status-changed') this.updateStatus(state.status);
@@ -183,11 +200,9 @@ export class SceneControls {
         this.listen(element, type, callback, this.rowRemovers),
       select: (id) => {
         this.run('selectShot', id);
-        if (!this.destroyed)
-          presentSceneSelection(
-            this.elements.shots,
-            this.read().selectedShotId,
-          );
+        if (this.destroyed) return;
+        presentSceneSelection(this.elements.shots, this.read().selectedShotId);
+        this.setButtons(this.read().running);
       },
       rename: (sceneId, shotId, title) =>
         this.run('renameShot', sceneId, shotId, title),
@@ -197,8 +212,22 @@ export class SceneControls {
   }
 
   setButtons(running) {
-    if (!this.destroyed)
-      presentSceneButtons(this.elements, running, this.read().hasRun);
+    if (this.destroyed) return;
+    const state = this.read();
+    const scene = state.scenes?.find(
+      (item) => item.id === state.selectedSceneId,
+    );
+    const shots = scene?.shots ?? [];
+    presentSceneButtons(this.elements, running, state.hasRun, {
+      hasScene: !!scene,
+      // PLAY and NEXT run on into the following scenes.
+      playableShots: (state.scenes ?? []).reduce(
+        (total, item) => total + (item.shots?.length ?? 0),
+        0,
+      ),
+      hasSelectedShot: shots.some((shot) => shot.id === state.selectedShotId),
+    });
+    this.elements.panel?.classList.toggle('has-shots', shots.length > 0);
   }
 
   setProgress(progress) {
@@ -247,6 +276,7 @@ export class SceneControls {
     ])
       remove();
     if (this.elements.shots) this.elements.shots.textContent = '';
+    this.elements.panel?.classList.toggle('has-shots', false);
     presentSceneRuntime(this.elements.runtime, '');
     this.setPlaybackActive(false);
   }

src/ui/sceneControls.test.mjs

@@ -3,6 +3,8 @@ import assert from 'node:assert/strict';
 import { createStateChannel } from '../app/stateChannel.js';
 import { SceneControls } from './sceneControls.js';
 import { SceneDirector } from '../scenes/director.js';
+import { mountSceneSharing } from './sceneSharing.js';
+import { setLocale } from '../i18n/index.js';
 
 function fixture() {
   class Element extends EventTarget {
@@ -169,6 +171,46 @@ test('Scene controls render the supplied selection and running/download states',
   }
 });
 
+test('Authoring disables idle actions that would do nothing', () => {
+  const f = fixture();
+  try {
+    assert.equal(f.elements.start.textContent, 'PLAY');
+    assert.equal(f.elements.start.disabled, false);
+    assert.equal(f.elements.update.disabled, false);
+    assert.equal(f.elements.panel.classList.contains('has-shots'), true);
+
+    f.state.selectedShotId = null;
+    f.owner.setButtons(false);
+    assert.equal(f.elements.update.disabled, true);
+    assert.equal(f.elements.start.disabled, false);
+
+    // PLAY and NEXT run on into the following scenes, so an empty selected
+    // scene beside one with shots keeps them available.
+    f.state.scenes[0].shots = [];
+    f.state.scenes.push({ id: 'scene-b', title: 'B', shots: [{ id: 'b1' }] });
+    f.owner.setButtons(false);
+    assert.equal(f.elements.start.disabled, false);
+    assert.equal(f.elements.next.disabled, false);
+    assert.equal(f.elements.update.disabled, true);
+
+    f.state.scenes.pop();
+    f.owner.setButtons(false);
+    assert.equal(f.elements.start.disabled, true);
+    assert.equal(f.elements.next.disabled, true);
+    assert.equal(f.elements.capture.disabled, false);
+    assert.equal(f.elements.panel.classList.contains('has-shots'), false);
+
+    f.state.scenes = [];
+    f.state.selectedSceneId = null;
+    f.owner.setButtons(false);
+    assert.equal(f.elements.delete.disabled, true);
+    assert.equal(f.elements.capture.disabled, true);
+    assert.equal(f.elements.new.disabled, false);
+  } finally {
+    f.restore();
+  }
+});
+
 test('Scene controls dispatch explicit actions and revoke replaced shot-row listeners', () => {
   const f = fixture();
   try {
@@ -435,3 +477,142 @@ test('Scene controls consume current state, preserve rows on progress, and unsub
     f.restore();
   }
 });
+
+test('Authoring refreshes idle buttons from published changes', () => {
+  const f = fixture();
+  try {
+    f.owner.destroy();
+    const channel = createStateChannel(() => f.state);
+    const owner = new SceneControls({
+      read: () => f.state,
+      actions: f.actions,
+      elements: f.elements,
+      subscribe: (listener) => channel.subscribe(listener),
+    });
+    const disabled = (name) => f.elements[name].disabled;
+    assert.equal(disabled('start'), false);
+    assert.equal(f.elements.panel.classList.contains('has-shots'), true);
+
+    f.state.selectedShotId = null;
+    channel.publish({ type: 'selection-changed' });
+    assert.equal(disabled('update'), true);
+
+    f.state.scenes[0].shots = [];
+    channel.publish({ type: 'shot-deleted' });
+    assert.equal(disabled('start'), true);
+    assert.equal(disabled('next'), true);
+    assert.equal(f.elements.panel.classList.contains('has-shots'), false);
+
+    // A run that ends hands the buttons back with the idle rules applied.
+    f.state.running = true;
+    channel.publish({ type: 'buttons-changed' });
+    assert.equal(disabled('capture'), true);
+    assert.equal(disabled('stop'), false);
+    f.state.running = false;
+    channel.publish({ type: 'buttons-changed' });
+    assert.equal(disabled('capture'), false);
+    assert.equal(disabled('start'), true);
+
+    f.state.scenes = [];
+    f.state.selectedSceneId = null;
+    channel.publish({ type: 'scene-deleted' });
+    assert.equal(disabled('delete'), true);
+    assert.equal(disabled('capture'), true);
+    assert.equal(disabled('new'), false);
+
+    f.state.scenes = [{ id: 'scene-b', title: 'B', shots: [{ id: 's' }] }];
+    f.state.selectedSceneId = 'scene-b';
+    f.state.selectedShotId = 's';
+    channel.publish({ type: 'project-imported' });
+    assert.equal(disabled('start'), false);
+    assert.equal(f.elements.panel.classList.contains('has-shots'), true);
+
+    owner.destroy();
+    assert.equal(f.elements.panel.classList.contains('has-shots'), false);
+    channel.destroy();
+  } finally {
+    f.restore();
+  }
+});
+
+test('Authoring PLAY uses the scene context, not the radio PLAY', (context) => {
+  context.after(() => setLocale('en'));
+  setLocale('es');
+  const f = fixture();
+  try {
+    assert.equal(f.elements.start.textContent, 'REPROD.');
+  } finally {
+    f.restore();
+  }
+});
+
+test('The sharing row sits under SAVE & SHARE, after the file row', () => {
+  const saved = globalThis.document;
+  const node = (className = '') => {
+    const element = {
+      className,
+      children: [],
+      dataset: {},
+      parent: null,
+      addEventListener() {},
+      removeEventListener() {},
+      append(...items) {
+        for (const item of items) {
+          item.parent = element;
+          element.children.push(item);
+        }
+      },
+      appendChild(item) {
+        element.append(item);
+      },
+      after(item) {
+        const siblings = element.parent.children;
+        item.parent = element.parent;
+        siblings.splice(siblings.indexOf(element) + 1, 0, item);
+      },
+      remove() {
+        const siblings = element.parent?.children;
+        if (siblings) siblings.splice(siblings.indexOf(element), 1);
+      },
+      querySelector(selector) {
+        const name = selector.slice(1);
+        const walk = (at) => {
+          for (const child of at.children) {
+            if (child.className.split(' ').includes(name)) return child;
+            const found = walk(child);
+            if (found) return found;
+          }
+          return null;
+        };
+        return walk(element);
+      },
+    };
+    return element;
+  };
+  globalThis.document = { createElement: () => node() };
+  try {
+    const panel = node();
+    const inner = node('scene-panel-inner');
+    const fileRow = node('scene-controls scene-file-controls');
+    const status = node('scene-status');
+    panel.append(inner);
+    inner.append(fileRow, status);
+    const dispose = mountSceneSharing({ edit() {}, share() {} }, panel);
+    const bar = inner.children[1];
+    assert.equal(bar.className, 'scene-controls');
+    assert.equal(inner.children[2], status);
+    assert.ok(bar.children.every((button) => button.title));
+    dispose();
+    assert.deepEqual(inner.children, [fileRow, status]);
+
+    // Without the file row, the bar still lands inside the panel.
+    const plain = node();
+    const plainInner = node('scene-panel-inner');
+    plain.append(plainInner);
+    mountSceneSharing({ edit() {}, share() {} }, plain)();
+    mountSceneSharing({ edit() {}, share() {} }, plain);
+    assert.equal(plainInner.children.length, 1);
+  } finally {
+    globalThis.document = saved;
+  }
+});

src/ui/scenePresentation.js

@@ -171,7 +171,26 @@ export function presentSceneSelection(element, selectedShotId) {
   }
 }
 
-export function presentSceneButtons(elements, running, hasRun) {
+/**
+ * While a scene plays, the authoring and file actions here are off and STOP
+ * is on. Otherwise a button is off when it would do nothing: DELETE and
+ * CAPTURE SHOT without a scene, UPDATE SHOT without a selected shot, PLAY and
+ * NEXT when no scene in the project has a shot (both continue into the
+ * following scenes).
+ */
+export function presentSceneButtons(
+  elements,
+  running,
+  hasRun,
+  { hasScene = true, playableShots = 1, hasSelectedShot = true } = {},
+) {
+  const idleOff = {
+    delete: !hasScene,
+    capture: !hasScene,
+    update: !hasSelectedShot,
+    start: playableShots === 0,
+    next: playableShots === 0,
+  };
   for (const name of [
     'start',
     'next',
@@ -183,7 +202,7 @@ export function presentSceneButtons(elements, running, hasRun) {
     'export',
     'import',
   ]) {
-    if (elements[name]) elements[name].disabled = running;
+    if (elements[name]) elements[name].disabled = running || !!idleOff[name];
   }
   if (elements.stop) elements.stop.disabled = !running;
   if (elements.download) elements.download.disabled = !hasRun;

src/ui/sceneSharing.js

@@ -181,17 +181,28 @@ export function mountSceneSharing(
   bar.dataset.directorAuthoring = '';
   bar.className = 'scene-controls';
   const entries = [
-    [t('EDIT DETAILS'), edit],
-    [t('SHARE SCENE'), share],
+    [t('EDIT DETAILS'), t('Edit anchors, data packs and shot details'), edit],
+    [
+      t('SHARE SCENE'),
+      t('Download this scene as JSON or an asset bundle'),
+      share,
+    ],
   ];
   const removers = [];
-  for (const [text, fn] of entries) {
-    const b = createActionButton({ label: text, className: 'scene-btn' });
+  for (const [text, title, fn] of entries) {
+    const b = createActionButton({
+      label: text,
+      title,
+      className: 'scene-btn',
+    });
     b.addEventListener('click', fn);
     removers.push(() => b.removeEventListener('click', fn));
     bar.append(b);
   }
-  (panel.querySelector?.('.scene-panel-inner') || panel).appendChild(bar);
+  // Beside EXPORT / IMPORT, under SAVE & SHARE.
+  const fileRow = panel.querySelector?.('.scene-file-controls');
+  if (fileRow) fileRow.after(bar);
+  else (panel.querySelector?.('.scene-panel-inner') || panel).appendChild(bar);
   return () => {
     for (const remove of removers) remove();
     bar.remove();

src/ui/styles/scenes.css

@@ -1,6 +1,8 @@
 /* ── Scene Director Panel ───────────────────── */
 #scene-panel {
   --panel-expanded-width: 360px;
+  /* Secondary text in Authoring: dimmer than labels, but legible on the globe. */
+  --scene-quiet: rgba(232, 234, 237, 0.62);
   position: fixed;
   top: calc(var(--left-stack-top) + (var(--left-stack-gap) * 2));
   left: var(--left-stack-x);
@@ -150,15 +152,15 @@
   flex-wrap: wrap;
 }
 
+/* The scene's name takes its own row; NEW SCENE / DELETE share the next. */
 #scene-select {
-  flex: 1;
+  flex: 1 1 100%;
   min-width: 0;
+  min-height: 32px;
+  font-size: 12px;
 }
 
-/* A translated scene name needs the width: the select takes its own row,
-   NEW / DEL share the next one. */
 html:not([lang='en']) #scene-select {
-  flex: 1 1 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -168,8 +170,7 @@ html:not([lang='en']) #scene-select {
 }
 
 /* A translated action longer than its button wraps inside the button instead
-   of running past it. English keeps its one-line buttons ("EXPORT PRESETS"
-   included). */
+   of running past it. English keeps its one-line buttons. */
 html:not([lang='en']) #scene-panel .scene-controls .scene-btn {
   white-space: normal;
   overflow-wrap: break-word;
@@ -180,6 +181,70 @@ html:not([lang='en']) #scene-panel .scene-controls .scene-btn {
   min-width: 72px;
 }
 
+#scene-panel .scene-btn {
+  font-size: 10px;
+  padding: 8px 10px;
+}
+
+/* Authoring's steps: SCENE, SHOTS, PREVIEW, SAVE & SHARE. */
+.scene-step-heading {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 10px 0 6px;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: 1.6px;
+  color: var(--scene-quiet);
+}
+
+.scene-step-heading::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.panel-header + .scene-step-heading {
+  margin-top: 2px;
+}
+
+/* One primary action per step: CAPTURE SHOT and PLAY. The panel id keeps
+   this above Cyber's shared button surface. */
+#scene-panel .scene-btn-primary:not(:disabled) {
+  color: var(--accent);
+  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
+  background: color-mix(in srgb, var(--accent) 10%, transparent);
+}
+
+/* The file row is housekeeping; it stays quieter than the steps above. */
+#scene-panel .scene-file-controls .scene-btn {
+  font-size: 9px;
+  /* Room for one long translated word (IMPORTIEREN, ІМПОРТУВАТИ) per line. */
+  padding: 8px 4px;
+  letter-spacing: 0.6px;
+  background: transparent;
+}
+
+/* Keep the shared hover on the restyled actions. */
+#scene-panel .scene-btn-primary:hover:not(:disabled),
+#scene-panel .scene-file-controls .scene-btn:hover:not(:disabled) {
+  color: var(--accent);
+  border-color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 16%, transparent);
+}
+
+.scene-shot-hint {
+  margin: 0 0 8px;
+  font-size: 11px;
+  line-height: 1.4;
+  color: var(--scene-quiet);
+}
+
+#scene-panel:not(.has-shots) .scene-shot-hint {
+  display: none;
+}
+
 #scene-start-btn,
 #scene-stop-btn,
 #scene-next-btn {
@@ -190,12 +255,14 @@ html:not([lang='en']) #scene-panel .scene-controls .scene-btn {
   display: flex;
   flex-direction: column;
   gap: 6px;
-  max-height: 160px;
-  min-height: 96px;
+  max-height: 260px;
+  /* Two shot rows stay visible; the panel scrolls when space is short. */
+  min-height: 128px;
   flex: 1;
   overflow-y: auto;
   padding: 4px 2px 6px;
-  margin-bottom: 8px;
+  margin-bottom: 4px;
+  counter-reset: scene-shot;
 }
 
 .scene-shot-list::-webkit-scrollbar {
@@ -210,19 +277,21 @@ html:not([lang='en']) #scene-panel .scene-controls .scene-btn {
 .scene-shot-empty {
   border: 1px dashed rgba(255, 255, 255, 0.14);
   border-radius: 8px;
-  padding: 10px 8px;
+  padding: 16px 12px;
   text-align: center;
   font-family: var(--font-mono);
-  font-size: 9px;
-  letter-spacing: 1px;
-  color: var(--text-dim);
+  font-size: 11px;
+  letter-spacing: 0.3px;
+  line-height: 1.5;
+  color: var(--scene-quiet);
 }
 
 .scene-shot-row {
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 9px;
-  padding: 7px 8px;
+  padding: 8px 10px;
   background: rgba(255, 255, 255, 0.03);
+  counter-increment: scene-shot;
   transition:
     border-color var(--transition-fast),
     background var(--transition-fast);
@@ -243,12 +312,38 @@ html:not([lang='en']) #scene-panel .scene-controls .scene-btn {
 .scene-shot-label {
   min-width: 0;
   flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
   font-family: var(--font-mono);
-  font-size: 10px;
-  letter-spacing: 1px;
+  font-size: 12px;
+  letter-spacing: 0.4px;
   color: var(--text-primary);
 }
 
+/* While renaming, the label holds only the editor at full width. */
+.scene-shot-label:has(.scene-shot-rename) {
+  overflow: visible;
+  white-space: normal;
+}
+
+.scene-shot-label:has(.scene-shot-rename)::before {
+  content: none;
+}
+
+/* Shots are numbered 01, 02… in playback order. */
+.scene-shot-label::before {
+  content: counter(scene-shot, decimal-leading-zero);
+  margin-right: 8px;
+  font-size: 10px;
+  color: var(--scene-quiet);
+}
+
+.scene-shot-row.active .scene-shot-label::before {
+  color: var(--accent);
+}
+
 .scene-shot-rename {
   width: 100%;
   min-width: 0;
@@ -260,11 +355,11 @@ html:not([lang='en']) #scene-panel .scene-controls .scene-btn {
 }
 
 .scene-shot-meta {
-  margin-top: 4px;
+  margin-top: 5px;
   font-family: var(--font-mono);
-  font-size: 8px;
-  letter-spacing: 0.8px;
-  color: var(--text-dim);
+  font-size: 10px;
+  letter-spacing: 0.4px;
+  color: var(--scene-quiet);
 }
 
 .scene-shot-actions {
@@ -275,7 +370,7 @@ html:not([lang='en']) #scene-panel .scene-controls .scene-btn {
 .scene-progress {
   margin-top: 8px;
   width: 100%;
-  height: 18px;
+  height: 14px;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.06);
   border: 1px solid rgba(255, 255, 255, 0.1);
@@ -305,9 +400,10 @@ html:not([lang='en']) #scene-panel .scene-controls .scene-btn {
 #scene-status {
   margin-top: 8px;
   font-family: var(--font-mono);
-  font-size: 10px;
-  letter-spacing: 1px;
-  color: var(--text-secondary);
+  font-size: 11px;
+  letter-spacing: 0.4px;
+  line-height: 1.4;
+  color: var(--scene-quiet);
 }
 
 #scene-runtime {
@@ -357,6 +453,8 @@ html:not([lang='en']) #scene-panel .scene-controls .scene-btn {
 #cctv-panel.collapsed .cctv-summary-label,
 #cctv-panel.collapsed #cctv-summary,
 #scene-panel.collapsed .scene-controls,
+#scene-panel.collapsed .scene-step-heading,
+#scene-panel.collapsed .scene-shot-hint,
 #scene-panel.collapsed .scene-shot-list,
 #scene-panel.collapsed .scene-progress,
 #scene-panel.collapsed #scene-status,

src/ui/templates/layer-panels.html

@@ -147,35 +147,40 @@
     <div class="panel-glow"></div>
     <div class="scene-panel-inner">
       <div class="panel-header">
-        <span class="panel-title" data-i18n>SCENES</span>
+        <span class="panel-title" title="Create and edit scenes" data-i18n data-i18n-title>AUTHORING</span>
         <span class="panel-divider"></span>
         <button class="panel-collapse-btn" data-collapse-target="scene-panel" title="Collapse panel" data-i18n-title>+</button>
       </div>
+      <p class="scene-step-heading" data-i18n>SCENE</p>
       <div class="scene-controls">
-        <select class="gev-field" id="scene-select" aria-label="Scene recipe" data-i18n-aria-label></select>
-        <button id="scene-new-btn" type="button" class="gev-action-button scene-btn" data-i18n>NEW</button>
-        <button id="scene-delete-btn" type="button" class="gev-action-button gev-action-button--danger scene-btn scene-btn-danger" data-i18n>DEL</button>
+        <select class="gev-field" id="scene-select" aria-label="Scene" data-i18n-aria-label></select>
+        <button id="scene-new-btn" type="button" class="gev-action-button scene-btn" title="Start a new, empty scene" data-i18n data-i18n-title>NEW SCENE</button>
+        <button id="scene-delete-btn" type="button" class="gev-action-button gev-action-button--danger scene-btn scene-btn-danger" title="Delete this scene and all of its shots" data-i18n data-i18n-title>DELETE</button>
       </div>
+      <p class="scene-step-heading" data-i18n>SHOTS</p>
       <div class="scene-controls">
-        <button id="scene-capture-btn" type="button" class="gev-action-button scene-btn" data-i18n>CAPTURE SHOT</button>
-        <button id="scene-update-shot-btn" type="button" class="gev-action-button scene-btn" data-i18n>UPDATE SHOT</button>
+        <button id="scene-capture-btn" type="button" class="gev-action-button scene-btn scene-btn-primary" title="Add the current view, style and layers as the next shot" data-i18n data-i18n-title>+ CAPTURE SHOT</button>
+        <button id="scene-update-shot-btn" type="button" class="gev-action-button scene-btn" title="Replace the selected shot with the current view" data-i18n data-i18n-title>UPDATE SHOT</button>
       </div>
       <div id="scene-shot-list" class="scene-shot-list"></div>
+      <p class="scene-shot-hint" data-i18n>Click a shot to select it, double-click to rename.</p>
+      <p class="scene-step-heading" data-i18n>PREVIEW</p>
       <div class="scene-controls">
-        <button id="scene-start-btn" type="button" class="gev-action-button scene-btn" data-i18n>START</button>
-        <button id="scene-stop-btn" type="button" class="gev-action-button gev-action-button--danger scene-btn scene-btn-danger" data-i18n>STOP</button>
-        <button id="scene-next-btn" type="button" class="gev-action-button scene-btn" data-i18n>NEXT</button>
+        <button id="scene-start-btn" type="button" class="gev-action-button scene-btn scene-btn-primary" title="Play from this scene through the rest of the project" data-i18n-title data-i18n-runtime>PLAY</button>
+        <button id="scene-stop-btn" type="button" class="gev-action-button gev-action-button--danger scene-btn scene-btn-danger" title="Stop playback (Esc)" data-i18n data-i18n-title>STOP</button>
+        <button id="scene-next-btn" type="button" class="gev-action-button scene-btn" title="Play the shot after the selected one, moving on to the next scene when needed" data-i18n data-i18n-title>NEXT</button>
       </div>
-      <div class="scene-controls">
-        <button id="scene-export-btn" type="button" class="gev-action-button scene-btn" data-i18n>EXPORT PRESETS</button>
-        <button id="scene-import-btn" type="button" class="gev-action-button scene-btn" data-i18n>IMPORT</button>
-        <button id="scene-download-btn" type="button" class="gev-action-button scene-btn" data-i18n>RUN LOG</button>
+      <p class="scene-step-heading" data-i18n>SAVE &amp; SHARE</p>
+      <div class="scene-controls scene-file-controls">
+        <button id="scene-export-btn" type="button" class="gev-action-button scene-btn" title="Download every scene as a JSON file you can import later" data-i18n data-i18n-title>EXPORT</button>
+        <button id="scene-import-btn" type="button" class="gev-action-button scene-btn" title="Load scenes from an exported JSON file" data-i18n data-i18n-title>IMPORT</button>
+        <button id="scene-download-btn" type="button" class="gev-action-button scene-btn" title="Download the timing log of the last play" data-i18n data-i18n-title>RUN LOG</button>
         <input type="file" id="scene-import-file" accept="application/json,.json" hidden />
       </div>
       <div class="scene-progress">
         <div id="scene-progress-fill">0%</div>
       </div>
-      <div id="scene-status" data-i18n>Ready</div>
+      <div id="scene-status" role="status" aria-live="polite" data-i18n>Ready</div>
     </div>
   </div>