From 4a96c9da31080bc6c49fbd5306efee6ea112c866 Mon Sep 17 00:00:00 2001
From: Peter Steinberger <peter@steipete.me>
Date: Sat, 18 Jul 2026 11:46:40 +0100
Subject: [PATCH] feat(ui): link Get the apps from the mobile pairing dialog
 (#110622)

---
 ui/src/app/app-host.ts             |  4 ++++
 ui/src/i18n/locales/en.ts          |  2 ++
 ui/src/pages/nodes/view-pairing.ts |  5 +++++
 ui/src/styles/components.css       | 26 ++++++++++++++++++++++++++
 4 files changed, 37 insertions(+)

diff --git a/ui/src/app/app-host.ts b/ui/src/app/app-host.ts
index 7edec7e11f1f..82eafaacd2c6 100644
--- a/ui/src/app/app-host.ts
+++ b/ui/src/app/app-host.ts
@@ -1509,6 +1509,10 @@ class OpenClawShell extends OpenClawLightDomElement {
             context.overlays.closeDevicePairSetup();
             this.navigate("nodes");
           },
+          onGetApps: () => {
+            context.overlays.closeDevicePairSetup();
+            this.navigate("apps");
+          },
         })}
         ${onboarding && activeRoute !== "custodian"
           ? html`<openclaw-onboarding-memory-import
diff --git a/ui/src/i18n/locales/en.ts b/ui/src/i18n/locales/en.ts
index 100bbccb3215..0c5f2ce47f10 100644
--- a/ui/src/i18n/locales/en.ts
+++ b/ui/src/i18n/locales/en.ts
@@ -283,6 +283,8 @@ export const en: TranslationMap = {
       adminRequired: "Administrator access is required to create setup codes.",
       title: "OpenClaw mobile",
       subtitle: "Scan this QR code in the mobile app to connect a new phone.",
+      noApp: "Don't have the app yet?",
+      getApps: "Get the apps",
       generating: "Creating a secure setup code…",
       accessTitle: "Mobile access",
       fullAccess: "Full access (recommended)",
diff --git a/ui/src/pages/nodes/view-pairing.ts b/ui/src/pages/nodes/view-pairing.ts
index 8b0d3f68f253..27c17c4e5588 100644
--- a/ui/src/pages/nodes/view-pairing.ts
+++ b/ui/src/pages/nodes/view-pairing.ts
@@ -20,6 +20,7 @@ type DevicePairSetupProps = {
   onClose: () => void;
   onCopy: (setupCode: string) => void;
   onManageDevices: () => void;
+  onGetApps: () => void;
 };
 
 export function renderDevicePairSetup(props: DevicePairSetupProps) {
@@ -40,6 +41,10 @@ export function renderDevicePairSetup(props: DevicePairSetupProps) {
           <div>
             <h2>${title}</h2>
             <p>${description}</p>
+            <p class="device-pair-setup__get-apps">
+              ${t("nodes.pairing.noApp")}
+              <button type="button" @click=${props.onGetApps}>${t("nodes.pairing.getApps")}</button>
+            </p>
           </div>
           <button
             class="btn btn--icon btn--ghost device-pair-setup__close"
diff --git a/ui/src/styles/components.css b/ui/src/styles/components.css
index 729a1ed9d4f3..d992600efeec 100644
--- a/ui/src/styles/components.css
+++ b/ui/src/styles/components.css
@@ -4672,6 +4672,32 @@ td.data-table-key-col {
   line-height: 1.5;
 }
 
+.device-pair-setup__header p.device-pair-setup__get-apps {
+  margin-top: 2px;
+  font-size: 13px;
+}
+
+.device-pair-setup__get-apps button {
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--text);
+  font: inherit;
+  cursor: pointer;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.device-pair-setup__get-apps button:hover {
+  color: var(--text-strong);
+}
+
+.device-pair-setup__get-apps button:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+  border-radius: 4px;
+}
+
 .device-pair-setup__phone {
   display: grid;
   width: 44px;