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/pages/CcConfig.tsx

@@ -7,8 +7,9 @@
  * low-risk text-file surfaces (skills, agents, commands, output styles,
  * CLAUDE.md memory, and per-project file-based memory files). Plugins, MCP,
  * hooks-in-settings, and settings.json files stay read-only - those have
- * concurrent-write races with the live CLI. Its AgentHub sub-tab holds the
- * dashboard's own Claude Code settings (pricing, hooks, CLAUDE_HOME).
+ * concurrent-write races with the live CLI. Its Overview also holds the
+ * dashboard's own Claude Code settings (CLAUDE_HOME — editable, so the path
+ * list leaves it out — hooks, pricing: `ClaudeAgentHubSettings`).
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 /* =============================================================================
@@ -59,7 +60,6 @@ import { useTranslation } from "react-i18next";
 import { eventBus } from "../lib/eventBus";
 import {
   Boxes,
-  Gauge,
   RefreshCw,
   Search,
   Sparkles,
@@ -181,8 +181,7 @@ type TabKey =
   | "hooks"
   | "keybindings"
   | "settings"
-  | "memory"
-  | "agenthub";
+  | "memory";
 
 interface TabDef {
   key: TabKey;
@@ -203,7 +202,6 @@ const TABS: TabDef[] = [
   { key: "keybindings", icon: Keyboard, i18nKey: "tabs.keybindings" },
   { key: "settings", icon: SettingsIcon, i18nKey: "tabs.settings" },
   { key: "outputStyles", icon: Palette, i18nKey: "tabs.outputStyles" },
-  { key: "agenthub", icon: Gauge, i18nKey: "tabs.agenthub" },
 ];
 
 interface PageState {
@@ -243,7 +241,7 @@ const EMPTY_STATE: PageState = {
 export function CcConfig() {
   const { t } = useTranslation("ccConfig");
   const [tab, setTab] = useState<TabKey>("overview");
-  // Bumped by Refresh: the AgentHub sub-tab loads on mount, so a new key reloads it.
+  // Bumped by Refresh: the AgentHub cards load on mount, so a new key reloads them.
   const [agenthubKey, setAgenthubKey] = useState(0);
   const [scope, setScope] = useState<CcScope>("all");
   const [data, setData] = useState<PageState>(EMPTY_STATE);
@@ -530,72 +528,72 @@ export function CcConfig() {
 
       <Tabs current={tab} onSelect={setTab} counts={data.overview?.counts} />
 
-      {/* AgentHub's own Claude Code settings are cards of their own, not a
-          list over this tab's search box and scope. */}
-      {tab === "agenthub" ? (
-        <ClaudeAgentHubSettings key={agenthubKey} onHomeChanged={() => void fetchAll()} />
-      ) : (
-        <div className="rounded-xl border border-border bg-surface-1">
-          {tab !== "overview" && (
-            <div className="flex items-center gap-2 border-b border-border px-4 py-2.5">
-              <Search className="w-4 h-4 text-fg-muted" />
-              <input
-                value={search}
-                onChange={(e) => setSearch(e.target.value)}
-                placeholder={t("common.search")}
-                className="h-7 bg-transparent text-sm text-fg-primary placeholder:text-fg-muted focus:outline-none flex-1"
-              />
-              {search && (
-                <button
-                  type="button"
-                  onClick={() => setSearch("")}
-                  title={t("common.clearSearch")}
-                  aria-label={t("common.clearSearch")}
-                  className="h-7 w-7 flex-shrink-0 inline-flex items-center justify-center rounded-md text-fg-muted hover:text-fg-secondary hover:bg-surface-3 focus:outline-none focus:ring-1 focus:ring-accent/40"
-                >
-                  <X className="w-3.5 h-3.5" />
-                </button>
-              )}
-              {isMutable(tab) && tab !== "memory" && (
-                <button
-                  onClick={() => openCreate(tabToArtifactType(tab))}
-                  className="h-7 text-[11px] font-medium px-2.5 rounded-md border border-accent/30 bg-accent/10 hover:bg-accent/20 text-accent inline-flex items-center gap-1.5"
-                >
-                  <Plus className="w-3 h-3" />
-                  {t("edit.newButton")}
-                </button>
-              )}
-              {/* The memory tab's own "new" is a different thing: the two
+      <div className="rounded-xl border border-border bg-surface-1">
+        {tab !== "overview" && (
+          <div className="flex items-center gap-2 border-b border-border px-4 py-2.5">
+            <Search className="w-4 h-4 text-fg-muted" />
+            <input
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              placeholder={t("common.search")}
+              className="h-7 bg-transparent text-sm text-fg-primary placeholder:text-fg-muted focus:outline-none flex-1"
+            />
+            {search && (
+              <button
+                type="button"
+                onClick={() => setSearch("")}
+                title={t("common.clearSearch")}
+                aria-label={t("common.clearSearch")}
+                className="h-7 w-7 flex-shrink-0 inline-flex items-center justify-center rounded-md text-fg-muted hover:text-fg-secondary hover:bg-surface-3 focus:outline-none focus:ring-1 focus:ring-accent/40"
+              >
+                <X className="w-3.5 h-3.5" />
+              </button>
+            )}
+            {isMutable(tab) && tab !== "memory" && (
+              <button
+                onClick={() => openCreate(tabToArtifactType(tab))}
+                className="h-7 text-[11px] font-medium px-2.5 rounded-md border border-accent/30 bg-accent/10 hover:bg-accent/20 text-accent inline-flex items-center gap-1.5"
+              >
+                <Plus className="w-3 h-3" />
+                {t("edit.newButton")}
+              </button>
+            )}
+            {/* The memory tab's own "new" is a different thing: the two
                 CLAUDE.md cards below are this machine's user + current-project
                 files, while this creates one in ANOTHER project's directory. */}
-              {tab === "memory" && (
-                <button
-                  onClick={() => setProjectMemoryOpen(true)}
-                  className="h-7 text-[11px] font-medium px-2.5 rounded-md border border-accent/30 bg-accent/10 hover:bg-accent/20 text-accent inline-flex items-center gap-1.5 whitespace-nowrap"
-                >
-                  <Plus className="w-3 h-3" />
-                  {t("projectMemory.newButton")}
-                </button>
-              )}
-            </div>
-          )}
-          <div className="p-4">
-            <TabPanel
-              tab={tab}
-              data={data}
-              search={search}
-              onOpenFile={openViewer}
-              onEdit={openEdit}
-              onDelete={openDelete}
-              onCreateMemory={(s) => openCreate("memory", s)}
-              onEditAuto={openEditAuto}
-              onDeleteAuto={openDeleteAuto}
-              onCreateAuto={openCreateAuto}
-              onChanged={fetchAll}
-              onToast={setToast}
-            />
+            {tab === "memory" && (
+              <button
+                onClick={() => setProjectMemoryOpen(true)}
+                className="h-7 text-[11px] font-medium px-2.5 rounded-md border border-accent/30 bg-accent/10 hover:bg-accent/20 text-accent inline-flex items-center gap-1.5 whitespace-nowrap"
+              >
+                <Plus className="w-3 h-3" />
+                {t("projectMemory.newButton")}
+              </button>
+            )}
           </div>
+        )}
+        <div className="p-4">
+          <TabPanel
+            tab={tab}
+            data={data}
+            search={search}
+            onOpenFile={openViewer}
+            onEdit={openEdit}
+            onDelete={openDelete}
+            onCreateMemory={(s) => openCreate("memory", s)}
+            onEditAuto={openEditAuto}
+            onDeleteAuto={openDeleteAuto}
+            onCreateAuto={openCreateAuto}
+            onChanged={fetchAll}
+            onToast={setToast}
+          />
         </div>
+      </div>
+
+      {/* AgentHub's own Claude Code settings follow the overview, outside the
+          list's search box and scope. */}
+      {tab === "overview" && (
+        <ClaudeAgentHubSettings key={agenthubKey} onHomeChanged={() => void fetchAll()} />
       )}
 
       {viewer && <FileViewer state={viewer} onClose={() => setViewer(null)} />}
@@ -1069,12 +1067,6 @@ function OverviewPanel({ overview }: { overview: CcOverview | null }) {
           {t("overview.rootsTitle")}
         </h2>
         <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
-          <RootRow
-            icon={FolderTree}
-            tone="sky"
-            label={t("overview.claudeHome")}
-            value={roots.claudeHome}
-          />
           <RootRow
             icon={FolderTree}
             tone="emerald"