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

@@ -2,3 +2,8 @@ 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

@@ -22,3 +22,4 @@ dist-ssr
 *.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,73 +1,61 @@
-# React + TypeScript + Vite
+# Fabric.Frontend
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+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).
 
-Currently, two official plugins are available:
+## What it does
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+- **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`.
 
-## React Compiler
+## Develop
 
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
-
-```js
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-
-      // Remove tseslint.configs.recommended and replace with this
-      tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      tseslint.configs.stylisticTypeChecked,
-
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
+```bash
+npm install
+npm run dev          # Vite dev server (http://localhost:5173)
 ```
 
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+## Build
 
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
+```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;
+  }
+}

index.html

@@ -2,12 +2,25 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <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" />
-    <title>fabric-frontend</title>
+    <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

@@ -7,7 +7,8 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "build:desktop": "tsc -b && vite build --base=./ --outDir dist-desktop"
   },
   "dependencies": {
     "axios": "^1.16.0",

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>

src/App.tsx

@@ -3,7 +3,7 @@ import ProtectedRoute from './auth/ProtectedRoute'
 import AppLayout from './layouts/AppLayout'
 import ChatPage from './pages/ChatPage'
 import LoginPage from './pages/LoginPage'
-import WorkspacePage from './pages/WorkspacePage'
+import OidcCallback from './pages/OidcCallback'
 
 export default function App() {
   return (
@@ -14,7 +14,7 @@ export default function App() {
           path="workspace"
           element={
             <ProtectedRoute>
-              <WorkspacePage />
+              <ChatPage />
             </ProtectedRoute>
           }
         />
@@ -27,6 +27,7 @@ export default function App() {
           }
         />
         <Route path="login" element={<LoginPage />} />
+        <Route path="oidc" element={<OidcCallback />} />
       </Route>
       <Route path="*" element={<Navigate to="/workspace" replace />} />
     </Routes>

src/auth/AuthContext.tsx

@@ -2,7 +2,7 @@ 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, refreshCenter } from '../lib/center-auth-client'
+import { loginCenter, logoutCenter, meGuildsCenter, refreshCenter, updateMeNameCenter } from '../lib/center-auth-client'
 import { AuthContext } from './auth-context'
 import type { AuthContextValue } from './auth-context'
 
@@ -13,15 +13,20 @@ export function AuthProvider({ children }: PropsWithChildren) {
     () => ({
       session,
       isAuthed: !!session,
-      login: async (email: string, password: string) => {
-        const next = await loginCenter({ email, password })
+      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.refreshToken)
+            await logoutCenter(session.centerApiBase, session.refreshToken)
           } catch {
             // noop
           }
@@ -33,17 +38,61 @@ export function AuthProvider({ children }: PropsWithChildren) {
         if (!session) return null
         if (!isAccessTokenStale(session.accessToken)) return session.accessToken
 
-        const refreshed = await refreshCenter(session.refreshToken)
+        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],
   )

src/auth/auth-context.ts

@@ -4,9 +4,12 @@ import type { AuthSession } from '../lib/auth-storage'
 export type AuthContextValue = {
   session: AuthSession | null
   isAuthed: boolean
-  login: (email: string, password: string) => Promise<void>
+  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)

src/layouts/AppLayout.tsx

@@ -1,34 +1,5 @@
-import { Link, Outlet } from 'react-router-dom'
-import { useAuth } from '../auth/auth-context'
+import { Outlet } from 'react-router-dom'
 
 export default function AppLayout() {
-  const { isAuthed, session, logout } = useAuth()
-
-  return (
-    <div style={{ display: 'grid', gridTemplateColumns: '220px 1fr', minHeight: '100vh' }}>
-      <aside style={{ borderRight: '1px solid #ddd', padding: 16 }}>
-        <h3>Fabric</h3>
-        <nav style={{ display: 'grid', gap: 8 }}>
-          <Link to="/workspace">工作台</Link>
-          <Link to="/chat">聊天</Link>
-          <Link to="/login">登录</Link>
-        </nav>
-        <div style={{ marginTop: 16, fontSize: 12 }}>
-          {isAuthed ? (
-            <>
-              <div>{session?.user.email}</div>
-              <button onClick={() => logout()} style={{ marginTop: 6 }}>
-                登出
-              </button>
-            </>
-          ) : (
-            <span>未登录</span>
-          )}
-        </div>
-      </aside>
-      <main style={{ padding: 16 }}>
-        <Outlet />
-      </main>
-    </div>
-  )
+  return <Outlet />
 }

src/lib/api-client.ts

@@ -13,11 +13,44 @@ function createClient(): AxiosInstance {
 
   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'] = crypto.randomUUID()
+    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
 }
 

src/lib/auth-storage.ts

@@ -1,11 +1,26 @@
 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'

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

@@ -1,5 +1,4 @@
 import axios from 'axios'
-import { getRuntimeConfig } from './runtime-config'
 import type { AuthSession } from './auth-storage'
 
 export type LoginPayload = { email: string; password: string }
@@ -8,33 +7,104 @@ type LoginResponse = {
   accessToken: string
   refreshToken: string
   tokenType: string
-  user: { id: string; email: 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
 }
 
-function centerClient() {
-  const cfg = getRuntimeConfig()
-  return axios.create({
-    baseURL: cfg.centerApiBase,
+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(payload: LoginPayload): Promise<AuthSession> {
-  const res = await centerClient().post<LoginResponse>('/auth/login', payload)
+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 refreshCenter(refreshToken: string): Promise<RefreshResponse> {
-  const res = await centerClient().post<RefreshResponse>('/auth/refresh', { refreshToken })
+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 logoutCenter(refreshToken: string): Promise<void> {
-  await centerClient().post('/auth/logout', { refreshToken })
+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-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/main.tsx

@@ -1,16 +1,24 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import { BrowserRouter } from 'react-router-dom'
+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>
-    <BrowserRouter>
+    <Router>
       <AuthProvider>
         <App />
       </AuthProvider>
-    </BrowserRouter>
+    </Router>
   </StrictMode>,
 )

src/pages/LoginPage.tsx

@@ -1,41 +1,119 @@
-import { useState } from 'react'
+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(email, password)
+      await login(centerApiBase.trim(), email, password)
       navigate('/workspace')
     } catch {
-      setError('登录失败，请检查账号密码')
+      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 (
-    <section>
-      <h2>登录</h2>
-      {isAuthed ? <p>当前用户：{session?.user.email}</p> : null}
-      <form onSubmit={onSubmit} style={{ display: 'grid', gap: 8, maxWidth: 420 }}>
-        <input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" type="email" />
-        <input
-          value={password}
-          onChange={(e) => setPassword(e.target.value)}
-          placeholder="Password"
-          type="password"
-        />
-        <button type="submit">登录</button>
-      </form>
-      <p>{error}</p>
-    </section>
+    <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

@@ -1,106 +1,76 @@
-import { useState } from 'react'
-import type { FormEvent } from 'react'
+import axios from 'axios'
+import { useMemo, useState } from 'react'
 import { Link } from 'react-router-dom'
-import { getApiClient, resetApiClient } from '../lib/api-client'
-import {
-  getRuntimeConfig,
-  setRuntimeConfig,
-} from '../lib/runtime-config'
-import type { RuntimeConfig } from '../lib/runtime-config'
-import { reconnectSocket } from '../lib/socket-client'
+import { useAuth } from '../auth/auth-context'
 
 export default function WorkspacePage() {
-  const [form, setForm] = useState<RuntimeConfig>(getRuntimeConfig())
+  const { session } = useAuth()
   const [health, setHealth] = useState('')
-  const [guilds, setGuilds] = useState<Array<{ id: string; name: string; slug: string }>>([])
   const [channelsByGuild, setChannelsByGuild] = useState<Record<string, Array<{ id: string; name: string }>>>({})
 
-  async function onSave(e: FormEvent) {
-    e.preventDefault()
-    setRuntimeConfig(form)
-    resetApiClient()
-    reconnectSocket()
-    setHealth('配置已保存')
-  }
+  const tokenByGuild = useMemo(() => {
+    const map: Record<string, string> = {}
+    for (const item of session?.guildAccessTokens ?? []) {
+      map[item.guildNodeId] = item.token
+    }
+    return map
+  }, [session])
 
-  async function checkHealth() {
+  async function checkCenterHealth() {
+    if (!session) return
     try {
-      const res = await getApiClient().get('/healthz')
+      const res = await axios.get(`${session.centerApiBase}/healthz`)
       setHealth(JSON.stringify(res.data))
     } catch {
-      setHealth('healthz 访问失败')
+      setHealth('Failed to access center healthz')
     }
   }
 
-  async function loadGuilds() {
-    try {
-      const res = await getApiClient().get('/guilds')
-      const list = Array.isArray(res.data) ? res.data : []
-      setGuilds(list)
-    } catch {
-      setGuilds([])
+  async function loadChannels(nodeId: string, endpoint: string) {
+    const token = tokenByGuild[nodeId]
+    if (!token) {
+      setChannelsByGuild((prev) => ({ ...prev, [nodeId]: [] }))
+      return
     }
-  }
 
-  async function loadChannels(guildId: string) {
     try {
-      const res = await getApiClient().get('/channels', { params: { guildId } })
+      const res = await axios.get(`${endpoint}/api/channels`, {
+        headers: { Authorization: `Bearer ${token}` },
+      })
       const list = Array.isArray(res.data) ? res.data : []
-      setChannelsByGuild((prev) => ({ ...prev, [guildId]: list }))
+      setChannelsByGuild((prev) => ({ ...prev, [nodeId]: list }))
     } catch {
-      setChannelsByGuild((prev) => ({ ...prev, [guildId]: [] }))
+      setChannelsByGuild((prev) => ({ ...prev, [nodeId]: [] }))
     }
   }
 
   return (
-    <section>
-      <h2>工作台</h2>
-      <form onSubmit={onSave} style={{ display: 'grid', gap: 8, maxWidth: 760 }}>
-        <input
-          value={form.centerApiBase}
-          onChange={(e) => setForm((v) => ({ ...v, centerApiBase: e.target.value }))}
-          placeholder="Center API Base"
-        />
-        <input
-          value={form.guildApiBase}
-          onChange={(e) => setForm((v) => ({ ...v, guildApiBase: e.target.value }))}
-          placeholder="Guild API Base"
-        />
-        <input
-          value={form.guildSocketBase}
-          onChange={(e) => setForm((v) => ({ ...v, guildSocketBase: e.target.value }))}
-          placeholder="Guild Socket Base"
-        />
-        <input
-          value={form.apiKey}
-          onChange={(e) => setForm((v) => ({ ...v, apiKey: e.target.value }))}
-          placeholder="API Key"
-        />
-        <div style={{ display: 'flex', gap: 8 }}>
-          <button type="submit">保存配置</button>
-          <button type="button" onClick={checkHealth}>
-            测试 healthz
-          </button>
-        </div>
-      </form>
-      <p>{health}</p>
-      <div style={{ marginTop: 12 }}>
-        <button type="button" onClick={loadGuilds}>
-          加载 Guild 列表
+    <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>
-        {guilds.map((g) => (
-          <li key={g.id} style={{ marginTop: 8 }}>
-            <strong>{g.name}</strong> ({g.slug}){' '}
-            <button type="button" onClick={() => loadChannels(g.id)}>
-              加载频道
+      <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>
-              {(channelsByGuild[g.id] ?? []).map((c) => (
-                <li key={c.id}>
-                  <Link to={`/chat?guildId=${encodeURIComponent(g.id)}&channelId=${encodeURIComponent(c.id)}`}>
+            <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>