feat: add docs links to feature page headers

[Felarof (felarof99)]

Summary

• Adds a HelpCircle icon with tooltip next to each feature page title that links to the corresponding docs.browseros.com page
• Applies the existing pattern from Workflows/Scheduled Tasks headers to: Skills, Connect Apps, Memory, Soul, LLM Providers, LLM Chat Hub, and MCP Server
• Centralizes all feature docs URLs in productUrls.ts (replaces hardcoded URL in MCPServerHeader)

Feature → Docs mapping

Feature	Docs URL
Skills	/features/skills
Connect Apps	/features/connect-mcps
Memory	/features/memory
Soul	/features/soul
LLM Providers	/features/bring-your-own-llm
LLM Chat Hub	/features/llm-chat-hub
MCP Server	/features/use-with-claude-code

Test plan

• Verify HelpCircle icon appears next to each feature page title
• Verify tooltip shows on hover (e.g. "Learn more about skills")
• Verify clicking opens docs.browseros.com in new tab
• Verify existing Workflows and Scheduled Tasks links still work
• Check mobile responsiveness of the new icon placement

🤖 Generated with Claude Code

[greptile-apps]

Greptile Summary

This PR applies a consistent "help link" pattern — a HelpCircle icon with a tooltip linking to the corresponding docs page — to 7 feature page headers (Skills, Connect Apps, Memory, Soul, LLM Providers, LLM Chat Hub, MCP Server), matching the existing pattern already used in the Workflows and Scheduled Tasks headers. All docs URLs are centralized in productUrls.ts, replacing a hardcoded URL that existed in MCPServerHeader.

Key changes:

• productUrls.ts: Adds 7 new exported URL constants (skillsHelpUrl, connectAppsHelpUrl, memoryHelpUrl, soulHelpUrl, bringYourOwnLlmHelpUrl, llmChatHubHelpUrl, mcpClientsHelpUrl).
• MCPServerHeader.tsx: Removes the file-local DOCS_URL constant in favour of the new centralized import — pure refactor, no behaviour change.
• All 6 remaining header components: Wraps the existing <h2> in a flex row and appends a TooltipProvider > Tooltip > TooltipTrigger > <a> structure exactly matching the WorkflowsHeader reference implementation.
• Minor copy inconsistencies found: SoulHeader tooltip exposes the internal filename ("SOUL.md"), ConnectMCP tooltip says "Connect Apps" while the heading says "Connected Apps", and LlmHubHeader tooltip drops the "LLM" prefix. Icon-only anchor links across all new additions are also missing aria-label attributes for screen-reader accessibility.

Confidence Score: 5/5

• Safe to merge — changes are purely additive UI enhancements with no logic, state, or data flow impact.
• All modifications are UI-only: adding tooltip wrappers around existing heading elements and centralizing URL constants. There are no new API calls, no state mutations, and no changes to existing behaviour. The pattern is directly copied from already-shipped WorkflowsHeader and ScheduledTasksHeader components. The only notes are minor copy inconsistencies and a missing aria-label on icon links, neither of which affects functionality.
• No files require special attention.

Important Files Changed

Filename	Overview
apps/agent/lib/constants/productUrls.ts	Adds 7 new URL constants for feature docs pages, following the existing workflowsHelpUrl/scheduledTasksHelpUrl pattern. Also removes the previously hardcoded DOCS_URL constant from MCPServerHeader in favour of the centralized mcpClientsHelpUrl. Clean, no issues.
apps/agent/entrypoints/app/mcp-settings/MCPServerHeader.tsx	Only change is replacing the file-local DOCS_URL constant with the centralized mcpClientsHelpUrl import. Behaviour is identical; clean refactor.
apps/agent/entrypoints/app/soul/SoulHeader.tsx	Adds HelpCircle tooltip link following the standard pattern. Tooltip text reads "Learn more about SOUL.md" which mixes an implementation detail (the file name) into user-facing copy, unlike the other headers that use plain feature names.
apps/agent/entrypoints/app/connect-mcp/ConnectMCP.tsx	Adds HelpCircle tooltip link to the header section. Tooltip reads "Learn more about Connect Apps" while the heading says "Connected Apps" — minor naming mismatch.
apps/agent/entrypoints/app/llm-hub/LlmHubHeader.tsx	Adds HelpCircle tooltip link. Tooltip text "Learn more about Chat & Hub" omits the "LLM" prefix present in the heading "LLM Chat & Hub". Minor inconsistency.
apps/agent/entrypoints/app/skills/SkillsPage.tsx	Adds HelpCircle tooltip link to SkillsHeader sub-component. Pattern matches WorkflowsHeader/ScheduledTasksHeader exactly. No issues.
apps/agent/entrypoints/app/memory/MemoryHeader.tsx	Adds HelpCircle tooltip link following the standard pattern. Copy and implementation are consistent with other headers.
apps/agent/entrypoints/app/ai-settings/LlmProvidersHeader.tsx	Adds HelpCircle tooltip link following the standard pattern. No issues.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[User hovers HelpCircle icon] --> B[Tooltip appears\n'Learn more about ...']
    A --> C[User clicks icon]
    C --> D[Opens docs.browseros.com\nin new tab]

    subgraph Headers updated
        H1[SkillsPage / SkillsHeader]
        H2[ConnectMCP]
        H3[MemoryHeader]
        H4[SoulHeader]
        H5[LlmProvidersHeader]
        H6[LlmHubHeader]
        H7[MCPServerHeader\nrefactor only]
    end

    subgraph productUrls.ts
        U1[skillsHelpUrl]
        U2[connectAppsHelpUrl]
        U3[memoryHelpUrl]
        U4[soulHelpUrl]
        U5[bringYourOwnLlmHelpUrl]
        U6[llmChatHubHelpUrl]
        U7[mcpClientsHelpUrl]
    end

    H1 --> U1
    H2 --> U2
    H3 --> U3
    H4 --> U4
    H5 --> U5
    H6 --> U6
    H7 --> U7

Loading

Prompt To Fix All With AI

This is a comment left during a code review.
Path: apps/agent/entrypoints/app/soul/SoulHeader.tsx
Line: 33

Comment:
**Tooltip copy exposes internal file-name detail**

The tooltip text "Learn more about SOUL.md" leaks an implementation detail (the name of a config file) into user-facing UI copy. Every other header uses plain feature names ("Learn more about memory", "Learn more about skills", etc.). Consider aligning with that pattern:

```suggestion
                <TooltipContent>Learn more about Agent Soul</TooltipContent>
```

How can I resolve this? If you propose a fix, please make it concise.

---

This is a comment left during a code review.
Path: apps/agent/entrypoints/app/connect-mcp/ConnectMCP.tsx
Line: 242

Comment:
**Tooltip text doesn't match the heading**

The heading says "Connected Apps" (with a "d") but the tooltip reads "Learn more about Connect Apps". It also diverges from `LlmHubHeader` which omits the "LLM" prefix. For consistency, consider matching the exact heading text:

```suggestion
                  <TooltipContent>Learn more about Connected Apps</TooltipContent>
```

How can I resolve this? If you propose a fix, please make it concise.

---

This is a comment left during a code review.
Path: apps/agent/entrypoints/app/llm-hub/LlmHubHeader.tsx
Line: 33

Comment:
**Tooltip text truncates the heading**

The heading is "LLM Chat & Hub" but the tooltip reads "Learn more about Chat & Hub", dropping the "LLM" prefix. Consider matching the full feature name for consistency:

```suggestion
                <TooltipContent>Learn more about LLM Chat & Hub</TooltipContent>
```

How can I resolve this? If you propose a fix, please make it concise.

---

This is a comment left during a code review.
Path: apps/agent/entrypoints/app/skills/SkillsPage.tsx
Line: 196-203

Comment:
**Icon-only links are missing `aria-label`**

The `<a>` element contains only a `HelpCircle` icon with no visible text. Screen readers will announce this as an unlabelled link. Adding `aria-label` makes the purpose clear to assistive technology. The same applies to the equivalent links added in `LlmProvidersHeader.tsx`, `ConnectMCP.tsx`, `LlmHubHeader.tsx`, `MemoryHeader.tsx`, and `SoulHeader.tsx`.

```suggestion
                  <a
                    href={skillsHelpUrl}
                    target="_blank"
                    rel="noopener noreferrer"
                    aria-label="Learn more about skills"
                    className="rounded-full p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
                  >
                    <HelpCircle className="h-4 w-4" />
                  </a>
```

How can I resolve this? If you propose a fix, please make it concise.

_{Last reviewed commit: defcce8}