feat: add docs links to feature page headers

packages/browseros-agent/apps/agent/entrypoints/app/ai-settings/LlmProvidersHeader.tsx

@@ -1,4 +1,4 @@
-import { Plus } from 'lucide-react'
+import { HelpCircle, Plus } from 'lucide-react'
 import type { FC } from 'react'
 import ProductLogoSvg from '@/assets/product_logo.svg'
 import { Button } from '@/components/ui/button'
@@ -9,6 +9,13 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
+import { bringYourOwnLlmHelpUrl } from '@/lib/constants/productUrls'
 import type { LlmProviderConfig } from '@/lib/llm-providers/types'
 
 interface LlmProvidersHeaderProps {
@@ -34,7 +41,24 @@ export const LlmProvidersHeader: FC<LlmProvidersHeaderProps> = ({
           <img src={ProductLogoSvg} alt="BrowserOS" className="h-8 w-8" />
         </div>
         <div className="flex-1">
-          <h2 className="mb-1 font-semibold text-xl">LLM Providers</h2>
+          <div className="mb-1 flex items-center gap-2">
+            <h2 className="font-semibold text-xl">LLM Providers</h2>
+            <TooltipProvider delayDuration={0}>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <a
+                    href={bringYourOwnLlmHelpUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="rounded-full p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+                  >
+                    <HelpCircle className="h-4 w-4" />
+                  </a>
+                </TooltipTrigger>
+                <TooltipContent>Learn more about LLM providers</TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </div>
           <p className="mb-6 text-muted-foreground text-sm">
             Add your provider and choose the default LLM
           </p>

packages/browseros-agent/apps/agent/entrypoints/app/connect-mcp/ConnectMCP.tsx

@@ -1,11 +1,18 @@
-import { Check, Loader2, Plus, Server, Trash2 } from 'lucide-react'
+import { Check, HelpCircle, Loader2, Plus, Server, Trash2 } from 'lucide-react'
 import { type FC, useState } from 'react'
 import { toast } from 'sonner'
 import { Button } from '@/components/ui/button'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
 import {
   CUSTOM_MCP_ADDED_EVENT,
   MANAGED_MCP_ADDED_EVENT,
 } from '@/lib/constants/analyticsEvents'
+import { connectAppsHelpUrl } from '@/lib/constants/productUrls'
 import { useMcpServers } from '@/lib/mcp/mcpServerStorage'
 import { useSyncRemoteIntegrations } from '@/lib/mcp/useSyncRemoteIntegrations'
 import { track } from '@/lib/metrics/track'
@@ -218,7 +225,24 @@ export const ConnectMCP: FC = () => {
             <Server className="h-6 w-6 text-[var(--accent-orange)]" />
           </div>
           <div className="flex-1">
-            <h2 className="mb-1 font-semibold text-xl">Connected Apps</h2>
+            <div className="mb-1 flex items-center gap-2">
+              <h2 className="font-semibold text-xl">Connected Apps</h2>
+              <TooltipProvider delayDuration={0}>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <a
+                      href={connectAppsHelpUrl}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="rounded-full p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+                    >
+                      <HelpCircle className="h-4 w-4" />
+                    </a>
+                  </TooltipTrigger>
+                  <TooltipContent>Learn more about Connect Apps</TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            </div>
             <p className="mb-6 text-muted-foreground text-sm">
               Connect BrowserOS assistant to apps to send email, schedule
               calendar events, write docs, and more

packages/browseros-agent/apps/agent/entrypoints/app/llm-hub/LlmHubHeader.tsx

@@ -1,5 +1,12 @@
-import { MessageSquare } from 'lucide-react'
+import { HelpCircle, MessageSquare } from 'lucide-react'
 import type { FC } from 'react'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
+import { llmChatHubHelpUrl } from '@/lib/constants/productUrls'
 
 export const LlmHubHeader: FC = () => {
   return (
@@ -9,7 +16,24 @@ export const LlmHubHeader: FC = () => {
           <MessageSquare className="h-6 w-6 text-[var(--accent-orange)]" />
         </div>
         <div>
-          <h2 className="mb-1 font-semibold text-xl">LLM Chat & Hub</h2>
+          <div className="mb-1 flex items-center gap-2">
+            <h2 className="font-semibold text-xl">LLM Chat & Hub</h2>
+            <TooltipProvider delayDuration={0}>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <a
+                    href={llmChatHubHelpUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="rounded-full p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+                  >
+                    <HelpCircle className="h-4 w-4" />
+                  </a>
+                </TooltipTrigger>
+                <TooltipContent>Learn more about Chat & Hub</TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </div>
           <p className="text-muted-foreground text-sm">
             Curate and configure your favourite LLM chat providers
           </p>

packages/browseros-agent/apps/agent/entrypoints/app/mcp-settings/MCPServerHeader.tsx

@@ -1,6 +1,7 @@
 import { Check, Copy, ExternalLink, Globe, Server } from 'lucide-react'
 import { type FC, useState } from 'react'
 import { Button } from '@/components/ui/button'
+import { mcpClientsHelpUrl } from '@/lib/constants/productUrls'
 
 interface MCPServerHeaderProps {
   serverUrl: string | null
@@ -11,8 +12,6 @@ interface MCPServerHeaderProps {
   remoteAccessEnabled?: boolean
 }
 
-const DOCS_URL = 'https://docs.browseros.com/features/use-with-claude-code'
-
 export const MCPServerHeader: FC<MCPServerHeaderProps> = ({
   serverUrl,
   isLoading,
@@ -45,7 +44,7 @@ export const MCPServerHeader: FC<MCPServerHeaderProps> = ({
           <div className="mb-1 flex items-center justify-between">
             <h2 className="font-semibold text-xl">{title}</h2>
             <a
-              href={DOCS_URL}
+              href={mcpClientsHelpUrl}
               target="_blank"
               rel="noopener noreferrer"
               className="flex items-center gap-1 text-muted-foreground text-sm transition-colors hover:text-[var(--accent-orange)]"

packages/browseros-agent/apps/agent/entrypoints/app/memory/MemoryHeader.tsx

@@ -1,5 +1,12 @@
-import { Brain } from 'lucide-react'
+import { Brain, HelpCircle } from 'lucide-react'
 import type { FC } from 'react'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
+import { memoryHelpUrl } from '@/lib/constants/productUrls'
 
 export const MemoryHeader: FC = () => {
   return (
@@ -9,7 +16,24 @@ export const MemoryHeader: FC = () => {
           <Brain className="h-6 w-6 text-violet-500" />
         </div>
         <div className="flex-1">
-          <h2 className="mb-1 font-semibold text-xl">Agent Memory</h2>
+          <div className="mb-1 flex items-center gap-2">
+            <h2 className="font-semibold text-xl">Agent Memory</h2>
+            <TooltipProvider delayDuration={0}>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <a
+                    href={memoryHelpUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="rounded-full p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+                  >
+                    <HelpCircle className="h-4 w-4" />
+                  </a>
+                </TooltipTrigger>
+                <TooltipContent>Learn more about memory</TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </div>
           <p className="text-muted-foreground text-sm">
             Facts your agent remembers about you — your name, preferences,
             projects, and tools. Edit directly or teach through conversation.

packages/browseros-agent/apps/agent/entrypoints/app/skills/SkillsPage.tsx

@@ -1,4 +1,11 @@
-import { AlertCircle, Pencil, Plus, Trash2, Wand2 } from 'lucide-react'
+import {
+  AlertCircle,
+  HelpCircle,
+  Pencil,
+  Plus,
+  Trash2,
+  Wand2,
+} from 'lucide-react'
 import { type FC, useEffect, useState } from 'react'
 import { toast } from 'sonner'
 import {
@@ -26,6 +33,13 @@ import { Label } from '@/components/ui/label'
 import { MarkdownEditor } from '@/components/ui/MarkdownEditor'
 import { Switch } from '@/components/ui/switch'
 import { Textarea } from '@/components/ui/textarea'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
+import { skillsHelpUrl } from '@/lib/constants/productUrls'
 import { type SkillDetail, type SkillMeta, useSkills } from './useSkills'
 
 const loadingSkillCards = [
@@ -174,7 +188,24 @@ const SkillsHeader: FC<{
   return (
     <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
       <div>
-        <h1 className="font-semibold text-2xl tracking-tight">Skills</h1>
+        <div className="flex items-center gap-2">
+          <h1 className="font-semibold text-2xl tracking-tight">Skills</h1>
+          <TooltipProvider delayDuration={0}>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <a
+                  href={skillsHelpUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="rounded-full p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+                >
+                  <HelpCircle className="h-4 w-4" />
+                </a>
+              </TooltipTrigger>
+              <TooltipContent>Learn more about skills</TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
         <p className="text-muted-foreground text-sm">
           Define reusable instructions that extend how your agent responds.
         </p>

packages/browseros-agent/apps/agent/entrypoints/app/soul/SoulHeader.tsx

@@ -1,5 +1,12 @@
-import { Sparkles } from 'lucide-react'
+import { HelpCircle, Sparkles } from 'lucide-react'
 import type { FC } from 'react'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
+import { soulHelpUrl } from '@/lib/constants/productUrls'
 
 export const SoulHeader: FC = () => {
   return (
@@ -9,7 +16,24 @@ export const SoulHeader: FC = () => {
           <Sparkles className="h-6 w-6 text-[var(--accent-orange)]" />
         </div>
         <div className="flex-1">
-          <h2 className="mb-1 font-semibold text-xl">Agent Soul</h2>
+          <div className="mb-1 flex items-center gap-2">
+            <h2 className="font-semibold text-xl">Agent Soul</h2>
+            <TooltipProvider delayDuration={0}>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <a
+                    href={soulHelpUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="rounded-full p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+                  >
+                    <HelpCircle className="h-4 w-4" />
+                  </a>
+                </TooltipTrigger>
+                <TooltipContent>Learn more about SOUL.md</TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </div>
           <p className="text-muted-foreground text-sm">
             Your agent's personality, tone, and behavioral rules. The soul
             evolves as your agent learns how you like to interact.

packages/browseros-agent/apps/agent/lib/constants/productUrls.ts

@@ -59,3 +59,42 @@ export const workflowsHelpUrl = 'https://docs.browseros.com/features/workflows'
  */
 export const scheduledTasksHelpUrl =
   'https://docs.browseros.com/features/scheduled-tasks'
+
+/**
+ * @public
+ */
+export const skillsHelpUrl = 'https://docs.browseros.com/features/skills'
+
+/**
+ * @public
+ */
+export const connectAppsHelpUrl =
+  'https://docs.browseros.com/features/connect-mcps'
+
+/**
+ * @public
+ */
+export const memoryHelpUrl = 'https://docs.browseros.com/features/memory'
+
+/**
+ * @public
+ */
+export const soulHelpUrl = 'https://docs.browseros.com/features/soul'
+
+/**
+ * @public
+ */
+export const bringYourOwnLlmHelpUrl =
+  'https://docs.browseros.com/features/bring-your-own-llm'
+
+/**
+ * @public
+ */
+export const llmChatHubHelpUrl =
+  'https://docs.browseros.com/features/llm-chat-hub'
+
+/**
+ * @public
+ */
+export const mcpClientsHelpUrl =
+  'https://docs.browseros.com/features/use-with-claude-code'