From fde1d6fc014531e1d1d06cc9306db5f423bf724f Mon Sep 17 00:00:00 2001 From: Petr Date: Tue, 10 Mar 2026 11:18:56 +0100 Subject: [PATCH] Move Claude Code setup to dashboard, remove step 5 from onboarding - Get Started page now has 4 steps (folder, SSH key, pubkey, register) - After account creation, dashboard shows prominent "Set up your local environment" CTA with claude command and Copy Setup Instructions - CTA only visible when user hasn't synced yet (last_sync is empty) - Bottom banner demoted to subtle secondary style for returning users --- webapp/templates/dashboard.html | 168 +++++++++++++++++++++++--------- 1 file changed, 120 insertions(+), 48 deletions(-) diff --git a/webapp/templates/dashboard.html b/webapp/templates/dashboard.html index 7c52d2d..98eaa19 100644 --- a/webapp/templates/dashboard.html +++ b/webapp/templates/dashboard.html @@ -1149,58 +1149,127 @@ } /* ── Setup Banner ── */ - .setup-banner { + /* ── Environment Setup CTA (shown after account creation) ── */ + .env-setup-cta { background: linear-gradient(135deg, #0073D1 0%, #0056A3 100%); border-radius: 12px; - padding: 32px 36px; + padding: 24px 32px; + margin-bottom: 24px; + box-shadow: 0 4px 16px rgba(0, 115, 209, 0.2); + color: white; + } + + .env-setup-cta h3 { + font-size: 16px; + font-weight: 700; + margin: 0 0 4px 0; + color: white; + } + + .env-setup-cta .env-subtitle { + font-size: 13px; + color: rgba(255, 255, 255, 0.7); + margin-bottom: 16px; + } + + .env-setup-row { + display: flex; + align-items: center; + gap: 12px; + } + + .env-setup-row .code-pill { + background: rgba(255, 255, 255, 0.15); + padding: 8px 16px; + border-radius: 6px; + font-family: var(--font-mono); + font-size: 14px; + color: white; + } + + .env-setup-row .btn-setup { + font-family: var(--font-primary); + font-size: 13px; + font-weight: 600; + color: var(--primary); + background: #FFFFFF; + border: none; + border-radius: 6px; + padding: 8px 20px; + cursor: pointer; + transition: all 0.15s ease; + white-space: nowrap; + display: inline-flex; + align-items: center; + gap: 6px; + } + + .env-setup-row .btn-setup:hover { + background: #F0F7FF; + } + + .env-setup-row .btn-setup.copied { + background: var(--success); + color: white; + } + + .env-setup-row .env-hint { + font-size: 12px; + color: rgba(255, 255, 255, 0.6); + margin-left: auto; + } + + /* ── Setup Banner (bottom, for returning users) ── */ + .setup-banner { + background: var(--background); + border: 1px solid var(--border); + border-radius: 8px; + padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; - margin-top: 28px; - box-shadow: 0 4px 16px rgba(0, 115, 209, 0.25); + margin-top: 24px; } .setup-banner-text { display: flex; flex-direction: column; - gap: 6px; + gap: 2px; } .setup-banner-title { - font-size: 18px; - font-weight: 700; - color: #FFFFFF; + font-size: 14px; + font-weight: 600; + color: var(--text-primary); } .setup-banner-desc { - font-size: 14px; - color: rgba(255, 255, 255, 0.75); + font-size: 12px; + color: var(--text-secondary); } - .btn-setup { + .btn-setup-secondary { font-family: var(--font-primary); - font-size: 14px; - font-weight: 600; + font-size: 13px; + font-weight: 500; color: var(--primary); - background: #FFFFFF; - border: none; - border-radius: 8px; - padding: 12px 24px; + background: transparent; + border: 1px solid var(--primary); + border-radius: 6px; + padding: 6px 16px; cursor: pointer; transition: all 0.15s ease; white-space: nowrap; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } - .btn-setup:hover { - background: #F0F7FF; - transform: translateY(-1px); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + .btn-setup-secondary:hover { + background: rgba(0, 115, 209, 0.05); } - .btn-setup.copied { + .btn-setup-secondary.copied { background: var(--success); color: white; + border-color: var(--success); } /* ── Support Banner ── */ @@ -1802,6 +1871,25 @@
+ {% if not account_details or not account_details.last_sync_display %} + +
+

Set up your local environment

+

Run Claude Code in your project folder and paste the setup instructions to configure SSH, sync data, and initialize DuckDB.

+
+ cd data-analyst && claude + + Paste into Claude Code to complete setup +
+
+ {% endif %} +
@@ -2221,10 +2309,10 @@
-
Set up a new machine with Claude Code
-
Copy instructions and paste into Claude Code to configure your local environment.
+
Set up a new machine
+
Copy instructions and paste into Claude Code to configure another local environment.
-
@@ -2250,7 +2338,7 @@

Get Started

- Set up your workspace in 5 steps + Set up your workspace in 4 steps
{# ── Steps 1-3: Terminal commands ── #} @@ -2318,24 +2406,7 @@
{% endif %} - {# ── Step 5: Claude Code ── #} -
-
- 5 - Start Claude Code -
-
- claude - - Paste into Claude Code — it will configure SSH, sync data, and set up DuckDB -
-
+ {# Step 5 (Claude Code setup) appears on dashboard after account creation #}
@@ -2391,7 +2462,7 @@ }); } - function copyBootstrapInstructions() { + function copyBootstrapInstructions(btn) { var username = {{ username | tojson }}; var serverHost = {{ server_host | tojson }}; var serverHostname = {{ server_hostname | tojson }}; @@ -2419,12 +2490,13 @@ + '7. Create CLAUDE.md from server/docs/setup/claude_md_template.txt ' + '(substitute {username} with my username)\n'; - var button = document.getElementById('bootstrapCopyBtn'); + var button = btn || document.getElementById('bootstrapCopyBtn'); + var origText = button.textContent; copyToClipboard(instructions).then(function() { button.textContent = 'Copied!'; button.classList.add('copied'); setTimeout(function() { - button.textContent = 'Copy Setup Instructions'; + button.textContent = origText; button.classList.remove('copied'); }, 2000); });