feat(frontend): bake Fabric-purple Hangman Lab logo as brand asset

public/brand-logo.svg = ~/hangman-lab-logo-black.svg recolored
#000000 -> #9333ea (Fabric deep purple). Dockerfile writes
.env.production at build (context .env* is dockerignored) so
VITE_APP_NAME/LOGO_URL/FAVICON_URL bake in; logo+favicon -> the mark.
Overridable via build args.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

.dockerignore

@@ -0,0 +1,7 @@
+node_modules
+dist
+.git
+.gitignore
+Dockerfile
+*.log
+.env*

.env.example

@@ -0,0 +1,9 @@
+VITE_CENTER_API_BASE=http://localhost:7001/api
+VITE_GUILD_API_BASE=http://localhost:7002/api
+VITE_GUILD_SOCKET_BASE=http://localhost:7002/realtime
+VITE_API_KEY=change-me-api-key
+
+# Brand overrides (build-time only; baked at build). Leave empty for Fabric defaults.
+VITE_APP_NAME=Fabric
+VITE_LOGO_URL=
+VITE_FAVICON_URL=

.gitignore

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

Dockerfile

@@ -0,0 +1,32 @@
+FROM node:22-alpine AS build
+WORKDIR /app
+
+COPY package*.json ./
+RUN npm ci
+
+COPY . .
+
+# Brand is baked at build (Vite VITE_* are build-time). Written here, not
+# via a context .env (.dockerignore excludes .env*). public/brand-logo.svg
+# ships the Fabric-purple Hangman Lab mark; override args if rebranding.
+ARG VITE_APP_NAME=Fabric
+ARG VITE_LOGO_URL=/brand-logo.svg
+ARG VITE_FAVICON_URL=/brand-logo.svg
+RUN printf 'VITE_APP_NAME=%s\nVITE_LOGO_URL=%s\nVITE_FAVICON_URL=%s\n' \
+      "$VITE_APP_NAME" "$VITE_LOGO_URL" "$VITE_FAVICON_URL" > .env.production
+RUN npm run build
+
+FROM nginx:1.27-alpine AS runtime
+COPY docker/nginx.conf /etc/nginx/conf.d/default.conf
+COPY docker/entrypoint.sh /docker-entrypoint-fabric.sh
+COPY --from=build /app/dist /usr/share/nginx/html
+RUN chmod +x /docker-entrypoint-fabric.sh
+
+# Runtime SPA config (see docker/entrypoint.sh). Override at `docker run`
+# / compose: empty values keep prior behavior.
+ENV FABRIC_OIDC_ONLY=""
+ENV FIX_TO_CENTER=""
+
+EXPOSE 80
+ENTRYPOINT ["/docker-entrypoint-fabric.sh"]
+CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -1 +1,61 @@
 # Fabric.Frontend
+
+The Fabric **web client** — React 19 + TypeScript + Vite. This is the actual
+UI; it is served on the web and **bundled unchanged** into `Fabric.Desktop`
+(Electron) and `Fabric.Android` (Capacitor).
+
+## What it does
+
+- **Auth** — login screen with a configurable Center API base
+  (default `http://localhost:7001/api`); discovers the user's guilds and
+  short-lived guild access tokens; refreshes on mount.
+- **Discord-style dark UI** — server rail / channel sidebar / messages /
+  members layout; per-`x_type` channel colors + badges.
+- **Messaging** — per-message Markdown render (HTML-escaped, XSS-safe, no
+  cross-message bleed), `<@id>` mention chips (resolved to display names,
+  backtick-aware), no message length cap.
+- **Channels** — create-channel modal (required Type, Public, members,
+  triage on-duty, custom listeners, discuss/work **bypass** multi-select);
+  join/leave; closed-channel read-only banner.
+- **Members** — split "In channel" / "Guild" panels for non-public channels;
+  discuss/work bypass tag + "→ bypass" action.
+- **Files** — composer attach (multi-file) with chips; image previews /
+  download chips (via `?access_token`).
+- **Canvas** — pinned per-channel document panel (Markdown / sandboxed HTML
+  iframe / plain text), live via `canvas.*` sockets; sharer-only edit/remove.
+- **Right-click menus** — native menu overridden with resource-specific
+  context menus (guild / channel / message / user / blank areas).
+- **Slash autocomplete** — typing `/` opens a command panel from the
+  guild's synced OpenClaw catalog (`GET /api/commands`): filter, ↑↓/Enter/
+  Esc, pick inserts `/<name> `, arg stage shows args + clickable choices.
+- **Dev mode** — surfaces guild `/ack` and per-message `wakeup` metadata
+  (off by default; persisted in `localStorage`).
+- Routing is `BrowserRouter` on the web and `HashRouter` under `file://`
+  (the Electron bundle); Capacitor serves over `http://localhost` so it
+  uses `BrowserRouter`.
+
+## Develop
+
+```bash
+npm install
+npm run dev          # Vite dev server (http://localhost:5173)
+```
+
+## Build
+
+```bash
+npm run build          # web build (absolute base) -> dist/
+npm run build:desktop  # relative-base build -> dist-desktop/  (Electron, file://)
+```
+
+`Fabric.Desktop` / `Fabric.Android` run their own scripts that invoke these
+builds and copy the output into their shells — you normally don't build for
+them by hand.
+
+## Notes
+
+- ES modules, Vite. App icons / favicon use the Fabric mark
+  (`public/favicon.svg` is a vectorized, deep-green version; PNG fallbacks +
+  `apple-touch-icon`). Favicon hrefs are versioned (`?v=`) for cache-busting.
+- The Center API base is entered at login, so desktop/mobile builds (no web
+  origin) just point at the right backend host.

docker/entrypoint.sh

@@ -0,0 +1,20 @@
+#!/bin/sh
+set -e
+
+# Inject container env into the static SPA at runtime. The app loads
+# /runtime-env.js (see index.html) before its bundle.
+#   FABRIC_OIDC_ONLY  - "true" hides the username/password login form
+#   FIX_TO_CENTER     - non-empty pins the Center API base + hides its input
+ONLY="false"
+case "$(printf '%s' "${FABRIC_OIDC_ONLY:-}" | tr '[:upper:]' '[:lower:]')" in
+  1|true|yes|on) ONLY="true" ;;
+esac
+
+# JSON-escape FIX_TO_CENTER (backslash + double-quote)
+FIX="$(printf '%s' "${FIX_TO_CENTER:-}" | sed 's/\\/\\\\/g; s/"/\\"/g')"
+
+cat > /usr/share/nginx/html/runtime-env.js <<EOF
+window.__FABRIC_ENV__ = { oidcOnly: ${ONLY}, fixToCenter: "${FIX}" };
+EOF
+
+exec "$@"

docker/nginx.conf

@@ -0,0 +1,17 @@
+server {
+  listen 80;
+  server_name _;
+
+  root /usr/share/nginx/html;
+  index index.html;
+
+  location / {
+    try_files $uri $uri/ /index.html;
+  }
+
+  location = /healthz {
+    access_log off;
+    return 200 'ok';
+    add_header Content-Type text/plain;
+  }
+}

eslint.config.js

@@ -0,0 +1,22 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      globals: globals.browser,
+    },
+  },
+])

index.html

@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg?v=3" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png?v=3" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png?v=3" />
+    <link rel="icon" type="image/png" sizes="256x256" href="/favicon.png?v=3" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=3" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#080a0d" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400&display=swap"
+      rel="stylesheet"
+    />
+    <title>Fabric</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <!-- runtime container env (generated by docker/entrypoint.sh); absent in dev -->
+    <script src="/runtime-env.js"></script>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,34 @@
+{
+  "name": "fabric-frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "build:desktop": "tsc -b && vite build --base=./ --outDir dist-desktop"
+  },
+  "dependencies": {
+    "axios": "^1.16.0",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "react-router-dom": "^7.15.0",
+    "socket.io-client": "^4.8.3"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@types/node": "^24.12.3",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "eslint": "^10.3.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.6.0",
+    "typescript": "~6.0.2",
+    "typescript-eslint": "^8.59.2",
+    "vite": "^8.0.12"
+  }
+}

public/brand-logo.svg

@@ -0,0 +1,44 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 733.000000 733.000000" role="img" aria-label="Hangman Lab">
+<g transform="translate(0.000000,733.000000) scale(0.100000,-0.100000)"
+fill="#9333ea" stroke="none">
+<path d="M812 6860 c-66 -40 -73 -66 -70 -242 3 -141 5 -159 24 -185 43 -58
+63 -63 262 -64 l182 -1 0 -2694 0 -2694 -290 0 c-314 0 -332 -3 -380 -54 -24
+-27 -25 -32 -28 -199 -3 -195 4 -218 71 -250 32 -16 257 -17 3084 -17 2955 0
+3049 1 3083 19 65 34 75 66 75 236 0 186 -16 224 -104 254 -25 8 -682 11
+-2512 11 l-2479 0 0 1998 0 1997 698 697 697 697 670 -3 c369 -2 680 -4 693
+-5 22 -1 22 -1 22 -269 l0 -268 84 -12 c47 -7 103 -19 125 -27 41 -14 41 -14
+43 283 l3 297 631 1 c698 2 673 -1 714 67 18 28 20 51 20 187 0 173 -8 201
+-72 240 -33 20 -56 20 -2623 20 -2567 0 -2590 0 -2623 -20z m1725 -500 c-1 -3
+-183 -185 -404 -404 l-403 -399 0 405 0 406 405 -1 c223 -1 404 -4 402 -7z
+M4283 5701 c-459 -125 -690 -624 -483 -1046 67 -138 196 -266 335 -335 281
+-139 612 -93 837 118 235 219 297 575 152 870 -85 174 -235 306 -427 375 -111
+40 -302 48 -414 18z m267 -211 c95 -15 201 -70 274 -144 273 -274 173 -723
+-189 -851 -93 -33 -236 -35 -326 -5 -202 68 -340 249 -356 465 -18 242 153
+471 394 529 71 18 119 19 203 6z M5945 4716 c-56 -25 -80 -61 -80 -122 0 -48
+4 -57 36 -90 88 -88 219 -29 219 98 0 45 -34 96 -75 114 -42 17 -61 17 -100 0z
+M5675 4466 c-60 -26 -73 -109 -26 -157 62 -61 161 -19 161 70 0 74 -68 118
+-135 87z M3747 4397 c-10 -7 -226 -223 -479 -482 -307 -313 -467 -483 -479
+-510 -35 -75 -17 -177 38 -227 39 -35 114 -61 160 -54 100 13 104 17 583 554
+l145 162 3 -404 c3 -455 15 -342 -137 -1186 -76 -423 -101 -587 -101 -664 0
+-190 182 -307 377 -242 62 21 136 95 152 152 6 22 29 188 52 369 57 466 109
+839 118 848 4 4 52 6 106 5 l99 -3 67 -210 c38 -115 68 -220 69 -232 0 -12
+-38 -152 -85 -311 -47 -159 -85 -302 -85 -317 0 -128 109 -225 255 -225 109 1
+185 42 228 125 26 51 237 683 237 710 0 11 -54 182 -121 380 -121 360 -121
+360 -134 605 -8 135 -14 292 -14 350 l0 105 152 -158 c84 -87 166 -167 182
+-177 44 -29 98 -26 135 8 38 35 187 379 173 401 -5 8 -34 20 -64 26 -59 11
+-38 -8 -393 362 -89 93 -100 97 -174 59 -59 -30 -161 -62 -229 -71 -52 -7 -53
+-7 -53 -41 0 -44 -21 -84 -61 -118 -38 -32 -41 0 32 -455 l52 -325 -82 -78
+c-45 -43 -85 -78 -89 -78 -4 0 -42 35 -84 78 l-77 77 34 215 c19 118 46 289
+61 379 26 164 26 164 -5 188 -42 33 -54 58 -61 121 -5 54 -5 54 -92 87 -98 38
+-184 89 -243 145 -76 70 -123 87 -168 57z M5504 4170 c-74 -30 -69 -170 6
+-170 19 0 20 -7 20 -123 0 -122 0 -122 -54 -262 -30 -77 -97 -243 -150 -369
+-106 -252 -113 -287 -73 -347 46 -70 38 -69 560 -69 327 0 475 3 490 11 69 35
+107 109 88 172 -5 17 -62 142 -126 277 -225 470 -215 443 -215 586 0 114 2
+124 18 124 57 0 72 101 23 151 -29 29 -29 29 -298 28 -147 0 -278 -4 -289 -9z
+m376 -307 c1 -148 1 -148 81 -333 101 -231 98 -222 68 -216 -13 3 -116 22
+-229 42 -112 19 -208 37 -212 40 -4 2 18 75 48 160 54 156 54 156 54 305 l0
+149 95 0 95 0 0 -147z m-219 -593 c22 0 49 -42 49 -75 0 -46 -29 -75 -74 -75
+-37 0 -76 36 -76 71 0 46 45 94 78 83 8 -2 18 -4 23 -4z m327 -126 c53 -59 -7
+-144 -80 -113 -54 22 -65 83 -22 125 30 31 67 27 102 -12z"/>
+</g>
+</svg>

public/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" role="img" aria-label="Fabric"><path fill="#1DB800" fill-rule="evenodd" d="M 496.1,636.7 L 484.4,640.6 L 455.1,658.2 L 447.3,668.0 L 445.3,673.8 L 445.3,716.8 L 449.2,726.6 L 455.1,732.4 L 474.6,742.2 L 478.5,746.1 L 490.2,752.0 L 507.8,752.0 L 537.1,736.3 L 548.8,726.6 L 552.7,718.8 L 552.7,671.9 L 548.8,664.1 L 537.1,654.3 L 509.8,638.7 Z M 498.0,673.8 L 503.9,675.8 L 517.6,685.5 L 517.6,705.1 L 503.9,714.8 L 496.1,714.8 L 480.5,705.1 L 480.5,685.5 L 488.3,681.6 Z M 498.0,494.1 L 496.1,496.1 L 490.2,496.1 L 480.5,507.8 L 480.5,599.6 L 490.2,611.3 L 494.1,611.3 L 496.1,613.3 L 509.8,609.4 L 515.6,601.6 L 515.6,507.8 L 505.9,496.1 L 500.0,496.1 Z M 804.7,484.4 L 800.8,488.3 L 798.8,488.3 L 791.0,498.0 L 791.0,502.0 L 789.1,503.9 L 789.1,515.6 L 794.9,527.3 L 806.6,535.2 L 826.2,535.2 L 830.1,533.2 L 841.8,519.5 L 841.8,500.0 L 839.8,496.1 L 826.2,484.4 L 820.3,484.4 L 818.4,482.4 Z M 722.7,484.4 L 710.9,494.1 L 709.0,502.0 L 707.0,503.9 L 707.0,515.6 L 712.9,527.3 L 724.6,535.2 L 742.2,535.2 L 744.1,533.2 L 748.0,533.2 L 755.9,525.4 L 759.8,517.6 L 759.8,500.0 L 757.8,496.1 L 744.1,484.4 L 738.3,484.4 L 736.3,482.4 Z M 640.6,484.4 L 636.7,488.3 L 634.8,488.3 L 627.0,498.0 L 627.0,502.0 L 625.0,503.9 L 625.0,515.6 L 627.0,517.6 L 627.0,521.5 L 634.8,531.2 L 642.6,535.2 L 662.1,535.2 L 666.0,533.2 L 677.7,519.5 L 677.7,500.0 L 675.8,496.1 L 662.1,484.4 L 656.2,484.4 L 654.3,482.4 Z M 337.9,484.4 L 334.0,486.3 L 322.3,500.0 L 322.3,519.5 L 324.2,523.4 L 337.9,535.2 L 357.4,535.2 L 369.1,527.3 L 375.0,515.6 L 375.0,503.9 L 373.0,502.0 L 373.0,498.0 L 369.1,494.1 L 369.1,492.2 L 359.4,484.4 L 353.5,484.4 L 351.6,482.4 Z M 255.9,484.4 L 248.0,488.3 L 240.2,500.0 L 240.2,503.9 L 238.3,505.9 L 238.3,513.7 L 240.2,515.6 L 240.2,519.5 L 242.2,523.4 L 255.9,535.2 L 275.4,535.2 L 289.1,523.4 L 293.0,515.6 L 293.0,503.9 L 287.1,492.2 L 283.2,488.3 L 275.4,484.4 L 269.5,484.4 L 267.6,482.4 Z M 173.8,484.4 L 166.0,488.3 L 162.1,492.2 L 158.2,500.0 L 158.2,503.9 L 156.2,505.9 L 156.2,513.7 L 158.2,515.6 L 158.2,519.5 L 160.2,523.4 L 173.8,535.2 L 193.4,535.2 L 207.0,523.4 L 210.9,515.6 L 210.9,503.9 L 205.1,492.2 L 201.2,488.3 L 193.4,484.4 L 187.5,484.4 L 185.5,482.4 Z M 455.1,210.9 L 421.9,224.6 L 392.6,250.0 L 363.3,296.9 L 353.5,332.0 L 357.4,388.7 L 425.8,484.4 L 425.8,601.6 L 390.6,638.7 L 384.8,652.3 L 384.8,734.4 L 392.6,750.0 L 447.3,800.8 L 535.2,804.7 L 556.6,796.9 L 607.4,746.1 L 613.3,732.4 L 613.3,652.3 L 607.4,638.7 L 570.3,599.6 L 570.3,484.4 L 636.7,394.5 L 642.6,337.9 L 632.8,298.8 L 609.4,259.8 L 578.1,232.4 L 560.5,224.6 L 541.0,224.6 L 529.3,238.3 L 529.3,250.0 L 544.9,298.8 L 544.9,335.9 L 513.7,357.4 L 509.8,392.6 L 498.0,400.4 L 496.1,378.9 L 484.4,363.3 L 496.1,345.7 L 496.1,332.0 L 482.4,316.4 L 496.1,298.8 L 494.1,283.2 L 480.5,269.5 L 488.3,230.5 L 476.6,212.9 Z M 439.5,255.9 L 443.4,257.8 L 439.5,279.3 L 451.2,293.0 L 439.5,310.5 L 439.5,324.2 L 453.1,337.9 L 439.5,355.5 L 439.5,367.2 L 460.9,390.6 L 460.9,400.4 L 449.2,419.9 L 449.2,431.6 L 460.9,443.4 L 509.8,435.5 L 541.0,414.1 L 544.9,378.9 L 578.1,353.5 L 580.1,283.2 L 595.7,302.7 L 605.5,330.1 L 605.5,377.0 L 580.1,416.0 L 543.0,457.0 L 535.2,480.5 L 535.2,605.5 L 541.0,621.1 L 578.1,658.2 L 578.1,726.6 L 533.2,769.5 L 464.8,769.5 L 419.9,726.6 L 419.9,658.2 L 455.1,621.1 L 460.9,607.4 L 460.9,480.5 L 451.2,455.1 L 414.1,414.1 L 392.6,380.9 L 388.7,337.9 L 402.3,296.9 Z M 271.5,123.0 L 248.0,148.4 L 60.5,486.3 L 60.5,519.5 L 70.3,544.9 L 252.0,859.4 L 273.4,880.9 L 304.7,892.6 L 697.3,892.6 L 728.5,880.9 L 753.9,853.5 L 941.4,515.6 L 929.7,459.0 L 750.0,142.6 L 720.7,117.2 L 693.4,109.4 L 308.6,109.4 Z M 294.9,150.4 L 308.6,144.5 L 693.4,144.5 L 724.6,168.0 L 900.4,478.5 L 906.2,513.7 L 722.7,837.9 L 705.1,853.5 L 306.6,857.4 L 275.4,830.1 L 101.6,529.3 L 93.8,502.0 L 277.3,168.0 Z"/></svg>

public/icons.svg

@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="bluesky-icon" viewBox="0 0 16 17">
+    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
+    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
+  </symbol>
+  <symbol id="discord-icon" viewBox="0 0 20 19">
+    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
+  </symbol>
+  <symbol id="documentation-icon" viewBox="0 0 21 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
+  </symbol>
+  <symbol id="github-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
+  </symbol>
+  <symbol id="social-icon" viewBox="0 0 20 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
+  </symbol>
+  <symbol id="x-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
+  </symbol>
+</svg>

src/App.css

@@ -0,0 +1,30 @@
+.app {
+  max-width: 900px;
+  margin: 2rem auto;
+  padding: 0 1rem;
+  font-family: Inter, system-ui, sans-serif;
+}
+
+.row {
+  display: flex;
+  gap: 8px;
+  margin: 10px 0;
+}
+
+input {
+  flex: 1;
+  padding: 8px;
+}
+
+button {
+  padding: 8px 12px;
+}
+
+.messages {
+  margin-top: 1rem;
+  padding-left: 1rem;
+}
+
+.messages li {
+  margin: 4px 0;
+}

src/App.tsx

@@ -0,0 +1,35 @@
+import { Navigate, Route, Routes } from 'react-router-dom'
+import ProtectedRoute from './auth/ProtectedRoute'
+import AppLayout from './layouts/AppLayout'
+import ChatPage from './pages/ChatPage'
+import LoginPage from './pages/LoginPage'
+import OidcCallback from './pages/OidcCallback'
+
+export default function App() {
+  return (
+    <Routes>
+      <Route path="/" element={<AppLayout />}>
+        <Route index element={<Navigate to="/workspace" replace />} />
+        <Route
+          path="workspace"
+          element={
+            <ProtectedRoute>
+              <ChatPage />
+            </ProtectedRoute>
+          }
+        />
+        <Route
+          path="chat"
+          element={
+            <ProtectedRoute>
+              <ChatPage />
+            </ProtectedRoute>
+          }
+        />
+        <Route path="login" element={<LoginPage />} />
+        <Route path="oidc" element={<OidcCallback />} />
+      </Route>
+      <Route path="*" element={<Navigate to="/workspace" replace />} />
+    </Routes>
+  )
+}

src/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

src/auth/AuthContext.tsx

@@ -0,0 +1,101 @@
+import { useMemo, useState } from 'react'
+import type { PropsWithChildren } from 'react'
+import { clearAuthSession, getAuthSession, isAccessTokenStale, setAuthSession } from '../lib/auth-storage'
+import type { AuthSession } from '../lib/auth-storage'
+import { loginCenter, logoutCenter, meGuildsCenter, refreshCenter, updateMeNameCenter } from '../lib/center-auth-client'
+import { AuthContext } from './auth-context'
+import type { AuthContextValue } from './auth-context'
+
+export function AuthProvider({ children }: PropsWithChildren) {
+  const [session, setSession] = useState<AuthSession | null>(getAuthSession())
+
+  const value = useMemo<AuthContextValue>(
+    () => ({
+      session,
+      isAuthed: !!session,
+      login: async (centerApiBase: string, email: string, password: string) => {
+        const next = await loginCenter(centerApiBase, { email, password })
+        setAuthSession(next)
+        setSession(next)
+      },
+      // Adopt a session obtained out-of-band (OIDC ticket exchange).
+      adoptSession: (next: AuthSession) => {
+        setAuthSession(next)
+        setSession(next)
+      },
+      logout: async () => {
+        if (session?.refreshToken) {
+          try {
+            await logoutCenter(session.centerApiBase, session.refreshToken)
+          } catch {
+            // noop
+          }
+        }
+        clearAuthSession()
+        setSession(null)
+      },
+      ensureFreshToken: async () => {
+        if (!session) return null
+        if (!isAccessTokenStale(session.accessToken)) return session.accessToken
+
+        const refreshed = await refreshCenter(session.centerApiBase, session.refreshToken)
+        const next: AuthSession = {
+          ...session,
+          accessToken: refreshed.accessToken,
+          refreshToken: refreshed.refreshToken,
+          tokenType: refreshed.tokenType,
+          expiresIn: refreshed.expiresIn,
+        }
+        setAuthSession(next)
+        setSession(next)
+        return next.accessToken
+      },
+      refreshGuilds: async () => {
+        if (!session) return
+        let accessToken = session.accessToken
+        let refreshToken = session.refreshToken
+        let tokenType = session.tokenType
+        let expiresIn = session.expiresIn
+        if (isAccessTokenStale(session.accessToken)) {
+          const refreshed = await refreshCenter(session.centerApiBase, session.refreshToken)
+          accessToken = refreshed.accessToken
+          refreshToken = refreshed.refreshToken
+          tokenType = refreshed.tokenType
+          expiresIn = refreshed.expiresIn
+        }
+
+        const guildData = await meGuildsCenter(session.centerApiBase, accessToken)
+        const next: AuthSession = {
+          ...session,
+          accessToken,
+          refreshToken,
+          tokenType,
+          expiresIn,
+          guilds: guildData.guilds,
+          guildAccessTokens: guildData.guildAccessTokens,
+        }
+        setAuthSession(next)
+        setSession(next)
+      },
+      updateName: async (name: string) => {
+        if (!session) return
+        const accessToken = (await (async () => {
+          if (!isAccessTokenStale(session.accessToken)) return session.accessToken
+          const refreshed = await refreshCenter(session.centerApiBase, session.refreshToken)
+          return refreshed.accessToken
+        })())
+        const updated = await updateMeNameCenter(session.centerApiBase, accessToken, name)
+        const next: AuthSession = {
+          ...session,
+          accessToken,
+          user: { ...session.user, name: updated.name },
+        }
+        setAuthSession(next)
+        setSession(next)
+      },
+    }),
+    [session],
+  )
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>
+}

src/auth/ProtectedRoute.tsx

@@ -0,0 +1,34 @@
+import { Navigate } from 'react-router-dom'
+import { useAuth } from './auth-context'
+import type { PropsWithChildren } from 'react'
+import { useEffect, useState } from 'react'
+
+export default function ProtectedRoute({ children }: PropsWithChildren) {
+  const { isAuthed, ensureFreshToken, logout } = useAuth()
+  const [ready, setReady] = useState(false)
+
+  useEffect(() => {
+    let active = true
+    ;(async () => {
+      if (!isAuthed) {
+        if (active) setReady(true)
+        return
+      }
+      try {
+        await ensureFreshToken()
+      } catch {
+        await logout()
+      } finally {
+        if (active) setReady(true)
+      }
+    })()
+
+    return () => {
+      active = false
+    }
+  }, [isAuthed, ensureFreshToken, logout])
+
+  if (!ready) return null
+  if (!isAuthed) return <Navigate to="/login" replace />
+  return <>{children}</>
+}

src/auth/auth-context.ts

@@ -0,0 +1,21 @@
+import { createContext, useContext } from 'react'
+import type { AuthSession } from '../lib/auth-storage'
+
+export type AuthContextValue = {
+  session: AuthSession | null
+  isAuthed: boolean
+  login: (centerApiBase: string, email: string, password: string) => Promise<void>
+  adoptSession: (session: AuthSession) => void
+  logout: () => Promise<void>
+  ensureFreshToken: () => Promise<string | null>
+  refreshGuilds: () => Promise<void>
+  updateName: (name: string) => Promise<void>
+}
+
+export const AuthContext = createContext<AuthContextValue | null>(null)
+
+export function useAuth() {
+  const ctx = useContext(AuthContext)
+  if (!ctx) throw new Error('useAuth must be used inside <AuthProvider>')
+  return ctx
+}

src/layouts/AppLayout.tsx

@@ -0,0 +1,5 @@
+import { Outlet } from 'react-router-dom'
+
+export default function AppLayout() {
+  return <Outlet />
+}

src/lib/api-client.ts

@@ -0,0 +1,64 @@
+import axios from 'axios'
+import type { AxiosInstance } from 'axios'
+import { getRuntimeConfig } from './runtime-config'
+
+let client: AxiosInstance | null = null
+
+function createClient(): AxiosInstance {
+  const cfg = getRuntimeConfig()
+  const instance = axios.create({
+    baseURL: cfg.guildApiBase,
+    timeout: 10000,
+  })
+
+  instance.interceptors.request.use((request) => {
+    const { apiKey } = getRuntimeConfig()
+    const requestId = crypto.randomUUID()
+    if (apiKey) request.headers['x-api-key'] = apiKey
+    request.headers['x-request-id'] = requestId
+    request.headers['x-client-name'] = 'fabric-frontend'
+
+    console.info('[api:request]', {
+      method: request.method,
+      url: `${request.baseURL ?? ''}${request.url ?? ''}`,
+      requestId,
+    })
+    return request
+  })
+
+  instance.interceptors.response.use(
+    (response) => {
+      const requestId = response.headers['x-request-id'] ?? response.config.headers['x-request-id']
+      console.info('[api:response]', {
+        method: response.config.method,
+        url: `${response.config.baseURL ?? ''}${response.config.url ?? ''}`,
+        status: response.status,
+        requestId,
+      })
+      return response
+    },
+    (error) => {
+      const response = error?.response
+      const config = error?.config ?? {}
+      const requestId = response?.headers?.['x-request-id'] ?? config?.headers?.['x-request-id']
+      console.error('[api:error]', {
+        method: config.method,
+        url: `${config.baseURL ?? ''}${config.url ?? ''}`,
+        status: response?.status,
+        requestId,
+      })
+      return Promise.reject(error)
+    },
+  )
+
+  return instance
+}
+
+export function getApiClient(): AxiosInstance {
+  if (!client) client = createClient()
+  return client
+}
+
+export function resetApiClient(): void {
+  client = createClient()
+}

src/lib/auth-storage.ts

@@ -0,0 +1,62 @@
+export type AuthSession = {
+  centerApiBase: string
+  accessToken: string
+  refreshToken: string
+  tokenType: string
+  expiresIn?: number
+  user: {
+    id: string
+    email: string
+    name: string
+  }
+  guilds: Array<{
+    nodeId: string
+    name: string
+    endpoint: string
+    status: 'active' | 'offline' | 'revoked'
+  }>
+  guildAccessTokens: Array<{
+    guildNodeId: string
+    token: string
+    tokenType: string
+    expiresIn?: number
+  }>
+}
+
+const KEY = 'fabric.auth.session.v1'
+
+export function getAuthSession(): AuthSession | null {
+  const raw = localStorage.getItem(KEY)
+  if (!raw) return null
+  try {
+    return JSON.parse(raw) as AuthSession
+  } catch {
+    return null
+  }
+}
+
+export function setAuthSession(session: AuthSession): void {
+  localStorage.setItem(KEY, JSON.stringify(session))
+}
+
+export function clearAuthSession(): void {
+  localStorage.removeItem(KEY)
+}
+
+function parseJwtExpMs(token: string): number | null {
+  const payload = token.split('.')[1]
+  if (!payload) return null
+  try {
+    const decoded = JSON.parse(atob(payload)) as { exp?: number }
+    if (!decoded.exp) return null
+    return decoded.exp * 1000
+  } catch {
+    return null
+  }
+}
+
+export function isAccessTokenStale(token: string, leadMs = 60_000): boolean {
+  const expMs = parseJwtExpMs(token)
+  if (!expMs) return true
+  return Date.now() + leadMs >= expMs
+}

src/lib/brand.ts

@@ -0,0 +1,21 @@
+// Build-time brand overrides. Values are baked from VITE_ env at build
+// (not runtime-configurable by design). Empty/unset → Fabric defaults.
+const env = import.meta.env as unknown as Record<string, string | undefined>
+
+export const APP_NAME = (env.VITE_APP_NAME ?? '').trim() || 'Fabric'
+export const LOGO_URL = (env.VITE_LOGO_URL ?? '').trim()
+const FAVICON_URL = (env.VITE_FAVICON_URL ?? '').trim()
+
+// Apply the document title + favicon override once at startup.
+export function applyBrand(): void {
+  document.title = APP_NAME
+  if (FAVICON_URL) {
+    document
+      .querySelectorAll('link[rel~="icon"], link[rel="apple-touch-icon"]')
+      .forEach((n) => n.remove())
+    const link = document.createElement('link')
+    link.rel = 'icon'
+    link.href = FAVICON_URL
+    document.head.appendChild(link)
+  }
+}

src/lib/center-auth-client.ts

@@ -0,0 +1,110 @@
+import axios from 'axios'
+import type { AuthSession } from './auth-storage'
+
+export type LoginPayload = { email: string; password: string }
+
+type LoginResponse = {
+  accessToken: string
+  refreshToken: string
+  tokenType: string
+  expiresIn?: number
+  user: { id: string; email: string; name: string }
+  guilds: Array<{ nodeId: string; name: string; endpoint: string; status: 'active' | 'offline' | 'revoked' }>
+  guildAccessTokens: Array<{ guildNodeId: string; token: string; tokenType: string; expiresIn?: number }>
+}
+
+type RefreshResponse = {
+  accessToken: string
+  refreshToken: string
+  tokenType: string
+  expiresIn?: number
+}
+
+type MeGuildsResponse = {
+  guilds: Array<{ nodeId: string; name: string; endpoint: string; status: 'active' | 'offline' | 'revoked' }>
+  guildAccessTokens: Array<{ guildNodeId: string; token: string; tokenType: string; expiresIn?: number }>
+}
+
+function centerClient(centerApiBase: string) {
+  const client = axios.create({
+    baseURL: centerApiBase,
+    timeout: 10000,
+  })
+
+  client.interceptors.request.use((request) => {
+    const requestId = crypto.randomUUID()
+    request.headers['x-request-id'] = requestId
+    request.headers['x-client-name'] = 'fabric-frontend'
+    return request
+  })
+
+  return client
+}
+
+export async function loginCenter(centerApiBase: string, payload: LoginPayload): Promise<AuthSession> {
+  const res = await centerClient(centerApiBase).post<LoginResponse>('/auth/login', payload)
+  return { ...res.data, centerApiBase }
+}
+
+export async function refreshCenter(centerApiBase: string, refreshToken: string): Promise<RefreshResponse> {
+  const res = await centerClient(centerApiBase).post<RefreshResponse>('/auth/refresh', { refreshToken })
+  return res.data
+}
+
+export async function logoutCenter(centerApiBase: string, refreshToken: string): Promise<void> {
+  await centerClient(centerApiBase).post('/auth/logout', { refreshToken })
+}
+
+export async function meGuildsCenter(centerApiBase: string, accessToken: string): Promise<MeGuildsResponse> {
+  const res = await centerClient(centerApiBase).get<MeGuildsResponse>('/auth/me/guilds', {
+    headers: { Authorization: `Bearer ${accessToken}` },
+  })
+  return res.data
+}
+
+export async function joinGuildCenter(centerApiBase: string, accessToken: string, guildNodeId: string): Promise<void> {
+  await centerClient(centerApiBase).post(
+    '/auth/me/guilds/join',
+    { guildNodeId },
+    { headers: { Authorization: `Bearer ${accessToken}` } },
+  )
+}
+
+export async function guildMembersCenter(
+  centerApiBase: string,
+  accessToken: string,
+  guildNodeId: string,
+): Promise<Array<{ userId: string; email: string; name: string; status: string }>> {
+  const res = await centerClient(centerApiBase).get<Array<{ userId: string; email: string; name: string; status: string }>>(
+    `/auth/guilds/${encodeURIComponent(guildNodeId)}/members`,
+    { headers: { Authorization: `Bearer ${accessToken}` } },
+  )
+  return Array.isArray(res.data) ? res.data : []
+}
+
+export async function oidcStatusCenter(centerApiBase: string): Promise<{ enabled: boolean }> {
+  try {
+    const res = await centerClient(centerApiBase).get<{ enabled: boolean }>('/auth/oidc/status')
+    return { enabled: !!res.data?.enabled }
+  } catch {
+    return { enabled: false }
+  }
+}
+
+export async function oidcExchangeCenter(centerApiBase: string, ticket: string): Promise<AuthSession> {
+  const res = await centerClient(centerApiBase).post<LoginResponse>('/auth/oidc/exchange', { ticket })
+  return { ...res.data, centerApiBase }
+}
+
+export async function updateMeNameCenter(
+  centerApiBase: string,
+  accessToken: string,
+  name: string,
+): Promise<{ id: string; email: string; name: string }> {
+  const res = await centerClient(centerApiBase).patch<{ id: string; email: string; name: string }>(
+    '/auth/me',
+    { name },
+    { headers: { Authorization: `Bearer ${accessToken}` } },
+  )
+  return res.data
+}

src/lib/markdown.ts

@@ -0,0 +1,131 @@
+// Minimal, self-contained Markdown -> HTML for chat messages.
+// Each message is rendered independently (call once per message) so a
+// syntax error in one message (e.g. an unclosed code fence) cannot affect
+// the next one. All raw text is HTML-escaped first, so no user HTML or
+// script can be injected; only our own tags are emitted.
+
+export type MarkdownOpts = {
+  // resolve a mentioned userId to a display name (without the leading @)
+  resolveMention?: (id: string) => string
+}
+
+function esc(s: string): string {
+  return s
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+}
+
+function safeUrl(u: string): string {
+  return /^(https?:|mailto:)/i.test(u.trim()) ? u.trim() : '#'
+}
+
+// <@id> -> mention chip. Runs on already-escaped text, so the token looks
+// like &lt;@id&gt;. Untranslated <@user.name:..> tokens are left literal.
+function mentions(s: string, opts?: MarkdownOpts): string {
+  return s.replace(/&lt;@([^&<>\s]+)&gt;/g, (full, id: string) => {
+    if (id.startsWith('user.name:')) return full
+    const label = opts?.resolveMention ? opts.resolveMention(id) : id
+    return `<span class="mention">@${esc(label)}</span>`
+  })
+}
+
+// inline formatting on already-escaped text; code spans are protected
+function inline(t: string, opts?: MarkdownOpts): string {
+  const codes: string[] = []
+  let s = t.replace(/`([^`]+)`/g, (_, c) => {
+    codes.push(`<code>${c}</code>`)
+    return ` ${codes.length - 1} `
+  })
+  s = mentions(s, opts)
+  s = s.replace(/\[([^\]]+)\]\(([^)\s]+)\)/g, (_, txt, url) => `<a href="${safeUrl(url)}" target="_blank" rel="noopener noreferrer">${txt}</a>`)
+  s = s.replace(/(^|[\s(])((?:https?:\/\/)[^\s<]+)/g, (_, p, url) => `${p}<a href="${safeUrl(url)}" target="_blank" rel="noopener noreferrer">${url}</a>`)
+  s = s.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
+  s = s.replace(/__([^_]+)__/g, '<strong>$1</strong>')
+  s = s.replace(/~~([^~]+)~~/g, '<del>$1</del>')
+  s = s.replace(/(^|[^*])\*([^*\s][^*]*)\*/g, '$1<em>$2</em>')
+  s = s.replace(/(^|[^_])_([^_\s][^_]*)_/g, '$1<em>$2</em>')
+  s = s.replace(/ (\d+) /g, (_, i) => codes[Number(i)])
+  return s
+}
+
+export function renderMarkdown(src: string, opts?: MarkdownOpts): string {
+  if (typeof src !== 'string' || src === '') return ''
+  const lines = src.replace(/\r\n?/g, '\n').split('\n')
+  const out: string[] = []
+  let i = 0
+  let para: string[] = []
+
+  const flushPara = () => {
+    if (para.length) {
+      out.push(`<p>${inline(esc(para.join('\n')), opts).replace(/\n/g, '<br>')}</p>`)
+      para = []
+    }
+  }
+
+  while (i < lines.length) {
+    const line = lines[i]
+
+    // fenced code block (unclosed fence is closed at message end)
+    const fence = /^```(.*)$/.exec(line)
+    if (fence) {
+      flushPara()
+      const buf: string[] = []
+      i++
+      while (i < lines.length && !/^```\s*$/.test(lines[i])) {
+        buf.push(lines[i])
+        i++
+      }
+      i++ // skip closing fence if present
+      out.push(`<pre><code>${esc(buf.join('\n'))}</code></pre>`)
+      continue
+    }
+
+    if (/^\s*$/.test(line)) {
+      flushPara()
+      i++
+      continue
+    }
+
+    const h = /^(#{1,6})\s+(.*)$/.exec(line)
+    if (h) {
+      flushPara()
+      const lvl = h[1].length
+      out.push(`<h${lvl}>${inline(esc(h[2]), opts)}</h${lvl}>`)
+      i++
+      continue
+    }
+
+    if (/^\s*>\s?/.test(line)) {
+      flushPara()
+      const buf: string[] = []
+      while (i < lines.length && /^\s*>\s?/.test(lines[i])) {
+        buf.push(lines[i].replace(/^\s*>\s?/, ''))
+        i++
+      }
+      out.push(`<blockquote>${inline(esc(buf.join('\n')), opts).replace(/\n/g, '<br>')}</blockquote>`)
+      continue
+    }
+
+    const ordered = /^\s*\d+\.\s+/.test(line)
+    const unordered = /^\s*[-*+]\s+/.test(line)
+    if (ordered || unordered) {
+      flushPara()
+      const tag = ordered ? 'ol' : 'ul'
+      const items: string[] = []
+      const re = ordered ? /^\s*\d+\.\s+(.*)$/ : /^\s*[-*+]\s+(.*)$/
+      while (i < lines.length && re.test(lines[i])) {
+        items.push(`<li>${inline(esc(re.exec(lines[i])![1]), opts)}</li>`)
+        i++
+      }
+      out.push(`<${tag}>${items.join('')}</${tag}>`)
+      continue
+    }
+
+    para.push(line)
+    i++
+  }
+  flushPara()
+  return out.join('')
+}

src/lib/runtime-config.ts

@@ -0,0 +1,29 @@
+export type RuntimeConfig = {
+  centerApiBase: string
+  guildApiBase: string
+  guildSocketBase: string
+  apiKey: string
+}
+
+const KEY = 'fabric.runtime.config.v1'
+
+const defaults: RuntimeConfig = {
+  centerApiBase: import.meta.env.VITE_CENTER_API_BASE ?? 'http://localhost:7001/api',
+  guildApiBase: import.meta.env.VITE_GUILD_API_BASE ?? 'http://localhost:7002/api',
+  guildSocketBase: import.meta.env.VITE_GUILD_SOCKET_BASE ?? 'http://localhost:7002/realtime',
+  apiKey: import.meta.env.VITE_API_KEY ?? '',
+}
+
+export function getRuntimeConfig(): RuntimeConfig {
+  const raw = localStorage.getItem(KEY)
+  if (!raw) return defaults
+  try {
+    return { ...defaults, ...(JSON.parse(raw) as Partial<RuntimeConfig>) }
+  } catch {
+    return defaults
+  }
+}
+
+export function setRuntimeConfig(next: RuntimeConfig): void {
+  localStorage.setItem(KEY, JSON.stringify(next))
+}

src/lib/runtime-env.ts

@@ -0,0 +1,37 @@
+// Runtime (container) env, injected by the Docker entrypoint into
+// /runtime-env.js as window.__FABRIC_ENV__ (NOT build-time). Empty/unset
+// keeps the prior behavior.
+type FabricEnv = { oidcOnly?: boolean; fixToCenter?: string }
+
+const env: FabricEnv =
+  (typeof window !== 'undefined' && (window as unknown as { __FABRIC_ENV__?: FabricEnv }).__FABRIC_ENV__) || {}
+
+// FABRIC_OIDC_ONLY: hide the username/password form (SSO is the only login).
+export const OIDC_ONLY = env.oidcOnly === true
+
+// FIX_TO_CENTER: when non-empty, the Center API base is pinned to this and
+// the login page no longer shows the "Center API Base" input.
+export const FIXED_CENTER = (env.fixToCenter ?? '').trim()
+
+export const DEFAULT_CENTER = 'http://localhost:7001/api'
+
+// Where OIDC exchange should call back to. FIX_TO_CENTER wins; otherwise
+// the value the user used to start SSO (persisted before redirect).
+const OIDC_CENTER_KEY = 'fabric.oidc.center.v1'
+export function rememberOidcCenter(base: string): void {
+  try {
+    localStorage.setItem(OIDC_CENTER_KEY, base)
+  } catch {
+    // ignore
+  }
+}
+export function resolveCenterBase(): string {
+  if (FIXED_CENTER) return FIXED_CENTER
+  try {
+    const v = localStorage.getItem(OIDC_CENTER_KEY)
+    if (v) return v
+  } catch {
+    // ignore
+  }
+  return DEFAULT_CENTER
+}

src/lib/socket-client.ts

@@ -0,0 +1,36 @@
+import { io, Socket } from 'socket.io-client'
+import { getRuntimeConfig } from './runtime-config'
+
+let socket: Socket | null = null
+
+export function getSocketClient(userId = 'frontend-user'): Socket {
+  if (socket) return socket
+
+  const cfg = getRuntimeConfig()
+  socket = io(cfg.guildSocketBase, {
+    transports: ['websocket'],
+    auth: {
+      apiKey: cfg.apiKey,
+      userId,
+    },
+    autoConnect: false,
+  })
+
+  return socket
+}
+
+export function reconnectSocket(): Socket {
+  if (socket) {
+    socket.disconnect()
+    socket = null
+  }
+  const next = getSocketClient()
+  next.connect()
+  return next
+}
+
+export function disconnectSocket(): void {
+  if (!socket) return
+  socket.disconnect()
+  socket = null
+}

src/main.tsx

@@ -0,0 +1,24 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { BrowserRouter, HashRouter } from 'react-router-dom'
+import './index.css'
+import App from './App.tsx'
+import { AuthProvider } from './auth/AuthContext'
+import { applyBrand } from './lib/brand'
+
+applyBrand()
+
+// The packaged desktop app loads the bundled SPA over file://, where the
+// History API has no server to back path routing — use HashRouter there.
+// The web build (served over http behind nginx) keeps clean BrowserRouter URLs.
+const Router = window.location.protocol === 'file:' ? HashRouter : BrowserRouter
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <Router>
+      <AuthProvider>
+        <App />
+      </AuthProvider>
+    </Router>
+  </StrictMode>,
+)

src/pages/LoginPage.tsx

@@ -0,0 +1,119 @@
+import { useEffect, useState } from 'react'
+import type { FormEvent } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { useAuth } from '../auth/auth-context'
+import { APP_NAME, LOGO_URL } from '../lib/brand'
+import { OIDC_ONLY, FIXED_CENTER, DEFAULT_CENTER, rememberOidcCenter } from '../lib/runtime-env'
+import { oidcStatusCenter } from '../lib/center-auth-client'
+
+export default function LoginPage() {
+  const navigate = useNavigate()
+  const { login, isAuthed, session } = useAuth()
+  const [centerApiBase, setCenterApiBase] = useState(FIXED_CENTER || DEFAULT_CENTER)
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+  const [oidcEnabled, setOidcEnabled] = useState(false)
+
+  useEffect(() => {
+    let alive = true
+    oidcStatusCenter(centerApiBase.trim()).then((s) => {
+      if (alive) setOidcEnabled(s.enabled)
+    })
+    return () => {
+      alive = false
+    }
+  }, [centerApiBase])
+
+  async function onSubmit(e: FormEvent) {
+    e.preventDefault()
+    setError('')
+    try {
+      await login(centerApiBase.trim(), email, password)
+      navigate('/workspace')
+    } catch {
+      setError('Login failed. Please check your email and password.')
+    }
+  }
+
+  function startOidc() {
+    const base = centerApiBase.trim().replace(/\/$/, '')
+    rememberOidcCenter(base)
+    window.location.href = `${base}/auth/oidc/start`
+  }
+
+  const showPasswordForm = !OIDC_ONLY
+  const showCenterInput = !FIXED_CENTER
+
+  return (
+    <div className="login-screen">
+      <div className="login-card">
+        {LOGO_URL ? (
+          <img className="brand-logo" src={LOGO_URL} alt={APP_NAME} />
+        ) : (
+          <div className="brand-wordmark">{APP_NAME}</div>
+        )}
+        <h1>Welcome back</h1>
+        <p className="login-sub">
+          {isAuthed ? `Signed in as ${session?.user.email}` : `Sign in to continue to ${APP_NAME}`}
+        </p>
+
+        {showCenterInput ? (
+          <div className="field">
+            <label>Center API Base</label>
+            <input
+              className="input"
+              value={centerApiBase}
+              onChange={(e) => setCenterApiBase(e.target.value)}
+              placeholder="http://localhost:7001/api"
+            />
+          </div>
+        ) : null}
+
+        {oidcEnabled ? (
+          <button className="btn" type="button" onClick={startOidc} style={{ width: '100%' }}>
+            Sign in with SSO
+          </button>
+        ) : null}
+
+        {OIDC_ONLY && !oidcEnabled ? (
+          <p className="error-text" style={{ marginTop: 12 }}>
+            SSO is not configured on this Center yet.
+          </p>
+        ) : null}
+
+        {showPasswordForm ? (
+          <>
+            {oidcEnabled ? <div className="login-or">or</div> : null}
+            <form onSubmit={onSubmit}>
+              <div className="field">
+                <label>Email</label>
+                <input
+                  className="input"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  placeholder="you@example.com"
+                  type="email"
+                />
+              </div>
+              <div className="field">
+                <label>Password</label>
+                <input
+                  className="input"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  placeholder="••••••••"
+                  type="password"
+                />
+              </div>
+              {error ? <p className="error-text" style={{ marginBottom: 12 }}>{error}</p> : null}
+              <button className="btn" type="submit">Sign in</button>
+            </form>
+          </>
+        ) : error ? (
+          <p className="error-text" style={{ marginTop: 12 }}>{error}</p>
+        ) : null}
+      </div>
+    </div>
+  )
+}

src/pages/OidcCallback.tsx

@@ -0,0 +1,66 @@
+import { useEffect, useRef, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { useAuth } from '../auth/auth-context'
+import { APP_NAME } from '../lib/brand'
+import { resolveCenterBase } from '../lib/runtime-env'
+import { oidcExchangeCenter } from '../lib/center-auth-client'
+
+// Landing route for the OIDC redirect: Center bounces the browser here
+// with #oidc_ticket=... (or #oidc_error=...). We redeem the one-time
+// ticket for a full session and adopt it.
+export default function OidcCallback() {
+  const navigate = useNavigate()
+  const { adoptSession } = useAuth()
+  const [error, setError] = useState('')
+  const ran = useRef(false)
+
+  useEffect(() => {
+    if (ran.current) return
+    ran.current = true
+
+    const hash = window.location.hash.replace(/^#/, '')
+    const params = new URLSearchParams(hash)
+    const ticket = params.get('oidc_ticket')
+    const errParam = params.get('oidc_error')
+    // scrub the fragment so the ticket isn't left in the URL/history
+    window.history.replaceState(null, '', window.location.pathname)
+
+    if (errParam) {
+      setError(decodeURIComponent(errParam))
+      return
+    }
+    if (!ticket) {
+      setError('Missing OIDC ticket.')
+      return
+    }
+
+    oidcExchangeCenter(resolveCenterBase(), ticket)
+      .then((next) => {
+        adoptSession(next)
+        navigate('/workspace', { replace: true })
+      })
+      .catch(() => setError('SSO sign-in failed. The ticket may have expired — please try again.'))
+  }, [adoptSession, navigate])
+
+  return (
+    <div className="login-screen">
+      <div className="login-card">
+        <div className="brand-wordmark">{APP_NAME}</div>
+        {error ? (
+          <>
+            <h1>Sign-in failed</h1>
+            <p className="error-text" style={{ marginBottom: 16 }}>{error}</p>
+            <button className="btn" type="button" onClick={() => navigate('/login', { replace: true })}>
+              Back to sign in
+            </button>
+          </>
+        ) : (
+          <>
+            <h1>Signing you in…</h1>
+            <p className="login-sub">Completing SSO authentication.</p>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}

src/pages/WorkspacePage.tsx

@@ -0,0 +1,84 @@
+import axios from 'axios'
+import { useMemo, useState } from 'react'
+import { Link } from 'react-router-dom'
+import { useAuth } from '../auth/auth-context'
+
+export default function WorkspacePage() {
+  const { session } = useAuth()
+  const [health, setHealth] = useState('')
+  const [channelsByGuild, setChannelsByGuild] = useState<Record<string, Array<{ id: string; name: string }>>>({})
+
+  const tokenByGuild = useMemo(() => {
+    const map: Record<string, string> = {}
+    for (const item of session?.guildAccessTokens ?? []) {
+      map[item.guildNodeId] = item.token
+    }
+    return map
+  }, [session])
+
+  async function checkCenterHealth() {
+    if (!session) return
+    try {
+      const res = await axios.get(`${session.centerApiBase}/healthz`)
+      setHealth(JSON.stringify(res.data))
+    } catch {
+      setHealth('Failed to access center healthz')
+    }
+  }
+
+  async function loadChannels(nodeId: string, endpoint: string) {
+    const token = tokenByGuild[nodeId]
+    if (!token) {
+      setChannelsByGuild((prev) => ({ ...prev, [nodeId]: [] }))
+      return
+    }
+
+    try {
+      const res = await axios.get(`${endpoint}/api/channels`, {
+        headers: { Authorization: `Bearer ${token}` },
+      })
+      const list = Array.isArray(res.data) ? res.data : []
+      setChannelsByGuild((prev) => ({ ...prev, [nodeId]: list }))
+    } catch {
+      setChannelsByGuild((prev) => ({ ...prev, [nodeId]: [] }))
+    }
+  }
+
+  return (
+    <section className="panel">
+      <h2>Workspace</h2>
+      <p className="muted">Center: {session?.centerApiBase || '-'}</p>
+      <div style={{ marginBottom: 12 }}>
+        <button className="btn" type="button" onClick={checkCenterHealth}>
+          Test Center healthz
+        </button>
+      </div>
+      {health ? <p className="muted">{health}</p> : null}
+
+      <ul className="list-reset">
+        {(session?.guilds ?? []).map((g) => (
+          <li key={g.nodeId} className="card" style={{ marginTop: 12 }}>
+            <div>
+              <strong>{g.name}</strong> <span className="muted">({g.nodeId})</span>
+            </div>
+            <div className="muted">{g.endpoint}</div>
+            <button className="btn btn-secondary" type="button" onClick={() => loadChannels(g.nodeId, g.endpoint)}>
+              Load channels
+            </button>
+            <ul className="list-reset" style={{ marginTop: 10 }}>
+              {(channelsByGuild[g.nodeId] ?? []).map((c) => (
+                <li key={c.id} style={{ marginTop: 6 }}>
+                  <Link
+                    to={`/chat?guildId=${encodeURIComponent(g.nodeId)}&channelId=${encodeURIComponent(c.id)}`}
+                  >
+                    #{c.name}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </li>
+        ))}
+      </ul>
+    </section>
+  )
+}

tsconfig.app.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023", "DOM"],
+    "module": "esnext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

tsconfig.node.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023"],
+    "module": "esnext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}

vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})