From be8637a5079650aca5f3ce878c3f27083b77d735 Mon Sep 17 00:00:00 2001
From: Darrell van Swinderen <darrell260802@gmail.com>
Date: Wed, 23 Sep 2026 09:18:47 +0200
Subject: [PATCH 1/2] fix(renderer): Storage Saver and Publisher keep the page
 gutter

Every page puts `px-12 py-6` on its own root and the page header above it
is inset by the same 48 pixels. The two pages added in 3.5.0 left it off,
so the title was inset and every panel, heading, tile and empty state
under it ran flush from the sidebar to the window edge.

Nothing caught it, because nothing on those pages overflowed or changed
size. `screens.spec.ts` now walks every page under the header and fails
when anything that paints (text, or a border you can see) sits outside
the header's own inset on either side. Things a sideways scroller clips,
like Today's carousel, are the scroller's business, and the clip name
field's deliberate outset has a transparent border and is not counted.

Proved: against the unfixed build it fails on Storage Saver with the
section headings at x=232 against a gutter starting at 279. With the fix
it passes.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 src/renderer/src/views/PublisherPage.vue    |  2 +-
 src/renderer/src/views/StorageSaverPage.vue |  2 +-
 tests/e2e/screens.spec.ts                   | 72 +++++++++++++++++++++
 3 files changed, 74 insertions(+), 2 deletions(-)

diff --git a/src/renderer/src/views/PublisherPage.vue b/src/renderer/src/views/PublisherPage.vue
index c55cd699..1e394c1a 100644
--- a/src/renderer/src/views/PublisherPage.vue
+++ b/src/renderer/src/views/PublisherPage.vue
@@ -115,7 +115,7 @@ function unpublishSelected(): void {
 </script>
 
 <template>
-  <div class="space-y-8 pb-16">
+  <div class="px-12 py-6 space-y-8 pb-16">
     <!--
       No publisher is not an error. It is the ordinary state for anybody who
       has never set one up, and this screen is the only place that can say what
diff --git a/src/renderer/src/views/StorageSaverPage.vue b/src/renderer/src/views/StorageSaverPage.vue
index f9d395e5..69a67ac4 100644
--- a/src/renderer/src/views/StorageSaverPage.vue
+++ b/src/renderer/src/views/StorageSaverPage.vue
@@ -51,7 +51,7 @@ function toggleGroup(game: string): void {
 </script>
 
 <template>
-  <div class="space-y-10 pb-16">
+  <div class="px-12 py-6 space-y-10 pb-16">
     <p v-if="saver.error.value" class="text-sm text-danger-ink">{{ saver.error.value }}</p>
 
     <GraveyardSection
diff --git a/tests/e2e/screens.spec.ts b/tests/e2e/screens.spec.ts
index 9726f403..96c90cde 100644
--- a/tests/e2e/screens.spec.ts
+++ b/tests/e2e/screens.spec.ts
@@ -262,6 +262,78 @@ test.describe('layout', () => {
     expect(overflow.sidebarOverflow).toBeLessThanOrEqual(1);
   });
 
+  /*
+   * Every page carries its own gutter on its root, `px-12`, and the page
+   * header above it is inset by the same amount. Storage Saver and Publisher
+   * shipped without it: the title was inset and every panel, heading and tile
+   * under it ran flush from the sidebar to the window edge. Nothing measured
+   * that, because nothing on those pages overflowed or changed size.
+   *
+   * So: whatever paints inside the page, text or a hairline, sits within the
+   * header's inset on both sides.
+   */
+  test('a page keeps the gutter its header has', async () => {
+    const paged = ROUTES.filter((r) => !r.name.startsWith('settings') && r.name !== 'editor');
+    for (const route of paged) {
+      await ctx.page.evaluate((h) => {
+        window.location.hash = h;
+      }, route.hash);
+      await ctx.page.waitForTimeout(1200);
+
+      const found = await ctx.page.evaluate(() => {
+        const main = document.querySelector('main');
+        // The page header sits above `main`, in the layout, not inside the page.
+        const title = document.querySelector('h1');
+        if (!main || !title) return { inspected: 0, outside: [] as string[] };
+        const box = main.getBoundingClientRect();
+        const inset = title.getBoundingClientRect().left - box.left;
+        const left = box.left + inset - 1;
+        // The scrollbar lives inside `main` and is not the page's to pad.
+        const right = box.left + main.clientWidth - inset + 1;
+
+        const outside: string[] = [];
+        let inspected = 0;
+        for (const el of main.querySelectorAll<HTMLElement>('*')) {
+          const r = el.getBoundingClientRect();
+          if (r.width < 1 || r.height < 1) continue;
+          const style = getComputedStyle(el);
+          if (style.visibility === 'hidden' || Number(style.opacity) === 0) continue;
+          const hasText = [...el.childNodes].some(
+            (n) => n.nodeType === Node.TEXT_NODE && n.textContent!.trim(),
+          );
+          // A border counts only when it can be seen: the clip name field is
+          // outset on purpose with a transparent one, so its text lines up.
+          const seen = (width: string, colour: string) =>
+            parseFloat(width) > 0 && !/rgba\([^)]*,\s*0\)|transparent/.test(colour);
+          const hasBorder =
+            seen(style.borderLeftWidth, style.borderLeftColor) ||
+            seen(style.borderRightWidth, style.borderRightColor);
+          if (!hasText && !hasBorder) continue;
+          // Today's carousel scrolls sideways, so its later tiles are past the
+          // edge by design. Something a scroller inside the page clips is that
+          // scroller's business; the scroller itself is still measured.
+          let clipped = false;
+          for (let up = el.parentElement; up && up !== main; up = up.parentElement) {
+            if (getComputedStyle(up).overflowX === 'visible') continue;
+            const c = up.getBoundingClientRect();
+            if (r.left < c.left - 1 || r.right > c.right + 1) clipped = true;
+            break;
+          }
+          if (clipped) continue;
+          inspected++;
+          if (r.left < left || r.right > right) {
+            outside.push(`${el.tagName.toLowerCase()} "${(el.textContent ?? '').trim().slice(0, 40)}" at ${Math.round(r.left)}..${Math.round(r.right)}, gutter ${Math.round(left)}..${Math.round(right)}`);
+          }
+        }
+        return { inspected, outside: outside.slice(0, 5) };
+      });
+
+      // An empty walk and a clean walk look the same; this page drew something.
+      expect(found.inspected, `${route.name}: nothing inspected`).toBeGreaterThan(3);
+      expect(found.outside, `${route.name} runs past its gutter`).toEqual([]);
+    }
+  });
+
   test('no screen is taller than the window', async () => {
     // The two routes that need a clip id are the two most likely to overflow:
     // both put a video on the page, and a video is as tall as it is asked to

From 62f1d156ef94e4647d666004fd46679c9892dd8f Mon Sep 17 00:00:00 2001
From: Darrell van Swinderen <darrell260802@gmail.com>
Date: Wed, 23 Sep 2026 09:43:25 +0200
Subject: [PATCH 2/2] fix(ux): a review pass over every screen 3.5.0 added

Every screen and state this release added, captured in both palettes
against a seeded library and a real publisher running on this machine,
then fixed where it read wrong.

Publisher
- **An unreachable publisher said "0 published, 0 B".** The sync action
  answered every failure with zeros, so the page's own "could not reach"
  state could never appear. It now reports why there are no numbers
  (`unreachable`, `unauthorized`, `outdated`), and the page names each
  with its own way out: try again, check the address or token, or the
  guide for updating an old container. `describeStatsFailure` is pure and
  unit-tested.
- "Most opened" no longer has checkboxes. It is there to be read, and
  offering to unpublish the links people actually watch was the wrong idea.
- The row checkbox is drawn in the app's own tokens over a hidden input,
  not Chromium's native box. The hint says "last opened 2 minutes ago"
  rather than "last 2 minutes ago".

Storage Saver
- The tile checkbox sits on a scrim. White on the frame disappeared into
  every bright thumbnail.
- A picked tile has a two pixel ring instead of a hairline turning red,
  which did not read across a grid. A ring is a shadow, so nothing moves.
- In a burst, the clips about to go are dimmed so the keeper stands out.
- The burst summary counted every clip in a burst ("1.2 MB across 3
  clips") when two of the three would go. It counts the ones that go.
- The selection bar says what the selection weighs, not only how many.

Settings
- Recording quality said "cannot happen while OBS is open" when OBS was
  closed and the button beside it would write it at once. The sentence now
  depends on whether OBS is running.
- The "Compress clips when publishing" switch sat outside the publisher
  card, so the Claude heading ran straight on from its description with no
  rule between them. It is inside the card now.

Editor
- A GoodBit on a timeline block was a two pixel line over the thumbnail
  strip, hard to see on any busy frame. The strip is twelve pixels on the
  card colour, and the duration label and muted icon sit above it.

Gates: `npm run check` 849 tests; `screens.spec.ts` 9 passed, including
the new gutter test.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 src/main/actions/SyncPublisherStatsAction.ts  | 17 +++++-
 src/main/services/publisherStatsProblem.ts    | 31 +++++++++++
 .../components/Editor/TimelineClipMarks.vue   | 10 ++--
 .../src/components/Editor/TimelineTrack.vue   |  6 ++-
 .../components/Publish/PublisherClipRow.vue   | 54 +++++++++++++------
 .../src/components/Settings/PublisherCard.vue | 35 +++++++-----
 .../components/Settings/RecordingSettings.vue | 14 ++++-
 .../src/components/Storage/BurstCluster.vue   |  5 +-
 .../src/components/Storage/BurstSection.vue   | 10 +++-
 .../components/Storage/GraveyardSection.vue   | 24 ++++++---
 .../components/Storage/StorageClipTile.vue    | 51 +++++++++++++-----
 .../composables/clips/usePublisherStats.ts    | 17 +++++-
 src/renderer/src/services/clips.ts            |  2 +
 src/renderer/src/views/PublisherPage.vue      | 42 ++++++++++-----
 tests/unit/main/publisherStatsProblem.spec.ts | 33 ++++++++++++
 15 files changed, 275 insertions(+), 76 deletions(-)
 create mode 100644 src/main/services/publisherStatsProblem.ts
 create mode 100644 tests/unit/main/publisherStatsProblem.spec.ts

diff --git a/src/main/actions/SyncPublisherStatsAction.ts b/src/main/actions/SyncPublisherStatsAction.ts
index d5871977..1f149af6 100644
--- a/src/main/actions/SyncPublisherStatsAction.ts
+++ b/src/main/actions/SyncPublisherStatsAction.ts
@@ -1,3 +1,4 @@
+import { describeStatsFailure, type PublisherStatsProblem } from '../services/publisherStatsProblem.js';
 import axios from 'axios';
 import { BaseAction } from './BaseAction.js';
 import { AppDataSource } from '../data-source.js';
@@ -34,8 +35,19 @@ export interface SyncPublisherStatsOutput {
    * will recommend deleting the whole library the first time it runs.
    */
   countingSince: string | null;
+  /**
+   * Why there are no numbers, when there are none for a reason.
+   *
+   * This used to answer every failure with zeros, which is the one answer that
+   * cannot be told from an empty publisher: a server that was off, a wrong
+   * address, a token that no longer matched and a container older than the
+   * counter all drew "0 published, 0 B" and the page's own "could not reach"
+   * state never appeared. Null when the publisher answered.
+   */
+  problem: PublisherStatsProblem | null;
 }
 
+
 /**
  * Bring the publisher's view counts back onto the rows.
  *
@@ -60,6 +72,7 @@ export class SyncPublisherStatsAction extends BaseAction<void, SyncPublisherStat
       updated: 0,
       totals: { clips: 0, bytes: 0, views: 0 },
       countingSince: null,
+      problem: null,
     };
 
     const baseUrl = publisherBaseUrl();
@@ -92,7 +105,7 @@ export class SyncPublisherStatsAction extends BaseAction<void, SyncPublisherStat
           error instanceof Error ? error.message : String(error),
         );
       }
-      return empty;
+      return { ...empty, problem: describeStatsFailure(status, baseUrl) };
     }
 
     const stats = new Map((payload.clips ?? []).map((stat) => [stat.filename, stat]));
@@ -108,6 +121,7 @@ export class SyncPublisherStatsAction extends BaseAction<void, SyncPublisherStat
         updated: 0,
         totals: payload.totals ?? empty.totals,
         countingSince: payload.countingSince ?? null,
+        problem: null,
       };
     }
 
@@ -134,6 +148,7 @@ export class SyncPublisherStatsAction extends BaseAction<void, SyncPublisherStat
       updated,
       totals: payload.totals ?? empty.totals,
       countingSince: payload.countingSince ?? null,
+      problem: null,
     };
   }
 }
diff --git a/src/main/services/publisherStatsProblem.ts b/src/main/services/publisherStatsProblem.ts
new file mode 100644
index 00000000..05eeb9c1
--- /dev/null
+++ b/src/main/services/publisherStatsProblem.ts
@@ -0,0 +1,31 @@
+/** Why the publisher gave no numbers. */
+export interface PublisherStatsProblem {
+  kind: 'unreachable' | 'unauthorized' | 'outdated';
+  /** A sentence for the page, in the reader's words rather than the HTTP client's. */
+  message: string;
+}
+
+/** What a failed stats request means, for somebody who has not read the code. */
+export function describeStatsFailure(status: number | undefined, baseUrl: string): PublisherStatsProblem {
+  if (status === 404) {
+    return {
+      kind: 'outdated',
+      message:
+        'Your publisher is older than the view counter, so it has nothing to report yet. ' +
+        'Update its container and this page fills in.',
+    };
+  }
+  if (status === 401 || status === 403 || status === 503) {
+    return {
+      kind: 'unauthorized',
+      message:
+        status === 503
+          ? 'The publisher has no PUBLISH_TOKEN set, so it refuses to say what it holds.'
+          : 'The publisher refused the token. It has to match PUBLISH_TOKEN on the server.',
+    };
+  }
+  return {
+    kind: 'unreachable',
+    message: `Nothing answered at ${baseUrl}. The server may be off, or the address may be wrong.`,
+  };
+}
diff --git a/src/renderer/src/components/Editor/TimelineClipMarks.vue b/src/renderer/src/components/Editor/TimelineClipMarks.vue
index b989df4e..10e548ae 100644
--- a/src/renderer/src/components/Editor/TimelineClipMarks.vue
+++ b/src/renderer/src/components/Editor/TimelineClipMarks.vue
@@ -64,14 +64,18 @@ const laneHeightPercent = 100 / MAX_BAND_LANES;
 
 <template>
   <!--
-    Along the bottom edge, above the duration label's line but below the
-    controls, and never taking a pointer: the block underneath is draggable on
+    Along the bottom edge, on a ground of its own, and never taking a pointer.
+    It was a six pixel strip split three ways straight over the thumbnail
+    strip, so one mark was a two pixel line that disappeared into whatever
+    frame happened to be under it; twelve pixels on the card colour make each
+    row four and legible over any picture. The duration label sits above it.
+    Never taking a pointer: the block underneath is draggable on
     its whole surface and a band that swallowed a mousedown would make part of
     the clip unmovable.
   -->
   <div
     v-if="bands.length"
-    class="absolute left-0 right-0 bottom-0 h-1.5 pointer-events-none"
+    class="absolute left-0 right-0 bottom-0 h-3 bg-card/80 pointer-events-none"
     aria-hidden="true"
   >
     <div
diff --git a/src/renderer/src/components/Editor/TimelineTrack.vue b/src/renderer/src/components/Editor/TimelineTrack.vue
index 2582a198..05ee35c2 100644
--- a/src/renderer/src/components/Editor/TimelineTrack.vue
+++ b/src/renderer/src/components/Editor/TimelineTrack.vue
@@ -182,7 +182,8 @@ onBeforeUnmount(stopDrag);
       </span>
 
       <span
-        class="absolute left-2 bottom-1 font-mono text-[10.5px] text-muted-600 pointer-events-none"
+        class="absolute left-2 font-mono text-[10.5px] text-muted-600 pointer-events-none"
+        :class="clip.goodBits?.length ? 'bottom-3.5' : 'bottom-1'"
       >
         {{ formatTime(clip.duration) }}
       </span>
@@ -201,7 +202,8 @@ onBeforeUnmount(stopDrag);
       <Icon
         v-if="clip.muted"
         icon="material-symbols:volume-off"
-        class="absolute right-2 bottom-1 size-3.5 block text-muted-500 pointer-events-none"
+        class="absolute right-2 size-3.5 block text-muted-500 pointer-events-none"
+        :class="clip.goodBits?.length ? 'bottom-3.5' : 'bottom-1'"
       />
 
       <button
diff --git a/src/renderer/src/components/Publish/PublisherClipRow.vue b/src/renderer/src/components/Publish/PublisherClipRow.vue
index 0189b7b3..f789bc0b 100644
--- a/src/renderer/src/components/Publish/PublisherClipRow.vue
+++ b/src/renderer/src/components/Publish/PublisherClipRow.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import { MOTION } from '@renderer/components/Base/geometry';
+import { Icon } from '@iconify/vue';
+import { FOCUS_RING, MOTION } from '@renderer/components/Base/geometry';
 import { thumbnailUrl } from '@renderer/utils/mediaUrl';
 import { useFormat } from '@renderer/composables/ui/useFormat';
 import { formatRelativeTime } from '@renderer/helpers/dateFormat';
@@ -17,9 +18,15 @@ import type { Clip } from '@renderer/types/clip';
 interface Props {
   clip: Clip;
   selected?: boolean;
+  /**
+   * Off means the row cannot be picked at all. "Most opened" is there to be
+   * read, not cleaned up: offering to unpublish the links people actually watch
+   * put a checkbox on the one list where pressing it is the wrong idea.
+   */
+  selectable?: boolean;
 }
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), { selectable: true });
 const emit = defineEmits<{ (e: 'toggle'): void }>();
 
 const { formatBytes } = useFormat();
@@ -43,27 +50,44 @@ const watched = computed(() => {
   return {
     label: String(views),
     hint: props.clip.publisherLastViewedAt
-      ? `last ${formatRelativeTime(props.clip.publisherLastViewedAt)}`
+      ? `last opened ${formatRelativeTime(props.clip.publisherLastViewedAt)}`
       : '',
   };
 });
 </script>
 
 <template>
-  <label
+  <!--
+    A label when it can be picked, so pressing anywhere on the row picks it,
+    and a plain row when it cannot. The checkbox is the app's own drawing over
+    a visually hidden input: a native one is painted by Chromium in white on
+    the dark palette and matched nothing else on the screen.
+  -->
+  <component
+    :is="selectable ? 'label' : 'div'"
     :class="[
-      'grid grid-cols-[1.25rem_4rem_1fr_auto_auto] items-center gap-3 px-2 py-2 rounded-md cursor-pointer',
+      'grid items-center gap-3 px-2 py-2 rounded-md',
+      selectable ? 'grid-cols-[1.25rem_4rem_1fr_auto_auto] cursor-pointer' : 'grid-cols-[4rem_1fr_auto_auto]',
       MOTION,
-      selected ? 'bg-accent-sunk' : 'hover:bg-muted-50',
+      selected ? 'bg-accent-sunk' : selectable ? 'hover:bg-muted-50' : '',
     ]"
   >
-    <input
-      type="checkbox"
-      class="size-4"
-      :checked="selected"
-      :aria-label="`Select ${title}`"
-      @change="emit('toggle')"
-    />
+    <span v-if="selectable" class="relative inline-flex size-5 items-center justify-center">
+      <input
+        type="checkbox"
+        :class="['peer absolute inset-0 opacity-0 cursor-pointer', FOCUS_RING]"
+        :checked="selected"
+        :aria-label="`Select ${title}`"
+        @change="emit('toggle')"
+      />
+      <Icon
+        :icon="selected ? 'material-symbols:check-box' : 'material-symbols:check-box-outline-blank'"
+        :class="[
+          'size-5 block pointer-events-none rounded-sm peer-focus-visible:focus-ring',
+          selected ? 'text-accent' : 'text-muted-400',
+        ]"
+      />
+    </span>
 
     <img
       :src="thumbnailUrl(clip.id)"
@@ -80,9 +104,9 @@ const watched = computed(() => {
       {{ formatBytes(clip.sizeBytes) }}
     </div>
 
-    <div class="w-28 text-right">
+    <div class="w-36 text-right">
       <div class="font-mono text-sm tabular-nums text-foreground">{{ watched.label }}</div>
       <div class="text-[11px] text-muted-400">{{ watched.hint }}</div>
     </div>
-  </label>
+  </component>
 </template>
diff --git a/src/renderer/src/components/Settings/PublisherCard.vue b/src/renderer/src/components/Settings/PublisherCard.vue
index 12e49eaa..bbe8bd7c 100644
--- a/src/renderer/src/components/Settings/PublisherCard.vue
+++ b/src/renderer/src/components/Settings/PublisherCard.vue
@@ -167,20 +167,27 @@ async function testPublisher(): Promise<void> {
       <p v-else-if="publisherState === 'unreachable'" class="!mt-2 !text-danger-ink">
         No answer from that address.
       </p>
-    </div>
 
-    <!--
-      A different question from compressing a trim, which is why it is a
-      different switch and now on a different page: what goes to a public link
-      is a copy, so shrinking it costs nothing on disk. Hidden when there is no
-      publisher, since a setting for a feature you do not have is noise.
-    -->
-    <SettingToggle
-      v-if="settings.publisherBaseUrl"
-      label="Compress clips when publishing"
-      description="The file on disk is untouched; only the copy behind the public link is re-encoded, so it downloads in a fifth of the time. Off uploads the recording as it is."
-      :model-value="settings.compressPublished !== false"
-      @update:model-value="saveCompressPublished($event)"
-    />
+      <!--
+        Inside the card, so the hairline under the card is under this too. It
+        sat outside it, which put the Claude heading straight under its
+        description with no rule between two unrelated things.
+      -->
+      <div class="mt-3">
+        <!--
+          A different question from compressing a trim, which is why it is a
+          different switch and now on a different page: what goes to a public link
+          is a copy, so shrinking it costs nothing on disk. Hidden when there is no
+          publisher, since a setting for a feature you do not have is noise.
+        -->
+        <SettingToggle
+          v-if="settings.publisherBaseUrl"
+          label="Compress clips when publishing"
+          description="The file on disk is untouched; only the copy behind the public link is re-encoded, so it downloads in a fifth of the time. Off uploads the recording as it is."
+          :model-value="settings.compressPublished !== false"
+          @update:model-value="saveCompressPublished($event)"
+        />
+      </div>
+    </div>
   </div>
 </template>
diff --git a/src/renderer/src/components/Settings/RecordingSettings.vue b/src/renderer/src/components/Settings/RecordingSettings.vue
index 932fbf48..dd0c1f0b 100644
--- a/src/renderer/src/components/Settings/RecordingSettings.vue
+++ b/src/renderer/src/components/Settings/RecordingSettings.vue
@@ -399,8 +399,18 @@ function openGuide(): void {
           <p class="text-sm text-muted-500 max-w-[62ch]">
             OBS is still recording at
             <span class="text-foreground">{{ qualityInObs ?? 'something else' }}</span
-            >. This lands the next time the setup is written, which cannot happen while OBS is
-            open.
+            >.
+            <!--
+              Two sentences, because the way to finish it depends on whether OBS
+              is running. It used to say "cannot happen while OBS is open" when
+              OBS was closed and the button beside it would write it right now.
+            -->
+            <template v-if="status?.running">
+              GoodBit cannot change it while OBS is open, so close OBS and write it then.
+            </template>
+            <template v-else>
+              Write it to OBS and the next recording uses it.
+            </template>
           </p>
         </div>
         <BaseButton
diff --git a/src/renderer/src/components/Storage/BurstCluster.vue b/src/renderer/src/components/Storage/BurstCluster.vue
index 2c51cbaa..84a4eaff 100644
--- a/src/renderer/src/components/Storage/BurstCluster.vue
+++ b/src/renderer/src/components/Storage/BurstCluster.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import BasePanel from '@renderer/components/Base/BasePanel.vue';
 import { computed } from 'vue';
-import { Icon } from '@iconify/vue';
-import { ICON_BOX, SECTION_HEADER } from '@renderer/components/Base/geometry';
+import { SECTION_HEADER } from '@renderer/components/Base/geometry';
 import BaseButton from '@renderer/components/Base/BaseButton.vue';
 import StorageClipTile from './StorageClipTile.vue';
 import { useFormat } from '@renderer/composables/ui/useFormat';
@@ -83,11 +82,11 @@ const publishedDoomed = computed(() => doomed.value.filter((clip) => clip.publis
 
       <BaseButton
         tone="danger"
+        icon="material-symbols:delete-outline"
         class="ml-auto"
         :disabled="deleting || doomed.length === 0"
         @click="emit('delete', doomed)"
       >
-        <Icon icon="material-symbols:delete-outline" :class="ICON_BOX" />
         Delete the other {{ doomed.length }}
       </BaseButton>
     </div>
diff --git a/src/renderer/src/components/Storage/BurstSection.vue b/src/renderer/src/components/Storage/BurstSection.vue
index 3d48c703..63d96e7e 100644
--- a/src/renderer/src/components/Storage/BurstSection.vue
+++ b/src/renderer/src/components/Storage/BurstSection.vue
@@ -54,7 +54,15 @@ const emit = defineEmits<{
     </BaseEmptyState>
 
     <template v-else>
-      <ReclaimSummary :bytes="data.reclaimableBytes" :clips="data.totalClips" />
+      <!--
+        The clips that would go, not every clip in a burst: keeping one of each
+        is the point, so "1.2 MB across 3 clips" about three saves of which two
+        go was a count of the wrong thing.
+      -->
+      <ReclaimSummary
+        :bytes="data.reclaimableBytes"
+        :clips="data.totalClips - data.clusters.length"
+      />
 
       <div class="mt-6 space-y-4">
         <BurstClusterCard
diff --git a/src/renderer/src/components/Storage/GraveyardSection.vue b/src/renderer/src/components/Storage/GraveyardSection.vue
index 96af79db..ce0b7dfe 100644
--- a/src/renderer/src/components/Storage/GraveyardSection.vue
+++ b/src/renderer/src/components/Storage/GraveyardSection.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Icon } from '@iconify/vue';
-import { ICON_BOX, SECTION_HEADER } from '@renderer/components/Base/geometry';
+import { computed } from 'vue';
+import { SECTION_HEADER } from '@renderer/components/Base/geometry';
 import BaseButton from '@renderer/components/Base/BaseButton.vue';
 import BaseEmptyState from '@renderer/components/Base/BaseEmptyState.vue';
 import StorageClipTile from './StorageClipTile.vue';
@@ -39,6 +39,14 @@ const emit = defineEmits<{
 
 const { formatBytes } = useFormat();
 
+/** What the ticked clips weigh, for the bar that deletes them. */
+const selectedBytes = computed(() =>
+  (props.data?.groups ?? [])
+    .flatMap((group) => group.clips)
+    .filter((clip) => props.selected.has(clip.id))
+    .reduce((sum, clip) => sum + (clip.sizeBytes ?? 0), 0),
+);
+
 function groupSelected(clips: Clip[]): boolean {
   return clips.length > 0 && clips.every((clip) => props.selected.has(clip.id));
 }
@@ -107,10 +115,9 @@ function groupSelected(clips: Clip[]): boolean {
       </div>
 
       <!--
-        The delete, written here beside the sentence explaining what it
-        destroys rather than reached for from a shared danger token. There is
-        deliberately no danger button in `geometry.ts` for exactly that reason:
-        making one easy to reach for is how it ends up on the wrong button.
+        The delete, outlined in danger and never filled, and it says how much
+        it frees as well as how many: the whole screen is about space, and the
+        count alone made somebody add up sizes by eye.
       -->
       <div
         v-if="selected.size"
@@ -118,14 +125,17 @@ function groupSelected(clips: Clip[]): boolean {
       >
         <span class="text-sm text-foreground">
           {{ selected.size }} selected
+          <span class="font-mono text-xs tabular-nums text-muted-500">
+            · {{ formatBytes(selectedBytes) }}
+          </span>
         </span>
         <BaseButton
           tone="danger"
+          icon="material-symbols:delete-outline"
           class="ml-auto"
           :disabled="deleting"
           @click="emit('delete')"
         >
-          <Icon icon="material-symbols:delete-outline" :class="ICON_BOX" />
           Delete selected
         </BaseButton>
       </div>
diff --git a/src/renderer/src/components/Storage/StorageClipTile.vue b/src/renderer/src/components/Storage/StorageClipTile.vue
index f09a6a50..c822d2d0 100644
--- a/src/renderer/src/components/Storage/StorageClipTile.vue
+++ b/src/renderer/src/components/Storage/StorageClipTile.vue
@@ -52,20 +52,37 @@ const title = computed(() => props.clip.displayName?.trim() || props.clip.filena
   <button
     type="button"
     :class="[
-      'group relative block w-full text-left rounded-md overflow-hidden border',
+      'group relative block w-full text-left rounded-md overflow-hidden border border-border',
       FOCUS_RING,
       MOTION,
+      /*
+       * Picked is a ring, painted as a shadow outside the box, rather than a
+       * border colour: a one pixel hairline turning red was the only sign a
+       * tile had been picked, and across a grid of forty it did not read.
+       */
       keeper
-        ? 'border-accent'
+        ? 'ring-2 ring-accent'
         : selected
-          ? 'border-danger'
-          : 'border-border hover:border-line-strong',
+          ? 'ring-2 ring-danger'
+          : 'hover:border-line-strong',
     ]"
     :aria-pressed="mode === 'keep' ? keeper : selected"
     @click="emit('toggle')"
   >
     <div class="aspect-21/9 bg-video-bed relative">
-      <img :src="thumbnailUrl(clip.id)" :alt="title" class="size-full object-cover" />
+      <!--
+        The ones about to go are dimmed, so the one being kept is the picture
+        the eye lands on. Opacity only, which is the one property allowed to
+        move with a state.
+      -->
+      <img
+        :src="thumbnailUrl(clip.id)"
+        :alt="title"
+        :class="[
+          'size-full object-cover transition-opacity duration-150',
+          mode === 'keep' && !keeper ? 'opacity-50' : '',
+        ]"
+      />
 
       <!--
         The one thing that reaches outside this machine. A published clip has a
@@ -101,16 +118,22 @@ const title = computed(() => props.clip.displayName?.trim() || props.clip.filena
         />
         {{ keeper ? 'Keeping' : 'Deleting' }}
       </BaseChip>
-      <Icon
+      <!--
+        On a scrim of its own. White on the frame vanished into every bright
+        thumbnail, which is a lot of them: the box to press was the one thing on
+        the tile that could not always be seen.
+      -->
+      <span
         v-else
-        :icon="
-          selected ? 'material-symbols:check-box' : 'material-symbols:check-box-outline-blank'
-        "
-        :class="[
-          'absolute top-1.5 left-1.5 size-5 block drop-shadow',
-          selected ? 'text-danger' : 'text-on-video',
-        ]"
-      />
+        class="absolute top-1.5 left-1.5 inline-flex rounded-sm bg-scrim p-0.5"
+      >
+        <Icon
+          :icon="
+            selected ? 'material-symbols:check-box' : 'material-symbols:check-box-outline-blank'
+          "
+          :class="['size-5 block', selected ? 'text-danger' : 'text-on-video']"
+        />
+      </span>
     </div>
 
     <div class="px-2 py-1.5">
diff --git a/src/renderer/src/composables/clips/usePublisherStats.ts b/src/renderer/src/composables/clips/usePublisherStats.ts
index f54a8526..a3ad7bcf 100644
--- a/src/renderer/src/composables/clips/usePublisherStats.ts
+++ b/src/renderer/src/composables/clips/usePublisherStats.ts
@@ -32,6 +32,7 @@ export function usePublisherStats() {
   const clips = ref<Clip[]>([]);
   const loading = ref(false);
   const error = ref<string | null>(null);
+  const problem = ref<PublisherStats['problem']>(null);
 
   const configured = computed(() => Boolean(settings.value.publisherBaseUrl));
 
@@ -49,8 +50,19 @@ export function usePublisherStats() {
        * to ask again: a second fetch would draw yesterday's numbers first and
        * then change them under the reader.
        */
-      stats.value = await syncPublisherStats();
-      clips.value = stats.value.clips ?? [];
+      const answer = await syncPublisherStats();
+      // A publisher that did not answer is said so, not drawn as an empty one:
+      // "0 published" about a server that was off is a wrong number.
+      if (answer.problem) {
+        stats.value = null;
+        clips.value = [];
+        problem.value = answer.problem;
+        error.value = answer.problem.message;
+        return;
+      }
+      problem.value = null;
+      stats.value = answer;
+      clips.value = answer.clips ?? [];
     } catch (cause) {
       error.value = cause instanceof Error ? cause.message : String(cause);
     } finally {
@@ -129,6 +141,7 @@ export function usePublisherStats() {
     clips,
     loading,
     error,
+    problem,
     configured,
     warmedUp,
     daysUntilWarm,
diff --git a/src/renderer/src/services/clips.ts b/src/renderer/src/services/clips.ts
index a0997c83..db2cc08a 100644
--- a/src/renderer/src/services/clips.ts
+++ b/src/renderer/src/services/clips.ts
@@ -273,6 +273,8 @@ export interface PublisherStats {
   totals: { clips: number; bytes: number; views: number };
   /** When the publisher started counting. Null means it never has. */
   countingSince: string | null;
+  /** Why there are no numbers, when the publisher did not answer. */
+  problem: { kind: 'unreachable' | 'unauthorized' | 'outdated'; message: string } | null;
 }
 
 /**
diff --git a/src/renderer/src/views/PublisherPage.vue b/src/renderer/src/views/PublisherPage.vue
index 1e394c1a..646c5354 100644
--- a/src/renderer/src/views/PublisherPage.vue
+++ b/src/renderer/src/views/PublisherPage.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue';
-import { Icon } from '@iconify/vue';
-import { ICON_BOX, SECTION_HEADER } from '@renderer/components/Base/geometry';
+import { SECTION_HEADER } from '@renderer/components/Base/geometry';
 import BaseButton from '@renderer/components/Base/BaseButton.vue';
 import BaseEmptyState from '@renderer/components/Base/BaseEmptyState.vue';
 import { useRouter } from 'vue-router';
@@ -48,6 +47,18 @@ function openPublisherSettings(): void {
  * reader's own domain and paths into every command. Same address the
  * Publisher card in Settings links to.
  */
+/** The heading and glyph for each way the publisher can fail to answer. */
+const problemView = computed(() => {
+  switch (saver.problem.value?.kind) {
+    case 'outdated':
+      return { title: 'This publisher cannot count yet', icon: 'material-symbols:update' };
+    case 'unauthorized':
+      return { title: 'The publisher refused the token', icon: 'material-symbols:lock-outline' };
+    default:
+      return { title: 'Could not reach the publisher', icon: 'material-symbols:cloud-off-outline' };
+  }
+});
+
 function openGuide(): void {
   void window.goodbit?.openExternal('https://darrellvs.github.io/goodbit/publisher.html');
 }
@@ -158,19 +169,27 @@ function unpublishSelected(): void {
         v-else-if="saver.error.value"
         size="panel"
         tone="warning"
-        icon="material-symbols:cloud-off-outline"
-        title="Could not reach the publisher"
+        :icon="problemView.icon"
+        :title="problemView.title"
         :description="saver.error.value"
       >
         <!--
-          Both ways out, because they are the two causes: the server is off or
-          asleep, which trying again fixes, or the address or token is wrong,
-          which only Settings can.
+          The way out depends on what went wrong. Off or asleep is fixed by
+          trying again; a wrong address or token only by Settings; an old
+          container only on the server, which the guide walks through.
         -->
         <template #actions>
           <BaseButton @click="saver.load()">Try again</BaseButton>
-          <BaseButton tone="quiet" @click="openPublisherSettings">
-            Check the address
+          <BaseButton
+            v-if="saver.problem.value?.kind === 'outdated'"
+            tone="quiet"
+            icon="material-symbols:open-in-new"
+            @click="openGuide"
+          >
+            How to update it
+          </BaseButton>
+          <BaseButton v-else tone="quiet" @click="openPublisherSettings">
+            {{ saver.problem.value?.kind === 'unauthorized' ? 'Check the token' : 'Check the address' }}
           </BaseButton>
         </template>
       </BaseEmptyState>
@@ -248,8 +267,7 @@ function unpublishSelected(): void {
               v-for="clip in saver.mostWatched.value.slice(0, 10)"
               :key="clip.id"
               :clip="clip"
-              :selected="selected.has(clip.id)"
-              @toggle="toggle(clip.id)"
+              :selectable="false"
             />
           </div>
         </section>
@@ -268,10 +286,10 @@ function unpublishSelected(): void {
           </span>
           <BaseButton
             class="ml-auto"
+            icon="material-symbols:cloud-off-outline"
             :disabled="working"
             @click="unpublishSelected"
           >
-            <Icon icon="material-symbols:cloud-off-outline" :class="ICON_BOX" />
             Take off the publisher
           </BaseButton>
         </div>
diff --git a/tests/unit/main/publisherStatsProblem.spec.ts b/tests/unit/main/publisherStatsProblem.spec.ts
new file mode 100644
index 00000000..2c3992d6
--- /dev/null
+++ b/tests/unit/main/publisherStatsProblem.spec.ts
@@ -0,0 +1,33 @@
+import { describe, expect, it } from 'vitest';
+import { describeStatsFailure } from '../../../src/main/services/publisherStatsProblem';
+
+/*
+ * Every failure used to come back as zeros, which reads as an empty publisher.
+ * Each one now names itself, and the page picks its way out from the kind.
+ */
+describe('describeStatsFailure', () => {
+  it('reads no answer at all as unreachable, and names the address', () => {
+    const problem = describeStatsFailure(undefined, 'http://localhost:4199');
+    expect(problem.kind).toBe('unreachable');
+    expect(problem.message).toContain('http://localhost:4199');
+  });
+
+  it('reads a 404 as a publisher older than the counter', () => {
+    expect(describeStatsFailure(404, 'x').kind).toBe('outdated');
+  });
+
+  it('reads a refused token as unauthorized', () => {
+    expect(describeStatsFailure(401, 'x').kind).toBe('unauthorized');
+    expect(describeStatsFailure(403, 'x').kind).toBe('unauthorized');
+  });
+
+  it('says so when the server has no token at all', () => {
+    const problem = describeStatsFailure(503, 'x');
+    expect(problem.kind).toBe('unauthorized');
+    expect(problem.message).toContain('PUBLISH_TOKEN');
+  });
+
+  it('reads a server error as unreachable rather than as a token problem', () => {
+    expect(describeStatsFailure(500, 'x').kind).toBe('unreachable');
+  });
+});