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/lanes/LaneChangesPanel.tsx

@@ -5,7 +5,8 @@
  *   overview — every changed file with its +/- counts and its stage/discard
  *              actions; click one to open it
  *   review   — every file's full diff, stacked, for reading a whole change-set
- *   file     — one file, as a diff or as its whole content (issue #35)
+ *   file     — one file, as a diff or as its whole content (issue #35); a
+ *              whole markdown file can also be read rendered (Preview)
  *   history  — recent commits; opening one shows that commit's diff
  *   browse   — quick-open by path, or the repo's tracked file tree
  *
@@ -38,7 +39,9 @@ import {
   ChevronsDownUp,
   ChevronsUpDown,
   Check,
+  Code2,
   Columns2,
+  Eye,
   FileText,
   FoldVertical,
   Folder,
@@ -53,6 +56,7 @@ import {
 import { api } from "../../lib/api";
 import { LaneDiffView, LaneFileView, type DiffLayout, type LaneDiffChange } from "./LaneDiffView";
 import { LaneConflictView } from "./LaneConflictView";
+import { MarkdownPreview, isMarkdown } from "../MarkdownPreview";
 import { LaneGitHeader, useLaneGitFacts } from "./LaneGitHeader";
 import type {
   LaneChangeFile,
@@ -435,6 +439,9 @@ export function LaneChangesPanel({
   const [context, setContext] = useState(CONTEXT_STEPS[0]);
   const [layout, setLayout] = useState<DiffLayout>("unified");
   const [whole, setWhole] = useState(false);
+  // A whole markdown file shown rendered instead of as source; per file.
+  const [mdPreview, setMdPreview] = useState(false);
+  useEffect(() => setMdPreview(false), [openFile]);
   const [data, setData] = useState<LaneChanges | null>(null);
   const [commits, setCommits] = useState<LaneCommit[] | null>(null);
   // A folder's children, keyed by its path ("" is the root) — fetched once,
@@ -1429,6 +1436,18 @@ export function LaneChangesPanel({
                       binary={current.binary}
                     />
                   )}
+                  {whole && text && draft === null && isMarkdown(openFile) && (
+                    <button
+                      type="button"
+                      data-testid="lane-file-preview"
+                      aria-pressed={mdPreview}
+                      onClick={() => setMdPreview((v) => !v)}
+                      className="flex shrink-0 items-center gap-1 self-center rounded border border-border-light px-1.5 py-0.5 text-[11px] text-fg-secondary hover:bg-surface-2 hover:text-fg-primary"
+                    >
+                      {mdPreview ? <Code2 className="h-3 w-3" /> : <Eye className="h-3 w-3" />}
+                      {mdPreview ? t("changes.raw") : t("changes.preview")}
+                    </button>
+                  )}
                   {/* Only the working file is editable: a commit is history. */}
                   {/* The whole file enters the editor by a click on its text;
                       only the diff, which has no whole text to click, keeps
@@ -1442,7 +1461,8 @@ export function LaneChangesPanel({
                         {t(noEditReason(text))}
                       </span>
                     ) : draft === null && whole ? (
-                      text && (
+                      text &&
+                      !mdPreview && (
                         <span className="shrink-0 self-center text-[10px] text-fg-muted">
                           {t("changes.clickToEdit")}
                         </span>
@@ -1503,7 +1523,11 @@ export function LaneChangesPanel({
                     className="min-h-0 flex-1 resize-none rounded border border-border-light bg-surface-0 p-2 font-mono text-[11px] leading-[1.45] text-fg-primary focus:border-accent focus:outline-none"
                   />
                 ) : whole ? (
-                  text ? (
+                  text && mdPreview ? (
+                    <div className="min-h-0 flex-1 overflow-auto rounded border border-border-light bg-surface-0 p-4">
+                      <MarkdownPreview text={text.lines.join("\n")} />
+                    </div>
+                  ) : text ? (
                     <LaneFileView
                       path={text.path}
                       lines={text.lines}