From 489acfe8c614f59f79be0cf997c6faaf019b3248 Mon Sep 17 00:00:00 2001
From: Alessandro <155005371+3clyp50@users.noreply.github.com>
Date: Tue, 23 Jun 2026 02:21:44 +0200
Subject: [PATCH] Refine welcome screen setup surfaces

Fold the blocking onboarding state into the welcome composer, refresh the account and channel tiles, and keep system resources aligned with the renewed Welcome Screen layout.

Update model-config, OAuth, and welcome static tests to pin the new CTA, dismissal, copy, and layout contracts.
---
 .../python/banners/10_discovery_cards.py      |   2 +-
 .../discovery-cards.html                      |   8 +-
 .../welcome-actions-end/discovery-cards.html  | 215 ++++------
 plugins/_discovery/webui/discovery-store.js   |  19 +
 .../python/banners/_20_missing_api_key.py     |  20 +-
 tests/test_model_config_api_keys.py           |   5 +
 tests/test_oauth_static.py                    |   5 +
 tests/test_welcome_composer_static.py         |  53 +++
 webui/components/welcome/welcome-screen.html  | 375 ++++++++++++++++--
 webui/components/welcome/welcome-store.js     |  38 ++
 10 files changed, 555 insertions(+), 185 deletions(-)

diff --git a/plugins/_discovery/extensions/python/banners/10_discovery_cards.py b/plugins/_discovery/extensions/python/banners/10_discovery_cards.py
index bba6c1c85..460f52ee8 100644
--- a/plugins/_discovery/extensions/python/banners/10_discovery_cards.py
+++ b/plugins/_discovery/extensions/python/banners/10_discovery_cards.py
@@ -138,7 +138,7 @@ class DiscoveryCardsExtension(Extension):
             "type": "hero",
             "placement": "after-features",
             "title": "Your AI accounts",
-            "description": "Link account-backed providers such as ChatGPT/Codex, GitHub Copilot, Gemini API, and xAI Grok."
+            "description": "Use your subscription-backed logins for model access."
             if not connected_count
             else "",
             "cta_text": "Connect accounts" if not connected_count else "Manage accounts",
diff --git a/plugins/_discovery/extensions/webui/onboarding-success-end/discovery-cards.html b/plugins/_discovery/extensions/webui/onboarding-success-end/discovery-cards.html
index cf54f176b..c7ca47b30 100644
--- a/plugins/_discovery/extensions/webui/onboarding-success-end/discovery-cards.html
+++ b/plugins/_discovery/extensions/webui/onboarding-success-end/discovery-cards.html
@@ -276,8 +276,8 @@
 
         .discovery-feature-thumb {
             flex: 0 0 auto;
-            width: 44px;
-            height: 44px;
+            width: 32px;
+            height: 32px;
             display: flex;
             align-items: center;
             justify-content: center;
@@ -570,8 +570,8 @@
             }
 
             .discovery-feature-thumb {
-                width: 46px;
-                height: 46px;
+                width: 32px;
+                height: 32px;
             }
 
             .discovery-feature-desc {
diff --git a/plugins/_discovery/extensions/webui/welcome-actions-end/discovery-cards.html b/plugins/_discovery/extensions/webui/welcome-actions-end/discovery-cards.html
index c0c9b6810..1d6ad7ca9 100644
--- a/plugins/_discovery/extensions/webui/welcome-actions-end/discovery-cards.html
+++ b/plugins/_discovery/extensions/webui/welcome-actions-end/discovery-cards.html
@@ -11,37 +11,35 @@
 
             <section class="discovery-features-panel" x-show="$store.discoveryStore.featureCards.length > 0">
                 <header class="discovery-panel-header">
-                    <h2>Connect Channels</h2>
-                    <p>Extend Agent Zero across your favorite platforms.</p>
+                    <div class="discovery-panel-copy">
+                        <h2>Connect Channels</h2>
+                        <p>Extend Agent Zero across your favorite platforms.</p>
+                    </div>
+                    <button class="discovery-dismiss discovery-panel-dismiss"
+                            type="button"
+                            x-show="$store.discoveryStore.featureCards.some(card => card.dismissible !== false)"
+                            @click.stop="$store.discoveryStore.dismissFeatureCards()"
+                            aria-label="Dismiss Connect Channels"
+                            title="Dismiss">
+                        <span class="material-symbols-outlined">close</span>
+                    </button>
                 </header>
 
                 <div class="discovery-features">
                     <template x-for="card in $store.discoveryStore.featureCards" :key="card.id">
-                        <article class="discovery-feature-card"
-                                 role="button"
-                                 tabindex="0"
-                                 @click="$store.discoveryStore.executeCta(card.cta_action)"
-                                 @keydown.enter.prevent="$store.discoveryStore.executeCta(card.cta_action)"
-                                 @keydown.space.prevent="$store.discoveryStore.executeCta(card.cta_action)">
-
-                            <div class="discovery-feature-head">
-                                <div class="discovery-feature-thumb">
-                                    <template x-if="card.thumbnail">
-                                        <img :src="card.thumbnail" :alt="card.title" loading="lazy">
-                                    </template>
-                                    <template x-if="!card.thumbnail && card.icon">
-                                        <span class="material-symbols-outlined discovery-feature-icon" x-text="card.icon"></span>
-                                    </template>
-                                </div>
-                                <h4 class="discovery-feature-title" x-text="card.title"></h4>
-                            </div>
-
-                            <button class="btn btn primary"
-                                    type="button"
-                                    @click.stop="$store.discoveryStore.executeCta(card.cta_action)">
-                                <span x-text="card.cta_text"></span>
-                            </button>
-                        </article>
+                        <button class="discovery-feature-card"
+                                type="button"
+                                @click="$store.discoveryStore.executeCta(card.cta_action)">
+                            <span class="discovery-feature-thumb">
+                                <template x-if="card.thumbnail">
+                                    <img :src="card.thumbnail" :alt="card.title" loading="lazy">
+                                </template>
+                                <template x-if="!card.thumbnail && card.icon">
+                                    <span class="material-symbols-outlined discovery-feature-icon" x-text="card.icon"></span>
+                                </template>
+                            </span>
+                            <span class="discovery-feature-title" x-text="`${card.cta_text || 'Connect'} ${card.title}`"></span>
+                        </button>
                     </template>
                 </div>
             </section>
@@ -58,11 +56,16 @@
                     </button>
 
                     <header class="discovery-account-header">
-                        <span class="material-symbols-outlined discovery-account-icon">key</span>
                         <div class="discovery-account-copy">
                             <h2 x-text="card.title"></h2>
                             <p x-show="card.description" x-text="card.description"></p>
                         </div>
+                        <button class="btn btn primary discovery-account-cta"
+                                type="button"
+                                @click="$store.discoveryStore.executeCta(card.cta_action)">
+                            <span x-text="card.cta_text"></span>
+                            <span class="material-symbols-outlined">arrow_forward</span>
+                        </button>
                     </header>
 
                     <div class="discovery-account-chips" x-show="(card.account_chips || []).length > 0">
@@ -95,12 +98,6 @@
                         </template>
                     </div>
 
-                    <button class="btn btn primary discovery-account-cta"
-                            type="button"
-                            @click="$store.discoveryStore.executeCta(card.cta_action)">
-                        <span x-text="card.cta_text"></span>
-                        <span class="material-symbols-outlined">arrow_forward</span>
-                    </button>
                 </article>
             </template>
 
@@ -135,15 +132,23 @@
 
         .discovery-features-panel {
             min-height: 100%;
-            padding: 1.7rem 1.55rem 1.55rem;
+            padding: 1.25rem 1.45rem;
         }
 
         .discovery-panel-header {
             display: grid;
-            gap: 0.42rem;
+            grid-template-columns: minmax(0, 1fr) auto;
+            gap: 0.7rem;
+            align-items: start;
             margin-bottom: 1.28rem;
         }
 
+        .discovery-panel-copy {
+            display: grid;
+            gap: 0.42rem;
+            min-width: 0;
+        }
+
         .discovery-panel-header h2 {
             margin: 0;
             color: var(--color-text);
@@ -162,31 +167,32 @@
         .discovery-features {
             display: grid;
             grid-template-columns: repeat(3, minmax(0, 1fr));
-            gap: 0.7rem;
+            gap: 0.65rem;
         }
 
         .discovery-feature-card {
-            position: relative;
-            display: flex;
-            flex-direction: column;
-            align-items: flex-start;
-            text-align: left;
-        }
-
-        .discovery-feature-head {
-            display: flex;
-            flex-direction: row;
+            display: inline-flex;
             align-items: center;
-            gap: 0.75rem;
-            width: 100%;
+            gap: 0.5rem;
             min-width: 0;
-            margin-bottom: 1rem;
+            min-height: 3.1rem;
+            border: 1px solid color-mix(in srgb, var(--color-border) 52%, transparent);
+            border-radius: 8px;
+            padding: 0.56rem 0.58rem;
+            background: color-mix(in srgb, var(--color-background) 50%, transparent);
+            color: inherit;
+            cursor: pointer;
+            font-family: var(--font-family-main, "Rubik", Arial, Helvetica, sans-serif);
+            text-align: left;
+            transition:
+                border-color 0.18s ease,
+                background-color 0.18s ease;
         }
 
         .discovery-feature-thumb {
             flex: 0 0 auto;
-            width: 52px;
-            height: 52px;
+            width: 32px;
+            height: 32px;
             display: flex;
             align-items: center;
             justify-content: center;
@@ -212,34 +218,15 @@
             flex: 1 1 auto;
             min-width: 0;
             color: var(--color-text);
-            font-size: 0.96rem;
+            font-size: 0.84rem;
             font-weight: 520;
             line-height: 1.25;
         }
 
-        .discovery-feature-desc {
-            margin: 1.12rem 0 0;
-            padding-bottom: var(--spacing-md);
-            color: color-mix(in srgb, var(--color-text) 72%, transparent);
-            font-size: 0.86rem;
-            line-height: 1.48;
-        }
-
-        .discovery-feature-card > .btn {
-            margin-top: auto;
-            min-width: 6.1rem;
-            min-height: 2.35rem;
-            border: 0;
-            border-radius: 8px;
-            color: #fff;
-            font-family: var(--font-family-main, "Rubik", Arial, Helvetica, sans-serif);
-            font-size: 0.88rem;
-            font-weight: 460;
-        }
-
-        .discovery-feature-card > .btn:hover,
-        .discovery-feature-card > .btn:focus-visible {
-            filter: brightness(1.06);
+        .discovery-feature-card:hover,
+        .discovery-feature-card:focus-visible {
+            border-color: color-mix(in srgb, var(--color-border) 88%, var(--color-text) 12%);
+            background: color-mix(in srgb, var(--color-panel) 86%, var(--color-background) 14%);
             outline: none;
         }
 
@@ -272,10 +259,12 @@
             height: 26px;
         }
 
-        .discovery-feature-card:hover .discovery-dismiss,
-        .discovery-feature-card:focus-visible .discovery-dismiss,
-        .discovery-account-card:hover .discovery-dismiss,
-        .discovery-account-card:focus-within .discovery-dismiss {
+        .discovery-panel-dismiss {
+            position: static;
+            opacity: 0.68;
+        }
+
+        .discovery-account-card > .discovery-dismiss {
             opacity: 0.68;
         }
 
@@ -294,32 +283,19 @@
         .discovery-account-card {
             position: relative;
             display: grid;
-            gap: 1.1rem;
-            padding: 1.35rem 1.45rem 1.4rem;
+            gap: 1rem;
+            padding: 1.25rem 1.45rem 1.25rem;
         }
 
         .discovery-account-header {
             display: grid;
-            grid-template-columns: auto minmax(0, 1fr);
+            grid-template-columns: minmax(0, 1fr) auto;
             gap: 0.95rem;
             align-items: center;
             min-width: 0;
             padding-right: 2.1rem;
         }
 
-        .discovery-account-icon {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            width: 3rem;
-            height: 3rem;
-            border-radius: 10px;
-            color: #2f6bff;
-            background: color-mix(in srgb, var(--color-primary) 10%, transparent);
-            box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 12%, transparent);
-            font-size: 1.7rem;
-        }
-
         .discovery-account-copy {
             display: grid;
             gap: 0.3rem;
@@ -357,7 +333,7 @@
             min-height: 2rem;
             padding: 0.32rem 0.58rem;
             border: 1px solid color-mix(in srgb, var(--color-border) 52%, transparent);
-            border-radius: 999px;
+            border-radius: 8px;
             background: color-mix(in srgb, var(--color-background) 50%, transparent);
             color: color-mix(in srgb, var(--color-text) 74%, transparent);
             font-size: 0.8rem;
@@ -464,7 +440,7 @@
         }
 
         .discovery-account-cta {
-            justify-self: start;
+            justify-self: end;
             display: inline-flex;
             align-items: center;
             justify-content: center;
@@ -479,6 +455,7 @@
             font-family: var(--font-family-main, "Rubik", Arial, Helvetica, sans-serif);
             font-size: 0.88rem;
             font-weight: 460;
+            white-space: nowrap;
             box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
         }
 
@@ -536,33 +513,14 @@
             }
 
             .discovery-feature-card {
-                display: grid;
-                grid-template-columns: minmax(0, 1fr) auto;
-                gap: 0.75rem;
+                display: inline-flex;
                 min-height: 0;
-                align-items: center;
-            }
-
-            .discovery-feature-head {
-                grid-column: 1;
-                min-width: 0;
-                margin-bottom: 0;
+                padding: 0.62rem 0.7rem;
             }
 
             .discovery-feature-thumb {
-                width: 46px;
-                height: 46px;
-            }
-
-            .discovery-feature-desc {
-                display: none;
-            }
-
-            .discovery-feature-card > .btn {
-                grid-column: 2;
-                grid-row: 1;
-                align-self: center;
-                margin-top: 0;
+                width: 32px;
+                height: 32px;
             }
 
             .discovery-account-usage-row {
@@ -577,12 +535,7 @@
             }
 
             .discovery-feature-card {
-                grid-template-columns: minmax(0, 1fr) auto;
-                padding-right: 3rem;
-            }
-
-            .discovery-feature-card > .btn {
-                justify-self: end;
+                padding-right: 0.7rem;
             }
 
             .discovery-account-card {
@@ -594,11 +547,11 @@
                 padding-right: 2.2rem;
             }
 
-            .discovery-account-icon {
-                width: 2.55rem;
-                height: 2.55rem;
-                font-size: 1.45rem;
+            .discovery-account-cta {
+                grid-column: 1 / -1;
+                justify-self: start;
             }
+
         }
     </style>
 </div>
diff --git a/plugins/_discovery/webui/discovery-store.js b/plugins/_discovery/webui/discovery-store.js
index 8dbb52919..2feb1756f 100644
--- a/plugins/_discovery/webui/discovery-store.js
+++ b/plugins/_discovery/webui/discovery-store.js
@@ -64,6 +64,25 @@ const model = {
     this.hasDismissedCards = true;
   },
 
+  dismissFeatureCards() {
+    const featureIds = this.featureCards
+      .filter((card) => card.dismissible !== false)
+      .map((card) => card.id)
+      .filter(Boolean);
+
+    if (!featureIds.length) return;
+
+    const dismissed = this._getDismissedIds();
+    const dismissSet = new Set(featureIds);
+    for (const id of dismissSet) {
+      dismissed.add(id);
+    }
+    this._persistDismissedIds(dismissed);
+
+    this.cards = this.cards.filter((card) => !dismissSet.has(card.id));
+    this.hasDismissedCards = true;
+  },
+
   undismissCards() {
     localStorage.removeItem(STORAGE_KEY);
     this.refreshCards();
diff --git a/plugins/_model_config/extensions/python/banners/_20_missing_api_key.py b/plugins/_model_config/extensions/python/banners/_20_missing_api_key.py
index c5722435c..1d58b3d8e 100644
--- a/plugins/_model_config/extensions/python/banners/_20_missing_api_key.py
+++ b/plugins/_model_config/extensions/python/banners/_20_missing_api_key.py
@@ -7,12 +7,8 @@ class MissingApiKeyCheck(Extension):
     """Check if API keys are configured for selected model providers."""
 
     LOCAL_PROVIDERS = {"ollama", "lm_studio", "llama_cpp", "omlx", "vllm"}
-    CONFIGURE_MODEL_SETTINGS_LINK = (
-        """<div class="onboarding-banner-btn-container" style="margin-top: 12px;">"""
-        """<button class="btn btn-ok" onclick="window.openModal('/plugins/_onboarding/webui/onboarding.html');return false;">"""
-        """Start Onboarding</button>"""
-        """</div>"""
-    )
+    ONBOARDING_MODAL_PATH = "/plugins/_onboarding/webui/onboarding.html"
+    ONBOARDING_CTA_TEXT = "Start Onboarding"
 
     async def execute(self, banners: list = [], frontend_context: dict = {}, **kwargs):
         cfg = plugins.get_plugin_config("_model_config") or {}
@@ -25,11 +21,12 @@ class MissingApiKeyCheck(Extension):
                 "priority": 100,
                 "title": "Welcome to Agent Zero!",
                 "html": f"""You're almost ready to chat. Please configure your models to continue.<br>
-                         Insert your API key in the onboarding wizard.
-                         {self.CONFIGURE_MODEL_SETTINGS_LINK}""",
+                         Insert your API key in the onboarding wizard.""",
+                "cta_text": self.ONBOARDING_CTA_TEXT,
+                "cta_action": f"open-modal:{self.ONBOARDING_MODAL_PATH}",
                 "dismissible": False,
                 "source": "backend",
-                "auto_modal_path": "/plugins/_onboarding/webui/onboarding.html",
+                "auto_modal_path": self.ONBOARDING_MODAL_PATH,
                 "auto_modal_reason": "missing-api-key",
                 "auto_modal_priority": 100,
                 "auto_modal_surfaces": ["welcome", "chat-created"],
@@ -69,8 +66,9 @@ class MissingApiKeyCheck(Extension):
                     "priority": 90,
                     "title": "Missing API Key for model presets",
                     "html": f"""No API key configured for preset models: {preset_list}.<br>
-                             These presets will not work until you provide the required API keys.<br>
-                             {self.CONFIGURE_MODEL_SETTINGS_LINK}""",
+                             These presets will not work until you provide the required API keys.""",
+                    "cta_text": self.ONBOARDING_CTA_TEXT,
+                    "cta_action": f"open-modal:{self.ONBOARDING_MODAL_PATH}",
                     "dismissible": True,
                     "source": "backend"
                 })
diff --git a/tests/test_model_config_api_keys.py b/tests/test_model_config_api_keys.py
index 1153630fd..1b592c555 100644
--- a/tests/test_model_config_api_keys.py
+++ b/tests/test_model_config_api_keys.py
@@ -82,6 +82,9 @@ async def test_missing_api_key_banner_exposes_missing_providers(monkeypatch):
     )
     row = next(b for b in banners if b.get("id") == "missing-api-key")
     assert row.get("missing_providers") == fake
+    assert row["cta_text"] == "Start Onboarding"
+    assert row["cta_action"] == "open-modal:/plugins/_onboarding/webui/onboarding.html"
+    assert "onboarding-banner-btn-container" not in row["html"]
 
 
 def test_model_config_frontend_tracks_inline_api_key_edits():
@@ -267,6 +270,8 @@ def test_missing_api_key_banner_includes_auto_modal_metadata(monkeypatch):
     assert row["type"] == "warning"
     assert row["dismissible"] is False
     assert row["missing_providers"] == fake
+    assert row["cta_text"] == "Start Onboarding"
+    assert row["cta_action"] == "open-modal:/plugins/_onboarding/webui/onboarding.html"
 
 
 def test_provider_key_modes_for_local_and_ollama_cloud():
diff --git a/tests/test_oauth_static.py b/tests/test_oauth_static.py
index 4b7b165bd..419a93178 100644
--- a/tests/test_oauth_static.py
+++ b/tests/test_oauth_static.py
@@ -179,6 +179,8 @@ def test_oauth_discovery_card_renders_in_welcome_account_panel():
 
     assert "discovery-oauth-accounts" in discovery_cards
     assert "Your AI accounts" in discovery_cards
+    assert "Use your subscription-backed logins for model access." in discovery_cards
+    assert "Link account-backed providers such as" not in discovery_cards
     assert "Connected OAuth accounts" not in discovery_cards
     assert "discovery-codex-oauth" not in discovery_cards
     assert "5h and weekly limits are ready." not in discovery_cards
@@ -188,6 +190,9 @@ def test_oauth_discovery_card_renders_in_welcome_account_panel():
     assert "account_chips" in discovery_cards
     assert "discovery-account-card" in welcome_cards
     assert "discovery-account-chip" in welcome_cards
+    assert "discovery-account-icon" not in welcome_cards
+    assert ".discovery-account-chip {\n            display: inline-grid;" in welcome_cards
+    assert "            border-radius: 8px;" in welcome_cards
     assert "discovery-account-usage" in welcome_cards
     assert "formatRemainingPercent(window)" in welcome_cards
     assert "formatRemainingPercent(window)" in discovery_store
diff --git a/tests/test_welcome_composer_static.py b/tests/test_welcome_composer_static.py
index 11ab62311..0738fb8a9 100644
--- a/tests/test_welcome_composer_static.py
+++ b/tests/test_welcome_composer_static.py
@@ -10,17 +10,70 @@ def _read(relative_path: str) -> str:
 
 def test_welcome_screen_embeds_shared_new_chat_composer() -> None:
     welcome = _read("webui/components/welcome/welcome-screen.html")
+    welcome_store = _read("webui/components/welcome/welcome-store.js")
     index = _read("webui/index.html")
     discovery_cards = _read(
         "plugins/_discovery/extensions/webui/welcome-actions-end/discovery-cards.html"
     )
+    discovery_store = _read("plugins/_discovery/webui/discovery-store.js")
 
     assert 'class="welcome-composer"' in welcome
     assert 'path="chat/attachments/inputPreview.html"' in welcome
     assert 'path="chat/input/chat-bar-input.html"' in welcome
+    assert "x-text=\"$store.welcomeStore.heroSubtitle\"" in welcome
+    assert "Hello! I'm Agent Zero" in welcome
+    assert "'is-setup-required': $store.welcomeStore.hasBlockingSetupBanner" in welcome
+    assert 'class="welcome-setup-composer"' in welcome
+    assert "Configure your models to start chatting" in welcome
+    assert "Start Onboarding" in welcome
+    assert "openBlockingSetup()" in welcome
+    assert '.filter((b) => b.id !== "missing-api-key")' in welcome_store
+    assert "get blockingSetupBanner()" in welcome_store
+    assert "get heroSubtitle()" in welcome_store
+    assert 'return "One setup step before chatting.";' in welcome_store
+    assert 'return "How can I help you today?";' in welcome_store
+    assert "openBlockingSetup()" in welcome_store
     assert '<h2>Quick Actions</h2>' in welcome
     assert 'class="welcome-lower-grid"' in welcome
     assert 'x-extension id="welcome-actions-end"' in welcome
+    assert "grid-template-columns: repeat(4, minmax(0, 1fr));" in welcome
+    assert '"accounts accounts channels channels"' in welcome
+    assert '"system system system system"' in welcome
+    assert "align-items: stretch;" in welcome
+    assert ".welcome-lower-grid .discovery-slot {\n            display: contents;" in welcome
+    assert ".welcome-lower-grid .discovery-account-card {\n            grid-area: accounts;" in welcome
+    assert "grid-area: system;" in welcome
+    assert ".welcome-composer .input-row {\n            min-height: 4.9rem;" in welcome
+    assert "border-radius: 8px;" in welcome
+    assert 'aria-label="Refresh System Resources"' in welcome
+    assert "refreshBanners(true)" in welcome
+    assert 'aria-label="Dismiss System Resources"' in welcome
+    assert "dismissBanner($store.welcomeStore.systemResourceBanner?.id || 'system-resources')" in welcome
+    assert "welcome-panel-status-icon" not in welcome
+    assert "monitoring" not in welcome
+    assert ".welcome-banner {\n            --welcome-banner-accent: #2f6bff;" in welcome
+    assert "grid-template-columns: auto minmax(0, 1fr) auto auto;" in welcome
+    assert ".welcome-banner.banner-warning {\n            --welcome-banner-accent: #f59e0b;" in welcome
+    assert "border-left: 4px" not in welcome
+    assert 'class="welcome-banner-cta"' in welcome
+    assert "executeBannerAction(banner.cta_action)" in welcome
+    assert "executeBannerAction(action)" in welcome_store
+    assert 'action.startsWith("open-modal:")' in welcome_store
+    assert ".welcome-banner-html .onboarding-banner-btn-container" in welcome
+    assert "justify-content: flex-end;" in welcome
+    assert "justify-content: flex-start;" in welcome
+    assert ".welcome-banner-html .btn,\n        .welcome-banner-html button" in welcome
+    assert "background-color: #4248f1;" in welcome
+    assert 'aria-label="Dismiss Connect Channels"' in discovery_cards
+    assert "dismissFeatureCards()" in discovery_cards
+    assert "dismissFeatureCards() {" in discovery_store
+    assert 'class="discovery-feature-card"\n                                type="button"' in discovery_cards
+    assert "`${card.cta_text || 'Connect'} ${card.title}`" in discovery_cards
+    assert "discovery-feature-card > .btn" not in discovery_cards
+    assert "discovery-feature-head" not in discovery_cards
+    assert "discovery-account-header" in discovery_cards
+    assert "discovery-account-cta" in discovery_cards
+    assert "discovery-account-icon" not in discovery_cards
 
     assert "x-if=\"$store.welcomeStore && $store.welcomeStore.isVisible\"" in index
     assert "x-if=\"!$store.welcomeStore || !$store.welcomeStore.isVisible\"" in index
diff --git a/webui/components/welcome/welcome-screen.html b/webui/components/welcome/welcome-screen.html
index d27472373..15a29fc29 100644
--- a/webui/components/welcome/welcome-screen.html
+++ b/webui/components/welcome/welcome-screen.html
@@ -15,11 +15,31 @@
 
                 <main class="welcome-shell">
                     <header class="welcome-hero">
-                        <h1>Welcome back <span aria-hidden="true">&#128075;</span></h1>
-                        <p>Agent Zero is ready to help.</p>
+                        <h1>Hello! I'm Agent Zero <span aria-hidden="true">&#128075;</span></h1>
+                        <p x-text="$store.welcomeStore.heroSubtitle"></p>
                     </header>
 
-                    <section class="welcome-composer" aria-label="Start a new chat">
+                    <section class="welcome-composer"
+                             :class="{ 'is-setup-required': $store.welcomeStore.hasBlockingSetupBanner }"
+                             :aria-label="$store.welcomeStore.hasBlockingSetupBanner ? 'Configure models to start chatting' : 'Start a new chat'">
+                        <template x-if="$store.welcomeStore.hasBlockingSetupBanner">
+                            <button type="button"
+                                    class="welcome-setup-composer"
+                                    @click="$store.welcomeStore.openBlockingSetup()"
+                                    aria-label="Start onboarding">
+                                <span class="welcome-setup-icon" aria-hidden="true">
+                                    <span class="material-symbols-outlined">warning</span>
+                                </span>
+                                <span class="welcome-setup-copy">
+                                    <span class="welcome-setup-title">Configure your models to start chatting</span>
+                                    <span class="welcome-setup-detail">Insert your API key in the onboarding wizard.</span>
+                                </span>
+                                <span class="welcome-setup-cta">
+                                    <span>Start Onboarding</span>
+                                    <span class="material-symbols-outlined" aria-hidden="true">arrow_forward</span>
+                                </span>
+                            </button>
+                        </template>
                         <x-component path="chat/attachments/inputPreview.html"></x-component>
                         <x-component path="chat/input/chat-bar-input.html"></x-component>
                     </section>
@@ -37,6 +57,14 @@
                                         <div class="welcome-banner-title" x-text="banner.title"></div>
                                         <div class="welcome-banner-html" x-html="banner.html"></div>
                                     </div>
+                                    <button class="welcome-banner-cta"
+                                            type="button"
+                                            x-show="banner.cta_text && banner.cta_action"
+                                            @click.stop="$store.welcomeStore.executeBannerAction(banner.cta_action)"
+                                            :aria-label="banner.cta_text">
+                                        <span x-text="banner.cta_text"></span>
+                                        <span class="material-symbols-outlined" aria-hidden="true">arrow_forward</span>
+                                    </button>
                                     <button class="welcome-banner-dismiss"
                                             type="button"
                                             x-show="banner.dismissible !== false"
@@ -131,7 +159,24 @@
                                  x-transition.opacity>
                             <header class="welcome-panel-header">
                                 <h2 x-text="$store.welcomeStore.systemResourceBanner?.title || 'System Resources'"></h2>
-                                <span class="material-symbols-outlined">monitoring</span>
+                                <div class="welcome-panel-actions">
+                                    <button class="welcome-panel-icon-button"
+                                            type="button"
+                                            :disabled="$store.welcomeStore.bannersLoading"
+                                            @click.stop="$store.welcomeStore.refreshBanners(true)"
+                                            title="Refresh"
+                                            aria-label="Refresh System Resources">
+                                        <span class="material-symbols-outlined">refresh</span>
+                                    </button>
+                                    <button class="welcome-panel-icon-button"
+                                            type="button"
+                                            x-show="$store.welcomeStore.systemResourceBanner?.dismissible !== false"
+                                            @click.stop="$store.welcomeStore.dismissBanner($store.welcomeStore.systemResourceBanner?.id || 'system-resources')"
+                                            title="Dismiss"
+                                            aria-label="Dismiss System Resources">
+                                        <span class="material-symbols-outlined">close</span>
+                                    </button>
+                                </div>
                             </header>
                             <div class="welcome-system-body"
                                  x-html="$store.welcomeStore.systemResourceBanner?.html || ''"></div>
@@ -189,6 +234,7 @@
             gap: 1.55rem;
             width: min(100%, 1220px);
             margin: 0 auto;
+            padding-top: 4rem;
         }
 
         .welcome-hero h1 {
@@ -217,10 +263,110 @@
             display: contents;
         }
 
+        .welcome-composer.is-setup-required > x-component {
+            display: none;
+        }
+
+        .welcome-setup-composer {
+            display: grid;
+            grid-template-columns: auto minmax(0, 1fr) auto;
+            align-items: center;
+            gap: 1rem;
+            width: 100%;
+            min-height: 4.9rem;
+            padding: 0.74rem 0.7rem 0.74rem 0.86rem;
+            border: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
+            border-radius: 8px;
+            background: color-mix(in srgb, var(--color-panel) 64%, var(--color-background) 36%);
+            color: inherit;
+            cursor: pointer;
+            font-family: var(--font-family-main, "Rubik", Arial, Helvetica, sans-serif);
+            text-align: left;
+            box-shadow:
+                inset 0 1px 0 rgba(255, 255, 255, 0.035),
+                0 18px 46px rgba(0, 0, 0, 0.18);
+            transition:
+                border-color 0.18s ease,
+                background-color 0.18s ease,
+                box-shadow 0.18s ease;
+        }
+
+        .welcome-setup-composer:hover,
+        .welcome-setup-composer:focus-visible {
+            border-color: color-mix(in srgb, var(--color-border) 88%, var(--color-text) 12%);
+            background: color-mix(in srgb, var(--color-panel) 74%, var(--color-background) 26%);
+            box-shadow:
+                inset 0 1px 0 rgba(255, 255, 255, 0.045),
+                0 22px 54px rgba(0, 0, 0, 0.22);
+            outline: none;
+        }
+
+        .welcome-setup-icon {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 2.5rem;
+            height: 2.5rem;
+            border-radius: 8px;
+            color: #f59e0b;
+            background: color-mix(in srgb, #f59e0b 9%, transparent);
+            box-shadow: inset 0 0 0 1px color-mix(in srgb, #f59e0b 12%, transparent);
+        }
+
+        .welcome-setup-icon .material-symbols-outlined {
+            font-size: 1.35rem;
+        }
+
+        .welcome-setup-copy {
+            display: grid;
+            gap: 0.18rem;
+            min-width: 0;
+        }
+
+        .welcome-setup-title {
+            color: var(--color-text);
+            font-size: 1rem;
+            font-weight: 520;
+            line-height: 1.25;
+        }
+
+        .welcome-setup-detail {
+            color: color-mix(in srgb, var(--color-text) 58%, transparent);
+            font-size: 0.92rem;
+            line-height: 1.35;
+        }
+
+        .welcome-setup-cta {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.36rem;
+            min-height: 2.75rem;
+            border-radius: 12px;
+            padding: 0.62rem 0.95rem;
+            background-color: #4248f1;
+            color: #fff;
+            font-size: 0.92rem;
+            font-weight: 500;
+            line-height: 1;
+            white-space: nowrap;
+            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
+            transition: background-color 0.18s ease;
+        }
+
+        .welcome-setup-composer:hover .welcome-setup-cta,
+        .welcome-setup-composer:focus-visible .welcome-setup-cta {
+            background-color: #353bc5;
+        }
+
+        .welcome-setup-cta .material-symbols-outlined {
+            font-size: 1.24rem;
+        }
+
         .welcome-composer .input-row {
             min-height: 4.9rem;
             padding: 0.58rem 0.7rem 0.58rem 0.86rem;
-            border-radius: 16px;
+            border-radius: 8px;
             background: color-mix(in srgb, var(--color-panel) 64%, var(--color-background) 36%);
         }
 
@@ -261,64 +407,64 @@
         }
 
         .welcome-banner {
+            --welcome-banner-accent: #2f6bff;
             position: relative;
-            display: flex;
-            align-items: flex-start;
-            gap: 0.78rem;
-            padding: 0.9rem 1rem;
-            border-radius: 12px;
+            display: grid;
+            grid-template-columns: auto minmax(0, 1fr) auto auto;
+            align-items: start;
+            gap: 1rem;
+            min-height: 5.45rem;
+            padding: 1rem 1.1rem;
+            border-radius: 8px;
             text-align: left;
         }
 
         .welcome-banner.banner-info {
-            border-left: 4px solid #2f6bff;
+            --welcome-banner-accent: #2f6bff;
         }
 
         .welcome-banner.banner-warning {
-            border-left: 4px solid #f59e0b;
+            --welcome-banner-accent: #f59e0b;
         }
 
         .welcome-banner.banner-error {
-            border-left: 4px solid #ef4444;
+            --welcome-banner-accent: #ef4444;
         }
 
         .welcome-banner-icon {
-            display: flex;
-            width: 1.6rem;
-            height: 1.6rem;
+            display: inline-flex;
+            width: 2.25rem;
+            height: 2.25rem;
             align-items: center;
             justify-content: center;
-            color: #2f6bff;
-        }
-
-        .banner-warning .welcome-banner-icon {
-            color: #f59e0b;
-        }
-
-        .banner-error .welcome-banner-icon {
-            color: #ef4444;
+            border-radius: 8px;
+            color: var(--welcome-banner-accent);
+            background: color-mix(in srgb, var(--welcome-banner-accent) 9%, transparent);
+            box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--welcome-banner-accent) 12%, transparent);
         }
 
         .welcome-banner-icon .material-symbols-outlined {
-            font-size: 1.25rem;
+            font-size: 1.28rem;
         }
 
         .welcome-banner-content {
             flex: 1;
             min-width: 0;
+            padding-top: 0.05rem;
         }
 
         .welcome-banner-title {
-            margin-bottom: 0.25rem;
+            margin-bottom: 0.28rem;
             color: var(--color-text);
-            font-size: 0.92rem;
-            font-weight: 650;
+            font-size: 1rem;
+            font-weight: 560;
             line-height: 1.25;
         }
 
         .welcome-banner-html {
-            color: color-mix(in srgb, var(--color-text) 68%, transparent);
-            font-size: 0.84rem;
+            max-width: 72ch;
+            color: color-mix(in srgb, var(--color-text) 58%, transparent);
+            font-size: 0.92rem;
             line-height: 1.45;
         }
 
@@ -331,6 +477,55 @@
             text-decoration: underline;
         }
 
+        .welcome-banner-html .onboarding-banner-btn-container {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: flex-end;
+            gap: 0.55rem;
+            margin-top: 0.9rem !important;
+        }
+
+        .welcome-banner-cta,
+        .welcome-banner-html .btn,
+        .welcome-banner-html button {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            min-height: 2.35rem;
+            border: 0;
+            border-radius: 8px;
+            padding: 0.55rem 0.9rem;
+            background-color: #4248f1;
+            color: #fff;
+            font-family: var(--font-family-main, "Rubik", Arial, Helvetica, sans-serif);
+            font-size: 0.88rem;
+            font-weight: 460;
+            line-height: 1.2;
+            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
+            transition: background-color 0.18s ease;
+        }
+
+        .welcome-banner-cta {
+            align-self: center;
+            justify-self: end;
+            gap: 0.36rem;
+            white-space: nowrap;
+        }
+
+        .welcome-banner-cta .material-symbols-outlined {
+            font-size: 1.05rem;
+        }
+
+        .welcome-banner-cta:hover,
+        .welcome-banner-cta:focus-visible,
+        .welcome-banner-html .btn:hover,
+        .welcome-banner-html .btn:focus-visible,
+        .welcome-banner-html button:hover,
+        .welcome-banner-html button:focus-visible {
+            background-color: #353bc5;
+            outline: none;
+        }
+
         .welcome-banner-dismiss,
         .welcome-undismiss-button {
             display: inline-flex;
@@ -348,6 +543,7 @@
             width: 2rem;
             height: 2rem;
             border-radius: 8px;
+            margin: -0.2rem -0.2rem 0 0;
         }
 
         .welcome-banner-dismiss:hover,
@@ -451,18 +647,33 @@
 
         .welcome-lower-grid {
             display: grid;
-            grid-template-columns: minmax(0, 1.06fr) minmax(320px, 0.94fr);
+            grid-template-columns: repeat(4, minmax(0, 1fr));
+            grid-template-areas:
+                "accounts accounts channels channels"
+                "system system system system";
             gap: 1rem;
             align-items: stretch;
         }
 
         .welcome-lower-grid .discovery-slot {
-            grid-column: auto;
-            min-width: 0;
-            width: 100%;
+            display: contents;
+        }
+
+        .welcome-lower-grid .discovery-features-panel {
+            grid-area: channels;
+            min-height: 0;
+        }
+
+        .welcome-lower-grid .discovery-account-card {
+            grid-area: accounts;
+        }
+
+        .welcome-lower-grid .discovery-undismiss {
+            grid-column: 1 / -1;
         }
 
         .welcome-system-card {
+            grid-area: system;
             min-width: 0;
             border-radius: 8px;
             padding: 1.6rem 1.7rem;
@@ -477,10 +688,41 @@
             margin-bottom: 1.5rem;
         }
 
-        .welcome-panel-header .material-symbols-outlined {
+        .welcome-panel-actions {
+            display: flex;
+            align-items: center;
+            gap: 0.35rem;
+            flex: 0 0 auto;
+        }
+
+        .welcome-panel-icon-button {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 2rem;
+            height: 2rem;
+            border: 0;
+            border-radius: 8px;
+            background: transparent;
+            color: color-mix(in srgb, var(--color-text) 64%, transparent);
+            cursor: pointer;
+            font-family: var(--font-family-main, "Rubik", Arial, Helvetica, sans-serif);
+        }
+
+        .welcome-panel-icon-button:hover,
+        .welcome-panel-icon-button:focus-visible {
             color: var(--color-text);
-            font-size: 1.35rem;
-            opacity: 0.86;
+            background: color-mix(in srgb, var(--color-border) 45%, transparent);
+            outline: none;
+        }
+
+        .welcome-panel-icon-button:disabled {
+            cursor: default;
+            opacity: 0.45;
+        }
+
+        .welcome-panel-icon-button .material-symbols-outlined {
+            font-size: 1.18rem;
         }
 
         .system-resource-body {
@@ -560,6 +802,14 @@
 
             .welcome-lower-grid {
                 grid-template-columns: 1fr;
+                grid-template-areas:
+                    "accounts"
+                    "channels"
+                    "system";
+            }
+
+            .welcome-shell {
+                padding-top: 4rem;
             }
         }
 
@@ -571,6 +821,7 @@
 
             .welcome-shell {
                 gap: 1.2rem;
+                padding-top: 4rem;
             }
 
             .welcome-actions {
@@ -593,6 +844,54 @@
                 min-height: 4.35rem;
             }
 
+            .welcome-setup-composer {
+                grid-template-columns: auto minmax(0, 1fr);
+                align-items: start;
+                gap: 0.8rem;
+                min-height: 4.35rem;
+                padding: 0.8rem;
+            }
+
+            .welcome-setup-cta {
+                grid-column: 2;
+                justify-self: start;
+                min-height: 2.45rem;
+                border-radius: 8px;
+                padding: 0.55rem 0.85rem;
+            }
+
+            .welcome-banner {
+                grid-template-columns: auto minmax(0, 1fr);
+                gap: 0.82rem;
+                padding: 0.95rem;
+            }
+
+            .welcome-banner-dismiss {
+                position: absolute;
+                top: 0.7rem;
+                right: 0.7rem;
+                margin: 0;
+            }
+
+            .welcome-banner-content {
+                padding-right: 1.9rem;
+            }
+
+            .welcome-banner-html {
+                max-width: none;
+            }
+
+            .welcome-banner-html .onboarding-banner-btn-container {
+                justify-content: flex-start;
+                margin-top: 0.75rem !important;
+            }
+
+            .welcome-banner-cta {
+                grid-column: 2;
+                justify-self: start;
+                margin-top: 0.25rem;
+            }
+
             .welcome-system-card {
                 padding: 1.15rem;
             }
diff --git a/webui/components/welcome/welcome-store.js b/webui/components/welcome/welcome-store.js
index 521b94dbf..eeb41e25b 100644
--- a/webui/components/welcome/welcome-store.js
+++ b/webui/components/welcome/welcome-store.js
@@ -143,6 +143,7 @@ const model = {
   get sortedBanners() {
     return [...this.banners]
       .filter((b) => b.id !== "system-resources")
+      .filter((b) => b.id !== "missing-api-key")
       .filter((b) => b.type !== "hero" && b.type !== "feature")
       .sort((a, b) => (b.priority || 0) - (a.priority || 0));
   },
@@ -151,6 +152,43 @@ const model = {
     return this.banners.find((b) => b.id === "system-resources") || null;
   },
 
+  get blockingSetupBanner() {
+    return this.banners.find((b) => b.id === "missing-api-key") || null;
+  },
+
+  get hasBlockingSetupBanner() {
+    return Boolean(this.blockingSetupBanner);
+  },
+
+  get heroSubtitle() {
+    if (this.hasBlockingSetupBanner) {
+      return "One setup step before chatting.";
+    }
+    return "How can I help you today?";
+  },
+
+  openBlockingSetup() {
+    const path =
+      this.blockingSetupBanner?.auto_modal_path ||
+      "/plugins/_onboarding/webui/onboarding.html";
+    window.openModal(path);
+  },
+
+  executeBannerAction(action) {
+    if (!action) return;
+
+    if (action.startsWith("open-modal:")) {
+      const path = action.slice("open-modal:".length);
+      if (path) window.openModal(path);
+      return;
+    }
+
+    if (action.startsWith("open-url:")) {
+      const url = action.slice("open-url:".length);
+      if (url) window.open(url, "_blank", "noopener,noreferrer");
+    }
+  },
+
   /**
    * Dismiss a banner by ID.
    *