From affca89e3a138517e412f19e7b9076db0bfc071a Mon Sep 17 00:00:00 2001
From: David Dal Busco <david.dalbusco@outlook.com>
Date: Thu, 23 Apr 2026 18:40:48 +0200
Subject: [PATCH] feat(frontend): top-up, stop and start ufo

---
 .../src/lib/components/icons/IconUfo.svelte   |  2 +-
 .../src/lib/components/modals/Modals.svelte   |  5 +++
 .../modals/cycles/top-up/UfoTopUpModal.svelte | 45 +++++++++++++++++++
 .../canister/lifecycle/CanisterStart.svelte   |  2 +-
 .../canister/lifecycle/CanisterStop.svelte    |  2 +-
 .../lifecycle/CanisterStopStart.svelte        |  2 +-
 .../modules/canister/top-up/TopUp.svelte      |  6 +--
 .../ufos/overview/UfoOverview.svelte          |  3 +-
 .../ufos/overview/UfoOverviewActions.svelte   |  2 +-
 .../ufos/overview/UfoRuntimeActions.svelte    | 36 +++++++++++++++
 src/frontend/src/lib/i18n/en.json             |  1 +
 src/frontend/src/lib/i18n/zh-cn.json          |  1 +
 src/frontend/src/lib/types/i18n.d.ts          |  1 +
 src/frontend/src/lib/types/modal.ts           |  7 +++
 14 files changed, 106 insertions(+), 9 deletions(-)
 create mode 100644 src/frontend/src/lib/components/modals/cycles/top-up/UfoTopUpModal.svelte
 create mode 100644 src/frontend/src/lib/components/ufos/overview/UfoRuntimeActions.svelte

diff --git a/src/frontend/src/lib/components/icons/IconUfo.svelte b/src/frontend/src/lib/components/icons/IconUfo.svelte
index 3698dc8d18..3637922ab0 100644
--- a/src/frontend/src/lib/components/icons/IconUfo.svelte
+++ b/src/frontend/src/lib/components/icons/IconUfo.svelte
@@ -22,7 +22,7 @@
 		d="M303.091 78.884c80.693 0 152.794 81.242 152.794 143.757s-70.254-1.555-147.941-.607c-75.14.916-149.762 63.79-149.762 1.275S222.399 78.884 303.091 78.884"
 		transform="translate(14 10)"
 	/><path
-		fill="currentColor"
 		d="M320 344c-13.166 0-24 10.834-24 24s10.834 24 24 24 24-10.834 24-24-10.834-24-24-24m-192-48c-13.166 0-24 10.834-24 24s10.834 24 24 24 24-10.834 24-24-10.834-24-24-24m384 0c-13.166 0-24 10.834-24 24s10.834 24 24 24 24-10.834 24-24-10.834-24-24-24m-21.004-83.799C479.43 128.637 407.26 64 320 64s-159.43 64.637-170.996 148.201C59.721 234.904 0 274.547 0 320c0 70.691 143.27 128 320 128s320-57.309 320-128c0-45.453-59.721-85.096-149.004-107.799M320 96c77.762 0 140.801 62.516 140.801 139.637 0 6.269-1.053 12.256-1.862 18.306A299.65 299.65 0 0 1 320 288a299.65 299.65 0 0 1-138.939-34.057c-.809-6.05-1.862-12.037-1.862-18.306C179.199 158.516 242.238 96 320 96m0 320c-175.807 0-288-56.857-288-96 0-24.01 42.82-54.469 116.059-74.59.543 5.31.126 4.442 1.283 12.772a32.02 32.02 0 0 0 16.926 24.136A333.95 333.95 0 0 0 320 320a333.95 333.95 0 0 0 153.732-37.682 32.02 32.02 0 0 0 16.926-24.136c1.155-8.315.741-7.466 1.283-12.774C565.18 265.529 608 295.99 608 320c0 39.143-112.193 96-288 96"
+		fill="currentColor"
 	/></svg
 >
diff --git a/src/frontend/src/lib/components/modals/Modals.svelte b/src/frontend/src/lib/components/modals/Modals.svelte
index fff7e8e607..7936204d4f 100644
--- a/src/frontend/src/lib/components/modals/Modals.svelte
+++ b/src/frontend/src/lib/components/modals/Modals.svelte
@@ -10,6 +10,7 @@
 	import MissionControlTopUpModal from '$lib/components/modals/cycles/top-up/MissionControlTopUpModal.svelte';
 	import OrbiterTopUpModal from '$lib/components/modals/cycles/top-up/OrbiterTopUpModal.svelte';
 	import SatelliteTopUpModal from '$lib/components/modals/cycles/top-up/SatelliteTopUpModal.svelte';
+	import UfoTopUpModal from '$lib/components/modals/cycles/top-up/UfoTopUpModal.svelte';
 	import MissionControlTransferCyclesModal from '$lib/components/modals/cycles/transfer/MissionControlTransferCyclesModal.svelte';
 	import OrbiterTransferCyclesModal from '$lib/components/modals/cycles/transfer/OrbiterTransferCyclesModal.svelte';
 	import SatelliteTransferCyclesModal from '$lib/components/modals/cycles/transfer/SatelliteTransferCyclesModal.svelte';
@@ -72,6 +73,10 @@
 	<OrbiterTopUpModal onclose={close} />
 {/if}
 
+{#if modal?.type === 'topup_ufo' && nonNullish(modal.detail)}
+	<UfoTopUpModal detail={modal.detail} onclose={close} />
+{/if}
+
 {#if modal?.type === 'add_custom_domain' && nonNullish(modal.detail)}
 	<CustomDomainModal detail={modal.detail} onclose={close} />
 {/if}
diff --git a/src/frontend/src/lib/components/modals/cycles/top-up/UfoTopUpModal.svelte b/src/frontend/src/lib/components/modals/cycles/top-up/UfoTopUpModal.svelte
new file mode 100644
index 0000000000..4390469328
--- /dev/null
+++ b/src/frontend/src/lib/components/modals/cycles/top-up/UfoTopUpModal.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+	import IconUfo from '$lib/components/icons/IconUfo.svelte';
+	import CanisterTopUpModal from '$lib/components/modals/cycles/top-up/CanisterTopUpModal.svelte';
+	import Html from '$lib/components/ui/Html.svelte';
+	import { i18n } from '$lib/stores/app/i18n.store';
+	import type { JunoModalDetail, JunoModalTopUpUfoDetail } from '$lib/types/modal';
+	import { i18nFormat } from '$lib/utils/i18n.utils';
+	import { metadataUiName } from '$lib/utils/metadata-ui.utils';
+
+	interface Props {
+		detail: JunoModalDetail;
+		onclose: () => void;
+	}
+
+	let { detail, onclose }: Props = $props();
+
+	let { ufo } = $derived(detail as JunoModalTopUpUfoDetail);
+</script>
+
+<CanisterTopUpModal
+	{onclose}
+	segment={{
+		segment: 'ufo',
+		canisterId: ufo.ufo_id.toText(),
+		label: metadataUiName(ufo)
+	}}
+>
+	{#snippet intro()}
+		<h2>
+			<Html
+				text={i18nFormat($i18n.canisters.top_up_title, [
+					{
+						placeholder: '{0}',
+						value: metadataUiName(ufo)
+					}
+				])}
+			/>
+		</h2>
+	{/snippet}
+
+	{#snippet outro()}
+		<IconUfo />
+		<p>{$i18n.canisters.top_up_ufo_done}</p>
+	{/snippet}
+</CanisterTopUpModal>
diff --git a/src/frontend/src/lib/components/modules/canister/lifecycle/CanisterStart.svelte b/src/frontend/src/lib/components/modules/canister/lifecycle/CanisterStart.svelte
index be9d4916a2..5ac7edcf9b 100644
--- a/src/frontend/src/lib/components/modules/canister/lifecycle/CanisterStart.svelte
+++ b/src/frontend/src/lib/components/modules/canister/lifecycle/CanisterStart.svelte
@@ -17,7 +17,7 @@
 
 	interface Props {
 		canister: CanisterSyncData;
-		segment: 'satellite' | 'orbiter';
+		segment: 'satellite' | 'orbiter' | 'ufo';
 		onstart: () => void;
 	}
 
diff --git a/src/frontend/src/lib/components/modules/canister/lifecycle/CanisterStop.svelte b/src/frontend/src/lib/components/modules/canister/lifecycle/CanisterStop.svelte
index 7d7f17b6ee..5b94e78dd8 100644
--- a/src/frontend/src/lib/components/modules/canister/lifecycle/CanisterStop.svelte
+++ b/src/frontend/src/lib/components/modules/canister/lifecycle/CanisterStop.svelte
@@ -16,7 +16,7 @@
 	interface Props {
 		canister: CanisterSyncData;
 		monitoringEnabled: boolean;
-		segment: 'satellite' | 'orbiter';
+		segment: 'satellite' | 'orbiter' | 'ufo';
 		onstop: () => void;
 	}
 
diff --git a/src/frontend/src/lib/components/modules/canister/lifecycle/CanisterStopStart.svelte b/src/frontend/src/lib/components/modules/canister/lifecycle/CanisterStopStart.svelte
index ceb8c2756e..a4a90068c4 100644
--- a/src/frontend/src/lib/components/modules/canister/lifecycle/CanisterStopStart.svelte
+++ b/src/frontend/src/lib/components/modules/canister/lifecycle/CanisterStopStart.svelte
@@ -8,7 +8,7 @@
 	interface Props {
 		canister?: CanisterSyncData | undefined;
 		monitoringEnabled: boolean;
-		segment: 'satellite' | 'orbiter';
+		segment: 'satellite' | 'orbiter' | 'ufo';
 		onstart: () => void;
 		onstop: () => void;
 	}
diff --git a/src/frontend/src/lib/components/modules/canister/top-up/TopUp.svelte b/src/frontend/src/lib/components/modules/canister/top-up/TopUp.svelte
index 199fde5f8f..b091bba162 100644
--- a/src/frontend/src/lib/components/modules/canister/top-up/TopUp.svelte
+++ b/src/frontend/src/lib/components/modules/canister/top-up/TopUp.svelte
@@ -3,12 +3,12 @@
 	import { missionControlIdNotLoaded } from '$lib/derived/console/account.mission-control.derived';
 	import { i18n } from '$lib/stores/app/i18n.store';
 	import { toasts } from '$lib/stores/app/toasts.store';
-	import type { JunoModalWithSatellite } from '$lib/types/modal';
+	import type { JunoModalTopUpUfoDetail, JunoModalWithSatellite } from '$lib/types/modal';
 	import { emit } from '$lib/utils/events.utils';
 
 	interface Props {
-		type: 'topup_satellite' | 'topup_mission_control' | 'topup_orbiter';
-		detail?: JunoModalWithSatellite | undefined;
+		type: 'topup_satellite' | 'topup_mission_control' | 'topup_orbiter' | 'topup_ufo';
+		detail?: JunoModalWithSatellite | JunoModalTopUpUfoDetail | undefined;
 		onclose: () => void;
 	}
 
diff --git a/src/frontend/src/lib/components/ufos/overview/UfoOverview.svelte b/src/frontend/src/lib/components/ufos/overview/UfoOverview.svelte
index ce8d778df4..dcd05a3aec 100644
--- a/src/frontend/src/lib/components/ufos/overview/UfoOverview.svelte
+++ b/src/frontend/src/lib/components/ufos/overview/UfoOverview.svelte
@@ -7,6 +7,7 @@
 	import SegmentWithMetadataName from '$lib/components/modules/segments/SegmentWithMetadataName.svelte';
 	import SegmentWithMetadataTags from '$lib/components/modules/segments/SegmentWithMetadataTags.svelte';
 	import UfoOverviewActions from '$lib/components/ufos/overview/UfoOverviewActions.svelte';
+	import UfoRuntimeActions from '$lib/components/ufos/overview/UfoRuntimeActions.svelte';
 	import Identifier from '$lib/components/ui/Identifier.svelte';
 	import Value from '$lib/components/ui/Value.svelte';
 	import { i18n } from '$lib/stores/app/i18n.store';
@@ -69,7 +70,7 @@
 	</div>
 </div>
 
-TODO
+<UfoRuntimeActions {canister} {monitoringEnabled} {ufo} />
 
 <style lang="scss">
 	.id {
diff --git a/src/frontend/src/lib/components/ufos/overview/UfoOverviewActions.svelte b/src/frontend/src/lib/components/ufos/overview/UfoOverviewActions.svelte
index 358e75a489..27f7e381ff 100644
--- a/src/frontend/src/lib/components/ufos/overview/UfoOverviewActions.svelte
+++ b/src/frontend/src/lib/components/ufos/overview/UfoOverviewActions.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import DetachSegment from '$lib/components/modules/attach-detach/DetachSegment.svelte';
 	import SegmentActions from '$lib/components/modules/segments/SegmentActions.svelte';
 	import SegmentWithMetadataEditDetails from '$lib/components/modules/segments/SegmentWithMetadataEditDetails.svelte';
 	import {
@@ -7,7 +8,6 @@
 		setUfoMetadata
 	} from '$lib/services/metadata.services';
 	import type { Ufo } from '$lib/types/ufo';
-	import DetachSegment from '$lib/components/modules/attach-detach/DetachSegment.svelte';
 
 	interface Props {
 		ufo: Ufo;
diff --git a/src/frontend/src/lib/components/ufos/overview/UfoRuntimeActions.svelte b/src/frontend/src/lib/components/ufos/overview/UfoRuntimeActions.svelte
new file mode 100644
index 0000000000..e7d0c0fb2e
--- /dev/null
+++ b/src/frontend/src/lib/components/ufos/overview/UfoRuntimeActions.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import CanisterStopStart from '$lib/components/modules/canister/lifecycle/CanisterStopStart.svelte';
+	import TopUp from '$lib/components/modules/canister/top-up/TopUp.svelte';
+	import SegmentActions from '$lib/components/modules/segments/SegmentActions.svelte';
+	import type { CanisterSyncData as CanisterSyncDataType } from '$lib/types/canister';
+	import type { Ufo } from '$lib/types/ufo';
+
+	interface Props {
+		ufo: Ufo;
+		canister: CanisterSyncDataType | undefined;
+		monitoringEnabled: boolean;
+	}
+
+	let { ufo, canister, monitoringEnabled }: Props = $props();
+
+	let detail = $derived({ ufo });
+
+	let visible: boolean = $state(false);
+	const close = () => (visible = false);
+</script>
+
+<SegmentActions bind:visible>
+	{#snippet mainActions()}
+		<TopUp {detail} onclose={close} type="topup_ufo" />
+	{/snippet}
+
+	{#snippet lifecycleActions()}
+		<CanisterStopStart
+			{canister}
+			{monitoringEnabled}
+			onstart={close}
+			onstop={close}
+			segment="ufo"
+		/>
+	{/snippet}
+</SegmentActions>
diff --git a/src/frontend/src/lib/i18n/en.json b/src/frontend/src/lib/i18n/en.json
index 2fbfc6553a..fd93a7752b 100644
--- a/src/frontend/src/lib/i18n/en.json
+++ b/src/frontend/src/lib/i18n/en.json
@@ -161,6 +161,7 @@
 		"top_up_mission_control_done": "Your Mission Control center has been topped-up.",
 		"top_up_satellite_done": "Your Satellite has been topped-up.",
 		"top_up_orbiter_done": "Your Orbiter has been topped-up.",
+		"top_up_ufo_done": "Your UFO has been topped-up.",
 		"daily_consumption": "Daily Idle Consumption",
 		"queries": "Queries",
 		"calls": "calls",
diff --git a/src/frontend/src/lib/i18n/zh-cn.json b/src/frontend/src/lib/i18n/zh-cn.json
index d3a2e17c3e..0cfa3f412a 100644
--- a/src/frontend/src/lib/i18n/zh-cn.json
+++ b/src/frontend/src/lib/i18n/zh-cn.json
@@ -162,6 +162,7 @@
 		"top_up_mission_control_done": "您的任务控制中心已充值。",
 		"top_up_satellite_done": "您的卫星已充值。",
 		"top_up_orbiter_done": "您的轨道器已充值。",
+		"top_up_ufo_done": "您的 UFO 已完成充值。",
 		"daily_consumption": "每日闲置消耗",
 		"queries": "查询",
 		"calls": "调用",
diff --git a/src/frontend/src/lib/types/i18n.d.ts b/src/frontend/src/lib/types/i18n.d.ts
index 04288fdd3c..141146f5cc 100644
--- a/src/frontend/src/lib/types/i18n.d.ts
+++ b/src/frontend/src/lib/types/i18n.d.ts
@@ -165,6 +165,7 @@ interface I18nCanisters {
 	top_up_mission_control_done: string;
 	top_up_satellite_done: string;
 	top_up_orbiter_done: string;
+	top_up_ufo_done: string;
 	daily_consumption: string;
 	queries: string;
 	calls: string;
diff --git a/src/frontend/src/lib/types/modal.ts b/src/frontend/src/lib/types/modal.ts
index 589dd7fc30..ae427bdf97 100644
--- a/src/frontend/src/lib/types/modal.ts
+++ b/src/frontend/src/lib/types/modal.ts
@@ -7,6 +7,7 @@ import type { MissionControlId } from '$lib/types/mission-control';
 import type { OrbiterSatelliteConfigEntry } from '$lib/types/orbiter';
 import type { ProposalRecord } from '$lib/types/proposals';
 import type { Satellite, SatelliteIdText } from '$lib/types/satellite';
+import type { Ufo } from '$lib/types/ufo';
 import type { User as UserListed } from '$lib/types/user';
 import type { UserUsageCollection } from '$lib/types/user-usage';
 import type { Nullish } from '@dfinity/zod-schemas';
@@ -19,6 +20,10 @@ export interface JunoModalWithSatellite {
 
 export type JunoModalTopUpSatelliteDetail = JunoModalWithSatellite;
 
+export interface JunoModalTopUpUfoDetail {
+	ufo: Ufo;
+}
+
 export interface JunoModalTopUpMissionControlDetail {}
 
 export interface JunoModalTopUpOrbiterDetail {}
@@ -142,6 +147,7 @@ export type JunoModalDetail =
 	| JunoModalUpgradeDetail
 	| JunoModalShowMonitoringDetail
 	| JunoModalTopUpSatelliteDetail
+	| JunoModalTopUpUfoDetail
 	| JunoModalTopUpMissionControlDetail
 	| JunoModalCreateSegmentDetail
 	| JunoModalCustomDomainDetail
@@ -173,6 +179,7 @@ export interface JunoModal<T extends JunoModalDetail> {
 		| 'topup_satellite'
 		| 'topup_mission_control'
 		| 'topup_orbiter'
+		| 'topup_ufo'
 		| 'add_custom_domain'
 		| 'restore_snapshot'
 		| 'create_snapshot'