Hide strategy errors for non-admins

src/lib/explorer/TradingDescription.svelte

@@ -7,7 +7,7 @@ primary label, a modifier (shown in lighter text), and a testing indicator
 Used in DataTable context (vs. standard svelte component context).
 
 #### Usage:
-```ts
+```tsx
 	table.column({
 		header: 'Position',
 		id: 'description',

src/lib/trade-executor/components/StrategyError.svelte

@@ -0,0 +1,50 @@
+<!--
+@component
+Display an appropriate error message for a strategy when needed. There can be multiple failure modes for a trade executor
+ - No connection - the webhook server is down / Internet issue
+ - The trade executor has halted, the main loop aborted with an exception
+ - The trade executor is not halted, but there is capital tied at frozen positions that need manual intervention
+
+ #### Usage:
+ ```tsx
+   <StrategyStatus strategy={strategy} />
+ ```
+-->
+
+<script context="module" lang="ts">
+	import type { StrategyRuntimeState } from 'trade-executor/strategy/runtime-state';
+
+	export function adminOnlyError(strategy: StrategyRuntimeState) {
+		return strategy.connected && (!strategy.executor_running || strategy.frozen_positions > 0);
+	}
+
+	export function allUsersError(strategy: StrategyRuntimeState) {
+		return !strategy.connected;
+	}
+
+	export function shouldDisplayError(strategy: StrategyRuntimeState, admin = false) {
+		return allUsersError(strategy) || (admin && adminOnlyError(strategy));
+	}
+</script>
+
+<script lang="ts">
+	import { Timestamp } from '$lib/components';
+	export let strategy: StrategyRuntimeState;
+
+	const baseUrl = `/strategies/${strategy.id}`;
+</script>
+
+{#if !strategy.connected}
+	Trade executor offline. Cannot display the strategy statistics.
+{:else if !strategy.executor_running}
+	Strategy execution is currently paused due to an error. The trade execution engine is waiting for a manual action.
+	{#if strategy.crashed_at}
+		<Timestamp relative date={strategy.crashed_at} let:relative>
+			Strategy executor halted {relative}.
+		</Timestamp>
+	{/if}
+	<a href="{baseUrl}/tech-details/status"> See instance status page for more information </a>.
+{:else if strategy.frozen_positions > 0}
+	Strategy has currently frozen trading positions that require manual intervention.
+	<a href="{baseUrl}/frozen-positions">See frozen positions page for more information</a>.
+{/if}

src/lib/trade-executor/components/index.ts

@@ -1,3 +1,5 @@
 export { default as KeyMetric } from './KeyMetric.svelte';
 export { default as KeyMetricDescription } from './KeyMetricDescription.svelte';
 export { default as StrategyIcon } from './StrategyIcon.svelte';
+export { default as StrategyError } from './StrategyError.svelte';
+export * from './StrategyError.svelte';

src/routes/strategies/StrategyTile.svelte

@@ -5,13 +5,13 @@
 	import { utcDay } from 'd3-time';
 	import { normalizeDataForInterval } from '$lib/chart';
 	import { getChain } from '$lib/helpers/chain.js';
-	import { Button, DataBadge, EntitySymbol, Tooltip } from '$lib/components';
-	import { StrategyIcon } from 'trade-executor/components';
+	import { Button, DataBadge, Tooltip } from '$lib/components';
+	import { StrategyIcon, StrategyError, shouldDisplayError, adminOnlyError } from 'trade-executor/components';
 	import StrategyBadges from './StrategyBadges.svelte';
 	import ChartThumbnail from './ChartThumbnail.svelte';
 	import StrategyDataSummary from './StrategyDataSummary.svelte';
-	import { getTradeExecutorErrorHtml } from 'trade-executor/strategy/error';
 	import { getLogoUrl } from '$lib/helpers/assets';
+	import Alert from '$lib/components/Alert.svelte';
 
 	export let admin = false;
 	export let simplified = false;
@@ -21,7 +21,6 @@
 	const chain = getChain(strategy.on_chain_data?.chain_id);
 
 	const href = `/strategies/${strategy.id}`;
-	const errorHtml = getTradeExecutorErrorHtml(strategy);
 
 	const chartData = normalizeDataForInterval(
 		strategy.summary_statistics?.compounding_unrealised_trading_profitability ?? [],
@@ -53,10 +52,17 @@
 
 			{#if !simplified}
 				<div class="badges">
-					{#if errorHtml}
+					{#if shouldDisplayError(strategy, admin)}
 						<Tooltip>
 							<DataBadge slot="trigger" status="error">Error</DataBadge>
-							<svelte:fragment slot="popup">{@html errorHtml}</svelte:fragment>
+							<svelte:fragment slot="popup">
+								{#if adminOnlyError(strategy)}
+									<p>
+										<Alert size="xs" status="info" title="Note">This error is only displayed to admin users.</Alert>
+									</p>
+								{/if}
+								<StrategyError {strategy} />
+							</svelte:fragment>
 						</Tooltip>
 					{/if}
 

src/routes/strategies/[strategy]/+layout.svelte

@@ -2,19 +2,18 @@
 	import { page } from '$app/stores';
 	import Breadcrumbs from '$lib/breadcrumb/Breadcrumbs.svelte';
 	import { AlertList, PageHeading } from '$lib/components';
-	import { StrategyIcon } from 'trade-executor/components';
+	import { StrategyIcon, StrategyError, shouldDisplayError, adminOnlyError } from 'trade-executor/components';
 	import { menuOptions, default as StrategyNav } from './StrategyNav.svelte';
 	import StrategyBadges from '../StrategyBadges.svelte';
 	import { WalletWidget } from '$lib/wallet';
-	import { getTradeExecutorErrorHtml } from 'trade-executor/strategy/error';
 
 	export let data;
 
-	$: ({ strategy, deferred } = data);
+	$: ({ admin, strategy, deferred } = data);
 
 	$: isOverviewPage = $page.url.pathname.endsWith(strategy.id);
 
-	$: errorHtml = getTradeExecutorErrorHtml(strategy);
+	$: hasStrategyError = shouldDisplayError(strategy, admin);
 
 	$: isOutdated = Boolean(strategy.new_version_id);
 
@@ -42,7 +41,7 @@
 			</div>
 		</PageHeading>
 
-		{#if isOverviewPage && (errorHtml || isOutdated)}
+		{#if isOverviewPage && (hasStrategyError || isOutdated)}
 			<div class="error-wrapper">
 				<AlertList status="warning" size="md" let:AlertItem>
 					<AlertItem title="Outdated strategy" displayWhen={isOutdated}>
@@ -51,8 +50,11 @@
 						participants should consider tranfering deposits to the latest version (though there is no guarantee of
 						better performance).
 					</AlertItem>
-					<AlertItem title="Ongoing execution issues" displayWhen={errorHtml}>
-						{@html errorHtml}
+					<AlertItem title="Ongoing execution issues" displayWhen={hasStrategyError}>
+						<StrategyError {strategy} />
+						{#if adminOnlyError(strategy)}
+							<p class="admin-error"><strong>Note:</strong> this error is only displayed to admin users.</p>
+						{/if}
 					</AlertItem>
 				</AlertList>
 			</div>
@@ -82,6 +84,11 @@
 			transform: translate(0, -0.375em);
 		}
 
+		.admin-error {
+			margin-top: 1rem;
+			opacity: 0.5;
+		}
+
 		.subpage {
 			display: grid;
 			gap: var(--space-ls);