docs(10-content-clarity): create phase plan

3 plans in 1 wave covering UX-01 through UX-04: intro section, remote name preview, step descriptions, and credential help text. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-01 12:43:38 +02:00
parent 5052e9e66e
commit 8078664f05
4 changed files with 576 additions and 3 deletions
@@ -83,7 +83,11 @@ Plans:
  2. Remote name field displays a placeholder example, help text, and a live preview showing how the name appears in `[remote-name]` config syntax
  3. Every wizard step has a 1-2 sentence description below the heading explaining what the user is doing and why
  4. All backend credential fields have contextual help text explaining what to enter and where to find the value
-**Plans**: TBD
+**Plans:** 3 plans
+Plans:
+- [ ] 10-01-PLAN.md — Intro section with CTA and step descriptions for all 4 steps
+- [ ] 10-02-PLAN.md — Remote name live config preview with helpText
+- [ ] 10-03-PLAN.md — Credential field tooltipText and helpText enrichment

 ### Phase 11: Polish & Responsiveness
 **Goal**: The wizard feels production-ready on any device with smooth interactions and accessible keyboard navigation
@@ -108,6 +112,6 @@ Plans:
 | 6. New Backends | v1.1 | 4/4 | Complete | 2026-03-31 |
 | 7. Validation & UX Polish | v1.1 | 3/3 | Complete | 2026-03-31 |
 | 8. Theme Foundation | v1.2 | 2/2 | Complete | 2026-04-01 |
-| 9. MD3 Components | 5/5 | Complete   | 2026-04-01 | - |
-| 10. Content & Clarity | v1.2 | 0/? | Not started | - |
+| 9. MD3 Components | v1.2 | 5/5 | Complete | 2026-04-01 |
+| 10. Content & Clarity | v1.2 | 0/3 | In progress | - |
 | 11. Polish & Responsiveness | v1.2 | 0/? | Not started | - |
@@ -0,0 +1,199 @@
+---
+phase: 10-content-clarity
+plan: 01
+type: execute
+wave: 1
+depends_on: []
+files_modified:
+  - src/App.tsx
+  - src/App.test.tsx
+  - src/components/wizard/BackendSelectionStep.tsx
+  - src/components/wizard/RemoteConfigStep.tsx
+  - src/components/wizard/DeploymentStep.tsx
+  - src/components/wizard/ReviewStep.tsx
+autonomous: true
+requirements:
+  - UX-01
+  - UX-03
+
+must_haves:
+  truths:
+    - "First-time visitor sees an intro section explaining what Ready2Blob does before the wizard loads"
+    - "Clicking Get Started hides the intro and reveals Step 1 with StepIndicator"
+    - "On page reload, intro shows again (no persistence)"
+    - "Each of the 4 wizard steps has a 1-2 sentence description below the heading"
+  artifacts:
+    - path: "src/App.tsx"
+      provides: "IntroSection component and showIntro state gate in WizardShell"
+      contains: "showIntro"
+    - path: "src/App.test.tsx"
+      provides: "Tests for intro rendering and Get Started button behavior"
+      contains: "Get Started"
+    - path: "src/components/wizard/BackendSelectionStep.tsx"
+      provides: "Step 1 description paragraph"
+      contains: "text-sm"
+    - path: "src/components/wizard/RemoteConfigStep.tsx"
+      provides: "Step 2 description paragraph"
+      contains: "text-sm"
+    - path: "src/components/wizard/DeploymentStep.tsx"
+      provides: "Step 3 description paragraph"
+      contains: "text-sm"
+    - path: "src/components/wizard/ReviewStep.tsx"
+      provides: "Step 4 description paragraph"
+      contains: "text-sm"
+  key_links:
+    - from: "src/App.tsx"
+      to: "IntroSection"
+      via: "showIntro state toggle"
+      pattern: "setShowIntro\\(false\\)"
+    - from: "src/App.tsx"
+      to: "StepIndicator"
+      via: "conditional render when showIntro is false"
+      pattern: "showIntro.*StepIndicator"
+---
+
+<objective>
+Add the intro section that greets first-time visitors and step descriptions for all 4 wizard steps.
+
+Purpose: A first-time user immediately understands what Ready2Blob does and what each step expects, without external documentation.
+Output: IntroSection in App.tsx with CTA, step description paragraphs in all 4 step components, updated App.test.tsx.
+</objective>
+
+<execution_context>
+@C:/Users/SebastienQUEROL/.claude/get-shit-done/workflows/execute-plan.md
+@C:/Users/SebastienQUEROL/.claude/get-shit-done/templates/summary.md
+</execution_context>
+
+<context>
+@.planning/PROJECT.md
+@.planning/ROADMAP.md
+@.planning/STATE.md
+@.planning/phases/10-content-clarity/10-CONTEXT.md
+@.planning/phases/10-content-clarity/10-RESEARCH.md
+
+<interfaces>
+<!-- Key types and contracts the executor needs -->
+
+From src/App.tsx (current structure):
+```tsx
+function WizardShell() {
+  const { state } = useWizard();
+  // steps array, stepIndex clamped, renders StepIndicator + CurrentStep
+  return (
+    <div className="min-h-screen bg-surface flex flex-col items-center py-12 px-4">
+      <div className="w-full max-w-2xl">
+        <div className="flex items-center justify-between mb-8">
+          <h1 className="text-3xl font-bold text-on-surface">Ready2Blob</h1>
+          <ThemeToggle />
+        </div>
+        <StepIndicator />
+        <div className="mt-8">{CurrentStep}</div>
+      </div>
+    </div>
+  );
+}
+```
+
+From src/App.test.tsx (line 55-63 — WILL BREAK, must update):
+```tsx
+it('renders BackendSelectionStep when currentStep is 0', () => {
+  render(<App />);
+  const heading = screen.getByText(/Select Backend/);
+  expect(heading).toBeDefined();
+  const stepNav = screen.getByRole('navigation', { name: /Wizard steps/i });
+  expect(stepNav).toBeDefined();
+});
+```
+Note: The renderAtStep() helper bypasses WizardShell entirely, so step 1/2 tests are UNAFFECTED.
+
+MD3 button constant available:
+```tsx
+import { MD3_BTN_FILLED } from '../components/ui/TextFieldMD3'; // or wherever exported
+```
+Check actual export location — may be in a shared constants file.
+</interfaces>
+</context>
+
+<tasks>
+
+<task type="auto">
+  <name>Task 1: Add IntroSection and showIntro gate to App.tsx</name>
+  <files>src/App.tsx</files>
+  <action>
+Add `useState` import from React. Add `showIntro` local state (default `true`) to `WizardShell`.
+
+When `showIntro` is true, render an IntroSection inline (can be a local component or JSX block) INSTEAD of StepIndicator + step content. The intro section must:
+- Keep the existing header layout (h1 "Ready2Blob" + ThemeToggle) at the top
+- Show action-first copy: "Go from zero to a deployable rclone setup in minutes" per user decision
+- Mention "Azure Blob, S3, OneDrive, and 4 more cloud backends" per user decision
+- Briefly explain what the tool generates (rclone config + deployment scripts)
+- Show a "Get Started" CTA button using MD3_BTN_FILLED style that sets `showIntro(false)`
+- Use MD3 tokens for all styling: `bg-surface`, `text-on-surface`, `bg-primary`, `text-on-primary`, etc.
+- No persistence — on page reload, intro shows again (wizard state is ephemeral)
+- No collapse/shrink behavior — intro simply disappears when wizard starts
+
+When `showIntro` is false, render the existing wizard content (StepIndicator + step) unchanged.
+
+IMPORTANT: Do NOT add intro state to useReducer/WizardState. This is purely local UI state via useState.
+IMPORTANT: Check where MD3_BTN_FILLED is exported from — grep for it. Use the correct import path.
+  </action>
+  <verify>
+    <automated>npx vitest run src/App.test.tsx</automated>
+  </verify>
+  <done>App renders IntroSection on initial load with "Get Started" button. Clicking it reveals the wizard. Page reload shows intro again.</done>
+</task>
+
+<task type="auto">
+  <name>Task 2: Update App.test.tsx and add step descriptions to all 4 step components</name>
+  <files>src/App.test.tsx, src/components/wizard/BackendSelectionStep.tsx, src/components/wizard/RemoteConfigStep.tsx, src/components/wizard/DeploymentStep.tsx, src/components/wizard/ReviewStep.tsx</files>
+  <action>
+**App.test.tsx updates:**
+
+The existing test "renders BackendSelectionStep when currentStep is 0" will fail because `<App />` now shows IntroSection first. Update this test to:
+1. First assert that IntroSection content is visible (e.g., check for "Get Started" button or the intro copy)
+2. Click "Get Started"
+3. THEN assert "Select Backend" heading and StepIndicator navigation are visible
+
+Add a new test:
+- "shows intro section on initial render" — render `<App />`, assert intro copy is present, assert StepIndicator is NOT in the DOM
+
+The renderAtStep() tests (step 1, step 2) bypass WizardShell entirely so they need NO changes.
+
+**Step descriptions (UX-03):**
+
+Add a `<p>` element immediately after the `<h2>` in each of the 4 step components. Use className `text-sm text-on-surface-variant mt-1 mb-4`. Claude has discretion on wording, but each must be 1-2 sentences explaining what the user is doing and why. Suggested tone — direct, practical, no jargon:
+
+- BackendSelectionStep: Explain that the user names their remote and picks a cloud storage provider
+- RemoteConfigStep: Explain that the user enters credentials for the selected backend
+- DeploymentStep: Explain that the user chooses how the config gets deployed to the target machine
+- ReviewStep: Explain that the user reviews generated files and downloads them
+
+IMPORTANT: Do NOT change any heading text (h2 content must remain identical). Only ADD a `<p>` after the `<h2>`.
+IMPORTANT: Use `text-on-surface-variant` (not `text-on-surface-container/70`) — this is the standard MD3 secondary text token.
+  </action>
+  <verify>
+    <automated>npx vitest run</automated>
+  </verify>
+  <done>All tests pass. Intro renders on initial App load, clicking Get Started reveals wizard. All 4 steps show a description paragraph below the heading.</done>
+</task>
+
+</tasks>
+
+<verification>
+1. `npx vitest run` — full suite green
+2. IntroSection visible on initial `<App />` render
+3. "Get Started" click transitions to wizard with StepIndicator
+4. Each step component has a descriptive `<p>` after its `<h2>`
+</verification>
+
+<success_criteria>
+- First-time visitor sees intro with "Get Started" CTA before wizard
+- Clicking CTA reveals Step 1 with StepIndicator
+- Page reload brings back intro (no persistence)
+- All 4 steps have description text below headings
+- All existing tests pass (including updated App.test.tsx)
+</success_criteria>
+
+<output>
+After completion, create `.planning/phases/10-content-clarity/10-01-SUMMARY.md`
+</output>
@@ -0,0 +1,179 @@
+---
+phase: 10-content-clarity
+plan: 02
+type: execute
+wave: 1
+depends_on: []
+files_modified:
+  - src/components/ui/RemoteNamePreview.tsx
+  - src/components/ui/RemoteNamePreview.test.tsx
+  - src/components/wizard/BackendSelectionStep.tsx
+  - src/components/wizard/BackendSelectionStep.test.tsx
+autonomous: true
+requirements:
+  - UX-02
+
+must_haves:
+  truths:
+    - "Remote name field displays help text explaining what the name is and giving examples"
+    - "A live config preview below the field updates as user types, showing [remote-name] syntax"
+    - "When field is empty, preview shows grayed-out [my-remote] placeholder with guidance text"
+    - "When field has content, preview shows [typed-value] in monospace code style"
+  artifacts:
+    - path: "src/components/ui/RemoteNamePreview.tsx"
+      provides: "Stateless display component for rclone config preview"
+      exports: ["RemoteNamePreview"]
+      min_lines: 15
+    - path: "src/components/ui/RemoteNamePreview.test.tsx"
+      provides: "Tests for empty-state and value-state rendering"
+      contains: "RemoteNamePreview"
+    - path: "src/components/wizard/BackendSelectionStep.tsx"
+      provides: "watch('name') integration and RemoteNamePreview placement"
+      contains: "RemoteNamePreview"
+  key_links:
+    - from: "src/components/wizard/BackendSelectionStep.tsx"
+      to: "src/components/ui/RemoteNamePreview.tsx"
+      via: "watch('name') value passed as prop"
+      pattern: "watch\\('name'\\)"
+    - from: "src/components/wizard/BackendSelectionStep.tsx"
+      to: "TextFieldMD3"
+      via: "helpText prop on remote name field"
+      pattern: "helpText="
+---
+
+<objective>
+Add a live rclone config preview below the remote name field and enrich the field with help text.
+
+Purpose: Users immediately see how their chosen name will appear in the generated rclone.conf, reducing confusion about naming conventions.
+Output: RemoteNamePreview component, integrated into BackendSelectionStep with watch(), helpText on remote name field.
+</objective>
+
+<execution_context>
+@C:/Users/SebastienQUEROL/.claude/get-shit-done/workflows/execute-plan.md
+@C:/Users/SebastienQUEROL/.claude/get-shit-done/templates/summary.md
+</execution_context>
+
+<context>
+@.planning/PROJECT.md
+@.planning/ROADMAP.md
+@.planning/STATE.md
+@.planning/phases/10-content-clarity/10-CONTEXT.md
+@.planning/phases/10-content-clarity/10-RESEARCH.md
+
+<interfaces>
+<!-- Key contracts the executor needs -->
+
+From src/components/wizard/BackendSelectionStep.tsx (existing useForm destructure):
+```tsx
+const {
+  register,
+  handleSubmit,
+  formState: { errors },
+} = useForm<RemoteNameFormValues>({
+  resolver: zodResolver(remoteNameSchema),
+  mode: 'onSubmit',
+  reValidateMode: 'onChange',
+  defaultValues: { name: state.remote.name },
+});
+```
+Add `watch` to the destructure: `const { register, handleSubmit, watch, formState: { errors } } = useForm<...>(...)`
+Then: `const remoteName = watch('name');`
+
+From src/components/ui/TextFieldMD3.tsx (props interface — supports helpText):
+```tsx
+// TextFieldMD3 accepts helpText prop — renders as small text below input
+// CRITICAL: Do NOT pass a visible placeholder prop. TextFieldMD3 uses placeholder=" " 
+// (single space) for the floating label CSS trick. The "e.g. my-backup" example
+// must be conveyed through helpText, NOT native placeholder.
+```
+
+MD3 token classes for preview block (same as ReviewStep OutputBlock):
+- `bg-surface-variant` — tinted background
+- `text-on-surface-variant` — readable text on that background
+- `font-mono` — code appearance
+
+From BackendSelectionStep.test.tsx (selector pattern):
+```tsx
+// Uses screen.getByRole('textbox') — single textbox assertion
+// RemoteNamePreview MUST NOT render any form controls (input, textarea, contenteditable)
+```
+</interfaces>
+</context>
+
+<tasks>
+
+<task type="auto" tdd="true">
+  <name>Task 1: Create RemoteNamePreview component with tests</name>
+  <files>src/components/ui/RemoteNamePreview.tsx, src/components/ui/RemoteNamePreview.test.tsx</files>
+  <behavior>
+    - When value is empty string or whitespace-only, renders "[my-remote]" as placeholder with "Type a name to see how it appears in your config" guidance text
+    - When value is "my-backup", renders "[my-backup]" in monospace style
+    - When value is "azure-prod", renders "[azure-prod]"
+    - Component renders only display elements (div, span) — never form controls
+  </behavior>
+  <action>
+Create `RemoteNamePreview` as a stateless functional component accepting `{ value: string }`.
+
+Empty state: Show grayed-out `[my-remote]` text with a guidance message "Type a name to see how it appears in your config" below it. Use `text-on-surface-variant/50` for the placeholder and `text-on-surface-variant/40` for the guidance.
+
+Value state: Show `[{value}]` in `text-on-surface-variant` color.
+
+Container styling: `mt-2 rounded-md bg-surface-variant px-3 py-2 text-xs font-mono`
+
+Write tests FIRST (RED), then implement (GREEN). Test file uses `@testing-library/react` render + screen assertions.
+
+CRITICAL: RemoteNamePreview must render ONLY div/span elements. No input, textarea, or contenteditable — this would break BackendSelectionStep.test.tsx's `getByRole('textbox')` single-match assertion.
+  </action>
+  <verify>
+    <automated>npx vitest run src/components/ui/RemoteNamePreview.test.tsx</automated>
+  </verify>
+  <done>RemoteNamePreview renders empty-state placeholder when value is empty, and [value] when value is provided. All tests pass.</done>
+</task>
+
+<task type="auto">
+  <name>Task 2: Integrate RemoteNamePreview and helpText into BackendSelectionStep</name>
+  <files>src/components/wizard/BackendSelectionStep.tsx, src/components/wizard/BackendSelectionStep.test.tsx</files>
+  <action>
+In BackendSelectionStep.tsx:
+1. Add `watch` to the useForm destructure
+2. Add `const remoteName = watch('name');` after the useForm call
+3. Add `helpText` prop to the remote name TextFieldMD3: `"This becomes the section header [name] in your rclone.conf. Example: azure-prod, backup-s3. Letters, numbers, dashes, underscores only."` (per user decision)
+4. Import and render `<RemoteNamePreview value={remoteName} />` directly below the TextFieldMD3
+
+In BackendSelectionStep.test.tsx:
+Add a test case that verifies the live preview updates:
+1. Render BackendSelectionStep
+2. Assert that the empty-state placeholder text is visible (e.g., "[my-remote]")
+3. Type "test-remote" into the textbox
+4. Assert that "[test-remote]" is visible in the DOM
+
+IMPORTANT: Do NOT add a visible `placeholder` prop to TextFieldMD3. The floating label CSS trick depends on `placeholder=" "`. The "e.g. my-backup" example is conveyed via helpText.
+IMPORTANT: Do NOT use `useWatch` — plain `watch('name')` from useForm is correct here.
+  </action>
+  <verify>
+    <automated>npx vitest run src/components/wizard/BackendSelectionStep.test.tsx</automated>
+  </verify>
+  <done>Remote name field shows helpText. RemoteNamePreview renders below the field and updates live as user types. All BackendSelectionStep tests pass.</done>
+</task>
+
+</tasks>
+
+<verification>
+1. `npx vitest run src/components/ui/RemoteNamePreview.test.tsx` — preview component tests pass
+2. `npx vitest run src/components/wizard/BackendSelectionStep.test.tsx` — integration tests pass
+3. `npx vitest run` — full suite green
+4. Empty field shows [my-remote] placeholder with guidance text
+5. Typing a name shows [typed-name] in real-time
+</verification>
+
+<success_criteria>
+- RemoteNamePreview component exists and is tested
+- BackendSelectionStep shows helpText on remote name field
+- Live preview below field updates as user types
+- Empty state shows grayed placeholder with guidance
+- No existing tests broken (especially getByRole('textbox') single match)
+</success_criteria>
+
+<output>
+After completion, create `.planning/phases/10-content-clarity/10-02-SUMMARY.md`
+</output>
@@ -0,0 +1,191 @@
+---
+phase: 10-content-clarity
+plan: 03
+type: execute
+wave: 1
+depends_on: []
+files_modified:
+  - src/schemas/registry.ts
+  - src/components/wizard/RemoteConfigStep.test.tsx
+autonomous: true
+requirements:
+  - UX-04
+
+must_haves:
+  truths:
+    - "S3 access_key_id and secret_access_key fields have tooltipText and helpText"
+    - "S3-compatible access_key_id, secret_access_key, and endpoint fields have tooltipText"
+    - "GCS project_number and service_account_credentials fields have tooltipText"
+    - "B2 account and key fields have tooltipText"
+    - "OneDrive drive_id field has tooltipText"
+    - "SFTP host and user do NOT get tooltipText (self-explanatory per user decision)"
+    - "Existing Azure Blob, OneDrive token, SFTP pass/key_pem help text is NOT rewritten"
+  artifacts:
+    - path: "src/schemas/registry.ts"
+      provides: "Enriched FieldDef entries with tooltipText and helpText"
+      contains: "tooltipText"
+    - path: "src/components/wizard/RemoteConfigStep.test.tsx"
+      provides: "Tests verifying tooltip buttons render for newly enriched fields"
+      contains: "tooltip"
+  key_links:
+    - from: "src/schemas/registry.ts"
+      to: "src/components/ui/FieldRenderer.tsx"
+      via: "tooltipText and helpText consumed by FieldRenderer rendering"
+      pattern: "tooltipText"
+    - from: "src/schemas/registry.ts"
+      to: "src/components/ui/PasswordField.tsx"
+      via: "tooltipText consumed by PasswordField tooltip rendering"
+      pattern: "tooltipText"
+---
+
+<objective>
+Add contextual help text and tooltips to all backend credential fields that currently lack them.
+
+Purpose: Users know exactly what to enter in each field and where to find the value in their cloud provider's console, without needing external documentation.
+Output: Enriched registry.ts with tooltipText/helpText for S3, S3-compatible, GCS, B2, OneDrive drive_id fields. New tests verifying tooltip buttons render.
+</objective>
+
+<execution_context>
+@C:/Users/SebastienQUEROL/.claude/get-shit-done/workflows/execute-plan.md
+@C:/Users/SebastienQUEROL/.claude/get-shit-done/templates/summary.md
+</execution_context>
+
+<context>
+@.planning/PROJECT.md
+@.planning/ROADMAP.md
+@.planning/STATE.md
+@.planning/phases/10-content-clarity/10-CONTEXT.md
+@.planning/phases/10-content-clarity/10-RESEARCH.md
+
+<interfaces>
+<!-- Key contracts the executor needs -->
+
+From src/schemas/registry.ts:
+```typescript
+export interface FieldDef {
+  key: string;
+  label: string;
+  inputType: 'text' | 'password' | 'select' | 'toggle';
+  required: boolean;
+  placeholder?: string;
+  helpText?: string;
+  options?: { value: string; label: string }[];
+  validate?: { regex: RegExp; message: string };
+  tooltipText?: string;
+}
+```
+
+FieldRenderer and PasswordField already consume `tooltipText` and `helpText` from FieldDef.
+No component changes needed — this is purely a data enrichment task.
+
+Fields to ADD tooltipText (from RESEARCH.md audit):
+- s3: access_key_id, secret_access_key (YES), region (OPTIONAL — low priority)
+- s3-compatible: access_key_id, secret_access_key, endpoint (YES)
+- gcs: project_number, service_account_credentials (YES — GCS SAC warrants doc link)
+- b2: account, key (YES)
+- onedrive: drive_id (YES)
+- sftp: host, user (NO — self-explanatory per user decision)
+
+Fields to ADD helpText:
+- s3: access_key_id, secret_access_key (YES — label alone ambiguous)
+- s3-compatible: access_key_id, secret_access_key (YES)
+
+DO NOT REWRITE existing helpText/tooltipText on:
+- azureblob (account, key, sas_url)
+- onedrive token
+- sftp pass, key_pem
+- b2 account, key (already have helpText — ADD tooltipText only)
+- gcs project_number, service_account_credentials (already have helpText — ADD tooltipText only)
+</interfaces>
+</context>
+
+<tasks>
+
+<task type="auto">
+  <name>Task 1: Enrich registry.ts with tooltipText and helpText for credential fields</name>
+  <files>src/schemas/registry.ts</files>
+  <action>
+Add `tooltipText` and/or `helpText` to the following fields in BACKEND_REGISTRY. Do NOT modify existing helpText/tooltipText on Azure Blob, OneDrive token, SFTP pass/key_pem fields.
+
+**S3 fields:**
+- `access_key_id`: Add helpText (e.g., "The access key ID from your IAM credentials (starts with AKIA for long-term keys).") and tooltipText explaining where to find it in AWS Console (IAM > Users > Security credentials > Access keys).
+- `secret_access_key`: Add helpText (e.g., "The secret access key paired with your Access Key ID. Only shown once at creation time.") and tooltipText explaining it's shown once when creating the access key and to store it securely.
+- `region`: Add tooltipText (brief — "The AWS region where your S3 bucket is located. Find this in the S3 console next to your bucket name."). No helpText needed — placeholder is clear.
+
+**S3-compatible fields:**
+- `access_key_id`: Add helpText (e.g., "The access key ID from your storage provider's dashboard.") and tooltipText explaining it varies by provider (Wasabi: Access Keys page, R2: API Tokens, MinIO: admin console).
+- `secret_access_key`: Add helpText (e.g., "The secret key paired with your Access Key ID.") and tooltipText similar to S3.
+- `endpoint`: Add tooltipText explaining common endpoints (e.g., "Wasabi: https://s3.wasabisys.com, Cloudflare R2: https://{account_id}.r2.cloudflarestorage.com, MinIO: your server URL with port").
+
+**GCS fields:**
+- `project_number`: Add tooltipText explaining the difference from project ID and where to find it ("Found in Google Cloud Console > Dashboard > Project info. This is the numeric ID, not the text project ID.").
+- `service_account_credentials`: Add tooltipText with doc link for creating service account JSON ("Create at Google Cloud Console > IAM & Admin > Service Accounts > Keys > Add Key > JSON. See https://cloud.google.com/iam/docs/keys-create-delete for detailed steps.").
+
+**B2 fields:**
+- `account` (Application Key ID): Add tooltipText ("Found in Backblaze B2 > App Keys. The applicationKeyId is the shorter ID — not the master account ID shown in account settings.").
+- `key` (Application Key): Add tooltipText ("The application key value shown once when you create a new app key in B2 > App Keys. Copy it immediately — it cannot be retrieved later.").
+
+**OneDrive fields:**
+- `drive_id`: Add tooltipText ("The drive ID is shown in the output of `rclone authorize \"onedrive\"` — look for the 'drive_id' field in the JSON response. It typically starts with 'b!' for business drives.").
+
+**Fields to SKIP (per user decision):**
+- sftp host — self-explanatory
+- sftp user — self-explanatory
+
+Claude has discretion on exact wording. Keep tooltips actionable — tell the user WHERE to find the value, not just WHAT it is. Include doc links only for GCS service account JSON creation and OneDrive token procedure (already has tooltipText with the rclone authorize instruction).
+  </action>
+  <verify>
+    <automated>npx vitest run src/components/wizard/RemoteConfigStep.test.tsx</automated>
+  </verify>
+  <done>All credential fields in S3, S3-compatible, GCS, B2, and OneDrive drive_id have contextual tooltipText. S3 and S3-compatible access key fields have helpText. Existing help text on Azure Blob, OneDrive token, SFTP is unchanged.</done>
+</task>
+
+<task type="auto">
+  <name>Task 2: Add tests verifying tooltip buttons for newly enriched fields</name>
+  <files>src/components/wizard/RemoteConfigStep.test.tsx</files>
+  <action>
+Add test cases in RemoteConfigStep.test.tsx that verify tooltip info buttons render for the newly enriched fields. Follow the existing test pattern in the file (check how existing tooltip tests are structured — likely under a UX-01 or similar describe block).
+
+Add tests for at least these representative fields:
+1. S3 backend: `access_key_id` field renders a tooltip info button
+2. S3-compatible backend: `endpoint` field renders a tooltip info button
+3. GCS backend: `service_account_credentials` field renders a tooltip info button
+4. B2 backend: `account` field renders a tooltip info button
+
+Use the existing renderAtStep or component render pattern from the test file. Each test should:
+- Render RemoteConfigStep with the appropriate backend type
+- Find the tooltip button (typically `getByRole('button', { name: /more info about .../i })` or similar pattern — check existing tests for the exact pattern)
+- Assert the button exists
+
+IMPORTANT: Read the existing test file first to match the exact patterns used for tooltip assertions. The existing UX-01 section tests Azure Blob, SFTP, and OneDrive tooltips — follow the same approach.
+  </action>
+  <verify>
+    <automated>npx vitest run src/components/wizard/RemoteConfigStep.test.tsx</automated>
+  </verify>
+  <done>Tests confirm tooltip info buttons render for S3, S3-compatible, GCS, and B2 credential fields. All existing tests still pass.</done>
+</task>
+
+</tasks>
+
+<verification>
+1. `npx vitest run src/components/wizard/RemoteConfigStep.test.tsx` — all tooltip tests pass
+2. `npx vitest run` — full suite green
+3. Grep registry.ts for `tooltipText` — count matches expected enrichment
+4. Azure Blob, OneDrive token, SFTP pass/key_pem entries unchanged
+</verification>
+
+<success_criteria>
+- All S3 credential fields have tooltipText explaining where to find values in AWS Console
+- S3 and S3-compatible access key fields have helpText
+- S3-compatible endpoint has tooltipText with provider-specific examples
+- GCS fields have tooltipText (service_account_credentials includes doc link)
+- B2 fields have tooltipText
+- OneDrive drive_id has tooltipText
+- SFTP host/user do NOT have tooltipText
+- Existing help text on Azure Blob, OneDrive token, SFTP pass/key_pem is untouched
+- Tests verify tooltip buttons render for enriched fields
+</success_criteria>
+
+<output>
+After completion, create `.planning/phases/10-content-clarity/10-03-SUMMARY.md`
+</output>