plum-e2e 2.6.9 → 2.8.0

package/frontend/src/routes/reports/+page.svelte

@@ -1,30 +1,36 @@
 <!--
  * This file is part of Plum.
- *
- * Plum is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * Plum is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with Plum. If not, see https://www.gnu.org/licenses/.
+ * Licensed under the MIT License. See LICENSE file in the project root for details.
  -->
 
 <script>
 	import { onMount, tick } from 'svelte';
 	import { fetchReports, deleteReport, deleteReports, reportUrl } from '$lib/api/reports';
 	import { reportsVersion } from '$lib/stores/runner';
-	import { REPORTS_PER_PAGE } from '$lib/constants';
+	import { REPORTS_PER_PAGE, BROWSERS } from '$lib/constants';
 	import { isScheduled, triggerLabel, triggerVariant, stagger } from '$lib/utils/format';
 	import Badge from '$lib/components/ui/Badge.svelte';
 	import Pagination from '$lib/components/ui/Pagination.svelte';
 	import ConfirmModal from '$lib/components/ui/ConfirmModal.svelte';
 	import EmptyState from '$lib/components/ui/EmptyState.svelte';
+	import {
+		LIST_PAGE_TITLE,
+		HEADING,
+		PASSING_LABEL,
+		RECENT_LABEL,
+		TREND_HINT,
+		NO_REPORTS_MESSAGE,
+		SELECT_ALL_TITLE,
+		SELECT_ROW_TITLE,
+		DELETE_REPORT_TITLE,
+		deleteReportsTitle,
+		deleteReportsBody,
+		runsRecorded,
+		passedCountLabel,
+		failedCountLabel,
+		trendDotTitle,
+		deleteSelectedLabel
+	} from '$lib/copy/reports';
 
 	let reports = [];
 	let total = 0;
@@ -122,30 +128,23 @@
 	}
 </script>
 
-<svelte:head><title>Reports — Plum</title></svelte:head>
+<svelte:head><title>{LIST_PAGE_TITLE}</title></svelte:head>
 
 <ConfirmModal
 	bind:open={deleteModal.open}
-	title={deleteModal.targets.length === 1
-		? 'Delete report?'
-		: `Delete ${deleteModal.targets.length} reports?`}
-	confirmLabel="Delete"
+	title={deleteReportsTitle(deleteModal.targets.length)}
 	loading={deleting}
 	on:confirm={confirmDelete}
 >
-	{#if deleteModal.targets.length === 1}
-		This will permanently remove the report and its data file.
-	{:else}
-		This will permanently remove {deleteModal.targets.length} reports and their data files.
-	{/if}
+	{deleteReportsBody(deleteModal.targets.length)}
 </ConfirmModal>
 
 <div class="page-header">
 	<div class="header-top">
 		<div>
-			<h1>Reports</h1>
+			<h1>{HEADING}</h1>
 			<p class="subtitle">
-				{total} run{total !== 1 ? 's' : ''} recorded
+				{runsRecorded(total)}
 			</p>
 		</div>
 
@@ -159,7 +158,7 @@
 				>
 					{passRate}%
 				</span>
-				<span class="rate-label">passing</span>
+				<span class="rate-label">{PASSING_LABEL}</span>
 			</div>
 		{/if}
 	</div>
@@ -170,13 +169,13 @@
 				<div class="pass-bar-fill" style="width: {animateBar ? passRate + '%' : '0'}"></div>
 			</div>
 			<div class="bar-legend">
-				<span class="legend-pass">{passCount} passed</span>
-				<span class="legend-fail">{failCount} failed</span>
+				<span class="legend-pass">{passedCountLabel(passCount)}</span>
+				<span class="legend-fail">{failedCountLabel(failCount)}</span>
 			</div>
 		</div>
 
 		<div class="trend-row">
-			<span class="trend-label">Recent</span>
+			<span class="trend-label">{RECENT_LABEL}</span>
 			<div class="trend-dots">
 				{#each trendDots as r, i}
 					<span
@@ -184,20 +183,20 @@
 						class:pass={r.status === 'PASS'}
 						class:fail={r.status !== 'PASS'}
 						style={stagger(i, 35)}
-						title="{r.status} · {r.tags} · {r.date}"
+						title={trendDotTitle(r.status, r.tags, r.date)}
 					></span>
 				{/each}
 			</div>
-			<span class="trend-hint">← older · newer →</span>
+			<span class="trend-hint">{TREND_HINT}</span>
 		</div>
 	{/if}
 </div>
 
 {#if total === 0}
-	<EmptyState message="No reports yet. Run a test to generate one." />
+	<EmptyState message={NO_REPORTS_MESSAGE} />
 {:else}
 	<div class="list-header">
-		<label class="select-all-wrap" title="Select all on this page">
+		<label class="select-all-wrap" title={SELECT_ALL_TITLE}>
 			<input
 				type="checkbox"
 				class="checkbox"
@@ -208,7 +207,7 @@
 		</label>
 		{#if someSelected}
 			<button class="btn-delete-selected" on:click={() => openDeleteModal([...selected])}>
-				Delete ({selected.size})
+				{deleteSelectedLabel(selected.size)}
 			</button>
 		{/if}
 	</div>
@@ -216,7 +215,7 @@
 	<div class="report-list">
 		{#each reports as report, i}
 			<div class="report-row" class:is-selected={selected.has(report.id)} style={stagger(i)}>
-				<label class="row-check-wrap" title="Select">
+				<label class="row-check-wrap" title={SELECT_ROW_TITLE}>
 					<input
 						type="checkbox"
 						class="checkbox"
@@ -248,7 +247,7 @@
 								<Badge variant={triggerVariant(report.triggerType)}>
 									{triggerLabel(report.triggerType)}
 								</Badge>
-								{#if report.browser && report.browser !== 'chromium'}
+								{#if report.browser && report.browser !== BROWSERS[0].id}
 									<Badge variant="neutral">{report.browser}</Badge>
 								{/if}
 							</div>
@@ -274,7 +273,7 @@
 
 				<button
 					class="row-delete-btn"
-					title="Delete report"
+					title={DELETE_REPORT_TITLE}
 					on:click={(e) => openSingleDelete(report.id, e)}
 				>
 					<svg

package/frontend/src/routes/reports/[id]/+page.svelte

@@ -1,18 +1,6 @@
 <!--
  * This file is part of Plum.
- *
- * Plum is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * Plum is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with Plum. If not, see https://www.gnu.org/licenses/.
+ * Licensed under the MIT License. See LICENSE file in the project root for details.
  -->
 
 <script>
@@ -31,7 +19,33 @@
 		featureSuiteTag,
 		scenarioHasScreenshots
 	} from '$lib/utils/format';
-	import { REPLAY_STEP_MS } from '$lib/constants';
+	import { REPLAY_STEP_MS, BROWSERS } from '$lib/constants';
+	import { pluralize } from '$lib/copy/common';
+	import {
+		DETAIL_PAGE_TITLE,
+		REPORTS_BACK_LABEL,
+		LOAD_ERROR,
+		PASSED_LABEL,
+		FAILED_LABEL,
+		STAT_PASSED,
+		STAT_FAILED,
+		STAT_SKIPPED,
+		STAT_DURATION,
+		RUN_LOGS_LABEL,
+		RETRY_TITLE,
+		WATCH_REPLAY_TITLE,
+		REPLAY_LABEL,
+		SCREENSHOT_TOGGLE_LABEL,
+		STEP_SCREENSHOT_ALT,
+		NO_SCREENSHOT_MESSAGE,
+		runnersBadge,
+		casesCountLabel,
+		attemptsLabel,
+		caseLabel,
+		replayScreenshotAlt,
+		pauseOrPlayTitle,
+		replayCounter
+	} from '$lib/copy/reports';
 	import Badge from '$lib/components/ui/Badge.svelte';
 	import BackLink from '$lib/components/ui/BackLink.svelte';
 	import StatusDot from '$lib/components/ui/StatusDot.svelte';
@@ -126,7 +140,7 @@
 		try {
 			detail = await fetchReportDetail(reportId);
 		} catch {
-			error = 'Could not load report.';
+			error = LOAD_ERROR;
 		}
 	});
 
@@ -159,9 +173,9 @@
 
 <svelte:window on:keydown={handleKeydown} />
 
-<svelte:head><title>Report — Plum</title></svelte:head>
+<svelte:head><title>{DETAIL_PAGE_TITLE}</title></svelte:head>
 
-<BackLink href="/reports" label="Reports" />
+<BackLink href="/reports" label={REPORTS_BACK_LABEL} />
 
 {#if error}
 	<div class="error-state">{error}</div>
@@ -205,7 +219,7 @@
 
 				<div>
 					<div class="h1-row">
-						<h1>{overallPass ? 'Passed' : 'Failed'}</h1>
+						<h1>{overallPass ? PASSED_LABEL : FAILED_LABEL}</h1>
 						{#if detail.testRun?.title}
 							<span class="run-name-badge">{detail.testRun.title}</span>
 						{:else if isScheduled(detail.triggerType)}
@@ -220,8 +234,8 @@
 						<span>{new Date(detail.createdAt).toLocaleString()}</span>
 						<span class="meta-sep">·</span>
 						<span class="browser-pill">
-							<BrowserIcon browser={detail.browser ?? 'chromium'} />
-							{detail.browser ?? 'chromium'}
+							<BrowserIcon browser={detail.browser ?? BROWSERS[0].id} />
+							{detail.browser ?? BROWSERS[0].id}
 						</span>
 					</div>
 				</div>
@@ -243,7 +257,7 @@
 						>
 							<polyline points="20 6 9 17 4 12" />
 						</svg>
-						passed
+						{STAT_PASSED}
 					</span>
 				</div>
 				{#if failed > 0}
@@ -262,7 +276,7 @@
 							>
 								<line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
 							</svg>
-							failed
+							{STAT_FAILED}
 						</span>
 					</div>
 				{/if}
@@ -281,7 +295,7 @@
 							>
 								<line x1="5" y1="12" x2="19" y2="12" />
 							</svg>
-							skipped
+							{STAT_SKIPPED}
 						</span>
 					</div>
 				{/if}
@@ -300,7 +314,7 @@
 						>
 							<circle cx="12" cy="12" r="10" /><polyline points="12 6 12 12 16 14" />
 						</svg>
-						duration
+						{STAT_DURATION}
 					</span>
 				</div>
 				<div class="stat">
@@ -318,7 +332,7 @@
 							<rect x="2" y="3" width="20" height="14" rx="2" />
 							<path d="M8 21h8M12 17v4" />
 						</svg>
-						runner{detail.runners !== 1 ? 's' : ''}
+						{pluralize(detail.runners, 'runner')}
 					</span>
 				</div>
 			</div>
@@ -340,9 +354,9 @@
 				>
 					<polyline points="4 17 10 11 4 5" /><line x1="12" y1="19" x2="20" y2="19" />
 				</svg>
-				Run Logs
+				{RUN_LOGS_LABEL}
 				{#if logSections.length > 1}
-					<span class="log-runner-count">{logSections.length} runners</span>
+					<span class="log-runner-count">{runnersBadge(logSections.length)}</span>
 				{/if}
 			</summary>
 
@@ -428,14 +442,11 @@
 								<span class="scenario-name">
 									{group.name}
 									{#if group.scenarios.length > 1}
-										<span class="scenario-count">{group.scenarios.length} cases</span>
+										<span class="scenario-count">{casesCountLabel(group.scenarios.length)}</span>
 									{/if}
 									{#if group.scenarios[0]?.attempts > 1}
-										<span
-											class="scenario-count"
-											title="Failed and was automatically retried before the final result"
-										>
-											{group.scenarios[0].attempts} attempts
+										<span class="scenario-count" title={RETRY_TITLE}>
+											{attemptsLabel(group.scenarios[0].attempts)}
 										</span>
 									{/if}
 								</span>
@@ -466,13 +477,13 @@
 							{#if groupHasReplay && group.scenarios.length === 1}
 								<button
 									class="replay-btn"
-									title="Watch replay"
+									title={WATCH_REPLAY_TITLE}
 									on:click={() => openReplay(group.scenarios[0])}
 								>
 									<svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor" stroke="none">
 										<polygon points="5,3 19,12 5,21" />
 									</svg>
-									Replay
+									{REPLAY_LABEL}
 								</button>
 							{/if}
 						</div>
@@ -483,7 +494,7 @@
 									{#if group.scenarios.length > 1}
 										<div class="example-header">
 											<StatusDot status={scenario.status} />
-											<span>Case {exampleIndex + 1}</span>
+											<span>{caseLabel(exampleIndex + 1)}</span>
 											<span class="scenario-duration">{fmtDuration(scenario.duration)}</span>
 											{#if scenarioHasScreenshots(scenario)}
 												<button
@@ -499,7 +510,7 @@
 													>
 														<polygon points="5,3 19,12 5,21" />
 													</svg>
-													Replay
+													{REPLAY_LABEL}
 												</button>
 											{/if}
 										</div>
@@ -524,11 +535,11 @@
 
 											{#if step.screenshot}
 												<details class="screenshot-wrap">
-													<summary class="screenshot-toggle">Screenshot</summary>
+													<summary class="screenshot-toggle">{SCREENSHOT_TOGGLE_LABEL}</summary>
 													<img
 														class="screenshot"
 														src={screenshotUrl(step.screenshot)}
-														alt="Step screenshot"
+														alt={STEP_SCREENSHOT_ALT}
 													/>
 												</details>
 											{/if}
@@ -571,10 +582,10 @@
 					<img
 						class="replay-screenshot"
 						src={screenshotUrl(currentReplayStep.screenshot)}
-						alt="Step {replayIdx + 1} screenshot"
+						alt={replayScreenshotAlt(replayIdx + 1)}
 					/>
 				{:else}
-					<div class="replay-no-screenshot">No screenshot captured for this step</div>
+					<div class="replay-no-screenshot">{NO_SCREENSHOT_MESSAGE}</div>
 				{/if}
 			</div>
 
@@ -619,7 +630,7 @@
 				<button
 					class="replay-play-btn"
 					on:click={togglePlayback}
-					title={replayPlaying ? 'Pause' : 'Play'}
+					title={pauseOrPlayTitle(replayPlaying)}
 				>
 					{#if replayPlaying}
 						<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none">
@@ -656,7 +667,7 @@
 					</svg>
 				</button>
 
-				<span class="replay-counter">{replayIdx + 1} / {replaySteps.length}</span>
+				<span class="replay-counter">{replayCounter(replayIdx + 1, replaySteps.length)}</span>
 			</div>
 		</div>
 	</div>

package/frontend/src/routes/reports/live/+page.svelte

@@ -1,18 +1,6 @@
 <!--
  * This file is part of Plum.
- *
- * Plum is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * Plum is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with Plum. If not, see https://www.gnu.org/licenses/.
+ * Licensed under the MIT License. See LICENSE file in the project root for details.
  -->
 
 <script>
@@ -22,7 +10,35 @@
 	import { fly, fade } from 'svelte/transition';
 	import { runnerState, cancelRun, backgroundRuns } from '$lib/stores/runner';
 	import { reportUrl } from '$lib/api/reports';
-	import { REDIRECT_DELAY_MS, ALL_TESTS_LABEL } from '$lib/constants';
+	import { REDIRECT_DELAY_MS } from '$lib/constants';
+	import { ALL_TESTS_LABEL, pluralize } from '$lib/copy/common';
+	import {
+		REPORTS_BACK_LABEL,
+		PASSED_LABEL,
+		FAILED_LABEL,
+		LIVE_PAGE_TITLE,
+		NO_TESTS_RUNNING_HEADING,
+		NO_TESTS_RUNNING_BODY,
+		VIEW_PAST_REPORTS_LINK,
+		SELECT_RUN_HINT,
+		LIVE_BADGE_LABEL,
+		CANCEL_RUN_LABEL,
+		ALL_TESTS_PASSED,
+		SOME_TESTS_FAILED,
+		VIEW_REPORT_NOW_LABEL,
+		LIVE_STEP_LABEL,
+		LIVE_BROWSER_VIEW_ALT,
+		AWAITING_STREAM_LABEL,
+		NO_STREAM_LABEL,
+		RUNNER_LABEL,
+		RUNNING_LABEL,
+		FINISHED_LABEL,
+		WAITING_FOR_OUTPUT,
+		runsInProgressHeading,
+		workersCountLabel,
+		redirectingIn,
+		runnersBadge
+	} from '$lib/copy/reports';
 	import { triggerLabel } from '$lib/utils/format';
 	import BackLink from '$lib/components/ui/BackLink.svelte';
 	import Badge from '$lib/components/ui/Badge.svelte';
@@ -92,9 +108,9 @@
 	}
 </script>
 
-<svelte:head><title>Live Run — Plum</title></svelte:head>
+<svelte:head><title>{LIVE_PAGE_TITLE}</title></svelte:head>
 
-<BackLink href="/reports" label="Reports" />
+<BackLink href="/reports" label={REPORTS_BACK_LABEL} />
 
 {#if showIdle}
 	<div class="idle-state">
@@ -113,14 +129,14 @@
 				<polyline points="12 6 12 12 16 14" />
 			</svg>
 		</div>
-		<h2>No tests currently running</h2>
-		<p>Start a test from the panel below, then come back here to watch it live.</p>
-		<a href="/reports" class="idle-link">View past reports →</a>
+		<h2>{NO_TESTS_RUNNING_HEADING}</h2>
+		<p>{NO_TESTS_RUNNING_BODY}</p>
+		<a href="/reports" class="idle-link">{VIEW_PAST_REPORTS_LINK}</a>
 	</div>
 {:else if showPicker}
 	<div class="cron-running-state">
 		<div class="cron-running-icon"><span class="cron-pulse-dot"></span></div>
-		<h2>{runningBgList.length === 1 ? 'A run' : `${runningBgList.length} runs`} in progress</h2>
+		<h2>{runsInProgressHeading(runningBgList.length)}</h2>
 		<div class="cron-task-list">
 			{#each runningBgList as [runId, run] (runId)}
 				<a href="/reports/live?run={runId}" class="cron-task-chip"
@@ -128,7 +144,7 @@
 				>
 			{/each}
 		</div>
-		<p>Select a run above, or wait — the report opens automatically when it finishes.</p>
+		<p>{SELECT_RUN_HINT}</p>
 	</div>
 {:else}
 	<!-- ── Run header ── -->
@@ -139,11 +155,11 @@
 	>
 		<div class="header-left">
 			{#if state.running}
-				<span class="live-badge"><span class="live-dot"></span>Live</span>
+				<span class="live-badge"><span class="live-dot"></span>{LIVE_BADGE_LABEL}</span>
 			{:else if state.status === 'pass'}
-				<Badge variant="pass">Passed</Badge>
+				<Badge variant="pass">{PASSED_LABEL}</Badge>
 			{:else}
-				<Badge variant="fail">Failed</Badge>
+				<Badge variant="fail">{FAILED_LABEL}</Badge>
 			{/if}
 
 			{#if state.currentRun}
@@ -154,14 +170,12 @@
 					{/if}
 					<span class="run-tag-label">{state.currentRun.tag || ALL_TESTS_LABEL}</span>
 					<span class="run-sep">·</span>
-					<span class="run-detail"
-						>{state.currentRun.workers} worker{state.currentRun.workers !== 1 ? 's' : ''}</span
-					>
+					<span class="run-detail">{workersCountLabel(state.currentRun.workers)}</span>
 					<span class="run-sep">·</span>
 					<span class="run-detail">{state.currentRun.browser}</span>
 					{#if state.lanes.length > 1}
 						<span class="run-sep">·</span>
-						<span class="run-detail">{state.lanes.length} runners</span>
+						<span class="run-detail">{runnersBadge(state.lanes.length)}</span>
 					{/if}
 				</div>
 			{/if}
@@ -183,7 +197,7 @@
 					<line x1="9" y1="9" x2="15" y2="15" />
 					<line x1="15" y1="9" x2="9" y2="15" />
 				</svg>
-				Cancel run
+				{CANCEL_RUN_LABEL}
 			</button>
 		{/if}
 	</div>
@@ -208,7 +222,7 @@
 						stroke-linecap="round"
 						stroke-linejoin="round"><polyline points="20 6 9 17 4 12" /></svg
 					>
-					All tests passed
+					{ALL_TESTS_PASSED}
 				{:else}
 					<svg
 						width="16"
@@ -221,13 +235,13 @@
 						stroke-linejoin="round"
 						><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg
 					>
-					Some tests failed
+					{SOME_TESTS_FAILED}
 				{/if}
 			</div>
 			<div class="completion-right">
-				<span class="redirect-hint">Redirecting in {redirectCountdown}s…</span>
+				<span class="redirect-hint">{redirectingIn(redirectCountdown)}</span>
 				<button class="view-now-btn" on:click={goNow}>
-					View Report Now
+					{VIEW_REPORT_NOW_LABEL}
 					<svg
 						width="12"
 						height="12"
@@ -278,12 +292,12 @@
 						<img
 							src="data:image/jpeg;base64,{activeLane.latestScreenshot.data}"
 							class="live-shot"
-							alt="Live browser view"
+							alt={LIVE_BROWSER_VIEW_ALT}
 							in:fade={{ duration: 120 }}
 						/>
 					{/key}
 					<div class="step-overlay">
-						<span class="step-keyword">Step</span>
+						<span class="step-keyword">{LIVE_STEP_LABEL}</span>
 						<span class="step-name">{activeLane.latestScreenshot.stepName}</span>
 					</div>
 				{:else}
@@ -302,7 +316,8 @@
 							<rect x="2" y="5" width="20" height="14" rx="2" />
 							<circle cx="12" cy="12" r="3" />
 						</svg>
-						<span>{activeLane?.status === 'running' ? 'Awaiting stream...' : 'No stream...'}</span>
+						<span>{activeLane?.status === 'running' ? AWAITING_STREAM_LABEL : NO_STREAM_LABEL}</span
+						>
 					</div>
 				{/if}
 			{:else if state.latestScreenshot}
@@ -310,12 +325,12 @@
 					<img
 						src="data:image/jpeg;base64,{state.latestScreenshot.data}"
 						class="live-shot"
-						alt="Live browser view"
+						alt={LIVE_BROWSER_VIEW_ALT}
 						in:fade={{ duration: 120 }}
 					/>
 				{/key}
 				<div class="step-overlay">
-					<span class="step-keyword">Step</span>
+					<span class="step-keyword">{LIVE_STEP_LABEL}</span>
 					<span class="step-name">{state.latestScreenshot.stepName}</span>
 				</div>
 			{:else}
@@ -334,7 +349,7 @@
 						<rect x="2" y="5" width="20" height="14" rx="2" />
 						<circle cx="12" cy="12" r="3" />
 					</svg>
-					<span>{state.running ? 'Awaiting stream...' : 'No stream'}</span>
+					<span>{state.running ? AWAITING_STREAM_LABEL : NO_STREAM_LABEL}</span>
 				</div>
 			{/if}
 		</div>
@@ -347,15 +362,15 @@
 				<span class="dot green"></span>
 				<span class="terminal-label">
 					{#if isMulti}
-						{activeLane?.name ?? 'Runner'}
+						{activeLane?.name ?? RUNNER_LABEL}
 					{:else}
-						{state.running ? 'Running…' : 'Finished'}
+						{state.running ? RUNNING_LABEL : FINISHED_LABEL}
 					{/if}
 				</span>
 			</div>
 			{#if isMulti}
 				<pre class="terminal" bind:this={laneTerminalEl}>{activeLane?.logs ||
-						'(waiting for output…)'}</pre>
+						WAITING_FOR_OUTPUT}</pre>
 			{:else}
 				<pre class="terminal" bind:this={terminalEl}>{state.output}</pre>
 			{/if}