From 4ee1b3e0735c8df406b8f3898a83a1edef6f819e Mon Sep 17 00:00:00 2001
From: siduck <siduck@tutanota.com>
Date: Fri, 16 Oct 2026 12:15:16 +0530
Subject: [PATCH 01/17] fix(ui): theme terminal with espresso tokens

---
 .../src/components/common/TerminalOutput.vue  | 26 ++++---------------
 1 file changed, 5 insertions(+), 21 deletions(-)

diff --git a/admin/frontend/dashboard/src/components/common/TerminalOutput.vue b/admin/frontend/dashboard/src/components/common/TerminalOutput.vue
index 4ed1a8419..e22181e1a 100644
--- a/admin/frontend/dashboard/src/components/common/TerminalOutput.vue
+++ b/admin/frontend/dashboard/src/components/common/TerminalOutput.vue
@@ -36,13 +36,13 @@ defineExpose({ scrollToBottom })
 <template>
   <div
     ref="el"
-    class="terminal select-text font-mono text-sm leading-[1.6]"
+    class="terminal select-text bg-surface-gray-1 text-ink-gray-8 font-mono text-sm leading-[1.6]"
     :class="{ 'terminal--fill': fill }"
     :style="fill ? '' : `max-height:${maxHeight}`"
   >
-    <div v-if="!lines.length" class="terminal__empty">{{ emptyText }}</div>
-    <div v-for="(line, index) in lines" :key="index" class="terminal__row">
-      <span v-if="lineNumbers" class="terminal__lineno">{{ index + 1 }}</span>
+    <div v-if="!lines.length" class="terminal__empty text-ink-gray-5">{{ emptyText }}</div>
+    <div v-for="(line, index) in lines" :key="index" class="terminal__row hover:bg-surface-gray-2">
+      <span v-if="lineNumbers" class="terminal__lineno text-ink-gray-4">{{ index + 1 }}</span>
       <span
         class="terminal__text"
         :class="{ 'terminal__text--pad': !lineNumbers }"
@@ -50,26 +50,16 @@ defineExpose({ scrollToBottom })
       />
     </div>
 
-    <div v-if="streaming" class="terminal__cursor">█</div>
+    <div v-if="streaming" class="terminal__cursor text-ink-green-6">█</div>
   </div>
 </template>
 
 <style scoped>
 .terminal {
-  --terminal-bg: #1e1e2e;
-  --terminal-fg: #cdd6f4;
-  --terminal-muted: #585b70;
-  --terminal-lineno: #45475a;
-  --terminal-cursor: #a6e3a1;
   overflow: auto;
   border-radius: 0.5rem;
   min-height: 120px;
   padding: 0.75rem 0;
-  background: var(--terminal-bg);
-  color: var(--terminal-fg);
-}
-.terminal ::selection {
-  background: rgb(255 255 255 / 0.25);
 }
 .terminal--fill {
   flex: 1;
@@ -77,14 +67,10 @@ defineExpose({ scrollToBottom })
 }
 .terminal__empty {
   padding: 0.25rem 1rem;
-  color: var(--terminal-muted);
 }
 .terminal__row {
   display: flex;
 }
-.terminal__row:hover {
-  background: rgb(255 255 255 / 0.04);
-}
 .terminal__lineno {
   flex-shrink: 0;
   min-width: 3.5rem;
@@ -92,7 +78,6 @@ defineExpose({ scrollToBottom })
   padding-right: 1rem;
   text-align: right;
   user-select: none;
-  color: var(--terminal-lineno);
 }
 .terminal__text {
   flex: 1;
@@ -105,7 +90,6 @@ defineExpose({ scrollToBottom })
 }
 .terminal__cursor {
   padding: 0.25rem 1rem;
-  color: var(--terminal-cursor);
   animation: terminal-blink 1s step-start infinite;
 }
 @keyframes terminal-blink {

From 61e6fb659959874c69dd96f0ad2f68b521972543 Mon Sep 17 00:00:00 2001
From: siduck <siduck@tutanota.com>
Date: Sat, 17 Oct 2026 17:42:31 +0530
Subject: [PATCH 02/17] feat(admin): remember onboarding state per bench

---
 admin/backend/api/v1/settings/__init__.py     |  1 +
 admin/backend/api/v1/settings/config.py       | 11 +++-
 admin/backend/api/v1/types/settings.py        |  1 +
 docs/configuration.md                         |  1 +
 pilot/config/bench.py                         |  6 ++
 .../backend/api/test_settings_onboarding.py   | 56 +++++++++++++++++++
 6 files changed, 74 insertions(+), 2 deletions(-)
 create mode 100644 tests/admin/backend/api/test_settings_onboarding.py

diff --git a/admin/backend/api/v1/settings/__init__.py b/admin/backend/api/v1/settings/__init__.py
index d35d302b8..5a23df47d 100644
--- a/admin/backend/api/v1/settings/__init__.py
+++ b/admin/backend/api/v1/settings/__init__.py
@@ -83,6 +83,7 @@ def build_settings_response(config: BenchConfig, bench_root: Path | None = None)
             "default_branch": config.default_branch,
             "db_type": config.db_type,
             "allow_developer_mode": config.allow_developer_mode,
+            "onboarding": config.onboarding,
         },
         "mariadb": {
             "host": config.mariadb.host,
diff --git a/admin/backend/api/v1/settings/config.py b/admin/backend/api/v1/settings/config.py
index b51f69478..cb78f73a6 100644
--- a/admin/backend/api/v1/settings/config.py
+++ b/admin/backend/api/v1/settings/config.py
@@ -4,6 +4,7 @@
 
 from pilot.config import BenchConfig, FirewallRule, S3Config, WafCondition, WafRule, WorkerGroup
 from pilot.config.alert_limit import RESOURCE_LIMIT_FIELDS
+from pilot.config.bench import ONBOARDING_STATES
 from pilot.config.llm import LLMConfig
 from pilot.config.mail import MailConfig
 from pilot.core.alerts import check_mail_credentials
@@ -39,7 +40,8 @@ def __init__(self, config: BenchConfig, data: dict, mail: MailConfig | None = No
     def apply(self) -> str | None:
         if error := self.get_group_type_error():
             return error
-        self._apply_bench()
+        if error := self._apply_bench():
+            return error
         self._apply_lite_mode()
         self._apply_letsencrypt()
         self._apply_workers()
@@ -66,7 +68,7 @@ def get_group_type_error(self) -> str | None:
                 return f"{name} must be {'a list' if expected is list else 'an object'}."
         return None
 
-    def _apply_bench(self) -> None:
+    def _apply_bench(self) -> str | None:
         bench = self.data.get("bench") or {}
         if "http_port" in bench:
             self.config.http_port = int(bench["http_port"])
@@ -76,6 +78,11 @@ def _apply_bench(self) -> None:
             self.config.default_branch = str(bench["default_branch"]).strip()
         if "allow_developer_mode" in bench:
             self.config.allow_developer_mode = bool(bench["allow_developer_mode"])
+        if "onboarding" in bench:
+            if bench["onboarding"] not in ONBOARDING_STATES:
+                return f"bench.onboarding must be one of: {', '.join(repr(state) for state in ONBOARDING_STATES)}"
+            self.config.onboarding = bench["onboarding"]
+        return None
 
     def _apply_lite_mode(self) -> None:
         lite_mode = self.data.get("lite_mode") or {}
diff --git a/admin/backend/api/v1/types/settings.py b/admin/backend/api/v1/types/settings.py
index 3e7e23a97..ed984f2a5 100644
--- a/admin/backend/api/v1/types/settings.py
+++ b/admin/backend/api/v1/types/settings.py
@@ -111,6 +111,7 @@ class GeneralSettings(TypedDict):
     default_branch: str
     db_type: str
     allow_developer_mode: bool
+    onboarding: str
 
 
 class MariaDBSettings(TypedDict):
diff --git a/docs/configuration.md b/docs/configuration.md
index 09caca2ca..aee996d72 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -50,6 +50,7 @@ The `[bench]` table supports:
 | `allow_developer_mode` | Allows per-site developer mode changes. |
 | `watch_apps_js`, `watch_admin_js`, `reload_python` | Development reload settings. |
 | `install_dev_extra` | Install apps' `dev` extras on a non-production bench. Defaults to true; `pilot init --no-dev` sets it to false. |
+| `onboarding` | State of the onboarding dialog: empty shows it, `minimized` shows in sidebar card only, `dismissed` hides both |
 
 Applications use `[[apps]]` entries. `branches` can list branches available to the app:
 
diff --git a/pilot/config/bench.py b/pilot/config/bench.py
index ef039fc59..34cf35631 100644
--- a/pilot/config/bench.py
+++ b/pilot/config/bench.py
@@ -83,6 +83,7 @@
 
 # Framework branches the setup wizard offers, newest/recommended first.
 FRAMEWORK_BRANCHES = ["version-16", "develop"]
+ONBOARDING_STATES = ("", "minimized", "dismissed")
 
 _DEFAULT_DATA: dict = {
     "bench": {"name": "", "python": "3.14"},
@@ -128,6 +129,7 @@ class BenchConfig:
     allow_developer_mode: bool = False
     # Whether `uv pip install -e` pulls an app's `dev` extra, such as frappe's watchdog.
     install_dev_extra: bool = True
+    onboarding: str = ""
     production: ProductionConfig = field(default_factory=ProductionConfig)
     lite_mode: LiteModeConfig = field(default_factory=LiteModeConfig)
     nginx: NginxConfig = field(default_factory=NginxConfig)
@@ -222,6 +224,7 @@ def _from_dict(
             default_branch=bench_data.get("default_branch", ""),
             allow_developer_mode=bench_data.get("allow_developer_mode", False),
             install_dev_extra=bench_data.get("install_dev_extra", True),
+            onboarding=bench_data.get("onboarding", ""),
             apps=apps,
             mariadb=common.mariadb,
             postgres=common.postgres,
@@ -540,6 +543,8 @@ def _bench_section(self) -> ConfigDict:
         }
         if self.default_branch:
             bench["default_branch"] = self.default_branch
+        if self.onboarding:
+            bench["onboarding"] = self.onboarding
         return bench
 
     def _apps_section(self) -> list[ConfigDict]:
@@ -881,6 +886,7 @@ def _workers_to_groups(value) -> list[WorkerGroup]:
     "default_branch",
     "allow_developer_mode",
     "install_dev_extra",
+    "onboarding",
 }
 # Keys older Pilot versions wrote that the parser still tolerates.
 _PRODUCTION_LEGACY = {"lightweight", "nginx", "use_companion_manager"}
diff --git a/tests/admin/backend/api/test_settings_onboarding.py b/tests/admin/backend/api/test_settings_onboarding.py
new file mode 100644
index 000000000..a06ab6944
--- /dev/null
+++ b/tests/admin/backend/api/test_settings_onboarding.py
@@ -0,0 +1,56 @@
+from __future__ import annotations
+
+from admin.backend.api.v1.settings import ConfigPatcher, build_settings_response, restart_trigger_values
+from pilot.config import BenchConfig
+from pilot.core.bench.settings import is_restart_needed
+
+
+def _config(**bench) -> BenchConfig:
+    return BenchConfig._from_dict(
+        {
+            "bench": {"name": "test-bench", "python": "3.14", **bench},
+            "apps": [{"name": "frappe", "repo": "https://github.com/frappe/frappe", "branch": "develop"}],
+            "mariadb": {"root_password": "root"},
+        }
+    )
+
+
+def test_settings_response_shows_onboarding_on_a_new_bench() -> None:
+    assert build_settings_response(_config())["bench"]["onboarding"] == ""
+
+
+def test_patcher_stores_onboarding_state() -> None:
+    config = _config()
+
+    assert ConfigPatcher(config, {"bench": {"onboarding": "minimized"}}).apply() is None
+    assert config.onboarding == "minimized"
+
+    assert ConfigPatcher(config, {"bench": {"onboarding": "dismissed"}}).apply() is None
+    assert config.onboarding == "dismissed"
+
+
+def test_patcher_rejects_unknown_onboarding_state() -> None:
+    config = _config()
+
+    error = ConfigPatcher(config, {"bench": {"onboarding": "closed"}}).apply()
+
+    assert error and "bench.onboarding" in error
+    assert config.onboarding == ""
+
+
+def test_onboarding_state_survives_a_round_trip() -> None:
+    config = _config(onboarding="dismissed")
+
+    assert BenchConfig._from_dict(config._to_toml_dict()).onboarding == "dismissed"
+
+
+def test_new_bench_does_not_write_onboarding_key() -> None:
+    assert "onboarding" not in _config()._to_toml_dict()["bench"]
+
+
+def test_changing_onboarding_does_not_restart_the_bench() -> None:
+    config = _config()
+    before = restart_trigger_values(config)
+    config.onboarding = "minimized"
+
+    assert not is_restart_needed(before, restart_trigger_values(config))

From 5b3a0437335390de981a242b6ae43e0ac44f5bf2 Mon Sep 17 00:00:00 2001
From: siduck <siduck@tutanota.com>
Date: Sat, 17 Oct 2026 17:42:31 +0530
Subject: [PATCH 03/17] feat(ui): include all apps in new site dialog

---
 .../src/components/sites/NewSiteDialog.vue    | 143 +++++-------------
 .../src/composables/sites/useNewSite.ts       | 133 ++++++++++++++++
 .../dashboard/src/utils/siteApps.test.ts      |   7 +-
 .../frontend/dashboard/src/utils/siteApps.ts  |   6 +-
 4 files changed, 175 insertions(+), 114 deletions(-)
 create mode 100644 admin/frontend/dashboard/src/composables/sites/useNewSite.ts

diff --git a/admin/frontend/dashboard/src/components/sites/NewSiteDialog.vue b/admin/frontend/dashboard/src/components/sites/NewSiteDialog.vue
index 582a21d00..fd5c22cc0 100644
--- a/admin/frontend/dashboard/src/components/sites/NewSiteDialog.vue
+++ b/admin/frontend/dashboard/src/components/sites/NewSiteDialog.vue
@@ -1,16 +1,10 @@
 <script setup lang="ts">
-import { computed, nextTick, ref, watch } from 'vue'
+import { nextTick, ref, watch } from 'vue'
 import { Button, Checkbox, Dialog, ErrorMessage, Select, Spinner, TextInput } from 'frappe-ui'
 
 import AppIcon from '@/components/apps/AppIcon.vue'
 
-import { apiErrorMessage } from '@/api/client'
-import { appsApi } from '@/api/apps'
-import { sitesApi } from '@/api/sites'
-import { useAppRegistry } from '@/composables/apps/useAppRegistry'
-import { buildSiteAppChoices } from '@/utils/siteApps'
-import type { AppInfo } from '@/types/apps'
-import { errorMessage } from '@/utils/error'
+import { useNewSite } from '@/composables/sites/useNewSite'
 import type { SiteResource } from '@/types/sites'
 
 interface Props {
@@ -28,20 +22,23 @@ interface Emits {
 const emit = defineEmits<Emits>()
 const open = defineModel<boolean>()
 
-const { registry, load: loadRegistry } = useAppRegistry()
-const benchApps = ref<AppInfo[]>([])
-
-const newSiteName = ref('')
-const sitePrefix = ref('')
-const wildcardDomains = ref<string[]>([])
-const selectedSuffix = ref('')
-const loading = ref(false)
-const creating = ref(false)
-const error = ref('')
-
-const selectedApps = ref<string[]>([])
-
-const hasSingleDomain = computed(() => wildcardDomains.value.length === 1)
+const {
+  name: newSiteName,
+  prefix: sitePrefix,
+  wildcardDomains,
+  suffix: selectedSuffix,
+  selectedApps,
+  appSearch,
+  loading,
+  creating,
+  error,
+  hasSingleDomain,
+  availableApps,
+  filteredApps,
+  reset,
+  toggleApp,
+  create,
+} = useNewSite()
 
 // Fade only the edges that can still scroll, so a clipped row reads as "more
 // below" and the last app is never dimmed at rest.
@@ -56,92 +53,20 @@ const updateFadeEdges = () => {
   fadeEdges.value = top && bottom ? 'both' : top ? 'top' : bottom ? 'bottom' : ''
 }
 
-const availableApps = computed(() => buildSiteAppChoices(registry.value, benchApps.value))
-
 // Also `loading`: apps resolve while the spinner is still up, so the rows only
 // exist once it flips.
-watch([availableApps, loading], () => nextTick(updateFadeEdges))
-
-watch([sitePrefix, selectedSuffix], () => {
-  if (wildcardDomains.value.length && sitePrefix.value) {
-    newSiteName.value = `${sitePrefix.value.trim()}${selectedSuffix.value}`
-  } else {
-    newSiteName.value = ''
-  }
-})
+watch([filteredApps, loading], () => nextTick(updateFadeEdges))
 
 watch(open, (visible) => {
-  if (!visible) return
-  reset()
+  if (visible) reset()
 })
 
-const reset = async () => {
-  newSiteName.value = ''
-  sitePrefix.value = ''
-  error.value = ''
-  selectedApps.value = []
-  loading.value = true
-  await Promise.all([loadWildcardDomains(), loadRegistry(), loadBenchApps()])
-  loading.value = false
-}
-
-const loadBenchApps = async () => {
-  try {
-    benchApps.value = await appsApi.installed()
-  } catch {
-    benchApps.value = []
-  }
-}
-
-const toggleApp = (name: string) => {
-  const index = selectedApps.value.indexOf(name)
-  if (index === -1) selectedApps.value.push(name)
-  else selectedApps.value.splice(index, 1)
-}
-
-const loadWildcardDomains = async () => {
-  try {
-    const { domains } = await sitesApi.domains.wildcardList()
-    wildcardDomains.value = domains || []
-    selectedSuffix.value = wildcardDomains.value[0] || ''
-  } catch {
-    wildcardDomains.value = []
-  }
-}
-
-const validate = (name: string) => {
-  if (!name) return 'Site name is required.'
-  if (!/^[a-zA-Z0-9][a-zA-Z0-9\-.]*[a-zA-Z0-9]$|^[a-zA-Z0-9]$/.test(name))
-    return 'Site name must be a valid hostname.'
-  return null
-}
-
 const submit = async () => {
-  const name = newSiteName.value.trim()
-  const validationError = validate(name)
-  if (validationError) {
-    error.value = validationError
-    return
-  }
+  const taskId = await create()
+  if (!taskId) return
 
-  creating.value = true
-  error.value = ''
-  try {
-    const result = await sitesApi.create({
-      name,
-      apps: selectedApps.value,
-    })
-    if (result.task_id) {
-      open.value = false
-      emit('started', result.task_id)
-    } else {
-      error.value = apiErrorMessage(result, 'Could not create site.')
-    }
-  } catch (caught) {
-    error.value = errorMessage(caught, 'Could not create site.')
-  } finally {
-    creating.value = false
-  }
+  open.value = false
+  emit('started', taskId)
 }
 </script>
 
@@ -189,9 +114,9 @@ const submit = async () => {
 
         <p class="mt-1.5 text-ink-gray-5 text-p-sm">
           Web address:
-          <span class="font-medium text-ink-gray-7"
-            >{{ newSiteName || `mysite${selectedSuffix}` }}</span
-          >
+          <span class="font-medium text-ink-gray-7">
+            {{ newSiteName || `mysite${selectedSuffix}` }}
+          </span>
         </p>
       </div>
 
@@ -202,6 +127,16 @@ const submit = async () => {
           <span class="text-ink-gray-5 text-xs"> {{ selectedApps.length }} selected </span>
         </div>
 
+        <TextInput v-model="appSearch" class="mb-2" placeholder="Search apps" autocomplete="off">
+          <template #prefix>
+            <span class="size-4 text-ink-gray-5 lucide-search" />
+          </template>
+        </TextInput>
+
+        <p v-if="!filteredApps.length" class="py-6 text-ink-gray-5 text-p-sm text-center">
+          No apps match "{{ appSearch }}"
+        </p>
+
         <div
           ref="appList"
           :data-fade="fadeEdges"
@@ -209,7 +144,7 @@ const submit = async () => {
           @scroll.passive="updateFadeEdges"
         >
           <button
-            v-for="app in availableApps"
+            v-for="app in filteredApps"
             :key="app.name"
             type="button"
             class="flex items-center gap-3 px-2 py-2 border rounded-4 min-w-0 text-left transition-colors hover:bg-surface-alpha-gray-1"
diff --git a/admin/frontend/dashboard/src/composables/sites/useNewSite.ts b/admin/frontend/dashboard/src/composables/sites/useNewSite.ts
new file mode 100644
index 000000000..286864d3a
--- /dev/null
+++ b/admin/frontend/dashboard/src/composables/sites/useNewSite.ts
@@ -0,0 +1,133 @@
+import { computed, ref, watch } from 'vue'
+
+import { appsApi } from '@/api/apps'
+import { apiErrorMessage } from '@/api/client'
+import { sitesApi } from '@/api/sites'
+import { useAppRegistry } from '@/composables/apps/useAppRegistry'
+import type { AppInfo } from '@/types/apps'
+import { errorMessage } from '@/utils/error'
+import { buildSiteAppChoices } from '@/utils/siteApps'
+
+const validate = (name: string) => {
+  if (!name) return 'Site name is required.'
+  if (!/^[a-zA-Z0-9][a-zA-Z0-9\-.]*[a-zA-Z0-9]$|^[a-zA-Z0-9]$/.test(name))
+    return 'Site name must be a valid hostname.'
+  return null
+}
+
+export const useNewSite = () => {
+  const { registry, load: loadRegistry } = useAppRegistry()
+  const benchApps = ref<AppInfo[]>([])
+
+  const name = ref('')
+  const prefix = ref('')
+  const wildcardDomains = ref<string[]>([])
+  const suffix = ref('')
+  const selectedApps = ref<string[]>([])
+  const appSearch = ref('')
+  const loading = ref(false)
+  const creating = ref(false)
+  const error = ref('')
+
+  const hasSingleDomain = computed(() => wildcardDomains.value.length === 1)
+  const availableApps = computed(() => buildSiteAppChoices(registry.value, benchApps.value))
+  const filteredApps = computed(() => {
+    const query = appSearch.value.trim().toLowerCase()
+
+    if (!query) return availableApps.value
+
+    return availableApps.value.filter((app) =>
+      [app.title, app.name].some((text) => text?.toLowerCase().includes(query)),
+    )
+  })
+
+  watch([prefix, suffix], () => {
+    name.value =
+      wildcardDomains.value.length && prefix.value ? `${prefix.value.trim()}${suffix.value}` : ''
+  })
+
+  const loadBenchApps = async () => {
+    try {
+      benchApps.value = await appsApi.installed()
+    } catch {
+      benchApps.value = []
+    }
+  }
+
+  const loadWildcardDomains = async () => {
+    try {
+      const { domains } = await sitesApi.domains.wildcardList()
+
+      wildcardDomains.value = domains || []
+      suffix.value = wildcardDomains.value[0] || ''
+    } catch {
+      wildcardDomains.value = []
+    }
+  }
+
+  const reset = async () => {
+    name.value = ''
+    prefix.value = ''
+    error.value = ''
+    selectedApps.value = []
+    appSearch.value = ''
+    loading.value = true
+
+    await Promise.all([loadWildcardDomains(), loadRegistry(), loadBenchApps()])
+
+    loading.value = false
+  }
+
+  const toggleApp = (app: string) => {
+    const index = selectedApps.value.indexOf(app)
+
+    if (index === -1) selectedApps.value.push(app)
+    else selectedApps.value.splice(index, 1)
+  }
+
+  const create = async () => {
+    const siteName = name.value.trim()
+    const validationError = validate(siteName)
+
+    if (validationError) {
+      error.value = validationError
+
+      return null
+    }
+
+    creating.value = true
+    error.value = ''
+
+    try {
+      const result = await sitesApi.create({ name: siteName, apps: selectedApps.value })
+
+      if (result.task_id) return result.task_id
+
+      error.value = apiErrorMessage(result, 'Could not create site.')
+    } catch (caught) {
+      error.value = errorMessage(caught, 'Could not create site.')
+    } finally {
+      creating.value = false
+    }
+
+    return null
+  }
+
+  return {
+    name,
+    prefix,
+    wildcardDomains,
+    suffix,
+    selectedApps,
+    appSearch,
+    loading,
+    creating,
+    error,
+    hasSingleDomain,
+    availableApps,
+    filteredApps,
+    reset,
+    toggleApp,
+    create,
+  }
+}
diff --git a/admin/frontend/dashboard/src/utils/siteApps.test.ts b/admin/frontend/dashboard/src/utils/siteApps.test.ts
index 1eb10a0e5..20df38046 100644
--- a/admin/frontend/dashboard/src/utils/siteApps.test.ts
+++ b/admin/frontend/dashboard/src/utils/siteApps.test.ts
@@ -16,15 +16,12 @@ test('isFrappeApp only matches repos under the frappe org', () => {
   assert.equal(isFrappeApp({}), false)
 })
 
-test('keeps Frappe registry apps and drops third-party ones', () => {
+test('offers every registry app, third-party ones included', () => {
   const choices = buildSiteAppChoices(
     [frappe('erpnext'), { name: 'acme', title: 'Acme', repo: 'https://github.com/acme/acme' }],
     [],
   )
-  assert.deepEqual(
-    choices.map((a) => a.name),
-    ['erpnext'],
-  )
+  assert.deepEqual(choices.map((a) => a.name).sort(), ['acme', 'erpnext'])
 })
 
 test('never offers frappe itself, from either source', () => {
diff --git a/admin/frontend/dashboard/src/utils/siteApps.ts b/admin/frontend/dashboard/src/utils/siteApps.ts
index f242b8a64..9858d1b3b 100644
--- a/admin/frontend/dashboard/src/utils/siteApps.ts
+++ b/admin/frontend/dashboard/src/utils/siteApps.ts
@@ -11,16 +11,12 @@ export const isFrappeApp = (app: { repo?: string }) => {
   return Boolean(app.repo?.includes('github.com/frappe/'))
 }
 
-// The whole catalog is too much to scan while naming a site: Frappe's own apps
-// plus whatever is already cloned onto this bench, marketplace for the rest.
 export const buildSiteAppChoices = (
   registry: SiteAppChoice[] = [],
   benchApps: SiteAppChoice[] = [],
 ) => {
   const apps = new Map<string, SiteAppChoice>()
-  registry
-    .filter((app) => app.name !== 'frappe' && isFrappeApp(app))
-    .forEach((app) => apps.set(app.name, app))
+  registry.filter((app) => app.name !== 'frappe').forEach((app) => apps.set(app.name, app))
   benchApps
     // Bench-only apps carry no registry title, so this falls back to the folder
     // name - `insights` next to `ERPNext`. Same tidy-up the marketplace does.

From 7ccbbb4a8372203e0f534c09b29f20fc26a9c968 Mon Sep 17 00:00:00 2001
From: siduck <siduck@tutanota.com>
Date: Sat, 17 Oct 2026 17:42:31 +0530
Subject: [PATCH 04/17] feat(ui): onboarding dialog and sidebar checklist

---
 .../components/common/CircularProgress.vue    |  25 +
 .../components/navigation/SetupChecklist.vue  | 473 ++++++++++++++++++
 .../src/components/navigation/Sidebar.vue     |   5 +-
 .../src/components/settings/S3Bucket.vue      | 187 ++-----
 .../settings/useGithubConnection.ts           | 117 +++++
 .../composables/settings/useObjectStorage.ts  | 172 +++++++
 6 files changed, 827 insertions(+), 152 deletions(-)
 create mode 100644 admin/frontend/dashboard/src/components/common/CircularProgress.vue
 create mode 100644 admin/frontend/dashboard/src/components/navigation/SetupChecklist.vue
 create mode 100644 admin/frontend/dashboard/src/composables/settings/useGithubConnection.ts
 create mode 100644 admin/frontend/dashboard/src/composables/settings/useObjectStorage.ts

diff --git a/admin/frontend/dashboard/src/components/common/CircularProgress.vue b/admin/frontend/dashboard/src/components/common/CircularProgress.vue
new file mode 100644
index 000000000..5e1f14f1d
--- /dev/null
+++ b/admin/frontend/dashboard/src/components/common/CircularProgress.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+defineProps<{ value: number }>()
+</script>
+
+<template>
+  <svg
+    viewBox="0 0 16 16"
+    fill="none"
+    stroke-width="2"
+    class="size-4 -rotate-90"
+    aria-hidden="true"
+  >
+    <circle cx="8" cy="8" r="6" class="stroke-current text-ink-gray-3" />
+
+    <circle
+      cx="8"
+      cy="8"
+      r="6"
+      pathLength="100"
+      stroke-linecap="round"
+      :stroke-dasharray="`${value} 100`"
+      class="stroke-current text-ink-gray-8 transition-[stroke-dasharray] duration-500"
+    />
+  </svg>
+</template>
diff --git a/admin/frontend/dashboard/src/components/navigation/SetupChecklist.vue b/admin/frontend/dashboard/src/components/navigation/SetupChecklist.vue
new file mode 100644
index 000000000..990ea8b0c
--- /dev/null
+++ b/admin/frontend/dashboard/src/components/navigation/SetupChecklist.vue
@@ -0,0 +1,473 @@
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import {
+  Button,
+  Checkbox,
+  Dialog,
+  ErrorMessage,
+  Select,
+  SidebarCard,
+  Spinner,
+  TextInput,
+  toast,
+} from 'frappe-ui'
+
+import AppIcon from '@/components/apps/AppIcon.vue'
+import CircularProgress from '@/components/common/CircularProgress.vue'
+
+import { settingsApi } from '@/api/settings'
+import { useGithubConnection } from '@/composables/settings/useGithubConnection'
+import { useObjectStorage } from '@/composables/settings/useObjectStorage'
+import { useNewSite } from '@/composables/sites/useNewSite'
+import { useSites } from '@/composables/sites/useSites'
+import { errorMessage } from '@/utils/error'
+
+const route = useRoute()
+const { sites, load: loadSites } = useSites()
+const storage = reactive(useObjectStorage())
+const github = reactive(useGithubConnection())
+const site = reactive(useNewSite())
+
+const onboarding = ref('')
+const loaded = ref(false)
+
+const steps = computed(() => [
+  {
+    id: 'site',
+    name: 'First site',
+    label: 'Create your first site',
+    icon: 'lucide-rocket',
+    title: 'Launch your first site',
+    description: 'Pick a name and apps. Pilot handles the rest.',
+    action: 'Create site',
+    savingLabel: 'Creating site',
+    done: sites.value.length > 0,
+    saving: site.creating,
+    canSave: Boolean(site.name),
+    save: createSite,
+  },
+  {
+    id: 'github',
+    name: 'GitHub',
+    label: 'Connect GitHub',
+    icon: 'lucide-git-branch',
+    title: 'Connect your GitHub account',
+    description: 'Lets Pilot install apps from private repos.',
+    action: 'Next',
+    savingLabel: 'Verifying token',
+    done: github.connected,
+    saving: github.connecting,
+    canSave: Boolean(github.token.trim()),
+    save: github.connect,
+  },
+  {
+    id: 'storage',
+    name: 'Storage',
+    label: 'Connect object storage',
+    icon: 'lucide-database',
+    title: 'Where should backups go?',
+    description: 'Pick an S3-compatible bucket for offsite backups.',
+    action: 'Next',
+    savingLabel: 'Connecting storage',
+    done: storage.connected,
+    saving: storage.saving,
+    canSave: storage.canSave,
+    save: storage.save,
+  },
+])
+
+const doneCount = computed(() => steps.value.filter((step) => step.done).length)
+
+const isVisible = computed(
+  () => loaded.value && onboarding.value !== 'dismissed' && doneCount.value < steps.value.length,
+)
+
+const progress = computed(() => (doneCount.value / steps.value.length) * 100)
+
+const isOpen = ref(false)
+const current = ref(0)
+const currentStep = computed(() => steps.value[current.value])
+
+const nodeState = (index: number) => {
+  if (steps.value[index].done) return 'done'
+  if (index === current.value) return 'current'
+
+  return index < current.value ? 'skipped' : 'upcoming'
+}
+
+const railClasses = {
+  done: 'border-outline-green-5 text-ink-green-7',
+  current: 'bg-surface-base border-dashed border-outline-gray-9 text-ink-gray-9',
+  skipped: 'border-dashed border-outline-gray-3 text-ink-gray-5',
+  upcoming: 'border-dashed border-outline-gray-3 text-ink-gray-5',
+}
+
+const statusLabels = {
+  done: 'Done',
+  current: 'In progress',
+  skipped: 'Skipped',
+  upcoming: 'Up next',
+}
+
+const dialogOpen = computed({
+  get: () => isOpen.value,
+  set: (open) => {
+    if (!open) minimize()
+  },
+})
+
+const firstPending = () => {
+  const index = steps.value.findIndex((step) => !step.done)
+
+  return Math.max(0, index)
+}
+
+const open = (index = firstPending()) => {
+  current.value = index
+  isOpen.value = true
+}
+
+const advance = () => {
+  const index = steps.value.findIndex((step, i) => i > current.value && !step.done)
+
+  if (index === -1) minimize()
+  else current.value = index
+}
+
+const submit = async () => {
+  const step = currentStep.value
+
+  if (step.done || (await step.save())) advance()
+}
+
+const createSite = async () => {
+  const name = site.name
+  const taskId = await site.create()
+
+  if (!taskId) return false
+
+  toast.success(`Creating ${name}. You can keep setting up meanwhile.`)
+  await loadSites()
+
+  return true
+}
+
+const saveOnboarding = async (state: string) => {
+  onboarding.value = state
+
+  try {
+    await settingsApi.update({ bench: { onboarding: state } })
+  } catch (caught) {
+    toast.error(errorMessage(caught, 'Could not save onboarding progress.'))
+  }
+}
+
+const minimize = () => {
+  isOpen.value = false
+
+  if (onboarding.value !== 'minimized') saveOnboarding('minimized')
+}
+
+const refresh = async () => {
+  if (onboarding.value === 'dismissed') return
+
+  try {
+    const [settings] = await Promise.all([
+      settingsApi.get(),
+      storage.load(),
+      github.load(),
+      loadSites(),
+    ])
+
+    onboarding.value = settings.bench.onboarding
+    loaded.value = true
+
+    if (!onboarding.value && isVisible.value && !isOpen.value) open()
+  } catch {
+    loaded.value = false
+  }
+}
+
+watch(
+  () => route.name,
+  (_name, previous) => {
+    if (previous === 'Settings') refresh()
+  },
+)
+
+watch(
+  () => isOpen.value && currentStep.value.id === 'site',
+  (showing) => {
+    if (showing) site.reset()
+  },
+)
+
+onMounted(refresh)
+</script>
+
+<template>
+  <Dialog v-model:open="dialogOpen" bare size="3xl">
+    <div class="flex sm:flex-row flex-col">
+      <aside
+        class="bg-surface-gray-1 px-7 pt-7 pb-6 border-b sm:border-r sm:border-b-0 sm:w-56 shrink-0"
+      >
+        <h2 class="text-ink-gray-8 text-base-semibold">Get started</h2>
+        <p class="flex items-center gap-1.5 mt-1 text-ink-gray-5 text-sm">
+          <CircularProgress :value="progress" />
+          {{ doneCount }} of {{ steps.length }} done
+        </p>
+
+        <ol aria-hidden="true" class="mt-6">
+          <li
+            v-for="(step, index) in steps"
+            :key="step.id"
+            class="relative gap-x-3 gap-y-0.5 grid grid-flow-col grid-rows-2 justify-start pb-5 last:pb-0 after:absolute after:top-9 after:bottom-1 after:left-4 last:after:hidden"
+            :class="
+              step.done
+                ? 'after:w-px after:bg-surface-green-7'
+                : 'after:border-l after:border-outline-gray-3 after:border-dashed'
+            "
+          >
+            <span
+              class="place-items-center grid row-span-2 border rounded-4 size-8"
+              :class="railClasses[nodeState(index)]"
+            >
+              <span class="size-4" :class="step.icon" />
+            </span>
+
+            <span
+              class="text-sm"
+              :class="index === current ? 'text-ink-gray-9 text-sm-medium' : 'text-ink-gray-7'"
+            >
+              {{ step.name }}
+            </span>
+
+            <span class="text-ink-gray-5 text-xs">{{ statusLabels[nodeState(index)] }}</span>
+          </li>
+        </ol>
+      </aside>
+
+      <div class="flex flex-col flex-1 min-w-0">
+        <section class="flex flex-col sm:min-h-80 px-7 pt-7 pb-2">
+          <h2 class="text-ink-gray-8 text-2xl-semibold">{{ currentStep.title }}</h2>
+          <p class="mt-1.5 mb-5 text-ink-gray-6 text-p-base">{{ currentStep.description }}</p>
+
+          <template v-if="currentStep.id === 'storage'">
+            <div class="gap-3 grid sm:grid-cols-2">
+              <TextInput v-model="storage.bucket" label="Bucket" placeholder="pilot-backups" />
+              <Select
+                v-model="storage.region"
+                label="Region"
+                :options="storage.regionOptions"
+                :disabled="storage.loadingRegions"
+              />
+
+              <TextInput
+                v-model="storage.endpointUrl"
+                class="sm:col-span-2"
+                label="Endpoint URL"
+                placeholder="Optional for AWS, DigitalOcean, and Hetzner"
+              />
+
+              <TextInput v-model="storage.accessKey" label="Access key" placeholder="AKIA…" />
+              <TextInput
+                v-model="storage.secretKey"
+                label="Secret key"
+                type="password"
+                :placeholder="storage.secretKeySet ? 'Saved, leave blank to keep' : undefined"
+              />
+            </div>
+
+            <ErrorMessage class="mt-4" :message="storage.error" />
+          </template>
+
+          <template v-else-if="currentStep.id === 'github'">
+            <TextInput v-model="github.username" label="GitHub username" placeholder="octocat" />
+
+            <TextInput
+              v-model="github.token"
+              class="mt-3.5"
+              label="Personal access token"
+              type="password"
+              placeholder="ghp_…"
+              @keydown.enter="submit"
+            >
+              <template #description>
+                Needs the <code>repo</code> scope.
+                <a :href="github.tokenHelpUrl" target="_blank" rel="noopener" class="underline">
+                  Generate one
+                </a>
+              </template>
+            </TextInput>
+
+            <ErrorMessage class="mt-4" :message="github.error" />
+          </template>
+
+          <template v-else>
+            <Spinner v-if="site.loading" class="mx-auto my-16 size-5 text-ink-gray-4" />
+
+            <template v-else>
+              <TextInput
+                v-if="!site.wildcardDomains.length"
+                v-model="site.name"
+                label="Site name"
+                placeholder="mysite.localhost"
+                @keydown.enter="submit"
+              />
+
+              <div v-else class="flex items-end gap-2">
+                <TextInput
+                  v-model="site.prefix"
+                  class="flex-1"
+                  label="Site name"
+                  placeholder="mysite"
+                  @keydown.enter="submit"
+                >
+                  <template v-if="site.hasSingleDomain" #suffix>
+                    <span class="text-ink-gray-5 text-sm">{{ site.wildcardDomains[0] }}</span>
+                  </template>
+                </TextInput>
+
+                <Select
+                  v-if="!site.hasSingleDomain"
+                  v-model="site.suffix"
+                  class="w-48 shrink-0"
+                  :options="site.wildcardDomains.map((domain) => ({ label: domain, value: domain }))"
+                />
+              </div>
+
+              <template v-if="site.availableApps.length">
+                <p class="flex justify-between mt-5 mb-1.5 text-ink-gray-6 text-sm">
+                  Apps
+                  <span class="text-ink-gray-5">{{ site.selectedApps.length }} selected</span>
+                </p>
+
+                <TextInput
+                  v-model="site.appSearch"
+                  class="mb-2"
+                  placeholder="Search apps"
+                  autocomplete="off"
+                >
+                  <template #prefix>
+                    <span class="size-4 text-ink-gray-5 lucide-search" />
+                  </template>
+                </TextInput>
+
+                <p
+                  v-if="!site.filteredApps.length"
+                  class="py-6 text-ink-gray-5 text-p-sm text-center"
+                >
+                  No apps match "{{ site.appSearch }}"
+                </p>
+
+                <div
+                  class="app-list content-start gap-2 grid sm:grid-cols-2 -mr-4 pr-4 pb-6 max-h-72 overflow-y-auto [scrollbar-color:var(--outline-gray-3)_transparent] [scrollbar-width:thin]"
+                >
+                  <button
+                    v-for="app in site.filteredApps"
+                    :key="app.name"
+                    type="button"
+                    :aria-pressed="site.selectedApps.includes(app.name)"
+                    class="flex items-center gap-3 p-2 border border-outline-gray-2 aria-pressed:border-outline-gray-5 rounded-4 text-left hover:bg-surface-gray-2"
+                    @click="site.toggleApp(app.name)"
+                  >
+                    <AppIcon :name="app.name" size="md" />
+
+                    <span class="flex-1 min-w-0 text-ink-gray-8 text-base truncate">
+                      {{ app.title || app.name }}
+                    </span>
+
+                    <Checkbox
+                      :model-value="site.selectedApps.includes(app.name)"
+                      class="pointer-events-none shrink-0"
+                    />
+                  </button>
+                </div>
+              </template>
+
+              <ErrorMessage class="mt-4" :message="site.error" />
+            </template>
+          </template>
+        </section>
+
+        <footer class="flex items-center gap-2 px-7 pt-4.5 pb-5">
+          <Button
+            v-if="current > 0"
+            class="mr-auto -ml-2"
+            variant="ghost"
+            icon-left="lucide-arrow-left"
+            label="Back"
+            @click="current--"
+          />
+          <Button
+            v-else
+            class="mr-auto -ml-2"
+            variant="ghost"
+            label="Finish later"
+            @click="minimize"
+          />
+
+          <Button
+            v-if="!currentStep.done && current < steps.length - 1"
+            variant="ghost"
+            label="Skip"
+            @click="advance"
+          />
+
+          <Button
+            variant="solid"
+            :label="currentStep.done ? 'Next' : currentStep.action"
+            :loading="currentStep.saving"
+            :loading-text="currentStep.savingLabel"
+            :disabled="!currentStep.done && !currentStep.canSave"
+            @click="submit"
+          />
+        </footer>
+      </div>
+    </div>
+  </Dialog>
+
+  <SidebarCard
+    v-if="isVisible && onboarding === 'minimized'"
+    dismissible
+    class="group-data-[state=collapsed]:hidden dark:!bg-surface-gray-1 mx-2 mb-2 !border-0 shadow-sm"
+    @dismiss="saveOnboarding('dismissed')"
+  >
+    <template #title>
+      <button type="button" @click="open()">Get started</button>
+    </template>
+
+    <template #prefix>
+      <CircularProgress :value="progress" />
+    </template>
+
+    <template #description>{{ doneCount }} of {{ steps.length }} done</template>
+
+    <template #actions>
+      <template v-for="(step, index) in steps" :key="step.id">
+        <p
+          v-if="step.done"
+          class="flex items-center gap-2 py-1.5 text-ink-gray-5 text-sm before:size-4 before:text-ink-green-6 before:lucide-circle-check"
+        >
+          {{ step.label }}
+        </p>
+
+        <button
+          v-else
+          type="button"
+          class="flex items-center gap-2 -mx-1.5 px-1.5 py-1.5 rounded-4 hover:bg-surface-gray-2 text-ink-gray-8 text-sm before:size-4 before:text-ink-gray-4 before:lucide-circle-dashed after:ml-auto after:size-3.5 after:text-ink-gray-4 hover:after:text-ink-gray-6 after:lucide-chevron-right"
+          @click="open(index)"
+        >
+          {{ step.label }}
+        </button>
+      </template>
+    </template>
+  </SidebarCard>
+</template>
+
+<style scoped>
+.app-list {
+  mask-image: linear-gradient(to bottom, #000 calc(100% - 1.5rem), transparent);
+}
+</style>
diff --git a/admin/frontend/dashboard/src/components/navigation/Sidebar.vue b/admin/frontend/dashboard/src/components/navigation/Sidebar.vue
index da3e07d95..ac2f94f08 100644
--- a/admin/frontend/dashboard/src/components/navigation/Sidebar.vue
+++ b/admin/frontend/dashboard/src/components/navigation/Sidebar.vue
@@ -5,6 +5,7 @@ import { Sidebar, SidebarCollapseToggle, SidebarHeader, SidebarItem, SidebarLabe
 
 import PilotLogo from '@/components/icons/Pilot.vue'
 import NotificationsPanel from '@/components/notifications/NotificationsPanel.vue'
+import SetupChecklist from '@/components/navigation/SetupChecklist.vue'
 
 import { sidebarSections } from '@/components/navigation/list'
 import { useAppMenu } from '@/components/navigation/useAppMenu'
@@ -36,7 +37,7 @@ const isActive = (to: string) => route.path === to || route.path.startsWith(`${t
 <template>
   <Sidebar
     :collapsible="!isMobile"
-    class="border-r dark:border-outline-gray-2"
+    class="group border-r"
     :class="isMobile ? '!w-full !border-r-0 mobile-sidebar bg-transparent' : ''"
   >
     <SidebarHeader
@@ -80,6 +81,8 @@ const isActive = (to: string) => route.path === to || route.path.startsWith(`${t
       </template>
     </nav>
 
+    <SetupChecklist />
+
     <SidebarCollapseToggle v-if="!isMobile" class="mt-auto mx-2 mb-2" />
   </Sidebar>
 </template>
diff --git a/admin/frontend/dashboard/src/components/settings/S3Bucket.vue b/admin/frontend/dashboard/src/components/settings/S3Bucket.vue
index 8a23e6770..ae09cc901 100644
--- a/admin/frontend/dashboard/src/components/settings/S3Bucket.vue
+++ b/admin/frontend/dashboard/src/components/settings/S3Bucket.vue
@@ -1,138 +1,31 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue'
-import { Alert, Button, ErrorMessage, Select, Spinner, TextInput, toast } from 'frappe-ui'
-
-import { settingsApi } from '@/api/settings'
-import type { S3ProviderOption } from '@/types/settings'
-import { errorMessage } from '@/utils/error'
-
-const loading = ref(true)
-const saving = ref(false)
-const disconnecting = ref(false)
-const error = ref('')
-const accessKey = ref('')
-const secretKey = ref('')
-const bucket = ref('')
-const provider = ref('')
-const region = ref('')
-const endpointUrl = ref('')
-const secretKeySet = ref(false)
-const providers = ref<S3ProviderOption[]>([])
-const loadingRegions = ref(false)
-
-const connected = computed(() => Boolean(accessKey.value && bucket.value && secretKeySet.value))
-const providerLabel = computed(
-  () => providers.value.find((p) => p.value === provider.value)?.label || provider.value,
-)
-const providerOptions = computed(() =>
-  providers.value.map((p) => ({ label: p.label, value: p.value })),
-)
-const regionOptions = computed(
-  () =>
-    providers.value
-      .find((p) => p.value === provider.value)
-      ?.regions.map((r) => ({ label: r, value: r })) || [],
-)
-
-// Frappe regions come from Central, so they load only when that provider is picked.
-const loadFrappeRegions = async () => {
-  const frappe = providers.value.find((p) => p.value === 'frappe')
-  if (!frappe) return
-
-  loadingRegions.value = true
-  try {
-    frappe.regions = await settingsApi.frappeStorageRegions()
-  } catch (e) {
-    error.value = errorMessage(e, 'Could not read Frappe storage regions from Central.')
-  } finally {
-    loadingRegions.value = false
-  }
-}
-
-// Also on `providers`: a reload after save replaces the list and empties Frappe's regions.
-watch([provider, providers], async ([current], [previous]) => {
-  if (previous && current !== previous) {
-    endpointUrl.value = ''
-  }
-  if (current === 'frappe') {
-    await loadFrappeRegions()
-  }
-  if (!regionOptions.value.some((o) => o.value === region.value)) {
-    region.value = regionOptions.value[0]?.value || ''
-  }
-})
-
-// Every required field, so Connect stays dead until the form could succeed.
-const canSave = computed(
-  () =>
-    Boolean(accessKey.value.trim()) &&
-    Boolean(bucket.value.trim()) &&
-    Boolean(provider.value) &&
-    Boolean(region.value) &&
-    (secretKeySet.value || Boolean(secretKey.value.trim())),
-)
-
-const load = async () => {
-  loading.value = true
-  try {
-    const data = await settingsApi.get()
-    providers.value = data.s3_providers || []
-    const s3 = data.s3 || {}
-    accessKey.value = s3.access_key || ''
-    bucket.value = s3.bucket || ''
-    provider.value = s3.provider || providers.value[0]?.value || ''
-    region.value = s3.region || ''
-    endpointUrl.value = s3.endpoint_url || ''
-    secretKeySet.value = !!s3.secret_key_set
-  } catch (e) {
-    error.value = errorMessage(e, 'Could not load settings.')
-  } finally {
-    loading.value = false
-  }
-}
-
-const save = async () => {
-  saving.value = true
-  error.value = ''
-  try {
-    await settingsApi.update({
-      s3: {
-        access_key: accessKey.value.trim(),
-        secret_key: secretKey.value.trim(),
-        bucket: bucket.value.trim(),
-        provider: provider.value,
-        region: region.value,
-        endpoint_url: endpointUrl.value.trim(),
-      },
-    })
-    secretKey.value = ''
-    toast.success('Object storage settings saved')
-    await load()
-  } catch (e) {
-    error.value = errorMessage(e, 'Could not save object storage settings.')
-  } finally {
-    saving.value = false
-  }
-}
-
-const disconnect = async () => {
-  disconnecting.value = true
-  try {
-    await settingsApi.update({ s3: { disconnect: true } })
-    accessKey.value = ''
-    secretKey.value = ''
-    bucket.value = ''
-    provider.value = providers.value[0]?.value || ''
-    region.value = ''
-    endpointUrl.value = ''
-    secretKeySet.value = false
-    toast.success('Object storage disconnected')
-  } catch (e) {
-    toast.error(errorMessage(e, 'Could not disconnect object storage.'))
-  } finally {
-    disconnecting.value = false
-  }
-}
+import { onMounted } from 'vue'
+import { Alert, Button, ErrorMessage, Select, Spinner, TextInput } from 'frappe-ui'
+
+import { useObjectStorage } from '@/composables/settings/useObjectStorage'
+
+const {
+  loading,
+  saving,
+  disconnecting,
+  error,
+  accessKey,
+  secretKey,
+  bucket,
+  provider,
+  region,
+  endpointUrl,
+  secretKeySet,
+  loadingRegions,
+  connected,
+  providerLabel,
+  providerOptions,
+  regionOptions,
+  canSave,
+  load,
+  save,
+  disconnect,
+} = useObjectStorage()
 
 onMounted(load)
 </script>
@@ -166,22 +59,12 @@ onMounted(load)
         <p class="text-ink-gray-5 text-p-sm">{{ providerLabel }} · Access key {{ accessKey }}</p>
       </div>
 
-      <Button
-        class="flex-1 sm:flex-none"
-        theme="red"
-        :loading="disconnecting"
-        @click="disconnect"
+      <Button class="flex-1 sm:flex-none" theme="red" :loading="disconnecting" @click="disconnect"
         >Disconnect</Button
       >
     </div>
 
     <div class="space-y-4">
-      <TextInput label="Bucket" v-model="bucket" placeholder="storage-bucket" />
-      <TextInput
-        label="Endpoint URL"
-        v-model="endpointUrl"
-        placeholder="Optional for AWS, DigitalOcean, and Hetzner"
-      />
       <div class="flex sm:flex-row flex-col gap-4">
         <Select label="Provider" v-model="provider" :options="providerOptions" class="w-full" />
         <Select
@@ -194,13 +77,15 @@ onMounted(load)
         />
       </div>
 
+      <TextInput label="Bucket" v-model="bucket" placeholder="storage-bucket" />
+      <TextInput
+        label="Endpoint URL"
+        v-model="endpointUrl"
+        placeholder="Optional for AWS, DigitalOcean, and Hetzner"
+      />
+
       <div class="flex sm:flex-row flex-col gap-4">
-        <TextInput
-          label="Access Key"
-          v-model="accessKey"
-          placeholder="AKIA…"
-          class="w-full"
-        />
+        <TextInput label="Access Key" v-model="accessKey" placeholder="AKIA…" class="w-full" />
         <TextInput
           label="Secret Key"
           type="password"
diff --git a/admin/frontend/dashboard/src/composables/settings/useGithubConnection.ts b/admin/frontend/dashboard/src/composables/settings/useGithubConnection.ts
new file mode 100644
index 000000000..d1c04b9b0
--- /dev/null
+++ b/admin/frontend/dashboard/src/composables/settings/useGithubConnection.ts
@@ -0,0 +1,117 @@
+import { computed, ref } from 'vue'
+import { toast } from 'frappe-ui'
+
+import { apiErrorMessage, hasApiError } from '@/api/client'
+import { gitApi } from '@/api/git'
+import type { GitConnection } from '@/types/git'
+import { errorMessage } from '@/utils/error'
+
+export const useGithubConnection = () => {
+  const loading = ref(true)
+  const connecting = ref(false)
+  const verifying = ref(false)
+  const error = ref('')
+  const status = ref<GitConnection | null>(null)
+  const username = ref('')
+  const token = ref('')
+
+  const viaCentral = computed(() => status.value?.auth_type === 'github_app')
+  const connected = computed(() =>
+    Boolean(status.value?.connected && (viaCentral.value || status.value?.is_token_valid)),
+  )
+  const tokenHelpUrl = computed(
+    () =>
+      status.value?.providers?.github ||
+      'https://github.com/settings/tokens/new?scopes=repo&description=Bench+CLI',
+  )
+
+  const load = async () => {
+    loading.value = true
+
+    try {
+      status.value = await gitApi.status()
+
+      if (status.value?.username && !viaCentral.value) username.value = status.value.username
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const connect = async () => {
+    if (!token.value.trim()) {
+      error.value = 'Paste a personal access token to connect.'
+
+      return false
+    }
+
+    connecting.value = true
+    error.value = ''
+
+    try {
+      const result = await gitApi.connect('github', token.value.trim(), username.value.trim())
+
+      if (hasApiError(result)) {
+        error.value = apiErrorMessage(result, 'Could not verify token.')
+
+        return false
+      }
+
+      token.value = ''
+      status.value = { ...result, central: status.value?.central }
+      toast.success(`Connected as ${result.username}`)
+
+      return true
+    } catch (e) {
+      error.value = errorMessage(e, 'Could not verify token.')
+
+      return false
+    } finally {
+      connecting.value = false
+    }
+  }
+
+  const verifyConnection = async () => {
+    verifying.value = true
+
+    try {
+      const result = await gitApi.repos()
+
+      if (Array.isArray(result)) toast.success('GitHub connection is working')
+      else toast.error(apiErrorMessage(result, 'GitHub connection failed'))
+    } catch (e) {
+      toast.error(errorMessage(e, 'GitHub connection failed'))
+    } finally {
+      await load()
+      verifying.value = false
+    }
+  }
+
+  const disconnect = async () => {
+    const response = await gitApi.disconnect()
+
+    if (!response.ok) {
+      toast.error(apiErrorMessage(await response.json(), 'Could not disconnect GitHub.'))
+
+      return
+    }
+
+    username.value = ''
+    await load()
+  }
+
+  return {
+    loading,
+    connecting,
+    verifying,
+    error,
+    status,
+    username,
+    token,
+    connected,
+    tokenHelpUrl,
+    load,
+    connect,
+    verifyConnection,
+    disconnect,
+  }
+}
diff --git a/admin/frontend/dashboard/src/composables/settings/useObjectStorage.ts b/admin/frontend/dashboard/src/composables/settings/useObjectStorage.ts
new file mode 100644
index 000000000..b80cdcbc7
--- /dev/null
+++ b/admin/frontend/dashboard/src/composables/settings/useObjectStorage.ts
@@ -0,0 +1,172 @@
+import { computed, ref, watch } from 'vue'
+import { toast } from 'frappe-ui'
+
+import { settingsApi } from '@/api/settings'
+import type { S3ProviderOption } from '@/types/settings'
+import { errorMessage } from '@/utils/error'
+
+export const useObjectStorage = () => {
+  const loading = ref(true)
+  const saving = ref(false)
+  const disconnecting = ref(false)
+  const error = ref('')
+  const accessKey = ref('')
+  const secretKey = ref('')
+  const bucket = ref('')
+  const provider = ref('')
+  const region = ref('')
+  const endpointUrl = ref('')
+  const secretKeySet = ref(false)
+  const providers = ref<S3ProviderOption[]>([])
+  const loadingRegions = ref(false)
+
+  const connected = computed(() => Boolean(accessKey.value && bucket.value && secretKeySet.value))
+  const providerLabel = computed(
+    () => providers.value.find((p) => p.value === provider.value)?.label || provider.value,
+  )
+  const providerOptions = computed(() =>
+    providers.value.map((p) => ({ label: p.label, value: p.value })),
+  )
+  const regionOptions = computed(
+    () =>
+      providers.value
+        .find((p) => p.value === provider.value)
+        ?.regions.map((r) => ({ label: r, value: r })) || [],
+  )
+
+  const loadFrappeRegions = async () => {
+    const frappe = providers.value.find((p) => p.value === 'frappe')
+
+    if (!frappe) return
+
+    loadingRegions.value = true
+
+    try {
+      frappe.regions = await settingsApi.frappeStorageRegions()
+    } catch (e) {
+      error.value = errorMessage(e, 'Could not read Frappe storage regions from Central.')
+    } finally {
+      loadingRegions.value = false
+    }
+  }
+
+  watch([provider, providers], async ([current], [previous]) => {
+    if (previous && current !== previous) {
+      endpointUrl.value = ''
+    }
+
+    if (current === 'frappe') {
+      await loadFrappeRegions()
+    }
+
+    if (!regionOptions.value.some((o) => o.value === region.value)) {
+      region.value = regionOptions.value[0]?.value || ''
+    }
+  })
+
+  const canSave = computed(
+    () =>
+      Boolean(accessKey.value.trim()) &&
+      Boolean(bucket.value.trim()) &&
+      Boolean(provider.value) &&
+      Boolean(region.value) &&
+      (secretKeySet.value || Boolean(secretKey.value.trim())),
+  )
+
+  const load = async () => {
+    loading.value = true
+
+    try {
+      const data = await settingsApi.get()
+      const s3 = data.s3 || {}
+
+      providers.value = data.s3_providers || []
+      accessKey.value = s3.access_key || ''
+      bucket.value = s3.bucket || ''
+      provider.value = s3.provider || providers.value[0]?.value || ''
+      region.value = s3.region || ''
+      endpointUrl.value = s3.endpoint_url || ''
+      secretKeySet.value = !!s3.secret_key_set
+    } catch (e) {
+      error.value = errorMessage(e, 'Could not load settings.')
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const save = async () => {
+    saving.value = true
+    error.value = ''
+
+    try {
+      await settingsApi.update({
+        s3: {
+          access_key: accessKey.value.trim(),
+          secret_key: secretKey.value.trim(),
+          bucket: bucket.value.trim(),
+          provider: provider.value,
+          region: region.value,
+          endpoint_url: endpointUrl.value.trim(),
+        },
+      })
+
+      secretKey.value = ''
+      toast.success('Object storage settings saved')
+      await load()
+
+      return true
+    } catch (e) {
+      error.value = errorMessage(e, 'Could not save object storage settings.')
+
+      return false
+    } finally {
+      saving.value = false
+    }
+  }
+
+  const disconnect = async () => {
+    disconnecting.value = true
+
+    try {
+      await settingsApi.update({ s3: { disconnect: true } })
+
+      accessKey.value = ''
+      secretKey.value = ''
+      bucket.value = ''
+      provider.value = providers.value[0]?.value || ''
+      region.value = ''
+      endpointUrl.value = ''
+      secretKeySet.value = false
+
+      toast.success('Object storage disconnected')
+    } catch (e) {
+      toast.error(errorMessage(e, 'Could not disconnect object storage.'))
+    } finally {
+      disconnecting.value = false
+    }
+  }
+
+  return {
+    loading,
+    saving,
+    disconnecting,
+    error,
+    accessKey,
+    secretKey,
+    bucket,
+    provider,
+    region,
+    endpointUrl,
+    secretKeySet,
+    providers,
+    loadingRegions,
+    connected,
+    providerLabel,
+    providerOptions,
+    regionOptions,
+    canSave,
+    load,
+    save,
+    disconnect,
+  }
+}

From a548a5a1b8cb3361f0bd8033848c7e3c3ed9c4ac Mon Sep 17 00:00:00 2001
From: siduck <siduck@tutanota.com>
Date: Sat, 17 Oct 2026 17:42:31 +0530
Subject: [PATCH 05/17] feat(ui): prompt to connect storage on site backups

---
 .../src/components/sites/Backups.vue          | 36 ++++++++++++++++++-
 1 file changed, 35 insertions(+), 1 deletion(-)

diff --git a/admin/frontend/dashboard/src/components/sites/Backups.vue b/admin/frontend/dashboard/src/components/sites/Backups.vue
index 619979416..f08fdb4ed 100644
--- a/admin/frontend/dashboard/src/components/sites/Backups.vue
+++ b/admin/frontend/dashboard/src/components/sites/Backups.vue
@@ -1,5 +1,14 @@
 <script setup lang="ts">
-import { Badge, Button, Dialog, Dropdown, type DropdownItem, ErrorMessage, Select } from 'frappe-ui'
+import {
+  Alert,
+  Badge,
+  Button,
+  Dialog,
+  Dropdown,
+  type DropdownItem,
+  ErrorMessage,
+  Select,
+} from 'frappe-ui'
 import { computed, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { apiErrorMessage } from '@/api/client'
@@ -10,6 +19,7 @@ import ListSkeleton from '@/components/common/ListSkeleton.vue'
 import Table from '@/components/common/Table.vue'
 import BackupConfigDialog from '@/components/sites/BackupConfigDialog.vue'
 import RestoreBackupDialog from '@/components/sites/RestoreBackupDialog.vue'
+import { useObjectStorage } from '@/composables/settings/useObjectStorage'
 import { useSite } from '@/composables/sites/useSite'
 import type { Backup, BackupFile, BackupSchedule } from '@/types/siteBackups'
 import { cronToLabel } from '@/utils/backup'
@@ -34,6 +44,19 @@ const {
   setBackupsPageLength,
 } = useSite(props.siteName)
 
+const {
+  loading: storageLoading,
+  connected: storageConnected,
+  load: loadStorage,
+} = useObjectStorage()
+
+const storageAction = {
+  label: 'Connect storage',
+  onClick: () => {
+    router.push({ name: 'Settings', params: { section: 'general', subSection: 's3-bucket' } })
+  },
+}
+
 const pageLengths = [20, 50, 100].map((n) => ({ label: `${n} per page`, value: n }))
 
 const backingUp = ref(false)
@@ -197,10 +220,21 @@ const confirmDelete = async () => {
 onMounted(() => {
   loadBackups()
   loadConfig()
+  loadStorage()
 })
 </script>
 
 <template>
+  <Alert
+    v-if="!storageLoading && !storageConnected"
+    class="mb-4 border border-outline-gray-2"
+    theme="blue"
+    title="Backups stay on this server"
+    description="Connect object storage to keep a copy offsite."
+    :dismissible="false"
+    :primary-action="storageAction"
+  />
+
   <div class="flex sm:flex-row flex-col sm:justify-between sm:items-center gap-3 mb-4">
     <div>
       <p class="font-medium text-ink-gray-8">Automated backups</p>

From 1b6236587f39cdad2bd0abf2baf4f8f62bbff074 Mon Sep 17 00:00:00 2001
From: siduck <siduck@tutanota.com>
Date: Sat, 17 Oct 2026 17:42:36 +0530
Subject: [PATCH 06/17] fix(ui): keep input colours on browser autofill

---
 admin/frontend/dashboard/src/index.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/admin/frontend/dashboard/src/index.css b/admin/frontend/dashboard/src/index.css
index ff23ec6d5..3358489f9 100644
--- a/admin/frontend/dashboard/src/index.css
+++ b/admin/frontend/dashboard/src/index.css
@@ -133,3 +133,9 @@ body {
 .hover-scrollbar::-webkit-scrollbar-track {
   background: transparent;
 }
+
+input:autofill {
+  filter: none;
+  -webkit-text-fill-color: var(--ink-gray-8);
+  transition: background-color 600000s 0s;
+}

From c96493c3237211b899f2347390d1921f019c6740 Mon Sep 17 00:00:00 2001
From: siduck <siduck@tutanota.com>
Date: Sat, 17 Oct 2026 17:49:25 +0530
Subject: [PATCH 07/17] fix(ui): Make dialogs bg-surface-base

---
 admin/frontend/dashboard/src/index.css              |  5 +++++
 admin/frontend/dashboard/src/layouts/MainLayout.vue | 11 ++++++++---
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/admin/frontend/dashboard/src/index.css b/admin/frontend/dashboard/src/index.css
index 3358489f9..b8e791e43 100644
--- a/admin/frontend/dashboard/src/index.css
+++ b/admin/frontend/dashboard/src/index.css
@@ -139,3 +139,8 @@ input:autofill {
   -webkit-text-fill-color: var(--ink-gray-8);
   transition: background-color 600000s 0s;
 }
+
+.dialog-content,
+.dialog-content .bg-surface-elevation-1 {
+	@apply bg-surface-base;
+}
diff --git a/admin/frontend/dashboard/src/layouts/MainLayout.vue b/admin/frontend/dashboard/src/layouts/MainLayout.vue
index e50d0e023..c645c881e 100644
--- a/admin/frontend/dashboard/src/layouts/MainLayout.vue
+++ b/admin/frontend/dashboard/src/layouts/MainLayout.vue
@@ -81,7 +81,7 @@ const breadcrumbsFromRouteMeta = ({ title = '' }) => {
 <template>
   <MobileShell v-if="isMobile">
     <header
-      class="sticky top-0 z-20 flex min-h-12 flex-col justify-center border-b border-outline-gray-2 bg-surface-base px-3 md:px-4"
+      class="sticky top-0 z-20 flex min-h-12 flex-col justify-center border-b bg-surface-base px-3 md:px-4"
     >
       <div class="flex items-center justify-between">
         <div v-if="route.name == 'Home'" class="flex items-center gap-2">
@@ -111,7 +111,12 @@ const breadcrumbsFromRouteMeta = ({ title = '' }) => {
 
     <template #nav>
       <MobileNav class="!bg-surface-base">
-        <MobileNavItem label="Home" icon="lucide-house" route="/home" :active="route.name == 'Home'" />
+        <MobileNavItem
+          label="Home"
+          icon="lucide-house"
+          route="/home"
+          :active="route.name == 'Home'"
+        />
         <MobileNavItem label="Search" icon="lucide-search" @click="openSearch" />
         <NotificationsPanel mobile />
         <MobileNavItem
@@ -134,7 +139,7 @@ const breadcrumbsFromRouteMeta = ({ title = '' }) => {
     </template>
 
     <header
-      class="sticky top-0 z-20 flex min-h-12 flex-col justify-center border-b border-outline-gray-2 bg-surface-base px-3 md:px-4"
+      class="sticky top-0 z-20 flex min-h-12 flex-col justify-center border-b bg-surface-base px-3 md:px-4"
     >
       <div class="flex flex-1 items-center gap-1">
         <Breadcrumbs :items="breadcrumbs" />

From 6d09991324da26f78e994e2931c132ee5640a2dd Mon Sep 17 00:00:00 2001
From: siduck <siduck@tutanota.com>
Date: Mon, 19 Oct 2026 04:30:29 +0530
Subject: [PATCH 08/17] feat(ui): onboarding github via frappe cloud and
 background site

---
 .../components/navigation/SetupChecklist.vue  | 185 ++++++++++++------
 .../settings/useGithubConnection.ts           |  25 +++
 .../src/composables/sites/useNewSite.ts       |   2 +
 3 files changed, 155 insertions(+), 57 deletions(-)

diff --git a/admin/frontend/dashboard/src/components/navigation/SetupChecklist.vue b/admin/frontend/dashboard/src/components/navigation/SetupChecklist.vue
index 990ea8b0c..2a294b8a1 100644
--- a/admin/frontend/dashboard/src/components/navigation/SetupChecklist.vue
+++ b/admin/frontend/dashboard/src/components/navigation/SetupChecklist.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref, watch } from 'vue'
-import { useRoute } from 'vue-router'
 import {
   Button,
   Checkbox,
@@ -12,11 +10,11 @@ import {
   TextInput,
   toast,
 } from 'frappe-ui'
-
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { settingsApi } from '@/api/settings'
 import AppIcon from '@/components/apps/AppIcon.vue'
 import CircularProgress from '@/components/common/CircularProgress.vue'
-
-import { settingsApi } from '@/api/settings'
 import { useGithubConnection } from '@/composables/settings/useGithubConnection'
 import { useObjectStorage } from '@/composables/settings/useObjectStorage'
 import { useNewSite } from '@/composables/sites/useNewSite'
@@ -24,15 +22,38 @@ import { useSites } from '@/composables/sites/useSites'
 import { errorMessage } from '@/utils/error'
 
 const route = useRoute()
+const router = useRouter()
 const { sites, load: loadSites } = useSites()
 const storage = reactive(useObjectStorage())
 const github = reactive(useGithubConnection())
 const site = reactive(useNewSite())
 
 const onboarding = ref('')
+const siteStarted = ref(false)
+const useToken = ref(false)
+const origin = window.location.origin
+
+const githubViaCloud = computed(() => github.centralAvailable && !useToken.value)
+
 const loaded = ref(false)
 
 const steps = computed(() => [
+  {
+    id: 'github',
+    name: 'GitHub',
+    label: 'Connect GitHub',
+    icon: 'lucide-git-branch',
+    title: 'Connect your GitHub account',
+    description: 'Lets Pilot install apps from private repos.',
+    action: githubViaCloud.value ? 'Connect GitHub' : 'Next',
+    savingLabel: githubViaCloud.value ? 'Opening Frappe Cloud' : 'Verifying token',
+    done: github.connected,
+    saving: github.connecting || github.redirecting,
+    canSave: githubViaCloud.value || Boolean(github.token.trim()),
+    save: githubViaCloud.value
+      ? () => github.connectViaCentral(`${origin}${route.path}?github=connected`)
+      : github.connect,
+  },
   {
     id: 'site',
     name: 'First site',
@@ -41,26 +62,12 @@ const steps = computed(() => [
     title: 'Launch your first site',
     description: 'Pick a name and apps. Pilot handles the rest.',
     action: 'Create site',
-    savingLabel: 'Creating site',
-    done: sites.value.length > 0,
-    saving: site.creating,
-    canSave: Boolean(site.name),
+    savingLabel: undefined,
+    done: siteStarted.value || sites.value.length > 0,
+    saving: false,
+    canSave: !site.nameError,
     save: createSite,
   },
-  {
-    id: 'github',
-    name: 'GitHub',
-    label: 'Connect GitHub',
-    icon: 'lucide-git-branch',
-    title: 'Connect your GitHub account',
-    description: 'Lets Pilot install apps from private repos.',
-    action: 'Next',
-    savingLabel: 'Verifying token',
-    done: github.connected,
-    saving: github.connecting,
-    canSave: Boolean(github.token.trim()),
-    save: github.connect,
-  },
   {
     id: 'storage',
     name: 'Storage',
@@ -99,8 +106,8 @@ const nodeState = (index: number) => {
 const railClasses = {
   done: 'border-outline-green-5 text-ink-green-7',
   current: 'bg-surface-base border-dashed border-outline-gray-9 text-ink-gray-9',
-  skipped: 'border-dashed border-outline-gray-3 text-ink-gray-5',
-  upcoming: 'border-dashed border-outline-gray-3 text-ink-gray-5',
+  skipped: 'border-dashed border-outline-gray-4 text-ink-gray-5',
+  upcoming: 'border-dashed border-outline-gray-4 text-ink-gray-5',
 }
 
 const statusLabels = {
@@ -126,6 +133,8 @@ const firstPending = () => {
 const open = (index = firstPending()) => {
   current.value = index
   isOpen.value = true
+
+  loadSites()
 }
 
 const advance = () => {
@@ -143,12 +152,20 @@ const submit = async () => {
 
 const createSite = async () => {
   const name = site.name
-  const taskId = await site.create()
 
-  if (!taskId) return false
+  siteStarted.value = true
+
+  site.create().then((taskId) => {
+    if (!taskId) {
+      siteStarted.value = false
+      current.value = steps.value.findIndex((step) => step.id === 'site')
 
-  toast.success(`Creating ${name}. You can keep setting up meanwhile.`)
-  await loadSites()
+      return
+    }
+
+    toast.success(`Creating ${name} in the background`)
+    loadSites()
+  })
 
   return true
 }
@@ -183,7 +200,15 @@ const refresh = async () => {
     onboarding.value = settings.bench.onboarding
     loaded.value = true
 
-    if (!onboarding.value && isVisible.value && !isOpen.value) open()
+    const returnedFromGithub = route.query.github === 'connected'
+
+    if (returnedFromGithub) {
+      router.replace({ query: { ...route.query, github: undefined } })
+
+      if (github.viaCentral) toast.success('GitHub connected through Frappe Cloud')
+    }
+
+    if ((returnedFromGithub || !onboarding.value) && isVisible.value && !isOpen.value) open()
   } catch {
     loaded.value = false
   }
@@ -196,12 +221,9 @@ watch(
   },
 )
 
-watch(
-  () => isOpen.value && currentStep.value.id === 'site',
-  (showing) => {
-    if (showing) site.reset()
-  },
-)
+watch(isOpen, (opened) => {
+  if (opened) site.reset()
+})
 
 onMounted(refresh)
 </script>
@@ -215,7 +237,8 @@ onMounted(refresh)
         <h2 class="text-ink-gray-8 text-base-semibold">Get started</h2>
         <p class="flex items-center gap-1.5 mt-1 text-ink-gray-5 text-sm">
           <CircularProgress :value="progress" />
-          {{ doneCount }} of {{ steps.length }} done
+          {{ doneCount }}
+          of {{ steps.length }} done
         </p>
 
         <ol aria-hidden="true" class="mt-6">
@@ -226,7 +249,7 @@ onMounted(refresh)
             :class="
               step.done
                 ? 'after:w-px after:bg-surface-green-7'
-                : 'after:border-l after:border-outline-gray-3 after:border-dashed'
+                : 'after:border-l after:border-outline-gray-4 after:border-dashed'
             "
           >
             <span
@@ -282,26 +305,73 @@ onMounted(refresh)
             <ErrorMessage class="mt-4" :message="storage.error" />
           </template>
 
+          <template v-else-if="currentStep.id === 'github' && github.viaCentral">
+            <p class="mb-4 text-ink-gray-7 text-p-base">
+              Connected through Frappe Cloud. Pilot can read these repos.
+            </p>
+
+            <div class="space-y-4 -mr-4 pr-4 max-h-64 overflow-y-auto">
+              <ul v-for="account in github.centralAccounts" :key="account.account">
+                <li class="mb-1 text-ink-gray-5 text-sm-medium">{{ account.account }}</li>
+
+                <li
+                  v-for="repository in account.repositories"
+                  :key="repository"
+                  class="flex items-center gap-2 py-1.5 text-ink-gray-8 text-base before:size-4 before:text-ink-gray-5 before:lucide-book-marked"
+                >
+                  {{ repository.slice(account.account.length + 1) }}
+                </li>
+              </ul>
+            </div>
+
+            <Button
+              class="self-start mt-auto -ml-2"
+              variant="ghost"
+              icon-left="lucide-settings-2"
+              label="Manage repositories"
+              :loading="github.redirecting"
+              @click="github.connectViaCentral(`${origin}${route.path}?github=connected`)"
+            />
+          </template>
+
           <template v-else-if="currentStep.id === 'github'">
-            <TextInput v-model="github.username" label="GitHub username" placeholder="octocat" />
-
-            <TextInput
-              v-model="github.token"
-              class="mt-3.5"
-              label="Personal access token"
-              type="password"
-              placeholder="ghp_…"
-              @keydown.enter="submit"
+            <ol
+              v-if="githubViaCloud"
+              class="space-y-3 pl-5 marker:text-ink-gray-5 text-ink-gray-7 text-p-base list-decimal"
             >
-              <template #description>
-                Needs the <code>repo</code> scope.
-                <a :href="github.tokenHelpUrl" target="_blank" rel="noopener" class="underline">
-                  Generate one
-                </a>
-              </template>
-            </TextInput>
+              <li>Frappe Cloud opens and asks GitHub which repos to share.</li>
+              <li>Pick the repos that hold your Frappe apps. Pilot only gets read access.</li>
+              <li>You land back here to create your first site.</li>
+            </ol>
+
+            <template v-else>
+              <TextInput v-model="github.username" label="GitHub username" placeholder="octocat" />
+
+              <TextInput
+                v-model="github.token"
+                class="mt-3.5"
+                label="Personal access token"
+                type="password"
+                placeholder="ghp_…"
+                @keydown.enter="submit"
+              >
+                <template #description>
+                  Needs the <code>repo</code> scope.
+                  <a :href="github.tokenHelpUrl" target="_blank" rel="noopener" class="underline">
+                    Generate one
+                  </a>
+                </template>
+              </TextInput>
+            </template>
 
             <ErrorMessage class="mt-4" :message="github.error" />
+
+            <Button
+              v-if="github.centralAvailable && !github.connected"
+              class="self-start mt-auto -ml-2"
+              :label="useToken ? 'Use Frappe Cloud instead' : 'Use a token instead'"
+              @click="useToken = !useToken"
+            />
           </template>
 
           <template v-else>
@@ -356,13 +426,14 @@ onMounted(refresh)
 
                 <p
                   v-if="!site.filteredApps.length"
-                  class="py-6 text-ink-gray-5 text-p-sm text-center"
+                  class="place-items-center grid h-72 text-ink-gray-5 text-p-sm"
                 >
                   No apps match "{{ site.appSearch }}"
                 </p>
 
                 <div
-                  class="app-list content-start gap-2 grid sm:grid-cols-2 -mr-4 pr-4 pb-6 max-h-72 overflow-y-auto [scrollbar-color:var(--outline-gray-3)_transparent] [scrollbar-width:thin]"
+                  v-else
+                  class="app-list content-start gap-2 grid sm:grid-cols-2 -mr-4 pr-4 pb-6 h-72 overflow-y-auto [scrollbar-color:var(--outline-gray-3)_transparent] [scrollbar-width:thin]"
                 >
                   <button
                     v-for="app in site.filteredApps"
@@ -448,7 +519,7 @@ onMounted(refresh)
       <template v-for="(step, index) in steps" :key="step.id">
         <p
           v-if="step.done"
-          class="flex items-center gap-2 py-1.5 text-ink-gray-5 text-sm before:size-4 before:text-ink-green-6 before:lucide-circle-check"
+          class="flex items-center gap-2 py-1.5 text-ink-gray-5 text-sm before:size-4 before:text-ink-green-7 before:lucide-circle-check"
         >
           {{ step.label }}
         </p>
diff --git a/admin/frontend/dashboard/src/composables/settings/useGithubConnection.ts b/admin/frontend/dashboard/src/composables/settings/useGithubConnection.ts
index d1c04b9b0..57827d738 100644
--- a/admin/frontend/dashboard/src/composables/settings/useGithubConnection.ts
+++ b/admin/frontend/dashboard/src/composables/settings/useGithubConnection.ts
@@ -10,12 +10,15 @@ export const useGithubConnection = () => {
   const loading = ref(true)
   const connecting = ref(false)
   const verifying = ref(false)
+  const redirecting = ref(false)
   const error = ref('')
   const status = ref<GitConnection | null>(null)
   const username = ref('')
   const token = ref('')
 
   const viaCentral = computed(() => status.value?.auth_type === 'github_app')
+  const centralAvailable = computed(() => Boolean(status.value?.central?.available))
+  const centralAccounts = computed(() => status.value?.central?.connections ?? [])
   const connected = computed(() =>
     Boolean(status.value?.connected && (viaCentral.value || status.value?.is_token_valid)),
   )
@@ -70,6 +73,23 @@ export const useGithubConnection = () => {
     }
   }
 
+  const connectViaCentral = async (returnUrl: string) => {
+    redirecting.value = true
+    error.value = ''
+
+    try {
+      const result = await gitApi.connectViaCentral(returnUrl)
+
+      if (hasApiError(result))
+        throw new Error(apiErrorMessage(result, 'Could not reach Frappe Cloud.'))
+
+      window.location.assign(result.url)
+    } catch (e) {
+      error.value = errorMessage(e, 'Could not reach Frappe Cloud.')
+      redirecting.value = false
+    }
+  }
+
   const verifyConnection = async () => {
     verifying.value = true
 
@@ -103,14 +123,19 @@ export const useGithubConnection = () => {
     loading,
     connecting,
     verifying,
+    redirecting,
     error,
     status,
     username,
     token,
     connected,
+    viaCentral,
+    centralAvailable,
+    centralAccounts,
     tokenHelpUrl,
     load,
     connect,
+    connectViaCentral,
     verifyConnection,
     disconnect,
   }
diff --git a/admin/frontend/dashboard/src/composables/sites/useNewSite.ts b/admin/frontend/dashboard/src/composables/sites/useNewSite.ts
index 286864d3a..a374f9500 100644
--- a/admin/frontend/dashboard/src/composables/sites/useNewSite.ts
+++ b/admin/frontend/dashboard/src/composables/sites/useNewSite.ts
@@ -30,6 +30,7 @@ export const useNewSite = () => {
   const error = ref('')
 
   const hasSingleDomain = computed(() => wildcardDomains.value.length === 1)
+  const nameError = computed(() => validate(name.value.trim()))
   const availableApps = computed(() => buildSiteAppChoices(registry.value, benchApps.value))
   const filteredApps = computed(() => {
     const query = appSearch.value.trim().toLowerCase()
@@ -124,6 +125,7 @@ export const useNewSite = () => {
     creating,
     error,
     hasSingleDomain,
+    nameError,
     availableApps,
     filteredApps,
     reset,

From b43bbd3b6461b7429475ab47820a5b5dfca8d30c Mon Sep 17 00:00:00 2001
From: siduck <siduck@tutanota.com>
Date: Fri, 23 Oct 2026 11:43:30 +0530
Subject: [PATCH 09/17] refactor(ui): Add nice svg illustrations for onboarding
 dialog

---
 .../components/navigation/SetupChecklist.vue  | 181 ++++++-----
 .../navigation/SetupIllustration.vue          | 288 ++++++++++++++++++
 .../composables/settings/useObjectStorage.ts  |  14 +-
 .../src/composables/sites/useNewSite.ts       |   2 +
 4 files changed, 408 insertions(+), 77 deletions(-)
 create mode 100644 admin/frontend/dashboard/src/components/navigation/SetupIllustration.vue

diff --git a/admin/frontend/dashboard/src/components/navigation/SetupChecklist.vue b/admin/frontend/dashboard/src/components/navigation/SetupChecklist.vue
index 2a294b8a1..6f969d2d7 100644
--- a/admin/frontend/dashboard/src/components/navigation/SetupChecklist.vue
+++ b/admin/frontend/dashboard/src/components/navigation/SetupChecklist.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import {
   Button,
   Checkbox,
@@ -10,11 +12,12 @@ import {
   TextInput,
   toast,
 } from 'frappe-ui'
-import { computed, onMounted, reactive, ref, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { settingsApi } from '@/api/settings'
+
 import AppIcon from '@/components/apps/AppIcon.vue'
 import CircularProgress from '@/components/common/CircularProgress.vue'
+import SetupIllustration from '@/components/navigation/SetupIllustration.vue'
+
+import { settingsApi } from '@/api/settings'
 import { useGithubConnection } from '@/composables/settings/useGithubConnection'
 import { useObjectStorage } from '@/composables/settings/useObjectStorage'
 import { useNewSite } from '@/composables/sites/useNewSite'
@@ -37,15 +40,32 @@ const githubViaCloud = computed(() => github.centralAvailable && !useToken.value
 
 const loaded = ref(false)
 
+const githubSteps = [
+  {
+    icon: 'lucide-key-round',
+    title: 'Authorize on GitHub',
+    description: 'A GitHub window asks which repos to share.',
+  },
+  {
+    icon: 'lucide-folder-git-2',
+    title: 'Pick your app repos',
+    description: 'Only the repos that hold your Frappe apps.',
+  },
+  {
+    icon: 'lucide-undo-2',
+    title: 'Land back here',
+    description: 'Straight on to storage and your first site.',
+  },
+]
+
 const steps = computed(() => [
   {
     id: 'github',
     name: 'GitHub',
     label: 'Connect GitHub',
-    icon: 'lucide-git-branch',
-    title: 'Connect your GitHub account',
-    description: 'Lets Pilot install apps from private repos.',
-    action: githubViaCloud.value ? 'Connect GitHub' : 'Next',
+    title: 'Connect your GitHub',
+    description: 'Pilot installs your Frappe apps straight from private repos. Takes about a minute.',
+    action: githubViaCloud.value ? 'Connect GitHub' : 'Connect',
     savingLabel: githubViaCloud.value ? 'Opening Frappe Cloud' : 'Verifying token',
     done: github.connected,
     saving: github.connecting || github.redirecting,
@@ -54,11 +74,23 @@ const steps = computed(() => [
       ? () => github.connectViaCentral(`${origin}${route.path}?github=connected`)
       : github.connect,
   },
+  {
+    id: 'storage',
+    name: 'Storage',
+    label: 'Connect object storage',
+    title: 'Where should backups go?',
+    description: 'Pick an S3-compatible bucket for offsite backups.',
+    action: 'Continue',
+    savingLabel: 'Connecting storage',
+    done: storage.connected,
+    saving: storage.saving,
+    canSave: storage.canSave,
+    save: storage.save,
+  },
   {
     id: 'site',
     name: 'First site',
     label: 'Create your first site',
-    icon: 'lucide-rocket',
     title: 'Launch your first site',
     description: 'Pick a name and apps. Pilot handles the rest.',
     action: 'Create site',
@@ -68,20 +100,6 @@ const steps = computed(() => [
     canSave: !site.nameError,
     save: createSite,
   },
-  {
-    id: 'storage',
-    name: 'Storage',
-    label: 'Connect object storage',
-    icon: 'lucide-database',
-    title: 'Where should backups go?',
-    description: 'Pick an S3-compatible bucket for offsite backups.',
-    action: 'Next',
-    savingLabel: 'Connecting storage',
-    done: storage.connected,
-    saving: storage.saving,
-    canSave: storage.canSave,
-    save: storage.save,
-  },
 ])
 
 const doneCount = computed(() => steps.value.filter((step) => step.done).length)
@@ -100,21 +118,22 @@ const nodeState = (index: number) => {
   if (steps.value[index].done) return 'done'
   if (index === current.value) return 'current'
 
-  return index < current.value ? 'skipped' : 'upcoming'
-}
-
-const railClasses = {
-  done: 'border-outline-green-5 text-ink-green-7',
-  current: 'bg-surface-base border-dashed border-outline-gray-9 text-ink-gray-9',
-  skipped: 'border-dashed border-outline-gray-4 text-ink-gray-5',
-  upcoming: 'border-dashed border-outline-gray-4 text-ink-gray-5',
+  return 'upcoming'
 }
 
-const statusLabels = {
-  done: 'Done',
-  current: 'In progress',
-  skipped: 'Skipped',
-  upcoming: 'Up next',
+const nodeStyles = {
+  done: {
+    classes: 'bg-surface-green-2 border-outline-green-3 text-ink-green-6',
+    icon: 'lucide-check',
+  },
+  current: {
+    classes: 'border-outline-gray-7 text-ink-gray-8',
+    icon: '',
+  },
+  upcoming: {
+    classes: 'border-dashed border-outline-gray-4 text-ink-gray-5',
+    icon: '',
+  },
 }
 
 const dialogOpen = computed({
@@ -151,8 +170,6 @@ const submit = async () => {
 }
 
 const createSite = async () => {
-  const name = site.name
-
   siteStarted.value = true
 
   site.create().then((taskId) => {
@@ -163,7 +180,6 @@ const createSite = async () => {
       return
     }
 
-    toast.success(`Creating ${name} in the background`)
     loadSites()
   })
 
@@ -229,52 +245,50 @@ onMounted(refresh)
 </script>
 
 <template>
-  <Dialog v-model:open="dialogOpen" bare size="3xl">
-    <div class="flex sm:flex-row flex-col">
+  <Dialog v-model:open="dialogOpen" bare size="4xl">
+    <div class="flex">
       <aside
-        class="bg-surface-gray-1 px-7 pt-7 pb-6 border-b sm:border-r sm:border-b-0 sm:w-56 shrink-0"
+        class="max-sm:hidden flex flex-col bg-[color-mix(in_oklab,var(--surface-base)_97%,var(--ink-gray-9))] p-8 border-r w-96 shrink-0"
       >
-        <h2 class="text-ink-gray-8 text-base-semibold">Get started</h2>
-        <p class="flex items-center gap-1.5 mt-1 text-ink-gray-5 text-sm">
-          <CircularProgress :value="progress" />
-          {{ doneCount }}
-          of {{ steps.length }} done
-        </p>
-
-        <ol aria-hidden="true" class="mt-6">
+        <ol aria-hidden="true" class="flex items-center gap-2">
           <li
             v-for="(step, index) in steps"
             :key="step.id"
-            class="relative gap-x-3 gap-y-0.5 grid grid-flow-col grid-rows-2 justify-start pb-5 last:pb-0 after:absolute after:top-9 after:bottom-1 after:left-4 last:after:hidden"
+            class="flex items-center gap-2 before:w-4 before:border-t before:transition-colors before:duration-300 first:before:hidden"
             :class="
-              step.done
-                ? 'after:w-px after:bg-surface-green-7'
-                : 'after:border-l after:border-outline-gray-4 after:border-dashed'
+              steps[index - 1]?.done
+                ? 'before:border-outline-green-5'
+                : 'before:border-dashed before:border-outline-gray-4'
             "
           >
             <span
-              class="place-items-center grid row-span-2 border rounded-4 size-8"
-              :class="railClasses[nodeState(index)]"
+              class="place-items-center grid border rounded-3 size-6 text-xs tabular-nums leading-none transition-colors duration-300 shrink-0"
+              :class="nodeStyles[nodeState(index)].classes"
             >
-              <span class="size-4" :class="step.icon" />
+              <span
+                v-if="nodeStyles[nodeState(index)].icon"
+                class="size-3.5"
+                :class="nodeStyles[nodeState(index)].icon"
+              />
+              <template v-else>{{ index + 1 }}</template>
             </span>
 
             <span
-              class="text-sm"
-              :class="index === current ? 'text-ink-gray-9 text-sm-medium' : 'text-ink-gray-7'"
+              class="whitespace-nowrap"
+              :class="index === current ? 'text-ink-gray-8 text-sm-medium' : 'text-ink-gray-6 text-sm'"
             >
               {{ step.name }}
             </span>
-
-            <span class="text-ink-gray-5 text-xs">{{ statusLabels[nodeState(index)] }}</span>
           </li>
         </ol>
+
+        <SetupIllustration class="my-auto pt-4" :step="currentStep.id" />
       </aside>
 
       <div class="flex flex-col flex-1 min-w-0">
-        <section class="flex flex-col sm:min-h-80 px-7 pt-7 pb-2">
+        <section class="flex flex-col flex-1 px-7 sm:px-8 pt-8 pb-2">
           <h2 class="text-ink-gray-8 text-2xl-semibold">{{ currentStep.title }}</h2>
-          <p class="mt-1.5 mb-5 text-ink-gray-6 text-p-base">{{ currentStep.description }}</p>
+          <p class="mt-2 mb-6 text-ink-gray-6 text-p-base">{{ currentStep.description }}</p>
 
           <template v-if="currentStep.id === 'storage'">
             <div class="gap-3 grid sm:grid-cols-2">
@@ -293,11 +307,18 @@ onMounted(refresh)
                 placeholder="Optional for AWS, DigitalOcean, and Hetzner"
               />
 
-              <TextInput v-model="storage.accessKey" label="Access key" placeholder="AKIA…" />
+              <TextInput
+                v-model="storage.accessKey"
+                label="Access key"
+                placeholder="AKIA…"
+                autocomplete="off"
+              />
+
               <TextInput
                 v-model="storage.secretKey"
                 label="Secret key"
                 type="password"
+                autocomplete="new-password"
                 :placeholder="storage.secretKeySet ? 'Saved, leave blank to keep' : undefined"
               />
             </div>
@@ -335,13 +356,21 @@ onMounted(refresh)
           </template>
 
           <template v-else-if="currentStep.id === 'github'">
-            <ol
-              v-if="githubViaCloud"
-              class="space-y-3 pl-5 marker:text-ink-gray-5 text-ink-gray-7 text-p-base list-decimal"
-            >
-              <li>Frappe Cloud opens and asks GitHub which repos to share.</li>
-              <li>Pick the repos that hold your Frappe apps. Pilot only gets read access.</li>
-              <li>You land back here to create your first site.</li>
+            <ol v-if="githubViaCloud">
+              <li
+                v-for="item in githubSteps"
+                :key="item.title"
+                class="relative gap-x-3.5 gap-y-1 grid grid-flow-col grid-rows-[auto_auto] justify-start pb-5 last:pb-0 after:absolute after:top-9 after:-bottom-px after:left-3.5 after:w-px after:bg-surface-gray-3 last:after:hidden"
+              >
+                <span
+                  class="place-items-center grid row-span-2 self-center bg-surface-gray-1 border border-outline-gray-2 rounded-full size-7 text-ink-gray-6"
+                >
+                  <span class="size-3.5" :class="item.icon" />
+                </span>
+
+                <span class="text-ink-gray-8 text-base-medium">{{ item.title }}</span>
+                <span class="text-ink-gray-5 text-sm">{{ item.description }}</span>
+              </li>
             </ol>
 
             <template v-else>
@@ -368,7 +397,7 @@ onMounted(refresh)
 
             <Button
               v-if="github.centralAvailable && !github.connected"
-              class="self-start mt-auto -ml-2"
+              class="self-start mt-6"
               :label="useToken ? 'Use Frappe Cloud instead' : 'Use a token instead'"
               @click="useToken = !useToken"
             />
@@ -426,14 +455,14 @@ onMounted(refresh)
 
                 <p
                   v-if="!site.filteredApps.length"
-                  class="place-items-center grid h-72 text-ink-gray-5 text-p-sm"
+                  class="place-items-center grid h-56 text-ink-gray-5 text-p-sm"
                 >
                   No apps match "{{ site.appSearch }}"
                 </p>
 
                 <div
                   v-else
-                  class="app-list content-start gap-2 grid sm:grid-cols-2 -mr-4 pr-4 pb-6 h-72 overflow-y-auto [scrollbar-color:var(--outline-gray-3)_transparent] [scrollbar-width:thin]"
+                  class="app-list content-start gap-2 grid sm:grid-cols-2 pb-6 h-56 overflow-y-auto [scrollbar-width:none]"
                 >
                   <button
                     v-for="app in site.filteredApps"
@@ -462,10 +491,10 @@ onMounted(refresh)
           </template>
         </section>
 
-        <footer class="flex items-center gap-2 px-7 pt-4.5 pb-5">
+        <footer class="flex items-center gap-2 px-7 sm:px-8 pt-4.5 pb-8">
           <Button
             v-if="current > 0"
-            class="mr-auto -ml-2"
+            class="mr-auto"
             variant="ghost"
             icon-left="lucide-arrow-left"
             label="Back"
@@ -473,7 +502,7 @@ onMounted(refresh)
           />
           <Button
             v-else
-            class="mr-auto -ml-2"
+            class="mr-auto"
             variant="ghost"
             label="Finish later"
             @click="minimize"
diff --git a/admin/frontend/dashboard/src/components/navigation/SetupIllustration.vue b/admin/frontend/dashboard/src/components/navigation/SetupIllustration.vue
new file mode 100644
index 000000000..5ab5278e7
--- /dev/null
+++ b/admin/frontend/dashboard/src/components/navigation/SetupIllustration.vue
@@ -0,0 +1,288 @@
+<script setup lang="ts">
+defineProps<{ step: string }>()
+</script>
+
+<template>
+  <svg viewBox="0 0 320 420" class="setup-art w-full h-auto">
+    <g v-if="step === 'github'">
+      <g class="spin" style="transform-origin: 160px 196px">
+        <circle cx="160" cy="196" r="108" fill="none" stroke-dasharray="2 6" class="stroke-ink-gray-3" />
+        <circle cx="160" cy="196" r="152" fill="none" stroke-dasharray="2 6" class="stroke-ink-gray-3" />
+        <circle cx="268" cy="196" r="2.5" class="fill-ink-gray-3" />
+        <circle cx="52" cy="196" r="2.5" class="fill-ink-gray-3" />
+      </g>
+
+      <path d="M192 172 L236 128" fill="none" stroke-width="1.2" class="flow stroke-ink-gray-5" />
+      <path d="M196 214 L240 252" fill="none" stroke-dasharray="3 5" class="stroke-ink-gray-3" />
+      <path d="M126 216 L84 262" fill="none" stroke-width="1.2" class="flow stroke-ink-gray-5" />
+      <path d="M128 174 L88 136" fill="none" stroke-dasharray="3 5" class="stroke-ink-gray-3" />
+
+      <g
+        v-for="repo in [
+          { x: 226, y: 96, active: true },
+          { x: 230, y: 240, active: false },
+          { x: 18, y: 258, active: true },
+          { x: 20, y: 104, active: false },
+        ]"
+        :key="`${repo.x}-${repo.y}`"
+        :transform="`translate(${repo.x} ${repo.y})`"
+      >
+        <rect
+          width="76"
+          height="40"
+          rx="8"
+          class="fill-surface-elevation-1"
+          :class="repo.active ? 'stroke-ink-gray-3' : 'stroke-ink-gray-3'"
+        />
+
+        <rect x="8" y="9" width="22" height="22" rx="5" class="fill-surface-gray-2" />
+        <g
+          fill="none"
+          stroke-width="2.2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          transform="translate(19 20) scale(0.6) translate(-12 -12)"
+          :class="repo.active ? 'stroke-ink-gray-5' : 'stroke-ink-gray-5'"
+        >
+          <path d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z" />
+          <path d="M12 22V12" />
+          <path d="m3.3 7 7.703 4.734a2 2 0 0 0 1.994 0L20.7 7" />
+          <path d="m7.5 4.27 9 5.15" />
+        </g>
+
+        <rect x="34" y="13" width="32" height="4" rx="2" class="fill-ink-gray-4" />
+        <rect x="34" y="22" width="22" height="4" rx="2" class="fill-surface-gray-3" />
+      </g>
+
+      <circle cx="160" cy="196" r="64" fill-opacity="0.25" class="fill-surface-gray-2" />
+      <circle cx="160" cy="196" r="46" fill-opacity="0.55" class="fill-surface-gray-2" />
+      <circle cx="160" cy="196" r="28" class="fill-surface-gray-3" />
+
+      <path
+        transform="translate(160 196) scale(1.75) translate(-8 -8)"
+        d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
+        class="fill-ink-gray-7"
+      />
+    </g>
+
+    <g v-else-if="step === 'storage'">
+      <g class="spin" style="transform-origin: 160px 210px">
+        <circle cx="160" cy="210" r="120" fill="none" stroke-dasharray="2 6" class="stroke-ink-gray-3" />
+        <circle cx="160" cy="210" r="160" fill="none" stroke-dasharray="2 6" class="stroke-ink-gray-3" />
+        <circle cx="280" cy="210" r="2.5" class="fill-ink-gray-3" />
+        <circle cx="40" cy="210" r="2.5" class="fill-ink-gray-3" />
+      </g>
+
+      <circle cx="160" cy="92" r="64" fill-opacity="0.25" class="fill-surface-gray-2" />
+      <circle cx="160" cy="92" r="46" fill-opacity="0.55" class="fill-surface-gray-2" />
+      <circle cx="160" cy="92" r="28" class="fill-surface-gray-3" />
+      <g
+        fill="none"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        transform="translate(160 92) scale(1.1) translate(-12 -12)"
+        class="stroke-ink-gray-7"
+      >
+        <path d="M12 13v8" />
+        <path d="m8 17 4-4 4 4" />
+        <path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242" />
+      </g>
+
+      <path d="M160 176 V122" fill="none" stroke-width="1.2" class="flow stroke-ink-gray-5" />
+
+      <rect x="92" y="200" width="136" height="56" rx="10" class="fill-surface-elevation-1 stroke-ink-gray-3" />
+      <rect x="84" y="188" width="152" height="56" rx="10" class="fill-surface-elevation-1 stroke-ink-gray-3" />
+
+      <g>
+        <rect x="76" y="176" width="168" height="56" rx="10" class="fill-surface-elevation-1 stroke-ink-gray-3" />
+        <rect x="88" y="190" width="28" height="28" rx="6" class="fill-surface-gray-2" />
+        <g
+          fill="none"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          transform="translate(102 204) scale(0.65) translate(-12 -12)"
+          class="stroke-ink-gray-5"
+        >
+          <rect x="2" y="3" width="20" height="5" rx="1" />
+          <path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8" />
+          <path d="M10 12h4" />
+        </g>
+
+        <rect x="126" y="196" width="70" height="5" rx="2.5" class="fill-ink-gray-4" />
+        <rect x="126" y="208" width="46" height="4" rx="2" class="fill-surface-gray-3" />
+        <circle cx="228" cy="204" r="4" class="fill-ink-gray-6" />
+      </g>
+
+      <path d="M62 290 C62 270 80 258 96 256" fill="none" stroke-width="1.2" class="flow stroke-ink-gray-5" />
+      <path d="M258 290 C258 270 240 258 224 256" fill="none" stroke-width="1.2" class="flow stroke-ink-gray-5" />
+
+      <g>
+        <rect x="40" y="290" width="44" height="44" rx="11" class="fill-surface-elevation-1 stroke-ink-gray-3" />
+        <g
+          fill="none"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          transform="translate(62 312) scale(0.75) translate(-12 -12)"
+          class="stroke-ink-gray-5"
+        >
+          <ellipse cx="12" cy="5" rx="9" ry="3" />
+          <path d="M3 5V19A9 3 0 0 0 21 19V5" />
+          <path d="M3 12A9 3 0 0 0 21 12" />
+        </g>
+      </g>
+
+      <g>
+        <rect x="236" y="290" width="44" height="44" rx="11" class="fill-surface-elevation-1 stroke-ink-gray-3" />
+        <g
+          fill="none"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          transform="translate(258 312) scale(0.75) translate(-12 -12)"
+          class="stroke-ink-gray-5"
+        >
+          <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />
+          <path d="M14 2v4a2 2 0 0 0 2 2h4" />
+        </g>
+      </g>
+    </g>
+
+    <g v-else>
+      <g class="spin" style="transform-origin: 160px 205px">
+        <circle cx="160" cy="205" r="120" fill="none" stroke-dasharray="2 6" class="stroke-ink-gray-3" />
+        <circle cx="160" cy="205" r="160" fill="none" stroke-dasharray="2 6" class="stroke-ink-gray-3" />
+        <circle cx="160" cy="85" r="2.5" class="fill-ink-gray-3" />
+        <circle cx="160" cy="325" r="2.5" class="fill-ink-gray-3" />
+      </g>
+
+      <path d="M78 98 C90 112 92 124 92 132" fill="none" stroke-width="1.2" class="flow stroke-ink-gray-5" />
+      <path d="M242 98 C230 112 228 124 228 132" fill="none" stroke-dasharray="3 5" class="stroke-ink-gray-3" />
+      <path d="M74 314 C88 300 92 292 92 282" fill="none" stroke-dasharray="3 5" class="stroke-ink-gray-3" />
+      <path d="M246 314 C232 300 228 292 228 282" fill="none" stroke-width="1.2" class="flow stroke-ink-gray-5" />
+
+      <g>
+        <rect x="44" y="58" width="44" height="44" rx="11" class="fill-surface-elevation-1 stroke-ink-gray-3" />
+        <path
+          d="M58 72 h16 v16 h-16 z M58 80 h16 M66 72 v16"
+          fill="none"
+          stroke-width="1.4"
+          stroke-linejoin="round"
+          class="stroke-ink-gray-5"
+        />
+      </g>
+
+      <g>
+        <rect x="232" y="58" width="44" height="44" rx="11" class="fill-surface-elevation-1 stroke-ink-gray-3" />
+        <circle cx="254" cy="76" r="5" fill="none" stroke-width="1.4" class="stroke-ink-gray-5" />
+        <path
+          d="M245 90 C247 84 261 84 263 90"
+          fill="none"
+          stroke-width="1.4"
+          stroke-linecap="round"
+          class="stroke-ink-gray-5"
+        />
+      </g>
+
+      <g>
+        <rect x="40" y="306" width="44" height="44" rx="11" class="fill-surface-elevation-1 stroke-ink-gray-3" />
+        <path
+          d="M53 320 h18 v12 h-10 l-5 4 v-4 h-3 z"
+          fill="none"
+          stroke-width="1.4"
+          stroke-linejoin="round"
+          class="stroke-ink-gray-5"
+        />
+      </g>
+
+      <g>
+        <rect x="236" y="306" width="44" height="44" rx="11" class="fill-surface-elevation-1 stroke-ink-gray-3" />
+        <path
+          d="M249 333 l6 -8 5 5 7 -10"
+          fill="none"
+          stroke-width="1.4"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="stroke-ink-gray-5"
+        />
+      </g>
+
+      <rect x="52" y="132" width="216" height="150" rx="12" class="fill-surface-elevation-1 stroke-ink-gray-3" />
+      <path d="M52 158 H268" class="stroke-ink-gray-3" />
+
+      <g class="fill-ink-gray-3">
+        <circle cx="66" cy="145" r="3.5" />
+        <circle cx="78" cy="145" r="3.5" />
+        <circle cx="90" cy="145" r="3.5" />
+      </g>
+
+      <rect x="104" y="138" width="124" height="14" rx="7" class="fill-surface-gray-2" />
+      <circle cx="114" cy="145" r="2.5" class="fill-ink-gray-6" />
+      <rect x="122" y="143" width="62" height="4" rx="2" class="fill-ink-gray-4" />
+      <rect x="68" y="172" width="96" height="8" rx="4" class="fill-ink-gray-4" />
+      <rect x="68" y="186" width="140" height="5" rx="2.5" class="fill-surface-gray-3" />
+
+      <rect x="68" y="208" width="58" height="56" rx="7" class="fill-surface-gray-1 stroke-ink-gray-3" />
+      <rect x="134" y="208" width="58" height="56" rx="7" class="fill-surface-gray-1 stroke-ink-gray-3" />
+      <rect
+        x="200"
+        y="208"
+        width="52"
+        height="56"
+        rx="7"
+        fill="none"
+        stroke-dasharray="3 4"
+        class="stroke-ink-gray-3"
+      />
+
+      <rect x="76" y="218" width="26" height="5" rx="2.5" class="fill-ink-gray-4" />
+      <rect x="76" y="228" width="40" height="4" rx="2" class="fill-surface-gray-3" />
+      <rect x="142" y="218" width="34" height="5" rx="2.5" class="fill-ink-gray-4" />
+      <rect x="142" y="228" width="30" height="4" rx="2" class="fill-surface-gray-3" />
+      <path d="M226 230 v12 M220 236 h12" stroke-width="1.4" stroke-linecap="round" class="stroke-ink-gray-5" />
+      <circle cx="262" cy="134" r="4" class="fill-ink-gray-6" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+:global(:root:not([data-theme='dark']) .setup-art) {
+  --ink-gray-2: oklch(0.87 0 0);
+  --ink-gray-3: oklch(0.76 0 0);
+  --ink-gray-4: oklch(0.63 0 0);
+  --ink-gray-5: oklch(0.52 0 0);
+  --ink-gray-6: oklch(0.4 0 0);
+  --ink-gray-7: oklch(0.31 0 0);
+  --surface-gray-2: oklch(0.94 0 0);
+  --surface-gray-3: oklch(0.91 0 0);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .flow {
+    animation: dash 2.2s linear infinite;
+  }
+
+  .spin {
+    transform-box: view-box;
+    animation: spin 80s linear infinite;
+  }
+}
+
+.flow {
+  stroke-dasharray: 3 5;
+}
+
+@keyframes dash {
+  to {
+    stroke-dashoffset: -16;
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>
diff --git a/admin/frontend/dashboard/src/composables/settings/useObjectStorage.ts b/admin/frontend/dashboard/src/composables/settings/useObjectStorage.ts
index b80cdcbc7..7b91c6b52 100644
--- a/admin/frontend/dashboard/src/composables/settings/useObjectStorage.ts
+++ b/admin/frontend/dashboard/src/composables/settings/useObjectStorage.ts
@@ -1,6 +1,7 @@
 import { computed, ref, watch } from 'vue'
 import { toast } from 'frappe-ui'
 
+import { apiErrorMessage, hasApiError } from '@/api/client'
 import { settingsApi } from '@/api/settings'
 import type { S3ProviderOption } from '@/types/settings'
 import { errorMessage } from '@/utils/error'
@@ -42,7 +43,18 @@ export const useObjectStorage = () => {
     loadingRegions.value = true
 
     try {
-      frappe.regions = await settingsApi.frappeStorageRegions()
+      const regions = await settingsApi.frappeStorageRegions()
+
+      if (hasApiError(regions)) {
+        error.value = apiErrorMessage(
+          regions,
+          'Could not read Frappe storage regions from Central.',
+        )
+
+        return
+      }
+
+      frappe.regions = regions
     } catch (e) {
       error.value = errorMessage(e, 'Could not read Frappe storage regions from Central.')
     } finally {
diff --git a/admin/frontend/dashboard/src/composables/sites/useNewSite.ts b/admin/frontend/dashboard/src/composables/sites/useNewSite.ts
index a374f9500..24c0bb353 100644
--- a/admin/frontend/dashboard/src/composables/sites/useNewSite.ts
+++ b/admin/frontend/dashboard/src/composables/sites/useNewSite.ts
@@ -32,6 +32,7 @@ export const useNewSite = () => {
   const hasSingleDomain = computed(() => wildcardDomains.value.length === 1)
   const nameError = computed(() => validate(name.value.trim()))
   const availableApps = computed(() => buildSiteAppChoices(registry.value, benchApps.value))
+  const frappe = computed(() => benchApps.value.find((app) => app.name === 'frappe'))
   const filteredApps = computed(() => {
     const query = appSearch.value.trim().toLowerCase()
 
@@ -128,6 +129,7 @@ export const useNewSite = () => {
     nameError,
     availableApps,
     filteredApps,
+    frappe,
     reset,
     toggleApp,
     create,

From b5c2f88c05172f0afd8bb51bca73f23b9012ea7a Mon Sep 17 00:00:00 2001
From: siduck <siduck@tutanota.com>
Date: Fri, 23 Oct 2026 12:34:25 +0530
Subject: [PATCH 10/17] fix(ui): open site task page from onboarding

---
 .../components/navigation/SetupChecklist.vue  | 21 ++++++++-----------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/admin/frontend/dashboard/src/components/navigation/SetupChecklist.vue b/admin/frontend/dashboard/src/components/navigation/SetupChecklist.vue
index 6f969d2d7..d097497d9 100644
--- a/admin/frontend/dashboard/src/components/navigation/SetupChecklist.vue
+++ b/admin/frontend/dashboard/src/components/navigation/SetupChecklist.vue
@@ -23,6 +23,7 @@ import { useObjectStorage } from '@/composables/settings/useObjectStorage'
 import { useNewSite } from '@/composables/sites/useNewSite'
 import { useSites } from '@/composables/sites/useSites'
 import { errorMessage } from '@/utils/error'
+import { openTaskDetailPage } from '@/utils/taskRoute'
 
 const route = useRoute()
 const router = useRouter()
@@ -96,7 +97,7 @@ const steps = computed(() => [
     action: 'Create site',
     savingLabel: undefined,
     done: siteStarted.value || sites.value.length > 0,
-    saving: false,
+    saving: site.creating,
     canSave: !site.nameError,
     save: createSite,
   },
@@ -170,18 +171,13 @@ const submit = async () => {
 }
 
 const createSite = async () => {
-  siteStarted.value = true
-
-  site.create().then((taskId) => {
-    if (!taskId) {
-      siteStarted.value = false
-      current.value = steps.value.findIndex((step) => step.id === 'site')
+  const taskId = await site.create()
 
-      return
-    }
+  if (!taskId) return false
 
-    loadSites()
-  })
+  siteStarted.value = true
+  loadSites()
+  openTaskDetailPage(router, taskId)
 
   return true
 }
@@ -225,8 +221,9 @@ const refresh = async () => {
     }
 
     if ((returnedFromGithub || !onboarding.value) && isVisible.value && !isOpen.value) open()
-  } catch {
+  } catch (caught) {
     loaded.value = false
+    toast.error(errorMessage(caught, 'Could not load onboarding progress.'))
   }
 }
 

From 44f6bf665d18b5c03c78c685fac1a0d705718334 Mon Sep 17 00:00:00 2001
From: siduck <siduck@tutanota.com>
Date: Fri, 23 Oct 2026 12:34:25 +0530
Subject: [PATCH 11/17] refactor(ui): flat repo list in onboarding github step

---
 .../components/navigation/SetupChecklist.vue  | 40 +++++++++----------
 1 file changed, 19 insertions(+), 21 deletions(-)

diff --git a/admin/frontend/dashboard/src/components/navigation/SetupChecklist.vue b/admin/frontend/dashboard/src/components/navigation/SetupChecklist.vue
index d097497d9..ca233fa4e 100644
--- a/admin/frontend/dashboard/src/components/navigation/SetupChecklist.vue
+++ b/admin/frontend/dashboard/src/components/navigation/SetupChecklist.vue
@@ -38,6 +38,9 @@ const useToken = ref(false)
 const origin = window.location.origin
 
 const githubViaCloud = computed(() => github.centralAvailable && !useToken.value)
+const githubRepositories = computed(() =>
+  github.centralAccounts.flatMap((account) => account.repositories),
+)
 
 const loaded = ref(false)
 
@@ -64,8 +67,10 @@ const steps = computed(() => [
     id: 'github',
     name: 'GitHub',
     label: 'Connect GitHub',
-    title: 'Connect your GitHub',
-    description: 'Pilot installs your Frappe apps straight from private repos. Takes about a minute.',
+    title: github.viaCentral ? 'GitHub connected' : 'Connect your GitHub',
+    description: github.viaCentral
+      ? 'Pilot can read these repos through Frappe Cloud.'
+      : 'Pilot installs your Frappe apps straight from private repos. Takes about a minute.',
     action: githubViaCloud.value ? 'Connect GitHub' : 'Connect',
     savingLabel: githubViaCloud.value ? 'Opening Frappe Cloud' : 'Verifying token',
     done: github.connected,
@@ -324,27 +329,20 @@ onMounted(refresh)
           </template>
 
           <template v-else-if="currentStep.id === 'github' && github.viaCentral">
-            <p class="mb-4 text-ink-gray-7 text-p-base">
-              Connected through Frappe Cloud. Pilot can read these repos.
-            </p>
-
-            <div class="space-y-4 -mr-4 pr-4 max-h-64 overflow-y-auto">
-              <ul v-for="account in github.centralAccounts" :key="account.account">
-                <li class="mb-1 text-ink-gray-5 text-sm-medium">{{ account.account }}</li>
-
-                <li
-                  v-for="repository in account.repositories"
-                  :key="repository"
-                  class="flex items-center gap-2 py-1.5 text-ink-gray-8 text-base before:size-4 before:text-ink-gray-5 before:lucide-book-marked"
-                >
-                  {{ repository.slice(account.account.length + 1) }}
-                </li>
-              </ul>
-            </div>
+            <ul class="-mt-4 max-h-64 overflow-y-auto">
+              <li
+                v-for="repository in githubRepositories"
+                :key="repository"
+                class="flex items-center gap-2.5 h-8 text-ink-gray-8 text-base before:size-4 before:text-ink-gray-5 before:lucide-package"
+              >
+                <span class="truncate">
+                  <span class="text-ink-gray-5">{{ repository.split('/')[0] }}/</span>{{ repository.split('/')[1] }}
+                </span>
+              </li>
+            </ul>
 
             <Button
-              class="self-start mt-auto -ml-2"
-              variant="ghost"
+              class="self-start mt-2"
               icon-left="lucide-settings-2"
               label="Manage repositories"
               :loading="github.redirecting"

From b455108a2dc5ac77515151cddacc545ced18c018 Mon Sep 17 00:00:00 2001
From: siduck <siduck@tutanota.com>
Date: Fri, 23 Oct 2026 12:34:25 +0530
Subject: [PATCH 12/17] refactor(ui): drop unused repo states in setup
 illustration

---
 .../navigation/SetupIllustration.vue           | 18 ++++++------------
 1 file changed, 6 insertions(+), 12 deletions(-)

diff --git a/admin/frontend/dashboard/src/components/navigation/SetupIllustration.vue b/admin/frontend/dashboard/src/components/navigation/SetupIllustration.vue
index 5ab5278e7..ae0a74bb3 100644
--- a/admin/frontend/dashboard/src/components/navigation/SetupIllustration.vue
+++ b/admin/frontend/dashboard/src/components/navigation/SetupIllustration.vue
@@ -19,21 +19,15 @@ defineProps<{ step: string }>()
 
       <g
         v-for="repo in [
-          { x: 226, y: 96, active: true },
-          { x: 230, y: 240, active: false },
-          { x: 18, y: 258, active: true },
-          { x: 20, y: 104, active: false },
+          { x: 226, y: 96 },
+          { x: 230, y: 240 },
+          { x: 18, y: 258 },
+          { x: 20, y: 104 },
         ]"
         :key="`${repo.x}-${repo.y}`"
         :transform="`translate(${repo.x} ${repo.y})`"
       >
-        <rect
-          width="76"
-          height="40"
-          rx="8"
-          class="fill-surface-elevation-1"
-          :class="repo.active ? 'stroke-ink-gray-3' : 'stroke-ink-gray-3'"
-        />
+        <rect width="76" height="40" rx="8" class="fill-surface-elevation-1 stroke-ink-gray-3" />
 
         <rect x="8" y="9" width="22" height="22" rx="5" class="fill-surface-gray-2" />
         <g
@@ -42,7 +36,7 @@ defineProps<{ step: string }>()
           stroke-linecap="round"
           stroke-linejoin="round"
           transform="translate(19 20) scale(0.6) translate(-12 -12)"
-          :class="repo.active ? 'stroke-ink-gray-5' : 'stroke-ink-gray-5'"
+          class="stroke-ink-gray-5"
         >
           <path d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z" />
           <path d="M12 22V12" />

From 8f298fdee4b0350e5daf0aea42652b14a3ac45d3 Mon Sep 17 00:00:00 2001
From: siduck <siduck@tutanota.com>
Date: Fri, 23 Oct 2026 14:19:11 +0530
Subject: [PATCH 13/17] fix(ui): Add fade-in for svg illustration in onboarding
 dialog

---
 .../components/navigation/SetupChecklist.vue  | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/admin/frontend/dashboard/src/components/navigation/SetupChecklist.vue b/admin/frontend/dashboard/src/components/navigation/SetupChecklist.vue
index ca233fa4e..a20d1873b 100644
--- a/admin/frontend/dashboard/src/components/navigation/SetupChecklist.vue
+++ b/admin/frontend/dashboard/src/components/navigation/SetupChecklist.vue
@@ -284,7 +284,11 @@ onMounted(refresh)
           </li>
         </ol>
 
-        <SetupIllustration class="my-auto pt-4" :step="currentStep.id" />
+        <SetupIllustration
+          :key="currentStep.id"
+          class="my-auto pt-4 fade-in"
+          :step="currentStep.id"
+        />
       </aside>
 
       <div class="flex flex-col flex-1 min-w-0">
@@ -321,7 +325,7 @@ onMounted(refresh)
                 label="Secret key"
                 type="password"
                 autocomplete="new-password"
-                :placeholder="storage.secretKeySet ? 'Saved, leave blank to keep' : undefined"
+                :placeholder="storage.secretKeySet ? 'Saved, leave blank to keep' : '••••••••'"
               />
             </div>
 
@@ -336,7 +340,8 @@ onMounted(refresh)
                 class="flex items-center gap-2.5 h-8 text-ink-gray-8 text-base before:size-4 before:text-ink-gray-5 before:lucide-package"
               >
                 <span class="truncate">
-                  <span class="text-ink-gray-5">{{ repository.split('/')[0] }}/</span>{{ repository.split('/')[1] }}
+                  <span class="text-ink-gray-5">{{ repository.split('/')[0] }}/</span>
+                  {{ repository.split('/')[1] }}
                 </span>
               </li>
             </ul>
@@ -495,13 +500,7 @@ onMounted(refresh)
             label="Back"
             @click="current--"
           />
-          <Button
-            v-else
-            class="mr-auto"
-            variant="ghost"
-            label="Finish later"
-            @click="minimize"
-          />
+          <Button v-else class="mr-auto" variant="ghost" label="Finish later" @click="minimize" />
 
           <Button
             v-if="!currentStep.done && current < steps.length - 1"

From 9f5dfe5cd5b53f47bfa6ea97919dd11af95112b7 Mon Sep 17 00:00:00 2001
From: siduck <siduck@tutanota.com>
Date: Fri, 23 Oct 2026 14:41:53 +0530
Subject: [PATCH 14/17] test(ui): onboarding e2e and dismiss it in harness

---
 admin/frontend/dashboard/e2e/global-setup.ts  |  5 ++
 .../frontend/dashboard/e2e/onboarding.spec.ts | 80 +++++++++++++++++++
 tests/e2e/flows/admin.py                      |  5 ++
 tests/e2e/specs/test_bench_lifecycle.py       |  2 +
 4 files changed, 92 insertions(+)
 create mode 100644 admin/frontend/dashboard/e2e/onboarding.spec.ts

diff --git a/admin/frontend/dashboard/e2e/global-setup.ts b/admin/frontend/dashboard/e2e/global-setup.ts
index c0db8f0f9..85407052e 100644
--- a/admin/frontend/dashboard/e2e/global-setup.ts
+++ b/admin/frontend/dashboard/e2e/global-setup.ts
@@ -9,6 +9,11 @@ const globalSetup = async (config) => {
   })
   await expect(res).toBeOK()
 
+  const onboarding = await context.patch('/api/v1/settings', {
+    data: { bench: { onboarding: 'dismissed' } },
+  })
+  await expect(onboarding).toBeOK()
+
   await context.storageState({ path: storageState })
   await context.dispose()
 }
diff --git a/admin/frontend/dashboard/e2e/onboarding.spec.ts b/admin/frontend/dashboard/e2e/onboarding.spec.ts
new file mode 100644
index 000000000..ff45221ad
--- /dev/null
+++ b/admin/frontend/dashboard/e2e/onboarding.spec.ts
@@ -0,0 +1,80 @@
+import { expect, type Page, test } from '@playwright/test'
+
+const mockBench = async (page: Page, onboarding: string) => {
+  const updates: object[] = []
+  const created: object[] = []
+
+  await page.route('**/api/v1/**', async (route) => {
+    const request = route.request()
+    const path = new URL(request.url()).pathname.replace('/api/v1/', '')
+    const method = request.method()
+
+    if (path === 'settings' && method === 'PATCH') updates.push(request.postDataJSON())
+    if (path === 'sites' && method === 'POST') created.push(request.postDataJSON())
+
+    const responses: Record<string, object> = {
+      bootstrap: { mode: 'ready', enabled: true },
+      'auth/session': { authenticated: true },
+      settings: {
+        bench: { onboarding },
+        s3: {},
+        s3_providers: [{ value: 'aws', label: 'AWS', regions: ['us-east-1'] }],
+      },
+      'git/connection': { connected: false, central: { available: false } },
+      sites: method === 'POST' ? { task_id: 'onboarding-task' } : [],
+      'sites/wildcard-domains': { domains: [] },
+      apps: [],
+      'marketplace/apps': [],
+      notifications: { data: [], meta: { unread: 0, next_cursor: null } },
+    }
+
+    await route.fulfill({ json: responses[path] ?? {} })
+  })
+
+  return { updates, created }
+}
+
+test('Opens on a fresh bench', async ({ page }) => {
+  await mockBench(page, '')
+  await page.goto('/sites')
+
+  await expect(page.getByRole('dialog').getByRole('heading', { name: 'Connect your GitHub' })).toBeVisible()
+})
+
+test('Skips to the site step and opens its task', async ({ page }) => {
+  const { updates, created } = await mockBench(page, '')
+  await page.goto('/sites')
+
+  const dialog = page.getByRole('dialog')
+  await dialog.getByRole('button', { name: 'Skip' }).click()
+  await expect(dialog.getByRole('heading', { name: 'Where should backups go?' })).toBeVisible()
+
+  await dialog.getByRole('button', { name: 'Skip' }).click()
+  await dialog.getByLabel('Site name').fill('first.localhost')
+  await dialog.getByRole('button', { name: 'Create site' }).click()
+
+  await expect(page).toHaveURL(/\/insights\/tasks\/onboarding-task$/)
+  await expect(dialog).toBeHidden()
+  expect(created).toEqual([{ name: 'first.localhost', apps: [] }])
+  expect(updates).toContainEqual({ bench: { onboarding: 'minimized' } })
+})
+
+test('Stays in the sidebar once minimized', async ({ page }) => {
+  await mockBench(page, 'minimized')
+  await page.goto('/sites')
+
+  await expect(page.getByRole('button', { name: 'Get started' })).toBeVisible()
+  await expect(page.getByRole('dialog')).toHaveCount(0)
+})
+
+test('Stays hidden once dismissed', async ({ page }) => {
+  await mockBench(page, 'dismissed')
+
+  const settingsLoaded = page.waitForResponse('**/api/v1/settings')
+  await page.goto('/sites')
+  await settingsLoaded
+
+  await expect(page.getByRole('navigation', { name: 'Main' })).toBeVisible()
+  await expect(page.getByRole('button', { name: 'Get started' })).toHaveCount(0)
+  await expect(page.getByRole('dialog')).toHaveCount(0)
+})
diff --git a/tests/e2e/flows/admin.py b/tests/e2e/flows/admin.py
index 68ac6efb7..fa15d4ad6 100644
--- a/tests/e2e/flows/admin.py
+++ b/tests/e2e/flows/admin.py
@@ -34,6 +34,11 @@ def login(page: Page, base_url: str, password: str) -> None:
     expect(page.get_by_role("button", name="New site")).to_be_visible(timeout=30_000)
 
 
+def dismiss_onboarding(page: Page, base_url: str) -> None:
+    res = page.request.patch(f"{base_url}/api/v1/settings", data={"bench": {"onboarding": "dismissed"}})
+    expect(res).to_be_ok()
+
+
 def create_site(page: Page, base_url: str, site_name: str) -> None:
     open_root(page, base_url)
     page.get_by_role("button", name="New site").click()
diff --git a/tests/e2e/specs/test_bench_lifecycle.py b/tests/e2e/specs/test_bench_lifecycle.py
index e59740866..eff44e8c2 100644
--- a/tests/e2e/specs/test_bench_lifecycle.py
+++ b/tests/e2e/specs/test_bench_lifecycle.py
@@ -9,6 +9,7 @@
 import pytest
 from flows.admin import (
     create_site,
+    dismiss_onboarding,
     drop_site,
     installed_apps,
     login,
@@ -55,6 +56,7 @@ def test_completes_setup_wizard(bench, page):
 
 def test_logs_into_admin(bench, page):
     login(page, bench.admin_url, bench.admin_password)
+    dismiss_onboarding(page, bench.admin_url)
 
 
 def test_creates_a_new_site(bench, page):

From c3666cfa8dda91e3d6bc3972d7b34750daf12ed1 Mon Sep 17 00:00:00 2001
From: siduck <siduck@tutanota.com>
Date: Fri, 23 Oct 2026 14:51:43 +0530
Subject: [PATCH 15/17] fix(ui): dismiss onboarding before e2e login

---
 tests/e2e/flows/admin.py                | 4 +++-
 tests/e2e/specs/test_bench_lifecycle.py | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/tests/e2e/flows/admin.py b/tests/e2e/flows/admin.py
index fa15d4ad6..fb8bb7096 100644
--- a/tests/e2e/flows/admin.py
+++ b/tests/e2e/flows/admin.py
@@ -34,9 +34,11 @@ def login(page: Page, base_url: str, password: str) -> None:
     expect(page.get_by_role("button", name="New site")).to_be_visible(timeout=30_000)
 
 
-def dismiss_onboarding(page: Page, base_url: str) -> None:
+def dismiss_onboarding(page: Page, base_url: str, password: str) -> None:
+    expect(page.request.post(f"{base_url}/api/v1/auth/session", data={"password": password})).to_be_ok()
     res = page.request.patch(f"{base_url}/api/v1/settings", data={"bench": {"onboarding": "dismissed"}})
     expect(res).to_be_ok()
+    page.context.clear_cookies()
 
 
 def create_site(page: Page, base_url: str, site_name: str) -> None:
diff --git a/tests/e2e/specs/test_bench_lifecycle.py b/tests/e2e/specs/test_bench_lifecycle.py
index eff44e8c2..e41a9a6c3 100644
--- a/tests/e2e/specs/test_bench_lifecycle.py
+++ b/tests/e2e/specs/test_bench_lifecycle.py
@@ -55,8 +55,8 @@ def test_completes_setup_wizard(bench, page):
 
 
 def test_logs_into_admin(bench, page):
+    dismiss_onboarding(page, bench.admin_url, bench.admin_password)
     login(page, bench.admin_url, bench.admin_password)
-    dismiss_onboarding(page, bench.admin_url)
 
 
 def test_creates_a_new_site(bench, page):

From 048daaba1638fd836a8045fda8ce423fc8bde5bc Mon Sep 17 00:00:00 2001
From: siduck <siduck@tutanota.com>
Date: Fri, 23 Oct 2026 15:19:22 +0530
Subject: [PATCH 16/17] ci: cache apt packages in e2e

---
 .github/workflows/e2e.yml | 34 ++++++++++++++++++++++++++--------
 1 file changed, 26 insertions(+), 8 deletions(-)

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index 057350cbb..2773d61eb 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -39,14 +39,19 @@ jobs:
         with:
           node-version: "24"
 
+      - name: Drop flaky apt repos
+        # Runners preconfigure Microsoft apt repos that intermittently 403;
+        # they aren't needed here and otherwise fail the whole apt-get update.
+        run: sudo rm -f /etc/apt/sources.list.d/microsoft*.list /etc/apt/sources.list.d/azure*.list
+
       - name: Install common system dependencies
-        run: |
-          # Runners preconfigure Microsoft apt repos that intermittently 403;
-          # they aren't needed here and otherwise fail the whole apt-get update.
-          sudo rm -f /etc/apt/sources.list.d/microsoft*.list /etc/apt/sources.list.d/azure*.list
-          sudo apt-get update -y
-          sudo apt-get install -y redis-server git nginx openssl
-          sudo systemctl start redis-server
+        uses: awalsh128/cache-apt-pkgs-action@v1
+        with:
+          packages: redis-server git nginx openssl
+          execute_install_scripts: true
+
+      - name: Start Redis
+        run: sudo systemctl start redis-server
 
       - name: Install MariaDB
         if: matrix.db_type == 'mariadb'
@@ -101,8 +106,21 @@ jobs:
           path: ~/.cache/ms-playwright
           key: playwright-${{ runner.os }}-${{ hashFiles('pyproject.toml', 'admin/frontend/dashboard/package-lock.json') }}
 
+      - name: List Playwright system dependencies
+        id: playwright-deps
+        run: |
+          packages=$(playwright install-deps --dry-run chromium | grep -oP 'apt-get install -y --no-install-recommends \K[^"]+')
+          test -n "$packages"
+          echo "packages=$packages" >> "$GITHUB_OUTPUT"
+
+      - name: Install Playwright system dependencies
+        uses: awalsh128/cache-apt-pkgs-action@v1
+        with:
+          packages: ${{ steps.playwright-deps.outputs.packages }}
+          execute_install_scripts: true
+
       - name: Install Playwright browser
-        run: playwright install --with-deps chromium
+        run: playwright install chromium
 
       - name: Install dashboard Playwright browser
         working-directory: admin/frontend/dashboard

From d40bfdaf6d9c619255be25164d2377d8576ad27a Mon Sep 17 00:00:00 2001
From: siduck <siduck@tutanota.com>
Date: Fri, 23 Oct 2026 17:02:53 +0530
Subject: [PATCH 17/17] revert(ci): apt cache in e2e

---
 .github/workflows/e2e.yml | 34 ++++++++--------------------------
 1 file changed, 8 insertions(+), 26 deletions(-)

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index 2773d61eb..057350cbb 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -39,19 +39,14 @@ jobs:
         with:
           node-version: "24"
 
-      - name: Drop flaky apt repos
-        # Runners preconfigure Microsoft apt repos that intermittently 403;
-        # they aren't needed here and otherwise fail the whole apt-get update.
-        run: sudo rm -f /etc/apt/sources.list.d/microsoft*.list /etc/apt/sources.list.d/azure*.list
-
       - name: Install common system dependencies
-        uses: awalsh128/cache-apt-pkgs-action@v1
-        with:
-          packages: redis-server git nginx openssl
-          execute_install_scripts: true
-
-      - name: Start Redis
-        run: sudo systemctl start redis-server
+        run: |
+          # Runners preconfigure Microsoft apt repos that intermittently 403;
+          # they aren't needed here and otherwise fail the whole apt-get update.
+          sudo rm -f /etc/apt/sources.list.d/microsoft*.list /etc/apt/sources.list.d/azure*.list
+          sudo apt-get update -y
+          sudo apt-get install -y redis-server git nginx openssl
+          sudo systemctl start redis-server
 
       - name: Install MariaDB
         if: matrix.db_type == 'mariadb'
@@ -106,21 +101,8 @@ jobs:
           path: ~/.cache/ms-playwright
           key: playwright-${{ runner.os }}-${{ hashFiles('pyproject.toml', 'admin/frontend/dashboard/package-lock.json') }}
 
-      - name: List Playwright system dependencies
-        id: playwright-deps
-        run: |
-          packages=$(playwright install-deps --dry-run chromium | grep -oP 'apt-get install -y --no-install-recommends \K[^"]+')
-          test -n "$packages"
-          echo "packages=$packages" >> "$GITHUB_OUTPUT"
-
-      - name: Install Playwright system dependencies
-        uses: awalsh128/cache-apt-pkgs-action@v1
-        with:
-          packages: ${{ steps.playwright-deps.outputs.packages }}
-          execute_install_scripts: true
-
       - name: Install Playwright browser
-        run: playwright install chromium
+        run: playwright install --with-deps chromium
 
       - name: Install dashboard Playwright browser
         working-directory: admin/frontend/dashboard