docs: fix spec review issues in UI improvement pass spec

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

docs/superpowers/specs/2026-03-19-ui-improvement-pass-design.md

@@ -72,8 +72,8 @@ Removing shadow elevation in favour of a subtle border gives cards a cleaner, mo
 ### Nav drawer brand header
 Replace the plain `v-list-item` brand block with a styled header:
 - Container: `pa-4` padding, `bg-surface` background to visually separate from nav list
-- Icon: `mdi-download-network` at size 32, `color="primary"`
-- Title: `"GallerySubscriber"` in `font-weight-bold text-subtitle-1`
+- Icon: `mdi-download-network` at size 32, `color="primary"` *(icon intentionally changed from current `mdi-image-multiple`)*
+- Title: `"GallerySubscriber"` in `font-weight-bold text-subtitle-1` *(title intentionally changed from `"Gallery Subscriber"` — one word, no space)*
 - Subtitle: `"Download Manager"` in `text-caption text-medium-emphasis`
 - Followed by a `v-divider`
 
@@ -83,12 +83,11 @@ Change from `density="compact"` to `density="comfortable"`. Add `rounded="lg"` a
 ### App bar
 - Change `elevation="1"` to `elevation="0"` with `border="b"` — flat bar with bottom border
 - Add a WebSocket status indicator to the right of the title, before the theme toggle:
-  - A `v-chip` or icon+dot combination showing three states:
-    - **Connected:** small green dot (`color="success"`) + tooltip "Connected"
-    - **Connecting:** amber dot with CSS pulse animation + tooltip "Connecting…"
-    - **Disconnected:** red dot + tooltip "Disconnected — real-time updates paused"
-  - Reads from `useWebSocketStore().status` (the store already tracks connection state)
-  - `variant="text"` so it's unobtrusive
+  - A small icon button showing two states (the store exposes `isConnected: Ref<boolean>` only — no "connecting" state is tracked):
+    - **Connected:** `mdi-circle` at size 10, `color="success"` + `v-tooltip` "Real-time updates active"
+    - **Disconnected:** `mdi-circle` at size 10, `color="error"` + `v-tooltip` "Disconnected — real-time updates paused"
+  - Reads from `useWebSocketStore().isConnected`
+  - Wrapped in a `v-btn variant="text" icon` so it is unobtrusive and the tooltip activates on hover
 
 ---
 
@@ -127,7 +126,7 @@ Running items get a subtle animated left border:
 All three empty panels (active downloads, recent activity, sources needing attention) use the same pattern:
 ```html
 <div class="text-center py-8">
-  <v-icon size="48" color="medium-emphasis">mdi-[relevant-icon]</v-icon>
+  <v-icon size="48" color="secondary" :style="{ opacity: 0.5 }">mdi-[relevant-icon]</v-icon>
   <div class="text-body-1 mt-2">[Primary message]</div>
   <div class="text-caption text-medium-emphasis mt-1">[Helper text]</div>
 </div>
@@ -145,15 +144,15 @@ All three empty panels (active downloads, recent activity, sources needing atten
 - Add `class="border-t"` to the inner table container for visual separation.
 
 ### Downloads (`frontend/src/views/Downloads.vue`)
-- Add an `exclude_superseded` toggle to the filters row: a `v-switch` or `v-chip` labelled "Hide superseded failures" that adds `exclude_superseded: true` to the fetch params when active. Defaults to `true` (consistent with the dashboard behaviour).
-- No table layout changes.
+- Add an `exclude_superseded` filter toggle below the existing four filter columns (the current row is already full-width with four `md="3"` columns). Add a new `v-row` directly below the existing filter row containing a single `v-col cols="12"` with a `v-switch` labelled "Hide superseded failures", `density="compact"`, `hide-details`, defaulting to `true`. When true, adds `exclude_superseded: true` to the `loadDownloads()` params.
+- The existing four filter columns are unchanged.
 
 ### Credentials (`frontend/src/views/Credentials.vue`)
 Two visual states for platform cards:
 
 **Configured:** Card gets `border-color` set to the success colour via inline style or a CSS class. Existing content unchanged.
 
-**Not configured:** Card gets a dashed border (`border: 2px dashed`), the `v-alert` info block is replaced with a concise empty-state message, and the "Add Credentials" button is promoted to `color="primary" variant="flat"` (currently `variant="text"`), making the call to action visually prominent.
+**Not configured:** Card gets a dashed border via `:style="{ border: '2px dashed var(--v-border-color)' }"` and `:border="false"` to override the global VCard `border: true` default. (`--v-border-color` is a hex value, not an RGB triplet, so it must be used directly without `rgb()` wrapping.) The `v-alert` info block is replaced with a concise empty-state message, and the "Add Credentials" button is promoted to `color="primary" variant="flat"` (currently `variant="text"`), making the call to action visually prominent.
 
 ### Settings & Logs
 No structural changes — both pages inherit the new palette and card border style from the vuetify.js update automatically.