clay-server 3.6.0-beta.1 → 3.6.0

package/README.md

@@ -1,13 +1,14 @@
 <p align="center">
-  <img src="media/logo/icon-full-banded-256-transparent.png" alt="Clay - self-hosted team workspace for Claude Code and Codex" />
+  <img src="lib/public/icon-192.png" width="120" alt="Clay Studio symbol" /><br>
+  <img src="lib/public/clay-studio-wordmark.svg" width="280" alt="Clay Studio" />
 </p>
 
-<h2 align="center">Multiplayer Claude Code and Codex.</h2>
-<h4 align="center">
-Drop into a teammate's session live.<br>
-Or pair with AI mates that remember and push back.<br>
-Self-hosted, one toggle between vendors.
-</h4>
+<h2 align="center">Where minds work together.</h2>
+
+<p align="center">
+  A self-hosted workspace where people and coding agents work together<br>
+  across projects, sessions, and providers.
+</p>
 
 <p align="center">
   <a href="https://www.npmjs.com/package/clay-server"><img src="https://img.shields.io/npm/v/clay-server" alt="npm version" /></a>
@@ -16,235 +17,92 @@ Self-hosted, one toggle between vendors.
   <a href="https://github.com/chadbyte/clay/blob/main/LICENSE"><img src="https://img.shields.io/badge/License-MIT-yellow.svg" alt="License: MIT" /></a>
 </p>
 
-The browser tab your whole team lives in. Humans, AI agents, projects, sessions, decisions.
+Clay Studio turns local coding agents into a shared, persistent team. Run different agents from one browser workspace, join a teammate's live session, keep project knowledge between conversations, and automate work without handing your workspace to another cloud.
 
-Afraid of locking your personal or team knowledge into one vendor? With Clay, your conventions, sessions, and decisions live on your disk. Switch when you want.
+## Quick start
 
-*A team-shared, self-hosted GUI for Claude Code and Codex CLIs.*
+**Requirements:** Node.js 20+ and at least one supported coding-agent CLI installed and authenticated.
 
 ```bash
 npx clay-server
-# Scan the QR code to connect from any device
+# Open the URL or scan the QR code from another device
 ```
 
-## What's Clay?
-
-- **A browser-based workspace for Claude Code and Codex.** Open it on any device, alone or with your whole team.
-- **A place where your team collaborates across projects.** Engineers, PMs, designers, and domain experts share one workspace, hop between projects, drop into each other's sessions.
-- **Your virtual team.** Mates with names, memory, and roles — architect, reviewer, designer, whoever you need. They learn your codebase, push back on bad ideas, and don't reset between sessions.
-- **A multi-project dashboard.** Every repo on your machine in one sidebar. Run agents across several in parallel; permission requests and completions surface as notifications.
-- **A self-hosted dev server.** Runs on your machine in plain JSONL and Markdown. No proprietary database, no cloud relay, no lock-in. Walk away whenever — your data walks with you.
-- **A work-automation system.** Ralph Loop iterates a feature overnight; cron schedules agents while you're away. Wake up to results, or a clean failure trace.
-
-## What it does
-
-### Run Claude Code and Codex in one workspace
-
-Open a session, pick a vendor. Switch sessions, pick the other. Clay's adapter layer (YOKE) speaks the Claude Agent SDK and the Codex app-server protocol natively. Cross-vendor instruction loading: Codex reads AGENTS.md, Claude reads CLAUDE.md, Clay merges the rest into the system prompt automatically.
-
-<p align="center">
-  <img src="media/split.gif" alt="Toggle between Claude Code and Codex in one click" width="700">
-</p>
-
-### Every project on one dashboard
-
-All your projects live in the sidebar. Jump between them in one click, see live status across each, run agents in several at once. No more `cd ~/work/foo && tmux attach && ...`. One Clay daemon hosts every repo on your machine and gives you a single pane of glass over all of them.
-
-### Mates: AI teammates with persistent memory
-
-Mates are AI personas with their own CLAUDE.md, knowledge files, and memory that compounds across sessions. They learn your stack, your conventions, your decision history. @mention them mid-session, DM them directly, or drop them into a debate. **They don't flatter you. They push back.**
+Clay Studio runs on your machine and serves the workspace to your browser. For access outside your local network, use a private network such as Tailscale.
 
-<p align="center">
-  <img src="media/mates.gif" alt="An AI teammate (Mate) pushing back on a bad design pitch in Clay" width="640">
-</p>
-
-### Debate: structured multi-Mate decisions
-
-Stuck on REST vs GraphQL? Monorepo or split? Surface the question to a debate. Pick panelists, set the format, let your Mates argue both sides with moderated turns. You walk away with a recorded decision, not a vibe check.
-
-### Parallel worktrees
-
-Detect existing git worktrees, spin up new ones from the sidebar, and run agents in each one independently. No more "wait, I have uncommitted changes." Each worktree is an isolated session with its own history.
-
-### Ralph Loop: autonomous coding while you sleep
+## Why Clay Studio
 
-Write a `PROMPT.md`, optionally a `JUDGE.md`, hit go. Clay iterates: code, evaluate, retry, until the judge approves or you cap the loop. Run it once, or schedule it on standard Unix cron. Wake up to a finished feature or a clean failure trace.
+### Work together
 
-### Web UI, mobile, push notifications
+Projects, sessions, people, and agents share one workspace. Teammates can see live activity, enter the same session, hand off work, and respond to permission requests without gathering around one terminal.
 
-Installable PWA on iOS and Android. Push notifications for approvals, errors, and completed tasks. Service worker keeps the app responsive offline. When Claude needs approval, your phone buzzes, you tap approve, the agent keeps going.
+### Keep the context
 
-## Who is Clay for
+Sessions do not have to be disposable chats. Mates retain their roles and knowledge, project instructions carry across supported runtimes, and decisions remain available when the next task begins.
 
-### Small teams (3–10)
+### Stay in control
 
-Engineers, PMs, designers, and domain experts in one workspace. Non-devs read the codebase and ask questions without ever opening an editor. Engineers @mention each other or drop into a teammate's session to help in real time. Share one org-wide API key or let each member bring their own, with costs routing to whoever ran the model.
+The daemon runs on infrastructure you control. Sessions and knowledge live on disk in portable JSONL and Markdown rather than a proprietary database. Change coding agents without migrating the workspace around them.
 
-### Larger teams (10+)
+## Supported coding agents
 
-Per-user, per-project, per-session permissions. On Linux, opt in to OS-level isolation: each Clay user maps to a real Linux account, file ACLs enforced via `setfacl`, processes spawn under the right UID/GID. Per-project API keys for billing separation. Plain JSONL sessions give you an audit trail you can grep.
+Clay Studio currently includes integrations for:
 
-### Solopreneurs and indie developers
+**Claude Code · Codex · Grok Build · Kimi Code · GitHub Copilot CLI · Qwen Code · Junie CLI · Antigravity CLI · OpenCode · Kiro CLI**
 
-You don't have a team yet, so Mates are your team. A persistent architect, a reviewer, a designer — each with their own memory, ready to push back on bad ideas. Run Ralph Loop overnight to ship while you sleep. Toggle Claude and Codex per session to balance cost and capability.
+Clay detects locally installed runtimes and exposes the ones available on your machine. Each runtime keeps its own authentication and may expose different models, modes, and capabilities.
 
-### Self-hosting developers
+## Core capabilities
 
-Your code stays on your machine. Sessions are JSONL, knowledge is Markdown, settings are JSON. No proprietary database, no cloud relay, no middleman. CLAUDE.md, AGENTS.md, `.cursorrules` are all loaded automatically across vendors. Walk away whenever, your data walks with you.
+- **Shared projects and live sessions.** Organize several repositories in one sidebar, run sessions in parallel, and collaborate with presence, cursors, mentions, and handoffs.
+- **Persistent Mates.** Create AI collaborators with their own identity, instructions, knowledge, memory, direct messages, and roles in structured debates.
+- **Cross-provider continuity.** YOKE gives supported coding agents a common session interface and carries project instruction files across vendor boundaries.
+- **Parallel and background work.** Use git worktrees, paired sessions, spawned workers, scheduled tasks, and Ralph Loops without losing visibility into what is running.
+- **A workspace on every device.** Use the desktop browser or install the PWA on mobile. Receive push notifications for approvals, failures, and completed work.
+- **Tools where the work happens.** Browse and edit files, inspect diffs and history, open terminals, install skills, connect MCP servers, and manage project knowledge from the same workspace.
 
-## Getting Started
+## Your machine is the server
 
-**Requirements:** Node.js 20+. Authenticated Claude Code CLI, Codex CLI, or both.
+The normal request path is:
 
-```bash
-npx clay-server
+```text
+Browser → Clay Studio daemon → selected coding-agent runtime → model provider
 ```
 
-On first run, Clay asks for a port and whether you're solo or with a team. Open the URL or scan the QR code from your phone.
+Clay Studio does not relay project traffic through a Clay-hosted cloud. Your code leaves the machine only when the selected runtime sends it to its model provider, just as it would when you use that CLI directly.
 
-For remote access, use a VPN like Tailscale.
+The `d.clay.studio` hostname used for local HTTPS is a DNS-only service: no application data passes through it. See [clay-dns](clay-dns/) for the implementation and threat model.
 
-<p align="center">
-  <img src="media/start.gif" alt="Starting Clay daemon from the CLI with npx clay-server" width="600">
-</p>
-
-## CLI Options
+## Common CLI commands
 
 ```bash
-npx clay-server              # Default (port 2633)
-npx clay-server -p 8080      # Specify port
-npx clay-server --yes        # Skip interactive prompts (use defaults)
-npx clay-server -y --pin 123456
-                              # Non-interactive + PIN (for scripts/CI)
-npx clay-server --add .      # Add current directory to running daemon
-npx clay-server --remove .   # Remove project
+npx clay-server              # Start on the default port (2633)
+npx clay-server -p 8080      # Use a different port
+npx clay-server --add .      # Add the current directory
 npx clay-server --list       # List registered projects
-npx clay-server --shutdown   # Stop running daemon
-npx clay-server --dangerously-skip-permissions
-                              # Bypass all permission prompts (requires PIN at setup)
-```
-
-Run `npx clay-server --help` for all options.
-
-## FAQ
-
-**"Is this a Claude Code wrapper?"**
-No. Clay drives Claude Code through the [Claude Agent SDK](https://www.npmjs.com/package/@anthropic-ai/claude-agent-sdk) and Codex through the Codex app-server protocol. Both are first-class. Clay adds multi-session orchestration, persistent Mates, structured debates, scheduled agents, multi-user collaboration, built-in MCP servers, and a full browser UI on top.
-
-**"Can I run Claude Code and Codex in the same workspace?"**
-Yes. Pick a vendor when you open a session. Switch per session. Same projects, same Mates, same memory.
-
-**"How are Mates different from Claude Code's sub-agents?"**
-Sub-agents are ephemeral specialists spawned inside a single Claude Code session — a role and a system prompt for one task, then forgotten when the task ends. Mates are persistent teammates with their own knowledge files and memory that survive every session. A sub-agent forgets you the moment it returns; a Mate remembers your codebase, your decisions, and your conventions across months of work. @mention a Mate mid-session, DM it between sessions, or drop several into a debate.
-
-**"Does my code leave my machine?"**
-Only as model API calls (the same as using the CLI directly). Sessions, Mates, knowledge, and settings all stay on disk.
-
-**"Does my existing CLAUDE.md / AGENTS.md / .cursorrules work?"**
-Yes. Clay loads native instruction files for each vendor and merges the rest into the system prompt automatically.
-
-**"Can I continue a CLI session in the browser?"**
-Yes. CLI sessions show up in the sidebar. Browser sessions can be picked up in the CLI.
-
-**"Does each teammate need their own API key?"**
-No. Share one org-wide key, or let each user bring their own. On Linux with OS-level isolation, each member can also use their own Claude Code or Codex login.
-
-**"What does OS-level isolation actually do?"**
-On Linux, opt in and Clay provisions each user as a real Linux account. File ACLs are enforced via `setfacl`, agent processes spawn under the user's UID/GID, and the kernel handles the rest. One teammate can't read another's project files, even by accident. The guarantee comes from the OS, not from a promise in our code.
-
-**"Does it work with MCP servers?"**
-Yes. User-configured MCPs from `~/.clay/mcp.json` plus built-in browser, email, ask-user, and debate servers. All work in both Claude and Codex sessions.
-
-**"Can I use it on my phone?"**
-Yes. Install as a PWA on iOS or Android. Push notifications for approvals, errors, and task completion.
-
-**"What is d.clay.studio in my browser URL?"**
-A DNS-only service that resolves to your local IP for HTTPS certificate validation. No data passes through it. All traffic stays between your browser and your machine. See [clay-dns](clay-dns/) for details.
-
-## Our Philosophy
-
-One idea: **user experience sovereignty**.
-
-Not a grand statement. A simple wish: not to have your thinking, your work, and your data locked in the moment a vendor changes a price or rewrites a ToS.
-
-That shows up in the technical choices we made:
-
-- **Your machine is the server.** Browser → your daemon → model API. That's the full chain. No vendor cloud, no relay server, no middle tier syncing your sessions through someone else's infrastructure.
-- **One toggle between vendors.** The adapter layer (YOKE) speaks the Claude Agent SDK and the Codex app-server protocol natively. Switching is a setting, not a migration.
-- **Plain text on disk.** Sessions, Mates, knowledge, and settings live as JSONL and Markdown. No proprietary database. You can `cat`, `grep`, version, and back up everything yourself.
-- **Standard formats only.** CLAUDE.md, AGENTS.md, `.cursorrules`, MCP, Unix cron. If you walk away from Clay, your data walks with you in formats every other tool already understands.
-
-That's the principle. The rest of the README is what it makes possible.
-
-## Architecture
-
-Clay is a self-hosted daemon. It drives Claude Code (via the [Claude Agent SDK](https://www.npmjs.com/package/@anthropic-ai/claude-agent-sdk)) and Codex (via the `codex app-server` JSON-RPC protocol) through a vendor-agnostic adapter layer (**YOKE**), and serves a multi-user web workspace over HTTP/WS. Sessions, Mates, and knowledge live as plain JSONL/Markdown on disk.
-
-```mermaid
-graph LR
-    subgraph Clients
-      B1["Browser<br/>User A"]
-      B2["Browser<br/>User B"]
-      Phone["Phone PWA<br/>+ Push"]
-    end
-
-    subgraph Daemon["Clay Daemon (your machine)"]
-      Auth["Auth + RBAC"]
-      Server["HTTP / WS Server"]
-      Project["Project Context"]
-      YOKE["YOKE Adapter Layer"]
-      MCP["Built-in MCP servers<br/>ask-user / browser /<br/>debate / email"]
-      Push["Push (VAPID)"]
-    end
-
-    subgraph Vendors["Agent runtimes"]
-      Claude["Claude Agent SDK"]
-      Codex["codex app-server<br/>(JSON-RPC stdio)"]
-    end
-
-    B1 <-->|WS| Server
-    B2 <-->|WS| Server
-    Phone <-->|WS + push| Server
-    Server --> Auth
-    Server --> Project
-    Project --> YOKE
-    Project --> MCP
-    Project --> Push
-    YOKE --> Claude
-    YOKE --> Codex
-    Push -.-> Phone
+npx clay-server --shutdown   # Stop the daemon
 ```
 
-For sequence diagrams, OS-level isolation, daemon IPC, and key design decisions, see [docs/guides/architecture.md](docs/guides/architecture.md).
-
-## Community Projects
-
-Projects built by the community on top of Clay.
-
-| Project | Description |
-|---------|-------------|
-| [clay-streamdeck-plugin](https://github.com/egns-ai/clay-streamdeck-plugin) | Stream Deck plugin that turns physical buttons into a live dashboard for managing Clay sessions, worktrees, and permission requests. |
-
-Building something with Clay? Share it in [Discussions](https://github.com/chadbyte/clay/discussions).
+Run `npx clay-server --help` for the complete command reference.
 
-## Contributors
+## Documentation
 
-<a href="https://github.com/chadbyte/clay/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=chadbyte/clay" />
-</a>
+- [Documentation index](docs/README.md)
+- [Architecture](docs/guides/architecture.md)
+- [MCP integration](docs/guides/MCP-IMPLEMENTATION.md)
+- [Contributing](CONTRIBUTING.md)
+- [Changelog](CHANGELOG.md)
 
-## Contributing
+## Community
 
-Bug fixes and typo corrections are welcome. For feature suggestions, please open an issue first:
-[https://github.com/chadbyte/clay/issues](https://github.com/chadbyte/clay/issues)
+The community-built [Clay Stream Deck plugin](https://github.com/egns-ai/clay-streamdeck-plugin) turns physical buttons into a live dashboard for sessions, worktrees, and permission requests.
 
-If you're using Clay, let us know how in Discussions:
-[https://github.com/chadbyte/clay/discussions](https://github.com/chadbyte/clay/discussions)
+Building something with Clay Studio? Share it in [GitHub Discussions](https://github.com/chadbyte/clay/discussions).
 
 ## Disclaimer
 
-Not affiliated with Anthropic or OpenAI. Claude is a trademark of Anthropic. Codex is a trademark of OpenAI. Provided "as is" without warranty. Users are responsible for complying with their AI provider's terms of service.
+Clay Studio is not affiliated with the providers of the coding agents it supports. Product names and trademarks belong to their respective owners. The software is provided "as is," and users are responsible for complying with the terms of their selected providers.
 
 ## License
 
-MIT
+[MIT](LICENSE)

package/bin/cli.js

@@ -38,6 +38,7 @@ var { sendIPCCommand } = require("../lib/ipc");
 var { generateAuthToken } = require("../lib/server");
 var { enableMultiUser, disableMultiUser, hasAdmin, isMultiUser, getSetupCode } = require("../lib/users");
 var clayStudioCert = require("../lib/clay-studio-cert");
+var cliWordmark = require("../lib/cli-wordmark");
 
 function openUrl(url) {
   try {
@@ -303,11 +304,11 @@ var a = {
 
 function gradient(text) {
   if (isBasicTerm) {
-    return a.yellow + text + a.reset;
+    return a.clay + text + a.reset;
   }
-  // Terracotta (#FE7150) → Warm brown (#D09558) — Clay earthy warmth
-  var r0 = 254, g0 = 113, b0 = 80;
-  var r1 = 208, g1 = 149, b1 = 88;
+  // Clay Indigo (#5857FC) → Clay Green (#07E5A3)
+  var r0 = 88, g0 = 87, b0 = 252;
+  var r1 = 7, g1 = 229, b1 = 163;
   var out = "";
   var len = text.length;
   for (var i = 0; i < len; i++) {
@@ -693,46 +694,10 @@ function ensureCerts(ip) {
 
 // --- Logo ---
 function printLogo() {
-  var r = a.reset;
-  var lines = [
-    "________/\\\\\\\\\\\\\\\\\\__/\\\\\\_________________/\\\\\\\\\\\\\\\\\\_____/\\\\\\________/\\\\\\",
-    " _____/\\\\\\////////__\\/\\\\\\_______________/\\\\\\\\\\\\\\\\\\\\\\\\\\__\\///\\\\\\____/\\\\\\/_",
-    "  ___/\\\\\\/___________\\/\\\\\\______________/\\\\\\/////////\\\\\\___\\///\\\\\\/\\\\\\/___",
-    "   __/\\\\\\_____________\\/\\\\\\_____________\\/\\\\\\_______\\/\\\\\\_____\\///\\\\\\/_____",
-    "    _\\/\\\\\\_____________\\/\\\\\\_____________\\/\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\_______\\/\\\\\\______",
-    "     _\\//\\\\\\____________\\/\\\\\\_____________\\/\\\\\\/////////\\\\\\_______\\/\\\\\\______",
-    "      __\\///\\\\\\__________\\/\\\\\\_____________\\/\\\\\\_______\\/\\\\\\_______\\/\\\\\\______",
-    "       ____\\////\\\\\\\\\\\\\\\\\\_\\/\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\_\\/\\\\\\_______\\/\\\\\\_______\\/\\\\\\______",
-    "        _______\\/////////__\\///////////////__\\///________\\///________\\///_______",
-  ];
+  var lines = cliWordmark.getWordmarkLines(process.stdout.columns);
   console.log("");
-  if (isBasicTerm) {
-    for (var i = 0; i < lines.length; i++) {
-      console.log(a.green + lines[i] + r);
-    }
-    return;
-  }
-  // Tri-accent vertical gradient: Green (#09E5A3) → Indigo (#5857FC) → Terracotta (#FE7150)
-  var stops = [
-    [9, 229, 163],
-    [88, 87, 252],
-    [254, 113, 80],
-  ];
   for (var i = 0; i < lines.length; i++) {
-    var t = lines.length > 1 ? i / (lines.length - 1) : 0;
-    var cr, cg, cb;
-    if (t <= 0.5) {
-      var s = t * 2;
-      cr = Math.round(stops[0][0] + (stops[1][0] - stops[0][0]) * s);
-      cg = Math.round(stops[0][1] + (stops[1][1] - stops[0][1]) * s);
-      cb = Math.round(stops[0][2] + (stops[1][2] - stops[0][2]) * s);
-    } else {
-      var s = (t - 0.5) * 2;
-      cr = Math.round(stops[1][0] + (stops[2][0] - stops[1][0]) * s);
-      cg = Math.round(stops[1][1] + (stops[2][1] - stops[1][1]) * s);
-      cb = Math.round(stops[1][2] + (stops[2][2] - stops[1][2]) * s);
-    }
-    console.log("\x1b[38;2;" + cr + ";" + cg + ";" + cb + "m" + lines[i] + r);
+    console.log(lines[i]);
   }
 }
 

package/lib/builtin-mates.js

@@ -20,7 +20,7 @@ var BUILTIN_MATES = [
     bio: "Your workspace memory. Searches every session, project, and decision you've made and answers from the receipts. The chat surface for the home screen.",
     avatarColor: "#7c3aed",
     avatarStyle: "bottts",
-    avatarCustom: "/icon-banded-76.png", // Clay is the app — use the app icon
+    avatarCustom: "/clay-studio-symbol.png", // Clay is the app — use the app symbol
     avatarLocked: true,
     primary: true,           // code-managed, auto-updated on startup
     globalSearch: true,      // searches all mates' sessions and projects

package/lib/cli-wordmark.js

@@ -0,0 +1,32 @@
+// Terminal-safe Clay Studio wordmarks. The wide form uses a Roman serif
+// construction; the compact form preserves the mixed-case silhouette.
+
+var WIDE_WORDMARK = [
+  "              ,,                                                         ,,    ,,",
+  "  .g8\"\"\"bgd `7MM                         .M\"\"\"bgd mm                   `7MM    db",
+  ".dP'     `M   MM                        ,MI    \"Y MM                     MM",
+  "dM'       `   MM   ,6\"Yb.`7M'   `MF'    `MMb.   mmMMmm `7MM  `7MM   ,M\"\"bMM  `7MM  ,pW\"Wq.",
+  "MM            MM  8)   MM  VA   ,V        `YMMNq. MM     MM    MM ,AP    MM    MM 6W'   `Wb",
+  "MM.           MM   ,pm9MM   VA ,V       .     `MM MM     MM    MM 8MI    MM    MM 8M     M8",
+  "`Mb.     ,'   MM  8M   MM    VVV        Mb     dM MM     MM    MM `Mb    MM    MM YA.   ,A9",
+  "  `\"bmmmd'  .JMML.`Moo9^Yo.  ,V         P\"Ybmmd\"  `Mbmo  `Mbod\"YML.`Wbmd\"MML..JMML.`Ybmd9'",
+  "                            ,V",
+  "                         OOb\"",
+];
+
+var COMPACT_WORDMARK = [
+  ",---.|                  ,---.|             |o",
+  "|    |    ,---.,   .    `---.|--- .   .,---|.,---.",
+  "|    |    ,---||   |        ||    |   ||   |||   |",
+  "`---'`---'`---^`---|    `---'`---'`---'`---'``---'",
+  "               `---'",
+];
+
+function getWordmarkLines(columns) {
+  var width = Number(columns) || 80;
+  if (width >= 92) return WIDE_WORDMARK.slice();
+  if (width >= 50) return COMPACT_WORDMARK.slice();
+  return ["Clay Studio"];
+}
+
+module.exports = { getWordmarkLines: getWordmarkLines };

package/lib/pages.js

@@ -3,9 +3,9 @@ function pinPageHtml() {
     '<meta charset="UTF-8">' +
     '<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">' +
     '<meta name="mobile-web-app-capable" content="yes">' +
-    '<link rel="icon" type="image/png" href="/favicon-banded.png">' +
+    '<link rel="icon" type="image/png" sizes="32x32" href="/clay-studio-favicon-32.png">' +
     '<link rel="apple-touch-icon" href="/apple-touch-icon.png">' +
-    '<title>Clay</title>' +
+    '<title>Clay Studio</title>' +
     '<style>' + authPageStyles + '</style></head><body><div class="c">' +
     '<h1 id="greeting"></h1>' +
     '<div class="sub">Enter your PIN to continue</div>' +
@@ -44,9 +44,10 @@ function setupPageHtml(httpsUrl, httpUrl, hasCert, lanMode) {
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
 <meta name="apple-mobile-web-app-capable" content="yes">
+<link rel="icon" type="image/png" sizes="32x32" href="/clay-studio-favicon-32.png">
 <link rel="manifest" href="/manifest.json">
 <link rel="apple-touch-icon" href="/apple-touch-icon.png">
-<title>Setup - Clay</title>
+<title>Setup - Clay Studio</title>
 <style>
 :root{--s-bg:#282a36;--s-text:#f8f8f2;--s-accent:#ffb86c;--s-muted:#6272a4;--s-border:#44475a;--s-dimmer:#6272a4;--s-success:#50fa7b;--s-accent-15:rgba(255,184,108,0.15);--s-success-10:rgba(80,250,123,0.1);--s-success-15:rgba(80,250,123,0.15);--s-accent-06:rgba(255,184,108,0.06);--s-muted-06:rgba(98,114,164,0.06);--s-muted-15:rgba(98,114,164,0.15)}
 @media(prefers-color-scheme:light){:root{--s-bg:#FAFAFA;--s-text:#5C6166;--s-accent:#FA8D3E;--s-muted:#A0A6AC;--s-border:#D2D4D8;--s-dimmer:#8A9199;--s-success:#6CBF49;--s-accent-15:rgba(250,141,62,0.15);--s-success-10:rgba(108,191,73,0.1);--s-success-15:rgba(108,191,73,0.15);--s-accent-06:rgba(250,141,62,0.06);--s-muted-06:rgba(160,166,172,0.06);--s-muted-15:rgba(160,166,172,0.15)}}
@@ -662,9 +663,10 @@ function escapeHtml(s) {
   return String(s).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 }
 
-// --- Build auth page CSS variables from ayu-light theme (same logic as theme.js computeVars) ---
+// --- Build auth page CSS variables from the Clay Studio theme pair ---
 var path = require("path");
-var _authTheme = require(path.join(__dirname, "themes", "ayu-light.json"));
+var _authTheme = require(path.join(__dirname, "themes", "clay-light.json"));
+var _authDarkTheme = require(path.join(__dirname, "themes", "clay-dark.json"));
 
 function _hexToRgb(hex) {
   hex = hex.replace("#", "");
@@ -689,35 +691,39 @@ function _mixColors(hex1, hex2, weight) {
   return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
 }
 
-var _t = {};
 var _keys = ["base00","base01","base02","base03","base04","base05","base06","base07",
              "base08","base09","base0A","base0B","base0C","base0D","base0E","base0F"];
-for (var _ki = 0; _ki < _keys.length; _ki++) {
-  _t[_keys[_ki]] = "#" + _authTheme[_keys[_ki]];
-}
-
-var _authVarsObj = {
-  "--bg": _t.base00,
-  "--bg-alt": _t.base01,
-  "--text": _t.base06,
-  "--text-muted": _t.base04,
-  "--text-dimmer": _t.base03,
-  "--accent": _t.base09,
-  "--accent-15": _hexToRgba(_t.base09, 0.15),
-  "--accent-20": _hexToRgba(_t.base09, 0.20),
-  "--border": _t.base02,
-  "--input-bg": _mixColors(_t.base01, _t.base02, 0.5),
-  "--error": _t.base08,
-};
 
-var _authVarsStr = ":root{";
-var _avKeys = Object.keys(_authVarsObj);
-for (var _vi = 0; _vi < _avKeys.length; _vi++) {
-  _authVarsStr += _avKeys[_vi] + ":" + _authVarsObj[_avKeys[_vi]] + ";";
+function _buildAuthVarDeclarations(theme) {
+  var t = {};
+  for (var ki = 0; ki < _keys.length; ki++) {
+    t[_keys[ki]] = "#" + theme[_keys[ki]];
+  }
+  var vars = {
+    "--bg": t.base00,
+    "--bg-alt": t.base01,
+    "--text": t.base06,
+    "--text-muted": t.base04,
+    "--text-dimmer": t.base03,
+    "--accent": t.base09,
+    "--accent-15": _hexToRgba(t.base09, 0.15),
+    "--accent-20": _hexToRgba(t.base09, 0.20),
+    "--border": t.base02,
+    "--input-bg": _mixColors(t.base01, t.base02, 0.5),
+    "--error": t.base08,
+  };
+  var declarations = "";
+  var names = Object.keys(vars);
+  for (var vi = 0; vi < names.length; vi++) {
+    declarations += names[vi] + ":" + vars[names[vi]] + ";";
+  }
+  return declarations;
 }
-_authVarsStr += "}";
 
-// --- Shared CSS for auth pages (Clay Light theme via CSS variables) ---
+var _authVarsStr = ":root{" + _buildAuthVarDeclarations(_authTheme) + "}" +
+  "@media(prefers-color-scheme:dark){:root{" + _buildAuthVarDeclarations(_authDarkTheme) + "}}";
+
+// --- Shared CSS for auth pages ---
 var authPageStyles =
   _authVarsStr +
   // Reset & layout
@@ -806,7 +812,8 @@ function adminSetupPageHtml() {
   return '<!DOCTYPE html><html lang="en"><head>' +
     '<meta charset="UTF-8">' +
     '<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">' +
-    '<title>Admin Setup - Clay</title>' +
+    '<link rel="icon" type="image/png" sizes="32x32" href="/clay-studio-favicon-32.png">' +
+    '<title>Admin Setup - Clay Studio</title>' +
     '<style>' + authPageStyles + '</style></head><body><div class="c">' +
     '<div class="steps-bar"><span class="steps-dot current" id="dot0"></span><span class="steps-dot" id="dot1"></span><span class="steps-dot" id="dot2"></span><span class="steps-dot" id="dot3"></span></div>' +
 
@@ -901,7 +908,8 @@ function multiUserLoginPageHtml() {
   return '<!DOCTYPE html><html lang="en"><head>' +
     '<meta charset="UTF-8">' +
     '<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">' +
-    '<title>Login - Clay</title>' +
+    '<link rel="icon" type="image/png" sizes="32x32" href="/clay-studio-favicon-32.png">' +
+    '<title>Login - Clay Studio</title>' +
     '<style>' + authPageStyles + '</style></head><body><div class="c">' +
     '<div class="steps-bar"><span class="steps-dot current" id="dot0"></span><span class="steps-dot" id="dot1"></span></div>' +
 
@@ -986,7 +994,8 @@ function invitePageHtml(inviteCode) {
   return '<!DOCTYPE html><html lang="en"><head>' +
     '<meta charset="UTF-8">' +
     '<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">' +
-    '<title>Join - Clay</title>' +
+    '<link rel="icon" type="image/png" sizes="32x32" href="/clay-studio-favicon-32.png">' +
+    '<title>Join - Clay Studio</title>' +
     '<style>' + authPageStyles + '</style></head><body><div class="c">' +
     '<div class="steps-bar"><span class="steps-dot current" id="dot0"></span><span class="steps-dot" id="dot1"></span><span class="steps-dot" id="dot2"></span></div>' +
 
@@ -1067,7 +1076,8 @@ function smtpLoginPageHtml() {
   return '<!DOCTYPE html><html lang="en"><head>' +
     '<meta charset="UTF-8">' +
     '<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">' +
-    '<title>Login - Clay</title>' +
+    '<link rel="icon" type="image/png" sizes="32x32" href="/clay-studio-favicon-32.png">' +
+    '<title>Login - Clay Studio</title>' +
     '<style>' + authPageStyles +
     '.otp-input{width:100%;font-size:24px;letter-spacing:8px;text-align:center;padding:12px;' +
     'background:var(--field-bg);border:1px solid var(--field-border);border-radius:8px;color:var(--fg);' +
@@ -1223,7 +1233,8 @@ function smtpInvitePageHtml(inviteCode) {
   return '<!DOCTYPE html><html lang="en"><head>' +
     '<meta charset="UTF-8">' +
     '<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">' +
-    '<title>Join - Clay</title>' +
+    '<link rel="icon" type="image/png" sizes="32x32" href="/clay-studio-favicon-32.png">' +
+    '<title>Join - Clay Studio</title>' +
     '<style>' + authPageStyles + '</style></head><body><div class="c">' +
     '<div class="steps-bar"><span class="steps-dot current" id="dot0"></span><span class="steps-dot" id="dot1"></span><span class="steps-dot" id="dot2"></span></div>' +
 
@@ -1311,7 +1322,8 @@ function noProjectsPageHtml() {
   return '<!DOCTYPE html><html lang="en"><head>' +
     '<meta charset="UTF-8">' +
     '<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">' +
-    '<title>Clay</title>' +
+    '<link rel="icon" type="image/png" sizes="32x32" href="/clay-studio-favicon-32.png">' +
+    '<title>Clay Studio</title>' +
     '<style>' + authPageStyles + '</style></head><body><div class="c">' +
     '<h1>Hang tight!</h1>' +
     '<div class="sub">No projects have been assigned to your account yet.</div>' +