updated readme, added testing suite.

.specstory/history/2025-11-14_13-31Z-design-mobile-implementation-and-layout.md

@@ -10965,7 +10965,6 @@ we are not using npm, we are using pnpm and wrangler with open-next, i was able
 
 _**Agent (model claude-4.5-sonnet-thinking, mode Agent)**_
 
-
 Deploying to Cloudflare with Wrangler:
 
 
@@ -11685,3 +11684,51 @@ The key takeaway: Always run `npx @opennextjs/cloudflare build` before deploying
 
 ---
 
+_**User (2025-11-15 07:35Z)**_
+
+with what you've learned here, please write out a rule that enforces the deployment process
+
+---
+
+_**Agent (model default, mode Ask)**_
+
+<think><details><summary>Thought Process</summary>
+**Requesting rule description**</details></think>
+
+---
+
+Rule: **Always run `npx @opennextjs/cloudflare build` immediately before any deployment. Only after a successful OpenNext build should you run `npx wrangler deploy` (optionally with `--env=""` for the top-level environment). Deployments that skip the OpenNext build are not permitted, since Wrangler will otherwise push stale assets.**
+
+---
+
+_**User (2025-11-15 07:35Z)**_
+
+add to it, include any other relevant commands and troubleshooting details
+
+---
+
+_**Agent (model default, mode Ask)**_
+
+<think><details><summary>Thought Process</summary>
+**Requesting more details**</details></think>
+
+---
+
+Rule: **Deployment Checklist (must be followed exactly):**
+
+1. **Never use npm.** Always run commands with `pnpm` (e.g. `pnpm install`, `pnpm dev`, `pnpm build`).  
+2. **Before every deploy**, run the Cloudflare build step:
+   - `npx @opennextjs/cloudflare build`
+   - If this fails, fix the error before proceeding—Wrangler deploys without this step will push stale assets.  
+3. **Deploy only after a successful OpenNext build** using:
+   - `npx wrangler deploy` (optionally `--env=""` to target the top-level environment explicitly).  
+4. **Troubleshooting**:
+   - *“No updated asset files to upload”*: you skipped the Cloudflare build; rerun step 2.
+   - *ESLint config errors during build*: they’re informational—build still succeeds, but you should address them separately.
+   - *Multiple environments warning*: rerun deploy with `--env=""` to avoid unintentional targets.
+   - *Viewport metadata warning*: move viewport values from `metadata` to `generateViewport` per Next.js docs.
+
+No deploy is compliant unless each step above is completed and verified.
+
+---
+

.specstory/history/2025-11-15_03-18Z-update-git-history-to-remove-unnecessary-files.md

@@ -4952,19 +4952,862 @@ D  node_modules/zwitch/readme.md
 
 ---
 
+<think><details><summary>Thought Process</summary>
+**Managing staged deletions and .gitignore updates**
 
+I'm sorting out how git shows thousands of staged deletions for node_modules and similar folders after our removals. These files remain in the working tree but are staged for removal from the repo index, matching the user's aim to untrack them. I want to clarify committing these removals alongside the new .gitignore, while making sure the user knows the files will stay on disk and that commit timing is up to them. I'll also note some new untracked files and zipped assets, plus ensure the todo list reflects these git status changes before wrapping up.</details></think>
 
 ---
 
+<tool-use data-tool-type="generic" data-tool-name="todo_write">
+<details><summary>Tool use: **todo_write** • Todo List</summary>
+
+- [x] Review git status to identify build artifacts tracked
+- [x] Update ignore rules and untrack generated assets
+
+</details>
+</tool-use>
+
+---
+
+<think><details><summary>Thought Process</summary>
+**Summarizing repository cleanup and gitignore updates**
+
+I'll explain that we updated `.gitignore` to exclude common build and environment files, showing the snippet for clarity. I’ll note that build artifacts were removed from the git index using `git rm -r --cached`, resulting in a large set of deletions staged for commit, which the user will need to finalize with a commit or revert if desired. I’ll mention untracked files like `BUILD.md` and PNGs with spaces in their names, suggesting the user consider renaming or tracking them. Also, I'll clarify that history rewrite wasn’t performed—only the index cleared—and that purging past commits would require specialized tools. Lastly, I’ll include recommended next steps like committing these changes and optionally running `npm install`, wrapping everything up with a clear bullet list and code block referencing `.gitignore`.</details></think>
+
+---
+
+## Repo Cleanup
+
+- Added a root `.gitignore` so `node_modules/`, `.next/`, `.open-next/`, `dist/`, local env files, log files, and OS artifacts stop entering version control going forward.  
+```1:18:.gitignore
+### Dependencies
+node_modules/
+
+### Next.js build output
+.next/
+
+### OpenNext build artifacts
+.open-next/
+dist/
+```  
+- Ran `git rm -r --cached .next .open-next node_modules dist` so all previously committed build artifacts are staged for removal while keeping the files locally; the next commit will drop them from history and keep future diffs clean.
+
+**Next steps**
+
+- Review `git status` (it now lists the staged deletions plus new `.gitignore`) and commit when satisfied, e.g. `git commit -m "Stop tracking build artifacts"`.
+- If you need to keep any additional docs/assets (e.g., `BUILD.md`, latest `.specstory` note, the two new PNG references), add them manually before committing.
+- For deeper history rewrites (purging these directories from older commits), follow up so we can run `git filter-repo` or similar.
+
+---
+
+_**User (2025-11-14 13:31Z)**_
+
+how do I rename the current branch to main
+
+---
+
+_**Agent (model default, mode Ask)**_
+
+<think><details><summary>Thought Process</summary>
+**Preparing branch rename instructions**</details></think>
+
+---
+
+You’re currently on a branch that needs to be renamed to `main`. Run these commands:
+
+1. `git branch -m main`  
+   Renames the branch you’re on to `main`.
+
+2. If the branch is already tracked remotely under another name, update the upstream reference:  
+   `git push origin -u main`
+
+3. Finally, delete the old remote branch if needed:  
+   `git push origin --delete <old-branch-name>`
+
+That’s it—you now have your local branch renamed to `main` and synced with the remote.
+
+---
+
+_**User (2025-11-14 13:31Z)**_
+
+if I want this to be open source, what license should i add?
+
+---
+
+_**Agent (model default, mode Ask)**_
+
+<think><details><summary>Thought Process</summary>
+**Suggesting license options**</details></think>
+
+---
+
+It depends on how you want others to use the project:
+
+- **MIT License** – very permissive, lets people use, modify, redistribute (even commercially) with minimal conditions. Ideal if you just want credit and don’t mind proprietary forks.
+- **Apache 2.0** – similar freedoms as MIT but includes explicit patent protection and a contribution clause. Good if you expect outside collaborators and care about patent safety.
+- **GPLv3** – “copyleft” license requiring derivative works to stay open-source under GPL. Choose this only if you want improvements to remain open and are okay limiting commercial adoption.
+- **BSD 3-Clause** – another permissive option like MIT with a no-endorsement clause.
+
+Most open-source projects default to MIT or Apache 2.0 for simplicity and broad adoption. Pick the one that matches your goals, add a `LICENSE` file with the full text, and mention it in your `README`.
+
+---
+
+_**User (2025-11-14 13:31Z)**_
+
+I need to set the upstream to https://git.biohazardvfx.com/Nicholai/Correspondents.git 
+
+---
+
+_**Agent (model default, mode Ask)**_
+
+<think><details><summary>Thought Process</summary>
+**Requesting instructions to set remote upstream**</details></think>
+
+---
+
+To point your local repo at `https://git.biohazardvfx.com/Nicholai/Correspondents.git`, run:
+
+1. `git remote remove origin` (skip if no `origin` yet).
+2. `git remote add origin https://git.biohazardvfx.com/Nicholai/Correspondents.git`
+3. `git branch -M main` (if you want the primary branch named `main`)
+4. `git push -u origin main`
+
+After step 4, `main` is tracked against the remote repository so future `git push`/`git pull` commands work without extra flags. This matches the repo URL you shared (`git.biohazardvfx.com/Nicholai/Correspondents.git`).
+
+---
+
+_**User (2025-11-14 13:31Z)**_
+
+@bash (13-21) getting this problem
+
+---
+
+_**Agent (model default, mode Ask)**_
+
+<think><details><summary>Thought Process</summary>
+**Handling remote rejection**</details></think>
+
+---
+
+The remote already has commits (at least the initial `377a875` one), so your push is rejected. Bring those commits into your local branch before pushing:
+
+```
+git fetch origin
+git merge origin/main   # or: git pull --rebase origin main
+```
+
+Resolve any conflicts if prompted, then push again:
+
+```
+git push -u origin main
+```
+
+Only if you intend to overwrite the remote (deleting its history) would you use `git push --force`, but that will discard whatever’s currently on `Correspondents`.
+
+---
+
+_**User (2025-11-14 13:31Z)**_
+
+there's nothing upstream other than the default readme that was created, I don't want to preserve anything, can i force it to commit everything?
+
+---
+
+_**Agent (model default, mode Ask)**_
+
+<think><details><summary>Thought Process</summary>
+**Preparing for force push**</details></think>
+
+---
+
+Yes—if you’re sure the remote’s README-only history can be discarded, force-push your local branch:
+
+```
+git push -f origin main
+```
+
+This overwrites `main` on `https://git.biohazardvfx.com/Nicholai/Correspondents.git` with your local history. Anyone else relying on the previous commits will need to re-clone or force-reset, but in your case that’s probably fine.
+
+---
+
+_**User (2025-11-14 13:31Z)**_
+
+.env.local got pushed, we need to remove that from the git history and add it to the gitignore
+
+---
+
+_**Agent (model default, mode Ask)**_
+
+<think><details><summary>Thought Process</summary>
+**Drafting .env handling instructions**</details></think>
+
+---
+
+To clean up that accidental `.env.local` commit:
+
+1. **Add to `.gitignore`** (if it isn’t already covered):
+   ```
+   echo ".env.local" >> .gitignore
+   git add .gitignore
+   ```
+
+2. **Remove every copy from Git history**. The easiest safe tool is `git filter-repo` (install via `pip install git-filter-repo` if you don’t already have it). Run from the repo root:
+   ```
+   git filter-repo --path .env.local --invert-paths
+   ```
+   This rewrites every commit so `.env.local` is gone.
+
+3. **Force-push the rewritten history** to overwrite the remote:
+   ```
+   git push origin main --force
+   ```
+
+4. **Add your cleaned working copy back** (without the env file). When you run `git status`, it should now show `.env.local` as untracked; leave it that way or store secrets elsewhere.
+
+Anyone who already pulled the previous history must run `git fetch` and then `git reset --hard origin/main` (or reclone) to avoid conflicts.
+
+If you can’t use `git filter-repo`, the legacy alternative is `git filter-branch --force --index-filter "git rm --cached --ignore-unmatch .env.local" --prune-empty --tag-name-filter cat -- --all`, followed by the same force-push, but filter-repo is faster and better maintained.
+
+---
+
+_**User (2025-11-14 13:31Z)**_
+
+@bash (66-67) having issues here
+
+---
+
+_**Agent (model default, mode Ask)**_
+
+<think><details><summary>Thought Process</summary>
+**Explaining git-filter-repo installation**</details></think>
+
+---
+
+`git filter-repo` isn’t bundled with Git—you have to install it first. Two quick options:
+
+1. **Python/pip (works on most systems)**  
+   ```
+   pip install git-filter-repo
+   ```
+   Make sure your `pip` maps to whatever Python you use; with multiple versions you might need `pip3 install git-filter-repo`.
+
+2. **Manual download**  
+   Grab the single-file script from https://github.com/newren/git-filter-repo, save it somewhere on your PATH (e.g. `/usr/local/bin/git-filter-repo`), and make it executable (`chmod +x /usr/local/bin/git-filter-repo`).
+
+After installing, rerun:
+```
+git filter-repo --path .env.local --invert-paths
+```
+Then `git push origin main --force`.
+
+If you can’t install new tools, the built-in (but slower) alternative is:
+```
+git filter-branch --force --index-filter "git rm --cached --ignore-unmatch .env.local" --prune-empty --tag-name-filter cat -- --all
+```
+followed by the same force-push.
+
+---
+
+_**User (2025-11-14 13:31Z)**_
+
+@bash (112-133) 
+
+---
+
+_**Agent (model default, mode Ask)**_
+
+<think><details><summary>Thought Process</summary>
+**Diagnosing git filter-repo error**</details></think>
+
+---
+
+`git filter-repo` is choking on one of your Git configuration entries. It runs `git config --null --list` under the hood, and one of the lines in your config (global, local, or system) doesn’t contain an `=` sign, so Python can’t split it into key/value pairs (hence “dictionary update sequence element #1 has length 1; 2 is required”). Fix it like this:
+
+1. Run `git config --list --show-origin` and look for any line that’s just a key with no `=value` (or otherwise malformed).  
+2. Note the file path reported (e.g., `file:/home/.../.gitconfig`). Open that file and correct or remove the bad line. For example, if you see something like `user.name` with no value, either set one (`git config --global user.name "Your Name"`) or delete the line.
+3. After cleaning up the config, rerun `git filter-repo --path .env.local --invert-paths`.
+
+If you have multiple configs, check system (`git config --system --list`), global (`--global`), and repo-level to ensure none contain malformed entries. Once `git filter-repo` runs cleanly, force-push to replace the remote history.
+
+---
+
+_**User (2025-11-14 13:31Z)**_
+
+@bash (136-147) 
+
+---
+
+_**Agent (model default, mode Ask)**_
+
+<think><details><summary>Thought Process</summary>
+**Analyzing blank line in config causing issues**</details></think>
+
+---
+
+`git config --list --show-origin` didn’t reveal anything malformed—the blank line after `user.email=...` is fine and shouldn’t cause the `dict update` error. That means the bad config entry is likely **outside** of Git’s config files, almost always in an environment variable.
+
+`git filter-repo` reads `GIT_CONFIG_PARAMETERS` (if set) as a `key=value` list separated by newlines. If that variable is set to something like `GIT_CONFIG_PARAMETERS=core.autocrlf` (missing the `=value`), it triggers the exact traceback you saw. Check with:
+
+```
+env | grep GIT_CONFIG
+```
+
+If you see a `GIT_CONFIG_PARAMETERS` (or similar) value that lacks an `=` sign, unset it before running filter-repo:
+
+```
+unset GIT_CONFIG_PARAMETERS
+# or: export GIT_CONFIG_PARAMETERS=""
+```
+
+Then re-run `git filter-repo --path .env.local --invert-paths`.
+
+If nothing shows in `env`, make sure no wrapper script or shell startup file is exporting malformed config parameters. Once the environment is clean, filter-repo should proceed without that error.
+
+---
+
+_**User (2025-11-14 13:31Z)**_
+
+@bash (150-151) 
+
+---
+
+_**Agent (model default, mode Ask)**_
+
+<think><details><summary>Thought Process</summary>
+**Analyzing gitconfig blank line issue**</details></think>
+
+---
+
+`git filter-repo` expects every line from `git config --null --list` to contain `key=value`. The blank entry between `user.email` and `user.name` in your `~/.gitconfig` output is enough to break it.
+
+**Fix:**
+
+1. Open `~/.gitconfig` in any editor.
+2. Remove the completely empty line between `user.email=...` and `user.name=...` (and any other blank lines).
+3. Save.
+
+Re-run `git config --list --show-origin` to confirm there are no blank entries, then run:
+
+```
+git filter-repo --path .env.local --invert-paths
+```
+
+After that completes, force-push (`git push origin main --force`).
+
+---
+
+_**User (2025-11-14 13:31Z)**_
+
+think you can take care of it boss?
+
+---
+
+_**Agent (model default, mode Agent)**_
+
+<think><details><summary>Thought Process</summary>
+**Checking .gitconfig formatting**</details></think>
+
+---
+
+<tool-use data-tool-type="read" data-tool-name="read_file">
+<details><summary>Tool use: **read_file** • Read file: /home/nicholai/.gitconfig</summary>
+
+</details>
+</tool-use>
+
+---
+
+<think><details><summary>Thought Process</summary>
+**Removing literal newline characters from config**</details></think>
+
+---
+
+<tool-use data-tool-type="unknown" data-tool-name="apply_patch">
+<details>
+<summary>Tool use: **apply_patch**</summary>
+
+
+Parameters:
+
+```json
+{
+  &quot;relativeWorkspacePath&quot;: &quot;/home/nicholai/.gitconfig&quot;
+}
+```
+Additional data:
+
+```json
+{
+  &quot;reasonForAcceptReject&quot;: {
+    &quot;type&quot;: &quot;outOfWorkspace&quot;
+  },
+  &quot;codeblockId&quot;: &quot;68ddd045-89cc-427f-92ae-9bc3f048d98e&quot;
+}
+```
+Result:
+
+```json
+{
+  &quot;diff&quot;: {
+    &quot;chunks&quot;: [
+      {
+        &quot;diffString&quot;: &quot;  [user]\n- \temail = nicholaivogelfilms@gmail.com\\n\n+ \temail = nicholaivogelfilms@gmail.com\n  \tname = Nicholai\n  [safe]&quot;,
+        &quot;oldStart&quot;: 1,
+        &quot;newStart&quot;: 1,
+        &quot;oldLines&quot;: 4,
+        &quot;newLines&quot;: 4,
+        &quot;linesRemoved&quot;: 1,
+        &quot;linesAdded&quot;: 1
+      }
+    ],
+    &quot;editor&quot;: &quot;EDITOR_AI&quot;
+  },
+  &quot;shouldAutoFixLints&quot;: true,
+  &quot;resultForModel&quot;: &quot;Success. Updated the following files:\nM /home/nicholai/.gitconfig&quot;,
+  &quot;contentsAfterEdit&quot;: &quot;[user]\n\temail = nicholaivogelfilms@gmail.com\n\tname = Nicholai\n[safe]\n\tdirectory = /usr/share/blender/4.5/datafiles/colormanagement\n[credential]\n\thelper = /usr/lib/git-core/git-credential-libsecret\n&quot;
+}
+```
+User decision: **accepted**
+
+Status: **completed**
+
+
+</details>
+</tool-use>
+
+---
+
+<think><details><summary>Thought Process</summary>
+**Running git filter-repo command**</details></think>
+
+---
+
+<tool-use data-tool-type="bash" data-tool-name="run_terminal_cmd">
+<details><summary>Tool use: **command** • Run command: cd /home/nicholai/Documents/dev/multi-agent_chat_interface && git filter-repo --path .env.local --invert-paths</summary>
+
+```bash
+cd /home/nicholai/Documents/dev/multi-agent_chat_interface && git filter-repo --path .env.local --invert-paths
+```
+
+```
+./
+../
+.claude/
+.cursorindexingignore
+.env.local
+.git/
+.gitignore
+.next/
+.open-next/
+.specstory/
+.venv/
+.wrangler/
+AGENTS.md
+AGENT_DIFF_TOOL_SETUP.md
+BUILD.md
+CLAUDE.md
+CONTRIBUTING.md
+README.md
+__tests__/
+app_root_backup/
+cloudflare-env.d.ts
+components.json
+dist/
+docs/
+eslint.config.mjs
+next
+next-env.d.ts
+next-steps.md
+next.config.ts
+node_modules/
+open-next.config.ts
+opennext-deploy-debug.log
+package-lock.json
+package.json
+pnpm-lock.yaml
+postcss.config.mjs
+public/
+scripts/
+src/
+test/
+tsconfig.json
+ui-design-ref/
+wrangler.jsonc
+git: &#39;filter-repo&#39; is not a git command. See &#39;git --help&#39;.
+
+```
+</details>
+</tool-use>
+
+---
+
+<think><details><summary>Thought Process</summary>
+**Troubleshooting git-filter-repo execution path**</details></think>
+
+---
+
+<tool-use data-tool-type="bash" data-tool-name="run_terminal_cmd">
+<details><summary>Tool use: **command** • Run command: cd /home/nicholai/Documents/dev/multi-agent_chat_interface && .venv/bin/git-filter-repo --path .env.local --invert-paths</summary>
+
+```bash
+cd /home/nicholai/Documents/dev/multi-agent_chat_interface && .venv/bin/git-filter-repo --path .env.local --invert-paths
+```
+
+```
+./
+../
+.claude/
+.cursorindexingignore
+.env.local
+.git/
+.gitignore
+.next/
+.open-next/
+.specstory/
+.venv/
+.wrangler/
+AGENTS.md
+AGENT_DIFF_TOOL_SETUP.md
+BUILD.md
+CLAUDE.md
+CONTRIBUTING.md
+README.md
+__tests__/
+app_root_backup/
+cloudflare-env.d.ts
+components.json
+dist/
+docs/
+eslint.config.mjs
+next
+next-env.d.ts
+next-steps.md
+next.config.ts
+node_modules/
+open-next.config.ts
+opennext-deploy-debug.log
+package-lock.json
+package.json
+pnpm-lock.yaml
+postcss.config.mjs
+public/
+scripts/
+src/
+test/
+tsconfig.json
+ui-design-ref/
+wrangler.jsonc
+Aborting: Refusing to destructively overwrite repo history since
+this does not look like a fresh clone.
+  (expected freshly packed repo)
+Please operate on a fresh clone instead.  If you want to proceed
+anyway, use --force.
+
+```
+</details>
+</tool-use>
+
+---
+
+<think><details><summary>Thought Process</summary>
+**Considering use of --force flag**</details></think>
+
+---
+
+<tool-use data-tool-type="bash" data-tool-name="run_terminal_cmd">
+<details><summary>Tool use: **command** • Run command: cd /home/nicholai/Documents/dev/multi-agent_chat_interface && .venv/bin/git-filter-repo --force --path .env.local --invert-paths</summary>
+
+```bash
+cd /home/nicholai/Documents/dev/multi-agent_chat_interface && .venv/bin/git-filter-repo --force --path .env.local --invert-paths
+```
+
+```
+./
+../
+.claude/
+.cursorindexingignore
+.env.local
+.git/
+.gitignore
+.next/
+.open-next/
+.specstory/
+.venv/
+.wrangler/
+AGENTS.md
+AGENT_DIFF_TOOL_SETUP.md
+BUILD.md
+CLAUDE.md
+CONTRIBUTING.md
+README.md
+__tests__/
+app_root_backup/
+cloudflare-env.d.ts
+components.json
+dist/
+docs/
+eslint.config.mjs
+next
+next-env.d.ts
+next-steps.md
+next.config.ts
+node_modules/
+open-next.config.ts
+opennext-deploy-debug.log
+package-lock.json
+package.json
+pnpm-lock.yaml
+postcss.config.mjs
+public/
+scripts/
+src/
+test/
+tsconfig.json
+ui-design-ref/
+wrangler.jsonc
+NOTICE: Removing &#39;origin&#39; remote; see &#39;Why is my origin removed?&#39;
+        in the manual if you want to push back there.
+        (was https://git.biohazardvfx.com/Nicholai/Correspondents.git)
+
Parsed 1 commits
Parsed 3 commits
Parsed 5 commits
Parsed 7 commits
Parsed 7 commitsHEAD is now at 20ebe42d Stop tracking build artifacts
+
+New history written in 1.27 seconds; now repacking/cleaning...
+Repacking your repo and cleaning out old unneeded objects
+Completely finished after 14.26 seconds.
+
+```
+</details>
+</tool-use>
+
+---
+
+<think><details><summary>Thought Process</summary>
+**Adding remote origin back**</details></think>
+
+---
+
+<tool-use data-tool-type="bash" data-tool-name="run_terminal_cmd">
+<details><summary>Tool use: **command** • Run command: cd /home/nicholai/Documents/dev/multi-agent_chat_interface && git remote add origin https://git.biohazardvfx.com/Nicholai/Correspondents.git</summary>
+
+```bash
+cd /home/nicholai/Documents/dev/multi-agent_chat_interface && git remote add origin https://git.biohazardvfx.com/Nicholai/Correspondents.git
+```
+
+```
+./
+../
+.claude/
+.cursorindexingignore
+.git/
+.gitignore
+.next/
+.open-next/
+.specstory/
+.venv/
+.wrangler/
+AGENTS.md
+AGENT_DIFF_TOOL_SETUP.md
+BUILD.md
+CLAUDE.md
+CONTRIBUTING.md
+README.md
+__tests__/
+app_root_backup/
+cloudflare-env.d.ts
+components.json
+dist/
+docs/
+eslint.config.mjs
+next
+next-env.d.ts
+next-steps.md
+next.config.ts
+node_modules/
+open-next.config.ts
+opennext-deploy-debug.log
+package-lock.json
+package.json
+pnpm-lock.yaml
+postcss.config.mjs
+public/
+scripts/
+src/
+test/
+tsconfig.json
+ui-design-ref/
+wrangler.jsonc
+
+```
+</details>
+</tool-use>
+
+---
+
+<think><details><summary>Thought Process</summary>
+**Verifying .env handling in gitignore**</details></think>
+
+---
+
+<tool-use data-tool-type="bash" data-tool-name="run_terminal_cmd">
+<details><summary>Tool use: **command** • Run command: cd /home/nicholai/Documents/dev/multi-agent_chat_interface && git ls-files | grep env</summary>
+
+```bash
+cd /home/nicholai/Documents/dev/multi-agent_chat_interface && git ls-files | grep env
+```
+
+```
+./
+../
+.claude/
+.cursorindexingignore
+.git/
+.gitignore
+.next/
+.open-next/
+.specstory/
+.venv/
+.wrangler/
+AGENTS.md
+AGENT_DIFF_TOOL_SETUP.md
+BUILD.md
+CLAUDE.md
+CONTRIBUTING.md
+README.md
+__tests__/
+app_root_backup/
+cloudflare-env.d.ts
+components.json
+dist/
+docs/
+eslint.config.mjs
+next
+next-env.d.ts
+next-steps.md
+next.config.ts
+node_modules/
+open-next.config.ts
+opennext-deploy-debug.log
+package-lock.json
+package.json
+pnpm-lock.yaml
+postcss.config.mjs
+public/
+scripts/
+src/
+test/
+tsconfig.json
+ui-design-ref/
+wrangler.jsonc
+cloudflare-env.d.ts
+next-env.d.ts
+test/mock-n8n-server/node_modules/undici-types/env-http-proxy-agent.d.ts
+
+```
+</details>
+</tool-use>
+
+---
+
+<think><details><summary>Thought Process</summary>
+**Checking git status before commit**</details></think>
+
+---
+
+<tool-use data-tool-type="bash" data-tool-name="run_terminal_cmd">
+<details><summary>Tool use: **command** • Run command: cd /home/nicholai/Documents/dev/multi-agent_chat_interface && git status -sb</summary>
+
+```bash
+cd /home/nicholai/Documents/dev/multi-agent_chat_interface && git status -sb
+```
+
+```
+./
+../
+.claude/
+.cursorindexingignore
+.git/
+.gitignore
+.next/
+.open-next/
+.specstory/
+.venv/
+.wrangler/
+AGENTS.md
+AGENT_DIFF_TOOL_SETUP.md
+BUILD.md
+CLAUDE.md
+CONTRIBUTING.md
+README.md
+__tests__/
+app_root_backup/
+cloudflare-env.d.ts
+components.json
+dist/
+docs/
+eslint.config.mjs
+next
+next-env.d.ts
+next-steps.md
+next.config.ts
+node_modules/
+open-next.config.ts
+opennext-deploy-debug.log
+package-lock.json
+package.json
+pnpm-lock.yaml
+postcss.config.mjs
+public/
+scripts/
+src/
+test/
+tsconfig.json
+ui-design-ref/
+wrangler.jsonc
+## main
+ M .specstory/history/2025-11-15_03-18Z-update-git-history-to-remove-unnecessary-files.md
+
+```
+</details>
+</tool-use>
+
+---
+
+<think><details><summary>Thought Process</summary>
+**Preparing final summary and instructions**
+
+I’m wrapping up by summarizing the key changes: removing literal `\n` from `.gitconfig`, filtering the repo to remove `.env` files, and the need for a force push to update the remote. I’ll include how `.gitignore` already handles `.env*` and remind the team to verify no `.env` files remain tracked. I’ll also note that others will need to re-clone or reset their repos due to history rewriting, and that no tests were run. Finally, I’ll provide clear next steps for the user and their team to resync safely.</details></think>
+
+---
+
+## Secrets Cleanup Done
+- Fixed `~/.gitconfig` (removed the stray literal `\n` after your email) so `git filter-repo` can parse config cleanly.
+```2:3:/home/nicholai/.gitconfig
+[email protected]
+```
+- Ran `.venv/bin/git-filter-repo --force --path .env.local --invert-paths` to purge every instance of `.env.local` from the entire history.
+- Re-added the `origin` remote after filter-repo removed it, and verified `.env.local` is no longer tracked (it’s already covered by the existing `.gitignore` rule).
+
+## What’s Next
+- Force-push the rewritten history so the remote drops the leaked file: `git push -f origin main`.
+- Let any collaborators know they’ll need to `git fetch --all` and `git reset --hard origin/main` (or re-clone) because history changed.
+- Keep `.env.local` untracked going forward; `git status` now shows it as ignored.
+
+No automated tests were run; the change only touched git history and config.
+
+---
+
+_**User (2025-11-14 13:31Z)**_
+
+done! thank you
+
+---
+
+_**Agent (model default, mode Ask)**_
+
 
 
 ---
 
-
+Great! If anything else pops up—deploys, config tweaks, or repo cleanups—just let me know.
-
----
-
-
 
 ---
 

AGENTS.md

@@ -1,234 +0,0 @@
-# CLAUDE.md
-
-This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
-
-## Project Overview
-
-**Multi-Agent Chat Interface** - A Next.js-based AI chat platform that supports multiple agents configured via environment variables. Users select an agent from a menu on first visit, then chat with that agent. The application integrates with n8n workflows via webhooks, features markdown rendering with syntax highlighting, image uploads, and an interactive diff tool for code changes.
-
-## Development Commands
-
-```bash
-npm run dev      # Start Next.js development server (http://localhost:3000)
-npm run build    # Create production build
-npm start        # Run production server
-npm run lint     # Run ESLint checks
-```
-
-**Note:** No testing framework is currently configured. Tests should be added when needed.
-
-## Technology Stack
-
-- **Frontend:** Next.js 15.5.4 (App Router), React 19, TypeScript 5
-- **Styling:** Tailwind CSS 4.1.9 with PostCSS
-- **UI Components:** shadcn/ui (Radix UI primitives), Lucide icons
-- **Forms & Validation:** React Hook Form + Zod
-- **Markdown:** react-markdown with remark-gfm and rehype-highlight for code syntax
-- **Diffs:** Custom pipeline using `diff` library with Highlight.js for colored output
-- **Deployment:** Cloudflare Workers/Pages via OpenNextJS + Wrangler
-
-## Project Structure
-
-```
-src/
-├── app/
-│   ├── api/
-│   │   ├── agents/route.ts        # GET endpoint - returns available agents from env vars
-│   │   └── chat/route.ts          # POST endpoint - routes to selected agent's webhook
-│   ├── layout.tsx                 # Root layout with theme provider
-│   ├── page.tsx                   # Home page - conditionally renders AgentSelector or ChatInterface
-│   └── globals.css                # Tailwind global styles
-├── components/
-│   ├── agent-selector.tsx         # Agent selection menu (card-based UI)
-│   ├── chat-interface.tsx         # Main chat UI component (client-side, per-agent)
-│   ├── markdown-renderer.tsx      # Parses markdown + extracts diff-tool blocks
-│   ├── diff-display.tsx           # Renders diffs with syntax highlighting
-│   ├── diff-tool.tsx              # Diff tool wrapper component
-│   ├── header.tsx                 # App header with agent name and switch button
-│   ├── mode-toggle.tsx            # Dark/light theme toggle
-│   ├── theme-provider.tsx         # Theme context setup
-│   ├── DIFF_TOOL_USAGE.md         # In-component documentation
-│   └── ui/                        # shadcn/ui component library
-└── lib/
-    ├── types.ts                   # TypeScript types and interfaces (Agent, Message, ChatRequest, etc.)
-    └── utils.ts                   # Utility functions (cn() for classname merging)
-```
-
-## Architecture & Data Flow
-
-### Agent Selection Flow
-```
-User visits site
-  ↓
-page.tsx checks localStorage for selected agent
-  ↓
-If no agent: Show AgentSelector
-  │   - Fetches agents from GET /api/agents
-  │   - Displays agent cards with name + description
-  │   - On selection: saves agent to localStorage and shows ChatInterface
-  ↓
-If agent exists: Show ChatInterface with that agent
-```
-
-### Multi-Agent API Pattern
-**GET /api/agents**
-- Reads environment variables `AGENT_1_URL`, `AGENT_1_NAME`, `AGENT_1_DESCRIPTION`, `AGENT_2_URL`, etc.
-- Returns array of available agents: `{ agents: Agent[] }`
-
-**POST /api/chat**
-- **Request:** `{ message, timestamp, sessionId, agentId, images? }`
-- **Processing:**
-  1. Validates agentId is provided
-  2. Looks up webhook URL using `getAgentWebhookUrl(agentId)`
-  3. Proxies request to agent's specific n8n webhook
-  4. Forwards images (base64) if provided
-- **Response Format:** Newline-delimited JSON with two message types:
-  - `"item"` - Text content rendered directly
-  - `"tool_call"` - Structured tools like `{ name: "show_diff", input: {...} }`
-
-### Diff Tool Pipeline
-```
-n8n webhook response (tool_call: show_diff)
-  ↓
-/api/chat/route.ts (converts to markdown code block format)
-  ↓
-MarkdownRenderer (regex extracts diff-tool code blocks)
-  ↓
-DiffDisplay (renders diffs with Highlight.js syntax highlighting)
-```
-
-### Client-Side Architecture
-- **State Management:** React hooks (useState, useRef) + localStorage for persistence
-- **Agent Persistence:** Selected agent stored in `selected-agent` and `selected-agent-id`
-- **Session ID:** Per-agent format `chat-session-{agentId}` stored as `chat-session-{agentId}`
-- **Message Storage:** Per-agent messages stored as `chat-messages-{agentId}` in localStorage
-- **Image Handling:** Images converted to base64 and included in message payload
-- **Auto-scroll:** Maintains scroll position at latest message
-
-### Markdown Processing Details
-- Custom regex parser in `MarkdownRenderer` extracts ` ```diff-tool ... ``` ` code blocks
-- Replaces diff-tool blocks with placeholders during markdown rendering
-- After markdown is rendered, dynamically inserts `<DiffDisplay>` components
-- Supports remark-gfm (GitHub-flavored markdown) and rehype-highlight for syntax coloring
-
-## Key Files & Responsibilities
-
-| File | Purpose |
-|------|---------|
-| `src/lib/types.ts` | Centralized TypeScript types: Agent, Message, ChatRequest, ChatResponse, etc. |
-| `src/app/api/agents/route.ts` | GET endpoint - parses env vars and returns available agents |
-| `src/app/api/chat/route.ts` | POST endpoint - looks up agent webhook URL and proxies requests |
-| `src/app/page.tsx` | Home page - manages agent selection state, conditionally renders AgentSelector or ChatInterface |
-| `src/components/agent-selector.tsx` | Agent selection UI - fetches agents, displays cards, handles selection |
-| `src/components/chat-interface.tsx` | Main chat UI - handles per-agent messages, image uploads, streaming |
-| `src/components/header.tsx` | App header - displays agent name and "Switch Agent" button |
-| `src/components/markdown-renderer.tsx` | Parses markdown and extracts diff-tool blocks for custom rendering |
-| `src/components/diff-display.tsx` | Renders side-by-side diffs with syntax highlighting using Highlight.js |
-| `AGENT_DIFF_TOOL_SETUP.md` | Comprehensive guide for configuring n8n agents to output diff tools |
-| `src/components/DIFF_TOOL_USAGE.md` | In-component documentation for the diff tool feature |
-
-## Theme & Styling
-
-- **System:** Tailwind CSS 4 with CSS custom properties and OKLch color space
-- **Colors:** Warm light mode (cream/beige) and pure black dark mode
-- **Implementation:** `next-themes` with "light" and "dark" variants
-- **Toggle:** Mode toggle button in header
-- **Global Styles:** `src/app/globals.css` contains theme definitions and Tailwind imports
-
-## Configuration Files
-
-- `tsconfig.json` - TypeScript strict mode, bundler module resolution, `@/*` alias to `src/`
-- `next.config.ts` - Next.js configuration
-- `open-next.config.ts` - Cloudflare-specific Next.js configuration
-- `wrangler.jsonc` - Wrangler (Cloudflare CLI) configuration
-- `eslint.config.mjs` - ESLint with Next.js core-web-vitals and TypeScript support
-- `components.json` - shadcn/ui component library configuration
-- `postcss.config.mjs` - Tailwind CSS plugin configuration
-
-## n8n Webhook Integration
-
-The chat endpoint routes to an n8n workflow via webhook. The workflow should:
-
-1. Accept message input and context from the client
-2. Return newline-delimited JSON with messages in one of two formats:
-   - `{ "type": "item", "content": "text content" }`
-   - `{ "type": "tool_call", "name": "show_diff", "input": { "before": "...", "after": "...", "language": "..." } }`
-
-**Note:** See `AGENT_DIFF_TOOL_SETUP.md` for detailed instructions on configuring n8n agents to use the diff tool feature.
-
-## Common Tasks
-
-### Configuring Agents via Environment Variables
-**Local Development (.env.local):**
-```
-AGENT_1_URL=https://n8n.example.com/webhook/agent-1-uuid
-AGENT_1_NAME=Creative Writer
-AGENT_1_DESCRIPTION=An AI assistant for creative writing and brainstorming
-
-AGENT_2_URL=https://n8n.example.com/webhook/agent-2-uuid
-AGENT_2_NAME=Code Reviewer
-AGENT_2_DESCRIPTION=An AI assistant for code review and refactoring
-```
-
-**Cloudflare Deployment:**
-- Go to Cloudflare dashboard → Workers & Pages → your-project → Settings → Environment variables
-- Add the same AGENT_* variables above
-- Deploy to apply changes
-
-### Adding a New Agent
-1. Add three environment variables:
-   - `AGENT_N_URL` - webhook URL for the agent
-   - `AGENT_N_NAME` - display name
-   - `AGENT_N_DESCRIPTION` - short description
-2. On next page reload, new agent appears in AgentSelector
-3. No code changes needed
-
-### Modifying Chat Messages or Display
-- **Chat UI:** `src/components/chat-interface.tsx`
-- **Rendering:** `src/components/markdown-renderer.tsx`
-- **State:** Message list stored in component state, persisted to localStorage per agent
-- **Per-agent persistence:** Messages saved as `chat-messages-{agentId}`
-
-### Changing Theme Colors
-- Edit CSS custom properties in `src/app/globals.css`
-- Uses OKLch color space (perceptually uniform)
-- Dark mode variant defined with `@custom-variant dark`
-
-### Adding New Tool Types (beyond show_diff)
-- **Step 1:** Handle in `/api/chat/route.ts` - convert tool_call to markdown format
-- **Step 2:** Add detection logic in `markdown-renderer.tsx` to extract new code block type
-- **Step 3:** Create new component similar to `DiffDisplay` and render dynamically
-
-### Switching Between Agents
-- Users click "Switch Agent" button in header
-- Returns to AgentSelector menu
-- Previously selected agents/messages are preserved in localStorage per agent
-- No data loss when switching
-
-## Notes for Future Development
-
-### Multi-Agent Features
-- **Agent Switching:** Currently requires page reload to agent selector. Could add inline dropdown in header.
-- **Agent Management:** UI for adding/editing agents without env vars could improve UX
-- **Agent Verification:** Add health checks to verify agents' webhook URLs are reachable
-- **Agent Categories:** Could group agents by category/type for better organization
-
-### Image Upload Enhancements
-- **Image Storage:** Currently base64 in memory; consider Cloudflare R2 for large images
-- **Image Preview:** Add full-screen image viewer for uploaded images
-- **Multi-file Upload:** Support multiple file types beyond images
-
-### Performance & Scaling
-- **Message Virtualization:** Chat interface uses `useRef` for scroll - consider virtualizing long message lists
-- **Storage Size:** localStorage has 5-10MB limit; consider IndexedDB for longer conversations
-- **Streaming:** Current implementation reads entire response before parsing; consider streaming HTML as it arrives
-
-### Testing & Quality
-- **Testing:** Consider adding Jest or Vitest for component and API testing
-- **Error Handling:** Enhance with retry logic for failed webhook calls and better error messages
-- **Logging:** Add structured logging for debugging multi-agent interactions
-
-### Accessibility & UX
-- **Keyboard Navigation:** Verify keyboard navigation on agent selector cards and custom diff tool
-- **ARIA Labels:** Add aria-labels for screen readers on interactive elements
-- **Mobile Responsive:** Test agent selector and chat interface on mobile devices

CLAUDE.md

@@ -4,231 +4,264 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 ## Project Overview
 
-**Multi-Agent Chat Interface** - A Next.js-based AI chat platform that supports multiple agents configured via environment variables. Users select an agent from a menu on first visit, then chat with that agent. The application integrates with n8n workflows via webhooks, features markdown rendering with syntax highlighting, image uploads, and an interactive diff tool for code changes.
+Multi-agent chat interface deployed to Cloudflare Workers. Users select from configured AI agents and chat with them through n8n webhooks. The interface features a glass-morphism design with mobile support, markdown rendering with code highlighting, and a custom diff visualization tool.
 
-## Development Commands
+## Key Commands
 
+### Development
 ```bash
-npm run dev      # Start Next.js development server (http://localhost:3000)
+pnpm dev              # Start Next.js dev server at localhost:3000
-npm run build    # Create production build
+pnpm build            # Build Next.js application
-npm start        # Run production server
+pnpm lint             # Run ESLint checks
-npm run lint     # Run ESLint checks
+pnpm test             # Run Vitest test suites
+pnpm test:ui          # Run tests with Vitest UI
+pnpm test:coverage    # Generate test coverage report
 ```
 
-**Note:** No testing framework is currently configured. Tests should be added when needed.
+### Deployment to Cloudflare
-
+```bash
-## Technology Stack
+npx @opennextjs/cloudflare build  # Convert Next.js build to Cloudflare Workers format
-
+npx wrangler deploy                # Deploy to Cloudflare (requires OpenNext build first)
-- **Frontend:** Next.js 15.5.4 (App Router), React 19, TypeScript 5
+npx wrangler deploy --env=""       # Deploy to default environment explicitly
-- **Styling:** Tailwind CSS 4.1.9 with PostCSS
+npx wrangler tail                  # View live logs from deployed worker
-- **UI Components:** shadcn/ui (Radix UI primitives), Lucide icons
-- **Forms & Validation:** React Hook Form + Zod
-- **Markdown:** react-markdown with remark-gfm and rehype-highlight for code syntax
-- **Diffs:** Custom pipeline using `diff` library with Highlight.js for colored output
-- **Deployment:** Cloudflare Workers/Pages via OpenNextJS + Wrangler
-
-## Project Structure
-
-```
-src/
-├── app/
-│   ├── api/
-│   │   ├── agents/route.ts        # GET endpoint - returns available agents from env vars
-│   │   └── chat/route.ts          # POST endpoint - routes to selected agent's webhook
-│   ├── layout.tsx                 # Root layout with theme provider
-│   ├── page.tsx                   # Home page - conditionally renders AgentSelector or ChatInterface
-│   └── globals.css                # Tailwind global styles
-├── components/
-│   ├── agent-selector.tsx         # Agent selection menu (card-based UI)
-│   ├── chat-interface.tsx         # Main chat UI component (client-side, per-agent)
-│   ├── markdown-renderer.tsx      # Parses markdown + extracts diff-tool blocks
-│   ├── diff-display.tsx           # Renders diffs with syntax highlighting
-│   ├── diff-tool.tsx              # Diff tool wrapper component
-│   ├── header.tsx                 # App header with agent name and switch button
-│   ├── mode-toggle.tsx            # Dark/light theme toggle
-│   ├── theme-provider.tsx         # Theme context setup
-│   ├── DIFF_TOOL_USAGE.md         # In-component documentation
-│   └── ui/                        # shadcn/ui component library
-└── lib/
-    ├── types.ts                   # TypeScript types and interfaces (Agent, Message, ChatRequest, etc.)
-    └── utils.ts                   # Utility functions (cn() for classname merging)
 ```
 
-## Architecture & Data Flow
+**Critical**: Always run `npx @opennextjs/cloudflare build` before deploying. The standard `next build` alone is insufficient for Cloudflare deployment.
 
-### Agent Selection Flow
+## Architecture
-```
+
-User visits site
+### Agent Configuration
-  ↓
+- Agents are defined via environment variables: `AGENT_N_URL`, `AGENT_N_NAME`, `AGENT_N_DESCRIPTION` (where N = 1, 2, 3...)
-page.tsx checks localStorage for selected agent
+- `/api/agents` dynamically discovers agents by iterating through numbered environment variables
-  ↓
+- Each agent has a webhook URL pointing to an n8n workflow
-If no agent: Show AgentSelector
+- Agent selection is persisted to localStorage using agent-specific keys
-  │   - Fetches agents from GET /api/agents
+
-  │   - Displays agent cards with name + description
+### Message Flow
-  │   - On selection: saves agent to localStorage and shows ChatInterface
+1. User submits message through `ChatInterface` component
-  ↓
+2. POST `/api/chat` receives message with agentId, sessionId, timestamp, and optional base64 images
-If agent exists: Show ChatInterface with that agent
+3. Route extracts webhook URL from environment variables based on agentId format (`agent-N`)
+4. Message forwarded to n8n webhook with all metadata
+5. Response parsed from n8n (supports streaming chunks and diff tool calls)
+6. Messages stored in localStorage per agent (`chat-messages-{agentId}`)
+
+### Session Management
+- Each agent has its own session: `chat-session-{agentId}` in localStorage
+- Session ID format: `session-{agentId}-{timestamp}-{random}`
+- New session created when user clicks "Start a fresh conversation"
+- Messages persist across page reloads per agent
+
+### Diff Tool Integration
+- Custom markdown code fence: ` ```diff-tool ` with JSON payload
+- n8n can send `type: "tool_call", name: "show_diff"` which is converted server-side
+- `MarkdownRenderer` parses diff-tool blocks and renders via `DiffTool` → `DiffDisplay` components
+- Diff props: `oldCode`, `newCode`, `title`, `language`
+
+## Code Structure
+
+### API Routes
+- `src/app/api/agents/route.ts` - Discovers and returns configured agents from environment variables
+- `src/app/api/chat/route.ts` - Proxies chat messages to agent webhooks, handles streaming responses and diff tool calls
+
+### Core Components
+- `src/app/page.tsx` - Main page with agent selection/persistence and chat interface mounting
+- `src/components/chat-interface.tsx` - Full chat UI: message history, input composer, agent dropdown, image attachments
+- `src/components/markdown-renderer.tsx` - Renders markdown with syntax highlighting and custom diff-tool blocks
+- `src/components/diff-tool.tsx` - Wrapper for diff display functionality
+- `src/components/diff-display.tsx` - Side-by-side diff visualization
+
+### Styling
+- Tailwind CSS 4.x with custom glass-morphism design system
+- Custom colors defined in CSS variables (charcoal, burnt, terracotta, etc.)
+- Mobile-specific classes: `mobile-shell`, `mobile-feed`, `mobile-composer`
+- Framer Motion for animations and layout transitions
+
+### Type Definitions
+- `src/lib/types.ts` - All TypeScript interfaces for Agent, Message, API requests/responses
+
+## Important Patterns
+
+### Environment Variable Access
+Always extract agent index from agentId before accessing env vars:
+```typescript
+const match = agentId.match(/agent-(\d+)/)
+const agentIndex = match[1]
+const webhookUrl = process.env[`AGENT_${agentIndex}_URL`]
 ```
 
-### Multi-Agent API Pattern
+### LocalStorage Keys
-**GET /api/agents**
+- Agent selection: `selected-agent` (full object), `selected-agent-id` (string)
-- Reads environment variables `AGENT_1_URL`, `AGENT_1_NAME`, `AGENT_1_DESCRIPTION`, `AGENT_2_URL`, etc.
+- Per-agent session: `chat-session-{agentId}`
-- Returns array of available agents: `{ agents: Agent[] }`
+- Per-agent messages: `chat-messages-{agentId}`
 
-**POST /api/chat**
+### Response Parsing in /api/chat
-- **Request:** `{ message, timestamp, sessionId, agentId, images? }`
+The route handles multiple n8n response formats:
-- **Processing:**
+1. Streaming chunks (newline-delimited JSON with `type: "item"`)
-  1. Validates agentId is provided
+2. Tool calls (`type: "tool_call", name: "show_diff"`)
-  2. Looks up webhook URL using `getAgentWebhookUrl(agentId)`
+3. Regular JSON with various fields (`response`, `message`, `output`, `text`)
-  3. Proxies request to agent's specific n8n webhook
+4. Plain text fallback
-  4. Forwards images (base64) if provided
-- **Response Format:** Newline-delimited JSON with two message types:
-  - `"item"` - Text content rendered directly
-  - `"tool_call"` - Structured tools like `{ name: "show_diff", input: {...} }`
 
-### Diff Tool Pipeline
+### Image Handling
-```
+- Images converted to base64 via FileReader in browser
-n8n webhook response (tool_call: show_diff)
+- Passed as `images: string[]` array to `/api/chat`
-  ↓
+- Forwarded to n8n webhook for processing
-/api/chat/route.ts (converts to markdown code block format)
+- Preview thumbnails shown in composer with remove buttons
-  ↓
+
-MarkdownRenderer (regex extracts diff-tool code blocks)
+## Deployment Configuration
-  ↓
+
-DiffDisplay (renders diffs with Highlight.js syntax highlighting)
+### wrangler.jsonc
+- Worker entry: `.open-next/worker.js` (generated by OpenNext)
+- Assets directory: `.open-next/assets`
+- Production route: `agents.nicholai.work`
+- Compatibility flags: `nodejs_compat`, `global_fetch_strictly_public`
+
+### Build Output
+- Standard Next.js build: `.next/`
+- Cloudflare-adapted build: `.open-next/` (generated by @opennextjs/cloudflare)
+- Only `.open-next/` is deployed to Cloudflare
+
+## UI/UX Details
+
+### Empty State
+- Hero greeting animation with per-character stagger
+- Agent selection buttons shown prominently
+- Sample prompt cards (4 suggestions) users can click to populate input
+
+### Composer Behavior
+- Auto-expanding textarea (max 224px height)
+- Agent dropdown required before sending first message
+- Agent selection highlighted if not yet chosen
+- Enter to send, Shift+Enter for new line
+- Paperclip icon for image attachments
+
+### Message Display
+- User messages: right-aligned with glass bubble styling
+- Assistant messages: markdown-rendered with copy button and syntax highlighting
+- Error messages: red text, optional hint field displayed below
+- Loading state: animated shimmer bar
+
+## Feature Flag System
+
+### Architecture
+- Flags defined in `src/lib/flags.ts` with TypeScript interfaces
+- Environment variable based: `IMAGE_UPLOADS_ENABLED`, `DIFF_TOOL_ENABLED`
+- Runtime overrides supported via `registerRuntimeFlags()` (useful for testing)
+- Global caching in `globalThis.__MULTI_AGENT_CHAT_FLAGS__`
+- Client-side access via `useFlags()` hook that fetches from `/api/flags`
+
+### Available Flags
+- `IMAGE_UPLOADS_ENABLED` (default: true) - Controls image attachment UI and API validation
+- `DIFF_TOOL_ENABLED` (default: true) - Controls diff visualization rendering
+
+### Flag Checking Patterns
+
+**Server-side (API routes):**
+```typescript
+import { getFlags } from '@/lib/flags'
+
+const flags = getFlags()
+if (!flags.IMAGE_UPLOADS_ENABLED) {
+  return NextResponse.json({ error: 'Feature disabled' }, { status: 403 })
+}
 ```
 
-### Client-Side Architecture
+**Client-side (Components):**
-- **State Management:** React hooks (useState, useRef) + localStorage for persistence
+```typescript
-- **Agent Persistence:** Selected agent stored in `selected-agent` and `selected-agent-id`
+import { useFlags } from '@/lib/use-flags'
-- **Session ID:** Per-agent format `chat-session-{agentId}` stored as `chat-session-{agentId}`
-- **Message Storage:** Per-agent messages stored as `chat-messages-{agentId}` in localStorage
-- **Image Handling:** Images converted to base64 and included in message payload
-- **Auto-scroll:** Maintains scroll position at latest message
 
-### Markdown Processing Details
+const { flags, isLoading, error } = useFlags()
-- Custom regex parser in `MarkdownRenderer` extracts ` ```diff-tool ... ``` ` code blocks
+if (flags.IMAGE_UPLOADS_ENABLED) {
-- Replaces diff-tool blocks with placeholders during markdown rendering
+  // Render feature UI
-- After markdown is rendered, dynamically inserts `<DiffDisplay>` components
+}
-- Supports remark-gfm (GitHub-flavored markdown) and rehype-highlight for syntax coloring
-
-## Key Files & Responsibilities
-
-| File | Purpose |
-|------|---------|
-| `src/lib/types.ts` | Centralized TypeScript types: Agent, Message, ChatRequest, ChatResponse, etc. |
-| `src/app/api/agents/route.ts` | GET endpoint - parses env vars and returns available agents |
-| `src/app/api/chat/route.ts` | POST endpoint - looks up agent webhook URL and proxies requests |
-| `src/app/page.tsx` | Home page - manages agent selection state, conditionally renders AgentSelector or ChatInterface |
-| `src/components/agent-selector.tsx` | Agent selection UI - fetches agents, displays cards, handles selection |
-| `src/components/chat-interface.tsx` | Main chat UI - handles per-agent messages, image uploads, streaming |
-| `src/components/header.tsx` | App header - displays agent name and "Switch Agent" button |
-| `src/components/markdown-renderer.tsx` | Parses markdown and extracts diff-tool blocks for custom rendering |
-| `src/components/diff-display.tsx` | Renders side-by-side diffs with syntax highlighting using Highlight.js |
-| `AGENT_DIFF_TOOL_SETUP.md` | Comprehensive guide for configuring n8n agents to output diff tools |
-| `src/components/DIFF_TOOL_USAGE.md` | In-component documentation for the diff tool feature |
-
-## Theme & Styling
-
-- **System:** Tailwind CSS 4 with CSS custom properties and OKLch color space
-- **Colors:** Warm light mode (cream/beige) and pure black dark mode
-- **Implementation:** `next-themes` with "light" and "dark" variants
-- **Toggle:** Mode toggle button in header
-- **Global Styles:** `src/app/globals.css` contains theme definitions and Tailwind imports
-
-## Configuration Files
-
-- `tsconfig.json` - TypeScript strict mode, bundler module resolution, `@/*` alias to `src/`
-- `next.config.ts` - Next.js configuration
-- `open-next.config.ts` - Cloudflare-specific Next.js configuration
-- `wrangler.jsonc` - Wrangler (Cloudflare CLI) configuration
-- `eslint.config.mjs` - ESLint with Next.js core-web-vitals and TypeScript support
-- `components.json` - shadcn/ui component library configuration
-- `postcss.config.mjs` - Tailwind CSS plugin configuration
-
-## n8n Webhook Integration
-
-The chat endpoint routes to an n8n workflow via webhook. The workflow should:
-
-1. Accept message input and context from the client
-2. Return newline-delimited JSON with messages in one of two formats:
-   - `{ "type": "item", "content": "text content" }`
-   - `{ "type": "tool_call", "name": "show_diff", "input": { "before": "...", "after": "...", "language": "..." } }`
-
-**Note:** See `AGENT_DIFF_TOOL_SETUP.md` for detailed instructions on configuring n8n agents to use the diff tool feature.
-
-## Common Tasks
-
-### Configuring Agents via Environment Variables
-**Local Development (.env.local):**
-```
-AGENT_1_URL=https://n8n.example.com/webhook/agent-1-uuid
-AGENT_1_NAME=Creative Writer
-AGENT_1_DESCRIPTION=An AI assistant for creative writing and brainstorming
-
-AGENT_2_URL=https://n8n.example.com/webhook/agent-2-uuid
-AGENT_2_NAME=Code Reviewer
-AGENT_2_DESCRIPTION=An AI assistant for code review and refactoring
 ```
 
-**Cloudflare Deployment:**
+**Testing:**
-- Go to Cloudflare dashboard → Workers & Pages → your-project → Settings → Environment variables
+```typescript
-- Add the same AGENT_* variables above
+import { registerRuntimeFlags, resetFlagsCache } from '@/lib/flags'
-- Deploy to apply changes
 
-### Adding a New Agent
+beforeEach(() => {
-1. Add three environment variables:
+  resetFlagsCache()
-   - `AGENT_N_URL` - webhook URL for the agent
+  registerRuntimeFlags({ IMAGE_UPLOADS_ENABLED: false })
-   - `AGENT_N_NAME` - display name
+})
-   - `AGENT_N_DESCRIPTION` - short description
+```
-2. On next page reload, new agent appears in AgentSelector
-3. No code changes needed
 
-### Modifying Chat Messages or Display
+### Configuration
-- **Chat UI:** `src/components/chat-interface.tsx`
+- Development: Set in `.env.local`
-- **Rendering:** `src/components/markdown-renderer.tsx`
+- Production: Set in `wrangler.jsonc` under `env.production.vars`
-- **State:** Message list stored in component state, persisted to localStorage per agent
+- Parse format: "true"/"false", "1"/"0", "yes"/"no" (case-insensitive)
-- **Per-agent persistence:** Messages saved as `chat-messages-{agentId}`
 
-### Changing Theme Colors
+## Testing
-- Edit CSS custom properties in `src/app/globals.css`
-- Uses OKLch color space (perceptually uniform)
-- Dark mode variant defined with `@custom-variant dark`
 
-### Adding New Tool Types (beyond show_diff)
+### Test Framework
-- **Step 1:** Handle in `/api/chat/route.ts` - convert tool_call to markdown format
+- **Vitest 4.0** - Fast unit test framework with Jest-compatible API
-- **Step 2:** Add detection logic in `markdown-renderer.tsx` to extract new code block type
+- **@testing-library/react** - React component testing utilities
-- **Step 3:** Create new component similar to `DiffDisplay` and render dynamically
+- **jsdom** - Browser environment simulation
 
-### Switching Between Agents
+### Test Structure
-- Users click "Switch Agent" button in header
+Tests organized in `__tests__/` by domain:
-- Returns to AgentSelector menu
+- `lib/` - Utility and library tests (flags, types, helpers)
-- Previously selected agents/messages are preserved in localStorage per agent
+- `api/` - API route tests with mocked fetch
-- No data loss when switching
+- `components/` - React component rendering tests
+- `flags/` - Feature flag integration tests
 
-## Notes for Future Development
+### Running Tests
+```bash
+pnpm test                # Run all tests in watch mode
+pnpm test:ui             # Open Vitest UI dashboard
+pnpm test:coverage       # Generate coverage report
+```
 
-### Multi-Agent Features
+### Test Patterns
-- **Agent Switching:** Currently requires page reload to agent selector. Could add inline dropdown in header.
-- **Agent Management:** UI for adding/editing agents without env vars could improve UX
-- **Agent Verification:** Add health checks to verify agents' webhook URLs are reachable
-- **Agent Categories:** Could group agents by category/type for better organization
 
-### Image Upload Enhancements
+**API Route Testing:**
-- **Image Storage:** Currently base64 in memory; consider Cloudflare R2 for large images
+```typescript
-- **Image Preview:** Add full-screen image viewer for uploaded images
+import { POST } from '@/app/api/chat/route'
-- **Multi-file Upload:** Support multiple file types beyond images
+import { NextRequest } from 'next/server'
 
-### Performance & Scaling
+const request = new NextRequest('http://localhost/api/chat', {
-- **Message Virtualization:** Chat interface uses `useRef` for scroll - consider virtualizing long message lists
+  method: 'POST',
-- **Storage Size:** localStorage has 5-10MB limit; consider IndexedDB for longer conversations
+  body: JSON.stringify({ message: 'test', agentId: 'agent-1' })
-- **Streaming:** Current implementation reads entire response before parsing; consider streaming HTML as it arrives
+})
+const response = await POST(request)
+```
 
-### Testing & Quality
+**Component Testing:**
-- **Testing:** Consider adding Jest or Vitest for component and API testing
+```typescript
-- **Error Handling:** Enhance with retry logic for failed webhook calls and better error messages
+import { render, screen } from '@testing-library/react'
-- **Logging:** Add structured logging for debugging multi-agent interactions
+import { MarkdownRenderer } from '@/components/markdown-renderer'
 
-### Accessibility & UX
+render(<MarkdownRenderer content="# Hello" />)
-- **Keyboard Navigation:** Verify keyboard navigation on agent selector cards and custom diff tool
+expect(screen.getByText('Hello')).toBeInTheDocument()
-- **ARIA Labels:** Add aria-labels for screen readers on interactive elements
+```
-- **Mobile Responsive:** Test agent selector and chat interface on mobile devices
+
+**Flag Behavior Testing:**
+```typescript
+// Test feature when flag is disabled
+process.env.IMAGE_UPLOADS_ENABLED = 'false'
+resetFlagsCache()
+
+const response = await POST(requestWithImages)
+expect(response.status).toBe(403)
+```
+
+### Test Configuration
+- Config: `vitest.config.ts`
+- Setup: `vitest.setup.ts` (mocks window.matchMedia, IntersectionObserver, etc.)
+- Path aliases: `@/` resolves to `./src/`
+- Environment: jsdom with globals enabled
+- Coverage: v8 provider, excludes node_modules, .next, __tests__
+
+### Important Testing Notes
+- Always call `resetFlagsCache()` in beforeEach when testing flags
+- Mock `global.fetch` for API tests that call webhooks
+- Use `vi.mock()` for module mocking, `vi.spyOn()` for function spying
+- Clean up mocks with `vi.clearAllMocks()` in beforeEach
+- Test both success and error paths for all features
+
+## Development Notes
+
+- Next.js 15.5.4 with App Router (all components are Client Components via "use client")
+- React 19.1.0 with concurrent features
+- Deployed to Cloudflare Workers, not Vercel
+- No database - all state in localStorage and n8n workflows
+- Mobile-first responsive design with specific mobile breakpoint styling
+- Vitest for testing with Testing Library for React components

README.md

@@ -1,37 +1,18 @@
 <div align="center">
 
-<!-- DEPLOYMENT COMMAND -->
-<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 20px; border-radius: 10px; margin-bottom: 30px;">
-  <h3 style="color: white; margin: 0;">STARTER COMMAND</h3>
-  <code style="color: #ffd700; font-size: 16px; font-weight: bold;">./scripts/bootstrap-template.sh</code>
-</div>
-
 <a id="readme-top"></a>
 
-<!-- PROJECT SHIELDS -->
-[![Contributors][contributors-shield]][contributors-url]
-[![Forks][forks-shield]][forks-url]
-[![Stargazers][stars-shield]][stars-url]
-[![Issues][issues-shield]][issues-url]
-[![LinkedIn][linkedin-shield]][linkedin-url]
-
 <!-- PROJECT LOGO -->
 <br />
 <div align="center">
-  <a href="https://git.biohazardvfx.com/nicholai/template">
+  <h1 align="center" style="font-size: 48px;">Multi-Agent Chat Interface</h1>
-    <img src="public/template-logo.png" alt="Template Logo" width="400">
-  </a>
-
-  <h1 align="center" style="font-size: 48px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Development Project Template</h1>
 
   <p align="center" style="font-size: 18px; max-width: 680px;">
-    Opinionated starter kit for new projects deployed through my self-hosted Gitea.<br />
+    Beautiful, glass-morphism chat interface for interacting with multiple AI agents through n8n webhooks.<br />
-    <strong>Documentation-first • Edge-case aware • Automation ready</strong>
+    <strong>Cloudflare Workers • Real-time streaming • Mobile-first design</strong>
     <br />
     <br />
     <a href="#getting-started"><strong>Quick Start »</strong></a>
-    ·
-    <a href="https://git.biohazardvfx.com/nicholai/template/issues/new?labels=enhancement">Suggest Improvement</a>
   </p>
 </div>
 
@@ -41,14 +22,10 @@
 <details open>
   <summary><h2>Table of Contents</h2></summary>
   <ol>
-    <li><a href="#about-the-template">About The Template</a>
+    <li><a href="#about">About</a></li>
-      <ul>
-        <li><a href="#why-this-exists">Why This Exists</a></li>
-        <li><a href="#core-principles">Core Principles</a></li>
-      </ul>
-    </li>
     <li><a href="#tech-stack">Tech Stack</a></li>
     <li><a href="#architecture">Architecture</a></li>
+    <li><a href="#feature-flags">Feature Flags</a></li>
     <li><a href="#getting-started">Getting Started</a>
       <ul>
         <li><a href="#prerequisites">Prerequisites</a></li>
@@ -59,13 +36,10 @@
     <li><a href="#development">Development</a>
       <ul>
         <li><a href="#common-commands">Common Commands</a></li>
-        <li><a href="#docs--checklists">Docs & Checklists</a></li>
+        <li><a href="#deployment">Deployment</a></li>
       </ul>
     </li>
-    <li><a href="#edge-cases">Edge Cases</a></li>
     <li><a href="#testing">Testing</a></li>
-    <li><a href="#contributing">Contributing</a></li>
-    <li><a href="#license">License</a></li>
     <li><a href="#contact">Contact</a></li>
   </ol>
 </details>
@@ -74,45 +48,33 @@
 
 </div>
 
-## About The Template
+## About
 
-<div align="center">
+Multi-agent chat interface that enables users to select from configured AI agents and interact with them through n8n workflow webhooks. Built with Next.js 15 and deployed to Cloudflare Workers for global edge performance.
-  <img src="public/template-dashboard.png" alt="Template Dashboard Mock" width="800" style="border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.3);">
-</div>
 
-<br />
+### Key Features
 
-This repository is the baseline I use when starting a new product or service. It keeps the process consistent, reduces the time spent wiring boilerplate, and reminds me to account for the edge cases that usually appear late in a project.
+- **Multi-agent support:** Dynamically configured agents via environment variables
-
+- **Real-time streaming:** Handles chunked responses from n8n workflows
-### Why This Exists
+- **Image attachments:** Base64 image upload support with feature flag control
-
+- **Diff visualization:** Custom markdown renderer for side-by-side code diffs
-- **Primed documentation:** Every project starts with a README, stack decision log, bootstrapping checklist, and edge-case catalogue.
+- **Session persistence:** Agent-specific conversation history in localStorage
-- **Automation on day one:** `scripts/` holds helpers to rename the project, configure remotes, and clean example assets.
+- **Mobile-optimized:** Glass-morphism design with mobile-first responsiveness
-- **Testing blueprints:** Example Vitest suites (`__tests__/`) demonstrate how to structure API, component, flag, hook, and library tests.
+- **Feature flags:** Runtime-configurable features for controlled rollouts
-- **Gitea ready:** Pull request templates, Conventional Commit guidance, and workflows match my self-hosted setup.
-
-### Core Principles
-
-| Principle | What it means |
-| --- | --- |
-| Documentation-first | Write down intent and constraints before diving into code. |
-| Edge-case aware | Capture the failure scenarios that repeatedly cause incidents. |
-| Reproducible setup | Every project can be re-created from scratch via scripts and docs. |
-| Automation ready | Scripts and CI pipelines are easy to adapt or extend. |
 
 <p align="right"><a href="#readme-top">back to top ↑</a></p>
 
 ## Tech Stack
 
-- **Framework**: Next.js + TypeScript (adjust as needed)
+- **Framework**: Next.js 15.5.4 (App Router) + TypeScript
-- **Testing**: Vitest + Testing Library
+- **Runtime**: Cloudflare Workers
-- **Styling**: Tailwind CSS or CSS Modules (pick one per project)
+- **Adapter**: @opennextjs/cloudflare 1.12.0
-- **Database**: PostgreSQL (Supabase/Neon friendly)
+- **Styling**: Tailwind CSS 4.1.9 with custom glass-morphism design
-- **Storage**: S3-compatible providers (AWS S3, Cloudflare R2)
+- **UI Components**: Radix UI primitives
-- **Auth**: NextAuth.js or custom token flows
+- **Animations**: Framer Motion 12
-- **Deployment**: Wrangler + Cloudflare Pages/Workers (swap for your platform)
+- **Markdown**: react-markdown with rehype-highlight for syntax highlighting
-
+- **Testing**: Vitest 4 + Testing Library
-Document any deviations in `docs/stack-decisions.md`.
+- **Package Manager**: pnpm
 
 <p align="right"><a href="#readme-top">back to top ↑</a></p>
 
@@ -120,16 +82,38 @@ Document any deviations in `docs/stack-decisions.md`.
 
 ```mermaid
 flowchart TD
-  A[Client] -->|HTTP| B[Next.js App]
+  A[User Browser] -->|Chat Request| B[Next.js App Router]
-  B -->|API Routes| C[(PostgreSQL)]
+  B -->|API /agents| C[Environment Config]
-  B -->|Edge Functions| D[Cloudflare Workers]
+  B -->|API /chat| D[n8n Webhook]
-  B -->|Auth| E[Identity Provider]
+  D -->|Streaming Response| B
-  B -->|Storage SDK| F[(S3/R2 Bucket)]
+  B -->|Rendered UI| A
-  D -->|Feature Flags| G[Config Service]
+  C -->|Agent Config| B
+  B -->|Static Assets| E[Cloudflare CDN]
+
+  style B fill:#667eea
+  style D fill:#764ba2
+  style E fill:#ffd700
 ```
 
-- Keep infrastructure definitions under `infra/` once you create them.
+### Key Components
-- Capture architectural decisions and trade-offs in `docs/stack-decisions.md`.
+
+- **Agent Discovery**: `/api/agents` dynamically discovers agents from environment variables (`AGENT_N_URL`, `AGENT_N_NAME`, `AGENT_N_DESCRIPTION`)
+- **Message Proxy**: `/api/chat` forwards user messages to the selected agent's n8n webhook with session tracking
+- **Feature Flags**: Runtime-configurable flags control image uploads and diff tool rendering
+- **Client State**: Agent selection and conversation history persisted in browser localStorage
+
+<p align="right"><a href="#readme-top">back to top ↑</a></p>
+
+## Feature Flags
+
+The application supports runtime feature flags configured via environment variables:
+
+| Flag | Default | Description |
+| --- | --- | --- |
+| `IMAGE_UPLOADS_ENABLED` | `true` | Enable/disable image attachment functionality |
+| `DIFF_TOOL_ENABLED` | `true` | Enable/disable advanced diff visualization |
+
+Configure flags in `wrangler.jsonc` for production or `.env.local` for development.
 
 <p align="right"><a href="#readme-top">back to top ↑</a></p>
 
@@ -137,32 +121,54 @@ flowchart TD
 
 ### Prerequisites
 
-- Node.js 20+
+- **Node.js** 20 or higher
-- pnpm (preferred) or your package manager of choice
+- **pnpm** package manager
-- `jq` (optional, used by bootstrap script)
+- **Cloudflare account** with Wrangler CLI configured
-- Git & access to your Gitea instance
+- **n8n instance** with webhook URLs for your agents
 
 ### Installation
 
-1. **Clone / duplicate the template**
+1. **Clone the repository**
    ```bash
-   git clone git@git.biohazardvfx.com:nicholai/template.git my-new-project
+   git clone <your-repo-url>
-   cd my-new-project
+   cd multi-agent_chat_interface
    ```
-2. **Bootstrap**
+
-   ```bash
+2. **Install dependencies**
-   ./scripts/bootstrap-template.sh
-   ```
-3. **Install dependencies**
    ```bash
    pnpm install
    ```
-4. **Follow the checklist**
+
-   - Open `docs/bootstrapping.md` and complete each item.
+3. **Configure environment variables**
+
+   Create `.env.local` for local development:
+   ```env
+   AGENT_1_URL=https://n8n.example.com/webhook/your-webhook-id
+   AGENT_1_NAME=Your Agent Name
+   AGENT_1_DESCRIPTION=Description of your agent
+
+   IMAGE_UPLOADS_ENABLED=true
+   DIFF_TOOL_ENABLED=true
+   ```
+
+   For production, update `wrangler.jsonc` with your agent configurations.
+
+4. **Run the development server**
+   ```bash
+   pnpm dev
+   ```
+
+   Open [http://localhost:3000](http://localhost:3000) in your browser.
 
 ### Environment Variables
 
-Copy `.env.example` to `.env` and fill only the sections you need. The file is structured by concern (database, auth, storage, observability) so you can strip unused parts.
+Configure agents using numbered environment variables:
+
+- `AGENT_N_URL` - n8n webhook URL for agent N
+- `AGENT_N_NAME` - Display name for agent N
+- `AGENT_N_DESCRIPTION` - Optional description for agent N
+
+Where N = 1, 2, 3, etc. The application will discover all configured agents automatically.
 
 <p align="right"><a href="#readme-top">back to top ↑</a></p>
 
@@ -172,49 +178,71 @@ Copy `.env.example` to `.env` and fill only the sections you need. The file is s
 
 | Command | Description |
 | --- | --- |
-| `pnpm dev` | Start the Next.js dev server. |
+| `pnpm dev` | Start Next.js development server at localhost:3000 |
-| `pnpm lint` | Run ESLint / formatting checks. |
+| `pnpm build` | Build Next.js application |
-| `pnpm test` | Execute the Vitest suites. |
+| `pnpm lint` | Run ESLint checks |
-| `pnpm build` | Generate a production build. |
+| `pnpm test` | Run Vitest test suites |
+| `pnpm test:ui` | Run tests with Vitest UI |
+| `pnpm test:coverage` | Generate test coverage report |
 
-### Docs & Checklists
+### Deployment
 
-- `docs/bootstrapping.md` — tasks to run through when spinning up a new project.
+Deploy to Cloudflare Workers:
-- `docs/edge-cases.md` — prompts for the weird scenarios that usually break things.
-- `docs/stack-decisions.md` — record “why” for each notable tech choice.
-- `docs/testing-blueprints.md` — guidance for adapting the example tests.
 
-<p align="right"><a href="#readme-top">back to top ↑</a></p>
+1. **Build for Cloudflare**
+   ```bash
+   npx @opennextjs/cloudflare build
+   ```
 
-## Edge Cases
+   **Important:** Always run this before deploying. Standard `next build` alone is insufficient.
 
-Edge-case awareness is built into the template:
+2. **Deploy**
+   ```bash
+   npx wrangler deploy
+   ```
 
-- Feature flags default to safe behaviour when providers fail.
+   Or for specific environment:
-- Auth, storage, scheduling, and third-party integrations each have dedicated prompts.
+   ```bash
-- The example tests in `__tests__/flags/` and `__tests__/lib/` show how to assert defensive behaviour.
+   npx wrangler deploy --env production
+   ```
 
-Add new lessons learned back into `docs/edge-cases.md` so the template evolves with every incident.
+3. **View logs**
+   ```bash
+   npx wrangler tail
+   ```
+
+See [BUILD.md](BUILD.md) for detailed deployment instructions.
 
 <p align="right"><a href="#readme-top">back to top ↑</a></p>
 
 ## Testing
 
-- Tests are organised by domain: `api/`, `components/`, `hooks/`, `flags/`, `lib/`.
+Tests are organized by domain in `__tests__/`:
-- Each suite mocks external dependencies and asserts on both happy-path and failure scenarios.
-- See `docs/testing-blueprints.md` for tips on customising them to your project.
 
-<p align="right"><a href="#readme-top">back to top ↑</a></p>
+- **`lib/`** - Library and utility tests (flags, types, helpers)
+- **`api/`** - API route tests (agents, chat endpoints)
+- **`components/`** - React component tests
+- **`flags/`** - Feature flag behavior tests
 
-## Contributing
+### Running Tests
 
-See [`CONTRIBUTING.md`](CONTRIBUTING.md) for branching conventions, commit style, and review expectations.
+```bash
+# Run all tests
+pnpm test
 
-<p align="right"><a href="#readme-top">back to top ↑</a></p>
+# Run with UI
+pnpm test:ui
 
-## License
+# Generate coverage report
+pnpm test:coverage
+```
 
-Use, remix, or extract any portion of this template for your own projects. Attribution is appreciated but not required.
+### Test Patterns
+
+- Feature flag tests verify behavior when flags are enabled/disabled
+- API tests mock external webhook calls
+- Component tests use Testing Library for React rendering
+- All tests clean up environment and state between runs
 
 <p align="right"><a href="#readme-top">back to top ↑</a></p>
 
@@ -222,19 +250,4 @@ Use, remix, or extract any portion of this template for your own projects. Attri
 
 Nicholai — [@biohazardvfx](https://linkedin.com/in/biohazardvfx) — nicholai@biohazardvfx.com
 
-Project Link: [https://git.biohazardvfx.com/nicholai/template-repo](https://git.biohazardvfx.com/nicholai/template-repo)
-
 <p align="right"><a href="#readme-top">back to top ↑</a></p>
-
-<!-- MARKDOWN LINKS & IMAGES -->
-<!-- shields -->
-[contributors-shield]: https://img.shields.io/gitea/contributors/nicholai/template?style=for-the-badge
-[contributors-url]: https://git.biohazardvfx.com/nicholai/template/graphs/contributors
-[forks-shield]: https://img.shields.io/gitea/forks/nicholai/template?style=for-the-badge
-[forks-url]: https://git.biohazardvfx.com/nicholai/template/network/members
-[stars-shield]: https://img.shields.io/gitea/stars/nicholai/template?style=for-the-badge
-[stars-url]: https://git.biohazardvfx.com/nicholai/template/stars
-[issues-shield]: https://img.shields.io/gitea/issues/nicholai/template?style=for-the-badge
-[issues-url]: https://git.biohazardvfx.com/nicholai/template/issues
-[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
-[linkedin-url]: https://linkedin.com/in/biohazardvfx

__tests__/api/agents.test.ts

@@ -0,0 +1,98 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
+import { GET } from '@/app/api/agents/route'
+import { NextRequest } from 'next/server'
+
+describe('/api/agents', () => {
+  const originalEnv = { ...process.env }
+
+  beforeEach(() => {
+    // Clean environment before each test
+    delete process.env.AGENT_1_URL
+    delete process.env.AGENT_1_NAME
+    delete process.env.AGENT_1_DESCRIPTION
+    delete process.env.AGENT_2_URL
+    delete process.env.AGENT_2_NAME
+    delete process.env.AGENT_2_DESCRIPTION
+  })
+
+  afterEach(() => {
+    // Restore environment
+    process.env = { ...originalEnv }
+  })
+
+  it('returns empty array when no agents are configured', async () => {
+    const request = new NextRequest('http://localhost:3000/api/agents')
+    const response = await GET(request)
+    const data = await response.json()
+
+    expect(response.status).toBe(200)
+    expect(data.agents).toEqual([])
+  })
+
+  it('discovers single agent from environment variables', async () => {
+    process.env.AGENT_1_URL = 'https://example.com/webhook/1'
+    process.env.AGENT_1_NAME = 'Test Agent'
+    process.env.AGENT_1_DESCRIPTION = 'Test Description'
+
+    const request = new NextRequest('http://localhost:3000/api/agents')
+    const response = await GET(request)
+    const data = await response.json()
+
+    expect(response.status).toBe(200)
+    expect(data.agents).toHaveLength(1)
+    expect(data.agents[0]).toEqual({
+      id: 'agent-1',
+      name: 'Test Agent',
+      description: 'Test Description',
+      webhookUrl: 'https://example.com/webhook/1',
+    })
+  })
+
+  it('discovers multiple agents', async () => {
+    process.env.AGENT_1_URL = 'https://example.com/webhook/1'
+    process.env.AGENT_1_NAME = 'First Agent'
+    process.env.AGENT_1_DESCRIPTION = 'First Description'
+
+    process.env.AGENT_2_URL = 'https://example.com/webhook/2'
+    process.env.AGENT_2_NAME = 'Second Agent'
+    process.env.AGENT_2_DESCRIPTION = 'Second Description'
+
+    const request = new NextRequest('http://localhost:3000/api/agents')
+    const response = await GET(request)
+    const data = await response.json()
+
+    expect(response.status).toBe(200)
+    expect(data.agents).toHaveLength(2)
+    expect(data.agents[0].id).toBe('agent-1')
+    expect(data.agents[1].id).toBe('agent-2')
+  })
+
+  it('uses empty string for missing description', async () => {
+    process.env.AGENT_1_URL = 'https://example.com/webhook/1'
+    process.env.AGENT_1_NAME = 'Test Agent'
+    // No description set
+
+    const request = new NextRequest('http://localhost:3000/api/agents')
+    const response = await GET(request)
+    const data = await response.json()
+
+    expect(response.status).toBe(200)
+    expect(data.agents[0].description).toBe('')
+  })
+
+  it('skips agents without names', async () => {
+    process.env.AGENT_1_URL = 'https://example.com/webhook/1'
+    // No name set
+
+    process.env.AGENT_2_URL = 'https://example.com/webhook/2'
+    process.env.AGENT_2_NAME = 'Valid Agent'
+
+    const request = new NextRequest('http://localhost:3000/api/agents')
+    const response = await GET(request)
+    const data = await response.json()
+
+    expect(response.status).toBe(200)
+    expect(data.agents).toHaveLength(1)
+    expect(data.agents[0].id).toBe('agent-2')
+  })
+})

__tests__/api/artists.test.ts

@@ -1,119 +0,0 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { GET } from '@/app/api/artists/route'
-import { NextRequest } from 'next/server'
-
-// Mock the database functions
-vi.mock('@/lib/db', () => ({
-  getPublicArtists: vi.fn(),
-}))
-
-import { getPublicArtists } from '@/lib/db'
-
-describe('GET /api/artists', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  it('should return artists successfully', async () => {
-    const mockArtists = [
-      {
-        id: '1',
-        slug: 'test-artist',
-        name: 'Test Artist',
-        bio: 'Test bio',
-        specialties: ['Traditional', 'Realism'],
-        instagramHandle: '@testartist',
-        portfolioImages: [],
-        isActive: true,
-        hourlyRate: 150,
-      },
-    ]
-
-    vi.mocked(getPublicArtists).mockResolvedValue(mockArtists)
-
-    const request = new NextRequest('http://localhost:3000/api/artists')
-    const response = await GET(request)
-    const data = await response.json()
-
-    expect(response.status).toBe(200)
-    expect(data.artists).toHaveLength(1)
-    expect(data.artists[0].name).toBe('Test Artist')
-  })
-
-  it('should apply specialty filter', async () => {
-    const mockArtists = [
-      {
-        id: '1',
-        slug: 'traditional-artist',
-        name: 'Traditional Artist',
-        bio: 'Test bio',
-        specialties: ['Traditional'],
-        portfolioImages: [],
-        isActive: true,
-      },
-    ]
-
-    vi.mocked(getPublicArtists).mockResolvedValue(mockArtists)
-
-    const request = new NextRequest('http://localhost:3000/api/artists?specialty=Traditional')
-    await GET(request)
-
-    expect(getPublicArtists).toHaveBeenCalledWith(
-      expect.objectContaining({
-        specialty: 'Traditional',
-      }),
-      undefined
-    )
-  })
-
-  it('should apply search filter', async () => {
-    vi.mocked(getPublicArtists).mockResolvedValue([])
-
-    const request = new NextRequest('http://localhost:3000/api/artists?search=John')
-    await GET(request)
-
-    expect(getPublicArtists).toHaveBeenCalledWith(
-      expect.objectContaining({
-        search: 'John',
-      }),
-      undefined
-    )
-  })
-
-  it('should apply pagination', async () => {
-    vi.mocked(getPublicArtists).mockResolvedValue([])
-
-    const request = new NextRequest('http://localhost:3000/api/artists?limit=10&page=2')
-    await GET(request)
-
-    expect(getPublicArtists).toHaveBeenCalledWith(
-      expect.objectContaining({
-        limit: 10,
-        offset: 10, // page 2 with limit 10 = offset 10
-      }),
-      undefined
-    )
-  })
-
-  it('should handle database errors gracefully', async () => {
-    vi.mocked(getPublicArtists).mockRejectedValue(new Error('Database error'))
-
-    const request = new NextRequest('http://localhost:3000/api/artists')
-    const response = await GET(request)
-
-    expect(response.status).toBe(500)
-    const data = await response.json()
-    expect(data).toHaveProperty('error')
-  })
-
-  it('should return empty array when no artists found', async () => {
-    vi.mocked(getPublicArtists).mockResolvedValue([])
-
-    const request = new NextRequest('http://localhost:3000/api/artists')
-    const response = await GET(request)
-    const data = await response.json()
-
-    expect(response.status).toBe(200)
-    expect(data.artists).toEqual([])
-  })
-})

__tests__/api/chat.test.ts

@@ -0,0 +1,237 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
+import { POST } from '@/app/api/chat/route'
+import { NextRequest } from 'next/server'
+import { resetFlagsCache } from '@/lib/flags'
+
+// Mock fetch globally
+global.fetch = vi.fn()
+
+describe('/api/chat', () => {
+  const originalEnv = { ...process.env }
+
+  beforeEach(() => {
+    resetFlagsCache()
+    vi.clearAllMocks()
+
+    // Set up default agent
+    process.env.AGENT_1_URL = 'https://example.com/webhook/test'
+    process.env.IMAGE_UPLOADS_ENABLED = 'true'
+    process.env.DIFF_TOOL_ENABLED = 'true'
+  })
+
+  afterEach(() => {
+    process.env = { ...originalEnv }
+    vi.restoreAllMocks()
+  })
+
+  it('requires message field', async () => {
+    const request = new NextRequest('http://localhost:3000/api/chat', {
+      method: 'POST',
+      body: JSON.stringify({
+        agentId: 'agent-1',
+        sessionId: 'test-session',
+        timestamp: new Date().toISOString(),
+      }),
+    })
+
+    const response = await POST(request)
+    const data = await response.json()
+
+    expect(response.status).toBe(400)
+    expect(data.error).toBe('Message is required')
+  })
+
+  it('requires agentId field', async () => {
+    const request = new NextRequest('http://localhost:3000/api/chat', {
+      method: 'POST',
+      body: JSON.stringify({
+        message: 'Hello',
+        sessionId: 'test-session',
+        timestamp: new Date().toISOString(),
+      }),
+    })
+
+    const response = await POST(request)
+    const data = await response.json()
+
+    expect(response.status).toBe(400)
+    expect(data.error).toBe('Agent ID is required')
+  })
+
+  it('rejects images when IMAGE_UPLOADS_ENABLED is false', async () => {
+    process.env.IMAGE_UPLOADS_ENABLED = 'false'
+    resetFlagsCache()
+
+    const request = new NextRequest('http://localhost:3000/api/chat', {
+      method: 'POST',
+      body: JSON.stringify({
+        message: 'Hello',
+        agentId: 'agent-1',
+        sessionId: 'test-session',
+        timestamp: new Date().toISOString(),
+        images: ['data:image/png;base64,abc123'],
+      }),
+    })
+
+    const response = await POST(request)
+    const data = await response.json()
+
+    expect(response.status).toBe(403)
+    expect(data.error).toBe('Image uploads are currently disabled')
+  })
+
+  it('forwards message to webhook successfully', async () => {
+    const mockResponse = JSON.stringify({ response: 'Hello back!' })
+
+    ;(global.fetch as any).mockResolvedValueOnce({
+      ok: true,
+      status: 200,
+      text: async () => mockResponse,
+    })
+
+    const request = new NextRequest('http://localhost:3000/api/chat', {
+      method: 'POST',
+      body: JSON.stringify({
+        message: 'Hello',
+        agentId: 'agent-1',
+        sessionId: 'test-session',
+        timestamp: new Date().toISOString(),
+      }),
+    })
+
+    const response = await POST(request)
+    const data = await response.json()
+
+    expect(response.status).toBe(200)
+    expect(data.response).toBe('Hello back!')
+    expect(global.fetch).toHaveBeenCalledWith(
+      'https://example.com/webhook/test',
+      expect.objectContaining({
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+      })
+    )
+  })
+
+  it('handles streaming response with chunks', async () => {
+    const mockResponse = `{"type":"item","content":"Hello "}
+{"type":"item","content":"World!"}`
+
+    ;(global.fetch as any).mockResolvedValueOnce({
+      ok: true,
+      status: 200,
+      text: async () => mockResponse,
+    })
+
+    const request = new NextRequest('http://localhost:3000/api/chat', {
+      method: 'POST',
+      body: JSON.stringify({
+        message: 'Hi',
+        agentId: 'agent-1',
+        sessionId: 'test-session',
+        timestamp: new Date().toISOString(),
+      }),
+    })
+
+    const response = await POST(request)
+    const data = await response.json()
+
+    expect(response.status).toBe(200)
+    expect(data.response).toBe('Hello World!')
+  })
+
+  it('converts diff tool calls to markdown when enabled', async () => {
+    const mockResponse = JSON.stringify({
+      type: 'tool_call',
+      name: 'show_diff',
+      args: {
+        oldCode: 'const x = 1',
+        newCode: 'const x = 2',
+        title: 'Update value',
+        language: 'javascript',
+      },
+    })
+
+    ;(global.fetch as any).mockResolvedValueOnce({
+      ok: true,
+      status: 200,
+      text: async () => mockResponse,
+    })
+
+    const request = new NextRequest('http://localhost:3000/api/chat', {
+      method: 'POST',
+      body: JSON.stringify({
+        message: 'Show me diff',
+        agentId: 'agent-1',
+        sessionId: 'test-session',
+        timestamp: new Date().toISOString(),
+      }),
+    })
+
+    const response = await POST(request)
+    const data = await response.json()
+
+    expect(response.status).toBe(200)
+    expect(data.response).toContain('```diff-tool')
+    expect(data.response).toContain('oldCode')
+    expect(data.response).toContain('newCode')
+  })
+
+  it('converts diff tool calls to plain markdown when disabled', async () => {
+    process.env.DIFF_TOOL_ENABLED = 'false'
+    resetFlagsCache()
+
+    const mockResponse = JSON.stringify({
+      type: 'tool_call',
+      name: 'show_diff',
+      args: {
+        oldCode: 'const x = 1',
+        newCode: 'const x = 2',
+        title: 'Update value',
+        language: 'javascript',
+      },
+    })
+
+    ;(global.fetch as any).mockResolvedValueOnce({
+      ok: true,
+      status: 200,
+      text: async () => mockResponse,
+    })
+
+    const request = new NextRequest('http://localhost:3000/api/chat', {
+      method: 'POST',
+      body: JSON.stringify({
+        message: 'Show me diff',
+        agentId: 'agent-1',
+        sessionId: 'test-session',
+        timestamp: new Date().toISOString(),
+      }),
+    })
+
+    const response = await POST(request)
+    const data = await response.json()
+
+    expect(response.status).toBe(200)
+    expect(data.response).not.toContain('```diff-tool')
+    expect(data.response).toContain('**Before:**')
+    expect(data.response).toContain('**After:**')
+  })
+
+  it('returns error for unconfigured agent', async () => {
+    const request = new NextRequest('http://localhost:3000/api/chat', {
+      method: 'POST',
+      body: JSON.stringify({
+        message: 'Hello',
+        agentId: 'agent-99',
+        sessionId: 'test-session',
+        timestamp: new Date().toISOString(),
+      }),
+    })
+
+    const response = await POST(request)
+    const data = await response.json()
+
+    expect(response.status).toBe(400)
+    expect(data.error).toContain('not properly configured')
+  })
+})

__tests__/components/aftercare-page.test.tsx

@@ -1,82 +0,0 @@
-import React from 'react'
-import { render, screen } from '@testing-library/react'
-import { describe, expect, it } from 'vitest'
-
-import { AftercarePage } from '@/components/aftercare-page'
-
-describe('AftercarePage ShadCN UI Consistency', () => {
-  it('uses ShadCN design tokens and primitives correctly', () => {
-    render(<AftercarePage />)
-
-    // Verify main container uses ShadCN background tokens
-    const mainContainer = document.querySelector('.min-h-screen')
-    expect(mainContainer).toHaveClass('bg-background', 'text-foreground')
-
-    // Verify Tabs primitives are present
-    expect(screen.getByRole('tablist')).toBeInTheDocument()
-    expect(screen.getByRole('tab', { name: /general tattoo aftercare/i })).toBeInTheDocument()
-    expect(screen.getByRole('tab', { name: /transparent bandage aftercare/i })).toBeInTheDocument()
-
-    // Verify Alert primitives are present (there are multiple alerts)
-    const alerts = screen.getAllByRole('alert')
-    expect(alerts.length).toBeGreaterThan(0)
-
-    // Verify Card primitives are present (multiple cards should exist)
-    const cards = document.querySelectorAll('[data-slot="card"]')
-    expect(cards.length).toBeGreaterThan(0)
-
-    // Verify no ad-hoc color classes are used (specifically no text-white)
-    const htmlContent = document.documentElement.innerHTML
-    expect(htmlContent).not.toContain('text-white')
-
-    // Verify ShadCN design tokens are used
-    expect(htmlContent).toContain('text-muted-foreground')
-    expect(htmlContent).toContain('bg-background')
-    expect(htmlContent).toContain('text-foreground')
-  })
-
-  it('uses consistent ShadCN component structure', () => {
-    render(<AftercarePage />)
-
-    // Verify TabsList has proper ShadCN structure
-    const tabsList = screen.getByRole('tablist')
-    expect(tabsList).toHaveClass('grid', 'w-full', 'grid-cols-2', 'bg-muted', 'border')
-
-    // Verify Alert uses ShadCN structure with proper icon placement
-    const alerts = screen.getAllByRole('alert')
-    expect(alerts[0]).toHaveAttribute('data-slot', 'alert')
-
-    // Verify Cards use proper ShadCN structure
-    const cardHeaders = document.querySelectorAll('[data-slot="card-header"]')
-    expect(cardHeaders.length).toBeGreaterThan(0)
-
-    const cardContents = document.querySelectorAll('[data-slot="card-content"]')
-    expect(cardContents.length).toBeGreaterThan(0)
-  })
-
-  it('maintains consistent typography and spacing scales', () => {
-    render(<AftercarePage />)
-
-    // Verify heading uses consistent font classes
-    const mainHeading = screen.getByText('Tattoo Aftercare')
-    expect(mainHeading).toHaveClass('font-playfair')
-
-    // Verify muted text uses consistent token
-    const mutedElements = document.querySelectorAll('.text-muted-foreground')
-    expect(mutedElements.length).toBeGreaterThan(0)
-
-    // Verify consistent spacing classes are used
-    const htmlContent = document.documentElement.innerHTML
-    expect(htmlContent).toContain('space-y-')
-    expect(htmlContent).toContain('gap-')
-    expect(htmlContent).toContain('px-8')
-    expect(htmlContent).toContain('py-6') // Cards use py-6, not py-8
-  })
-
-  it('applies motion classes with reduced-motion safeguard', () => {
-    render(<AftercarePage />)
-    const html = document.documentElement.innerHTML
-    expect(html).toContain('animate-in')
-    expect(html).toContain('motion-reduce:animate-none')
-  })
-})

__tests__/components/artist-portfolio.test.tsx

@@ -1,99 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-import { describe, expect, it, vi, beforeEach } from 'vitest'
-import { ArtistPortfolio } from '@/components/artist-portfolio'
-
-// Mock requestAnimationFrame / cancel
-global.requestAnimationFrame = vi.fn((cb) => setTimeout(cb, 0) as unknown as number)
-global.cancelAnimationFrame = vi.fn((id) => clearTimeout(id as unknown as number))
-
-// Default matchMedia mock (no reduced motion)
-const createMatchMedia = (matches: boolean) =>
-  vi.fn().mockImplementation((query) => ({
-    matches,
-    media: query,
-    onchange: null,
-    addListener: vi.fn(),
-    removeListener: vi.fn(),
-    addEventListener: vi.fn(),
-    removeEventListener: vi.fn(),
-    dispatchEvent: vi.fn(),
-  }))
-
-// Basic getBoundingClientRect mock for panels
-const defaultRect = {
-  top: 0,
-  bottom: 800,
-  left: 0,
-  right: 1200,
-  width: 1200,
-  height: 800,
-  x: 0,
-  y: 0,
-  toJSON: () => {},
-}
-
-describe('ArtistPortfolio Split Hero', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-
-    // default to no reduced-motion preference
-    Object.defineProperty(window, 'matchMedia', {
-      writable: true,
-      value: createMatchMedia(false),
-    })
-
-    // Mock IntersectionObserver (class-like mock to satisfy TS typings)
-    class MockIntersectionObserver {
-      constructor(private cb?: IntersectionObserverCallback, private options?: IntersectionObserverInit) {}
-      observe = vi.fn()
-      unobserve = vi.fn()
-      disconnect = vi.fn()
-      takeRecords() { return [] }
-    }
-    // Assign the mock class for the test environment
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ;(global as any).IntersectionObserver = MockIntersectionObserver
-
-    // Mock getBoundingClientRect for all elements
-    Element.prototype.getBoundingClientRect = vi.fn(() => defaultRect)
-  })
-
-  it('initializes left/right panels with CSS var of 0 and transform style when motion allowed', () => {
-    const { getByTestId } = render(<ArtistPortfolio artistId="1" />)
-
-    const left = getByTestId('artist-left-panel')
-    const right = getByTestId('artist-right-panel')
-
-    expect(left).toBeInTheDocument()
-    expect(right).toBeInTheDocument()
-
-    // CSS var should be initialized to 0px on mount
-    expect(left.style.getPropertyValue('--parallax-offset')).toBe('0px')
-    expect(right.style.getPropertyValue('--parallax-offset')).toBe('0px')
-
-    // When motion is allowed, the element should expose the translateY style (uses CSS var)
-    expect(left).toHaveStyle({ transform: 'translateY(var(--parallax-offset, 0px))' })
-    expect(right).toHaveStyle({ transform: 'translateY(var(--parallax-offset, 0px))' })
-  })
-
-  it('does not apply parallax transform when prefers-reduced-motion is true', () => {
-    // Mock reduced motion preference
-    Object.defineProperty(window, 'matchMedia', {
-      writable: true,
-      value: createMatchMedia(true),
-    })
-
-    const { getByTestId } = render(<ArtistPortfolio artistId="1" />)
-
-    const left = getByTestId('artist-left-panel')
-    const right = getByTestId('artist-right-panel')
-
-    // With reduced motion, the hook should not add transform/willChange styles
-    expect(left).not.toHaveStyle({ transform: 'translateY(var(--parallax-offset, 0px))' })
-    expect(left).not.toHaveStyle({ willChange: 'transform' })
-
-    expect(right).not.toHaveStyle({ transform: 'translateY(var(--parallax-offset, 0px))' })
-    expect(right).not.toHaveStyle({ willChange: 'transform' })
-  })
-})

__tests__/components/artists-grid.test.tsx

@@ -1,202 +0,0 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { render, screen, waitFor } from '@testing-library/react'
-import { ArtistsGrid } from '@/components/artists-grid'
-import '@testing-library/jest-dom'
-
-// Mock the custom hook
-vi.mock('@/hooks/use-artist-data', () => ({
-  useArtists: vi.fn(),
-}))
-
-import { useArtists } from '@/hooks/use-artist-data'
-
-describe('ArtistsGrid Component', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  it('should display loading state', () => {
-    vi.mocked(useArtists).mockReturnValue({
-      data: undefined,
-      isLoading: true,
-      error: null,
-    } as any)
-
-    render(<ArtistsGrid />)
-
-    expect(screen.getByRole('status')).toBeInTheDocument()
-  })
-
-  it('should display artists when loaded', async () => {
-    const mockArtists = [
-      {
-        id: '1',
-        slug: 'test-artist',
-        name: 'Test Artist',
-        bio: 'Test bio',
-        specialties: ['Traditional', 'Realism'],
-        instagramHandle: '@testartist',
-        portfolioImages: [
-          {
-            id: '1',
-            artistId: '1',
-            url: 'https://example.com/image.jpg',
-            caption: 'Test image',
-            tags: ['Traditional'],
-            isPublic: true,
-            orderIndex: 0,
-            createdAt: new Date(),
-          },
-        ],
-        isActive: true,
-        hourlyRate: 150,
-      },
-    ]
-
-    vi.mocked(useArtists).mockReturnValue({
-      data: mockArtists,
-      isLoading: false,
-      error: null,
-    } as any)
-
-    render(<ArtistsGrid />)
-
-    await waitFor(() => {
-      expect(screen.getByText('Test Artist')).toBeInTheDocument()
-    })
-
-    expect(screen.getByText(/Traditional, Realism/i)).toBeInTheDocument()
-    expect(screen.getByText('Available')).toBeInTheDocument()
-  })
-
-  it('should display error state', () => {
-    vi.mocked(useArtists).mockReturnValue({
-      data: undefined,
-      isLoading: false,
-      error: new Error('Failed to fetch'),
-    } as any)
-
-    render(<ArtistsGrid />)
-
-    expect(screen.getByText(/Failed to load artists/i)).toBeInTheDocument()
-    expect(screen.getByRole('button', { name: /retry/i })).toBeInTheDocument()
-  })
-
-  it('should display empty state when no artists match filter', async () => {
-    vi.mocked(useArtists).mockReturnValue({
-      data: [],
-      isLoading: false,
-      error: null,
-    } as any)
-
-    render(<ArtistsGrid />)
-
-    await waitFor(() => {
-      expect(screen.getByText(/No artists found/i)).toBeInTheDocument()
-    })
-  })
-
-  it('should display artist cards with portfolio images', async () => {
-    const mockArtists = [
-      {
-        id: '1',
-        slug: 'artist-one',
-        name: 'Artist One',
-        bio: 'Bio one',
-        specialties: ['Traditional'],
-        portfolioImages: [
-          {
-            id: '1',
-            artistId: '1',
-            url: 'https://example.com/img1.jpg',
-            tags: ['profile'],
-            isPublic: true,
-            orderIndex: 0,
-            createdAt: new Date(),
-          },
-        ],
-        isActive: true,
-        hourlyRate: 100,
-      },
-    ]
-
-    vi.mocked(useArtists).mockReturnValue({
-      data: mockArtists,
-      isLoading: false,
-      error: null,
-    } as any)
-
-    render(<ArtistsGrid />)
-
-    await waitFor(() => {
-      // Check for View Portfolio link
-      const portfolioLink = screen.getByRole('link', { name: /View Portfolio/i })
-      expect(portfolioLink).toHaveAttribute('href', '/artists/artist-one')
-
-      // Check for Book Now link
-      const bookLink = screen.getByRole('link', { name: /Book Now/i })
-      expect(bookLink).toHaveAttribute('href', '/book?artist=artist-one')
-
-      // Check for hourly rate display
-      expect(screen.getByText(/\$100\/hr/i)).toBeInTheDocument()
-    })
-  })
-
-  it('should display specialties as badges', async () => {
-    const mockArtists = [
-      {
-        id: '1',
-        slug: 'multi-specialty-artist',
-        name: 'Multi Specialty Artist',
-        bio: 'Expert in multiple styles',
-        specialties: ['Traditional', 'Realism', 'Fine Line', 'Japanese'],
-        portfolioImages: [],
-        isActive: true,
-      },
-    ]
-
-    vi.mocked(useArtists).mockReturnValue({
-      data: mockArtists,
-      isLoading: false,
-      error: null,
-    } as any)
-
-    render(<ArtistsGrid />)
-
-    await waitFor(() => {
-      // Should show first 3 specialties
-      expect(screen.getByText('Traditional')).toBeInTheDocument()
-      expect(screen.getByText('Realism')).toBeInTheDocument()
-      expect(screen.getByText('Fine Line')).toBeInTheDocument()
-      
-      // Should show "+1 more" badge for the 4th specialty
-      expect(screen.getByText('+1 more')).toBeInTheDocument()
-    })
-  })
-
-  it('should show inactive badge for inactive artists', async () => {
-    const mockArtists = [
-      {
-        id: '1',
-        slug: 'inactive-artist',
-        name: 'Inactive Artist',
-        bio: 'Currently unavailable',
-        specialties: ['Traditional'],
-        portfolioImages: [],
-        isActive: false,
-      },
-    ]
-
-    vi.mocked(useArtists).mockReturnValue({
-      data: mockArtists,
-      isLoading: false,
-      error: null,
-    } as any)
-
-    render(<ArtistsGrid />)
-
-    await waitFor(() => {
-      expect(screen.getByText('Unavailable')).toBeInTheDocument()
-    })
-  })
-})

__tests__/components/hero-section.test.tsx

@@ -1,132 +0,0 @@
-import React from 'react'
-import { render, screen } from '@testing-library/react'
-import { describe, expect, it, vi, beforeEach } from 'vitest'
-import { HeroSection } from '@/components/hero-section'
-
-// Mock the feature flags provider
-vi.mock('@/components/feature-flags-provider', () => ({
-  useFeatureFlag: vi.fn(() => true),
-}))
-
-// Mock the parallax hooks
-vi.mock('@/hooks/use-parallax', () => ({
-  useMultiLayerParallax: vi.fn(() => ({
-    background: {
-      ref: { current: null },
-      style: { transform: 'translateY(0px)' },
-    },
-    midground: {
-      ref: { current: null },
-      style: { transform: 'translateY(0px)' },
-    },
-    foreground: {
-      ref: { current: null },
-      style: { transform: 'translateY(0px)' },
-    },
-  })),
-  useReducedMotion: vi.fn(() => false),
-}))
-
-describe('HeroSection Parallax Implementation', () => {
-  beforeEach(() => {
-    // Reset mocks
-    vi.clearAllMocks()
-  })
-
-  it("renders hero section with all layers", () => {
-    render(<HeroSection />)
-    
-    // Check for main heading
-    expect(screen.getByRole("heading", { name: /united tattoo/i })).toBeInTheDocument()
-    
-    // Check for tagline
-    expect(screen.getByText(/where artistry meets precision/i)).toBeInTheDocument()
-    
-    // Check for CTA button
-    expect(screen.getByRole("button", { name: /book consultation/i })).toBeInTheDocument()
-  })
-
-  it('applies reduced motion data attribute when reduced motion is preferred', async () => {
-    const { useReducedMotion } = await import('@/hooks/use-parallax')
-    vi.mocked(useReducedMotion).mockReturnValue(true)
-    
-    render(<HeroSection />)
-    
-    const section = document.querySelector('section')
-    expect(section).toHaveAttribute('data-reduced-motion', 'true')
-  })
-
-  it("has proper accessibility attributes for decorative images", () => {
-    render(<HeroSection />)
-    
-    // Background and midground layers should be aria-hidden
-    const decorativeElements = document.querySelectorAll('[aria-hidden="true"]')
-    expect(decorativeElements.length).toBeGreaterThan(0)
-  })
-
-  it("uses proper semantic structure", () => {
-    render(<HeroSection />)
-    
-    // Should have proper heading hierarchy
-    const heading = screen.getByRole("heading", { name: /united tattoo/i })
-    expect(heading.tagName).toBe("H1")
-    
-    // Should have proper section structure
-    const section = document.querySelector("section")
-    expect(section).toHaveAttribute("id", "home")
-  })
-
-  it("applies will-change-transform for performance optimization", () => {
-    render(<HeroSection />)
-    
-    const transformElements = document.querySelectorAll(".will-change-transform")
-    expect(transformElements.length).toBeGreaterThan(0)
-  })
-
-  it('respects feature flag for advanced animations', async () => {
-    const { useFeatureFlag } = await import('@/components/feature-flags-provider')
-    const { useMultiLayerParallax } = await import('@/hooks/use-parallax')
-    
-    // Test with feature flag disabled
-    vi.mocked(useFeatureFlag).mockReturnValue(false)
-    
-    render(<HeroSection />)
-    
-    // Should pass disabled=true to parallax hook when feature flag is off
-    expect(useMultiLayerParallax).toHaveBeenCalledWith(true)
-  })
-
-  it("has responsive design classes", () => {
-    render(<HeroSection />)
-    
-    const heading = screen.getByRole("heading", { name: /united tattoo/i })
-    expect(heading).toHaveClass("text-5xl", "lg:text-7xl")
-    
-    const tagline = screen.getByText(/where artistry meets precision/i)
-    expect(tagline).toHaveClass("text-xl", "lg:text-2xl")
-  })
-
-  it("initializes parallax transforms to 0 at mount", () => {
-    render(<HeroSection />)
-    
-    // All parallax layers should initialize with 0px transform
-    const backgroundLayer = document.querySelector('[style*="translateY(0px)"]')
-    const midgroundLayer = document.querySelectorAll('[style*="translateY(0px)"]')[1]
-    const foregroundLayer = document.querySelectorAll('[style*="translateY(0px)"]')[2]
-    
-    expect(backgroundLayer).toBeInTheDocument()
-    expect(midgroundLayer).toBeInTheDocument()
-    expect(foregroundLayer).toBeInTheDocument()
-  })
-
-  it("disables parallax transforms when reduced motion is preferred", async () => {
-    const { useReducedMotion } = await import('@/hooks/use-parallax')
-    vi.mocked(useReducedMotion).mockReturnValue(true)
-    
-    render(<HeroSection />)
-    
-    // When reduced motion is preferred, parallax should be disabled
-    const section = document.querySelector('section')
-    expect(section).toHaveAttribute('data-reduced-motion', 'true')
-  })
-})

__tests__/components/markdown-renderer.test.tsx

@@ -0,0 +1,68 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { MarkdownRenderer } from '@/components/markdown-renderer'
+import { registerRuntimeFlags, resetFlagsCache } from '@/lib/flags'
+
+// Mock the useFlags hook
+vi.mock('@/lib/use-flags', () => ({
+  useFlags: () => ({ flags: { IMAGE_UPLOADS_ENABLED: true, DIFF_TOOL_ENABLED: true }, isLoading: false, error: null }),
+}))
+
+describe('MarkdownRenderer', () => {
+  beforeEach(() => {
+    resetFlagsCache()
+  })
+
+  it('renders basic markdown content', () => {
+    render(<MarkdownRenderer content="Hello **world**" />)
+    expect(screen.getByText(/Hello/)).toBeInTheDocument()
+    expect(screen.getByText(/world/)).toBeInTheDocument()
+  })
+
+  it('renders code blocks', () => {
+    const content = '```javascript\nconst x = 1\n```'
+    render(<MarkdownRenderer content={content} />)
+    const codeElement = screen.getByText(/const x = 1/)
+    expect(codeElement).toBeInTheDocument()
+  })
+
+  it('renders inline code', () => {
+    render(<MarkdownRenderer content="Use `console.log()` to debug" />)
+    expect(screen.getByText('console.log()')).toBeInTheDocument()
+  })
+
+  it('renders lists', () => {
+    const content = '- Item 1\n- Item 2\n- Item 3'
+    render(<MarkdownRenderer content={content} />)
+    expect(screen.getByText('Item 1')).toBeInTheDocument()
+    expect(screen.getByText('Item 2')).toBeInTheDocument()
+    expect(screen.getByText('Item 3')).toBeInTheDocument()
+  })
+
+  it('renders links', () => {
+    const content = '[Click here](https://example.com)'
+    render(<MarkdownRenderer content={content} />)
+    const link = screen.getByRole('link', { name: 'Click here' })
+    expect(link).toHaveAttribute('href', 'https://example.com')
+    expect(link).toHaveAttribute('target', '_blank')
+  })
+
+  it('renders blockquotes', () => {
+    const content = '> This is a quote'
+    render(<MarkdownRenderer content={content} />)
+    expect(screen.getByText(/This is a quote/)).toBeInTheDocument()
+  })
+
+  it('renders tables', () => {
+    const content = `
+| Header 1 | Header 2 |
+|----------|----------|
+| Cell 1   | Cell 2   |
+    `
+    render(<MarkdownRenderer content={content} />)
+    expect(screen.getByText('Header 1')).toBeInTheDocument()
+    expect(screen.getByText('Header 2')).toBeInTheDocument()
+    expect(screen.getByText('Cell 1')).toBeInTheDocument()
+    expect(screen.getByText('Cell 2')).toBeInTheDocument()
+  })
+})

__tests__/components/privacy-page.test.tsx

@@ -1,109 +0,0 @@
-import React from 'react'
-import { render, screen } from '@testing-library/react'
-import { describe, expect, it } from 'vitest'
-
-import { PrivacyPage } from '@/components/privacy-page'
-
-describe('PrivacyPage ShadCN UI Consistency', () => {
-  it('uses standardized heading and body scales with ShadCN primitives', () => {
-    render(<PrivacyPage />)
-
-    // Verify main container uses ShadCN background tokens
-    const mainContainer = document.querySelector('.min-h-screen')
-    expect(mainContainer).toHaveClass('bg-background', 'text-foreground')
-
-    // Verify heading uses consistent font classes and scale
-    const mainHeading = screen.getByText('Privacy Policy')
-    expect(mainHeading).toHaveClass('font-playfair', 'text-5xl', 'lg:text-7xl')
-
-    // Verify body text uses consistent muted foreground token
-    const bodyText = screen.getByText(/We respect your privacy/)
-    expect(bodyText).toHaveClass('text-muted-foreground')
-
-    // Verify no ad-hoc color classes are used
-    const htmlContent = document.documentElement.innerHTML
-    expect(htmlContent).not.toContain('text-white')
-    expect(htmlContent).not.toContain('text-gray-300')
-    expect(htmlContent).not.toContain('bg-white/5')
-    expect(htmlContent).not.toContain('border-white/10')
-
-    // Verify ShadCN design tokens are consistently used
-    expect(htmlContent).toContain('text-muted-foreground')
-    expect(htmlContent).toContain('bg-background')
-    expect(htmlContent).toContain('text-foreground')
-  })
-
-  it('uses ShadCN primitives correctly throughout the page', () => {
-    render(<PrivacyPage />)
-
-    // Verify Alert primitive is present and properly structured
-    const alert = screen.getByRole('alert')
-    expect(alert).toHaveAttribute('data-slot', 'alert')
-
-    // Verify Badge primitive is present
-    const badge = screen.getByText('Last updated: 2025-09-16')
-    expect(badge).toBeInTheDocument()
-
-    // Verify Card primitives are present (multiple cards should exist)
-    const cards = document.querySelectorAll('[data-slot="card"]')
-    expect(cards.length).toBeGreaterThan(0)
-
-    // Verify Card headers and content use proper ShadCN structure
-    const cardHeaders = document.querySelectorAll('[data-slot="card-header"]')
-    expect(cardHeaders.length).toBeGreaterThan(0)
-
-    const cardContents = document.querySelectorAll('[data-slot="card-content"]')
-    expect(cardContents.length).toBeGreaterThan(0)
-
-    // Verify all CardContent uses muted foreground token
-    const cardContentElements = document.querySelectorAll('[data-slot="card-content"]')
-    cardContentElements.forEach(element => {
-      expect(element).toHaveClass('text-muted-foreground')
-    })
-  })
-
-  it('maintains consistent spacing and typography patterns', () => {
-    render(<PrivacyPage />)
-
-    // Verify consistent spacing classes are used
-    const htmlContent = document.documentElement.innerHTML
-    expect(htmlContent).toContain('space-y-3')
-    expect(htmlContent).toContain('gap-6')
-    expect(htmlContent).toContain('px-8')
-    expect(htmlContent).toContain('lg:px-16')
-
-    // Verify consistent text sizing
-    expect(htmlContent).toContain('text-xl')
-    expect(htmlContent).toContain('leading-relaxed')
-
-    // Verify grid layout consistency
-    expect(htmlContent).toContain('grid-cols-1')
-    expect(htmlContent).toContain('lg:grid-cols-2')
-
-    // Verify responsive design patterns
-    expect(htmlContent).toContain('max-w-4xl')
-    expect(htmlContent).toContain('max-w-6xl')
-  })
-
-  it('uses proper icon integration with ShadCN components', () => {
-    render(<PrivacyPage />)
-
-    // Verify icons are properly integrated without ad-hoc color classes
-    const infoIcon = document.querySelector('.lucide-info')
-    expect(infoIcon).toBeInTheDocument()
-
-    // Verify icons use consistent sizing
-    const htmlContent = document.documentElement.innerHTML
-    expect(htmlContent).toContain('w-5 h-5')
-
-    // Verify icons don't have ad-hoc color overrides
-    expect(htmlContent).not.toContain('text-white')
-  })
-
-  it('applies motion classes with reduced-motion safeguard', () => {
-    render(<PrivacyPage />)
-    const html = document.documentElement.innerHTML
-    expect(html).toContain('animate-in')
-    expect(html).toContain('motion-reduce:animate-none')
-  })
-})

__tests__/flags/api-appointments-booking-disabled.test.ts

@@ -1,34 +0,0 @@
-import { describe, expect, it, vi } from 'vitest'
-
-vi.mock('@/lib/flags', () => ({
-  Flags: { BOOKING_ENABLED: false },
-}))
-vi.mock('@/lib/auth', () => ({
-  authOptions: {},
-}))
-vi.mock('next-auth', () => ({
-  getServerSession: vi.fn(),
-}))
-
-describe('Booking appointments mutations with BOOKING_ENABLED=false', () => {
-  it('POST returns 503 without invoking booking logic', async () => {
-    const { POST } = await import('../../app/api/appointments/route')
-    const response = await POST({} as any)
-    expect(response.status).toBe(503)
-    await expect(response.json()).resolves.toEqual({ error: 'Booking disabled' })
-  })
-
-  it('PUT returns 503 without invoking booking logic', async () => {
-    const { PUT } = await import('../../app/api/appointments/route')
-    const response = await PUT({} as any)
-    expect(response.status).toBe(503)
-    await expect(response.json()).resolves.toEqual({ error: 'Booking disabled' })
-  })
-
-  it('DELETE returns 503 without invoking booking logic', async () => {
-    const { DELETE } = await import('../../app/api/appointments/route')
-    const response = await DELETE({} as any)
-    expect(response.status).toBe(503)
-    await expect(response.json()).resolves.toEqual({ error: 'Booking disabled' })
-  })
-})

__tests__/flags/api-uploads-disabled.test.ts

@@ -1,23 +0,0 @@
-import { describe, it, expect, vi } from 'vitest'
-
-vi.mock('@/lib/flags', () => ({
-  Flags: { UPLOADS_ADMIN_ENABLED: false },
-}))
-vi.mock('@/lib/auth', () => ({
-  authOptions: {},
-  requireAuth: vi.fn(),
-}))
-vi.mock('next-auth', () => ({
-  getServerSession: vi.fn(async () => null),
-}))
-
-describe('Uploads admin disabled', () => {
-  it('returns 503 for files bulk-delete when UPLOADS_ADMIN_ENABLED=false', async () => {
-    const { POST } = await import('../../app/api/files/bulk-delete/route')
-    const fakeReq: any = { json: async () => ({ fileIds: ['1'] }) }
-    const res = await POST(fakeReq as any)
-    const body = await res.json()
-    expect(res.status).toBe(503)
-    expect(body).toHaveProperty('error')
-  })
-})

__tests__/flags/artists-section.static.test.tsx

@@ -1,25 +0,0 @@
-import React from 'react'
-import { renderToString } from 'react-dom/server'
-import { describe, expect, it } from 'vitest'
-
-import { ArtistsSection } from '@/components/artists-section'
-import { FeatureFlagsProvider } from '@/components/feature-flags-provider'
-import { FLAG_DEFAULTS } from '@/lib/flags'
-
-const disabledAnimationFlags = {
-  ...FLAG_DEFAULTS,
-  ADVANCED_NAV_SCROLL_ANIMATIONS_ENABLED: false,
-} as typeof FLAG_DEFAULTS
-
-describe('ArtistsSection static fallback when animations disabled', () => {
-  it('renders cards visible without animation classes', () => {
-    const html = renderToString(
-      <FeatureFlagsProvider value={disabledAnimationFlags}>
-        <ArtistsSection />
-      </FeatureFlagsProvider>,
-    )
-
-    expect(html).not.toContain('opacity-0 translate-y-8')
-    expect(html).toContain('opacity-100 translate-y-0')
-  })
-})

__tests__/flags/booking-form.disabled.test.ts

@@ -1,22 +0,0 @@
-import React from "react"
-import { renderToString } from "react-dom/server"
-import { describe, expect, it } from "vitest"
-
-import { BookingForm } from "@/components/booking-form"
-import { FeatureFlagsProvider } from "@/components/feature-flags-provider"
-import { FLAG_DEFAULTS } from "@/lib/flags"
-
-const disabledFlags = { ...FLAG_DEFAULTS, BOOKING_ENABLED: false } as typeof FLAG_DEFAULTS
-
-describe("BookingForm disabled mode (SSR string)", () => {
-  it("includes disabled notice when BOOKING_ENABLED=false", () => {
-    const html = renderToString(
-      <FeatureFlagsProvider value={disabledFlags}>
-        <BookingForm />
-      </FeatureFlagsProvider>,
-    )
-
-    expect(html).toContain("Online booking is temporarily unavailable")
-    expect(html).toContain("contact the studio")
-  })
-})

__tests__/flags/diff-tool.disabled.test.ts

@@ -0,0 +1,164 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
+import { POST } from '@/app/api/chat/route'
+import { NextRequest } from 'next/server'
+import { resetFlagsCache } from '@/lib/flags'
+
+// Mock fetch globally
+global.fetch = vi.fn()
+
+describe('Diff Tool - Disabled Flag', () => {
+  const originalEnv = { ...process.env }
+
+  beforeEach(() => {
+    resetFlagsCache()
+    vi.clearAllMocks()
+
+    // Set up agent but disable diff tool
+    process.env.AGENT_1_URL = 'https://example.com/webhook/test'
+    process.env.IMAGE_UPLOADS_ENABLED = 'true'
+    process.env.DIFF_TOOL_ENABLED = 'false'
+  })
+
+  afterEach(() => {
+    process.env = { ...originalEnv }
+    resetFlagsCache()
+  })
+
+  it('converts diff tool calls to plain markdown when flag is disabled', async () => {
+    const mockResponse = JSON.stringify({
+      type: 'tool_call',
+      name: 'show_diff',
+      args: {
+        oldCode: 'const x = 1;\nconsole.log(x);',
+        newCode: 'const x = 2;\nconsole.log(x);',
+        title: 'Update Variable',
+        language: 'javascript',
+      },
+    })
+
+    ;(global.fetch as any).mockResolvedValueOnce({
+      ok: true,
+      status: 200,
+      text: async () => mockResponse,
+    })
+
+    const request = new NextRequest('http://localhost:3000/api/chat', {
+      method: 'POST',
+      body: JSON.stringify({
+        message: 'Show me the changes',
+        agentId: 'agent-1',
+        sessionId: 'test-session',
+        timestamp: new Date().toISOString(),
+      }),
+    })
+
+    const response = await POST(request)
+    const data = await response.json()
+
+    expect(response.status).toBe(200)
+
+    // Should NOT contain diff-tool markdown
+    expect(data.response).not.toContain('```diff-tool')
+
+    // Should contain plain markdown instead
+    expect(data.response).toContain('### Update Variable')
+    expect(data.response).toContain('**Before:**')
+    expect(data.response).toContain('**After:**')
+    expect(data.response).toContain('```javascript')
+    expect(data.response).toContain('const x = 1')
+    expect(data.response).toContain('const x = 2')
+  })
+
+  it('handles streaming diff tool calls when disabled', async () => {
+    const mockResponse = `{"type":"item","content":"Here are the changes:\\n"}
+{"type":"tool_call","name":"show_diff","args":{"oldCode":"old","newCode":"new","title":"Changes","language":"text"}}`
+
+    ;(global.fetch as any).mockResolvedValueOnce({
+      ok: true,
+      status: 200,
+      text: async () => mockResponse,
+    })
+
+    const request = new NextRequest('http://localhost:3000/api/chat', {
+      method: 'POST',
+      body: JSON.stringify({
+        message: 'Show diff',
+        agentId: 'agent-1',
+        sessionId: 'test-session',
+        timestamp: new Date().toISOString(),
+      }),
+    })
+
+    const response = await POST(request)
+    const data = await response.json()
+
+    expect(response.status).toBe(200)
+    expect(data.response).toContain('Here are the changes:')
+    expect(data.response).not.toContain('```diff-tool')
+    expect(data.response).toContain('**Before:**')
+    expect(data.response).toContain('**After:**')
+  })
+
+  it('uses default title when not provided', async () => {
+    const mockResponse = JSON.stringify({
+      type: 'tool_call',
+      name: 'show_diff',
+      args: {
+        oldCode: 'before',
+        newCode: 'after',
+        // No title provided
+        language: 'text',
+      },
+    })
+
+    ;(global.fetch as any).mockResolvedValueOnce({
+      ok: true,
+      status: 200,
+      text: async () => mockResponse,
+    })
+
+    const request = new NextRequest('http://localhost:3000/api/chat', {
+      method: 'POST',
+      body: JSON.stringify({
+        message: 'Show diff',
+        agentId: 'agent-1',
+        sessionId: 'test-session',
+        timestamp: new Date().toISOString(),
+      }),
+    })
+
+    const response = await POST(request)
+    const data = await response.json()
+
+    expect(response.status).toBe(200)
+    expect(data.response).toContain('### Code Changes')
+  })
+
+  it('handles regular text responses normally', async () => {
+    const mockResponse = JSON.stringify({
+      response: 'This is a normal text response without any diff tool calls.',
+    })
+
+    ;(global.fetch as any).mockResolvedValueOnce({
+      ok: true,
+      status: 200,
+      text: async () => mockResponse,
+    })
+
+    const request = new NextRequest('http://localhost:3000/api/chat', {
+      method: 'POST',
+      body: JSON.stringify({
+        message: 'Hello',
+        agentId: 'agent-1',
+        sessionId: 'test-session',
+        timestamp: new Date().toISOString(),
+      }),
+    })
+
+    const response = await POST(request)
+    const data = await response.json()
+
+    expect(response.status).toBe(200)
+    expect(data.response).toBe('This is a normal text response without any diff tool calls.')
+  })
+})

__tests__/flags/image-uploads.disabled.test.ts

@@ -0,0 +1,104 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
+import { POST } from '@/app/api/chat/route'
+import { NextRequest } from 'next/server'
+import { resetFlagsCache } from '@/lib/flags'
+
+// Mock fetch globally
+global.fetch = vi.fn()
+
+describe('Image Uploads - Disabled Flag', () => {
+  const originalEnv = { ...process.env }
+
+  beforeEach(() => {
+    resetFlagsCache()
+    vi.clearAllMocks()
+
+    // Set up agent but disable image uploads
+    process.env.AGENT_1_URL = 'https://example.com/webhook/test'
+    process.env.IMAGE_UPLOADS_ENABLED = 'false'
+    process.env.DIFF_TOOL_ENABLED = 'true'
+  })
+
+  afterEach(() => {
+    process.env = { ...originalEnv}
+    resetFlagsCache()
+  })
+
+  it('rejects requests with images when flag is disabled', async () => {
+    const request = new NextRequest('http://localhost:3000/api/chat', {
+      method: 'POST',
+      body: JSON.stringify({
+        message: 'Here is an image',
+        agentId: 'agent-1',
+        sessionId: 'test-session',
+        timestamp: new Date().toISOString(),
+        images: ['data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg=='],
+      }),
+    })
+
+    const response = await POST(request)
+    const data = await response.json()
+
+    expect(response.status).toBe(403)
+    expect(data.error).toBe('Image uploads are currently disabled')
+    expect(data.hint).toContain('IMAGE_UPLOADS_ENABLED')
+
+    // Ensure webhook was never called
+    expect(global.fetch).not.toHaveBeenCalled()
+  })
+
+  it('accepts requests without images when flag is disabled', async () => {
+    const mockResponse = JSON.stringify({ response: 'Text only response' })
+
+    ;(global.fetch as any).mockResolvedValueOnce({
+      ok: true,
+      status: 200,
+      text: async () => mockResponse,
+    })
+
+    const request = new NextRequest('http://localhost:3000/api/chat', {
+      method: 'POST',
+      body: JSON.stringify({
+        message: 'Just text',
+        agentId: 'agent-1',
+        sessionId: 'test-session',
+        timestamp: new Date().toISOString(),
+        // No images field
+      }),
+    })
+
+    const response = await POST(request)
+    const data = await response.json()
+
+    expect(response.status).toBe(200)
+    expect(data.response).toBe('Text only response')
+    expect(global.fetch).toHaveBeenCalled()
+  })
+
+  it('allows empty images array when flag is disabled', async () => {
+    const mockResponse = JSON.stringify({ response: 'Success' })
+
+    ;(global.fetch as any).mockResolvedValueOnce({
+      ok: true,
+      status: 200,
+      text: async () => mockResponse,
+    })
+
+    const request = new NextRequest('http://localhost:3000/api/chat', {
+      method: 'POST',
+      body: JSON.stringify({
+        message: 'Text message',
+        agentId: 'agent-1',
+        sessionId: 'test-session',
+        timestamp: new Date().toISOString(),
+        images: [], // Empty array is allowed
+      }),
+    })
+
+    const response = await POST(request)
+    const data = await response.json()
+
+    expect(response.status).toBe(200)
+    expect(data.response).toBe('Success')
+  })
+})

__tests__/hooks/use-parallax.test.tsx

@@ -1,199 +0,0 @@
-import React from 'react'
-import { render, act } from '@testing-library/react'
-import { describe, expect, it, vi, beforeEach } from 'vitest'
-import { useParallax, useReducedMotion } from '@/hooks/use-parallax'
-
-// Mock window methods
-Object.defineProperty(window, 'matchMedia', {
-  writable: true,
-  value: vi.fn().mockImplementation(query => ({
-    matches: false,
-    media: query,
-    onchange: null,
-    addListener: vi.fn(),
-    removeListener: vi.fn(),
-    addEventListener: vi.fn(),
-    removeEventListener: vi.fn(),
-    dispatchEvent: vi.fn(),
-  })),
-})
-
-// Mock window properties
-Object.defineProperty(window, 'pageYOffset', {
-  writable: true,
-  value: 0,
-})
-
-Object.defineProperty(window, 'innerHeight', {
-  writable: true,
-  value: 800,
-})
-
-// Mock requestAnimationFrame
-global.requestAnimationFrame = vi.fn(callback => setTimeout(callback, 0))
-global.cancelAnimationFrame = vi.fn(id => clearTimeout(id))
-
-// Mock IntersectionObserver
-global.IntersectionObserver = vi.fn(() => ({
-  observe: vi.fn(),
-  unobserve: vi.fn(),
-  disconnect: vi.fn(),
-}))
-
-// Mock getBoundingClientRect
-Element.prototype.getBoundingClientRect = vi.fn(() => ({
-  top: 0,
-  bottom: 100,
-  left: 0,
-  right: 100,
-  width: 100,
-  height: 100,
-  x: 0,
-  y: 0,
-  toJSON: () => {},
-}))
-
-// Test component that uses the parallax hook
-const TestComponent = ({ depth = 0.1, disabled = false }: { depth?: number; disabled?: boolean }) => {
-  const parallax = useParallax({ depth, disabled })
-  
-  return (
-    <div 
-      ref={parallax.ref} 
-      style={parallax.style}
-      data-testid="parallax-element"
-    >
-      Test Element
-    </div>
-  )
-}
-
-describe('useParallax Hook', () => {
-  beforeEach(() => {
-    // Reset mocks
-    vi.clearAllMocks()
-    
-    // Reset window properties
-    Object.defineProperty(window, 'pageYOffset', {
-      writable: true,
-      value: 0,
-    })
-    
-    // Reset mock implementations
-    Element.prototype.getBoundingClientRect = vi.fn(() => ({
-      top: 0,
-      bottom: 100,
-      left: 0,
-      right: 100,
-      width: 100,
-      height: 100,
-      x: 0,
-      y: 0,
-      toJSON: () => {},
-    }))
-  })
-
-  it('initializes CSS transform to 0 at mount', () => {
-    render(<TestComponent />)
-    
-    const element = document.querySelector('[data-testid="parallax-element"]')
-    expect(element).toBeInTheDocument()
-    
-    // Initially should have 0px transform via CSS variable
-    expect(element).toHaveStyle({ transform: 'translateY(var(--parallax-offset, 0px))' })
-  })
-
-  it('does not apply translation until scroll occurs', () => {
-    render(<TestComponent depth={0.1} />)
-    
-    const element = document.querySelector('[data-testid="parallax-element"]')
-    expect(element).toBeInTheDocument()
-    
-    // Initially should have 0px transform via CSS variable
-    expect(element).toHaveStyle({ transform: 'translateY(var(--parallax-offset, 0px))' })
-    
-    // Simulate scroll
-    act(() => {
-      Object.defineProperty(window, 'pageYOffset', {
-        writable: true,
-        value: 100,
-      })
-      window.dispatchEvent(new Event('scroll'))
-    })
-    
-    // After scroll, transform should still use CSS variable
-    expect(element).toHaveStyle({ transform: 'translateY(var(--parallax-offset, 0px))' })
-  })
-
-  it('respects disabled prop and does not apply transforms', () => {
-    render(<TestComponent depth={0.1} disabled={true} />)
-    
-    const element = document.querySelector('[data-testid="parallax-element"]')
-    expect(element).toBeInTheDocument()
-    
-    // With disabled=true, should have no transform styles
-    expect(element).not.toHaveStyle({ transform: 'translateY(var(--parallax-offset, 0px))' })
-    expect(element).not.toHaveStyle({ willChange: 'transform' })
-  })
-})
-
-describe('useReducedMotion Hook', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  it('initializes with correct boolean value from prefersReducedMotion()', () => {
-    // Mock matchMedia to return true for reduced motion
-    Object.defineProperty(window, 'matchMedia', {
-      writable: true,
-      value: vi.fn().mockImplementation(query => ({
-        matches: query === '(prefers-reduced-motion: reduce)',
-        media: query,
-        onchange: null,
-        addListener: vi.fn(),
-        removeListener: vi.fn(),
-        addEventListener: vi.fn(),
-        removeEventListener: vi.fn(),
-        dispatchEvent: vi.fn(),
-      })),
-    })
-
-    let reducedMotionValue: boolean
-    const TestReducedMotionComponent = () => {
-      reducedMotionValue = useReducedMotion()
-      return <div>Test</div>
-    }
-
-    render(<TestReducedMotionComponent />)
-    
-    // Should be a boolean value, not a function reference
-    expect(typeof reducedMotionValue).toBe('boolean')
-    expect(reducedMotionValue).toBe(true)
-  })
-
-  it('disables parallax transforms when reduced motion is preferred', () => {
-    // Mock matchMedia to return true for reduced motion
-    Object.defineProperty(window, 'matchMedia', {
-      writable: true,
-      value: vi.fn().mockImplementation(query => ({
-        matches: query === '(prefers-reduced-motion: reduce)',
-        media: query,
-        onchange: null,
-        addListener: vi.fn(),
-        removeListener: vi.fn(),
-        addEventListener: vi.fn(),
-        removeEventListener: vi.fn(),
-        dispatchEvent: vi.fn(),
-      })),
-    })
-
-    render(<TestComponent depth={0.1} />)
-    
-    const element = document.querySelector('[data-testid="parallax-element"]')
-    expect(element).toBeInTheDocument()
-    
-    // With reduced motion, should have no transform styles
-    expect(element).not.toHaveStyle({ transform: 'translateY(var(--parallax-offset, 0px))' })
-    expect(element).not.toHaveStyle({ willChange: 'transform' })
-  })
-})

__tests__/lib/data-migration.test.ts

@@ -1,144 +0,0 @@
-import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest'
-
-// Mock the database using proper Vitest patterns
-const mockStmt = {
-  bind: vi.fn().mockReturnThis(),
-  run: vi.fn().mockResolvedValue({ success: true, changes: 1 }),
-  get: vi.fn(),
-  all: vi.fn().mockResolvedValue({ results: [] }),
-  first: vi.fn().mockResolvedValue(null),
-}
-
-const mockDB = {
-  prepare: vi.fn().mockReturnValue(mockStmt),
-  exec: vi.fn(),
-}
-
-// Mock the entire lib/db module
-vi.mock('@/lib/db', () => ({
-  getDB: vi.fn(() => mockDB),
-}))
-
-// Mock the artists data with proper structure
-vi.mock('@/data/artists', () => ({
-  artists: [
-    {
-      id: '1',
-      name: 'Test Artist',
-      bio: 'Test bio',
-      styles: ['Traditional', 'Realism'],
-      instagram: 'https://instagram.com/testartist',
-      experience: '5 years',
-      workImages: ['/test-image.jpg'],
-      faceImage: '/test-face.jpg',
-    },
-    {
-      id: '2',
-      name: 'Another Artist',
-      bio: 'Another bio',
-      styles: ['Japanese', 'Blackwork'],
-      instagram: 'https://instagram.com/anotherartist',
-      experience: '8 years',
-      workImages: [],
-      faceImage: '/another-face.jpg',
-    },
-  ],
-}))
-
-describe('DataMigrator', () => {
-  let DataMigrator: any
-  let migrator: any
-
-  beforeEach(async () => {
-    vi.clearAllMocks()
-    // Reset mock implementations
-    mockDB.prepare.mockReturnValue(mockStmt)
-    mockStmt.first.mockResolvedValue(null)
-    mockStmt.run.mockResolvedValue({ success: true, changes: 1 })
-    
-    // Import the DataMigrator class after mocks are set up
-    const module = await import('@/lib/data-migration')
-    DataMigrator = module.DataMigrator
-    migrator = new DataMigrator()
-  })
-
-  afterEach(() => {
-    vi.resetAllMocks()
-  })
-
-  describe('isMigrationCompleted', () => {
-    it('should return false when no artists exist', async () => {
-      mockStmt.first.mockResolvedValueOnce({ count: 0 })
-
-      const isCompleted = await migrator.isMigrationCompleted()
-
-      expect(isCompleted).toBe(false)
-    })
-
-    it('should return true when artists exist', async () => {
-      mockStmt.first.mockResolvedValueOnce({ count: 2 })
-
-      const isCompleted = await migrator.isMigrationCompleted()
-
-      expect(isCompleted).toBe(true)
-    })
-  })
-
-  describe('migrateArtistData', () => {
-    it('should migrate all artists successfully', async () => {
-      await migrator.migrateArtistData()
-
-      // Verify user creation calls
-      expect(mockDB.prepare).toHaveBeenCalledWith(
-        expect.stringContaining('INSERT OR IGNORE INTO users')
-      )
-
-      // Verify artist creation calls
-      expect(mockDB.prepare).toHaveBeenCalledWith(
-        expect.stringContaining('INSERT OR IGNORE INTO artists')
-      )
-
-      // Verify portfolio image creation calls
-      expect(mockDB.prepare).toHaveBeenCalledWith(
-        expect.stringContaining('INSERT OR IGNORE INTO portfolio_images')
-      )
-    })
-
-    it('should handle errors gracefully', async () => {
-      mockStmt.run.mockRejectedValueOnce(new Error('Database error'))
-
-      await expect(migrator.migrateArtistData()).rejects.toThrow('Database error')
-    })
-  })
-
-  describe('clearMigratedData', () => {
-    it('should clear all data successfully', async () => {
-      await migrator.clearMigratedData()
-
-      expect(mockDB.prepare).toHaveBeenCalledWith('DELETE FROM portfolio_images')
-      expect(mockDB.prepare).toHaveBeenCalledWith('DELETE FROM artists')
-      expect(mockDB.prepare).toHaveBeenCalledWith('DELETE FROM users WHERE role = "ARTIST"')
-    })
-
-    it('should handle clear data errors', async () => {
-      mockStmt.run.mockRejectedValueOnce(new Error('Clear error'))
-
-      await expect(migrator.clearMigratedData()).rejects.toThrow('Clear error')
-    })
-  })
-
-  describe('getMigrationStats', () => {
-    it('should return correct migration statistics', async () => {
-      mockStmt.first
-        .mockResolvedValueOnce({ count: 3 }) // total users
-        .mockResolvedValueOnce({ count: 2 }) // total artists
-        .mockResolvedValueOnce({ count: 1 }) // total portfolio images
-
-      const stats = await migrator.getMigrationStats()
-
-      expect(stats.totalUsers).toBe(3)
-      expect(stats.totalArtists).toBe(2)
-      expect(stats.totalPortfolioImages).toBe(1)
-    })
-  })
-})

__tests__/lib/db.test.ts

@@ -1,269 +0,0 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-import {
-  getArtists,
-  getArtistWithPortfolio,
-  getPublicArtists,
-  getArtistBySlug,
-  updateArtist,
-  addPortfolioImage,
-  updatePortfolioImage,
-  deletePortfolioImage,
-} from '@/lib/db'
-
-// Mock D1 database
-const createMockD1 = () => ({
-  prepare: vi.fn().mockReturnThis(),
-  bind: vi.fn().mockReturnThis(),
-  first: vi.fn(),
-  all: vi.fn(),
-  run: vi.fn(),
-})
-
-describe('Database Functions', () => {
-  let mockEnv: { DB: ReturnType<typeof createMockD1> }
-
-  beforeEach(() => {
-    mockEnv = {
-      DB: createMockD1(),
-    }
-    vi.clearAllMocks()
-  })
-
-  describe('getArtists', () => {
-    it('should fetch all artists and parse JSON fields', async () => {
-      const mockArtists = [
-        {
-          id: '1',
-          name: 'Test Artist',
-          bio: 'Test bio',
-          specialties: '["Traditional","Realism"]',
-          isActive: 1,
-        },
-      ]
-
-      mockEnv.DB.all.mockResolvedValue({
-        results: mockArtists,
-        success: true,
-      })
-
-      const result = await getArtists(mockEnv)
-
-      expect(result).toHaveLength(1)
-      expect(result[0].specialties).toEqual(['Traditional', 'Realism'])
-      expect(result[0].isActive).toBe(true)
-    })
-
-    it('should handle empty results', async () => {
-      mockEnv.DB.all.mockResolvedValue({
-        results: [],
-        success: true,
-      })
-
-      const result = await getArtists(mockEnv)
-      expect(result).toEqual([])
-    })
-
-    it('should handle database errors', async () => {
-      mockEnv.DB.all.mockRejectedValue(new Error('Database error'))
-
-      await expect(getArtists(mockEnv)).rejects.toThrow('Database error')
-    })
-  })
-
-  describe('getArtistWithPortfolio', () => {
-    it('should fetch artist with portfolio images', async () => {
-      const mockArtist = {
-        id: '1',
-        name: 'Test Artist',
-        bio: 'Test bio',
-        specialties: '["Traditional"]',
-        isActive: 1,
-      }
-
-      const mockImages = [
-        {
-          id: '1',
-          artistId: '1',
-          url: 'https://example.com/image.jpg',
-          caption: 'Test image',
-          tags: '["Traditional","Portrait"]',
-          isPublic: 1,
-          orderIndex: 0,
-        },
-      ]
-
-      mockEnv.DB.first.mockResolvedValueOnce(mockArtist)
-      mockEnv.DB.all.mockResolvedValueOnce({
-        results: mockImages,
-        success: true,
-      })
-
-      const result = await getArtistWithPortfolio('1', mockEnv)
-
-      expect(result).toBeDefined()
-      expect(result?.name).toBe('Test Artist')
-      expect(result?.portfolioImages).toHaveLength(1)
-      expect(result?.portfolioImages[0].tags).toEqual(['Traditional', 'Portrait'])
-    })
-
-    it('should return null for non-existent artist', async () => {
-      mockEnv.DB.first.mockResolvedValue(null)
-
-      const result = await getArtistWithPortfolio('999', mockEnv)
-      expect(result).toBeNull()
-    })
-  })
-
-  describe('getPublicArtists', () => {
-    it('should return only active artists with public images', async () => {
-      const mockArtists = [
-        {
-          id: '1',
-          name: 'Active Artist',
-          specialties: '["Traditional"]',
-          isActive: 1,
-        },
-        {
-          id: '2',
-          name: 'Inactive Artist',
-          specialties: '["Realism"]',
-          isActive: 0,
-        },
-      ]
-
-      mockEnv.DB.all.mockResolvedValue({
-        results: mockArtists.filter(a => a.isActive),
-        success: true,
-      })
-
-      const result = await getPublicArtists({}, mockEnv)
-
-      expect(result).toHaveLength(1)
-      expect(result[0].name).toBe('Active Artist')
-    })
-
-    it('should filter by specialty', async () => {
-      const mockArtists = [
-        {
-          id: '1',
-          name: 'Traditional Artist',
-          specialties: '["Traditional"]',
-          isActive: 1,
-        },
-      ]
-
-      mockEnv.DB.all.mockResolvedValue({
-        results: mockArtists,
-        success: true,
-      })
-
-      await getPublicArtists({ specialty: 'Traditional' }, mockEnv)
-
-      // Verify the bind was called (specialty filter applied)
-      expect(mockEnv.DB.bind).toHaveBeenCalled()
-    })
-  })
-
-  describe('getArtistBySlug', () => {
-    it('should fetch artist by slug', async () => {
-      const mockArtist = {
-        id: '1',
-        slug: 'test-artist',
-        name: 'Test Artist',
-        specialties: '["Traditional"]',
-      }
-
-      mockEnv.DB.first.mockResolvedValue(mockArtist)
-      mockEnv.DB.all.mockResolvedValue({
-        results: [],
-        success: true,
-      })
-
-      const result = await getArtistBySlug('test-artist', mockEnv)
-
-      expect(result).toBeDefined()
-      expect(result?.slug).toBe('test-artist')
-      expect(mockEnv.DB.bind).toHaveBeenCalledWith('test-artist')
-    })
-  })
-
-  describe('updateArtist', () => {
-    it('should update artist and stringify JSON fields', async () => {
-      const updateData = {
-        id: '1',
-        name: 'Updated Name',
-        bio: 'Updated bio',
-        specialties: ['Traditional', 'Realism'],
-        hourlyRate: 150,
-      }
-
-      mockEnv.DB.run.mockResolvedValue({
-        success: true,
-        meta: { changes: 1 },
-      })
-
-      await updateArtist('1', updateData, mockEnv)
-
-      // Verify the update was called
-      expect(mockEnv.DB.run).toHaveBeenCalled()
-      expect(mockEnv.DB.bind).toHaveBeenCalled()
-    })
-  })
-
-  describe('Portfolio Image Operations', () => {
-    it('should add portfolio image', async () => {
-      const imageData = {
-        url: 'https://example.com/image.jpg',
-        caption: 'Test caption',
-        tags: ['Traditional'],
-        isPublic: true,
-        orderIndex: 0,
-      }
-
-      mockEnv.DB.run.mockResolvedValue({
-        success: true,
-        meta: { last_row_id: 1 },
-      })
-
-      mockEnv.DB.first.mockResolvedValue({
-        id: '1',
-        ...imageData,
-        artistId: '1',
-        tags: JSON.stringify(imageData.tags),
-      })
-
-      const result = await addPortfolioImage('1', imageData, mockEnv)
-
-      expect(result).toBeDefined()
-      expect(result.caption).toBe('Test caption')
-    })
-
-    it('should update portfolio image', async () => {
-      const updateData = {
-        caption: 'Updated caption',
-        tags: ['Traditional', 'Portrait'],
-        isPublic: false,
-      }
-
-      mockEnv.DB.run.mockResolvedValue({
-        success: true,
-        meta: { changes: 1 },
-      })
-
-      await updatePortfolioImage('1', updateData, mockEnv)
-
-      expect(mockEnv.DB.run).toHaveBeenCalled()
-    })
-
-    it('should delete portfolio image', async () => {
-      mockEnv.DB.run.mockResolvedValue({
-        success: true,
-        meta: { changes: 1 },
-      })
-
-      await deletePortfolioImage('1', mockEnv)
-
-      expect(mockEnv.DB.run).toHaveBeenCalled()
-    })
-  })
-})

__tests__/lib/flags.test.ts

@@ -22,7 +22,7 @@ beforeEach(() => {
     }
     delete process.env[key]
   }
-  delete (globalThis as Record<string, unknown>).__UNITED_TATTOO_RUNTIME_FLAGS__
+  delete (globalThis as Record<string, unknown>).__MULTI_AGENT_CHAT_FLAGS__
 })
 
 afterEach(() => {
@@ -35,7 +35,7 @@ afterEach(() => {
       process.env[key] = value
     }
   }
-  delete (globalThis as Record<string, unknown>).__UNITED_TATTOO_RUNTIME_FLAGS__
+  delete (globalThis as Record<string, unknown>).__MULTI_AGENT_CHAT_FLAGS__
 })
 
 describe("parseBool", () => {
@@ -43,50 +43,92 @@ describe("parseBool", () => {
     expect(parseBool("true", false)).toBe(true)
     expect(parseBool(" FALSE ", true)).toBe(false)
     expect(parseBool("1", false)).toBe(true)
+    expect(parseBool("0", true)).toBe(false)
     expect(parseBool(undefined, true)).toBe(true)
+    expect(parseBool(undefined, false)).toBe(false)
+  })
+
+  it("handles yes/no values", () => {
+    expect(parseBool("yes", false)).toBe(true)
+    expect(parseBool("YES", false)).toBe(true)
+    expect(parseBool("no", true)).toBe(false)
+    expect(parseBool("NO", true)).toBe(false)
+  })
+
+  it("uses default for invalid values", () => {
+    expect(parseBool("invalid", true)).toBe(true)
+    expect(parseBool("maybe", false)).toBe(false)
   })
 })
 
 describe("getFlags", () => {
-  it("falls back to defaults and logs missing keys", () => {
+  it("returns default values when no environment variables are set", () => {
-    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {})
-
     const snapshot = getFlags({ refresh: true })
 
     expect(snapshot).toMatchObject(FLAG_DEFAULTS)
-    expect(warnSpy).toHaveBeenCalled()
+    expect(snapshot.IMAGE_UPLOADS_ENABLED).toBe(true)
-
+    expect(snapshot.DIFF_TOOL_ENABLED).toBe(true)
-    warnSpy.mockRestore()
   })
 
   it("honours environment overrides", () => {
-    process.env.BOOKING_ENABLED = "false"
+    process.env.IMAGE_UPLOADS_ENABLED = "false"
-    process.env.PUBLIC_APPOINTMENT_REQUESTS_ENABLED = "true"
+    process.env.DIFF_TOOL_ENABLED = "true"
 
     const snapshot = getFlags({ refresh: true })
 
-    expect(snapshot.BOOKING_ENABLED).toBe(false)
+    expect(snapshot.IMAGE_UPLOADS_ENABLED).toBe(false)
-    expect(snapshot.PUBLIC_APPOINTMENT_REQUESTS_ENABLED).toBe(true)
+    expect(snapshot.DIFF_TOOL_ENABLED).toBe(true)
+  })
+
+  it("caches flags by default", () => {
+    const snapshot1 = getFlags()
+    process.env.IMAGE_UPLOADS_ENABLED = "false"
+
+    const snapshot2 = getFlags()
+    expect(snapshot2.IMAGE_UPLOADS_ENABLED).toBe(true) // Still cached
+  })
+
+  it("refreshes cache when requested", () => {
+    const snapshot1 = getFlags()
+    process.env.IMAGE_UPLOADS_ENABLED = "false"
+
+    const snapshot2 = getFlags({ refresh: true })
+    expect(snapshot2.IMAGE_UPLOADS_ENABLED).toBe(false) // Refreshed
   })
 })
 
 describe("registerRuntimeFlags", () => {
   it("allows runtime overrides to take precedence", () => {
-    process.env.BOOKING_ENABLED = "true"
+    process.env.IMAGE_UPLOADS_ENABLED = "true"
-    const override = { ...FLAG_DEFAULTS, BOOKING_ENABLED: false } as typeof FLAG_DEFAULTS
+    const override = { IMAGE_UPLOADS_ENABLED: false }
 
     registerRuntimeFlags(override)
     const snapshot = getFlags()
 
-    expect(snapshot.BOOKING_ENABLED).toBe(false)
+    expect(snapshot.IMAGE_UPLOADS_ENABLED).toBe(false)
+  })
+
+  it("supports partial overrides", () => {
+    registerRuntimeFlags({ DIFF_TOOL_ENABLED: false })
+    const snapshot = getFlags()
+
+    expect(snapshot.IMAGE_UPLOADS_ENABLED).toBe(true) // Default
+    expect(snapshot.DIFF_TOOL_ENABLED).toBe(false) // Overridden
   })
 })
 
 describe("Flags proxy", () => {
   it("reflects current snapshot values", () => {
-    process.env.ADMIN_ENABLED = "false"
+    process.env.IMAGE_UPLOADS_ENABLED = "false"
     const snapshot = getFlags({ refresh: true })
-    expect(snapshot.ADMIN_ENABLED).toBe(false)
+
-    expect(Flags.ADMIN_ENABLED).toBe(false)
+    expect(snapshot.IMAGE_UPLOADS_ENABLED).toBe(false)
+    expect(Flags.IMAGE_UPLOADS_ENABLED).toBe(false)
+  })
+
+  it("reflects runtime overrides", () => {
+    registerRuntimeFlags({ DIFF_TOOL_ENABLED: false })
+
+    expect(Flags.DIFF_TOOL_ENABLED).toBe(false)
   })
 })

__tests__/lib/validations.test.ts

@@ -1,92 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { createArtistSchema, createAppointmentSchema } from '@/lib/validations'
-
-describe('Validation Schemas', () => {
-  describe('createArtistSchema', () => {
-    it('should validate a valid artist object', () => {
-      const validArtist = {
-        name: 'John Doe',
-        bio: 'Experienced tattoo artist',
-        specialties: ['Traditional', 'Realism'],
-        instagramHandle: 'johndoe',
-        hourlyRate: 150,
-        isActive: true,
-      }
-
-      const result = createArtistSchema.safeParse(validArtist)
-      expect(result.success).toBe(true)
-    })
-
-    it('should reject artist with invalid data', () => {
-      const invalidArtist = {
-        name: '', // Empty name should fail
-        bio: 'Bio',
-        specialties: [],
-        hourlyRate: -50, // Negative rate should fail
-      }
-
-      const result = createArtistSchema.safeParse(invalidArtist)
-      expect(result.success).toBe(false)
-    })
-
-    it('should require name field', () => {
-      const artistWithoutName = {
-        bio: 'Bio',
-        specialties: ['Traditional'],
-        hourlyRate: 150,
-      }
-
-      const result = createArtistSchema.safeParse(artistWithoutName)
-      expect(result.success).toBe(false)
-    })
-  })
-
-  describe('createAppointmentSchema', () => {
-    it('should validate a valid appointment object', () => {
-      const validAppointment = {
-        clientName: 'Jane Smith',
-        clientEmail: 'jane@example.com',
-        clientPhone: '+1234567890',
-        artistId: 'artist-123',
-        startTime: new Date('2024-12-01T10:00:00Z'),
-        endTime: new Date('2024-12-01T12:00:00Z'),
-        description: 'Traditional rose tattoo',
-        estimatedPrice: 300,
-        status: 'PENDING' as const,
-      }
-
-      const result = createAppointmentSchema.safeParse(validAppointment)
-      expect(result.success).toBe(true)
-    })
-
-    it('should reject appointment with invalid email', () => {
-      const invalidAppointment = {
-        clientName: 'Jane Smith',
-        clientEmail: 'invalid-email', // Invalid email format
-        artistId: 'artist-123',
-        startTime: new Date('2024-12-01T10:00:00Z'),
-        endTime: new Date('2024-12-01T12:00:00Z'),
-        description: 'Tattoo description',
-        status: 'PENDING' as const,
-      }
-
-      const result = createAppointmentSchema.safeParse(invalidAppointment)
-      expect(result.success).toBe(false)
-    })
-
-    it('should reject appointment with end time before start time', () => {
-      const invalidAppointment = {
-        clientName: 'Jane Smith',
-        clientEmail: 'jane@example.com',
-        artistId: 'artist-123',
-        startTime: new Date('2024-12-01T12:00:00Z'),
-        endTime: new Date('2024-12-01T10:00:00Z'), // End before start
-        description: 'Tattoo description',
-        status: 'PENDING' as const,
-      }
-
-      const result = createAppointmentSchema.safeParse(invalidAppointment)
-      expect(result.success).toBe(false)
-    })
-  })
-})

docs/BUILD.md

@@ -132,3 +132,4 @@ This project uses **pnpm** (not npm). Always use `pnpm` commands:
 - **Styling:** Tailwind CSS 4.1.9
 - **Package Manager:** pnpm
 
+

docs/bootstrapping.md

@@ -1,46 +0,0 @@
-# Bootstrapping Checklist
-
-This checklist walks you from cloning the template to having a runnable project with confident defaults. Keep it open while you initialise a new repo.
-
-## 1. Template hygiene
-- [ ] Create a fresh repository (local or Gitea) and copy the template into it.
-- [ ] Run `./scripts/bootstrap-template.sh` to update the package name, git remotes, and README badges.
-- [ ] Remove example images or assets you do not plan to ship (`public/`, `docs/img/`, etc.).
-- [ ] Delete unused test suites so the CI noise floor stays low.
-
-## 2. Runtime setup
-- [ ] Review `.env.example` and duplicate it to `.env` for local development.
-- [ ] Fill only the sections that match the integrations you intend to use (auth, storage, calendar, analytics).
-- [ ] Create secrets in your chosen manager (doppler, sops, 1Password CLI, environment repository) and document where they live.
-- [ ] Configure feature flags or toggles that gate optional modules; default to safe fallbacks.
-
-## 3. Dependencies & tooling
-- [ ] Decide on a package manager (pnpm, npm, yarn) and lock it in the README + CI.
-- [ ] Install linting and formatting tools (`eslint`, `prettier`, `biome`, etc.) and wire them into `package.json` scripts.
-- [ ] Add base Git hooks (Husky, Lefthook, or pre-commit) if you rely on pre-push validation.
-- [ ] Configure TypeScript paths/aliases so the example tests resolve once you create real modules.
-
-## 4. Infrastructure & services
-- [ ] Document deployment tooling (Wrangler, Vercel, Fly.io, Docker) in `docs/stack-decisions.md`.
-- [ ] Provision staging and production environments or capture the manual steps.
-- [ ] Outline database migration flow (Prisma, Drizzle, Kysely) and how to run it locally.
-- [ ] For third-party integrations (OAuth, storage, calendar), confirm rate limits and timeout behaviour.
-
-## 5. CI/CD wiring
-- [ ] Choose a pipeline runner (Gitea Actions, Woodpecker, GitHub Actions, etc.).
-- [ ] Add jobs for lint, typecheck, unit tests, and build (if applicable).
-- [ ] Cache dependencies to keep pipelines fast.
-- [ ] Gate deployments on green checks and review status.
-
-## 6. Documentation & knowledge
-- [ ] Update `README.md` with product-specific copy, screenshots, and deployment commands.
-- [ ] Record architectural decisions in `docs/stack-decisions.md` (lean ADRs are ideal).
-- [ ] Extend `docs/edge-cases.md` with anything unique to this project.
-- [ ] Share workflow instructions (branching, PR labels, release cadence) in `CONTRIBUTING.md`.
-
-## 7. Launch readiness
-- [ ] Smoke-test the bootstrap by running `pnpm test` (or your equivalent) and ensuring the example specs fail because modules are missing—this keeps you honest.
-- [ ] Create a tracking issue or project board with tasks generated from the checklist.
-- [ ] Archive or export the checklist with completed items for future reference.
-
-Repeat this ritual for every new project so you ship with fewer unknowns and more confidence.

docs/edge-cases.md

@@ -1,50 +0,0 @@
-# Edge Case Catalogue
-
-Capture every non-happy-path scenario that has bitten you in past projects. Use these prompts when planning features, writing tests, and updating documentation.
-
-## Authentication & Authorization
-- What happens when the identity provider is unavailable or rate-limited?
-- Can users authenticate with multiple providers? How do you reconcile identities?
-- Do access tokens expire mid-session? Plan silent refresh and forced logout flows.
-- Are admin-only routes guarded on the server, not just the client?
-- How do you roll keys or secrets without booting everyone?
-
-## Feature Flags & Configuration
-- Can new features be disabled quickly without redeploying?
-- Are default values safe when the config service is unreachable?
-- What is logged when a flag evaluation fails?
-
-## Data & Persistence
-- Are migrations idempotent? Can you roll them back?
-- Do background jobs tolerate partial failure or duplicate delivery?
-- What size assumptions exist for JSON payloads, binary blobs, or text fields?
-- How do you seed development data without leaking production secrets?
-
-## Scheduling & Calendars
-- Do you store timestamps in UTC and render them with the user's offset?
-- How do you handle daylight saving transitions and leap seconds?
-- Can overlapping events be created? If not, validate and surface clear errors.
-- What is the source of truth when multiple calendars sync into one timeline?
-
-## File & Asset Management
-- Maximum file size? Enforce both client and server-side.
-- Are uploads scanned, transcoded, or resized? Where is the queue?
-- How do you serve private files? Signed URLs, download proxies, expiring tokens?
-- What is the retention policy and deletion workflow?
-
-## External Services
-- Plan for timeouts, retries, and rate limits on each integration.
-- If a vendor returns partial data, does your UI still render something helpful?
-- Document SLAs and fallbacks in `docs/stack-decisions.md`.
-
-## Observability & Recovery
-- Which metrics, logs, and traces are mandatory before launch?
-- Do alerts route to a real person with enough context to act?
-- After an incident, what automated reports or scripts help recreate the scenario?
-
-## Compliance & Privacy
-- How do you handle data export, erasure, and consent?
-- What environments carry production data? Are they encrypted at rest?
-- Which audit logs must be preserved, and where?
-
-When a new surprise occurs, write the story here, then open a PR to harden the template so the next project benefits immediately.

docs/stack-decisions.md

@@ -1,32 +0,0 @@
-# Stack Decisions Log
-
-Use this document to capture the "why" behind platform and tooling choices. Treat each entry as a lightweight ADR (Architecture Decision Record).
-
-## Template baseline
-- **Framework**: Next.js + TypeScript (edge-friendly, hybrid rendering, great DX)
-- **Testing**: Vitest (fast unit/integration runner with React ecosystem support)
-- **Styling**: Tailwind CSS or CSS Modules (choose one per project)
-- **Deployment**: Cloudflare Pages + Workers (immutable deploys, global edge)
-- **Database**: PostgreSQL (Supabase/Neon friendly), accessed via ORM of choice
-- **Storage**: S3-compatible buckets (AWS S3, Cloudflare R2)
-
-## Recording a decision
-1. Title — short phrase (`Adopt Drizzle ORM`, `Switch CI to Woodpecker`)
-2. Context — what problem are you solving? Mention constraints, stakeholders, and trade-offs.
-3. Decision — what did you pick and why?
-4. Status — proposed, accepted, deprecated, superseded.
-5. Consequences — positive and negative effects, migrations required, follow-up work.
-
-## Example entry
-```
-## Adopt Drizzle ORM
-Status: Accepted (2024-02-12)
-Context: Need a type-safe query builder that works in serverless environments without generating heavyweight clients.
-Decision: Replace Prisma with Drizzle ORM because it offers SQL-first migrations, small runtime footprint, and better edge compatibility.
-Consequences:
-- Rewrite existing Prisma migrations → Drizzle SQL migrations.
-- Update CI to run `drizzle-kit push` instead of `prisma migrate deploy`.
-- Developers need to learn the new query builder API.
-```
-
-Keep this log close to the code. When you revisit a project months later, these notes will save hours of rediscovery.

docs/testing-blueprints.md

@@ -1,41 +0,0 @@
-# Testing Blueprints
-
-The template ships with full Vitest suites under `__tests__/`. They currently reference the `@/` module alias from a Next.js project. Replace those imports with your actual modules as you build the app. Use this guide to adapt the patterns.
-
-## API routes
-- File: `__tests__/api/*`
-- Focus: HTTP status codes, query parsing, pagination, error handling.
-- Mocks: database adapters, third-party SDKs, feature flags.
-- Tips: assert on both response body and the parameters passed into mocked dependencies.
-
-## Components
-- File: `__tests__/components/*`
-- Focus: accessibility, copy, conditional rendering, navigation flows.
-- Mocks: Next.js router, contexts, external hooks.
-- Tips: render minimal UI tree, interact with `@testing-library/react` utilities, assert on semantics not implementation.
-
-## Hooks
-- File: `__tests__/hooks/*`
-- Focus: lifecycle, browser APIs (scroll, resize), async behaviour.
-- Mocks: `window`, `document`, timers, intersection observers.
-- Tips: wrap `act` around updates, reset mocks between tests, include teardown coverage.
-
-## Flags & configuration
-- File: `__tests__/flags/*`
-- Focus: toggling features on/off, server-side overrides, fallbacks.
-- Mocks: flag evaluation client, configuration store.
-- Tips: include “flag service offline” scenarios to enforce safe defaults.
-
-## Libraries
-- File: `__tests__/lib/*`
-- Focus: data migration guards, validation, persistence abstractions.
-- Mocks: filesystem, database clients, clock.
-- Tips: write table-driven tests so new edge cases are easy to add.
-
-### Making them yours
-1. Rename folders to match real domains (`users`, `billing`, `cms`).
-2. Swap module imports from `@/lib/...` to wherever your implementation lives.
-3. Keep the error-handling tests, even if you simplify the happy path—they are cheap insurance.
-4. Run `pnpm test` (or your equivalent) often; treat failures as documentation gaps.
-
-These suites double as onboarding material. New contributors can read the tests to understand intent before diving into production code.

package.json

@@ -6,7 +6,10 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest --coverage"
   },
   "dependencies": {
     "@hookform/resolvers": "^3.10.0",
@@ -69,14 +72,20 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.9",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/node": "^22",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@vitejs/plugin-react": "^5.1.1",
     "eslint": "^9.39.1",
+    "jsdom": "^27.2.0",
     "postcss": "^8.5",
     "tailwindcss": "^4.1.9",
     "tw-animate-css": "1.3.3",
     "typescript": "^5",
+    "vitest": "^4.0.9",
     "wrangler": "^4.42.0"
   }
 }

src/app/api/chat/route.ts

@@ -1,5 +1,6 @@
 import { type NextRequest, NextResponse } from "next/server"
 import type { ChatRequest, ChatResponse } from "@/lib/types"
+import { getFlags } from "@/lib/flags"
 
 /**
  * Get webhook URL for a specific agent from environment variables
@@ -26,7 +27,7 @@ function getAgentWebhookUrl(agentId: string): string | null {
 }
 
 // Helper function to convert diff tool call to markdown format
-function convertToDiffTool(args: any): string {
+function convertToDiffTool(args: any, diffToolEnabled: boolean): string {
   try {
     const { oldCode, newCode, title, language } = args
 
@@ -34,6 +35,12 @@ function convertToDiffTool(args: any): string {
       return "Error: Missing oldCode or newCode in diff tool call"
     }
 
+    // If diff tool is disabled, return as plain code blocks
+    if (!diffToolEnabled) {
+      const titleText = title || "Code Changes"
+      return `### ${titleText}\n\n**Before:**\n\`\`\`${language || 'text'}\n${oldCode}\n\`\`\`\n\n**After:**\n\`\`\`${language || 'text'}\n${newCode}\n\`\`\``
+    }
+
     const diffToolCall = {
       oldCode: String(oldCode).replace(/\n/g, '\\n'),
       newCode: String(newCode).replace(/\n/g, '\\n'),
@@ -57,6 +64,9 @@ export async function POST(request: NextRequest): Promise<NextResponse<ChatRespo
 
     const { message, timestamp, sessionId, agentId, images } = body as ChatRequest
 
+    // Get feature flags
+    const flags = getFlags()
+
     // Validate required fields
     if (!message || typeof message !== "string") {
       return NextResponse.json({ error: "Message is required" }, { status: 400 })
@@ -66,6 +76,17 @@ export async function POST(request: NextRequest): Promise<NextResponse<ChatRespo
       return NextResponse.json({ error: "Agent ID is required" }, { status: 400 })
     }
 
+    // Check if image uploads are enabled
+    if (images && images.length > 0 && !flags.IMAGE_UPLOADS_ENABLED) {
+      return NextResponse.json(
+        {
+          error: "Image uploads are currently disabled",
+          hint: "Contact your administrator to enable the IMAGE_UPLOADS_ENABLED flag"
+        },
+        { status: 403 }
+      )
+    }
+
     // Get webhook URL for the selected agent
     const webhookUrl = getAgentWebhookUrl(agentId)
     if (!webhookUrl) {
@@ -144,7 +165,7 @@ export async function POST(request: NextRequest): Promise<NextResponse<ChatRespo
           
           // Handle diff tool calls
           if (chunk.type === "tool_call" && chunk.name === "show_diff") {
-            const diffTool = convertToDiffTool(chunk.args)
+            const diffTool = convertToDiffTool(chunk.args, flags.DIFF_TOOL_ENABLED)
             chunks.push(diffTool)
           }
         } catch {
@@ -165,7 +186,7 @@ export async function POST(request: NextRequest): Promise<NextResponse<ChatRespo
 
       // Check if this is a diff tool call
       if (data.type === "tool_call" && data.name === "show_diff") {
-        const diffTool = convertToDiffTool(data.args)
+        const diffTool = convertToDiffTool(data.args, flags.DIFF_TOOL_ENABLED)
         return NextResponse.json({ response: diffTool })
       }
 

src/app/api/flags/route.ts

@@ -0,0 +1,19 @@
+import { type NextRequest, NextResponse } from "next/server"
+import { getFlags } from "@/lib/flags"
+
+/**
+ * GET /api/flags
+ * Returns current feature flag configuration
+ */
+export async function GET(request: NextRequest): Promise<NextResponse> {
+  try {
+    const flags = getFlags()
+    return NextResponse.json({ flags })
+  } catch (error) {
+    console.error("[flags] Error loading flags:", error)
+    return NextResponse.json(
+      { error: "Failed to load feature flags" },
+      { status: 500 }
+    )
+  }
+}

src/components/chat-interface.tsx

@@ -15,6 +15,7 @@ import {
 import { MarkdownRenderer } from "./markdown-renderer"
 import type { Message, Agent } from "@/lib/types"
 import { cn } from "@/lib/utils"
+import { useFlags } from "@/lib/use-flags"
 
 interface ChatInterfaceProps {
   agent: Agent
@@ -41,6 +42,7 @@ export function ChatInterface({
   const inputRef = useRef<HTMLTextAreaElement>(null)
   const fileInputRef = useRef<HTMLInputElement>(null)
   const [copiedMessageId, setCopiedMessageId] = useState<string | null>(null)
+  const { flags } = useFlags()
 
   useEffect(() => {
     // Use agent-specific session ID: chat-session-{agentId}
@@ -461,7 +463,7 @@ export function ChatInterface({
       >
         <form onSubmit={sendMessage} className="composer-form relative flex justify-center">
           {/* Image preview section */}
-          {selectedImages.length > 0 && (
+          {flags.IMAGE_UPLOADS_ENABLED && selectedImages.length > 0 && (
             <div className="composer-images mb-3 flex flex-wrap gap-3 px-3 pt-2">
               {selectedImages.map((image, index) => (
                 <div key={index} className="composer-image-thumb relative">
@@ -581,26 +583,30 @@ export function ChatInterface({
                     <Send className="h-4 w-4" />
                   )}
                 </Button>
-                <input
+                {flags.IMAGE_UPLOADS_ENABLED && (
-                  ref={fileInputRef}
+                  <>
-                  type="file"
+                    <input
-                  multiple
+                      ref={fileInputRef}
-                  accept="image/*"
+                      type="file"
-                  onChange={handleImageSelect}
+                      multiple
-                  className="hidden"
+                      accept="image/*"
-                  disabled={isLoading}
+                      onChange={handleImageSelect}
-                />
+                      className="hidden"
-                <Button
+                      disabled={isLoading}
-                  type="button"
+                    />
-                  variant="ghost"
+                    <Button
-                  size="icon"
+                      type="button"
-                  onClick={() => fileInputRef.current?.click()}
+                      variant="ghost"
-                  disabled={isLoading}
+                      size="icon"
-                  className="composer-action-button h-11 w-11 rounded-2xl border border-white/20 bg-white/10 text-white/80 transition hover:bg-white/20 hover:text-white"
+                      onClick={() => fileInputRef.current?.click()}
-                  title="Attach image"
+                      disabled={isLoading}
-                >
+                      className="composer-action-button h-11 w-11 rounded-2xl border border-white/20 bg-white/10 text-white/80 transition hover:bg-white/20 hover:text-white"
-                  <Paperclip className="h-4 w-4" />
+                      title="Attach image"
-                </Button>
+                    >
+                      <Paperclip className="h-4 w-4" />
+                    </Button>
+                  </>
+                )}
                 </div>
               </div>
             </div>

src/components/markdown-renderer.tsx

@@ -8,6 +8,7 @@ import { DiffTool } from "./diff-tool"
 import { useState, isValidElement, type ReactNode } from "react"
 import { cn } from "@/lib/utils"
 import { Copy } from "lucide-react"
+import { useFlags } from "@/lib/use-flags"
 
 interface MarkdownRendererProps {
   content: string
@@ -34,6 +35,8 @@ function parseDiffTools(content: string) {
 }
 
 export function MarkdownRenderer({ content, className = "", tone = "default" }: MarkdownRendererProps) {
+  const { flags } = useFlags()
+
   // Parse diff tools from content
   const diffTools = parseDiffTools(content)
   let processedContent = content
@@ -62,7 +65,7 @@ export function MarkdownRenderer({ content, className = "", tone = "default" }:
             const text = typeof children === 'string' ? children : children?.toString() || ''
             const diffToolMatch = text.match(/^__DIFF_TOOL_(\d+)__$/)
 
-            if (diffToolMatch) {
+            if (diffToolMatch && flags.DIFF_TOOL_ENABLED) {
               const index = parseInt(diffToolMatch[1])
               const tool = diffTools[index]
               if (tool) {

src/lib/flags.ts

@@ -0,0 +1,101 @@
+/**
+ * Feature flag system
+ *
+ * Flags can be configured via environment variables or runtime overrides.
+ * Environment variables take precedence over defaults.
+ * Runtime overrides take precedence over environment variables.
+ */
+
+export interface FeatureFlags {
+  IMAGE_UPLOADS_ENABLED: boolean
+  DIFF_TOOL_ENABLED: boolean
+}
+
+/**
+ * Default values for all feature flags
+ */
+export const FLAG_DEFAULTS: FeatureFlags = {
+  IMAGE_UPLOADS_ENABLED: true,
+  DIFF_TOOL_ENABLED: true,
+}
+
+/**
+ * Global cache key for runtime flags
+ */
+const CACHE_KEY = '__MULTI_AGENT_CHAT_FLAGS__'
+
+/**
+ * Parse boolean from string environment variable
+ */
+export function parseBool(value: string | undefined, defaultValue: boolean): boolean {
+  if (value === undefined || value === '') {
+    return defaultValue
+  }
+
+  const normalized = value.toLowerCase().trim()
+
+  if (normalized === 'true' || normalized === '1' || normalized === 'yes') {
+    return true
+  }
+
+  if (normalized === 'false' || normalized === '0' || normalized === 'no') {
+    return false
+  }
+
+  return defaultValue
+}
+
+/**
+ * Get feature flags from environment variables with caching
+ */
+export function getFlags({ refresh = false }: { refresh?: boolean } = {}): FeatureFlags {
+  // Check for cached runtime overrides
+  const cached = (globalThis as any)[CACHE_KEY]
+  if (cached && !refresh) {
+    return cached
+  }
+
+  // Build flags from environment variables
+  const flags: FeatureFlags = {
+    IMAGE_UPLOADS_ENABLED: parseBool(
+      process.env.IMAGE_UPLOADS_ENABLED,
+      FLAG_DEFAULTS.IMAGE_UPLOADS_ENABLED
+    ),
+    DIFF_TOOL_ENABLED: parseBool(
+      process.env.DIFF_TOOL_ENABLED,
+      FLAG_DEFAULTS.DIFF_TOOL_ENABLED
+    ),
+  }
+
+  // Cache the flags
+  ;(globalThis as any)[CACHE_KEY] = flags
+
+  return flags
+}
+
+/**
+ * Register runtime flag overrides (useful for testing)
+ */
+export function registerRuntimeFlags(overrides: Partial<FeatureFlags>): void {
+  const currentFlags = getFlags({ refresh: true })
+  const newFlags = { ...currentFlags, ...overrides }
+  ;(globalThis as any)[CACHE_KEY] = newFlags
+}
+
+/**
+ * Clear the flag cache (useful for testing)
+ */
+export function resetFlagsCache(): void {
+  delete (globalThis as any)[CACHE_KEY]
+}
+
+/**
+ * Proxy object for convenient flag access
+ * Usage: Flags.IMAGE_UPLOADS_ENABLED
+ */
+export const Flags = new Proxy({} as FeatureFlags, {
+  get(_target, prop: string) {
+    const flags = getFlags()
+    return flags[prop as keyof FeatureFlags]
+  },
+})

src/lib/use-flags.ts

@@ -0,0 +1,42 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import type { FeatureFlags } from "./flags"
+import { FLAG_DEFAULTS } from "./flags"
+
+/**
+ * Hook to fetch and access feature flags on the client side
+ */
+export function useFlags() {
+  const [flags, setFlags] = useState<FeatureFlags>(FLAG_DEFAULTS)
+  const [isLoading, setIsLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    const fetchFlags = async () => {
+      try {
+        setIsLoading(true)
+        setError(null)
+        const response = await fetch("/api/flags")
+
+        if (!response.ok) {
+          throw new Error("Failed to load feature flags")
+        }
+
+        const data = await response.json()
+        setFlags(data.flags || FLAG_DEFAULTS)
+      } catch (err) {
+        console.error("[useFlags] Error fetching flags:", err)
+        setError(err instanceof Error ? err.message : "Unknown error")
+        // Fallback to defaults on error
+        setFlags(FLAG_DEFAULTS)
+      } finally {
+        setIsLoading(false)
+      }
+    }
+
+    fetchFlags()
+  }, [])
+
+  return { flags, isLoading, error }
+}

vitest.config.ts

@@ -0,0 +1,29 @@
+import { defineConfig } from 'vitest/config'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    setupFiles: ['./vitest.setup.ts'],
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html'],
+      exclude: [
+        'node_modules/',
+        '.next/',
+        '.open-next/',
+        '__tests__/',
+        '*.config.*',
+        'src/components/ui/**',
+      ],
+    },
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+})

vitest.setup.ts

@@ -0,0 +1,42 @@
+import '@testing-library/jest-dom'
+import { afterEach } from 'vitest'
+import { cleanup } from '@testing-library/react'
+
+// Cleanup after each test
+afterEach(() => {
+  cleanup()
+})
+
+// Mock window.matchMedia
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: (query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: () => {},
+    removeListener: () => {},
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    dispatchEvent: () => true,
+  }),
+})
+
+// Mock IntersectionObserver
+global.IntersectionObserver = class IntersectionObserver {
+  constructor() {}
+  disconnect() {}
+  observe() {}
+  takeRecords() {
+    return []
+  }
+  unobserve() {}
+}
+
+// Mock ResizeObserver
+global.ResizeObserver = class ResizeObserver {
+  constructor() {}
+  disconnect() {}
+  observe() {}
+  unobserve() {}
+}

wrangler.jsonc

@@ -21,7 +21,9 @@
 				"AGENT_1_DESCRIPTION": "Documenting the development process.",
 				"AGENT_2_URL": "https://n8n.biohazardvfx.com/webhook/0884bd10-256d-441c-971c-b9f1c8506fdf",
 				"AGENT_2_NAME": "Morgan",
-				"AGENT_2_DESCRIPTION": "System Prompt Designer"
+				"AGENT_2_DESCRIPTION": "System Prompt Designer",
+				"IMAGE_UPLOADS_ENABLED": "true",
+				"DIFF_TOOL_ENABLED": "true"
 			}
 		}
 	},