feat(ui): AI Tools modal, one-button lane tool picker, AgentHub settings in Overview, markdown preview

- AI Tools moves from a Settings section into a modal behind a button at the
  Settings tab bar's right edge (AiToolsModal, `actions` on PageTabs,
  /settings#ai-tools); rows get an enable switch, Default badge, and an
  Update button for every tool whose catalog names an updater (no version
  lookup on open); not-installed tools fold behind a disclosure, a finished
  job's log folds to one line; shared AiToolIcon
- codex updates through its own `codex update`, openclaw/hermes gain
  `update --yes`; update-all runs every installed updater and skips an npm
  one only when npm does not manage the binary
- Add-lane tool picker is one button showing the chosen tool that opens the
  enabled tools as buttons
- Claude Code / Codex AgentHub sub-tab folded into Overview (home editor,
  hooks, pricing); the path list drops CLAUDE_HOME/CODEX_HOME;
  HomeDirSetting shows the saved value only while the field differs
- Preview/Raw toggle for markdown files in the config FileViewer and the
  Changes panel's whole-file view (MarkdownPreview: react-markdown +
  remark-gfm, raw HTML never run, frontmatter as a code block)
- docs and the CLAUDE.md marker updated

client/src/components/settings/ClaudeAgentHubSettings.tsx

@@ -1,11 +1,10 @@
 /**
  * @file ClaudeAgentHubSettings.tsx
- * @description Settings → Claude Code → AgentHub: the dashboard's own settings
- * that belong to Claude Code — Model Pricing for Claude models (the shared
- * `PricingSettings` table, with Reset Defaults), the AgentHub hooks installed
- * into Claude Code with a Reinstall button, and the CLAUDE_HOME the server
- * reads transcripts and config from. Moved here from Settings → Dashboard
- * (#40 part B).
+ * @description The dashboard's own settings that belong to Claude Code, shown
+ * under Settings → Claude Code → Overview: the CLAUDE_HOME the server reads
+ * transcripts and config from, the AgentHub hooks installed into Claude Code
+ * with a Reinstall button, and Model Pricing for Claude models (the shared
+ * `PricingSettings` table, with Reset Defaults).
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
@@ -125,7 +124,32 @@ export function ClaudeAgentHubSettings({ onHomeChanged }: { onHomeChanged?: () =
 
   return (
     <div className="space-y-8">
-      <PricingSettings vendor="claude" allowReset />
+      <HomeDirSetting
+        id="claude-home"
+        title={t("claudeHome.title")}
+        description={t("claudeHome.description")}
+        note={t("cursorPathsNote")}
+        placeholder={t("claudeHome.placeholder")}
+        load={() =>
+          api.settings.claudeHome
+            .get()
+            .then((r) => ({ value: r.claude_home, envOwned: !!r.env_owned }))
+        }
+        save={(p) =>
+          api.settings.claudeHome.set(p).then((r) => {
+            void load();
+            onHomeChanged?.();
+            const missing = r.routers?.missing ?? [];
+            return {
+              value: r.claude_home,
+              envOwned: !!r.env_owned,
+              warning: missing.length
+                ? t("claudeHome.routersMissing", { lanes: missing.join(", ") })
+                : null,
+            };
+          })
+        }
+      />
       {error && (
         <div className="px-4 py-2.5 bg-status-danger/10 border border-status-danger/20 rounded-lg text-sm text-status-danger">
           {error}
@@ -192,32 +216,7 @@ export function ClaudeAgentHubSettings({ onHomeChanged }: { onHomeChanged?: () =
         </div>
       </section>
 
-      <HomeDirSetting
-        id="claude-home"
-        title={t("claudeHome.title")}
-        description={t("claudeHome.description")}
-        note={t("cursorPathsNote")}
-        placeholder={t("claudeHome.placeholder")}
-        load={() =>
-          api.settings.claudeHome
-            .get()
-            .then((r) => ({ value: r.claude_home, envOwned: !!r.env_owned }))
-        }
-        save={(p) =>
-          api.settings.claudeHome.set(p).then((r) => {
-            void load();
-            onHomeChanged?.();
-            const missing = r.routers?.missing ?? [];
-            return {
-              value: r.claude_home,
-              envOwned: !!r.env_owned,
-              warning: missing.length
-                ? t("claudeHome.routersMissing", { lanes: missing.join(", ") })
-                : null,
-            };
-          })
-        }
-      />
+      <PricingSettings vendor="claude" allowReset />
     </div>
   );
 }