From 11cddac311cb4c9b19a4ff85412d1b1a4fc5d3bf Mon Sep 17 00:00:00 2001
From: David Dal Busco <david.dalbusco@outlook.com>
Date: Fri, 24 Apr 2026 17:19:38 +0200
Subject: [PATCH 1/2] feat(frontend): attach UFO

---
 .../src/lib/components/icons/IconLink.svelte  |  2 +-
 .../attach-detach/AttachActions.svelte        | 19 ---------
 .../attach-detach/AttachOrbiter.svelte        | 24 -----------
 .../attach-detach/AttachSatellite.svelte      | 24 -----------
 .../attach-detach/AttachSegment.svelte        | 42 +++++++++++++------
 .../modules/launchpad/LaunchpadToolbar.svelte |  4 +-
 .../src/lib/components/ui/Popover.svelte      |  2 +-
 src/frontend/src/lib/i18n/en.json             |  8 ++--
 src/frontend/src/lib/i18n/zh-cn.json          |  8 ++--
 .../services/attach-detach/attach.services.ts |  6 ++-
 src/frontend/src/lib/types/i18n.d.ts          |  6 +--
 11 files changed, 50 insertions(+), 95 deletions(-)
 delete mode 100644 src/frontend/src/lib/components/modules/attach-detach/AttachActions.svelte
 delete mode 100644 src/frontend/src/lib/components/modules/attach-detach/AttachOrbiter.svelte
 delete mode 100644 src/frontend/src/lib/components/modules/attach-detach/AttachSatellite.svelte

diff --git a/src/frontend/src/lib/components/icons/IconLink.svelte b/src/frontend/src/lib/components/icons/IconLink.svelte
index 216b1d334c..2f18c50962 100644
--- a/src/frontend/src/lib/components/icons/IconLink.svelte
+++ b/src/frontend/src/lib/components/icons/IconLink.svelte
@@ -4,7 +4,7 @@
 		size?: string;
 	}
 
-	let { size = '24px' }: Props = $props();
+	let { size = '20px' }: Props = $props();
 </script>
 
 <svg
diff --git a/src/frontend/src/lib/components/modules/attach-detach/AttachActions.svelte b/src/frontend/src/lib/components/modules/attach-detach/AttachActions.svelte
deleted file mode 100644
index 6511b97369..0000000000
--- a/src/frontend/src/lib/components/modules/attach-detach/AttachActions.svelte
+++ /dev/null
@@ -1,19 +0,0 @@
-<script lang="ts">
-	import Actions from '$lib/components/app/core/Actions.svelte';
-	import IconMore from '$lib/components/icons/IconMore.svelte';
-	import AttachOrbiter from '$lib/components/modules/attach-detach/AttachOrbiter.svelte';
-	import AttachSatellite from '$lib/components/modules/attach-detach/AttachSatellite.svelte';
-
-	let visible: boolean = $state(false);
-	const close = () => (visible = false);
-</script>
-
-<Actions direction="rtl" bind:visible>
-	{#snippet icon()}
-		<IconMore size="20px" />
-	{/snippet}
-
-	<AttachSatellite ondetach={close} />
-
-	<AttachOrbiter ondetach={close} />
-</Actions>
diff --git a/src/frontend/src/lib/components/modules/attach-detach/AttachOrbiter.svelte b/src/frontend/src/lib/components/modules/attach-detach/AttachOrbiter.svelte
deleted file mode 100644
index c7b85d46c8..0000000000
--- a/src/frontend/src/lib/components/modules/attach-detach/AttachOrbiter.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script lang="ts">
-	import IconLink from '$lib/components/icons/IconLink.svelte';
-	import AttachSegment from '$lib/components/modules/attach-detach/AttachSegment.svelte';
-	import { i18n } from '$lib/stores/app/i18n.store';
-
-	interface Props {
-		ondetach: () => void;
-	}
-
-	let { ondetach }: Props = $props();
-
-	let visible: boolean = $state(false);
-</script>
-
-<button class="menu" onclick={() => (visible = true)}><IconLink /> {$i18n.analytics.attach}</button>
-
-<AttachSegment onsuccess={ondetach} segment="orbiter" bind:visible>
-	{#snippet title()}
-		{$i18n.analytics.attach}
-	{/snippet}
-	{#snippet input()}
-		{$i18n.analytics.attach_id}
-	{/snippet}
-</AttachSegment>
diff --git a/src/frontend/src/lib/components/modules/attach-detach/AttachSatellite.svelte b/src/frontend/src/lib/components/modules/attach-detach/AttachSatellite.svelte
deleted file mode 100644
index a04eb28a66..0000000000
--- a/src/frontend/src/lib/components/modules/attach-detach/AttachSatellite.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script lang="ts">
-	import IconLink from '$lib/components/icons/IconLink.svelte';
-	import AttachSegment from '$lib/components/modules/attach-detach/AttachSegment.svelte';
-	import { i18n } from '$lib/stores/app/i18n.store';
-
-	interface Props {
-		ondetach: () => void;
-	}
-
-	let { ondetach }: Props = $props();
-
-	let visible = $state(false);
-</script>
-
-<button class="menu" onclick={() => (visible = true)}><IconLink /> {$i18n.launchpad.attach}</button>
-
-<AttachSegment onsuccess={ondetach} segment="satellite" bind:visible>
-	{#snippet title()}
-		{$i18n.launchpad.attach}
-	{/snippet}
-	{#snippet input()}
-		{$i18n.satellites.id}
-	{/snippet}
-</AttachSegment>
diff --git a/src/frontend/src/lib/components/modules/attach-detach/AttachSegment.svelte b/src/frontend/src/lib/components/modules/attach-detach/AttachSegment.svelte
index 140d04f9b9..b60b5bc001 100644
--- a/src/frontend/src/lib/components/modules/attach-detach/AttachSegment.svelte
+++ b/src/frontend/src/lib/components/modules/attach-detach/AttachSegment.svelte
@@ -2,7 +2,9 @@
 	import { Principal } from '@icp-sdk/core/principal';
 	import type { Snippet } from 'svelte';
 	import InputCanisterId from '$lib/components/app/core/InputCanisterId.svelte';
+	import IconLink from '$lib/components/icons/IconLink.svelte';
 	import Popover from '$lib/components/ui/Popover.svelte';
+	import Value from '$lib/components/ui/Value.svelte';
 	import { isBusy } from '$lib/derived/app/busy.derived';
 	import { authIdentity } from '$lib/derived/auth.derived';
 	import { missionControlId } from '$lib/derived/console/account.mission-control.derived';
@@ -12,15 +14,9 @@
 	import { toasts } from '$lib/stores/app/toasts.store';
 	import { i18nCapitalize, i18nFormat } from '$lib/utils/i18n.utils';
 
-	interface Props {
-		segment: 'satellite' | 'orbiter';
-		visible: boolean | undefined;
-		title?: Snippet;
-		input?: Snippet;
-		onsuccess: () => void;
-	}
+	let visible = $state(false);
 
-	let { segment, visible = $bindable(), title, input, onsuccess }: Props = $props();
+	let segment = $state<'satellite' | 'orbiter' | 'ufo'>('satellite');
 
 	let validConfirm = $state(false);
 	let canisterId = $state('');
@@ -53,8 +49,6 @@
 
 		visible = false;
 
-		onsuccess();
-
 		toasts.success({
 			text: i18nCapitalize(
 				i18nFormat($i18n.canisters.attach_success, [
@@ -68,13 +62,33 @@
 	};
 </script>
 
+<button class="primary" aria-label={$i18n.core.attach} onclick={() => (visible = true)}
+	><IconLink /></button
+>
+
 <Popover backdrop="dark" center bind:visible>
 	<form class="container" onsubmit={handleSubmit}>
-		<h3>{@render title?.()}</h3>
+		<h3>{$i18n.launchpad.attach_title}</h3>
+
+		<p>{$i18n.launchpad.attach_description}</p>
+
+		<div>
+			<Value>
+				{#snippet label()}
+					{$i18n.cli.module}
+				{/snippet}
+
+				<select bind:value={segment}>
+					<option value="satellite">{$i18n.satellites.satellite}</option>
+					<option value="orbiter">{$i18n.analytics.orbiter} ({$i18n.analytics.title})</option>
+					<option value="ufo">{$i18n.ufo.title}</option>
+				</select>
+			</Value>
+		</div>
 
 		<InputCanisterId disabled={$isBusy} bind:canisterId bind:valid={validConfirm}>
 			{#snippet label()}
-				{@render input?.()}
+				{$i18n.launchpad.attach_id}
 			{/snippet}
 		</InputCanisterId>
 
@@ -92,4 +106,8 @@
 	label {
 		margin: var(--padding-1_5x) 0 0;
 	}
+
+	p {
+		font-size: var(--font-size-small);
+	}
 </style>
diff --git a/src/frontend/src/lib/components/modules/launchpad/LaunchpadToolbar.svelte b/src/frontend/src/lib/components/modules/launchpad/LaunchpadToolbar.svelte
index 8a581ce959..9c3fe491d5 100644
--- a/src/frontend/src/lib/components/modules/launchpad/LaunchpadToolbar.svelte
+++ b/src/frontend/src/lib/components/modules/launchpad/LaunchpadToolbar.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { debounce } from '@dfinity/utils';
 	import { run } from 'svelte/legacy';
-	import AttachActions from '$lib/components/modules/attach-detach/AttachActions.svelte';
+	import AttachSegment from '$lib/components/modules/attach-detach/AttachSegment.svelte';
 	import LaunchpadLayout from '$lib/components/modules/launchpad/LaunchpadLayout.svelte';
 	import LaunchpadNewActions from '$lib/components/modules/launchpad/LaunchpadNewActions.svelte';
 	import Input from '$lib/components/ui/Input.svelte';
@@ -37,7 +37,7 @@
 
 		<LaunchpadLayout />
 
-		<AttachActions />
+		<AttachSegment />
 	</div>
 
 	<LaunchpadNewActions />
diff --git a/src/frontend/src/lib/components/ui/Popover.svelte b/src/frontend/src/lib/components/ui/Popover.svelte
index 7dd887649c..04ab60be35 100644
--- a/src/frontend/src/lib/components/ui/Popover.svelte
+++ b/src/frontend/src/lib/components/ui/Popover.svelte
@@ -114,7 +114,7 @@
 		}
 
 		&.center {
-			--popover-min-size: 280px;
+			--popover-min-size: 300px;
 
 			&.wide {
 				--popover-min-size: 540px;
diff --git a/src/frontend/src/lib/i18n/en.json b/src/frontend/src/lib/i18n/en.json
index ff449cf999..90e5e3dd05 100644
--- a/src/frontend/src/lib/i18n/en.json
+++ b/src/frontend/src/lib/i18n/en.json
@@ -311,7 +311,6 @@
 		"loading_launchpad": "Loading your launchpad...",
 		"go_launchpad": "Go to launchpad",
 		"launchpad": "Launchpad",
-		"attach": "Attach Satellite",
 		"morning": "Morning",
 		"afternoon": "Afternoon",
 		"good_evening": "Good evening",
@@ -320,7 +319,10 @@
 		"commander": "Commander",
 		"spacebuilder": "Spacebuilder",
 		"captain": "Captain",
-		"getting_started_credits": "Welcome to Juno! Reach out on <a href=\"https://discord.gg/wHZ57Z2RAG\" rel=\"external noopener noreferrer\" target=\"_blank\"><strong>Discord</strong></a> and we'll get you started for free."
+		"getting_started_credits": "Welcome to Juno! Reach out on <a href=\"https://discord.gg/wHZ57Z2RAG\" rel=\"external noopener noreferrer\" target=\"_blank\"><strong>Discord</strong></a> and we'll get you started for free.",
+		"attach_title": "Attach Module",
+		"attach_description": "Connect an existing Satellite, Orbiter, or UFO to your Console.",
+		"attach_id": "Enter ID"
 	},
 	"satellites": {
 		"title": "Satellites",
@@ -509,8 +511,6 @@
 		"others": "Others",
 		"browsers": "Browsers",
 		"operating_systems": "Operating systems",
-		"attach": "Attach analytics",
-		"attach_id": "Enter Orbiter ID",
 		"score": "Score",
 		"rating": "Rating",
 		"web_vitals": "Web Vitals",
diff --git a/src/frontend/src/lib/i18n/zh-cn.json b/src/frontend/src/lib/i18n/zh-cn.json
index 997ea30f4c..2703d35d18 100644
--- a/src/frontend/src/lib/i18n/zh-cn.json
+++ b/src/frontend/src/lib/i18n/zh-cn.json
@@ -312,7 +312,6 @@
 		"loading_launchpad": "正在加载启动台...",
 		"go_launchpad": "前往启动台",
 		"launchpad": "启动台",
-		"attach": "关联卫星",
 		"morning": "早上好",
 		"afternoon": "下午好",
 		"good_evening": "晚上好",
@@ -321,7 +320,10 @@
 		"commander": "指挥官",
 		"spacebuilder": "太空建造者",
 		"captain": "船长",
-		"getting_started_credits": "欢迎来到 Juno！在 <a href=\"https://discord.gg/wHZ57Z2RAG\" rel=\"external noopener noreferrer\" target=\"_blank\"><strong>Discord</strong></a> 上联系我们，免费开始您的旅程。"
+		"getting_started_credits": "欢迎来到 Juno！在 <a href=\"https://discord.gg/wHZ57Z2RAG\" rel=\"external noopener noreferrer\" target=\"_blank\"><strong>Discord</strong></a> 上联系我们，免费开始您的旅程。",
+		"attach_title": "附加模块",
+		"attach_description": "将现有的卫星、轨道器或 UFO 连接到您的控制台。",
+		"attach_id": "输入 ID"
 	},
 	"satellites": {
 		"title": "所有卫星",
@@ -510,8 +512,6 @@
 		"others": "其他",
 		"browsers": "浏览器",
 		"operating_systems": "操作系统",
-		"attach": "附加统计",
-		"attach_id": "输入轨道器ID",
 		"score": "得分",
 		"rating": "评级",
 		"web_vitals": "网页核心指标",
diff --git a/src/frontend/src/lib/services/attach-detach/attach.services.ts b/src/frontend/src/lib/services/attach-detach/attach.services.ts
index 8bc7c0fd40..3bb65f1a51 100644
--- a/src/frontend/src/lib/services/attach-detach/attach.services.ts
+++ b/src/frontend/src/lib/services/attach-detach/attach.services.ts
@@ -45,7 +45,11 @@ export const attachSegment = async ({
 		return { result: 'error' };
 	}
 
-	const { valid } = await assertKnowSegmentType({ segment, segmentId, identity });
+	const { valid } =
+		segment === 'ufo'
+			? // No preventive assertion for UFO #yolo
+				{ valid: true }
+			: await assertKnowSegmentType({ segment, segmentId, identity });
 
 	if (!valid) {
 		return { result: 'error' };
diff --git a/src/frontend/src/lib/types/i18n.d.ts b/src/frontend/src/lib/types/i18n.d.ts
index 5b46b04554..a4acac41a4 100644
--- a/src/frontend/src/lib/types/i18n.d.ts
+++ b/src/frontend/src/lib/types/i18n.d.ts
@@ -318,7 +318,6 @@ interface I18nLaunchpad {
 	loading_launchpad: string;
 	go_launchpad: string;
 	launchpad: string;
-	attach: string;
 	morning: string;
 	afternoon: string;
 	good_evening: string;
@@ -328,6 +327,9 @@ interface I18nLaunchpad {
 	spacebuilder: string;
 	captain: string;
 	getting_started_credits: string;
+	attach_title: string;
+	attach_description: string;
+	attach_id: string;
 }
 
 interface I18nSatellites {
@@ -523,8 +525,6 @@ interface I18nAnalytics {
 	others: string;
 	browsers: string;
 	operating_systems: string;
-	attach: string;
-	attach_id: string;
 	score: string;
 	rating: string;
 	web_vitals: string;

From 25521ca2e8732d746e59a3635f388e941d991efe Mon Sep 17 00:00:00 2001
From: David Dal Busco <david.dalbusco@outlook.com>
Date: Fri, 24 Apr 2026 17:20:08 +0200
Subject: [PATCH 2/2] chore: fmt

---
 .../lib/components/modules/attach-detach/AttachSegment.svelte    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/frontend/src/lib/components/modules/attach-detach/AttachSegment.svelte b/src/frontend/src/lib/components/modules/attach-detach/AttachSegment.svelte
index b60b5bc001..9cf7cf1cec 100644
--- a/src/frontend/src/lib/components/modules/attach-detach/AttachSegment.svelte
+++ b/src/frontend/src/lib/components/modules/attach-detach/AttachSegment.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { Principal } from '@icp-sdk/core/principal';
-	import type { Snippet } from 'svelte';
 	import InputCanisterId from '$lib/components/app/core/InputCanisterId.svelte';
 	import IconLink from '$lib/components/icons/IconLink.svelte';
 	import Popover from '$lib/components/ui/Popover.svelte';