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/CODE_OF_CONDUCT.md

@@ -0,0 +1,84 @@
+# Contributor Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our community a harassment-free experience for everyone, regardless of age, body size, visible or invisible disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our community include:
+
+* Demonstrating empathy and kindness toward other people
+* Being respectful of differing opinions, viewpoints, and experiences
+* Giving and gracefully accepting constructive feedback
+* Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience
+* Focusing on what is best not just for us as individuals, but for the overall community
+
+Examples of unacceptable behavior include:
+
+* The use of sexualized language or imagery, and sexual attention or advances of any kind
+* Trolling, insulting or derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or email address, without their explicit permission
+* Other conduct which could reasonably be considered inappropriate in a professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of acceptable behavior and will take appropriate and fair corrective action in response to any behavior that they deem inappropriate, threatening, offensive, or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, and will communicate reasons for moderation decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when an individual is officially representing the community in public spaces. Examples of representing our community include using an official e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported to the community leaders responsible for enforcement at:
+
+- GitHub: [@felladrin](https://github.com/felladrin)
+- Email: (private contact can be provided upon request)
+
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing clarity around the nature of the violation and an explanation of why the behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series of actions.
+
+**Consequence**: A warning with consequences for continued behavior. No interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, for a specified period of time. This includes avoiding interactions in community spaces as well as external channels like social media. Violating these terms may lead to a temporary or permanent ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public communication with the community for a specified period of time. No public or private interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, is allowed during this period. Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community standards, including sustained inappropriate behavior, harassment of an individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within the community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 2.0, available at https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
+
+Community Impact Guidelines were inspired by [Mozilla's code of conduct enforcement ladder](https://github.com/mozilla/diversity).
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see https://www.contributor-covenant.org/faq. Translations are available at https://www.contributor-covenant.org/translations.

.github/CONTRIBUTING.md

@@ -0,0 +1,130 @@
+# Contributing to MiniSearch
+
+First off, thank you for considering contributing to MiniSearch! It's people like you that make MiniSearch such a great tool.
+
+## How to Contribute
+
+### Reporting Bugs
+
+- Use the [GitHub issue tracker](https://github.com/felladrin/MiniSearch/issues) to report bugs
+- Check if the issue has already been reported before creating a new one
+- Provide clear steps to reproduce the issue
+- Include your environment details (OS, browser, Docker version if applicable)
+- Add screenshots if the issue is UI-related
+
+### Suggesting Features
+
+- Use the [GitHub issue tracker](https://github.com/felladrin/MiniSearch/issues) for feature suggestions
+- Clearly describe the feature and why it would be useful
+- Consider if it fits with the project's minimalist philosophy
+- Provide examples of how you envision the feature working
+
+### Development Setup
+
+1. Fork the repository and clone it locally
+2. Make sure you have [Docker](https://docs.docker.com/get-docker/) installed
+3. Start the development server:
+   ```bash
+   docker compose up
+   ```
+4. The application will be available at http://localhost:7860
+5. Make your changes
+6. Test your changes thoroughly
+7. Push to your fork and create a pull request
+
+### Running Tests
+
+```bash
+docker compose exec development-server npm run test
+```
+
+For coverage:
+```bash
+docker compose exec development-server npm run test:coverage
+```
+
+### Code Quality
+
+Before submitting a pull request, please run:
+```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
+
+## Contribution Guidelines
+
+### Types of Contributions We're Looking For
+
+- **Bug fixes**: Always welcome!
+- **Documentation improvements**: Better docs help everyone
+- **Performance optimizations**: Especially for search and AI features
+- **UI/UX improvements**: Keeping the minimalist yet intuitive design
+- **New AI model integrations**: Following existing patterns
+- **Security enhancements**: Following security best practices
+
+### Project Vision
+
+MiniSearch aims to be a minimalist, privacy-focused web search application with AI assistance. We prioritize:
+- Privacy and security
+- Simplicity and ease of use
+- Cross-platform compatibility
+- Efficient resource usage
+
+### Getting in Touch
+
+- For questions about contributions: Use GitHub discussions
+- For security issues: See [SECURITY.md](SECURITY.md)
+- For general questions: Use GitHub issues
+
+## Pull Request Process
+
+1. Fork the repository
+2. Create a feature branch (`git checkout -b feature/amazing-feature`)
+3. Make your changes
+4. Add tests if applicable
+5. Ensure all tests pass and linting succeeds
+6. Commit your changes (`git commit -m 'Add some amazing feature'`)
+7. Push to the branch (`git push origin feature/amazing-feature`)
+8. Open a Pull Request
+
+### Pull Request Guidelines
+
+- Keep PRs focused on a single feature or fix
+- Write clear commit messages
+- Update documentation if needed
+- Ensure your code follows the existing style
+- Be responsive to feedback and reviews
+
+## Development Commands
+
+```bash
+# Start development server
+docker compose up
+
+# Run tests
+docker compose exec development-server npm run test
+
+# Run linting
+docker compose exec development-server npm run lint
+
+# Build for production
+docker compose -f docker-compose.production.yml build
+
+# View test coverage
+docker compose exec development-server npm run test:coverage
+```
+
+## Questions?
+
+Don't hesitate to ask questions! We're here to help you contribute successfully.
+
+---
+
+Thanks again for your interest in contributing to MiniSearch! 🎉

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,123 @@
+---
+name: Bug report
+description: Create a report to help us improve
+title: "[BUG] "
+labels: ["bug"]
+assignees: []
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for taking the time to fill out this bug report! Please provide as much detail as possible.
+
+  - type: textarea
+    id: bug-description
+    attributes:
+      label: Describe the bug
+      description: A clear and concise description of what the bug is
+      placeholder: What happened? What did you expect to happen?
+    validations:
+      required: true
+
+  - type: textarea
+    id: steps-to-reproduce
+    attributes:
+      label: Steps to reproduce
+      description: Please provide detailed steps to reproduce the issue
+      placeholder: |
+        1. Go to '...'
+        2. Click on '....'
+        3. Scroll down to '....'
+        4. See error
+    validations:
+      required: true
+
+  - type: textarea
+    id: expected-behavior
+    attributes:
+      label: Expected behavior
+      description: A clear and concise description of what you expected to happen
+    validations:
+      required: true
+
+  - type: textarea
+    id: screenshots
+    attributes:
+      label: Screenshots
+      description: If applicable, add screenshots to help explain your problem
+      placeholder: Drag and drop images here or paste them
+
+  - type: dropdown
+    id: os
+    attributes:
+      label: Operating System
+      description: What operating system are you using?
+      options:
+        - Windows 11
+        - Windows 10
+        - macOS 15.x
+        - macOS 14.x
+        - macOS 13.x
+        - Ubuntu 22.04
+        - Ubuntu 20.04
+        - Other Linux
+        - Other
+    validations:
+      required: true
+
+  - type: dropdown
+    id: browser
+    attributes:
+      label: Browser
+      description: What browser are you using?
+      options:
+        - Chrome
+        - Firefox
+        - Safari
+        - Edge
+        - Other
+    validations:
+      required: true
+
+  - type: input
+    id: version
+    attributes:
+      label: MiniSearch version
+      description: What version of MiniSearch are you using?
+      placeholder: latest, v1.0.0, etc.
+    validations:
+      required: true
+
+  - type: input
+    id: docker-version
+    attributes:
+      label: Docker version (if applicable)
+      description: What Docker version are you using?
+      placeholder: e.g., 24.0.7
+
+  - type: textarea
+    id: additional-context
+    attributes:
+      label: Additional context
+      description: Add any other context about the problem here
+
+  - type: dropdown
+    id: deployment-type
+    attributes:
+      label: Deployment type
+      description: How are you running MiniSearch?
+      options:
+        - Docker image
+        - Building from source
+        - Development server
+        - Other
+    validations:
+      required: true
+
+  - type: textarea
+    id: custom-config
+    attributes:
+      label: Custom configuration (if applicable)
+      description: Any custom configuration you're using
+      placeholder: Environment variables, custom settings, etc.
+---

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,73 @@
+---
+name: Feature request
+description: Suggest an idea for this project
+title: "[FEATURE] "
+labels: ["enhancement"]
+assignees: []
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for suggesting a new feature! Please provide as much detail as possible to help us understand your vision.
+
+  - type: textarea
+    id: problem-description
+    attributes:
+      label: Is your feature request related to a problem?
+      description: A clear and concise description of what the problem is
+      placeholder: I'm always frustrated when [...]
+    validations:
+      required: true
+
+  - type: textarea
+    id: solution-description
+    attributes:
+      label: Describe the solution you'd like
+      description: A clear and concise description of what you want to happen
+    validations:
+      required: true
+
+  - type: textarea
+    id: alternatives
+    attributes:
+      label: Describe alternatives you've considered
+      description: A clear and concise description of any alternative solutions or features you've considered
+
+  - type: textarea
+    id: additional-context
+    attributes:
+      label: Additional context
+      description: Add any other context or screenshots about the feature request here
+
+  - type: dropdown
+    id: alignment
+    attributes:
+      label: Alignment with MiniSearch's goals
+      description: How does this feature align with MiniSearch's minimalist, privacy-focused philosophy?
+      options:
+        - "Strongly aligns - enhances privacy/minimalism"
+        - "Moderately aligns - useful but adds complexity"
+        - "Needs consideration - potential trade-offs"
+        - "Not sure - need discussion"
+    validations:
+      required: true
+
+  - type: textarea
+    id: implementation-ideas
+    attributes:
+      label: Implementation ideas (optional)
+      description: Do you have any ideas about how this could be implemented?
+      placeholder: Technical thoughts, potential approaches, etc.
+
+  - type: dropdown
+    id: priority
+    attributes:
+      label: Priority (your assessment)
+      description: How important is this feature to you?
+      options:
+        - "High - would significantly improve my experience"
+        - "Medium - nice to have"
+        - "Low - minor improvement"
+    validations:
+      required: true
+---

.github/ISSUE_TEMPLATE/security_vulnerability.md

@@ -0,0 +1,98 @@
+---
+name: Security Vulnerability
+description: Report a security vulnerability (PRIVATE - will be converted to private report)
+title: "[SECURITY] "
+labels: ["security"]
+assignees: []
+body:
+  - type: markdown
+    attributes:
+      value: |
+        # ⚠️ IMPORTANT: SECURITY VULNERABILITIES SHOULD NOT BE REPORTED PUBLICLY ⚠️
+        
+        This template will create a public issue, but for security vulnerabilities, please use one of these private reporting methods:
+        
+        1. **Preferred**: Use GitHub's [Private Vulnerability Reporting](https://docs.github.com/en/code-security/security-advisories/guidance-on-reporting-and-writing/privately-reporting-a-security-vulnerability)
+        2. **Alternative**: Email the maintainer privately
+        
+        If you accidentally created a public issue, please close it and report privately instead.
+
+  - type: checkboxes
+    id: confirmation
+    attributes:
+      label: Confirmation
+      description: Please confirm you understand the security reporting process
+      options:
+        - label: I understand this should be reported privately and will use the methods above
+          required: true
+
+  - type: dropdown
+    id: vulnerability-type
+    attributes:
+      label: Vulnerability Type
+      description: What type of security vulnerability is this?
+      options:
+        - Cross-site Scripting (XSS)
+        - Authentication/Authorization Bypass
+        - Information Disclosure
+        - Remote Code Execution
+        - Denial of Service
+        - Configuration Issue
+        - Other
+    validations:
+      required: true
+
+  - type: dropdown
+    id: severity
+    attributes:
+      label: Severity
+      description: How severe is this vulnerability?
+      options:
+        - Critical
+        - High
+        - Medium
+        - Low
+    validations:
+      required: true
+
+  - type: textarea
+    id: description
+    attributes:
+      label: Description
+      description: A clear description of the security vulnerability
+    validations:
+      required: true
+
+  - type: textarea
+    id: steps-to-reproduce
+    attributes:
+      label: Steps to Reproduce
+      description: Detailed steps to reproduce the vulnerability
+    validations:
+      required: true
+
+  - type: textarea
+    id: impact
+    attributes:
+      label: Impact
+      description: Describe the potential impact of this vulnerability
+    validations:
+      required: true
+
+  - type: textarea
+    id: mitigation
+    attributes:
+      label: Mitigation (if known)
+      description: Any known workarounds or mitigations
+
+  - type: textarea
+    id: additional-information
+    attributes:
+      label: Additional Information
+      description: Any additional context or information about the vulnerability
+
+  - type: markdown
+    attributes:
+      value: |
+        ## 🚨 PLEASE DO NOT SUBMIT THIS PUBLICLY - USE PRIVATE REPORTING METHODS ABOVE 🚨
+---

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,44 @@
+## Description
+Brief description of what this PR changes.
+
+## Type of Change
+- [ ] Bug fix (non-breaking change that fixes an issue)
+- [ ] New feature (non-breaking change that adds functionality)
+- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
+- [ ] Documentation update
+- [ ] Security fix
+- [ ] Performance improvement
+- [ ] Code quality improvement
+
+## Testing
+- [ ] I have tested this change locally
+- [ ] I have added tests for this change
+- [ ] All existing tests pass
+- [ ] I have run the linter and it passes (`npm run lint`)
+
+## Checklist
+- [ ] My code follows the project's coding conventions
+- [ ] I have reviewed my own code
+- [ ] I have made corresponding changes to the documentation
+- [ ] My changes generate no new warnings
+- [ ] I have added tests that prove my fix is effective or that my feature works
+- [ ] New and existing unit tests pass locally with my changes
+- [ ] Any dependent changes have been merged and published in downstream modules
+
+## Screenshots (if applicable)
+Add screenshots to help explain your changes, especially for UI modifications.
+
+## Additional Context
+Add any other context about the problem here.
+
+## Security Considerations
+- [ ] This change does not introduce any security vulnerabilities
+- [ ] I have considered the security implications of this change
+- [ ] If this change handles user input, it has been properly sanitized/validated
+
+## Performance Impact
+- [ ] This change does not negatively impact performance
+- [ ] I have tested the performance impact of this change
+
+## Breaking Changes
+If this PR introduces breaking changes, please describe them here and how users should migrate.

.github/SECURITY.md

@@ -0,0 +1,135 @@
+# Security Policy
+
+## Supported Versions
+
+Only the latest version of MiniSearch receives security updates.
+
+| Version | Supported |
+|---------|------------|
+| Latest  | ✅         |
+| Older   | ❌         |
+
+## Reporting a Vulnerability
+
+### Private Vulnerability Reporting
+
+We strongly encourage using GitHub's [Private Vulnerability Reporting](https://docs.github.com/en/code-security/security-advisories/guidance-on-reporting-and-writing/privately-reporting-a-security-vulnerability) feature to report security vulnerabilities.
+
+**Do not report security vulnerabilities through public issues.**
+
+### How to Report
+
+1. **Preferred**: Use GitHub's Private Vulnerability Reporting
+2. **Alternative**: Email the maintainer privately at: (contact can be provided upon request)
+
+When reporting a vulnerability, please include:
+- A clear description of the vulnerability
+- Steps to reproduce the issue
+- Potential impact of the vulnerability
+- Any suggested mitigations (if known)
+
+### What to Expect
+
+- We will acknowledge receipt of your report within 48 hours
+- We will provide a detailed response within 7 days
+- We will work with you to understand and validate the report
+- We will coordinate disclosure timing to minimize user risk
+
+## Security Scope
+
+### In Scope
+
+- Vulnerabilities in the MiniSearch web application
+- Security issues in the Docker container configuration
+- Authentication and authorization bypasses
+- Cross-site scripting (XSS) vulnerabilities
+- Information disclosure issues
+- Remote code execution vulnerabilities
+- Privilege escalation in the application context
+
+### Out of Scope
+
+- Issues in third-party dependencies (report to respective projects)
+- Vulnerabilities in the underlying browser or Node.js runtime
+- Physical attacks on infrastructure
+- Social engineering attacks
+- Denial of service attacks that don't indicate a vulnerability
+- Issues requiring physical access to user devices
+
+## Threat Model
+
+### MiniSearch's Security Boundaries
+
+MiniSearch is designed as a privacy-focused search application with the following security assumptions:
+
+**Trust Boundaries:**
+- **Browser Environment**: The application runs entirely in the user's browser
+- **Server Component**: Optional backend for search and AI processing
+- **AI Models**: Local or remote AI processing with configurable endpoints
+
+**Data Flow:**
+- User queries are sent to SearXNG instances (configurable)
+- AI processing can be local (WebLLM/Wllama) or remote (API endpoints)
+- Search history is stored locally in the browser
+- No tracking or analytics by default
+
+**Security Controls:**
+- Optional access key protection for deployment
+- Configurable AI endpoints for privacy
+- Local-first data storage
+- No third-party tracking or analytics
+
+**Potential Risks:**
+- Malicious SearXNG instances could log queries
+- Remote AI endpoints could access user queries
+- Browser extensions could interfere with the application
+- Man-in-the-middle attacks without HTTPS
+
+## Security Best Practices
+
+### For Users
+
+- Always use HTTPS when accessing MiniSearch instances
+- Configure trusted SearXNG instances
+- Use local AI models for maximum privacy
+- Set access keys for deployed instances
+- Keep browsers updated
+
+### For Deployers
+
+- Use the official Docker image
+- Configure environment variables securely
+- Set up proper access controls
+- Use HTTPS in production
+- Regularly update dependencies
+- Monitor for security advisories
+
+## Security Features
+
+- **Access Key Protection**: Optional password-based access control
+- **Configurable Endpoints**: Users control search and AI providers
+- **Local Processing**: AI models can run entirely in the browser
+- **No Tracking**: Built without analytics or tracking
+- **HTTPS Ready**: Designed for secure deployment
+
+## Security Updates
+
+Security updates will be:
+- Released as new versions
+- Announced in release notes
+- Coordinated with dependency updates when applicable
+
+## Security Team
+
+The MiniSearch security team is currently the project maintainer:
+- [@felladrin](https://github.com/felladrin) - Project Maintainer
+
+## Acknowledgments
+
+We thank security researchers who help us keep MiniSearch secure. All valid security reports will be acknowledged in our release notes (with reporter permission).
+
+## Related Resources
+
+- [GitHub Security Advisories](https://docs.github.com/en/code-security/security-advisories)
+- [OWASP Web Security Testing Guide](https://owasp.org/www-project-web-security-testing-guide/)
+- [Mozilla Security Guidelines](https://infosec.mozilla.org/guidelines)

.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/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@v4
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@v6
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v4
+      - name: Build and push Docker Image
+        uses: docker/build-push-action@v7
+        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,2 @@
+#!/usr/bin/env sh
+npm install --no-save @biomejs/biome && npx @biomejs/biome check --write --staged --no-errors-on-unmatched && git diff --name-only --cached | while read -r file; do git add "$file"; done

.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,143 @@
+---
+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>We welcome contributions! Please read our <a href=".github/CONTRIBUTING.md">Contributing Guidelines</a> for detailed information on how to get started.</p>
+  <p>Quick start:</p>
+  <ol>
+    <li>Fork this repository and clone it</li>
+    <li>Start the development server: <code>docker compose up</code></li>
+    <li>Make your changes and test them</li>
+    <li>Push to your fork and open a pull request</li>
+  </ol>
+  <p>All contributions are welcome! 🎉</p>
+</details>
+
+<details>
+  <summary>Where can I find more information?</summary>
+  <ul>
+    <li><a href=".github/CONTRIBUTING.md">Contributing Guidelines</a> - How to contribute to MiniSearch</li>
+    <li><a href=".github/CODE_OF_CONDUCT.md">Code of Conduct</a> - Our community guidelines</li>
+    <li><a href=".github/SECURITY.md">Security Policy</a> - How to report security vulnerabilities</li>
+    <li><a href="docs/">Documentation</a> - Detailed project documentation</li>
+  </ul>
+</details>

agents.md

@@ -0,0 +1,176 @@
+# 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/index.tsx` - React app initialization
+- `vite.config.ts` - Vite dev server with hooks
+- `Dockerfile` - Multi-stage container build
+
+### Business Logic Modules
+- `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 Modules
+- `server/searchEndpointServerHook.ts` - `/search` endpoints
+- `server/internalApiEndpointServerHook.ts` - `/inference` proxy
+- `server/webSearchService.ts` - SearXNG integration
+- `server/rerankerService.ts` - Local result reranking
+
+### Key Components
+- `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
+- `client/modules/webGpu.ts` - Detects WebGPU availability and F16 shader support for WebLLM
+- `client/modules/querySuggestions.ts` - Provides search suggestion UI, stored in IndexedDB
+- `client/modules/relatedSearchQuery.ts` - Generates related search queries
+- `client/modules/followUpQuestions.ts` - Generates suggested follow-up questions, uses `followUpQuestionPubSub`
+- `client/modules/accessKey.ts` - Validates and stores access keys, uses `accessKeyValidatedPubSub`
+- `client/modules/parentWindow.ts` - PostMessage API for embedding in parent windows
+- `client/hooks/` - Reusable React hooks
+- `server/searchToken.ts` - Generates CSRF protection tokens for search requests
+- `server/downloadFileFromHuggingFaceRepository.ts` - Downloads GGUF models from HuggingFace using `@huggingface/hub` package
+
+## 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}-${message.content.slice(0, 50)}`}
+              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) => (
+            <Table.Tr key={entry.timestamp}>
+              <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>
+  );
+}