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/config/FileViewer.tsx

@@ -3,15 +3,17 @@
  * @description Read-only file-content modal for the config explorer. Takes
  * already-fetched data as props (path/data/error) rather than fetching
  * itself, so it stays tool-agnostic — the orchestrator (Claude or Codex
- * config page) owns the fetch.
+ * config page) owns the fetch. A markdown file gets a Raw / Preview switch
+ * (`MarkdownPreview`); Raw is the default.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { FileText, X, AlertCircle } from "lucide-react";
+import { FileText, X, AlertCircle, Eye, Code2 } from "lucide-react";
 import type { CcFileResponse } from "../../lib/api";
 import { CopyButton } from "./configPrimitives";
+import { MarkdownPreview, isMarkdown } from "../MarkdownPreview";
 
 export function FileViewer({
   state,
@@ -21,6 +23,8 @@ export function FileViewer({
   onClose: () => void;
 }) {
   const { t } = useTranslation("ccConfig");
+  const [preview, setPreview] = useState(false);
+  const canPreview = isMarkdown(state.path) && !!state.data;
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => {
       if (e.key === "Escape") onClose();
@@ -42,6 +46,17 @@ export function FileViewer({
           <span className="font-mono text-[12px] text-fg-secondary truncate flex-1">
             {state.path}
           </span>
+          {canPreview && (
+            <button
+              type="button"
+              aria-pressed={preview}
+              onClick={() => setPreview((v) => !v)}
+              className="inline-flex items-center gap-1 rounded-md border border-border px-2 py-0.5 text-[11px] text-fg-secondary hover:bg-surface-3 hover:text-fg-primary"
+            >
+              {preview ? <Code2 className="h-3 w-3" /> : <Eye className="h-3 w-3" />}
+              {preview ? t("common.raw") : t("common.preview")}
+            </button>
+          )}
           <CopyButton value={state.path} />
           <button
             onClick={onClose}
@@ -59,6 +74,13 @@ export function FileViewer({
             </div>
           ) : !state.data ? (
             <div className="text-sm text-fg-muted">…</div>
+          ) : preview && canPreview ? (
+            <>
+              <MarkdownPreview text={state.data.text} />
+              {state.data.truncated && (
+                <p className="text-[11px] text-fg-muted italic">{t("common.truncated")}</p>
+              )}
+            </>
           ) : (
             <pre className="text-[11px] font-mono text-fg-secondary whitespace-pre-wrap break-words">
               {state.data.text}