From ac43e490e1980c2973d493575b594666b445b5dc Mon Sep 17 00:00:00 2001 From: xarmian Date: Sun, 21 Jun 2026 11:44:40 -0400 Subject: [PATCH] feat(web): launchpad render-mode for unset-up workspaces (TASK-1852) (#744) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(web): launchpad render-mode for unset-up workspaces (TASK-1852) While `needs_onboarding` is true, the workspace dashboard rendered as an empty board with a nudge banner on top — which reads as broken, not new. Replace that with a dedicated setup launchpad (OnboardingLaunchpad.svelte): a three-step bridge that routes the user into the agent-driven onboard flow — ① connect an agent (opens the existing ConnectWorkspaceModal), ② tell it "set up my workspace" (NL-canonical, with per-surface shortcuts), ③ watch the result appear live via the page's SSE feed. It's a render-mode keyed on the existing flag, not a new route: while needs_onboarding && !dismissed the launchpad renders instead of the board; "Skip setup" falls through to the board with a reshow affordance; the flag flips false on the first real item, swapping back to the normal dashboard. The launchpad supersedes OnboardingNudgeBanner (TASK-1851) — it had no other consumer, so it's deleted; its NL-canonical copy carries over into step ②. Parent: PLAN-1847 (Phase 2, task B). Claude-Session: https://claude.ai/code/session_01KmxkPxLksjf1pmrZDpsnTJ * refactor(web): drop unused wsSlug prop from OnboardingLaunchpad Self-review cleanup: wsSlug was declared in Props and passed by the parent but never used in the component (it opens the connect modal via callback). Claude-Session: https://claude.ai/code/session_01KmxkPxLksjf1pmrZDpsnTJ --- .../lib/components/OnboardingLaunchpad.svelte | 260 ++++++++++++++++++ .../components/OnboardingNudgeBanner.svelte | 183 ------------ .../[username]/[workspace]/+page.svelte | 32 ++- 3 files changed, 282 insertions(+), 193 deletions(-) create mode 100644 web/src/lib/components/OnboardingLaunchpad.svelte delete mode 100644 web/src/lib/components/OnboardingNudgeBanner.svelte diff --git a/web/src/lib/components/OnboardingLaunchpad.svelte b/web/src/lib/components/OnboardingLaunchpad.svelte new file mode 100644 index 00000000..1ecdf9ad --- /dev/null +++ b/web/src/lib/components/OnboardingLaunchpad.svelte @@ -0,0 +1,260 @@ + + +
+
+ +

Let's set up {workspaceName}

+

+ Pad works best when your AI agent sets it up for you — it'll ask a few + questions and adapt this workspace to your project. +

+
+ +
    +
  1. + +
    +

    Connect your agent

    +

    + Add Pad to Claude Code, Cursor, Codex, or Claude Desktop — it takes a + few seconds. +

    + +
    +
    2. + +
  2. + +
    +

    Tell it to set up

    +

    Once connected, just say:

    + set up my workspace +

    + Or use the shortcut for your agent: + {#each shortcuts as s, i (s.tool)}{s.tool} + {s.cmd}{#if i < shortcuts.length - 1} · {/if}{/each} +

    +
    +
    3. + +
  3. + +
    +

    Watch it happen

    +

    + Your collections and first items will appear right here as your agent + works — no need to refresh. +

    +
    +
    4. +
+ +
+ +
+
+ + diff --git a/web/src/lib/components/OnboardingNudgeBanner.svelte b/web/src/lib/components/OnboardingNudgeBanner.svelte deleted file mode 100644 index e680e2c4..00000000 --- a/web/src/lib/components/OnboardingNudgeBanner.svelte +++ /dev/null @@ -1,183 +0,0 @@ - - -
- -
- Set up your workspace -

- Your workspace is ready. Connect your agent, then just say - set up my workspace — it'll walk you through setup. -

-
- - Connect agent → - - -
- - diff --git a/web/src/routes/[username]/[workspace]/+page.svelte b/web/src/routes/[username]/[workspace]/+page.svelte index bfc7b141..055813ca 100644 --- a/web/src/routes/[username]/[workspace]/+page.svelte +++ b/web/src/routes/[username]/[workspace]/+page.svelte @@ -8,7 +8,7 @@ import { uiStore } from '$lib/stores/ui.svelte'; import { syncService } from '$lib/services/sync.svelte'; import { relativeTime } from '$lib/utils/markdown'; - import OnboardingNudgeBanner from '$lib/components/OnboardingNudgeBanner.svelte'; + import OnboardingLaunchpad from '$lib/components/OnboardingLaunchpad.svelte'; import ConnectWorkspaceModal from '$lib/components/ConnectWorkspaceModal.svelte'; import CreateCollectionModal from '$lib/components/collections/CreateCollectionModal.svelte'; import { collectionStore } from '$lib/stores/collections.svelte'; @@ -254,6 +254,21 @@ {:else if dashboard} + {#if needsOnboarding && !onboardingDismissed} + + (connectOpen = true)} + ondismiss={dismissOnboarding} + /> + {:else}
@@ -286,15 +301,11 @@ ConnectWorkspaceModal — same modal the Phase F auto-open hook and ConnectBanner use. --> - {#if needsOnboarding && !onboardingDismissed} -
- (connectOpen = true)} - ondismiss={dismissOnboarding} - /> -
- {:else if needsOnboarding && onboardingDismissed} + {#if needsOnboarding && onboardingDismissed} +
@@ -514,6 +525,7 @@
{/if} + {/if} {:else}
No dashboard data available.
{/if}