Use friendly UI labels and release feedback (Refs #120)

src/routes/campaigns/[id]/+page.svelte

@@ -19,7 +19,11 @@
     import EmptyState from '$ui/components/primitives/EmptyState.svelte';
     import OperationHistory from '$ui/components/OperationHistory.svelte';
     import type { ActivityEvent } from '$lib/operation-flow.js';
-    import { campaignServerStatus, type CampaignServerGroup } from '$ui/campaigns.js';
+    import {
+        campaignActionLabel,
+        campaignServerStatus,
+        type CampaignServerGroup
+    } from '$ui/campaigns.js';
     import { serverIdentity } from '$ui/server-labels.js';
 
     interface FileRow {
@@ -86,6 +90,9 @@
     let filter = $state<'all' | CampaignServerGroup>('all');
     let expandedServers = $state<string[]>([]);
     let copyStatus = $state('');
+    const title = $derived(
+        detail ? `${campaignActionLabel(detail.deployment.action)} campaign` : 'Campaign'
+    );
     const serverRows = $derived(
         (detail?.servers ?? []).map((server) => ({
             server,
@@ -275,12 +282,7 @@
     }
 </script>
 
-<svelte:head
-    ><title
-        >{detail ? `${detail.deployment.action} campaign · ${detail.deployment.id}` : 'Campaign'} | Electric
-        Cherry</title
-    ></svelte:head
->
+<svelte:head><title>{title} | Electric Cherry</title></svelte:head>
 {#if loadError}<p role="alert" class="err">
         {loadError} <button onclick={loadDetail}>Retry</button>
     </p>{/if}
@@ -288,10 +290,10 @@
 {#if detail}
     {@const action = detail.deployment.action}
     <div class="page">
-        <SectionHeader title={`${action.charAt(0).toUpperCase() + action.slice(1)} campaign`}>
+        <SectionHeader {title}>
             {#snippet crumbs()}
                 <Breadcrumbs
-                    items={[{ label: 'Campaigns', href: '/campaigns' }, { label: action }]}
+                    items={[{ label: 'Campaigns', href: '/campaigns' }, { label: title }]}
                 />
             {/snippet}
             {#snippet actions()}