feat: add public demo site

README.md

@@ -5,11 +5,15 @@
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)
 [![CLI](https://img.shields.io/badge/CLI-agent--comms-cb3837)](scripts/agent-comms.mjs)
 
+[![Agent Comms operator dashboard demo](docs/assets/agent-comms-demo-dashboard.png)](https://agent-comms.github.io/agent-comms-demo/)
+
 Async communication infrastructure for coding and operations agents that share a
 human operator.
 
 Created by [Shay Palachy Affek](http://www.shaypalachy.com/).
 
+Live public demo: <https://agent-comms.github.io/agent-comms-demo/>
+
 The project is intentionally product-neutral. It provides the open-source core
 for:
 

package.json

@@ -10,6 +10,7 @@
   "scripts": {
     "dev": "vite --host 127.0.0.1",
     "build": "tsc -b && vite build",
+    "build:demo": "VITE_AGENT_COMMS_DEMO=1 VITE_BASE=/agent-comms-demo/ npm run build",
     "preview": "vite preview --host 127.0.0.1",
     "test": "vitest run",
     "check": "tsc -b"

src/App.tsx

@@ -52,7 +52,9 @@ const emptyState: AgentCommsState = {
   todos: [],
 };
 
-const useDemoData = import.meta.env.DEV && new URLSearchParams(window.location.search).get("demo") === "1";
+const useDemoData =
+  import.meta.env.VITE_AGENT_COMMS_DEMO === "1" ||
+  (import.meta.env.DEV && new URLSearchParams(window.location.search).get("demo") === "1");
 const themePreferenceKey = "agent-comms-theme-mode";
 
 const nightModeTheme: Record<string, string> = {
@@ -1508,6 +1510,9 @@ export function App() {
 
   const operatorRequest = useCallback(
     async (path: string, options: RequestInit = {}) => {
+      if (useDemoData) {
+        throw new Error("Demo mode uses public sample data and does not write to an operator API.");
+      }
       const controller = new AbortController();
       const timeout = window.setTimeout(() => controller.abort(), 8000);
       const headers: Record<string, string> = {
@@ -1685,17 +1690,23 @@ export function App() {
   }, [liveSessions, operatorRequest, operatorToken]);
 
   useEffect(() => {
+    if (useDemoData) return;
     void refreshOperatorData();
   }, [refreshOperatorData]);
 
   useEffect(() => {
+    if (useDemoData) return;
     const timer = window.setInterval(() => {
       void refreshOperatorData();
     }, 1000);
     return () => window.clearInterval(timer);
   }, [refreshOperatorData]);
 
   useEffect(() => {
+    if (useDemoData) {
+      document.title = defaultBranding.appName;
+      return;
+    }
     let cancelled = false;
     void loadDeploymentBranding().then((nextBranding) => {
       if (cancelled) return;

src/styles.css

@@ -47,6 +47,7 @@ button {
   display: grid;
   grid-template-columns: 280px minmax(0, 1fr);
   min-height: 100vh;
+  color: var(--color-text);
   background: var(--color-bg);
 }
 

vite.config.ts

@@ -2,5 +2,6 @@ import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 
 export default defineConfig({
+  base: process.env.VITE_BASE ?? "/",
   plugins: [react()],
 });