feat(ui): redesign entry surfaces + remote machine

docs/features/welcome-page-redesign/plan.md

@@ -0,0 +1,31 @@
+# Plan — Welcome Page Redesign
+
+## Approach
+
+Single-file rewrite of `packages/ui/src/pages/WelcomePage.tsx`:
+
+1. **Delete the tour layer**: drop `OnBoardingSpotlight`, `useOnBoarding`, `guideCoachmarkDismissed`, `coachmarkPanelRef`, `guideCardRef`, `providerGridRef`, `rootRef`, prev/next coachmark handlers, and the coachmark JSX block.
+2. **Keep the behavior core**: `syncOnboardingState`, `syncOnboardingStep`, `goToChat`, `openSettings` (browser vs. desktop settings routing), `persistGuideResumeIntent`, `handlePrimaryGuideAction`, `handleExperiencedGuideAction`, `onAddProvider`, `onImportProviders`, `onSetupAcp`.
+3. **New layout** (single centered column, `max-w-md`, drag region on root):
+   - Quiet top-right "Skip setup" ghost action (experienced path, previously inside the coachmark).
+   - Logo in a small hairline-bordered tile, headline, one-line subtext.
+   - Guide card: header (title + `completed/total` + hairline progress bar, accent fill), then all onboarding steps as compact clickable rows with status icons (`lucide:circle-check` / accent dot / `lucide:circle` / `lucide:minus`), current step highlighted with accent hairline. Tertiary "Import providers" text action in card footer.
+   - Provider grid: 3-col hairline tiles (icon + name), hover raises border + fills `bg-accent`.
+   - Footer hairline divider + two quiet secondary actions: ACP agent setup, browse/import.
+4. **Motion**: `animate-in fade-in slide-in-from-bottom-2` with inline `animation-delay` stagger (40ms steps), `fill-mode: both`. No JS animation library.
+5. **Theme-aware logo**: `theme.isDark ? logoDark : logo`.
+
+## Affected Interfaces
+
+- `WelcomePage.tsx` only. No route contract, store, or backend changes.
+- Test ids listed in `spec.md` remain stable; coachmark-only ids (`welcome-guide-coachmark`, `welcome-guide-panel`, `welcome-guide-prev-action`, `welcome-guide-next-action`, `welcome-guide-close-action`) are removed with the tour. No tests reference any of these ids.
+
+## Compatibility
+
+- Onboarding state and resume-intent persistence are untouched; settings-window handoff keeps working.
+- `GuidedOnboardingOverlay` continues to own the spotlight tour inside settings/chat surfaces.
+
+## Test Strategy
+
+- `bun run typecheck` (touches TS surface), `bun run lint`, `bun run format`.
+- Manual/visual verification of light and dark variants of the page.

docs/features/welcome-page-redesign/spec.md

@@ -0,0 +1,40 @@
+# Welcome Page Redesign
+
+## User Need
+
+The current `/welcome` page stacks a floating spotlight tour (`OnBoardingSpotlight` coachmark overlay) on top of a generic card layout. The overlay competes with the page for attention, duplicates guide controls, and the overall visual quality trails the Argos visual-identity token layer (cyan accent scale, hairline borders, calm radius, fast ease-out motion).
+
+## Goal
+
+Rewrite `packages/ui/src/pages/WelcomePage.tsx` to a Linear/Vercel-grade onboarding surface:
+
+1. Remove the in-page tour (spotlight coachmark, prev/next navigation, dismiss state).
+2. Present guided onboarding as a single, quiet checklist card: ordered steps with status icons, a progress bar, and one primary continue action. Each step row is clickable and resumes that step.
+3. Refine the provider grid and secondary actions (import, ACP, skip) into a coherent hairline layout with one accent color (cyan) and entrance stagger animation.
+4. Redesign `packages/ui/src/pages/AgentWelcomePage.tsx` (the "select an agent" empty state shown on the new-thread route) to the same language: theme-aware logo, centered column, hairline agent grid, drag-region classes (`window-drag-region` / `window-no-drag-region`), and a proper empty state with one clear action.
+5. Redesign the `packages/ui/src/pages/NewThreadPage.tsx` empty state (upstream of the same surface family) to match the opencode new-thread screen: a giant "argos" wordmark backdrop painted with a near-transparent `foreground`-token gradient (`bg-clip-text`), a centered composer with the machine/project meta folded into one quiet row beneath it, dropping the redundant small logo + heading.
+
+## Acceptance Criteria
+
+- No imports of `OnBoardingSpotlight` / `useOnBoarding` from `WelcomePage.tsx` (both stay in place for `GuidedOnboardingOverlay`, used by settings + NewThreadPage).
+- All existing behavior preserved: state sync on mount (`getState` → `start` when idle), step resume via settings/chat routing, `persistGuidedOnboardingResumeIntent` on setup-bound transitions, provider grid → `settings-provider`, import → `settings-database` (`provider-import` section), ACP → `settings-acp`, skip → `complete({ force: true })` → `/chat`.
+- Stable test ids kept: `welcome-guide-card`, `welcome-guide-primary-action`, `welcome-guide-import-action`, `welcome-guide-expert-action`, `welcome-provider-grid`.
+- Light/dark parity via existing tokens; no new CSS files, no new dependencies.
+- `bun run format`, `bun run lint`, and `bun run typecheck` pass.
+
+## Constraints
+
+- Use the Argos token layer and Tailwind utilities only (`bg-card`, `border-border`, `text-muted-foreground`, `accent-*`, motion already global).
+- Icons via `@iconify/react` (`lucide:*`), the established project convention.
+- Entrance motion: CSS-only stagger (tw-animate-css), ≤ 300ms, ease-out; reduced-motion honored by the global reset in `style.css`.
+- No changes to shared contracts, daemon, or desktop main.
+
+## Non-Goals
+
+- Changing onboarding state machine, step definitions, or route contracts.
+- Touching `GuidedOnboardingOverlay`, `OnBoardingSpotlight`, `useOnBoarding` (still used elsewhere).
+- Copy rewrite of step titles beyond presentation casing.
+
+## Open Questions
+
+None.

docs/features/welcome-page-redesign/tasks.md

@@ -0,0 +1,10 @@
+# Tasks — Welcome Page Redesign
+
+- [x] 1. Write SDD artifacts (spec.md, plan.md, tasks.md)
+- [x] 2. Rewrite `packages/ui/src/pages/WelcomePage.tsx` (remove tour, new layout, keep behavior + stable test ids)
+- [x] 3. Run `bun run format`, `bun run lint`, `bun run typecheck`; fix findings
+- [x] 4. Visual verification via `@argos/ui` production build (module graph + Tailwind compile)
+- [x] 5. Fix click-blocking on the welcome page: scope the window drag region to the page background and mark the interactive column + skip action with the `window-no-drag-region` CSS class (dual `-webkit-app-region`/`app-region` properties — same mechanism as AppBar/sidebar) instead of per-button inline `WebkitAppRegion` styles
+- [x] 6. Verify with a temporary Playwright probe (removed after run): `elementFromPoint` hit-tests confirmed the provider tile, import action, and window controls receive clicks, and a real click on a provider tile opened `/#/settings/provider/...`. Screenshot reviewed for dark-mode rendering quality.
+- [x] 7. Redesign `AgentWelcomePage.tsx` to the same language (theme-aware logo tile, centered column, 2-col hairline agent grid, empty state with a single primary action, entrance stagger). Behavior preserved: `agentStore.selectedAgentId` selection and `settings-argos-agents` handoff. Verified with a temporary Playwright probe (removed after run): surface renders with real agents, first tile hit-test clickable, screenshot reviewed.
+- [x] 8. Redesign the `NewThreadPage.tsx` empty state: giant "argos" wordmark backdrop (opencode-style) using a `foreground`-token gradient via `bg-clip-text` with a bottom mask fade, behind a centered composer; remove the now-redundant small logo + "New Thread" heading; fold the machine pill + project dropdown into a single quiet meta row beneath the composer; adjust the ACP helper copy. Kept all test ids (`new-thread-active-machine`, `new-thread-project-trigger`, guide refs) and behavior. Format / lint / typecheck / build all pass; dist rebuilt.

packages/ui/src/components/WindowSideBar.tsx

@@ -312,7 +312,7 @@ export default function WindowSideBar() {
     <>
       <div
         data-testid="window-sidebar"
-        className={`window-sidebar-shell flex flex-row h-full shrink-0 overflow-hidden window-drag-region transition-[width] duration-[var(--dc-motion-default)] ease-[var(--dc-ease-out-express)]${collapsed ? " w-12" : " w-[288px]"}`}
+        className={`window-sidebar-shell flex flex-row h-full shrink-0 overflow-hidden window-drag-region${collapsed ? " w-12" : " w-[288px]"}`}
       >
         <div className="window-no-drag-region flex flex-col items-center shrink-0 pt-2 pb-2 gap-1 w-12">
           <Tooltip>