plum-e2e 2.9.17 → 2.12.0

package/frontend/src/lib/components/reports/RecordingPlayer.svelte

@@ -10,6 +10,10 @@
 	import { fetchRecordingEvents } from '$lib/api/reports';
 	import { computeRecordingSegments } from '$lib/utils/format';
 	import { describeElement } from '$lib/utils/inspectElement';
+	import { captureReplayFrame } from '$lib/utils/replayCapture';
+	import { downloadBlob } from '$lib/utils/download';
+	import { notify } from '$lib/stores/notifications';
+	import { startReplayVideo, replayVideoJob, cancelReplayVideo } from '$lib/stores/replayVideo';
 	import StepsRail from './StepsRail.svelte';
 	import MultiTabTimeline from './MultiTabTimeline.svelte';
 	import ElementInspector from './ElementInspector.svelte';
@@ -17,12 +21,21 @@
 		PLAYER_LOAD_ERROR,
 		INSPECT_TOGGLE_LABEL,
 		RESTART_LABEL,
-		recordingTabLabel
+		recordingTabLabel,
+		REPLAY_DOWNLOAD_LABEL,
+		SCREENSHOT_LABEL,
+		SCREENSHOT_HINT,
+		RECORD_VIDEO_LABEL,
+		RECORD_VIDEO_HINT,
+		SCREENSHOT_SAVED_TOAST,
+		SCREENSHOT_FAILED_TOAST,
+		VIDEO_MULTITAB_UNSUPPORTED
 	} from '$lib/copy/reports';
 
 	export let reportId;
 	export let recordings = [];
 	export let steps = [];
+	export let scenarioName = '';
 	export let inspecting = false;
 
 	const MIN_PLAYER_WIDTH = 480;
@@ -285,8 +298,59 @@
 		}
 	}
 
+	let shotBusy = false;
+	let downloadMenuOpen = false;
+	$: videoRendering = $replayVideoJob?.status === 'rendering';
+
+	function fileSlug() {
+		return `report-${reportId}${scenarioName ? '-' + scenarioName : ''}`
+			.replace(/[^a-z0-9]+/gi, '-')
+			.replace(/^-+|-+$/g, '')
+			.toLowerCase();
+	}
+
+	async function handleScreenshot() {
+		downloadMenuOpen = false;
+		if (shotBusy) return;
+		shotBusy = true;
+		try {
+			const blob = await captureReplayFrame(currentReplayer());
+			const step = currentStepIndex >= 0 ? `-step-${currentStepIndex + 1}` : '';
+			downloadBlob(blob, `${fileSlug()}${step}.png`);
+			notify('success', SCREENSHOT_SAVED_TOAST);
+		} catch {
+			notify('error', SCREENSHOT_FAILED_TOAST);
+		} finally {
+			shotBusy = false;
+		}
+	}
+
+	async function handleRecordVideo() {
+		downloadMenuOpen = false;
+		if ($replayVideoJob?.status === 'rendering') return;
+		if (segments.length > 1) {
+			notify('error', VIDEO_MULTITAB_UNSUPPORTED);
+			return;
+		}
+		const replayer = currentReplayer();
+		if (!replayer) return;
+		const evs = eventsByRecordingId.get(segments[0]?.recordingId) ?? [];
+		const durationMs = evs.length > 1 ? evs[evs.length - 1].timestamp - evs[0].timestamp : 0;
+		const resume = currentPlaybackState();
+		await startReplayVideo({
+			replayer,
+			durationMs,
+			filename: `${fileSlug()}-replay.webm`
+		});
+		buildPlayer(resume);
+	}
+
 	// Escape exits inspect mode first — the parent's handler checks `inspecting` (bound) before closing.
 	function handleWindowKeydown(e) {
+		if (e.key === 'Escape' && downloadMenuOpen) {
+			downloadMenuOpen = false;
+			return;
+		}
 		if (e.key === 'Escape' && inspecting) {
 			toggleInspect();
 			return;
@@ -297,6 +361,10 @@
 		}
 	}
 
+	function handleWindowClick(e) {
+		if (downloadMenuOpen && !e.target.closest('.download-fab-wrap')) downloadMenuOpen = false;
+	}
+
 	let finished = false;
 	let restartBoxStyle = '';
 
@@ -559,12 +627,13 @@
 
 	onDestroy(() => {
 		if (livePositionRaf !== null) cancelAnimationFrame(livePositionRaf);
+		if ($replayVideoJob?.status === 'rendering') cancelReplayVideo();
 		stopInspectWatch();
 		destroyPlayer();
 	});
 </script>
 
-<svelte:window on:keydown={handleWindowKeydown} />
+<svelte:window on:keydown={handleWindowKeydown} on:click={handleWindowClick} />
 
 <div class="recording-player">
 	{#if steps.length > 0}
@@ -648,6 +717,56 @@
 				<path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z" />
 			</svg>
 		</button>
+
+		<div class="download-fab-wrap">
+			<button
+				class="inspect-fab"
+				class:inspect-fab-active={downloadMenuOpen}
+				on:click={() => (downloadMenuOpen = !downloadMenuOpen)}
+				disabled={loading || loadError}
+				title={REPLAY_DOWNLOAD_LABEL}
+				aria-label={REPLAY_DOWNLOAD_LABEL}
+				aria-haspopup="menu"
+				aria-expanded={downloadMenuOpen}
+			>
+				<svg
+					width="14"
+					height="14"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
+					<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+					<polyline points="7 10 12 15 17 10" />
+					<line x1="12" y1="15" x2="12" y2="3" />
+				</svg>
+			</button>
+			{#if downloadMenuOpen}
+				<div class="download-menu" role="menu">
+					<button
+						class="download-item"
+						role="menuitem"
+						on:click={handleScreenshot}
+						disabled={shotBusy}
+					>
+						<span class="di-label">{SCREENSHOT_LABEL}</span>
+						<span class="di-hint">{SCREENSHOT_HINT}</span>
+					</button>
+					<button
+						class="download-item"
+						role="menuitem"
+						on:click={handleRecordVideo}
+						disabled={videoRendering}
+					>
+						<span class="di-label">{RECORD_VIDEO_LABEL}</span>
+						<span class="di-hint">{RECORD_VIDEO_HINT}</span>
+					</button>
+				</div>
+			{/if}
+		</div>
 	</div>
 
 	{#if inspecting}
@@ -819,4 +938,55 @@
 		background: var(--accent);
 		opacity: 1;
 	}
+
+	.download-fab-wrap {
+		position: absolute;
+		top: 3.4rem;
+		right: 0.75rem;
+	}
+	.download-fab-wrap .inspect-fab {
+		position: static;
+	}
+
+	.download-menu {
+		position: absolute;
+		top: 0;
+		right: calc(100% + 8px);
+		min-width: 11rem;
+		padding: 0.3rem;
+		background: var(--bg-elevated);
+		border: 1px solid var(--border);
+		border-radius: var(--radius-md);
+		box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
+		display: flex;
+		flex-direction: column;
+		gap: 1px;
+	}
+	.download-item {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 0.1rem;
+		padding: 0.45rem 0.6rem;
+		background: transparent;
+		border: none;
+		border-radius: var(--radius-sm);
+		cursor: pointer;
+		text-align: left;
+	}
+	.download-item:hover:not(:disabled) {
+		background: var(--bg-subtle);
+	}
+	.download-item:disabled {
+		opacity: 0.5;
+		cursor: default;
+	}
+	.di-label {
+		font-size: 0.82rem;
+		color: var(--text);
+	}
+	.di-hint {
+		font-size: 0.7rem;
+		color: var(--text-muted);
+	}
 </style>

package/frontend/src/lib/components/ui/ExportMenu.svelte

@@ -0,0 +1,154 @@
+<!--
+ * This file is part of Plum.
+ * Licensed under the MIT License. See LICENSE file in the project root for details.
+ -->
+
+<script>
+	import { createEventDispatcher } from 'svelte';
+	import { EXPORT_LABEL, EXPORT_MENU_ITEMS } from '$lib/copy/common';
+
+	export let label = EXPORT_LABEL;
+	export let items = EXPORT_MENU_ITEMS;
+	export let busy = false;
+	export let disabled = false;
+	export let align = 'right';
+
+	const dispatch = createEventDispatcher();
+	let open = false;
+	let root;
+
+	function toggle() {
+		if (!disabled && !busy) open = !open;
+	}
+
+	function pick(id) {
+		open = false;
+		dispatch('select', id);
+	}
+
+	function onWindowClick(e) {
+		if (open && root && !root.contains(e.target)) open = false;
+	}
+</script>
+
+<svelte:window on:click={onWindowClick} on:keydown={(e) => e.key === 'Escape' && (open = false)} />
+
+<div class="export-menu" bind:this={root}>
+	<button
+		type="button"
+		class="trigger"
+		class:open
+		{disabled}
+		aria-haspopup="menu"
+		aria-expanded={open}
+		on:click={toggle}
+	>
+		<svg
+			width="14"
+			height="14"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		>
+			<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+			<polyline points="7 10 12 15 17 10" />
+			<line x1="12" y1="15" x2="12" y2="3" />
+		</svg>
+		<span>{busy ? '…' : label}</span>
+	</button>
+
+	{#if open}
+		<div class="popover" class:left={align === 'left'} role="menu">
+			{#each items as item (item.id)}
+				<button type="button" class="item" role="menuitem" on:click={() => pick(item.id)}>
+					<span class="item-label">{item.label}</span>
+					{#if item.hint}<span class="item-hint">{item.hint}</span>{/if}
+				</button>
+			{/each}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.export-menu {
+		position: relative;
+		display: inline-flex;
+	}
+
+	.trigger {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.4rem;
+		font-family: var(--font-body);
+		font-size: 0.875rem;
+		padding: 0.55rem 1rem;
+		background: transparent;
+		color: var(--text-muted);
+		border: 1px solid var(--border);
+		border-radius: var(--radius-md);
+		cursor: pointer;
+		white-space: nowrap;
+		transition:
+			background var(--duration-fast) var(--ease-out),
+			color var(--duration-fast) var(--ease-out),
+			border-color var(--duration-fast) var(--ease-out);
+	}
+	.trigger:hover:not(:disabled),
+	.trigger.open {
+		background: var(--bg-subtle);
+		color: var(--text);
+		border-color: var(--text-muted);
+	}
+	.trigger:disabled {
+		opacity: 0.38;
+		cursor: not-allowed;
+	}
+
+	.popover {
+		position: absolute;
+		top: calc(100% + 6px);
+		right: 0;
+		min-width: 12rem;
+		padding: 0.3rem;
+		background: var(--bg-elevated);
+		border: 1px solid var(--border);
+		border-radius: var(--radius-md);
+		box-shadow: 0 8px 28px rgba(0, 0, 0, 0.13);
+		z-index: 50;
+		display: flex;
+		flex-direction: column;
+		gap: 1px;
+	}
+	.popover.left {
+		right: auto;
+		left: 0;
+	}
+
+	.item {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 0.1rem;
+		width: 100%;
+		padding: 0.5rem 0.65rem;
+		background: transparent;
+		border: none;
+		border-radius: var(--radius-sm);
+		cursor: pointer;
+		text-align: left;
+	}
+	.item:hover {
+		background: var(--bg-subtle);
+	}
+	.item-label {
+		font-size: 0.85rem;
+		color: var(--text);
+	}
+	.item-hint {
+		font-size: 0.72rem;
+		color: var(--text-muted);
+	}
+</style>

package/frontend/src/lib/components/ui/NotificationStack.svelte

@@ -0,0 +1,177 @@
+<!--
+ * This file is part of Plum.
+ * Licensed under the MIT License. See LICENSE file in the project root for details.
+ -->
+
+<script>
+	import { fly } from 'svelte/transition';
+	import { flip } from 'svelte/animate';
+	import { notifications, dismissNotification } from '$lib/stores/notifications';
+	import { replayVideoJob, cancelReplayVideo, dismissReplayVideo } from '$lib/stores/replayVideo';
+	import { CANCEL_LABEL } from '$lib/copy/common';
+	import {
+		DISMISS_LABEL,
+		VIDEO_TASK_RENDERING,
+		VIDEO_TASK_DONE,
+		VIDEO_TASK_FAILED,
+		VIDEO_TASK_EXPERIMENTAL
+	} from '$lib/copy/reports';
+
+	$: job = $replayVideoJob;
+	$: pct = Math.round((job?.progress ?? 0) * 100);
+</script>
+
+<div class="stack">
+	{#if job}
+		<div class="card" transition:fly={{ y: 12, duration: 200 }}>
+			{#if job.status === 'rendering'}
+				<div class="row">
+					<span class="spinner" aria-hidden="true"></span>
+					<span class="msg">{VIDEO_TASK_RENDERING} {pct}%</span>
+					<button class="link text" on:click={cancelReplayVideo}>{CANCEL_LABEL}</button>
+				</div>
+				<div class="bar"><span class="fill" style="width:{pct}%"></span></div>
+				<p class="sub">{VIDEO_TASK_EXPERIMENTAL}</p>
+			{:else if job.status === 'done'}
+				<div class="row">
+					<span class="dot success"></span>
+					<span class="msg">{VIDEO_TASK_DONE}</span>
+				</div>
+			{:else}
+				<div class="row">
+					<span class="dot error"></span>
+					<span class="msg">{VIDEO_TASK_FAILED}</span>
+					<button class="link text" on:click={dismissReplayVideo}>{DISMISS_LABEL}</button>
+				</div>
+				{#if job.error}<p class="sub">{job.error}</p>{/if}
+			{/if}
+		</div>
+	{/if}
+
+	{#each $notifications as n (n.id)}
+		<div class="card" animate:flip={{ duration: 180 }} transition:fly={{ y: 12, duration: 200 }}>
+			<div class="row">
+				<span class="dot {n.type}"></span>
+				<span class="msg">{n.message}</span>
+				<button class="link" on:click={() => dismissNotification(n.id)} aria-label={DISMISS_LABEL}>
+					<svg width="12" height="12" viewBox="0 0 14 14" fill="none">
+						<path
+							d="M1 1l12 12M13 1L1 13"
+							stroke="currentColor"
+							stroke-width="1.6"
+							stroke-linecap="round"
+						/>
+					</svg>
+				</button>
+			</div>
+		</div>
+	{/each}
+</div>
+
+<style>
+	.stack {
+		position: fixed;
+		right: 1rem;
+		bottom: 3.25rem;
+		/* Above the replay modal (500) so feedback stays visible over it. */
+		z-index: 600;
+		display: flex;
+		flex-direction: column-reverse;
+		gap: 0.5rem;
+		max-width: min(20rem, calc(100vw - 2rem));
+		pointer-events: none;
+	}
+
+	.card {
+		pointer-events: auto;
+		padding: 0.7rem 0.85rem;
+		background: var(--bg-elevated);
+		border: 1px solid var(--border);
+		border-radius: var(--radius-md);
+		box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
+		font-size: 0.82rem;
+	}
+
+	.row {
+		display: flex;
+		align-items: center;
+		gap: 0.55rem;
+	}
+	.msg {
+		flex: 1;
+		color: var(--text);
+		line-height: 1.35;
+	}
+	.sub {
+		margin-top: 0.4rem;
+		color: var(--text-muted);
+		font-size: 0.72rem;
+	}
+
+	.dot {
+		width: 7px;
+		height: 7px;
+		border-radius: 50%;
+		flex-shrink: 0;
+		background: var(--text-muted);
+	}
+	.dot.success {
+		background: var(--pass);
+	}
+	.dot.error {
+		background: var(--fail);
+	}
+	.dot.info {
+		background: var(--accent);
+	}
+
+	.link {
+		display: inline-flex;
+		align-items: center;
+		background: none;
+		border: none;
+		color: var(--text-muted);
+		cursor: pointer;
+		padding: 0;
+		flex-shrink: 0;
+	}
+	.link.text {
+		font-size: 0.75rem;
+	}
+	.link:hover {
+		color: var(--accent);
+	}
+
+	.bar {
+		margin-top: 0.55rem;
+		height: 4px;
+		border-radius: var(--radius-pill);
+		background: var(--bg-subtle);
+		overflow: hidden;
+	}
+	.fill {
+		display: block;
+		height: 100%;
+		background: var(--accent);
+		transition: width 0.2s var(--ease-out);
+	}
+	.spinner {
+		width: 12px;
+		height: 12px;
+		flex-shrink: 0;
+		border: 2px solid var(--border);
+		border-top-color: var(--accent);
+		border-radius: 50%;
+		animation: spin 0.7s linear infinite;
+	}
+	@keyframes spin {
+		to {
+			transform: rotate(360deg);
+		}
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.spinner {
+			animation-duration: 2s;
+		}
+	}
+</style>

package/frontend/src/lib/constants.js

@@ -25,7 +25,7 @@ export const REPO_PAGE_SIZE = 20;
 export const SUITE_CASES_PER_PAGE = 20;
 
 export const COPY_TIMEOUT_MS = 1400;
-export const TOAST_TIMEOUT_MS = 4000;
+export const TOAST_TIMEOUT_MS = 8000;
 
 export const REDIRECT_DELAY_MS = 3000;
 

package/frontend/src/lib/copy/common.js

@@ -26,6 +26,15 @@ export const SLACK_LABEL = 'Slack';
 export const EMAIL_LABEL = 'Email';
 export const PASSWORD_LABEL = 'Password';
 
+export const EXPORT_LABEL = 'Export';
+export const EXPORTING_LABEL = 'Exporting…';
+export const EXPORT_MENU_ITEMS = [
+	{ id: 'csv', label: 'CSV', hint: 'Download report' },
+	{ id: 'json', label: 'JSON', hint: 'Download JSON. Re-importable' }
+];
+export const exportFailedToast = (what) => `Could not export ${what}.`;
+export const exportedToast = (what) => `${what} exported.`;
+
 export const CLEAR_SEARCH_LABEL = 'Clear search';
 export const SORT_BY_LABEL = 'Sort by';
 export const LOADING_LABEL = 'Loading…';

package/frontend/src/lib/copy/reports.js

@@ -55,6 +55,26 @@ export const caseLabel = (index) => `Case ${index}`;
 // ── Recording replay ──
 export const PLAYER_LOAD_ERROR = 'Could not load this recording.';
 export const INSPECT_TOGGLE_LABEL = 'Inspect element';
+
+export const REPORT_EXPORT_MENU_ITEMS = [
+	{ id: 'csv', label: 'CSV', hint: 'Download report' },
+	{ id: 'json', label: 'JSON', hint: 'Structured summary' }
+];
+
+// ── Replay download (screenshot / video) ──
+export const REPLAY_DOWNLOAD_LABEL = 'Download';
+export const SCREENSHOT_LABEL = 'Screenshot';
+export const SCREENSHOT_HINT = 'PNG of the current frame';
+export const RECORD_VIDEO_LABEL = 'Record video';
+export const RECORD_VIDEO_HINT = 'WebM — experimental, stays in your browser';
+export const VIDEO_MULTITAB_UNSUPPORTED = 'Video export is only available for single-tab replays.';
+export const SCREENSHOT_SAVED_TOAST = 'Screenshot saved.';
+export const SCREENSHOT_FAILED_TOAST = 'Could not capture this frame.';
+export const VIDEO_TASK_RENDERING = 'Rendering replay video…';
+export const VIDEO_TASK_DONE = 'Replay video downloaded';
+export const VIDEO_TASK_FAILED = 'Replay video render failed';
+export const VIDEO_TASK_EXPERIMENTAL = 'Experimental — quality varies. Nothing is uploaded.';
+export const DISMISS_LABEL = 'Dismiss';
 export const RESTART_LABEL = 'Restart replay';
 export const STEPS_RAIL_HEADING = 'Steps';
 export const INSPECTOR_HEADING = 'Inspector';
@@ -91,3 +111,12 @@ export const runsInProgressHeading = (count) =>
 	count === 1 ? 'A run in progress' : `${count} runs in progress`;
 export const workersCountLabel = (count) => `${count} ${pluralize(count, 'worker')}`;
 export const redirectingIn = (seconds) => `Redirecting in ${seconds}s…`;
+
+// ── Queued / not-found run ──
+export const QUEUED_HEADING = 'Waiting for a runner';
+export const QUEUED_BODY = 'This run starts as soon as every runner it needs is free.';
+export const RUN_NOT_FOUND_HEADING = 'Run not found';
+export const RUN_NOT_FOUND_BODY =
+	'This run has finished or was never started. Check the reports list for its results.';
+export const RUN_SKIPPED_HEADING = 'Run skipped';
+export const queuePositionLine = (n) => (n > 0 ? `Position ${n} in the queue` : 'Next up');

package/frontend/src/lib/copy/repository.js

@@ -19,6 +19,10 @@ export const HEADING = 'Test Repository';
 export const HEADER_DESC = 'Manage test suites, cases, and track manual test runs.';
 export const NEW_SUITE_LABEL = '+ New Suite';
 export const NEW_RUN_LABEL = '+ New Run';
+export const IMPORT_TEST_CASES_LINK = 'Import from file';
+export const IMPORT_TEST_CASES_HREF = '/settings?section=testcases';
+export const EXPORT_TEST_CASES_WHAT = 'Test cases';
+export const EXPORT_SUITE_WHAT = 'Suite';
 export const SUITES_TAB_LABEL = 'Suites';
 export const RUNS_TAB_LABEL = 'Test Runs';
 export const SEARCH_PLACEHOLDER = 'Search by ID or name…';

package/frontend/src/lib/copy/runners.js

@@ -28,6 +28,8 @@ export const RUN_LABEL = 'Run';
 export const MANUAL_RUN_LABEL = 'Manual run';
 export const NO_TESTS_RUNNING = 'No tests currently running';
 export const LIVE_LABEL = 'Live';
+export const QUEUED_LABEL = 'Queued';
+export const CANCEL_RUN_LABEL = 'Cancel run';
 
 export const automatedCaseCount = (count) => `${count} automated`;
 export const discordNotifyTitle = (active) =>
@@ -38,13 +40,14 @@ export const runnersCountLabel = (count) => `${count} runners`;
 export const runKindLabel = (kind) => `${triggerLabel(kind)} run`;
 export const startedByLabel = (name) => `started by ${name}`;
 export const collapseOrExpandLabel = (expanded) => (expanded ? 'Collapse panel' : 'Expand panel');
+export const queuePositionLabel = (n) => (n > 0 ? `Queued · #${n}` : 'Queued');
 
-export function statusLabel(state, anyBgRunning, anyBgCronRunning) {
-	if (state.running) return 'Running';
-	if (state.status === 'pass') return 'Passed';
-	if (state.status === 'fail') return 'Failed';
-	if (anyBgCronRunning) return 'Scheduled';
-	if (anyBgRunning) return 'Running';
+export function statusLabel({ running, queued, verdict }) {
+	if (running > 0 && queued > 0) return `${running} running · ${queued} queued`;
+	if (running > 0) return running === 1 ? 'Running' : `${running} running`;
+	if (queued > 0) return queued === 1 ? 'Queued' : `${queued} queued`;
+	if (verdict === 'pass') return 'Passed';
+	if (verdict === 'fail') return 'Failed';
 	return 'Ready';
 }
 

package/frontend/src/lib/copy/settings.js

@@ -19,6 +19,21 @@ export const PROJECT_LABEL = 'Project';
 export const RUNNERS_LABEL = 'Runners';
 export const REPOSITORY_NAV_LABEL = 'Repository';
 export const REPOSITORY_HEADING = 'Test Repository';
+export const TEST_CASES_NAV_LABEL = 'Test Cases';
+export const TEST_CASES_HEADING = 'Test Cases';
+export const TEST_CASES_DESC = 'Bring test cases in from a Plum export file.';
+export const TC_IMPORT_CARD_TITLE = 'Import';
+export const TC_IMPORT_DESC =
+	'Upload a JSON file exported from Test Repository. Suites and cases are added as new records.';
+export const TC_IMPORT_HINT =
+	'A case is skipped when its ID already exists here. Cases with a different prefix or no ID are imported with a fresh ID.';
+export const TC_IMPORT_FAILED_FALLBACK = 'Could not read that file.';
+export const tcImportLabel = (importing) => (importing ? 'Importing…' : 'Import');
+export const tcImportSummary = ({ importedCases, importedSuites, skippedCases, skippedSuites }) => {
+	const imported = `Imported ${importedCases} ${importedCases === 1 ? 'case' : 'cases'} in ${importedSuites} ${importedSuites === 1 ? 'suite' : 'suites'}`;
+	const skipped = skippedCases + skippedSuites;
+	return skipped > 0 ? `${imported} · skipped ${skippedCases} already here` : imported + '.';
+};
 export const INTEGRATIONS_LABEL = 'Integrations';
 export const MCP_NAV_LABEL = 'MCP';
 export const MCP_HEADING = 'MCP Integration';