Sync from https://github.com/felladrin/MiniSearch

.dockerignore

@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+

.editorconfig

@@ -0,0 +1,7 @@
+[*]
+charset = utf-8
+insert_final_newline = true
+end_of_line = lf
+indent_style = space
+indent_size = 2
+max_line_length = 80

.env.example

@@ -0,0 +1,33 @@
+# A comma-separated list of access keys. Example: `ACCESS_KEYS="ABC123,JUD71F,HUWE3"`. Leave blank for unrestricted access.
+ACCESS_KEYS=""
+
+# The timeout in hours for access key validation. Set to 0 to require validation on every page load.
+ACCESS_KEY_TIMEOUT_HOURS="24"
+
+# The default model ID for WebLLM with F16 shaders.
+WEBLLM_DEFAULT_F16_MODEL_ID="Qwen3-0.6B-q4f16_1-MLC"
+
+# The default model ID for WebLLM with F32 shaders.
+WEBLLM_DEFAULT_F32_MODEL_ID="Qwen3-0.6B-q4f32_1-MLC"
+
+# The default model ID for Wllama.
+WLLAMA_DEFAULT_MODEL_ID="qwen-3-0.6b"
+
+# The base URL for the internal OpenAI compatible API. Example: `INTERNAL_OPENAI_COMPATIBLE_API_BASE_URL="https://api.openai.com/v1"`. Leave blank to disable internal OpenAI compatible API.
+INTERNAL_OPENAI_COMPATIBLE_API_BASE_URL=""
+
+# The access key for the internal OpenAI compatible API.
+INTERNAL_OPENAI_COMPATIBLE_API_KEY=""
+
+# The model for the internal OpenAI compatible API.
+INTERNAL_OPENAI_COMPATIBLE_API_MODEL=""
+
+# The name of the internal OpenAI compatible API, displayed in the UI.
+INTERNAL_OPENAI_COMPATIBLE_API_NAME="Internal API"
+
+# The type of inference to use by default. The possible values are:
+# "browser" -> In the browser (Private)
+# "openai" -> Remote Server (API)
+# "horde" -> AI Horde (Pre-configured)
+# "internal" -> $INTERNAL_OPENAI_COMPATIBLE_API_NAME
+DEFAULT_INFERENCE_TYPE="browser"

.github/hf-space-config.yml

@@ -0,0 +1,11 @@
+title: MiniSearch
+emoji: 👌🔍
+colorFrom: yellow
+colorTo: yellow
+sdk: docker
+short_description: Minimalist web-searching app with browser-based AI assistant
+pinned: true
+custom_headers:
+  cross-origin-embedder-policy: require-corp
+  cross-origin-opener-policy: same-origin
+  cross-origin-resource-policy: cross-origin

.github/workflows/ai-review.yml

@@ -0,0 +1,138 @@
+name: Review Pull Request with AI
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+    branches: ["main"]
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  ai-review:
+    if: ${{ !contains(github.event.pull_request.labels.*.name, 'skip-ai-review') }}
+    continue-on-error: true
+    runs-on: ubuntu-latest
+    name: AI Review
+    permissions:
+      pull-requests: write
+      contents: read
+    timeout-minutes: 30
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v6
+
+      - name: Create temporary directory
+        run: mkdir -p /tmp/pr_review
+
+      - name: Process PR description
+        id: process_pr
+        run: |
+          PR_BODY_ESCAPED=$(cat << 'EOF'
+          ${{ github.event.pull_request.body }}
+          EOF
+          )
+          PROCESSED_BODY=$(echo "$PR_BODY_ESCAPED" | sed -E 's/\[(.*?)\]\(.*?\)/\1/g')
+          echo "$PROCESSED_BODY" > /tmp/pr_review/processed_body.txt
+
+      - name: Fetch branches and output the diff
+        run: |
+          git fetch origin main:main
+          git fetch origin pull/${{ github.event.pull_request.number }}/head:pr-branch
+          git diff main..pr-branch > /tmp/pr_review/diff.txt
+
+      - name: Prepare review request
+        id: prepare_request
+        run: |
+          PR_TITLE=$(echo "${{ github.event.pull_request.title }}" | sed 's/[()]/\\&/g')
+          DIFF_CONTENT=$(cat /tmp/pr_review/diff.txt)
+          PROCESSED_BODY=$(cat /tmp/pr_review/processed_body.txt)
+
+          jq -n \
+            --arg model "${{ vars.OPENAI_COMPATIBLE_API_MODEL }}" \
+            --arg http_referer "${{ github.event.repository.html_url }}" \
+            --arg title "${{ github.event.repository.name }}" \
+            --arg system "You are an experienced developer reviewing a Pull Request. You focus only on what matters and provide concise, actionable feedback.
+
+          Review Context:
+          Repository Name: \"${{ github.event.repository.name }}\"
+          Repository Description: \"${{ github.event.repository.description }}\"
+          Branch: \"${{ github.event.pull_request.head.ref }}\"
+          PR Title: \"$PR_TITLE\"
+
+          Guidelines:
+          1. Only comment on issues that:
+            - Could cause bugs or security issues
+            - Significantly impact performance
+            - Make the code harder to maintain
+            - Violate critical best practices
+
+          2. For each issue:
+            - Point to the specific line/file
+            - Explain why it's a problem
+            - Suggest a concrete fix
+            
+          3. Praise exceptional solutions briefly, only if truly innovative
+
+          4. Skip commenting on:
+            - Minor style issues
+            - Obvious changes
+            - Working code that could be marginally improved
+            - Things that are just personal preference
+
+          Remember:
+          Less is more. If the code is good and working, just say so, with a short message." \
+            --arg user "This is the description of the pull request:
+          \`\`\`markdown
+          $PROCESSED_BODY
+          \`\`\`
+
+          And here is the diff of the changes, for you to review:
+          \`\`\`diff
+          $DIFF_CONTENT
+          \`\`\`" \
+            '{
+              "model": $model,
+              "messages": [
+                {"role": "system", "content": $system},
+                {"role": "user", "content": $user}
+              ],
+              "temperature": 0.7,
+              "top_p": 0.9
+            }' > /tmp/pr_review/request.json
+      - name: Get AI Review
+        id: ai_review
+        run: |
+          RESPONSE=$(curl -s ${{ vars.OPENAI_COMPATIBLE_API_BASE_URL }}/chat/completions \
+            -H "Content-Type: application/json" \
+            -H "Authorization: Bearer ${{ secrets.OPENAI_COMPATIBLE_API_KEY }}" \
+            -d @/tmp/pr_review/request.json)
+          
+          # Check for errors in the response
+          if echo "$RESPONSE" | jq -e '.object == "error"' > /dev/null; then
+            echo "Error from API:" >&2
+            ERROR_MSG=$(echo "$RESPONSE" | jq -r '.message.detail[0].msg // .message')
+            echo "$ERROR_MSG" >&2
+            exit 1
+          fi
+
+          echo "### Review" > /tmp/pr_review/response.txt
+          echo "" >> /tmp/pr_review/response.txt
+          echo "$RESPONSE" | jq -r '.choices[0].message.content' >> /tmp/pr_review/response.txt
+
+      - name: Find Comment
+        uses: peter-evans/find-comment@v4
+        id: find_comment
+        with:
+          issue-number: ${{ github.event.pull_request.number }}
+          comment-author: "github-actions[bot]"
+          body-includes: "### Review"
+
+      - name: Post or Update PR Review
+        uses: peter-evans/create-or-update-comment@v5
+        with:
+          comment-id: ${{ steps.find_comment.outputs.comment-id }}
+          issue-number: ${{ github.event.pull_request.number }}
+          body-path: /tmp/pr_review/response.txt
+          edit-mode: replace

.github/workflows/ci.yml

@@ -0,0 +1,33 @@
+name: CI
+
+on:
+  push:
+    branches: [main, master]
+  pull_request:
+    branches: [main, master]
+
+jobs:
+  build-test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v6
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: lts/*
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run lint
+        run: npm run lint
+
+      - name: Check formatting
+        run: npm run format
+
+      - name: Run tests
+        run: npm test

.github/workflows/deploy-to-hugging-face.yml

@@ -0,0 +1,18 @@
+name: Deploy to Hugging Face
+
+on:
+  workflow_dispatch:
+
+jobs:
+  sync-to-hf:
+    name: Sync to Hugging Face Spaces
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+      - uses: JacobLinCool/huggingface-sync@v1
+        with:
+          github: ${{ secrets.GITHUB_TOKEN }}
+          user: ${{ vars.HF_SPACE_OWNER }}
+          space: ${{ vars.HF_SPACE_NAME }}
+          token: ${{ secrets.HF_TOKEN }}
+          configuration: ".github/hf-space-config.yml"

.github/workflows/on-pull-request-to-main.yml

@@ -0,0 +1,9 @@
+name: On Pull Request To Main
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+    branches: ["main"]
+jobs:
+  test-lint-ping:
+    if: ${{ !contains(github.event.pull_request.labels.*.name, 'skip-test-lint-ping') }}
+    uses: ./.github/workflows/reusable-test-lint-ping.yml

.github/workflows/on-push-to-main.yml

@@ -0,0 +1,7 @@
+name: On Push To Main
+on:
+  push:
+    branches: ["main"]
+jobs:
+  test-lint-ping:
+    uses: ./.github/workflows/reusable-test-lint-ping.yml

.github/workflows/publish-docker-image.yml

@@ -0,0 +1,39 @@
+name: Publish Docker Image
+
+on:
+  workflow_dispatch:
+
+jobs:
+  build-and-push-image:
+    name: Publish Docker Image to GitHub Packages
+    runs-on: ubuntu-latest
+    env:
+      REGISTRY: ghcr.io
+      IMAGE_NAME: ${{ github.repository }}
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v6
+      - name: Log in to the Container registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+      - name: Build and push Docker Image
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          platforms: linux/amd64,linux/arm64

.github/workflows/reusable-test-lint-ping.yml

@@ -0,0 +1,25 @@
+on:
+  workflow_call:
+jobs:
+  check-code-quality:
+    name: Check Code Quality
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+      - uses: actions/setup-node@v6
+        with:
+          node-version: "lts/*"
+          cache: "npm"
+      - run: npm ci --ignore-scripts
+      - run: npm run lint
+  check-docker-container:
+    needs: [check-code-quality]
+    name: Check Docker Container
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+      - run: docker compose -f docker-compose.production.yml up -d
+      - name: Check if main page is available
+        run: until curl -s -o /dev/null -w "%{http_code}" localhost:7860 | grep 200; do sleep 1; done
+        timeout-minutes: 1
+      - run: docker compose -f docker-compose.production.yml down

.gitignore

@@ -0,0 +1,9 @@
+node_modules
+.DS_Store
+/client/dist
+/server/models
+.vscode
+/vite-build-stats.html
+.env
+/coverage
+.playwright-cli

.husky/pre-commit

@@ -0,0 +1 @@
+npm install --no-save @biomejs/biome && npx @biomejs/biome check --write --staged --no-errors-on-unmatched

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps = true

Dockerfile

@@ -0,0 +1,96 @@
+FROM node:lts AS llama-builder
+
+ARG LLAMA_CPP_RELEASE_TAG="b6604"
+
+RUN apt-get update && apt-get install -y \
+  build-essential \
+  cmake \
+  ccache \
+  git \
+  curl
+
+RUN cd /tmp && \
+  git clone https://github.com/ggerganov/llama.cpp.git && \
+  cd llama.cpp && \
+  git checkout $LLAMA_CPP_RELEASE_TAG && \
+  cmake -B build -DGGML_NATIVE=OFF -DLLAMA_CURL=OFF && \
+  cmake --build build --config Release -j --target llama-server && \
+  mkdir -p /usr/local/lib/llama && \
+  find build -type f \( -name "libllama.so" -o -name "libmtmd.so" -o -name "libggml.so" -o -name "libggml-base.so" -o -name "libggml-cpu.so" \) -exec cp {} /usr/local/lib/llama/ \;
+
+FROM node:lts
+
+ENV PORT=7860
+EXPOSE $PORT
+
+ARG USERNAME=node
+ARG HOME_DIR=/home/${USERNAME}
+ARG APP_DIR=${HOME_DIR}/app
+
+RUN apt-get update && \
+  apt-get install -y --no-install-recommends \
+  python3 \
+  python3-venv && \
+  apt-get clean && \
+  rm -rf /var/lib/apt/lists/*
+
+RUN mkdir -p /usr/local/searxng /etc/searxng && \
+  chown -R ${USERNAME}:${USERNAME} /usr/local/searxng /etc/searxng && \
+  chmod 755 /etc/searxng
+
+WORKDIR /usr/local/searxng
+RUN python3 -m venv searxng-venv && \
+  chown -R ${USERNAME}:${USERNAME} /usr/local/searxng/searxng-venv && \
+  /usr/local/searxng/searxng-venv/bin/pip install --upgrade pip && \
+  /usr/local/searxng/searxng-venv/bin/pip install wheel setuptools pyyaml lxml
+
+RUN git clone https://github.com/searxng/searxng.git /usr/local/searxng/searxng-src && \
+  chown -R ${USERNAME}:${USERNAME} /usr/local/searxng/searxng-src
+
+ARG SEARXNG_SETTINGS_PATH="/etc/searxng/settings.yml"
+
+WORKDIR /usr/local/searxng/searxng-src
+RUN cp searx/settings.yml $SEARXNG_SETTINGS_PATH && \
+  chown ${USERNAME}:${USERNAME} $SEARXNG_SETTINGS_PATH && \
+  chmod 644 $SEARXNG_SETTINGS_PATH && \
+  sed -i 's/ultrasecretkey/'$(openssl rand -hex 32)'/g' $SEARXNG_SETTINGS_PATH && \
+  sed -i 's/- html/- json/' $SEARXNG_SETTINGS_PATH && \
+  /usr/local/searxng/searxng-venv/bin/pip install -r requirements.txt && \
+  /usr/local/searxng/searxng-venv/bin/pip install --no-build-isolation -e .
+
+COPY --from=llama-builder /tmp/llama.cpp/build/bin/llama-server /usr/local/bin/
+COPY --from=llama-builder /usr/local/lib/llama/* /usr/local/lib/
+RUN ldconfig /usr/local/lib
+
+USER ${USERNAME}
+
+WORKDIR ${APP_DIR}
+
+ARG ACCESS_KEYS
+ARG ACCESS_KEY_TIMEOUT_HOURS
+ARG WEBLLM_DEFAULT_F16_MODEL_ID
+ARG WEBLLM_DEFAULT_F32_MODEL_ID
+ARG WLLAMA_DEFAULT_MODEL_ID
+ARG INTERNAL_OPENAI_COMPATIBLE_API_BASE_URL
+ARG INTERNAL_OPENAI_COMPATIBLE_API_KEY
+ARG INTERNAL_OPENAI_COMPATIBLE_API_MODEL
+ARG INTERNAL_OPENAI_COMPATIBLE_API_NAME
+ARG DEFAULT_INFERENCE_TYPE
+ARG HOST
+ARG HMR_PORT
+ARG ALLOWED_HOSTS
+
+COPY --chown=${USERNAME}:${USERNAME} ./package.json ./package-lock.json ./.npmrc ./
+
+RUN npm ci
+
+COPY --chown=${USERNAME}:${USERNAME} . .
+
+RUN git config --global --add safe.directory ${APP_DIR} && \
+  npm run build
+
+HEALTHCHECK --interval=5m CMD curl -f http://localhost:7860/status || exit 1
+
+ENTRYPOINT [ "/bin/sh", "-c" ]
+
+CMD ["(cd /usr/local/searxng/searxng-src && /usr/local/searxng/searxng-venv/bin/python -m searx.webapp > /dev/null 2>&1) & npm start -- --host"]

README.md

@@ -0,0 +1,127 @@
+---
+title: MiniSearch
+emoji: 👌🔍
+colorFrom: yellow
+colorTo: yellow
+sdk: docker
+short_description: Minimalist web-searching app with browser-based AI assistant
+pinned: true
+custom_headers:
+  cross-origin-embedder-policy: require-corp
+  cross-origin-opener-policy: same-origin
+  cross-origin-resource-policy: cross-origin
+---
+
+# MiniSearch
+
+A minimalist web-searching app with an AI assistant that runs directly from your browser.
+
+Live demo: https://felladrin-minisearch.hf.space
+
+## Screenshot
+
+![MiniSearch Screenshot](https://github.com/user-attachments/assets/f8d72a8e-a725-42e9-9358-e6ebade2acb2)
+
+## Features
+
+- **Privacy-focused**: [No tracking, no ads, no data collection](https://docs.searxng.org/own-instance.html#how-does-searxng-protect-privacy)
+- **Easy to use**: Minimalist yet intuitive interface for all users
+- **Cross-platform**: Models run inside the browser, both on desktop and mobile
+- **Integrated**: Search from the browser address bar by setting it as the default search engine
+- **Efficient**: Models are loaded and cached only when needed
+- **Customizable**: Tweakable settings for search results and text generation
+- **Open-source**: [The code is available for inspection and contribution at GitHub](https://github.com/felladrin/MiniSearch)
+
+## Prerequisites
+
+- [Docker](https://docs.docker.com/get-docker/)
+
+## Getting started
+
+Here are the easiest ways to get started with MiniSearch. Pick the one that suits you best.
+
+**Option 1** - Use [MiniSearch's Docker Image](https://github.com/felladrin/MiniSearch/pkgs/container/minisearch) by running in your terminal:
+
+```bash
+docker run -p 7860:7860 ghcr.io/felladrin/minisearch:main
+```
+
+**Option 2** - Add MiniSearch's Docker Image to your existing Docker Compose file:
+
+```yaml
+services:
+  minisearch:
+    image: ghcr.io/felladrin/minisearch:main
+    ports:
+      - "7860:7860"
+```
+
+**Option 3** - Build from source by [downloading the repository files](https://github.com/felladrin/MiniSearch/archive/refs/heads/main.zip) and running:
+
+```bash
+docker compose -f docker-compose.production.yml up --build
+```
+
+Once the container is running, open http://localhost:7860 in your browser and start searching!
+
+## Frequently asked questions [![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/felladrin/MiniSearch)
+
+<details>
+  <summary>How do I search via the browser's address bar?</summary>
+  <p>
+    You can set MiniSearch as your browser's address-bar search engine using the pattern <code>http://localhost:7860/?q=%s</code>, in which your search term replaces <code>%s</code>.
+  </p>
+</details>
+
+<details>
+  <summary>How do I search via Raycast?</summary>
+  <p>
+    You can add <a href="https://ray.so/quicklinks/shared?quicklinks=%7B%22link%22:%22https:%5C/%5C/felladrin-minisearch.hf.space%5C/?q%3D%7BQuery%7D%22,%22name%22:%22MiniSearch%22%7D" target="_blank">this Quicklink</a> to Raycast, so typing your query will open MiniSearch with the search results. You can also edit it to point to your own domain.
+  </p>
+  <img width="744" alt="image" src="https://github.com/user-attachments/assets/521dca22-c77b-42de-8cc8-9feb06f9a97e">
+</details>
+
+<details>
+  <summary>Can I use custom models via OpenAI-Compatible API?</summary>
+  <p>
+    Yes! For this, open the Menu and change the "AI Processing Location" to <code>Remote server (API)</code>. Then configure the Base URL, and optionally set an API Key and a Model to use.
+  </p>
+</details>
+
+<details>
+  <summary>How do I restrict the access to my MiniSearch instance via password?</summary>
+  <p>
+    Create a <code>.env</code> file and set a value for <code>ACCESS_KEYS</code>. Then reset the MiniSearch docker container.
+  </p>
+  <p>
+    For example, if you to set the password to <code>PepperoniPizza</code>, then this is what you should add to your <code>.env</code>:<br/>
+    <code>ACCESS_KEYS="PepperoniPizza"</code>
+  </p>
+  <p>
+    You can find more examples in the <code>.env.example</code> file.
+  </p>
+</details>
+
+<details>
+  <summary>I want to serve MiniSearch to other users, allowing them to use my own OpenAI-Compatible API key, but without revealing it to them. Is it possible?</summary>
+  <p>Yes! In MiniSearch, we call this text-generation feature "Internal OpenAI-Compatible API". To use this it:</p>
+  <ol>
+    <li>Set up your OpenAI-Compatible API endpoint by configuring the following environment variables in your <code>.env</code> file:
+      <ul>
+        <li><code>INTERNAL_OPENAI_COMPATIBLE_API_BASE_URL</code>: The base URL for your API</li>
+        <li><code>INTERNAL_OPENAI_COMPATIBLE_API_KEY</code>: Your API access key</li>
+        <li><code>INTERNAL_OPENAI_COMPATIBLE_API_MODEL</code>: The model to use</li>
+        <li><code>INTERNAL_OPENAI_COMPATIBLE_API_NAME</code>: The name to display in the UI</li>
+      </ul>
+    </li>
+    <li>Restart MiniSearch server.</li>
+    <li>In the MiniSearch menu, select the new option (named as per your <code>INTERNAL_OPENAI_COMPATIBLE_API_NAME</code> setting) from the "AI Processing Location" dropdown.</li>
+  </ol>
+</details>
+
+<details>
+  <summary>How can I contribute to the development of this tool?</summary>
+  <p>Fork this repository and clone it. Then, start the development server by running the following command:</p>
+  <p><code>docker compose up</code></p>
+  <p>Make your changes, push them to your fork, and open a pull request! All contributions are welcome!</p>
+</details>

agents.md

@@ -0,0 +1,167 @@
+# MiniSearch Agent Guidelines
+
+This is your navigation hub. Start here, follow the links, and return when you need orientation.
+
+## Before You Start
+
+**New to this codebase?** Read in this order:
+1. `docs/quick-start.md` - Get it running
+2. `docs/overview.md` - Understand the system
+3. `docs/project-structure.md` - Navigate the code
+
+**Making changes?** Check:
+- `docs/coding-conventions.md` - Code style
+- `docs/development-commands.md` - Available commands
+- `docs/pull-requests.md` - How to submit
+
+## Repository Map
+
+### Getting Started
+- **`docs/quick-start.md`** - Installation, first run, verification
+- **`docs/overview.md`** - System architecture and data flow
+- **`docs/project-structure.md`** - Directory layout and component organization
+
+### Configuration & Setup
+- **`docs/configuration.md`** - Environment variables and settings reference
+- **`docs/security.md`** - Access control, privacy, and security model
+
+### Core Functionality
+- **`docs/ai-integration.md`** - AI inference types (WebLLM, Wllama, OpenAI, AI Horde, Internal)
+- **`docs/ui-components.md`** - Component architecture and PubSub patterns
+- **`docs/search-history.md`** - History database schema and management
+- **`docs/conversation-memory.md`** - Token budgeting and rolling summaries
+
+### Development
+- **`docs/development-commands.md`** - Docker, npm, and testing commands
+- **`docs/coding-conventions.md`** - Style guide and patterns
+- **`docs/pull-requests.md`** - PR process and merge philosophy
+- **`docs/core-technologies.md`** - Technology stack and dependencies
+- **`docs/design.md`** - UI/UX design principles
+
+## Agent Decision Tree
+
+```
+Need to:
+├── Add a feature?
+│   ├── UI component → docs/ui-components.md
+│   ├── AI integration → docs/ai-integration.md
+│   ├── Search functionality → client/modules/search.ts
+│   └── Settings option → docs/configuration.md
+├── Fix a bug?
+│   ├── UI issue → Check component + PubSub channels
+│   ├── AI not working → docs/ai-integration.md + browser console
+│   ├── Search failing → Check SearXNG + server hooks
+│   └── Build error → docs/development-commands.md
+├── Configure deployment?
+│   ├── Environment variables → docs/configuration.md
+│   ├── Access control → docs/security.md
+│   └── Docker setup → docs/overview.md
+└── Understand data flow?
+    ├── Search flow → client/modules/search.ts
+    ├── AI generation → client/modules/textGeneration.ts
+    ├── State management → docs/ui-components.md
+    └── History/Chat → docs/search-history.md + docs/conversation-memory.md
+```
+
+## Key Files Reference
+
+### Entry Points
+- `client/main.tsx` - React app initialization
+- `vite.config.ts` - Vite dev server with hooks
+- `Dockerfile` - Multi-stage container build
+
+### Core Modules (Business Logic)
+- `client/modules/search.ts` - Search orchestration and caching
+- `client/modules/textGeneration.ts` - AI response flow
+- `client/modules/pubSub.ts` - All PubSub channels
+- `client/modules/settings.ts` - Settings management
+- `client/modules/history.ts` - Search history database
+
+### Server-Side
+- `server/searchEndpointServerHook.ts` - `/search` endpoints
+- `server/internalApiEndpointServerHook.ts` - `/inference` proxy
+- `server/webSearchService.ts` - SearXNG integration
+- `server/rerankerService.ts` - Local result reranking
+
+### Components (Key)
+- `client/components/App/` - Application shell
+- `client/components/Search/Form/` - Search input
+- `client/components/Search/Results/` - Results display
+- `client/components/AiResponse/` - AI response + chat
+- `client/components/Pages/Main/Menu/` - Settings drawers
+
+## Common Tasks Quick Reference
+
+### Add a new AI model
+1. Add to `client/modules/wllama.ts` or WebLLM registry
+2. Update `docs/ai-integration.md`
+3. Update `docs/configuration.md` defaults
+
+### Add a new setting
+1. Add to `client/modules/settings.ts` default object
+2. Add UI in `client/components/Pages/Main/Menu/`
+3. Update `docs/configuration.md` settings table
+
+### Modify search behavior
+1. Edit `client/modules/search.ts`
+2. Update `server/webSearchService.ts` if server-side changes needed
+3. Check `server/rerankerService.ts` if reranking affected
+
+### Fix UI state issues
+1. Check PubSub channels in `client/modules/pubSub.ts`
+2. Verify component subscriptions in `docs/ui-components.md`
+3. Ensure proper state updates in business logic modules
+
+### Analyze test coverage
+1. Run `npm run test:coverage` to generate reports
+2. Check `coverage/coverage-summary.json` for quick metrics
+3. See `docs/development-commands.md` for full coverage analysis guide
+
+## Quality Gates
+
+Before any change:
+```bash
+docker compose exec development-server npm run lint
+```
+
+This runs:
+- Biome (formatting/linting)
+- TypeScript (type checking)
+- ts-prune (dead code detection)
+- jscpd (copy-paste detection)
+- dpdm (circular dependency detection)
+- Custom architectural linter
+
+## Agent-First Principles
+
+**Repository as System of Record:**
+- All knowledge lives in versioned docs/ structure
+- This file is your entry point - start here
+- Follow links, don't assume - verify in code
+
+**Context Efficiency:**
+- Use this map to navigate quickly
+- Return to this file when context drifts
+- Follow the decision tree for common tasks
+
+**Architecture & Boundaries:**
+- Respect PubSub boundaries - don't cross concerns
+- Client vs server - keep them separate
+- Feature-based organization - one folder per feature
+
+**Documentation Maintenance:**
+- Update these docs when you learn something new
+- Add cross-references when linking concepts
+- Keep examples current with actual code
+
+## Technology Stack
+
+React + TypeScript + Mantine UI v8, with privacy-first architecture.
+See `docs/core-technologies.md` for complete dependency list and selection criteria.
+
+## Need Help?
+
+1. Check relevant doc in `docs/`
+2. Read the module code in `client/modules/` or `server/`
+3. Look at similar existing implementations
+4. Run `npm run lint` to validate changes

biome.json

@@ -0,0 +1,34 @@
+{
+  "$schema": "https://biomejs.dev/schemas/latest/schema.json",
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "files": {
+    "ignoreUnknown": false
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space"
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "double"
+    }
+  },
+  "assist": {
+    "enabled": true,
+    "actions": {
+      "source": {
+        "organizeImports": "on"
+      }
+    }
+  }
+}

client/components/AiResponse/AiModelDownloadAllowanceContent.tsx

@@ -0,0 +1,62 @@
+import { Alert, Button, Group, Text } from "@mantine/core";
+import { IconCheck, IconInfoCircle, IconX } from "@tabler/icons-react";
+import { usePubSub } from "create-pubsub/react";
+import { useState } from "react";
+import { addLogEntry } from "@/modules/logEntries";
+import { settingsPubSub } from "@/modules/pubSub";
+
+export default function AiModelDownloadAllowanceContent() {
+  const [settings, setSettings] = usePubSub(settingsPubSub);
+  const [hasDeniedDownload, setDeniedDownload] = useState(false);
+
+  const handleAccept = () => {
+    setSettings({
+      ...settings,
+      allowAiModelDownload: true,
+    });
+    addLogEntry("User allowed the AI model download");
+  };
+
+  const handleDecline = () => {
+    setDeniedDownload(true);
+    addLogEntry("User denied the AI model download");
+  };
+
+  return hasDeniedDownload ? null : (
+    <Alert
+      variant="light"
+      color="blue"
+      title="Allow AI model download?"
+      icon={<IconInfoCircle />}
+    >
+      <Text size="sm" mb="md">
+        To obtain AI responses, a language model needs to be downloaded to your
+        browser. Enabling this option lets the app store it and load it
+        instantly on subsequent uses.
+      </Text>
+      <Text size="sm" mb="md">
+        Please note that the download size ranges from 100 MB to 4 GB, depending
+        on the model you select in the Menu, so it's best to avoid using mobile
+        data for this.
+      </Text>
+      <Group justify="flex-end" mt="md">
+        <Button
+          variant="subtle"
+          color="gray"
+          leftSection={<IconX size="1rem" />}
+          onClick={handleDecline}
+          size="xs"
+        >
+          Not now
+        </Button>
+        <Button
+          leftSection={<IconCheck size="1rem" />}
+          onClick={handleAccept}
+          size="xs"
+        >
+          Allow download
+        </Button>
+      </Group>
+    </Alert>
+  );
+}

client/components/AiResponse/AiResponseContent.tsx

@@ -0,0 +1,219 @@
+import {
+  ActionIcon,
+  Alert,
+  Badge,
+  Box,
+  Card,
+  Group,
+  ScrollArea,
+  Text,
+  Tooltip,
+} from "@mantine/core";
+import {
+  IconArrowsMaximize,
+  IconArrowsMinimize,
+  IconHandStop,
+  IconInfoCircle,
+  IconRefresh,
+  IconVolume2,
+} from "@tabler/icons-react";
+import type { PublishFunction } from "create-pubsub";
+import { usePubSub } from "create-pubsub/react";
+import { type ReactNode, useMemo, useState } from "react";
+import { addLogEntry } from "@/modules/logEntries";
+import { settingsPubSub } from "@/modules/pubSub";
+import { searchAndRespond } from "@/modules/textGeneration";
+import CopyIconButton from "./CopyIconButton";
+import FormattedMarkdown from "./FormattedMarkdown";
+
+export default function AiResponseContent({
+  textGenerationState,
+  response,
+  setTextGenerationState,
+}: {
+  textGenerationState: string;
+  response: string;
+  setTextGenerationState: PublishFunction<
+    | "failed"
+    | "awaitingSearchResults"
+    | "preparingToGenerate"
+    | "idle"
+    | "loadingModel"
+    | "generating"
+    | "interrupted"
+    | "completed"
+  >;
+}) {
+  const [settings, setSettings] = usePubSub(settingsPubSub);
+  const [isSpeaking, setIsSpeaking] = useState(false);
+
+  const ConditionalScrollArea = useMemo(
+    () =>
+      ({ children }: { children: ReactNode }) => {
+        return settings.enableAiResponseScrolling ? (
+          <ScrollArea.Autosize
+            mah={300}
+            type="auto"
+            scrollbars="y"
+            offsetScrollbars
+          >
+            {children}
+          </ScrollArea.Autosize>
+        ) : (
+          <Box>{children}</Box>
+        );
+      },
+    [settings.enableAiResponseScrolling],
+  );
+
+  function speakResponse(text: string) {
+    if (isSpeaking) {
+      self.speechSynthesis.cancel();
+      setIsSpeaking(false);
+      return;
+    }
+
+    const prepareTextForSpeech = (textToClean: string) => {
+      const withoutReasoning = textToClean.replace(
+        new RegExp(
+          `${settings.reasoningStartMarker}[\\s\\S]*?${settings.reasoningEndMarker}`,
+          "g",
+        ),
+        "",
+      );
+      const withoutLinks = withoutReasoning.replace(
+        /\[([^\]]+)\]\([^)]+\)/g,
+        "($1)",
+      );
+      const withoutMarkdown = withoutLinks.replace(/[#*`_~[\]]/g, "");
+      return withoutMarkdown.trim();
+    };
+
+    const utterance = new SpeechSynthesisUtterance(prepareTextForSpeech(text));
+
+    const voices = self.speechSynthesis.getVoices();
+
+    if (voices.length > 0 && settings.selectedVoiceId) {
+      const voice = voices.find(
+        (voice) => voice.voiceURI === settings.selectedVoiceId,
+      );
+
+      if (voice) {
+        utterance.voice = voice;
+        utterance.lang = voice.lang;
+      }
+    }
+
+    utterance.onerror = () => {
+      addLogEntry("Failed to speak response");
+      setIsSpeaking(false);
+    };
+
+    utterance.onend = () => setIsSpeaking(false);
+
+    setIsSpeaking(true);
+    self.speechSynthesis.speak(utterance);
+  }
+
+  return (
+    <Card withBorder shadow="sm" radius="md">
+      <Card.Section withBorder inheritPadding py="xs">
+        <Group justify="space-between">
+          <Group gap="xs" align="center">
+            <Text fw={500}>
+              {textGenerationState === "generating"
+                ? "Generating AI Response..."
+                : "AI Response"}
+            </Text>
+            {textGenerationState === "interrupted" && (
+              <Badge variant="light" color="yellow" size="xs">
+                Interrupted
+              </Badge>
+            )}
+          </Group>
+          <Group gap="xs" align="center">
+            {textGenerationState === "generating" ? (
+              <Tooltip label="Interrupt generation">
+                <ActionIcon
+                  onClick={() => setTextGenerationState("interrupted")}
+                  variant="subtle"
+                  color="gray"
+                >
+                  <IconHandStop size={16} />
+                </ActionIcon>
+              </Tooltip>
+            ) : (
+              <Tooltip label="Regenerate response">
+                <ActionIcon
+                  onClick={() => searchAndRespond()}
+                  variant="subtle"
+                  color="gray"
+                >
+                  <IconRefresh size={16} />
+                </ActionIcon>
+              </Tooltip>
+            )}
+            <Tooltip
+              label={isSpeaking ? "Stop speaking" : "Listen to response"}
+            >
+              <ActionIcon
+                onClick={() => speakResponse(response)}
+                variant="subtle"
+                color={isSpeaking ? "blue" : "gray"}
+              >
+                <IconVolume2 size={16} />
+              </ActionIcon>
+            </Tooltip>
+            {settings.enableAiResponseScrolling ? (
+              <Tooltip label="Show full response without scroll bar">
+                <ActionIcon
+                  onClick={() => {
+                    setSettings({
+                      ...settings,
+                      enableAiResponseScrolling: false,
+                    });
+                  }}
+                  variant="subtle"
+                  color="gray"
+                >
+                  <IconArrowsMaximize size={16} />
+                </ActionIcon>
+              </Tooltip>
+            ) : (
+              <Tooltip label="Enable scroll bar">
+                <ActionIcon
+                  onClick={() => {
+                    setSettings({
+                      ...settings,
+                      enableAiResponseScrolling: true,
+                    });
+                  }}
+                  variant="subtle"
+                  color="gray"
+                >
+                  <IconArrowsMinimize size={16} />
+                </ActionIcon>
+              </Tooltip>
+            )}
+            <CopyIconButton value={response} tooltipLabel="Copy response" />
+          </Group>
+        </Group>
+      </Card.Section>
+      <Card.Section withBorder>
+        <ConditionalScrollArea>
+          <FormattedMarkdown>{response}</FormattedMarkdown>
+        </ConditionalScrollArea>
+        {textGenerationState === "failed" && (
+          <Alert
+            variant="light"
+            color="yellow"
+            title="Failed to generate response"
+            icon={<IconInfoCircle />}
+          >
+            Could not generate response. Please try refreshing the page.
+          </Alert>
+        )}
+      </Card.Section>
+    </Card>
+  );
+}

client/components/AiResponse/AiResponseSection.tsx

@@ -0,0 +1,101 @@
+import { CodeHighlightAdapterProvider } from "@mantine/code-highlight";
+import { usePubSub } from "create-pubsub/react";
+import { useMemo } from "react";
+import {
+  chatMessagesPubSub,
+  isRestoringFromHistoryPubSub,
+  modelLoadingProgressPubSub,
+  modelSizeInMegabytesPubSub,
+  queryPubSub,
+  responsePubSub,
+  settingsPubSub,
+  textGenerationStatePubSub,
+} from "@/modules/pubSub";
+import { shikiAdapter } from "@/modules/shiki";
+import "@mantine/code-highlight/styles.css";
+import AiModelDownloadAllowanceContent from "./AiModelDownloadAllowanceContent";
+import AiResponseContent from "./AiResponseContent";
+import ChatInterface from "./ChatInterface";
+import LoadingModelContent from "./LoadingModelContent";
+import PreparingContent from "./PreparingContent";
+
+export default function AiResponseSection() {
+  const [query] = usePubSub(queryPubSub);
+  const [response] = usePubSub(responsePubSub);
+  const [textGenerationState, setTextGenerationState] = usePubSub(
+    textGenerationStatePubSub,
+  );
+  const [modelLoadingProgress] = usePubSub(modelLoadingProgressPubSub);
+  const [settings] = usePubSub(settingsPubSub);
+  const [modelSizeInMegabytes] = usePubSub(modelSizeInMegabytesPubSub);
+  const [chatMessages] = usePubSub(chatMessagesPubSub);
+  const [isRestoringFromHistory] = usePubSub(isRestoringFromHistoryPubSub);
+
+  return useMemo(() => {
+    if (!settings.enableAiResponse || textGenerationState === "idle") {
+      return null;
+    }
+
+    const generatingStates = [
+      "generating",
+      "interrupted",
+      "completed",
+      "failed",
+    ];
+    if (generatingStates.includes(textGenerationState)) {
+      return (
+        <CodeHighlightAdapterProvider adapter={shikiAdapter}>
+          <AiResponseContent
+            textGenerationState={textGenerationState}
+            response={response}
+            setTextGenerationState={setTextGenerationState}
+          />
+
+          {textGenerationState === "completed" && (
+            <ChatInterface
+              initialQuery={query}
+              initialResponse={response}
+              initialMessages={
+                chatMessages.length > 0 ? chatMessages : undefined
+              }
+              suppressInitialFollowUp={isRestoringFromHistory}
+            />
+          )}
+        </CodeHighlightAdapterProvider>
+      );
+    }
+
+    if (textGenerationState === "loadingModel") {
+      return (
+        <LoadingModelContent
+          modelLoadingProgress={modelLoadingProgress}
+          modelSizeInMegabytes={modelSizeInMegabytes}
+        />
+      );
+    }
+
+    if (textGenerationState === "preparingToGenerate") {
+      return <PreparingContent textGenerationState={textGenerationState} />;
+    }
+
+    if (textGenerationState === "awaitingSearchResults") {
+      return <PreparingContent textGenerationState={textGenerationState} />;
+    }
+
+    if (textGenerationState === "awaitingModelDownloadAllowance") {
+      return <AiModelDownloadAllowanceContent />;
+    }
+
+    return null;
+  }, [
+    settings.enableAiResponse,
+    textGenerationState,
+    response,
+    query,
+    chatMessages,
+    modelLoadingProgress,
+    modelSizeInMegabytes,
+    setTextGenerationState,
+    isRestoringFromHistory,
+  ]);
+}

client/components/AiResponse/ChatHeader.tsx

@@ -0,0 +1,33 @@
+import { Group, Text } from "@mantine/core";
+import type { ChatMessage } from "@/modules/types";
+import CopyIconButton from "./CopyIconButton";
+
+interface ChatHeaderProps {
+  messages: ChatMessage[];
+}
+
+function ChatHeader({ messages }: ChatHeaderProps) {
+  const getChatContent = () => {
+    return messages
+      .slice(2)
+      .map(
+        (msg, index) =>
+          `${index + 1}. ${msg.role?.toUpperCase()}\n\n${msg.content}`,
+      )
+      .join("\n\n");
+  };
+
+  return (
+    <Group justify="space-between">
+      <Text fw={500}>Follow-up questions</Text>
+      {messages.length > 2 && (
+        <CopyIconButton
+          value={getChatContent()}
+          tooltipLabel="Copy conversation"
+        />
+      )}
+    </Group>
+  );
+}
+
+export default ChatHeader;

client/components/AiResponse/ChatInputArea.tsx

@@ -0,0 +1,106 @@
+import { Button, Group, Textarea } from "@mantine/core";
+import { IconSend } from "@tabler/icons-react";
+import { usePubSub } from "create-pubsub/react";
+import {
+  chatGenerationStatePubSub,
+  chatInputPubSub,
+  followUpQuestionPubSub,
+  isRestoringFromHistoryPubSub,
+  suppressNextFollowUpPubSub,
+} from "@/modules/pubSub";
+
+interface ChatInputAreaProps {
+  onKeyDown: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+  handleSend: (textToSend?: string) => void;
+}
+
+function ChatInputArea({ onKeyDown, handleSend }: ChatInputAreaProps) {
+  const [input, setInput] = usePubSub(chatInputPubSub);
+  const [generationState] = usePubSub(chatGenerationStatePubSub);
+  const [followUpQuestion] = usePubSub(followUpQuestionPubSub);
+  const [isRestoringFromHistory] = usePubSub(isRestoringFromHistoryPubSub);
+  const [suppressNextFollowUp] = usePubSub(suppressNextFollowUpPubSub);
+
+  const isGenerating =
+    generationState.isGeneratingResponse &&
+    !generationState.isGeneratingFollowUpQuestion;
+
+  const defaultPlaceholder = "Anything else you would like to know?";
+  const placeholder =
+    isRestoringFromHistory || suppressNextFollowUp
+      ? defaultPlaceholder
+      : followUpQuestion || defaultPlaceholder;
+
+  const onChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setInput(event.target.value);
+  };
+  const handleKeyDownWithPlaceholder = (
+    event: React.KeyboardEvent<HTMLTextAreaElement>,
+  ) => {
+    if (
+      input.trim() === "" &&
+      followUpQuestion &&
+      !isRestoringFromHistory &&
+      !suppressNextFollowUp
+    ) {
+      if (event.key === "Enter" && !event.shiftKey) {
+        event.preventDefault();
+        handleSend(followUpQuestion);
+        return;
+      }
+    }
+
+    onKeyDown(event);
+  };
+
+  const handleSendWithPlaceholder = () => {
+    if (
+      input.trim() === "" &&
+      followUpQuestion &&
+      !isRestoringFromHistory &&
+      !suppressNextFollowUp
+    ) {
+      handleSend(followUpQuestion);
+    } else {
+      handleSend();
+    }
+  };
+
+  return (
+    <Group align="flex-end" style={{ position: "relative" }}>
+      <Textarea
+        size="sm"
+        aria-label="Chat input"
+        placeholder={placeholder}
+        value={input}
+        onChange={onChange}
+        onKeyDown={handleKeyDownWithPlaceholder}
+        autosize
+        minRows={1}
+        maxRows={8}
+        style={{ flexGrow: 1, paddingRight: "50px" }}
+        disabled={isGenerating}
+      />
+      <Button
+        aria-label="Send message"
+        size="sm"
+        variant="default"
+        onClick={handleSendWithPlaceholder}
+        loading={isGenerating}
+        style={{
+          height: "100%",
+          position: "absolute",
+          right: 0,
+          top: 0,
+          bottom: 0,
+          borderTopLeftRadius: 0,
+          borderBottomLeftRadius: 0,
+        }}
+      >
+        <IconSend size={16} />
+      </Button>
+    </Group>
+  );
+}
+
+export default ChatInputArea;

client/components/AiResponse/ChatInterface.tsx

@@ -0,0 +1,436 @@
+import { Card, Stack } from "@mantine/core";
+import { usePubSub } from "create-pubsub/react";
+import {
+  type KeyboardEvent,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import throttle from "throttleit";
+import { generateFollowUpQuestion } from "@/modules/followUpQuestions";
+import {
+  getCurrentSearchRunId,
+  saveChatMessageForQuery,
+  updateSearchResults,
+} from "@/modules/history";
+import { handleEnterKeyDown } from "@/modules/keyboard";
+import { addLogEntry } from "@/modules/logEntries";
+import {
+  chatGenerationStatePubSub,
+  chatInputPubSub,
+  followUpQuestionPubSub,
+  getSettings,
+  imageSearchResultsPubSub,
+  queryPubSub,
+  settingsPubSub,
+  suppressNextFollowUpPubSub,
+  textSearchResultsPubSub,
+  updateImageSearchResults,
+  updateLlmTextSearchResults,
+  updateTextSearchResults,
+} from "@/modules/pubSub";
+import { generateRelatedSearchQuery } from "@/modules/relatedSearchQuery";
+import { searchImages, searchText } from "@/modules/search";
+import { generateChatResponse } from "@/modules/textGeneration";
+import type { ChatMessage } from "@/modules/types";
+import ChatHeader from "./ChatHeader";
+import ChatInputArea from "./ChatInputArea";
+import MessageList from "./MessageList";
+
+interface ChatInterfaceProps {
+  initialQuery?: string;
+  initialResponse?: string;
+  initialMessages?: ChatMessage[];
+  suppressInitialFollowUp?: boolean;
+}
+
+export default function ChatInterface({
+  initialQuery,
+  initialResponse,
+  initialMessages,
+  suppressInitialFollowUp,
+}: ChatInterfaceProps) {
+  const initialMessagesArray =
+    initialMessages &&
+    initialMessages.length > 0 &&
+    initialQuery &&
+    initialResponse
+      ? [
+          { role: "user" as const, content: initialQuery },
+          { role: "assistant" as const, content: initialResponse },
+          ...initialMessages,
+        ]
+      : initialMessages || [];
+
+  const [messages, setMessages] = useState<ChatMessage[]>(initialMessagesArray);
+  const [input, setInput] = usePubSub(chatInputPubSub);
+  const [generationState, setGenerationState] = usePubSub(
+    chatGenerationStatePubSub,
+  );
+  const [, setFollowUpQuestion] = usePubSub(followUpQuestionPubSub);
+  const [textSearchResults] = usePubSub(textSearchResultsPubSub);
+  const [imageSearchResults] = usePubSub(imageSearchResultsPubSub);
+  const [currentQuery] = usePubSub(queryPubSub);
+  const [suppressNextFollowUp] = usePubSub(suppressNextFollowUpPubSub);
+  const [previousFollowUpQuestions, setPreviousFollowUpQuestions] = useState<
+    string[]
+  >([]);
+  const [settings] = usePubSub(settingsPubSub);
+  const [streamedResponse, setStreamedResponse] = useState("");
+  const hasInitialized = useRef(false);
+  const prevInitialMessagesRef = useRef<ChatMessage[] | undefined>(undefined);
+  const updateStreamedResponse = useCallback(
+    throttle((response: string) => {
+      setStreamedResponse(response);
+    }, 1000 / 12),
+    [],
+  );
+
+  const regenerateFollowUpQuestion = useCallback(
+    async (currentQuery: string, currentResponse: string) => {
+      if (suppressNextFollowUp) return;
+      if (!currentResponse || !currentQuery.trim()) return;
+
+      try {
+        setGenerationState({
+          isGeneratingResponse: false,
+          isGeneratingFollowUpQuestion: true,
+        });
+
+        const newQuestion = await generateFollowUpQuestion({
+          topic: currentQuery,
+          currentContent: currentResponse,
+          previousQuestions: previousFollowUpQuestions,
+        });
+
+        setPreviousFollowUpQuestions((prev) =>
+          [...prev, newQuestion].slice(-5),
+        );
+        setFollowUpQuestion(newQuestion);
+        setGenerationState({
+          isGeneratingResponse: false,
+          isGeneratingFollowUpQuestion: false,
+        });
+      } catch (_) {
+        setFollowUpQuestion("");
+        setGenerationState({
+          isGeneratingResponse: false,
+          isGeneratingFollowUpQuestion: false,
+        });
+      }
+    },
+    [
+      setFollowUpQuestion,
+      setGenerationState,
+      previousFollowUpQuestions,
+      suppressNextFollowUp,
+    ],
+  );
+
+  useEffect(() => {
+    const messagesChanged =
+      !prevInitialMessagesRef.current ||
+      JSON.stringify(prevInitialMessagesRef.current) !==
+        JSON.stringify(initialMessages);
+
+    if (!messagesChanged) return;
+
+    prevInitialMessagesRef.current = initialMessages;
+
+    const newInitialMessagesArray =
+      initialMessages &&
+      initialMessages.length > 0 &&
+      initialQuery &&
+      initialResponse
+        ? [
+            { role: "user" as const, content: initialQuery },
+            { role: "assistant" as const, content: initialResponse },
+            ...initialMessages,
+          ]
+        : initialMessages || [];
+
+    if (newInitialMessagesArray.length > 0) {
+      setMessages(newInitialMessagesArray);
+    } else if (initialQuery && initialResponse) {
+      setMessages([
+        { role: "user", content: initialQuery },
+        { role: "assistant", content: initialResponse },
+      ]);
+    }
+  }, [initialQuery, initialResponse, initialMessages]);
+
+  useEffect(() => {
+    if (suppressNextFollowUp) {
+      hasInitialized.current = true;
+      return;
+    }
+    if (suppressInitialFollowUp) return;
+    if (hasInitialized.current) return;
+
+    if (initialMessages && initialMessages.length > 0) {
+      const lastAssistant = messages
+        .filter((m) => m.role === "assistant")
+        .pop();
+      const lastUser = messages.filter((m) => m.role === "user").pop();
+      if (lastUser && lastAssistant) {
+        regenerateFollowUpQuestion(lastUser.content, lastAssistant.content);
+        hasInitialized.current = true;
+      }
+    } else if (messages.length >= 2 && initialQuery && initialResponse) {
+      regenerateFollowUpQuestion(initialQuery, initialResponse);
+      hasInitialized.current = true;
+    }
+  }, [
+    initialQuery,
+    initialResponse,
+    initialMessages,
+    messages,
+    regenerateFollowUpQuestion,
+    suppressInitialFollowUp,
+    suppressNextFollowUp,
+  ]);
+
+  useEffect(() => {
+    return () => {
+      setFollowUpQuestion("");
+      setPreviousFollowUpQuestions([]);
+    };
+  }, [setFollowUpQuestion]);
+
+  const handleEditMessage = useCallback(
+    (absoluteIndex: number) => {
+      const target = messages[absoluteIndex];
+      if (!target || target.role !== "user") return;
+      setInput(target.content);
+      setMessages(messages.slice(0, absoluteIndex));
+      setFollowUpQuestion("");
+    },
+    [messages, setInput, setFollowUpQuestion],
+  );
+
+  const handleRegenerateResponse = useCallback(async () => {
+    if (
+      generationState.isGeneratingResponse ||
+      messages.length < 3 ||
+      messages[messages.length - 1].role !== "assistant"
+    )
+      return;
+
+    const history = messages.slice(0, -1);
+    const lastUser = history[history.length - 1];
+
+    setMessages(history);
+    setGenerationState({ ...generationState, isGeneratingResponse: true });
+    setFollowUpQuestion("");
+    setStreamedResponse("");
+
+    try {
+      const finalResponse = await generateChatResponse(
+        history,
+        updateStreamedResponse,
+      );
+
+      setMessages((prev) => [
+        ...prev,
+        { role: "assistant", content: finalResponse },
+      ]);
+
+      addLogEntry("AI response re-generated");
+
+      if (lastUser?.role === "user") {
+        await regenerateFollowUpQuestion(lastUser.content, finalResponse);
+      }
+    } catch (error) {
+      addLogEntry(`Error re-generating response: ${error}`);
+    } finally {
+      setGenerationState({ ...generationState, isGeneratingResponse: false });
+    }
+  }, [
+    generationState,
+    messages,
+    regenerateFollowUpQuestion,
+    setFollowUpQuestion,
+    setGenerationState,
+    updateStreamedResponse,
+  ]);
+
+  const handleSend = useCallback(
+    async (textToSend?: string) => {
+      const currentInput = textToSend ?? input;
+      if (currentInput.trim() === "" || generationState.isGeneratingResponse)
+        return;
+
+      const userMessage: ChatMessage = { role: "user", content: currentInput };
+      const newMessages: ChatMessage[] = [...messages, userMessage];
+
+      setMessages(newMessages);
+      if (!textToSend) setInput("");
+      setGenerationState({
+        ...generationState,
+        isGeneratingResponse: true,
+      });
+      setFollowUpQuestion("");
+      setStreamedResponse("");
+
+      try {
+        const relatedQuery = await generateRelatedSearchQuery([...newMessages]);
+        const searchQuery = relatedQuery || currentInput;
+
+        if (settings.enableTextSearch) {
+          const freshResults = await searchText(
+            searchQuery,
+            settings.searchResultsLimit,
+          );
+
+          if (freshResults.length > 0) {
+            const existingUrls = new Set(
+              textSearchResults.map(([, , url]) => url),
+            );
+
+            const uniqueFreshResults = freshResults.filter(
+              ([, , url]) => !existingUrls.has(url),
+            );
+
+            updateLlmTextSearchResults(
+              freshResults.slice(0, getSettings().searchResultsToConsider),
+            );
+
+            if (uniqueFreshResults.length > 0) {
+              const updatedResults = [
+                ...textSearchResults,
+                ...uniqueFreshResults,
+              ];
+              updateTextSearchResults(updatedResults);
+
+              updateSearchResults(getCurrentSearchRunId(), {
+                type: "text",
+                items: updatedResults.map(([title, snippet, url]) => ({
+                  title,
+                  url,
+                  snippet,
+                })),
+              });
+            }
+          }
+        }
+
+        if (settings.enableImageSearch) {
+          searchImages(searchQuery, settings.searchResultsLimit)
+            .then((imageResults) => {
+              if (imageResults.length > 0) {
+                const existingUrls = new Set(
+                  imageSearchResults.map(([, url]) => url),
+                );
+
+                const uniqueFreshResults = imageResults.filter(
+                  ([, url]) => !existingUrls.has(url),
+                );
+
+                if (uniqueFreshResults.length > 0) {
+                  const updatedImageResults = [
+                    ...uniqueFreshResults,
+                    ...imageSearchResults,
+                  ];
+                  updateImageSearchResults(updatedImageResults);
+
+                  updateSearchResults(getCurrentSearchRunId(), {
+                    type: "image",
+                    items: updatedImageResults.map(
+                      ([title, url, thumbnailUrl, sourceUrl]) => ({
+                        title,
+                        url,
+                        thumbnail: thumbnailUrl,
+                        sourceUrl,
+                      }),
+                    ),
+                  });
+                }
+              }
+            })
+            .catch((error) => {
+              addLogEntry(`Error in follow-up image search: ${error}`);
+            });
+        }
+      } catch (error) {
+        addLogEntry(`Error in follow-up search: ${error}`);
+      }
+
+      try {
+        const finalResponse = await generateChatResponse(
+          newMessages,
+          updateStreamedResponse,
+        );
+
+        setMessages((prevMessages) => [
+          ...prevMessages,
+          { role: "assistant", content: finalResponse },
+        ]);
+
+        addLogEntry("AI response completed");
+
+        await saveChatMessageForQuery(currentQuery, "user", currentInput);
+        await saveChatMessageForQuery(currentQuery, "assistant", finalResponse);
+
+        await regenerateFollowUpQuestion(currentInput, finalResponse);
+      } catch (error) {
+        addLogEntry(`Error in chat response: ${error}`);
+        setMessages((prevMessages) => [
+          ...prevMessages,
+          {
+            role: "assistant",
+            content:
+              "Sorry, I encountered an error while generating a response.",
+          },
+        ]);
+      } finally {
+        setGenerationState({
+          ...generationState,
+          isGeneratingResponse: false,
+        });
+      }
+    },
+    [
+      generationState,
+      messages,
+      settings,
+      input,
+      regenerateFollowUpQuestion,
+      setFollowUpQuestion,
+      setGenerationState,
+      setInput,
+      updateStreamedResponse,
+      currentQuery,
+      textSearchResults,
+      imageSearchResults,
+    ],
+  );
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLTextAreaElement>) => {
+      handleEnterKeyDown(event, settings, handleSend);
+    },
+    [settings, handleSend],
+  );
+
+  return (
+    <Card withBorder shadow="sm" radius="md">
+      <Card.Section withBorder inheritPadding py="xs">
+        <ChatHeader messages={messages} />
+      </Card.Section>
+      <Stack gap="md" pt="md">
+        <MessageList
+          messages={
+            generationState.isGeneratingResponse
+              ? [...messages, { role: "assistant", content: streamedResponse }]
+              : messages
+          }
+          onEditMessage={handleEditMessage}
+          onRegenerate={handleRegenerateResponse}
+          isGenerating={generationState.isGeneratingResponse}
+        />
+        <ChatInputArea onKeyDown={handleKeyDown} handleSend={handleSend} />
+      </Stack>
+    </Card>
+  );
+}

client/components/AiResponse/CopyIconButton.tsx

@@ -0,0 +1,32 @@
+import { ActionIcon, CopyButton, Tooltip } from "@mantine/core";
+import { IconCheck, IconCopy } from "@tabler/icons-react";
+
+interface CopyIconButtonProps {
+  value: string;
+  tooltipLabel?: string;
+}
+
+export default function CopyIconButton({
+  value,
+  tooltipLabel = "Copy",
+}: CopyIconButtonProps) {
+  return (
+    <CopyButton value={value} timeout={2000}>
+      {({ copied, copy }) => (
+        <Tooltip
+          label={copied ? "Copied" : tooltipLabel}
+          withArrow
+          position="right"
+        >
+          <ActionIcon
+            color={copied ? "teal" : "gray"}
+            variant="subtle"
+            onClick={copy}
+          >
+            {copied ? <IconCheck size={16} /> : <IconCopy size={16} />}
+          </ActionIcon>
+        </Tooltip>
+      )}
+    </CopyButton>
+  );
+}

client/components/AiResponse/EnableAiResponsePrompt.tsx

@@ -0,0 +1,85 @@
+import {
+  ActionIcon,
+  Alert,
+  Button,
+  Grid,
+  Group,
+  Popover,
+  Stack,
+  Text,
+} from "@mantine/core";
+import { IconCheck, IconInfoCircle, IconX } from "@tabler/icons-react";
+
+interface EnableAiResponsePromptProps {
+  onAccept: () => void;
+  onDecline: () => void;
+}
+
+export default function EnableAiResponsePrompt({
+  onAccept,
+  onDecline,
+}: EnableAiResponsePromptProps) {
+  const helpContent = (
+    <Stack gap="xs" p="xs">
+      <Text size="sm">
+        MiniSearch is a web-searching app with an integrated AI assistant.
+      </Text>
+      <Text size="sm">
+        With AI Responses enabled, it will generate summaries and answer
+        questions based on search results.
+      </Text>
+      <Text size="sm">
+        If disabled, it will function as a classic web search tool.
+      </Text>
+      <Text size="sm" c="dimmed" component="em">
+        You can toggle this feature at anytime through the Menu.
+      </Text>
+    </Stack>
+  );
+
+  return (
+    <Alert variant="light" color="blue" p="xs">
+      <Grid justify="space-between" align="center">
+        <Grid.Col span="content">
+          <Group gap="xs">
+            <Text fw={500}>Enable AI Responses?</Text>
+            <Popover
+              width={300}
+              styles={{ dropdown: { maxWidth: "92vw" } }}
+              position="bottom"
+              withArrow
+              shadow="md"
+            >
+              <Popover.Target>
+                <ActionIcon variant="subtle" color="blue" size="sm">
+                  <IconInfoCircle size="1rem" />
+                </ActionIcon>
+              </Popover.Target>
+              <Popover.Dropdown>{helpContent}</Popover.Dropdown>
+            </Popover>
+          </Group>
+        </Grid.Col>
+        <Grid.Col span="auto">
+          <Group justify="end">
+            <Button
+              variant="subtle"
+              color="gray"
+              leftSection={<IconX size="1rem" />}
+              onClick={onDecline}
+              size="xs"
+            >
+              No, thanks
+            </Button>
+            <Button
+              leftSection={<IconCheck size="1rem" />}
+              onClick={onAccept}
+              size="xs"
+            >
+              Yes, please
+            </Button>
+          </Group>
+        </Grid.Col>
+      </Grid>
+    </Alert>
+  );
+}

client/components/AiResponse/ExpandableLink.tsx

@@ -0,0 +1,123 @@
+import type { MantineTheme } from "@mantine/core";
+import { Button } from "@mantine/core";
+import React from "react";
+
+interface ExpandableLinkProps {
+  href: string;
+  children: React.ReactNode;
+}
+
+export default function ExpandableLink({
+  href,
+  children,
+}: ExpandableLinkProps) {
+  const childContent = children?.toString() || "";
+  const firstChar = childContent.charAt(0);
+  const [isExpanded, setIsExpanded] = React.useState(true);
+  const timerRef = React.useRef<number | null>(null);
+
+  React.useEffect(() => {
+    timerRef.current = window.setTimeout(() => {
+      setIsExpanded(false);
+      timerRef.current = null;
+    }, 3000);
+
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, []);
+
+  const handleMouseEnter = () => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+    setIsExpanded(true);
+  };
+
+  const handleMouseLeave = () => {
+    timerRef.current = window.setTimeout(() => {
+      setIsExpanded(false);
+      timerRef.current = null;
+    }, 3000);
+  };
+
+  const fullTextRef = React.useRef<HTMLDivElement>(null);
+  const [fullTextWidth, setFullTextWidth] = React.useState(0);
+
+  React.useEffect(() => {
+    const measureText = () => {
+      if (fullTextRef.current) {
+        setFullTextWidth(fullTextRef.current.scrollWidth);
+      }
+    };
+
+    measureText();
+
+    window.addEventListener("resize", measureText);
+    return () => {
+      window.removeEventListener("resize", measureText);
+    };
+  }, []);
+
+  return (
+    <Button
+      component="a"
+      href={href}
+      target="_blank"
+      rel="nofollow noopener noreferrer"
+      variant="light"
+      color="gray"
+      size="compact-xs"
+      radius="xl"
+      style={(theme: MantineTheme) => ({
+        textDecoration: "none",
+        transform: "translateY(-2px)",
+        overflow: "hidden",
+        position: "relative",
+        width: isExpanded ? `${fullTextWidth + theme.spacing.md}px` : "2em",
+        transition: "width 0.3s ease-in-out",
+        textAlign: "center",
+      })}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      onFocus={handleMouseEnter}
+      onBlur={handleMouseLeave}
+    >
+      <span
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          opacity: isExpanded ? 0 : 1,
+          transition: "opacity 0.2s ease-in-out",
+        }}
+      >
+        {firstChar}
+      </span>
+      <span
+        ref={fullTextRef}
+        style={{
+          opacity: isExpanded ? 1 : 0,
+          transition: "opacity 0.3s ease-in-out",
+          visibility: isExpanded ? "visible" : "hidden",
+          whiteSpace: "nowrap",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          height: "100%",
+          position: "relative",
+        }}
+      >
+        {children}
+      </span>
+    </Button>
+  );
+}

client/components/AiResponse/FormattedMarkdown.tsx

@@ -0,0 +1,41 @@
+import { TypographyStylesProvider } from "@mantine/core";
+import { useReasoningContent } from "./hooks/useReasoningContent";
+import MarkdownRenderer from "./MarkdownRenderer";
+import ReasoningSection from "./ReasoningSection";
+
+interface FormattedMarkdownProps {
+  children: string;
+  className?: string;
+  enableCopy?: boolean;
+}
+
+export default function FormattedMarkdown({
+  children,
+  className = "",
+  enableCopy = true,
+}: FormattedMarkdownProps) {
+  const { reasoningContent, mainContent, isGenerating } =
+    useReasoningContent(children);
+
+  if (!children && !reasoningContent) {
+    return null;
+  }
+
+  return (
+    <TypographyStylesProvider p="lg">
+      {reasoningContent && (
+        <ReasoningSection
+          content={reasoningContent}
+          isGenerating={isGenerating}
+        />
+      )}
+      {!isGenerating && mainContent && (
+        <MarkdownRenderer
+          content={mainContent}
+          enableCopy={enableCopy}
+          className={className}
+        />
+      )}
+    </TypographyStylesProvider>
+  );
+}

client/components/AiResponse/LoadingModelContent.tsx

@@ -0,0 +1,40 @@
+import { Card, Group, Progress, Stack, Text } from "@mantine/core";
+
+export default function LoadingModelContent({
+  modelLoadingProgress,
+  modelSizeInMegabytes,
+}: {
+  modelLoadingProgress: number;
+  modelSizeInMegabytes: number;
+}) {
+  const isLoadingStarting = modelLoadingProgress === 0;
+  const isLoadingComplete = modelLoadingProgress === 100;
+  const percent =
+    isLoadingComplete || isLoadingStarting ? 100 : modelLoadingProgress;
+  const strokeColor = percent === 100 ? "#52c41a" : "#3385ff";
+  const downloadedSize = (modelSizeInMegabytes * modelLoadingProgress) / 100;
+  const sizeText = `${downloadedSize.toFixed(0)} MB / ${modelSizeInMegabytes.toFixed(0)} MB`;
+
+  return (
+    <Card withBorder shadow="sm" radius="md">
+      <Card.Section withBorder inheritPadding py="xs">
+        <Text fw={500}>Loading AI...</Text>
+      </Card.Section>
+      <Card.Section withBorder inheritPadding py="md">
+        <Stack gap="xs">
+          <Progress color={strokeColor} value={percent} animated />
+          {!isLoadingStarting && (
+            <Group justify="space-between">
+              <Text size="sm" c="dimmed">
+                {sizeText}
+              </Text>
+              <Text size="sm" c="dimmed">
+                {percent.toFixed(1)}%
+              </Text>
+            </Group>
+          )}
+        </Stack>
+      </Card.Section>
+    </Card>
+  );
+}

client/components/AiResponse/MarkdownRenderer.tsx

@@ -0,0 +1,104 @@
+import { CodeHighlight } from "@mantine/code-highlight";
+import { Blockquote, Box, Code, Divider, Text } from "@mantine/core";
+import React from "react";
+import { ErrorBoundary } from "react-error-boundary";
+import Markdown from "react-markdown";
+import rehypeExternalLinks from "rehype-external-links";
+import remarkGfm from "remark-gfm";
+import ExpandableLink from "./ExpandableLink";
+
+interface MarkdownRendererProps {
+  content: string;
+  enableCopy?: boolean;
+  className?: string;
+}
+
+export default function MarkdownRenderer({
+  content,
+  enableCopy = true,
+  className = "",
+}: MarkdownRendererProps) {
+  if (!content) {
+    return null;
+  }
+
+  const unwrapParagraphs = (children: React.ReactNode) => {
+    return React.Children.map(children, (child) => {
+      if (React.isValidElement(child) && child.type === "p") {
+        return (child.props as { children: React.ReactNode }).children;
+      }
+      return child;
+    });
+  };
+
+  return (
+    <Box className={className}>
+      <Markdown
+        remarkPlugins={[remarkGfm]}
+        rehypePlugins={[
+          [
+            rehypeExternalLinks,
+            { target: "_blank", rel: ["nofollow", "noopener", "noreferrer"] },
+          ],
+        ]}
+        components={{
+          a(props) {
+            const { href, children } = props;
+            return (
+              <ExpandableLink href={href || ""}>{children}</ExpandableLink>
+            );
+          },
+          li(props) {
+            const { children } = props;
+            return <li>{unwrapParagraphs(children)}</li>;
+          },
+          hr() {
+            return <Divider variant="dashed" my="md" />;
+          },
+          pre(props) {
+            return <>{props.children}</>;
+          },
+          blockquote(props) {
+            const { children } = props;
+            return (
+              <Blockquote>
+                <Text size="md">{unwrapParagraphs(children)}</Text>
+              </Blockquote>
+            );
+          },
+          code(props) {
+            const { children, className, node } = props;
+            const codeContent = children?.toString().replace(/\n$/, "") ?? "";
+            let language = "text";
+
+            if (className) {
+              const languageMatch = /language-(\w+)/.exec(className);
+              if (languageMatch) language = languageMatch[1];
+            }
+
+            if (
+              language === "text" &&
+              node?.position?.end.line === node?.position?.start.line
+            ) {
+              return <Code>{codeContent}</Code>;
+            }
+
+            return (
+              <ErrorBoundary fallback={<Code block>{codeContent}</Code>}>
+                <CodeHighlight
+                  code={codeContent}
+                  language={language}
+                  radius="md"
+                  withCopyButton={enableCopy}
+                  mb="xs"
+                />
+              </ErrorBoundary>
+            );
+          },
+        }}
+      >
+        {content}
+      </Markdown>
+    </Box>
+  );
+}

client/components/AiResponse/MessageList.tsx

@@ -0,0 +1,128 @@
+import { ActionIcon, Group, Paper, Stack, Tooltip } from "@mantine/core";
+import { IconPencil, IconRefresh } from "@tabler/icons-react";
+import { memo } from "react";
+import type { ChatMessage } from "@/modules/types";
+import FormattedMarkdown from "./FormattedMarkdown";
+
+interface MessageListProps {
+  messages: ChatMessage[];
+  onEditMessage: (absoluteIndex: number) => void;
+  onRegenerate: () => void;
+  isGenerating: boolean;
+}
+
+interface MessageProps {
+  message: ChatMessage;
+  index: number;
+  absoluteIndex: number;
+  isLastAssistant: boolean;
+  isGenerating: boolean;
+  onEditMessage: (absoluteIndex: number) => void;
+  onRegenerate: () => void;
+}
+
+const Message = memo(
+  ({
+    message,
+    index,
+    absoluteIndex,
+    isLastAssistant,
+    isGenerating,
+    onEditMessage,
+    onRegenerate,
+  }: MessageProps) => {
+    const canEdit = message.role === "user";
+    const canRegenerate = isLastAssistant && message.role === "assistant";
+    const iconSize = 16;
+    const iconVariant: "subtle" = "subtle";
+
+    return (
+      <Group
+        gap="xs"
+        align="center"
+        w="100%"
+        justify={message.role === "user" ? "flex-end" : "flex-start"}
+      >
+        {canEdit && (
+          <Tooltip label="Edit" withArrow position="right" openDelay={300}>
+            <ActionIcon
+              aria-label="Edit message"
+              color="gray"
+              variant={iconVariant}
+              disabled={isGenerating}
+              onClick={() => onEditMessage(absoluteIndex)}
+            >
+              <IconPencil size={iconSize} />
+            </ActionIcon>
+          </Tooltip>
+        )}
+
+        <Paper
+          key={`${message.role}-${index}`}
+          shadow="xs"
+          radius="xl"
+          p="sm"
+          style={{ flex: 1, overflow: "auto" }}
+        >
+          <FormattedMarkdown>{message.content}</FormattedMarkdown>
+        </Paper>
+
+        {canRegenerate && (
+          <Tooltip
+            label="Re-generate response"
+            withArrow
+            position="left"
+            openDelay={300}
+          >
+            <ActionIcon
+              aria-label="Re-generate response"
+              color="gray"
+              variant={iconVariant}
+              disabled={isGenerating}
+              onClick={() => onRegenerate()}
+            >
+              <IconRefresh size={iconSize} />
+            </ActionIcon>
+          </Tooltip>
+        )}
+      </Group>
+    );
+  },
+);
+
+const MessageList = memo(function MessageList({
+  messages,
+  onEditMessage,
+  onRegenerate,
+  isGenerating,
+}: MessageListProps) {
+  if (messages.length <= 2) return null;
+
+  return (
+    <Stack gap="md">
+      {messages
+        .slice(2)
+        .filter((message) => message.content.length > 0)
+        .map((message, index) => {
+          const absoluteIndex = index + 2;
+          const isLastAssistant =
+            absoluteIndex === messages.length - 1 &&
+            message.role === "assistant";
+          return (
+            <Message
+              key={`${message.role}-${index}`}
+              message={message}
+              index={index}
+              absoluteIndex={absoluteIndex}
+              isLastAssistant={isLastAssistant}
+              isGenerating={isGenerating}
+              onEditMessage={onEditMessage}
+              onRegenerate={onRegenerate}
+            />
+          );
+        })}
+    </Stack>
+  );
+});
+
+export default MessageList;

client/components/AiResponse/PreparingContent.tsx

@@ -0,0 +1,33 @@
+import { Card, Skeleton, Stack, Text } from "@mantine/core";
+
+export default function PreparingContent({
+  textGenerationState,
+}: {
+  textGenerationState: string;
+}) {
+  const getStateText = () => {
+    if (textGenerationState === "awaitingSearchResults") {
+      return "Awaiting search results...";
+    }
+    if (textGenerationState === "preparingToGenerate") {
+      return "Preparing AI response...";
+    }
+    return null;
+  };
+
+  return (
+    <Card withBorder shadow="sm" radius="md">
+      <Card.Section withBorder inheritPadding py="xs">
+        <Text fw={500}>{getStateText()}</Text>
+      </Card.Section>
+      <Card.Section withBorder inheritPadding py="md">
+        <Stack>
+          <Skeleton height={8} radius="xl" />
+          <Skeleton height={8} width="70%" radius="xl" />
+          <Skeleton height={8} radius="xl" />
+          <Skeleton height={8} width="43%" radius="xl" />
+        </Stack>
+      </Card.Section>
+    </Card>
+  );
+}

client/components/AiResponse/ReasoningSection.tsx

@@ -0,0 +1,79 @@
+import {
+  Box,
+  Collapse,
+  Flex,
+  Group,
+  Loader,
+  Text,
+  UnstyledButton,
+} from "@mantine/core";
+import { IconChevronDown, IconChevronRight } from "@tabler/icons-react";
+import { useEffect, useState } from "react";
+import MarkdownRenderer from "./MarkdownRenderer";
+
+interface ReasoningSectionProps {
+  content: string;
+  isGenerating?: boolean;
+}
+
+export default function ReasoningSection({
+  content,
+  isGenerating = false,
+}: ReasoningSectionProps) {
+  const [isOpen, setIsOpen] = useState(isGenerating);
+
+  useEffect(() => {
+    if (isGenerating) {
+      setIsOpen(true);
+    } else {
+      setIsOpen(false);
+    }
+  }, [isGenerating]);
+
+  return (
+    <Box mb="xs">
+      <UnstyledButton
+        onClick={() => setIsOpen(!isOpen)}
+        style={(theme) => ({
+          width: "100%",
+          padding: theme.spacing.xs,
+          borderStartStartRadius: theme.radius.md,
+          borderStartEndRadius: theme.radius.md,
+          borderEndEndRadius: !isOpen ? theme.radius.md : 0,
+          borderEndStartRadius: !isOpen ? theme.radius.md : 0,
+          backgroundColor: theme.colors.dark[8],
+          "&:hover": {
+            backgroundColor: theme.colors.dark[5],
+          },
+          cursor: isOpen ? "zoom-out" : "zoom-in",
+        })}
+      >
+        <Group gap={3}>
+          {isOpen ? (
+            <IconChevronDown size={16} />
+          ) : (
+            <IconChevronRight size={16} />
+          )}
+          <Flex align="center" gap={6}>
+            <Text size="sm" c="dimmed" fs="italic" span>
+              {isGenerating ? "Thinking" : "Thought Process"}
+            </Text>
+            {isGenerating && <Loader size="sm" color="dimmed" type="dots" />}
+          </Flex>
+        </Group>
+      </UnstyledButton>
+      <Collapse in={isOpen}>
+        <Box
+          style={(theme) => ({
+            backgroundColor: theme.colors.dark[8],
+            padding: theme.spacing.sm,
+            borderBottomLeftRadius: theme.radius.md,
+            borderBottomRightRadius: theme.radius.md,
+          })}
+        >
+          <MarkdownRenderer content={content} enableCopy={false} />
+        </Box>
+      </Collapse>
+    </Box>
+  );
+}

client/components/AiResponse/WebLlmModelSelect.tsx

@@ -0,0 +1,81 @@
+import { type ComboboxItem, Select } from "@mantine/core";
+import { prebuiltAppConfig } from "@mlc-ai/web-llm";
+import { useCallback, useEffect, useState } from "react";
+import { isF16Supported } from "@/modules/webGpu";
+
+export default function WebLlmModelSelect({
+  value,
+  onChange,
+}: {
+  value: string;
+  onChange: (value: string) => void;
+}) {
+  const [webGpuModels] = useState<ComboboxItem[]>(() => {
+    const models = prebuiltAppConfig.model_list
+      .filter((model) => {
+        const isSmall = isSmallModel(model);
+        const suffix = getModelSuffix(isF16Supported, isSmall);
+        return model.model_id.endsWith(suffix);
+      })
+      .sort((a, b) => (a.vram_required_MB ?? 0) - (b.vram_required_MB ?? 0))
+      .map((model) => {
+        const modelSizeInMegabytes =
+          Math.round(model.vram_required_MB ?? 0) || "N/A";
+        const isSmall = isSmallModel(model);
+        const suffix = getModelSuffix(isF16Supported, isSmall);
+        const modelName = model.model_id.replace(suffix, "");
+
+        return {
+          label: `${modelSizeInMegabytes} MB • ${modelName}`,
+          value: model.model_id,
+        };
+      });
+
+    return models;
+  });
+
+  useEffect(() => {
+    const isCurrentModelValid = webGpuModels.some(
+      (model) => model.value === value,
+    );
+
+    if (!isCurrentModelValid && webGpuModels.length > 0) {
+      onChange(webGpuModels[0].value);
+    }
+  }, [onChange, webGpuModels, value]);
+
+  const handleChange = useCallback(
+    (value: string | null) => {
+      if (value) onChange(value);
+    },
+    [onChange],
+  );
+
+  return (
+    <Select
+      value={value}
+      onChange={handleChange}
+      label="AI Model"
+      description="Select the model to use for AI responses."
+      data={webGpuModels}
+      allowDeselect={false}
+      searchable
+    />
+  );
+}
+
+type ModelConfig = (typeof prebuiltAppConfig.model_list)[number];
+
+const smallModels = ["SmolLM2-135M", "SmolLM2-360M"] as const;
+
+function isSmallModel(model: ModelConfig) {
+  return smallModels.some((smallModel) =>
+    model.model_id.startsWith(smallModel),
+  );
+}
+
+function getModelSuffix(isF16: boolean, isSmall: boolean) {
+  if (isSmall) return isF16 ? "-q0f16-MLC" : "-q0f32-MLC";
+
+  return isF16 ? "-q4f16_1-MLC" : "-q4f32_1-MLC";
+}

client/components/AiResponse/WllamaModelSelect.tsx

@@ -0,0 +1,42 @@
+import { type ComboboxItem, Select } from "@mantine/core";
+import { useEffect, useState } from "react";
+import { wllamaModels } from "@/modules/wllama";
+
+export default function WllamaModelSelect({
+  value,
+  onChange,
+}: {
+  value: string;
+  onChange: (value: string) => void;
+}) {
+  const [wllamaModelOptions] = useState<ComboboxItem[]>(
+    Object.entries(wllamaModels)
+      .sort(([, a], [, b]) => a.fileSizeInMegabytes - b.fileSizeInMegabytes)
+      .map(([value, { label, fileSizeInMegabytes }]) => ({
+        label: `${fileSizeInMegabytes} MB • ${label}`,
+        value,
+      })),
+  );
+
+  useEffect(() => {
+    const isCurrentModelValid = wllamaModelOptions.some(
+      (model) => model.value === value,
+    );
+
+    if (!isCurrentModelValid && wllamaModelOptions.length > 0) {
+      onChange(wllamaModelOptions[0].value);
+    }
+  }, [onChange, wllamaModelOptions, value]);
+
+  return (
+    <Select
+      value={value}
+      onChange={(value) => value && onChange(value)}
+      label="AI Model"
+      description="Select the model to use for AI responses."
+      data={wllamaModelOptions}
+      allowDeselect={false}
+      searchable
+    />
+  );
+}

client/components/AiResponse/hooks/useReasoningContent.test.ts

@@ -0,0 +1,96 @@
+import { renderHook } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { useReasoningContent } from "./useReasoningContent";
+
+const expectEmptyState = (result: {
+  current: ReturnType<typeof useReasoningContent>;
+}) => {
+  expect(result.current.reasoningContent).toBe("");
+  expect(result.current.mainContent).toBe("");
+  expect(result.current.isGenerating).toBe(false);
+};
+
+describe("useReasoningContent hook", () => {
+  describe("parsing reasoning content from markdown markers", () => {
+    it("should extract reasoning content between start and end markers", () => {
+      const { result } = renderHook(() =>
+        useReasoningContent(
+          "<think>Let me think about this</think>\nHere is the answer.",
+        ),
+      );
+
+      expect(result.current.reasoningContent).toBe("Let me think about this");
+      expect(result.current.mainContent).toBe("\nHere is the answer.");
+      expect(result.current.isGenerating).toBe(false);
+    });
+
+    it("should handle empty text", () => {
+      const { result } = renderHook(() => useReasoningContent(""));
+      expectEmptyState(result);
+    });
+
+    it("should return text as main content when no markers present", () => {
+      const { result } = renderHook(() =>
+        useReasoningContent("This is a normal response."),
+      );
+
+      expect(result.current.reasoningContent).toBe("");
+      expect(result.current.mainContent).toBe("This is a normal response.");
+      expect(result.current.isGenerating).toBe(false);
+    });
+
+    it("should detect generating state when end marker is missing", () => {
+      const { result } = renderHook(() =>
+        useReasoningContent("<think>I'm still thinking"),
+      );
+
+      expect(result.current.reasoningContent).toBe("I'm still thinking");
+      expect(result.current.mainContent).toBe("");
+      expect(result.current.isGenerating).toBe(true);
+    });
+
+    it("should handle whitespace-only content", () => {
+      const { result } = renderHook(() => useReasoningContent("   "));
+      expectEmptyState(result);
+    });
+
+    it("should handle null/undefined content gracefully", () => {
+      const { result } = renderHook(() =>
+        useReasoningContent(null as unknown as string),
+      );
+      expectEmptyState(result);
+    });
+  });
+
+  describe("UI state management for reasoning section", () => {
+    it("should provide correct isGenerating state for accordion title", () => {
+      const streamingState = renderHook(() =>
+        useReasoningContent("<think>Currently thinking..."),
+      );
+
+      expect(streamingState.result.current.isGenerating).toBe(true);
+
+      const completedState = renderHook(() =>
+        useReasoningContent(
+          "<think>Thought process completed</think>\nHere is the answer.",
+        ),
+      );
+
+      expect(completedState.result.current.isGenerating).toBe(false);
+    });
+
+    it("should handle transition from streaming to completed state", () => {
+      const initial = renderHook(() =>
+        useReasoningContent("<think>Building response..."),
+      );
+      expect(initial.result.current.isGenerating).toBe(true);
+
+      const transitioned = renderHook(() =>
+        useReasoningContent(
+          "<think>Response built.</think>\nFinal answer here.",
+        ),
+      );
+      expect(transitioned.result.current.isGenerating).toBe(false);
+    });
+  });
+});

client/components/AiResponse/hooks/useReasoningContent.ts

@@ -0,0 +1,69 @@
+import { usePubSub } from "create-pubsub/react";
+import { useCallback } from "react";
+import { settingsPubSub } from "@/modules/pubSub";
+
+/**
+ * Hook for extracting reasoning content from AI responses
+ * @param text - The full text response from the AI
+ * @returns Object containing separated reasoning and main content
+ */
+export function useReasoningContent(text: string) {
+  const [settings] = usePubSub(settingsPubSub);
+
+  const extractReasoningAndMainContent = useCallback(
+    (text: string, startMarker: string, endMarker: string) => {
+      if (!text)
+        return { reasoningContent: "", mainContent: "", isGenerating: false };
+
+      const trimmedText = text.trim();
+
+      if (!trimmedText.startsWith(startMarker))
+        return { reasoningContent: "", mainContent: text, isGenerating: false };
+
+      const startIndex = trimmedText.indexOf(startMarker);
+      const endIndex = trimmedText.indexOf(endMarker);
+
+      if (endIndex === -1) {
+        return {
+          reasoningContent: trimmedText.slice(startIndex + startMarker.length),
+          mainContent: "",
+          isGenerating: true,
+        };
+      }
+
+      return {
+        reasoningContent: trimmedText.slice(
+          startIndex + startMarker.length,
+          endIndex,
+        ),
+        mainContent: trimmedText.slice(endIndex + endMarker.length),
+        isGenerating: false,
+      };
+    },
+    [],
+  );
+
+  if (text && text.trim() === "") {
+    return {
+      reasoningContent: "",
+      mainContent: "",
+      isGenerating: false,
+    };
+  }
+
+  if (!text) {
+    return {
+      reasoningContent: "",
+      mainContent: "",
+      isGenerating: false,
+    };
+  }
+
+  const result = extractReasoningAndMainContent(
+    text,
+    settings.reasoningStartMarker,
+    settings.reasoningEndMarker,
+  );
+
+  return result;
+}

client/components/Analytics/SearchStats.tsx

@@ -0,0 +1,313 @@
+import {
+  Badge,
+  Card,
+  Center,
+  Group,
+  Progress,
+  SimpleGrid,
+  Stack,
+  Text,
+  ThemeIcon,
+  Title,
+} from "@mantine/core";
+import { IconSearch } from "@tabler/icons-react";
+import { useMemo } from "react";
+import { useSearchHistory } from "@/hooks/useSearchHistory";
+import type { SearchEntry } from "@/modules/history";
+import { formatRelativeTime } from "@/modules/stringFormatters";
+
+interface SearchStatsProps {
+  period?: "today" | "week" | "month" | "all";
+  compact?: boolean;
+}
+
+interface StatsData {
+  totalSearches: number;
+  avgPerDay: number;
+  mostActiveHour: number;
+  topSources: { source: string; count: number; percentage: number }[];
+  recentActivity: SearchEntry[];
+  searchTrends: { date: string; count: number }[];
+}
+
+export default function SearchStats({
+  period = "week",
+  compact = false,
+}: SearchStatsProps) {
+  const { recentSearches, isLoading } = useSearchHistory({ limit: 1000 });
+
+  const stats = useMemo((): StatsData => {
+    if (!recentSearches.length) {
+      return {
+        totalSearches: 0,
+        avgPerDay: 0,
+        mostActiveHour: 0,
+        topSources: [],
+        recentActivity: [],
+        searchTrends: [],
+      };
+    }
+
+    const now = new Date();
+    const filterDate = new Date();
+
+    switch (period) {
+      case "today":
+        filterDate.setHours(0, 0, 0, 0);
+        break;
+      case "week":
+        filterDate.setDate(now.getDate() - 7);
+        break;
+      case "month":
+        filterDate.setDate(now.getDate() - 30);
+        break;
+      default:
+        filterDate.setFullYear(2000);
+    }
+
+    const filteredSearches = recentSearches.filter(
+      (search) => search.timestamp >= filterDate.getTime(),
+    );
+
+    const totalSearches = filteredSearches.length;
+
+    const dateCounts = new Map<string, number>();
+    filteredSearches.forEach((search) => {
+      const date = new Date(search.timestamp).toISOString().split("T")[0];
+      dateCounts.set(date, (dateCounts.get(date) || 0) + 1);
+    });
+
+    const uniqueDays = dateCounts.size;
+    const avgPerDay =
+      uniqueDays > 0 ? Math.round(totalSearches / uniqueDays) : 0;
+
+    const hourCounts = new Array(24).fill(0);
+    filteredSearches.forEach((search) => {
+      const hour = new Date(search.timestamp).getHours();
+      hourCounts[hour]++;
+    });
+    const mostActiveHour = hourCounts.indexOf(Math.max(...hourCounts));
+
+    const sourceCounts = filteredSearches.reduce(
+      (acc, search) => {
+        if (compact && search.source?.toLowerCase() === "user") {
+          return acc;
+        }
+        const source = search.source || "unknown";
+        acc[source] = (acc[source] || 0) + 1;
+        return acc;
+      },
+      {} as Record<string, number>,
+    );
+
+    const sourcesTotal = Object.values(sourceCounts).reduce(
+      (sum, n) => sum + n,
+      0,
+    );
+    const topSources = Object.entries(sourceCounts)
+      .map(([source, count]) => ({
+        source: source.charAt(0).toUpperCase() + source.slice(1),
+        count,
+        percentage:
+          sourcesTotal > 0 ? Math.round((count / sourcesTotal) * 100) : 0,
+      }))
+      .sort((a, b) => b.count - a.count);
+
+    const recentActivity = filteredSearches
+      .sort((a, b) => b.timestamp - a.timestamp)
+      .slice(0, 10);
+
+    const searchTrends = Array.from(dateCounts.entries())
+      .map(([date, count]) => ({ date, count }))
+      .sort((a, b) => a.date.localeCompare(b.date));
+
+    return {
+      totalSearches,
+      avgPerDay,
+      mostActiveHour,
+      topSources,
+      recentActivity,
+      searchTrends,
+    };
+  }, [recentSearches, period, compact]);
+
+  const getSourceColor = (source: string) => {
+    const colors = {
+      User: "blue",
+      Followup: "green",
+      Suggestion: "orange",
+      Unknown: "gray",
+    };
+    return colors[source as keyof typeof colors] || "gray";
+  };
+
+  const formatHour = (hour: number) => {
+    const period = hour >= 12 ? "PM" : "AM";
+    const displayHour = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour;
+    return `${displayHour}:00 ${period}`;
+  };
+
+  if (isLoading) {
+    return (
+      <Card withBorder>
+        <Center h={200}>
+          <Text c="dimmed">Loading analytics...</Text>
+        </Center>
+      </Card>
+    );
+  }
+
+  if (stats.totalSearches === 0) {
+    return (
+      <Card withBorder>
+        <Center h={200}>
+          <Stack align="center" gap="xs">
+            <ThemeIcon size="xl" variant="light" color="gray">
+              <IconSearch size={24} />
+            </ThemeIcon>
+            <Text c="dimmed">No search data available</Text>
+            <Text size="sm" c="dimmed">
+              Start searching to see analytics
+            </Text>
+          </Stack>
+        </Center>
+      </Card>
+    );
+  }
+
+  function MetricCard({
+    title,
+    value,
+  }: {
+    title: string;
+    value: string | number;
+  }) {
+    return (
+      <Card withBorder p={compact ? "sm" : "md"}>
+        <Stack gap="xs" align="flex-start">
+          <Text size="xs" tt="uppercase" fw={700} c="dimmed">
+            {title}
+          </Text>
+          <Text fw={700} size={compact ? "lg" : "xl"}>
+            {value}
+          </Text>
+        </Stack>
+      </Card>
+    );
+  }
+
+  return (
+    <Stack gap={compact ? "sm" : "md"}>
+      <SimpleGrid cols={compact ? 2 : { base: 1, sm: 2, lg: 4 }}>
+        <MetricCard
+          title="Total Searches"
+          value={stats.totalSearches.toLocaleString()}
+        />
+        <MetricCard title="Daily Average" value={stats.avgPerDay} />
+        <MetricCard
+          title="Most Active Hour"
+          value={formatHour(stats.mostActiveHour)}
+        />
+        <MetricCard
+          title="Last Search"
+          value={
+            stats.recentActivity.length > 0
+              ? formatRelativeTime(stats.recentActivity[0].timestamp)
+              : "Never"
+          }
+        />
+      </SimpleGrid>
+
+      <SimpleGrid cols={compact ? 1 : { base: 1, md: 2 }}>
+        {!(compact && stats.topSources.length === 0) && (
+          <Card withBorder>
+            <Card.Section p={compact ? "sm" : "md"}>
+              <Title order={compact ? 5 : 4} mb={compact ? "xs" : "md"}>
+                Search Sources
+              </Title>
+
+              {stats.topSources.length > 0 ? (
+                <Stack gap="xs">
+                  {stats.topSources.map((source) => (
+                    <Group key={source.source} justify="space-between">
+                      <Group gap="xs">
+                        <Badge
+                          color={getSourceColor(source.source)}
+                          variant="dot"
+                          size="sm"
+                        >
+                          {source.source}
+                        </Badge>
+                        <Text size={compact ? "xs" : "sm"}>
+                          {source.count} searches
+                        </Text>
+                      </Group>
+
+                      <Group gap="xs">
+                        <Progress
+                          value={source.percentage}
+                          size="sm"
+                          w={compact ? 40 : 60}
+                          color={getSourceColor(source.source)}
+                        />
+                        <Text size="xs" c="dimmed" w={30}>
+                          {source.percentage}%
+                        </Text>
+                      </Group>
+                    </Group>
+                  ))}
+                </Stack>
+              ) : (
+                <Text c="dimmed" size="sm">
+                  No data available
+                </Text>
+              )}
+            </Card.Section>
+          </Card>
+        )}
+      </SimpleGrid>
+
+      {stats.searchTrends.length > 1 && (
+        <Card withBorder>
+          <Card.Section p="md">
+            <Title order={4} mb="md">
+              Recent activity
+            </Title>
+            <Stack gap="xs" mt="md">
+              {stats.searchTrends.slice(-7).map((trend) => {
+                const maxCount = Math.max(
+                  ...stats.searchTrends.map((t) => t.count),
+                );
+                const percentage =
+                  maxCount > 0 ? (trend.count / maxCount) * 100 : 0;
+
+                return (
+                  <Group key={trend.date} justify="space-between">
+                    <Text size="xs" c="dimmed" w={80}>
+                      {new Date(trend.date).toLocaleDateString("en", {
+                        month: "short",
+                        day: "numeric",
+                      })}
+                    </Text>
+
+                    <Group gap="xs" style={{ flex: 1 }}>
+                      <Progress
+                        value={percentage}
+                        size="sm"
+                        style={{ flex: 1 }}
+                        color="blue"
+                      />
+                      <Text size="xs" w={20}>
+                        {trend.count}
+                      </Text>
+                    </Group>
+                  </Group>
+                );
+              })}
+            </Stack>
+          </Card.Section>
+        </Card>
+      )}
+    </Stack>
+  );
+}

client/components/App/App.tsx

@@ -0,0 +1,123 @@
+import {
+  Center,
+  Container,
+  Loader,
+  MantineProvider,
+  Stack,
+  Text,
+} from "@mantine/core";
+import { Route, Switch } from "wouter";
+import "@mantine/core/styles.css";
+import { Notifications } from "@mantine/notifications";
+import { usePubSub } from "create-pubsub/react";
+import { lazy, useEffect, useState } from "react";
+import { addLogEntry } from "@/modules/logEntries";
+import { settingsPubSub } from "@/modules/pubSub";
+import { defaultSettings } from "@/modules/settings";
+import "@mantine/notifications/styles.css";
+import { verifyStoredAccessKey } from "@/modules/accessKey";
+import MainPage from "../Pages/Main/MainPage";
+
+const AccessPage = lazy(() => import("../Pages/AccessPage"));
+
+/**
+ * Main application component with access key validation and routing
+ */
+function App() {
+  useInitializeSettings();
+  const { hasValidatedAccessKey, isCheckingStoredKey, setValidatedAccessKey } =
+    useAccessKeyValidation();
+
+  return (
+    <MantineProvider defaultColorScheme="dark">
+      {isCheckingStoredKey ? (
+        <Container h="100vh">
+          <Center h="100vh">
+            <Stack align="center">
+              <Loader />
+              <Text>Verifying access...</Text>
+            </Stack>
+          </Center>
+        </Container>
+      ) : (
+        <>
+          <Notifications />
+          <Switch>
+            <Route path="/">
+              {hasValidatedAccessKey ? (
+                <MainPage />
+              ) : (
+                <AccessPage
+                  onAccessKeyValid={() => setValidatedAccessKey(true)}
+                />
+              )}
+            </Route>
+          </Switch>
+        </>
+      )}
+    </MantineProvider>
+  );
+}
+
+export default App;
+
+/**
+ * A custom React hook that initializes the application settings.
+ *
+ * @returns The initialized settings object.
+ *
+ * @remarks
+ * This hook uses the `usePubSub` hook to access and update the settings state.
+ * It initializes the settings by merging the default settings with any existing settings.
+ * The initialization is performed once when the component mounts.
+ */
+function useInitializeSettings() {
+  const [settings, setSettings] = usePubSub(settingsPubSub);
+  const [state, setState] = useState({
+    settingsInitialized: false,
+  });
+
+  useEffect(() => {
+    if (state.settingsInitialized) return;
+
+    setSettings({ ...defaultSettings, ...settings });
+
+    setState({ settingsInitialized: true });
+
+    addLogEntry("Settings initialized");
+  }, [settings, setSettings, state.settingsInitialized]);
+
+  return settings;
+}
+
+/**
+ * A custom React hook that validates the stored access key on mount.
+ *
+ * @returns An object containing the validation state and loading state
+ */
+function useAccessKeyValidation() {
+  const [state, setState] = useState(() => ({
+    hasValidatedAccessKey: !VITE_ACCESS_KEYS_ENABLED,
+    isCheckingStoredKey: VITE_ACCESS_KEYS_ENABLED,
+  }));
+
+  useEffect(() => {
+    if (!VITE_ACCESS_KEYS_ENABLED) return;
+
+    async function checkStoredAccessKey() {
+      const isValid = await verifyStoredAccessKey();
+      if (isValid)
+        setState((prev) => ({ ...prev, hasValidatedAccessKey: true }));
+      setState((prev) => ({ ...prev, isCheckingStoredKey: false }));
+    }
+
+    checkStoredAccessKey();
+  }, []);
+
+  return {
+    hasValidatedAccessKey: state.hasValidatedAccessKey,
+    isCheckingStoredKey: state.isCheckingStoredKey,
+    setValidatedAccessKey: (value: boolean) =>
+      setState((prev) => ({ ...prev, hasValidatedAccessKey: value })),
+  };
+}

client/components/Logs/LogsModal.tsx

@@ -0,0 +1,136 @@
+import {
+  Alert,
+  Button,
+  Center,
+  CloseButton,
+  Group,
+  Modal,
+  Pagination,
+  Table,
+  TextInput,
+  Tooltip,
+} from "@mantine/core";
+import { IconInfoCircle, IconSearch } from "@tabler/icons-react";
+import { usePubSub } from "create-pubsub/react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { logEntriesPubSub } from "@/modules/logEntries";
+
+export default function LogsModal({
+  opened,
+  onClose,
+}: {
+  opened: boolean;
+  onClose: () => void;
+}) {
+  const [logEntries] = usePubSub(logEntriesPubSub);
+
+  const [page, setPage] = useState(1);
+  const [filterText, setFilterText] = useState("");
+
+  const logEntriesPerPage = 5;
+
+  const filteredLogEntries = useMemo(() => {
+    if (!filterText) return logEntries;
+    const lowerCaseFilter = filterText.toLowerCase();
+    return logEntries.filter((entry) =>
+      entry.message.toLowerCase().includes(lowerCaseFilter),
+    );
+  }, [logEntries, filterText]);
+
+  const logEntriesFromCurrentPage = useMemo(
+    () =>
+      filteredLogEntries.slice(
+        (page - 1) * logEntriesPerPage,
+        page * logEntriesPerPage,
+      ),
+    [filteredLogEntries, page],
+  );
+
+  useEffect(() => {
+    void filterText;
+    setPage(1);
+  }, [filterText]);
+
+  const downloadLogsAsJson = useCallback(() => {
+    const jsonString = JSON.stringify(logEntries, null, 2);
+    const blob = new Blob([jsonString], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = "logs.json";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  }, [logEntries]);
+
+  return (
+    <Modal opened={opened} onClose={onClose} size="xl" title="Logs">
+      <Alert variant="light" color="blue" icon={<IconInfoCircle />} mb="md">
+        <Group justify="space-between" align="center">
+          <span>
+            This information is stored solely in your browser for personal use.
+            It isn't sent automatically and is retained for debugging purposes
+            should you need to{" "}
+            <a
+              href="https://github.com/felladrin/MiniSearch/issues/new?labels=bug&template=bug_report.yml"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              report a bug
+            </a>
+            .
+          </span>
+          <Button onClick={downloadLogsAsJson} size="xs" data-autofocus>
+            Download Logs
+          </Button>
+        </Group>
+      </Alert>
+      <TextInput
+        placeholder="Filter logs..."
+        mb="md"
+        leftSection={<IconSearch size={16} />}
+        value={filterText}
+        onChange={(event) => setFilterText(event.currentTarget.value)}
+        rightSection={
+          filterText ? (
+            <Tooltip label="Clear filter" withArrow>
+              <CloseButton
+                size="sm"
+                onClick={() => setFilterText("")}
+                aria-label="Clear filter"
+              />
+            </Tooltip>
+          ) : null
+        }
+      />
+      <Table striped highlightOnHover withTableBorder>
+        <Table.Thead>
+          <Table.Tr>
+            <Table.Th style={{ width: 80 }}>Time</Table.Th>
+            <Table.Th>Message</Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>
+          {logEntriesFromCurrentPage.map((entry, index) => (
+            <Table.Tr key={`${entry.timestamp}-${index}`}>
+              <Table.Td>
+                {new Date(entry.timestamp).toLocaleTimeString()}
+              </Table.Td>
+              <Table.Td>{entry.message}</Table.Td>
+            </Table.Tr>
+          ))}
+        </Table.Tbody>
+      </Table>
+      <Center>
+        <Pagination
+          total={Math.ceil(filteredLogEntries.length / logEntriesPerPage)}
+          value={page}
+          onChange={setPage}
+          size="sm"
+          mt="md"
+        />
+      </Center>
+    </Modal>
+  );
+}

client/components/Logs/ShowLogsButton.tsx

@@ -0,0 +1,42 @@
+import { Button, Center, Loader, Stack, Text } from "@mantine/core";
+import { lazy, Suspense, useState } from "react";
+import { addLogEntry } from "@/modules/logEntries";
+
+const LogsModal = lazy(() => import("./LogsModal"));
+
+export default function ShowLogsButton() {
+  const [isLogsModalOpen, setLogsModalOpen] = useState(false);
+
+  const handleShowLogsButtonClick = () => {
+    addLogEntry("User opened the logs modal");
+    setLogsModalOpen(true);
+  };
+
+  const handleCloseLogsButtonClick = () => {
+    addLogEntry("User closed the logs modal");
+    setLogsModalOpen(false);
+  };
+
+  return (
+    <Stack gap="xs">
+      <Suspense
+        fallback={
+          <Center>
+            <Loader color="gray" type="bars" />
+          </Center>
+        }
+      >
+        <Button size="sm" onClick={handleShowLogsButtonClick} variant="default">
+          Show logs
+        </Button>
+        <Text size="xs" c="dimmed">
+          View session logs for debugging.
+        </Text>
+        <LogsModal
+          opened={isLogsModalOpen}
+          onClose={handleCloseLogsButtonClick}
+        />
+      </Suspense>
+    </Stack>
+  );
+}

client/components/Pages/AccessPage.tsx

@@ -0,0 +1,70 @@
+import { Button, Container, Stack, TextInput, Title } from "@mantine/core";
+import { type FormEvent, useState } from "react";
+import { validateAccessKey } from "@/modules/accessKey";
+import { addLogEntry } from "@/modules/logEntries";
+
+interface AccessPageState {
+  accessKey: string;
+  error: string;
+}
+
+export default function AccessPage({
+  onAccessKeyValid,
+}: {
+  onAccessKeyValid: () => void;
+}) {
+  const [state, setState] = useState<AccessPageState>({
+    accessKey: "",
+    error: "",
+  });
+
+  const handleSubmit = async (formEvent: FormEvent<HTMLFormElement>) => {
+    formEvent.preventDefault();
+    setState((prev) => ({ ...prev, error: "" }));
+    try {
+      const isValid = await validateAccessKey(state.accessKey);
+      if (isValid) {
+        addLogEntry("Valid access key entered");
+        onAccessKeyValid();
+      } else {
+        setState((prev) => ({ ...prev, error: "Invalid access key" }));
+        addLogEntry("Invalid access key attempt");
+      }
+    } catch (error) {
+      setState((prev) => ({ ...prev, error: "Error validating access key" }));
+      addLogEntry(`Error validating access key: ${error}`);
+    }
+  };
+
+  return (
+    <Container size="xs">
+      <Stack p="lg" mih="100vh" justify="center">
+        <Title order={2} ta="center">
+          Access Restricted
+        </Title>
+        <form onSubmit={handleSubmit}>
+          <Stack gap="xs">
+            <TextInput
+              value={state.accessKey}
+              onChange={({ target }) =>
+                setState((prev) => ({ ...prev, accessKey: target.value }))
+              }
+              placeholder="Enter your access key to continue"
+              required
+              autoFocus
+              error={state.error}
+              styles={{
+                input: {
+                  textAlign: "center",
+                },
+              }}
+            />
+            <Button size="xs" type="submit">
+              Submit
+            </Button>
+          </Stack>
+        </form>
+      </Stack>
+    </Container>
+  );
+}

client/components/Pages/Main/MainPage.test.tsx

@@ -0,0 +1,110 @@
+import { describe, expect, it } from "vitest";
+
+describe("MainPage component logic", () => {
+  it("should show results only when query is not empty", () => {
+    const isQueryEmpty = (query: string) => query.length === 0;
+
+    expect(isQueryEmpty("")).toBe(true);
+    expect(isQueryEmpty("test query")).toBe(false);
+    expect(isQueryEmpty("   ")).toBe(false);
+  });
+
+  it("should determine when to show search results section", () => {
+    const shouldShowSearchResults = (
+      textSearchState: string,
+      imageSearchState: string,
+    ) => textSearchState !== "idle" || imageSearchState !== "idle";
+
+    expect(shouldShowSearchResults("idle", "idle")).toBe(false);
+    expect(shouldShowSearchResults("loading", "idle")).toBe(true);
+    expect(shouldShowSearchResults("idle", "loading")).toBe(true);
+    expect(shouldShowSearchResults("success", "success")).toBe(true);
+  });
+
+  it("should determine when to show AI response section", () => {
+    const shouldShowAiResponse = (
+      textGenerationState: string,
+      showEnableAiResponsePrompt: boolean,
+    ) => !showEnableAiResponsePrompt && textGenerationState !== "idle";
+
+    expect(shouldShowAiResponse("idle", false)).toBe(false);
+    expect(shouldShowAiResponse("generating", false)).toBe(true);
+    expect(shouldShowAiResponse("generating", true)).toBe(false);
+    expect(shouldShowAiResponse("complete", false)).toBe(true);
+  });
+
+  it("should determine when to show enable AI prompt", () => {
+    const shouldShowEnablePrompt = (showEnableAiResponsePrompt: boolean) =>
+      showEnableAiResponsePrompt;
+
+    expect(shouldShowEnablePrompt(true)).toBe(true);
+    expect(shouldShowEnablePrompt(false)).toBe(false);
+  });
+
+  it("should combine conditions correctly for full page state", () => {
+    interface PageState {
+      query: string;
+      textSearchState: string;
+      imageSearchState: string;
+      textGenerationState: string;
+      showEnableAiResponsePrompt: boolean;
+    }
+
+    const getVisibleSections = (state: PageState) => {
+      const isQueryEmpty = state.query.length === 0;
+      return {
+        showResults:
+          !isQueryEmpty &&
+          (state.textSearchState !== "idle" ||
+            state.imageSearchState !== "idle"),
+        showAiResponse:
+          !isQueryEmpty &&
+          !state.showEnableAiResponsePrompt &&
+          state.textGenerationState !== "idle",
+        showEnablePrompt: !isQueryEmpty && state.showEnableAiResponsePrompt,
+      };
+    };
+
+    expect(
+      getVisibleSections({
+        query: "",
+        textSearchState: "success",
+        imageSearchState: "idle",
+        textGenerationState: "generating",
+        showEnableAiResponsePrompt: false,
+      }),
+    ).toEqual({
+      showResults: false,
+      showAiResponse: false,
+      showEnablePrompt: false,
+    });
+
+    expect(
+      getVisibleSections({
+        query: "test",
+        textSearchState: "success",
+        imageSearchState: "idle",
+        textGenerationState: "generating",
+        showEnableAiResponsePrompt: false,
+      }),
+    ).toEqual({
+      showResults: true,
+      showAiResponse: true,
+      showEnablePrompt: false,
+    });
+
+    expect(
+      getVisibleSections({
+        query: "test",
+        textSearchState: "idle",
+        imageSearchState: "idle",
+        textGenerationState: "idle",
+        showEnableAiResponsePrompt: true,
+      }),
+    ).toEqual({
+      showResults: false,
+      showAiResponse: false,
+      showEnablePrompt: true,
+    });
+  });
+});

client/components/Pages/Main/MainPage.tsx

@@ -0,0 +1,81 @@
+import { Container, Stack } from "@mantine/core";
+import { usePubSub } from "create-pubsub/react";
+import { lazy, Suspense } from "react";
+import SearchForm from "@/components/Search/Form/SearchForm";
+import {
+  imageSearchStatePubSub,
+  queryPubSub,
+  settingsPubSub,
+  textGenerationStatePubSub,
+  textSearchStatePubSub,
+} from "@/modules/pubSub";
+import { searchAndRespond } from "@/modules/textGeneration";
+import MenuButton from "./Menu/MenuButton";
+
+const AiResponseSection = lazy(
+  () => import("@/components/AiResponse/AiResponseSection"),
+);
+const SearchResultsSection = lazy(
+  () => import("@/components/Search/Results/SearchResultsSection"),
+);
+const EnableAiResponsePrompt = lazy(
+  () => import("@/components/AiResponse/EnableAiResponsePrompt"),
+);
+
+export default function MainPage() {
+  const [query, updateQuery] = usePubSub(queryPubSub);
+  const [textSearchState] = usePubSub(textSearchStatePubSub);
+  const [imageSearchState] = usePubSub(imageSearchStatePubSub);
+  const [textGenerationState] = usePubSub(textGenerationStatePubSub);
+  const [settings, setSettings] = usePubSub(settingsPubSub);
+
+  const isQueryEmpty = query.length === 0;
+
+  return (
+    <Container>
+      <Stack py="md" mih="100vh" justify={isQueryEmpty ? "center" : undefined}>
+        <SearchForm
+          query={query}
+          updateQuery={updateQuery}
+          additionalButtons={<MenuButton />}
+        />
+        {!isQueryEmpty && (
+          <>
+            {settings.showEnableAiResponsePrompt && (
+              <Suspense>
+                <EnableAiResponsePrompt
+                  onAccept={() => {
+                    setSettings({
+                      ...settings,
+                      showEnableAiResponsePrompt: false,
+                      enableAiResponse: true,
+                    });
+                    searchAndRespond();
+                  }}
+                  onDecline={() => {
+                    setSettings({
+                      ...settings,
+                      showEnableAiResponsePrompt: false,
+                      enableAiResponse: false,
+                    });
+                  }}
+                />
+              </Suspense>
+            )}
+            {!settings.showEnableAiResponsePrompt &&
+              textGenerationState !== "idle" && (
+                <Suspense>
+                  <AiResponseSection />
+                </Suspense>
+              )}
+            {(textSearchState !== "idle" || imageSearchState !== "idle") && (
+              <Suspense>
+                <SearchResultsSection />
+              </Suspense>
+            )}
+          </>
+        )}
+      </Stack>
+    </Container>
+  );
+}

client/components/Pages/Main/Menu/AISettings/AISettingsForm.tsx

@@ -0,0 +1,205 @@
+import { Select, Slider, Stack, Switch, Text, TextInput } from "@mantine/core";
+import { useForm } from "@mantine/form";
+import { usePubSub } from "create-pubsub/react";
+import { useMemo } from "react";
+import { settingsPubSub } from "@/modules/pubSub";
+import { defaultSettings, inferenceTypes } from "@/modules/settings";
+import { isWebGPUAvailable } from "@/modules/webGpu";
+import { AIParameterSlider } from "./components/AIParameterSlider";
+import { BrowserSettings } from "./components/BrowserSettings";
+import { HordeSettings } from "./components/HordeSettings";
+import { OpenAISettings } from "./components/OpenAISettings";
+import { SystemPromptInput } from "./components/SystemPromptInput";
+import { useHordeModels } from "./hooks/useHordeModels";
+import { useHordeUserInfo } from "./hooks/useHordeUserInfo";
+import { useOpenAiModels } from "./hooks/useOpenAiModels";
+
+export default function AISettingsForm() {
+  const [settings, setSettings] = usePubSub(settingsPubSub);
+  const { openAiModels, useTextInput } = useOpenAiModels(settings);
+  const hordeModels = useHordeModels(settings);
+  const hordeUserInfo = useHordeUserInfo(settings);
+
+  const form = useForm({
+    initialValues: settings,
+    onValuesChange: setSettings,
+  });
+
+  const inferenceTypeSupportsMinP =
+    (form.values.inferenceType === "browser" &&
+      (!isWebGPUAvailable || !form.values.enableWebGpu)) ||
+    form.values.inferenceType === "horde";
+
+  const penaltySliderMarks = useMemo(
+    () => [
+      { value: -2.0, label: "-2.0" },
+      { value: 0.0, label: "0" },
+      { value: 2.0, label: "2.0" },
+    ],
+    [],
+  );
+
+  const probabilitySliderMarks = useMemo(
+    () =>
+      Array.from({ length: 3 }, (_, index) => ({
+        value: index / 2,
+        label: (index / 2).toString(),
+      })),
+    [],
+  );
+
+  const searchResultsToConsiderSliderMarks = useMemo(
+    () =>
+      Array.from({ length: 7 }, (_, index) => ({
+        value: index,
+        label: index.toString(),
+      })),
+    [],
+  );
+
+  const temperatureSliderMarks = useMemo(
+    () => [
+      { value: 0, label: "0" },
+      { value: 1, label: "1" },
+      { value: 2, label: "2" },
+    ],
+    [],
+  );
+
+  return (
+    <Stack gap="md">
+      <Switch
+        label="AI Response"
+        {...form.getInputProps("enableAiResponse", { type: "checkbox" })}
+        labelPosition="left"
+        description="Enable or disable AI-generated responses to your queries. When disabled, you'll only see web search results."
+      />
+
+      {form.values.enableAiResponse && (
+        <>
+          <Stack gap="xs" mb="md">
+            <Text size="sm">Search results to consider</Text>
+            <Text size="xs" c="dimmed">
+              Determines the number of search results to consider when
+              generating AI responses. A higher value may enhance accuracy, but
+              it will also increase response time.
+            </Text>
+            <Slider
+              {...form.getInputProps("searchResultsToConsider")}
+              min={0}
+              max={6}
+              marks={searchResultsToConsiderSliderMarks}
+            />
+          </Stack>
+
+          <Select
+            {...form.getInputProps("inferenceType")}
+            label="AI Processing Location"
+            data={inferenceTypes}
+            allowDeselect={false}
+          />
+
+          {form.values.inferenceType === "openai" && (
+            <OpenAISettings
+              form={form}
+              openAiModels={openAiModels}
+              useTextInput={useTextInput}
+            />
+          )}
+
+          {form.values.inferenceType === "horde" && (
+            <HordeSettings
+              form={form}
+              hordeUserInfo={hordeUserInfo}
+              hordeModels={hordeModels}
+            />
+          )}
+
+          {form.values.inferenceType === "browser" && (
+            <BrowserSettings
+              form={form}
+              isWebGPUAvailable={isWebGPUAvailable}
+            />
+          )}
+
+          <SystemPromptInput form={form} />
+
+          <AIParameterSlider
+            label="Temperature"
+            description="Controls randomness in responses. Lower values make responses more focused and deterministic, while higher values make them more creative and diverse."
+            defaultValue={defaultSettings.inferenceTemperature}
+            {...form.getInputProps("inferenceTemperature")}
+            min={0}
+            max={2}
+            step={0.01}
+            marks={temperatureSliderMarks}
+          />
+
+          <AIParameterSlider
+            label="Top P"
+            description="Controls diversity by limiting cumulative probability of tokens. Lower values make responses more focused, while higher values allow more variety."
+            defaultValue={defaultSettings.inferenceTopP}
+            {...form.getInputProps("inferenceTopP")}
+            min={0}
+            max={1}
+            step={0.01}
+            marks={probabilitySliderMarks}
+          />
+
+          {inferenceTypeSupportsMinP && (
+            <AIParameterSlider
+              label="Min P"
+              description="Sets a minimum probability for token selection. Helps to filter out very unlikely tokens, making responses more coherent."
+              defaultValue={defaultSettings.minP}
+              {...form.getInputProps("minP")}
+              min={0}
+              max={1}
+              step={0.01}
+              marks={probabilitySliderMarks}
+            />
+          )}
+
+          <AIParameterSlider
+            label="Frequency Penalty"
+            description="Reduces repetition by penalizing tokens based on their frequency. Higher values decrease the likelihood of repeating the same information."
+            defaultValue={defaultSettings.inferenceFrequencyPenalty}
+            {...form.getInputProps("inferenceFrequencyPenalty")}
+            min={-2.0}
+            max={2.0}
+            step={0.01}
+            marks={penaltySliderMarks}
+          />
+
+          <AIParameterSlider
+            label="Presence Penalty"
+            description="Encourages new topics by penalizing tokens that have appeared. Higher values increase the model's likelihood to talk about new topics."
+            defaultValue={defaultSettings.inferencePresencePenalty}
+            {...form.getInputProps("inferencePresencePenalty")}
+            min={-2.0}
+            max={2.0}
+            step={0.01}
+            marks={penaltySliderMarks}
+          />
+
+          <Stack gap="xs" mb="md">
+            <Text size="sm">Reasoning Section Parsing</Text>
+            <Text size="xs" c="dimmed">
+              Configure how the AI's reasoning section is parsed in the
+              response.
+            </Text>
+            <Stack gap="xs">
+              <TextInput
+                {...form.getInputProps("reasoningStartMarker")}
+                description="Start Marker, indicating the start of a reasoning section."
+              />
+              <TextInput
+                {...form.getInputProps("reasoningEndMarker")}
+                description="End Marker, indicating the end of a reasoning section."
+              />
+            </Stack>
+          </Stack>
+        </>
+      )}
+    </Stack>
+  );
+}

client/components/Pages/Main/Menu/AISettings/components/AIParameterSlider.tsx

@@ -0,0 +1,24 @@
+import { Slider, Stack, Text } from "@mantine/core";
+import type { AIParameterSliderProps } from "../types";
+
+/**
+ * Slider component for AI parameters with label and description
+ * @param label - The parameter label
+ * @param description - Parameter description text
+ * @param defaultValue - Default value for the parameter
+ * @param props - Additional props to pass to Slider component
+ */
+export const AIParameterSlider = ({
+  label,
+  description,
+  defaultValue,
+  ...props
+}: AIParameterSliderProps) => (
+  <Stack gap="xs" mb="md">
+    <Text size="sm">{label}</Text>
+    <Text size="xs" c="dimmed">
+      {description} Defaults to {defaultValue}.
+    </Text>
+    <Slider {...props} />
+  </Stack>
+);

client/components/Pages/Main/Menu/AISettings/components/BrowserSettings.tsx

@@ -0,0 +1,69 @@
+import { NumberInput, Skeleton, Switch } from "@mantine/core";
+import type { UseFormReturnType } from "@mantine/form";
+import { lazy, Suspense } from "react";
+import type { defaultSettings } from "@/modules/settings";
+
+const WebLlmModelSelect = lazy(
+  () => import("@/components/AiResponse/WebLlmModelSelect"),
+);
+const WllamaModelSelect = lazy(
+  () => import("@/components/AiResponse/WllamaModelSelect"),
+);
+
+/**
+ * Props for the BrowserSettings component
+ */
+interface BrowserSettingsProps {
+  /** Form instance for managing browser AI settings */
+  form: UseFormReturnType<typeof defaultSettings>;
+  /** Whether WebGPU is available in the current browser */
+  isWebGPUAvailable: boolean;
+}
+
+/**
+ * Component for managing browser-based AI settings.
+ * Provides controls for WebGPU/CPU selection, model selection, and CPU thread configuration.
+ */
+export const BrowserSettings = ({
+  form,
+  isWebGPUAvailable,
+}: BrowserSettingsProps) => (
+  <>
+    {isWebGPUAvailable && (
+      <Switch
+        label="WebGPU"
+        {...form.getInputProps("enableWebGpu", { type: "checkbox" })}
+        labelPosition="left"
+        description="Enable or disable WebGPU usage. When disabled, the app will use the CPU instead."
+      />
+    )}
+
+    {isWebGPUAvailable && form.values.enableWebGpu ? (
+      <Suspense fallback={<Skeleton height={50} />}>
+        <WebLlmModelSelect
+          value={form.values.webLlmModelId}
+          onChange={(value: string) =>
+            form.setFieldValue("webLlmModelId", value)
+          }
+        />
+      </Suspense>
+    ) : (
+      <>
+        <Suspense fallback={<Skeleton height={50} />}>
+          <WllamaModelSelect
+            value={form.values.wllamaModelId}
+            onChange={(value: string) =>
+              form.setFieldValue("wllamaModelId", value)
+            }
+          />
+        </Suspense>
+        <NumberInput
+          label="CPU threads to use"
+          description="Number of threads to use for the AI model. Lower values will use less CPU but may take longer to respond. A value that is too high may cause the app to hang."
+          min={1}
+          {...form.getInputProps("cpuThreads")}
+        />
+      </>
+    )}
+  </>
+);

client/components/Pages/Main/Menu/AISettings/components/HordeSettings.tsx

@@ -0,0 +1,54 @@
+import { Select, TextInput } from "@mantine/core";
+import type { UseFormReturnType } from "@mantine/form";
+import type { defaultSettings } from "@/modules/settings";
+import { aiHordeDefaultApiKey } from "@/modules/textGenerationWithHorde";
+import type { HordeUserInfo, ModelOption } from "../types";
+
+/**
+ * Props for the HordeSettings component
+ */
+interface HordeSettingsProps {
+  /** Form instance for managing Horde AI settings */
+  form: UseFormReturnType<typeof defaultSettings>;
+  /** User information from AI Horde, or null if not logged in */
+  hordeUserInfo: HordeUserInfo | null;
+  /** Available models from AI Horde */
+  hordeModels: ModelOption[];
+}
+
+/**
+ * Component for managing AI Horde settings.
+ * Provides controls for API key input and model selection.
+ */
+export const HordeSettings = ({
+  form,
+  hordeUserInfo,
+  hordeModels,
+}: HordeSettingsProps) => (
+  <>
+    <TextInput
+      label="API Key"
+      description={
+        hordeUserInfo
+          ? `Logged in as ${
+              hordeUserInfo.username
+            } (${hordeUserInfo.kudos.toLocaleString()} kudos)`
+          : "By default, it's set to '0000000000', for anonymous access. However, anonymous accounts have the lowest priority when there's too many concurrent requests."
+      }
+      type="password"
+      {...form.getInputProps("hordeApiKey")}
+    />
+    {form.values.hordeApiKey.length > 0 &&
+      form.values.hordeApiKey !== aiHordeDefaultApiKey && (
+        <Select
+          label="Model"
+          description="Optional. When not selected, AI Horde will automatically choose an available model."
+          placeholder="Auto-selected"
+          data={hordeModels}
+          {...form.getInputProps("hordeModel")}
+          searchable
+          clearable
+        />
+      )}
+  </>
+);

client/components/Pages/Main/Menu/AISettings/components/OpenAISettings.tsx

@@ -0,0 +1,76 @@
+import { Group, NumberInput, Select, Text, TextInput } from "@mantine/core";
+import type { UseFormReturnType } from "@mantine/form";
+import { IconInfoCircle } from "@tabler/icons-react";
+import { defaultSettings } from "@/modules/settings";
+import type { ModelOption } from "../types";
+
+/**
+ * Props for the OpenAISettings component
+ */
+interface OpenAISettingsProps {
+  /** Form instance for managing OpenAI API settings */
+  form: UseFormReturnType<typeof defaultSettings>;
+  /** Available OpenAI-compatible models */
+  openAiModels: ModelOption[];
+  /** Whether to use text input instead of select for model */
+  useTextInput: boolean;
+}
+
+/**
+ * Component for managing OpenAI API settings.
+ * Provides controls for API base URL, API key, model selection, and context length.
+ */
+export const OpenAISettings = ({
+  form,
+  openAiModels,
+  useTextInput,
+}: OpenAISettingsProps) => (
+  <>
+    <TextInput
+      {...form.getInputProps("openAiApiBaseUrl")}
+      label="API Base URL"
+      placeholder="http://localhost:11434/v1"
+      required
+    />
+    <Group gap="xs">
+      <IconInfoCircle size={16} />
+      <Text size="xs" c="dimmed" flex={1}>
+        You may need to add{" "}
+        <em>{`${self.location.protocol}//${self.location.hostname}`}</em> to the
+        list of allowed network origins in your API server settings.
+      </Text>
+    </Group>
+    <TextInput
+      {...form.getInputProps("openAiApiKey")}
+      label="API Key"
+      type="password"
+      description="Optional, as local API servers usually do not require it."
+    />
+    {useTextInput ? (
+      <TextInput
+        {...form.getInputProps("openAiApiModel")}
+        label="API Model"
+        description="Enter the model identifier"
+      />
+    ) : (
+      <Select
+        {...form.getInputProps("openAiApiModel")}
+        label="API Model"
+        data={openAiModels}
+        description="Optional, as some API servers don't provide a model list."
+        allowDeselect={false}
+        disabled={openAiModels.length === 0}
+        searchable
+        clearable
+      />
+    )}
+    <NumberInput
+      label="Context Length"
+      description={`Maximum number of tokens the model can consider. Defaults to ${defaultSettings.openAiContextLength}.`}
+      defaultValue={defaultSettings.openAiContextLength}
+      {...form.getInputProps("openAiContextLength")}
+      step={defaultSettings.openAiContextLength}
+      min={defaultSettings.openAiContextLength}
+    />
+  </>
+);

client/components/Pages/Main/Menu/AISettings/components/SystemPromptInput.tsx

@@ -0,0 +1,113 @@
+import { Text, Textarea } from "@mantine/core";
+import type { UseFormReturnType } from "@mantine/form";
+import { defaultSettings } from "@/modules/settings";
+
+/**
+ * Props for the SystemPromptInput component
+ */
+interface SystemPromptInputProps {
+  /** Form instance for managing system prompt settings */
+  form: UseFormReturnType<typeof defaultSettings>;
+}
+
+/**
+ * Component for managing system prompt/instructions for AI.
+ * Provides a textarea for customizing AI behavior with examples and restore functionality.
+ */
+export const SystemPromptInput = ({ form }: SystemPromptInputProps) => {
+  const isUsingCustomInstructions =
+    form.values.systemPrompt !== defaultSettings.systemPrompt;
+
+  /**
+   * Handles restoring the default system prompt instructions
+   */
+  const handleRestoreDefaultInstructions = () => {
+    form.setFieldValue("systemPrompt", defaultSettings.systemPrompt);
+  };
+
+  return (
+    <Textarea
+      size="sm"
+      label="Instructions for AI"
+      descriptionProps={{
+        // @ts-expect-error Mantine v7: `InputDescriptionProps` does not support `component`.
+        component: "div",
+      }}
+      description={
+        <>
+          <Text size="xs" component="span">
+            Customize instructions for the AI to tailor its responses.
+          </Text>
+          <ul>
+            <li>
+              Specify preferences
+              <ul>
+                <li>
+                  <em>"use simple language"</em>
+                </li>
+                <li>
+                  <em>"provide step-by-step explanations"</em>
+                </li>
+              </ul>
+            </li>
+            <li>
+              Set a response style
+              <ul>
+                <li>
+                  <em>"answer in a friendly tone"</em>
+                </li>
+                <li>
+                  <em>"write your response in Spanish"</em>
+                </li>
+              </ul>
+            </li>
+            <li>
+              Provide context about the audience
+              <ul>
+                <li>
+                  <em>"you're talking to a high school student"</em>
+                </li>
+                <li>
+                  <em>
+                    "consider that your audience is composed of professionals in
+                    the field of graphic design"
+                  </em>
+                </li>
+              </ul>
+            </li>
+          </ul>
+
+          <Text size="xs" component="span">
+            The special tag <em>{"{{searchResults}}"}</em> will be replaced with
+            the search results, while <em>{"{{currentDate}}"}</em> will be
+            replaced with the current date.
+          </Text>
+
+          {isUsingCustomInstructions && (
+            <>
+              <br />
+              <br />
+              <Text size="xs" component="span">
+                Currently, you're using custom instructions. If you ever need to
+                restore the default instructions, you can do so by clicking{" "}
+                <Text
+                  component="span"
+                  size="xs"
+                  c="blue"
+                  style={{ cursor: "pointer" }}
+                  onClick={handleRestoreDefaultInstructions}
+                >
+                  here
+                </Text>
+                .
+              </Text>
+            </>
+          )}
+        </>
+      }
+      autosize
+      maxRows={10}
+      {...form.getInputProps("systemPrompt")}
+    />
+  );
+};