@dominikcz/greg 0.9.40 → 0.9.44

package/bin/greg.js

@@ -1,4 +1,4 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 /**
  * greg CLI
  *
@@ -84,16 +84,20 @@ function help() {
 
 function run(cmd, extraArgs = [], options = {}) {
     const { exit = true } = options;
+    const envBase = { ...process.env, ...(options.env || {}) };
+    const pathValue = envBase.PATH ?? envBase.Path ?? process.env.PATH ?? process.env.Path ?? '';
+    const resolvedPath = resolve(__dirname, '../node_modules/.bin') +
+        (process.platform === 'win32' ? ';' : ':') +
+        pathValue;
     const result = spawnSync(cmd, extraArgs, {
         stdio: 'inherit',
         shell: true,
         // Ensure the local node_modules/.bin is on the PATH so that
         // the project-local vite binary is preferred.
         env: {
-            ...process.env,
-            PATH: resolve(__dirname, '../node_modules/.bin') +
-                (process.platform === 'win32' ? ';' : ':') +
-                (process.env.PATH ?? ''),
+            ...envBase,
+            PATH: resolvedPath,
+            Path: resolvedPath,
         },
     });
     const status = result.status ?? 0;
@@ -103,13 +107,17 @@ function run(cmd, extraArgs = [], options = {}) {
 
 function runNodeScript(scriptPath, extraArgs = [], options = {}) {
     const { exit = true } = options;
+    const envBase = { ...process.env, ...(options.env || {}) };
+    const pathValue = envBase.PATH ?? envBase.Path ?? process.env.PATH ?? process.env.Path ?? '';
+    const resolvedPath = resolve(__dirname, '../node_modules/.bin') +
+        (process.platform === 'win32' ? ';' : ':') +
+        pathValue;
     const result = spawnSync(process.execPath, [scriptPath, ...extraArgs], {
         stdio: 'inherit',
         env: {
-            ...process.env,
-            PATH: resolve(__dirname, '../node_modules/.bin') +
-                (process.platform === 'win32' ? ';' : ':') +
-                (process.env.PATH ?? ''),
+            ...envBase,
+            PATH: resolvedPath,
+            Path: resolvedPath,
         },
     });
     const status = result.status ?? 0;
@@ -122,6 +130,20 @@ function printElapsedSeconds(startMs) {
     console.log(`\n${infoTag()} ${color(`Done in ${elapsed}s`, '32')}`);
 }
 
+function parseBooleanFlag(value) {
+    if (value == null) return false;
+    const normalized = String(value).trim().toLowerCase();
+    if (!normalized) return false;
+    return !['0', 'false', 'no', 'off'].includes(normalized);
+}
+
+function hasSingleBuildFlag(passthroughArgs) {
+    if (passthroughArgs.includes('--single')) return true;
+    if (parseBooleanFlag(process.env.npm_config_single)) return true;
+    if (parseBooleanFlag(process.env.GREG_SINGLE_BUILD)) return true;
+    return false;
+}
+
 async function hasVersioningBuildConfig() {
     try {
         const config = await loadGregConfig();
@@ -161,12 +183,18 @@ switch (command) {
         child.on('exit', code => process.exit(code ?? 0));
         break;
     }
-    case 'dev':
-        run('vite', args);
+    case 'dev': {
+        const existingOpts = process.env.NODE_OPTIONS ?? '';
+        const heapFlag = '--max-old-space-size=4096';
+        const nodeOptions = existingOpts.includes('max-old-space-size')
+            ? existingOpts
+            : `${existingOpts} ${heapFlag}`.trim();
+        run('vite', args, { env: { NODE_OPTIONS: nodeOptions } });
         break;
+    }
     case 'build': {
         const startedAt = Date.now();
-        const forceSingle = args.includes('--single');
+        const forceSingle = hasSingleBuildFlag(args);
         const passthroughArgs = args.filter((a) => a !== '--single');
         const shouldBuildVersions = !forceSingle && await hasVersioningBuildConfig();
 

package/docs/guide/deploying.md

@@ -23,6 +23,7 @@ dist/
   index.html
   assets/          ← JS, CSS, fonts (content-hashed)
   search-index.json
+  search-index/    ← sharded index files + manifest for greg search-server (optional)
   <any public/ files>
 ```
 

package/docs/guide/markdown/links-and-toc.md

@@ -18,7 +18,7 @@ Internal links use SPA navigation and update the page without a full reload:
 Output:
 
 [Getting Started](../getting-started)
-[API reference](/reference/api)
+[API reference](/reference/markdowndocs)
 [Back to top](#)
 
 `.md` and `.html` extensions are stripped automatically.
@@ -70,9 +70,9 @@ Each non-empty line inside the block becomes one flex item.
 
 ```md
 [[
-![Freezer A](/know-how/gastro-orlen/mroznia/freezer-a.webp)
-![Freezer B](/know-how/gastro-orlen/mroznia/freezer-b.webp)
-![Freezer C](/know-how/gastro-orlen/mroznia/freezer-c.webp)
+![img A](/some/path/img-a.webp)
+![img B](/some/path/img-b.webp)
+![img C](/some/path/img-c.webp)
 ]]
 ```
 

package/docs/reference/markdowndocs.md

@@ -268,7 +268,7 @@ const gregConfig = {
 branches inline. This keeps runtime rendering predictable and makes new
 features easier to add.
 
-### 1) Component hydration registry
+### 1 Component hydration registry
 
 `COMPONENT_REGISTRY` maps a tag name to:
 
@@ -278,7 +278,7 @@ features easier to add.
 This is used for custom component tags like `badge`, `button`, `image`,
 `link`, and `codegroup`.
 
-### 2) Markdown plugin registries
+### 2 Markdown plugin registries
 
 The markdown pipeline is assembled from two ordered registries:
 
@@ -293,7 +293,7 @@ These cover, among others:
 - Steps normalization (`rehypeStepsWrapper`)
 - headings/TOC (`rehypeSlug`, `rehypeAutolinkHeadings`, `rehypeTocPlaceholder`)
 
-### 3) Render handlers (post-HTML stage)
+### 3 Render handlers (post-HTML stage)
 
 After HTML is rendered, handlers are executed from ordered lists:
 

package/docs/reference/search.md

@@ -77,6 +77,60 @@ search: {
 }
 ```
 
+### Server tuning for large indices
+
+For very large documentation sets, tune standalone `greg search-server` directly
+from `greg.config.js`:
+
+```js
+search: {
+  provider: 'server',
+  serverUrl: 'http://localhost:3100/api/search',
+  server: {
+    preloadShards: true,
+    maxLoadedShards: 32,
+    shardCandidates: 6,
+  }
+}
+```
+
+- `preloadShards` (default: `true`) preloads shard indexes at startup to reduce query latency.
+- `maxLoadedShards` limits how many shard Fuse indexes stay in memory.
+- `shardCandidates` controls how many likely shards are searched first per query.
+
+Resolution order is:
+
+1. CLI flags (`greg search-server --...`)
+2. Environment variables (`GREG_SEARCH_*`)
+3. `greg.config.js > search.server`
+4. Built-in defaults
+
+Supported runtime overrides:
+
+- `--preload-shards` / `GREG_SEARCH_PRELOAD_SHARDS`
+- `--max-loaded-shards` / `GREG_SEARCH_MAX_LOADED_SHARDS`
+- `--shard-candidates` / `GREG_SEARCH_SHARD_CANDIDATES`
+
+Build output now includes size logs for the generated search assets (full index + shards).
+
+You can tune shard generation at build time with `GREG_SEARCH_SHARDS`:
+
+- `GREG_SEARCH_SHARDS=32` (default) generates 32 shard files.
+- `GREG_SEARCH_SHARDS=64` increases shard count.
+- `GREG_SEARCH_SHARDS=0` (or `false` / `off` / `no`) disables shard generation and keeps only `search-index.json`.
+
+For very large documentation sets, you may also need a higher Node.js heap limit during build:
+
+```bash
+NODE_OPTIONS=--max-old-space-size=8192 npm run build
+```
+
+On Windows PowerShell:
+
+```powershell
+$env:NODE_OPTIONS='--max-old-space-size=8192'; npm run build
+```
+
 In production, you will usually place the search server behind a reverse proxy
 so your frontend can keep using `/api/search`.
 
@@ -140,9 +194,9 @@ Results are scored by Fuse.js using weighted fields:
 
 | Field             | Weight |
 | ----------------- | ------ |
-| Page title        | 3×      |
-| Section heading   | 2×      |
-| Section body text | 1×      |
+| Page title        | 3×     |
+| Section heading   | 2×     |
+| Section body text | 1×     |
 
 A fuzzy threshold of `0.4` is used — tighter than the default, so only genuine
 matches surface. `ignoreLocation: true` means the match can appear anywhere in
@@ -177,7 +231,7 @@ search: {
   ai: {
     enabled: true,
     provider: 'ollama', // or 'openai'
-    ollama: { model: 'phi4' },
+    ollama: { model: 'gpt-oss' },
   }
 }
 ```
@@ -185,6 +239,15 @@ search: {
 See the [Getting started guide](/docs/guide/getting-started) for the required Vite plugin
 (`vitePluginAiServer`) and the production AI server setup.
 
+### AI runtime storage
+
+In dev/preview (`vitePluginAiServer`), Greg uses an in-memory vector store
+(`MemoryStore`). Chunks are rebuilt on startup and whenever Markdown files change,
+so indexed AI data is not persisted across process restarts.
+
+For production, prefer the standalone `greg ai-server`, which can use a persistent
+SQLite-backed store (`search.ai.store = 'sqlite'`).
+
 
 ### AI characters (personas)
 
@@ -192,11 +255,11 @@ Greg ships five built-in personas that users can pick in the chat UI:
 
 | ID             | Name         | Icon | Description                        |
 | -------------- | ------------ | ---- | ---------------------------------- |
-| `professional` | Professional | 👔   | Precise, formal, technical answers |
-| `friendly`     | Friendly     | 😊   | Warm, approachable explanations    |
+| `professional` | Professional | 👔    | Precise, formal, technical answers |
+| `friendly`     | Friendly     | 😊    | Warm, approachable explanations    |
 | `pirate`       | Pirate       | 🏴‍☠️   | Arr! Knowledge on the high seas!   |
-| `sensei`       | Sensei       | 🥋   | Patient teacher, step-by-step      |
-| `concise`      | Concise      | ✂️   | Maximum density, minimum words     |
+| `sensei`       | Sensei       | 🥋    | Patient teacher, step-by-step      |
+| `concise`      | Concise      | ✂️    | Maximum density, minimum words     |
 
 #### Limiting which characters are available
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dominikcz/greg",
-  "version": "0.9.40",
+  "version": "0.9.44",
   "type": "module",
   "types": "./types/index.d.ts",
   "bin": {

package/src/lib/MarkdownDocs/AiChat.svelte

@@ -2,6 +2,7 @@
     import { onMount } from "svelte";
     import gregConfig from "virtual:greg-config";
     import { withBase } from "./common";
+    import MarkdownRenderer from "./MarkdownRenderer.svelte";
 
     // ── Types ──────────────────────────────────────────────────────────────────
 
@@ -337,86 +338,33 @@
         return characters.find(c => c.id === id);
     }
 
-    // ── Markdown answer renderer ────────────────────────────────────────────────
-
-    function escHtml(s: string): string {
-        return s
-            .replace(/&/g, '&')
-            .replace(/</g, '&lt;')
-            .replace(/>/g, '&gt;')
-            .replace(/"/g, '&quot;');
-    }
-
-    /** Sanitize a URL from LLM output: allow relative paths and http(s), normalize //. */
-    function sanitizeUrl(url: string): string {
-        const trimmed = url.trim();
-        if (/^https?:\/\//i.test(trimmed)) return trimmed;
-        if (/^\//.test(trimmed)) return trimmed.replace(/\/\/+/g, '/');
-        if (/^#/.test(trimmed)) return trimmed;
-        return '#';
-    }
-
-    /** Apply inline markdown (bold, italic, code) and links to an already-HTML-escaped string. */
-    function processInlineEscaped(escaped: string): string {
-        // Bold **text** or __text__
-        let r = escaped
-            .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
-            .replace(/__(.+?)__/g, '<strong>$1</strong>');
-        // Italic *text* (not ** boundary)
-        r = r.replace(/\*([^*\n]+)\*/g, '<em>$1</em>');
-        // Inline code `code`
-        r = r.replace(/`([^`\n]+)`/g, '<code>$1</code>');
-        return r;
-    }
-
-    /** Process a line of text: handle links first (before escaping) then escape+inline. */
-    function renderLine(line: string): string {
-        let result = '';
-        let pos = 0;
-        // Match markdown links: [text](url)
-        const linkRe = /\[([^\]\n]+)\]\(([^)\n]+)\)/g;
-        let m: RegExpExecArray | null;
-
-        while ((m = linkRe.exec(line)) !== null) {
-            // Process the plain text segment before this link
-            result += processInlineEscaped(escHtml(line.slice(pos, m.index)));
-
-            const linkText = m[1];
-            const url = sanitizeUrl(m[2]);
-            const isExternal = /^https?:\/\//i.test(url);
-            result += `<a href="${escHtml(url)}"${
-                isExternal
-                    ? ' target="_blank" rel="noopener noreferrer"'
-                    : ' data-nav="1"'
-            }>${escHtml(linkText)}</a>`;
-            pos = m.index + m[0].length;
-        }
-        result += processInlineEscaped(escHtml(line.slice(pos)));
-        return result;
-    }
-
-    /**
-     * Convert LLM markdown answer to safe HTML.
-     * Handles: paragraphs, **bold**, *italic*, `code`, [links](url).
-     * Lists and headings are rendered as paragraphs with basic formatting.
-     */
-    function renderAnswer(text: string): string {
-        // Split on blank lines into paragraph blocks
-        const blocks = text.split(/\n{2,}/);
-        return blocks.map(block => {
-            const lines = block.split('\n');
-            const rendered = lines.map(line => renderLine(line)).join('<br>');
-            return `<p>${rendered}</p>`;
-        }).join('');
-    }
-
-    /** Handle clicks on internal navigation links inside `.ai-answer`. */
+    /** Remove or neutralize links pointing to placeholder/invented domains from LLM output. */
+    function sanitizeMarkdownLinks(md: string): string {
+        // Pattern: [text](url) — strip links whose URL is not a real doc path
+        return md.replace(/\[([^\]\n]+)\]\(([^)\n]+)\)/g, (match, text, url) => {
+            const trimmed = url.trim();
+            // Allow relative paths and fragment links
+            if (/^[/#]/.test(trimmed)) return match;
+            // Allow only https links that are NOT placeholder domains
+            if (/^https?:\/\//i.test(trimmed)) {
+                const placeholderDomains = /\/\/(www\.)?(example\.(com|org|net)|placeholder\.com|lorem\.ipsum|test\.com|foo\.bar)/i;
+                if (placeholderDomains.test(trimmed)) return text;
+                return match;
+            }
+            // Anything else (no scheme, not relative) — render as plain text
+            return text;
+        });
+    }
+
+    // ── Markdown answer navigation handler ────────────────────────────────────
+
+    /** Handle clicks on internal links inside the AI answer. */
     function handleAnswerClick(e: MouseEvent) {
-        const anchor = (e.target as HTMLElement).closest<HTMLAnchorElement>('a[data-nav]');
+        const anchor = (e.target as HTMLElement).closest<HTMLAnchorElement>('a');
         if (!anchor) return;
-        e.preventDefault();
         const href = anchor.getAttribute('href') ?? '';
-        if (!href) return;
+        if (!href || /^https?:\/\//i.test(href)) return;
+        e.preventDefault();
         const hashIdx = href.indexOf('#');
         const path = hashIdx >= 0 ? href.slice(0, hashIdx) : href;
         const section = hashIdx >= 0 ? href.slice(hashIdx + 1) : undefined;
@@ -482,14 +430,15 @@
                         {#if msg.role === "user"}
                             <p class="ai-user-text">{msg.content}</p>
                         {:else}
-                            <!-- Render answer with markdown links as clickable elements -->
                             <!-- svelte-ignore a11y_click_events_have_key_events -->
                             <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
                             <div
                                 class="ai-answer"
                                 onclick={handleAnswerClick}
                                 role="article"
-                            >{@html renderAnswer(msg.content)}</div>
+                            >
+                                <MarkdownRenderer markdown={sanitizeMarkdownLinks(msg.content)} />
+                            </div>
 
                             {#if msg.sources && msg.sources.length > 0}
                                 <div class="ai-sources">
@@ -739,6 +688,15 @@
         padding: 0.65rem 0.9rem;
         border-radius: 2px 12px 12px 12px;
 
+        :global(.markdown-body) {
+            background: transparent;
+            font-size: inherit;
+            line-height: inherit;
+            color: inherit;
+            padding: 0;
+            margin: 0;
+        }
+
         :global(p) {
             margin: 0 0 0.45em;
             &:last-child { margin-bottom: 0; }

package/src/lib/MarkdownDocs/BackToTop.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { ArrowUp } from "@lucide/svelte";
+    import ArrowUp from "@lucide/svelte/icons/arrow-up";
 
     type Props = {
         /** The scrollable element to watch and scroll to top. */

package/src/lib/MarkdownDocs/DocsNavigation.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import TreeView from "./TreeView.svelte";
-	import { ChevronRight } from "@lucide/svelte";
+	import ChevronRight from "@lucide/svelte/icons/chevron-right";
 	import { handleSectionClick } from "./navigationUtils";
 
 	import type { TreeViewItem } from "./treeViewTypes";

package/src/lib/MarkdownDocs/DocsSiteHeader.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
-	import { Languages, Sun, Moon } from "@lucide/svelte";
+	import Languages from "@lucide/svelte/icons/languages";
+	import Sun from "@lucide/svelte/icons/sun";
+	import Moon from "@lucide/svelte/icons/moon";
 	import SocialLink from "../components/SocialLink.svelte";
 	import DocsVersionSwitcher from "./DocsVersionSwitcher.svelte";
 	import { withBase } from "./common";
@@ -44,6 +46,8 @@
 		navigate: (path: string) => void;
 		navigateHome?: (path: string) => void;
 		onOpenSearch: () => void;
+		showAiButton?: boolean;
+		onOpenAiPage?: () => void;
 	};
 
 	const EXTERNAL_RE = /^(?:[a-z][a-z\d+\-.]*:|\/\/{2})/i;
@@ -94,6 +98,8 @@
 		navigate,
 		navigateHome = navigate,
 		onOpenSearch,
+		showAiButton = false,
+		onOpenAiPage,
 	}: Props = $props();
 
 	function resolveLogoSrc(
@@ -372,6 +378,13 @@
 				<span class="search-trigger-hint"><kbd>Ctrl</kbd><kbd>K</kbd></span>
 			</button>
 		{/if}
+		{#if showAiButton && onOpenAiPage}
+			<button class="ai-page-btn" onclick={onOpenAiPage} type="button" title="Open AI chat in new tab" aria-label="Open AI chat">
+				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+					<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+				</svg>
+			</button>
+		{/if}
 	</div>
 </header>
 
@@ -697,6 +710,30 @@
 		}
 	}
 
+	.ai-page-btn {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0.38rem;
+		background: none;
+		border: 1px solid var(--greg-border-color);
+		border-radius: 6px;
+		color: var(--greg-menu-section-color);
+		cursor: pointer;
+		transition: border-color 0.15s, color 0.15s;
+		flex-shrink: 0;
+
+		svg {
+			width: 16px;
+			height: 16px;
+		}
+
+		&:hover {
+			border-color: var(--greg-accent);
+			color: var(--greg-accent);
+		}
+	}
+
 	@media (max-width: 900px) {
 		.header-right {
 			max-width: none;

package/src/lib/MarkdownDocs/MarkdownDocs.svelte

@@ -20,12 +20,13 @@
     import { handleCodeGroupClick, handleCodeGroupKeydown } from "./codeGroup";
     import allFrontmatters from "virtual:greg-frontmatter";
     import MarkdownRenderer from "./MarkdownRenderer.svelte";
+    import AiChat from "./AiChat.svelte";
     import LayoutHome from "./layouts/LayoutHome.svelte";
     import BackToTop from "./BackToTop.svelte";
     import Breadcrumb from "./Breadcrumb.svelte";
     import PrevNext from "./PrevNext.svelte";
     import VersionOutdatedNotice from "./VersionOutdatedNotice.svelte";
-    import { EllipsisVertical } from "@lucide/svelte";
+    import EllipsisVertical from "@lucide/svelte/icons/ellipsis-vertical";
     import gregConfig from "virtual:greg-config";
     import {
         type LocaleConfig,
@@ -594,6 +595,7 @@
         Boolean(searchProvider) ||
             (gregConfig as any)?.search?.provider !== "none",
     );
+    const aiEnabled = $derived(!!(gregConfig as any)?.search?.ai?.enabled);
     let searchOpen = $state(false);
 
     $effect(() => {
@@ -727,6 +729,10 @@
         }),
     );
     const currentSrcDir = $derived(localeContext.srcDir);
+
+    /** The SPA path that renders the full-page AI chat, e.g. "/docs/ai". */
+    const aiRoute = $derived(withBase(currentSrcDir).replace(/\/$/, '') + '/ai');
+    const aiPageMode = $derived(aiEnabled && router.active === aiRoute);
     function applyCurrentVersionPrefix(pathname: string): string {
         const normalizedPath = normalizeSrcDir(pathname);
         const currentPath = withoutBase(window.location.pathname);
@@ -1610,6 +1616,32 @@
 </script>
 
 <!-- svelte-ignore a11y_no_noninteractive_element_interactions, a11y_no_static_element_interactions -->
+{#if aiPageMode && aiEnabled}
+    <div class="greg greg-ai-page" data-theme={theme}>
+        <header class="ai-page-header">
+            <button class="ai-page-close" type="button" onclick={() => history.back()} title="Close">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" width="16" height="16">
+                    <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+                </svg>
+            </button>
+            <span class="ai-page-title">{aiTabLabel}</span>
+        </header>
+        <div class="ai-page-body">
+            <AiChat
+                onNavigate={(path, anchor) => { navigateInternalWithAnchor(path, anchor); }}
+                onClose={() => history.back()}
+                localeSrcDir={currentSrcDir}
+                placeholder={aiPlaceholder}
+                loadingText={aiLoadingText}
+                errorText={aiErrorText}
+                startText={aiStartText}
+                sourcesLabel={aiSourcesLabel}
+                clearChatLabel={aiClearChatLabel}
+                sendLabel={aiSendLabel}
+            />
+        </div>
+    </div>
+{:else}
 <div
     class="greg"
     data-theme={theme}
@@ -1636,6 +1668,8 @@
         {darkModeSwitchTitle}
         {searchButtonLabel}
         showSearch={searchEnabled}
+        showAiButton={aiEnabled && !aiPageMode}
+        onOpenAiPage={() => router.navigate(aiRoute)}
         versionOptions={manifestVersionOptions}
         activeVersion={activeDocsVersion}
         {versionMenuLabel}
@@ -1922,8 +1956,60 @@
         <BackToTop target={mainEl} label={returnToTopLabel} />
     {/if}
 </div>
+{/if}
 
 <style lang="scss">
+    /* ── Full-page AI chat ──────────────────────────────────── */
+    .greg-ai-page {
+        display: flex;
+        flex-direction: column;
+        height: 100dvh;
+        overflow: hidden;
+        background: var(--greg-menu-background);
+    }
+
+    .ai-page-header {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0 1rem;
+        height: var(--greg-header-height, 56px);
+        border-bottom: 1px solid var(--greg-border-color);
+        background: var(--greg-header-background);
+        flex-shrink: 0;
+    }
+
+    .ai-page-close {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0.3rem;
+        border: none;
+        background: none;
+        color: var(--greg-menu-section-color);
+        cursor: pointer;
+        border-radius: 4px;
+        transition: color 0.15s, background 0.15s;
+        &:hover { color: var(--greg-color); background: var(--greg-menu-hover-background); }
+    }
+
+    .ai-page-title {
+        font-size: 0.9rem;
+        font-weight: 600;
+        color: var(--greg-color);
+    }
+
+    .ai-page-body {
+        flex: 1;
+        min-height: 0;
+        display: flex;
+        flex-direction: column;
+        max-width: 860px;
+        width: 100%;
+        margin: 0 auto;
+        padding: 0 1rem;
+    }
+
     .skip-link {
         position: absolute;
         left: 0.75rem;