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>

.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

@@ -5,11 +5,28 @@ 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)
+- **Auth** — login screen with a configurable Center API base
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+  (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).
+```bash
-
+npm install
-## Expanding the ESLint configuration
+npm run dev          # Vite dev server (http://localhost:5173)
-
-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...
-    },
-  },
-])
 ```
 
-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
+```bash
-// eslint.config.js
+npm run build          # web build (absolute base) -> dist/
-import reactX from 'eslint-plugin-react-x'
+npm run build:desktop  # relative-base build -> dist-desktop/  (Electron, file://)
-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...
-    },
-  },
-])
 ```
+
+`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 "$@"

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,6 +3,7 @@ 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 (
@@ -26,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

@@ -18,6 +18,11 @@ export function AuthProvider({ children }: PropsWithChildren) {
         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 {

src/auth/auth-context.ts

@@ -5,6 +5,7 @@ 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>

src/index.css

@@ -1,28 +1,32 @@
 :root {
-  --rail: #18191c;
+  /* Cryptic lab terminal: deep "blueprint" ink surfaces, monospace
-  --side: #1f2125;
+     everything, restrained motion. Accent stays Fabric purple. */
-  --main: #26282d;
+  --ink: #080a0d;
-  --elevated: #1a1b1e;
+  --rail: #0b0e12;
-  --input: #1a1b1e;
+  --side: #0f141b;
-  --hover: rgba(255, 255, 255, 0.04);
+  --main: #0a0d12;
-  --active: rgba(168, 85, 247, 0.16);
+  --elevated: #11161d;
+  --input: #0b0e12;
+  --hover: rgba(168, 85, 247, 0.1);
+  --active: rgba(168, 85, 247, 0.18);
 
-  --text: #dbdee1;
+  --text: #c7d0dc;
-  --text-muted: #949ba4;
+  --text-muted: #6f7d92;
-  --text-faint: #6d7178;
+  --text-faint: #4f5b6b;
-  --text-h: #f2f3f5;
+  --text-h: #e9f0fa;
 
-  --border: #303237;
+  --border: #1d2733;
   --accent: #a855f7;
   --accent-strong: #9333ea;
-  --accent-soft: rgba(168, 85, 247, 0.14);
+  --accent-soft: rgba(168, 85, 247, 0.16);
-  --danger: #f23f42;
+  --danger: #ff5a52;
   --online: #23a55a;
 
-  --radius: 10px;
+  --radius: 12px;
-  --radius-sm: 7px;
+  --radius-sm: 8px;
-  --sans: 'Inter', system-ui, 'Segoe UI', Roboto, sans-serif;
+  --display: 'Major Mono Display', ui-monospace, monospace;
-  --mono: ui-monospace, 'SF Mono', Consolas, monospace;
+  --sans: 'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace;
+  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace;
 
   color-scheme: dark;
   font-synthesis: none;
@@ -198,6 +202,27 @@ button {
   padding: 32px;
   box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.6);
 }
+.brand-wordmark {
+  font-family: var(--display);
+  text-transform: lowercase;
+  font-size: 30px;
+  color: var(--accent);
+  text-shadow: 0 0 32px rgba(168, 85, 247, 0.4);
+  margin-bottom: 18px;
+}
+.brand-logo {
+  max-height: 44px;
+  width: auto;
+  margin-bottom: 18px;
+}
+.login-or {
+  text-align: center;
+  color: var(--text-faint);
+  font-size: 11px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  margin: 14px 0;
+}
 .login-card h1 {
   font-size: 24px;
   margin-bottom: 4px;
@@ -415,6 +440,20 @@ button {
 .chan-btn.xt-custom {
   --xt: #c084fc;
 }
+.chan-btn.xt-dm {
+  --xt: #a855f7;
+}
+/* x-type group headers in the channel sidebar */
+.dc-chan-group {
+  margin-bottom: 6px;
+}
+.dc-group-label {
+  font-size: 10px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--text-faint);
+  padding: 8px 8px 4px;
+}
 .chan-tag {
   margin-left: auto;
   font-size: 10px;
@@ -864,3 +903,219 @@ button {
   cursor: not-allowed;
   background: none;
 }
+
+/* ---- canvas (pinned document) ---- */
+.dc-canvas {
+  border-bottom: 1px solid var(--border);
+  background: var(--elevated);
+  display: flex;
+  flex-direction: column;
+  max-height: 46vh;
+}
+.dc-canvas-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 14px;
+  border-bottom: 1px solid var(--border);
+}
+.dc-canvas-head .cv-title {
+  font-weight: 600;
+  color: var(--text-h);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 40%;
+}
+.dc-canvas-head .cv-meta {
+  font-size: 12px;
+  color: var(--text-faint);
+  white-space: nowrap;
+}
+.dc-canvas-head .spacer {
+  flex: 1;
+}
+.dc-canvas-body {
+  overflow: auto;
+  padding: 14px 16px;
+}
+.dc-canvas-body .cv-frame {
+  width: 100%;
+  min-height: 320px;
+  border: 0;
+  background: #fff;
+  border-radius: var(--radius-sm);
+}
+.dc-canvas-body .cv-text {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-family: var(--mono);
+  font-size: 13px;
+  color: var(--text);
+}
+.dc-canvas-body .cv-md {
+  font-size: 14px;
+}
+
+/* ---- message attachments ---- */
+.attachments {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 6px;
+}
+.att-img {
+  max-width: 320px;
+  max-height: 240px;
+  border-radius: var(--radius-sm);
+  display: block;
+}
+.att-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: var(--input);
+  border: 1px solid var(--border);
+  color: var(--text);
+  font-size: 13px;
+  padding: 6px 10px;
+  border-radius: var(--radius-sm);
+  text-decoration: none;
+}
+.att-chip:hover {
+  border-color: var(--accent);
+}
+.pf-x {
+  background: none;
+  border: 0;
+  color: var(--text-faint);
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 1;
+  padding: 0 2px;
+}
+.pf-x:hover {
+  color: var(--danger);
+}
+
+/* ---- composer with attachments ---- */
+.dc-composer-wrap {
+  display: flex;
+  flex-direction: column;
+  border-top: 1px solid var(--border);
+}
+.pending-files {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 8px 14px 0;
+}
+.dc-composer-wrap .dc-composer {
+  border-top: 0;
+}
+.attach-btn {
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+}
+.attach-btn[aria-disabled='true'] {
+  opacity: 0.4;
+  pointer-events: none;
+}
+textarea.canvas-src {
+  width: 100%;
+  resize: vertical;
+  font-family: var(--mono);
+  font-size: 13px;
+  line-height: 1.5;
+}
+.modal-card.modal-wide {
+  max-width: 720px;
+  width: 92vw;
+}
+
+/* ---- slash command autocomplete ---- */
+.slash-panel {
+  border: 1px solid var(--border);
+  border-bottom: 0;
+  background: var(--elevated);
+  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
+  max-height: 320px;
+  overflow: auto;
+  padding: 6px;
+}
+.slash-panel .slash-hint {
+  font-size: 11px;
+  color: var(--text-faint);
+  padding: 4px 8px 6px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.slash-item {
+  display: flex;
+  gap: 10px;
+  align-items: baseline;
+  width: 100%;
+  text-align: left;
+  background: none;
+  border: 0;
+  color: var(--text);
+  padding: 7px 8px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+.slash-item.sel,
+.slash-item:hover {
+  background: var(--accent-soft);
+}
+.slash-item .sc-name {
+  font-family: var(--mono);
+  font-size: 13px;
+  color: var(--text-h);
+  white-space: nowrap;
+}
+.sc-desc {
+  font-size: 12px;
+  color: var(--text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.slash-arg {
+  padding: 6px 8px;
+  border-top: 1px solid var(--border);
+}
+.slash-arg .sa-name {
+  font-family: var(--mono);
+  font-size: 13px;
+  color: var(--text-h);
+}
+.slash-arg .sa-req {
+  color: var(--danger);
+  margin-left: 1px;
+}
+.slash-arg .sa-type {
+  font-size: 11px;
+  color: var(--text-faint);
+  margin: 0 8px;
+}
+.sa-choices {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 6px;
+}
+.sa-choice {
+  font-size: 12px;
+  background: var(--input);
+  border: 1px solid var(--border);
+  color: var(--text);
+  padding: 3px 8px;
+  border-radius: 999px;
+  cursor: pointer;
+}
+.sa-choice:hover {
+  border-color: var(--accent);
+  color: var(--text-h);
+}

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

@@ -82,6 +82,20 @@ export async function guildMembersCenter(
   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,

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/ChatPage.tsx

@@ -1,10 +1,18 @@
 import axios from 'axios'
 import { io, type Socket } from 'socket.io-client'
-import { useEffect, useMemo, useState, type MouseEvent as ReactMouseEvent } from 'react'
+import {
+  useEffect,
+  useMemo,
+  useState,
+  type MouseEvent as ReactMouseEvent,
+  type KeyboardEvent as ReactKeyboardEvent,
+} from 'react'
 import { useAuth } from '../auth/auth-context'
 import { renderMarkdown } from '../lib/markdown'
+import { APP_NAME } from '../lib/brand'
 import { guildMembersCenter, joinGuildCenter } from '../lib/center-auth-client'
 
+type Attachment = { url: string; name?: string; mimeType?: string }
 type MessageItem = {
   messageId: string
   seq: number
@@ -12,11 +20,40 @@ type MessageItem = {
   isDeleted?: boolean
   authorUserId?: string
   createdAt?: string
+  attachments?: Attachment[]
   // per-push metadata (only present on socket-delivered messages); the app is
   // normally metadata-agnostic — only surfaced in developer mode
   wakeup?: boolean
 }
 
+type CanvasFormat = 'md' | 'html' | 'text'
+type SlashArg = {
+  name: string
+  description: string
+  type: string
+  required: boolean
+  captureRemaining: boolean
+  choices: Array<{ value: string; label: string }> | null
+}
+type SlashCommand = {
+  name: string
+  nativeName: string
+  description: string
+  acceptsArgs: boolean
+  args: SlashArg[]
+  argsParsing: string
+}
+
+type CanvasDoc = {
+  channelId: string
+  sharerUserId: string
+  title: string
+  format: CanvasFormat
+  source: string
+  version: number
+  updatedAt: string
+}
+
 const DEV_KEY = 'fabric.debug'
 
 function initials(s: string): string {
@@ -31,7 +68,13 @@ function timeOf(iso?: string): string {
   return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
 }
 
-const X_TYPES = ['general', 'work', 'report', 'discuss', 'triage', 'custom'] as const
+const X_TYPES = ['general', 'work', 'report', 'discuss', 'triage', 'custom', 'dm'] as const
+// display order + labels for the x-type-grouped channel sidebar
+const XTYPE_ORDER = ['general', 'work', 'report', 'discuss', 'triage', 'custom', 'dm'] as const
+const XTYPE_LABEL: Record<string, string> = {
+  general: 'General', work: 'Work', report: 'Report',
+  discuss: 'Discussion', triage: 'Triage', custom: 'Custom', dm: 'Direct Messages',
+}
 type XType = (typeof X_TYPES)[number]
 
 type GuildChannel = { id: string; name: string; guildId?: string; xType?: XType; isMember?: boolean; isPublic?: boolean; closed?: boolean }
@@ -70,6 +113,17 @@ export default function ChatPage() {
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState('')
   const [ctxMenu, setCtxMenu] = useState<CtxMenu | null>(null)
+  const [pendingFiles, setPendingFiles] = useState<File[]>([])
+  const [uploading, setUploading] = useState(false)
+  const [canvas, setCanvas] = useState<CanvasDoc | null>(null)
+  const [canvasCollapsed, setCanvasCollapsed] = useState(false)
+  const [showCanvasModal, setShowCanvasModal] = useState(false)
+  const [canvasTitle, setCanvasTitle] = useState('')
+  const [canvasFormat, setCanvasFormat] = useState<CanvasFormat>('md')
+  const [canvasSource, setCanvasSource] = useState('')
+  const [canvasEditMode, setCanvasEditMode] = useState(false)
+  const [slashCmds, setSlashCmds] = useState<SlashCommand[]>([])
+  const [slashSel, setSlashSel] = useState(0)
 
   function openCtx(e: ReactMouseEvent, title: string, items: MenuItem[]) {
     e.preventDefault()
@@ -212,18 +266,107 @@ export default function ChatPage() {
     }
   }
 
+  async function uploadFile(file: File): Promise<Attachment> {
+    const form = new FormData()
+    form.append('file', file)
+    const res = await guildApi().post(
+      `/files?channelId=${encodeURIComponent(selectedChannelId)}`,
+      form,
+    )
+    return { url: res.data.url as string, name: res.data.name as string, mimeType: res.data.mimeType as string }
+  }
+
   async function sendMessage() {
-    if (!selectedChannelId || !content.trim() || !guild || !guildToken) return
+    if (!selectedChannelId || !guild || !guildToken) return
+    if (!content.trim() && pendingFiles.length === 0) return
     setError('')
+    setUploading(true)
     try {
+      const attachments: Attachment[] = []
+      for (const f of pendingFiles) attachments.push(await uploadFile(f))
       await guildApi().post(`/channels/${selectedChannelId}/messages`, {
-        content,
+        content: content.trim() || (attachments.length ? `[${attachments.length} file(s)]` : ''),
         authorUserId: session?.user.id ?? 'unknown',
+        attachments,
       })
       setContent('')
+      setPendingFiles([])
       await pullMessages()
     } catch {
       setError('Failed to send message')
+    } finally {
+      setUploading(false)
+    }
+  }
+
+  // ---- canvas (single pinned document per channel) ----
+  async function loadCanvas() {
+    if (!guild || !guildToken || !selectedChannelId) {
+      setCanvas(null)
+      return
+    }
+    try {
+      const res = await guildApi().get(`/channels/${selectedChannelId}/canvas`)
+      setCanvas(res.data && res.data.channelId ? (res.data as CanvasDoc) : null)
+    } catch {
+      setCanvas(null)
+    }
+  }
+
+  async function loadCommands() {
+    if (!guild || !guildToken) {
+      setSlashCmds([])
+      return
+    }
+    try {
+      const res = await guildApi().get('/commands')
+      const list = Array.isArray(res.data?.commands) ? (res.data.commands as SlashCommand[]) : []
+      setSlashCmds(list)
+    } catch {
+      setSlashCmds([])
+    }
+  }
+
+  function openCanvasShare() {
+    setCanvasEditMode(false)
+    setCanvasTitle('')
+    setCanvasFormat('md')
+    setCanvasSource('')
+    setShowCanvasModal(true)
+  }
+
+  function openCanvasEdit() {
+    if (!canvas) return
+    setCanvasEditMode(true)
+    setCanvasTitle(canvas.title)
+    setCanvasFormat(canvas.format)
+    setCanvasSource(canvas.source)
+    setShowCanvasModal(true)
+  }
+
+  async function submitCanvas() {
+    if (!guild || !guildToken || !selectedChannelId) return
+    const body = { title: canvasTitle, format: canvasFormat, source: canvasSource }
+    try {
+      if (canvasEditMode) {
+        await guildApi().patch(`/channels/${selectedChannelId}/canvas`, body)
+      } else {
+        await guildApi().put(`/channels/${selectedChannelId}/canvas`, body)
+      }
+      setShowCanvasModal(false)
+      await loadCanvas()
+    } catch {
+      setError(canvasEditMode ? 'Failed to update canvas' : 'Failed to share canvas')
+    }
+  }
+
+  async function removeCanvas() {
+    if (!guild || !guildToken || !selectedChannelId) return
+    try {
+      await guildApi().delete(`/channels/${selectedChannelId}/canvas`)
+      setCanvas(null)
+    } catch {
+      setError('Failed to remove canvas')
     }
   }
 
@@ -276,13 +419,17 @@ export default function ChatPage() {
       setError('Triage channels require an on-duty user')
       return
     }
+    if (newChannelXType === 'dm' && selectedMemberIds.length !== 1) {
+      setError('A DM needs exactly one other participant')
+      return
+    }
     setError('')
     try {
       const payload = {
         name: newChannelName.trim(),
         guildId: effectiveGuildId,
         xType: newChannelXType,
-        isPublic: newChannelPublic,
+        isPublic: newChannelXType === 'dm' ? false : newChannelPublic,
         memberUserIds: selectedMemberIds,
         onDuty: newChannelXType === 'triage' ? newChannelOnDuty : undefined,
         listeners: newChannelXType === 'custom' ? newChannelListeners : [],
@@ -308,6 +455,33 @@ export default function ChatPage() {
     }
   }
 
+  // DM channels are not unique: this always creates a fresh 1:1 dm channel
+  // between the current user and `m` (private; no rotation/wakeup).
+  async function createDmChannel(m: { userId: string; name?: string; email?: string }) {
+    if (!guild || !guildToken) return
+    const effectiveGuildId = guildDbId || selectedGuildId
+    if (!effectiveGuildId) {
+      setError('Cannot create DM: no guild selected')
+      return
+    }
+    const label = m.name || m.email || m.userId.slice(0, 8)
+    setError('')
+    try {
+      const res = await guildApi().post('/channels', {
+        name: `DM · ${label}`,
+        guildId: effectiveGuildId,
+        xType: 'dm',
+        isPublic: false,
+        memberUserIds: [m.userId],
+      })
+      const createdId = res.data?.id as string | undefined
+      await loadChannels()
+      if (createdId) setSelectedChannelId(createdId)
+    } catch {
+      setError('Failed to create DM channel')
+    }
+  }
+
   async function joinChannel(c: GuildChannel) {
     if (!guild || !guildToken) return
     try {
@@ -393,6 +567,7 @@ export default function ChatPage() {
 
   useEffect(() => {
     void loadChannels()
+    void loadCommands()
     setMessages([])
     setSelectedChannelId('')
   }, [selectedGuildId, guildDbId, guildToken])
@@ -400,6 +575,9 @@ export default function ChatPage() {
   useEffect(() => {
     void pullMessages()
     void loadChannelMembers()
+    void loadCanvas()
+    setPendingFiles([])
+    setCanvasCollapsed(false)
   }, [selectedChannelId])
 
   useEffect(() => {
@@ -412,6 +590,12 @@ export default function ChatPage() {
     socket.on('message.deleted', (m: MessageItem) =>
       setMessages((prev) => prev.map((x) => (x.messageId === m.messageId ? { ...x, isDeleted: true, content: '[deleted]' } : x))),
     )
+    socket.on('canvas.updated', (c: CanvasDoc) => {
+      if (c.channelId === selectedChannelId) setCanvas(c)
+    })
+    socket.on('canvas.removed', (p: { channelId: string }) => {
+      if (p.channelId === selectedChannelId) setCanvas(null)
+    })
 
     socket.connect()
     socket.emit('join_channel', { channelId: selectedChannelId })
@@ -432,6 +616,12 @@ export default function ChatPage() {
       ? session?.user.name || session?.user.email || 'you'
       : nameById.get(id) || id.slice(0, 8)
 
+  // Browser <img>/<a> can't send Authorization; pass the guild token in the
+  // query (the guild ApiKeyGuard accepts ?access_token=).
+  const fileUrl = (u: string) =>
+    `${guild?.endpoint ?? ''}${u}${u.includes('?') ? '&' : '?'}access_token=${encodeURIComponent(guildToken)}`
+  const isCanvasSharer = !!canvas && canvas.sharerUserId === session?.user.id
+
   const guildById = new Map(members.map((m) => [m.userId, m]))
   const channelMembers = channelMemberIds.map(
     (id) => guildById.get(id) ?? { userId: id, email: '', name: '', status: 'active' },
@@ -492,6 +682,16 @@ export default function ChatPage() {
       items.push({ kind: 'item', label: 'Join channel', onClick: () => joinChannel(c) })
     if (!c.closed)
       items.push({ kind: 'item', label: 'Close channel', danger: true, onClick: () => closeChannel(c) })
+    if (c.id === selectedChannelId) {
+      items.push({ kind: 'sep' })
+      if (!canvas)
+        items.push({ kind: 'item', label: 'Share canvas…', onClick: openCanvasShare })
+      else if (isCanvasSharer)
+        items.push(
+          { kind: 'item', label: 'Edit canvas…', onClick: openCanvasEdit },
+          { kind: 'item', label: 'Remove canvas', danger: true, onClick: () => void removeCanvas() },
+        )
+    }
     items.push(
       { kind: 'sep' },
       { kind: 'item', label: 'Copy channel ID', onClick: () => copyText(c.id) },
@@ -538,6 +738,15 @@ export default function ChatPage() {
       { kind: 'item', label: 'Copy user ID', onClick: () => copyText(m.userId) },
       { kind: 'item', label: 'Copy name', onClick: () => copyText(label) },
     ]
+    if (!isSelf)
+      items.push(
+        { kind: 'sep' },
+        {
+          kind: 'item',
+          label: 'Create new DM channel',
+          onClick: () => void createDmChannel(m),
+        },
+      )
     if (inChannel && rotationChannel && !bypassMemberIds.includes(m.userId))
       items.push(
         { kind: 'sep' },
@@ -574,6 +783,16 @@ export default function ChatPage() {
           disabled: !selectedChannelId,
           onClick: () => void pullMessages(),
         },
+        {
+          kind: 'item',
+          label: canvas ? (isCanvasSharer ? 'Edit canvas…' : 'View canvas') : 'Share canvas…',
+          disabled: !selectedChannelId,
+          onClick: canvas
+            ? isCanvasSharer
+              ? openCanvasEdit
+              : () => setCanvasCollapsed(false)
+            : openCanvasShare,
+        },
       ]
     if (scope === 'members')
       return [
@@ -636,8 +855,119 @@ export default function ChatPage() {
     )
   }
 
+  // ---- slash-command autocomplete ----
+  const slashNameMatch = /^\/(\S*)$/.exec(content)
+  const slashQuery = slashNameMatch ? slashNameMatch[1].toLowerCase() : ''
+  const slashMatches =
+    slashNameMatch && content.startsWith('/')
+      ? slashCmds
+          .filter((c) => c.name.toLowerCase().includes(slashQuery))
+          .sort((a, b) => {
+            const ap = a.name.toLowerCase().startsWith(slashQuery) ? 0 : 1
+            const bp = b.name.toLowerCase().startsWith(slashQuery) ? 0 : 1
+            return ap - bp || a.name.localeCompare(b.name)
+          })
+          .slice(0, 8)
+      : []
+  const showSlashNames = slashMatches.length > 0
+  const slashArgMatch = /^\/(\S+)\s+/.exec(content)
+  const slashActiveCmd =
+    !slashNameMatch && slashArgMatch
+      ? slashCmds.find(
+          (c) => c.nativeName === slashArgMatch[1] || c.name === slashArgMatch[1],
+        ) ?? null
+      : null
+  const showSlashArgs = !!slashActiveCmd && slashActiveCmd.acceptsArgs
+
+  function pickSlash(cmd: SlashCommand) {
+    setContent(`/${cmd.nativeName} `)
+    setSlashSel(0)
+  }
+  function appendSlashValue(v: string) {
+    setContent((c) => `${c.replace(/\s*$/, '')} ${v} `)
+  }
+  function onComposerKey(e: ReactKeyboardEvent<HTMLInputElement>) {
+    if (!showSlashNames) return
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      setSlashSel((s) => Math.min(s + 1, slashMatches.length - 1))
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      setSlashSel((s) => Math.max(s - 1, 0))
+    } else if (e.key === 'Enter') {
+      e.preventDefault()
+      pickSlash(slashMatches[slashSel] ?? slashMatches[0])
+    } else if (e.key === 'Escape') {
+      e.preventDefault()
+      setContent('')
+    }
+  }
+
+  function renderSlashPanel() {
+    if (showSlashNames) {
+      return (
+        <div className="slash-panel">
+          <div className="slash-hint">commands · ↑↓ select · Enter pick · Esc clear</div>
+          {slashMatches.map((c, i) => (
+            <button
+              key={c.name}
+              type="button"
+              className={`slash-item ${i === slashSel ? 'sel' : ''}`}
+              onMouseEnter={() => setSlashSel(i)}
+              onClick={() => pickSlash(c)}
+            >
+              <span className="sc-name">/{c.nativeName}</span>
+              <span className="sc-desc">{c.description}</span>
+            </button>
+          ))}
+        </div>
+      )
+    }
+    if (showSlashArgs && slashActiveCmd) {
+      return (
+        <div className="slash-panel">
+          <div className="slash-hint">
+            /{slashActiveCmd.nativeName} — {slashActiveCmd.description}
+          </div>
+          {slashActiveCmd.args.length === 0 ? (
+            <div className="slash-arg">(no arguments)</div>
+          ) : (
+            slashActiveCmd.args.map((a) => (
+              <div key={a.name} className="slash-arg">
+                <div>
+                  <span className="sa-name">
+                    {a.name}
+                    {a.required ? <span className="sa-req">*</span> : null}
+                  </span>
+                  <span className="sa-type">{a.type}</span>
+                  <span className="sc-desc">{a.description}</span>
+                </div>
+                {a.choices && a.choices.length ? (
+                  <div className="sa-choices">
+                    {a.choices.slice(0, 24).map((ch) => (
+                      <button
+                        key={ch.value}
+                        type="button"
+                        className="sa-choice"
+                        onClick={() => appendSlashValue(ch.value)}
+                        title={ch.label}
+                      >
+                        {ch.label}
+                      </button>
+                    ))}
+                  </div>
+                ) : null}
+              </div>
+            ))
+          )}
+        </div>
+      )
+    }
+    return null
+  }
+
   return (
-    <div className="dc-shell" onContextMenu={(e) => openCtx(e, 'Fabric', blankMenu('root'))}>
+    <div className="dc-shell" onContextMenu={(e) => openCtx(e, APP_NAME, blankMenu('root'))}>
       <nav className="dc-rail" onContextMenu={(e) => openCtx(e, 'Guilds', blankMenu('guilds'))}>
         {guilds.map((g) => (
           <button
@@ -669,17 +999,25 @@ export default function ChatPage() {
             </button>
           </div>
           {channels.length ? (
-            channels.map((c) => (
+            XTYPE_ORDER.filter((xt) =>
-              <button
+              channels.some((c) => (c.xType ?? 'general') === xt),
-                key={c.id}
+            ).map((xt) => (
-                className={`chan-btn xt-${c.xType ?? 'general'} ${selectedChannelId === c.id ? 'active' : ''}`}
+              <div key={xt} className="dc-chan-group">
-                onClick={() => setSelectedChannelId(c.id)}
+                <div className="dc-group-label">{XTYPE_LABEL[xt] ?? xt}</div>
-                onContextMenu={(e) => openCtx(e, `#${c.name}`, channelMenu(c))}
+                {channels
-              >
+                  .filter((c) => (c.xType ?? 'general') === xt)
-                <span className="hash">#</span>
+                  .map((c) => (
-                <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{c.name}</span>
+                    <button
-                {c.xType ? <span className="chan-tag">{c.xType}</span> : null}
+                      key={c.id}
-              </button>
+                      className={`chan-btn xt-${c.xType ?? 'general'} ${selectedChannelId === c.id ? 'active' : ''}`}
+                      onClick={() => setSelectedChannelId(c.id)}
+                      onContextMenu={(e) => openCtx(e, `#${c.name}`, channelMenu(c))}
+                    >
+                      <span className="hash">#</span>
+                      <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{c.name}</span>
+                    </button>
+                  ))}
+              </div>
             ))
           ) : (
             <div className="dc-empty">{guild ? 'No channels yet' : 'Pick a guild from the left'}</div>
@@ -729,6 +1067,15 @@ export default function ChatPage() {
               </button>
             )
           ) : null}
+          {currentChannel ? (
+            <button
+              className="btn btn-secondary"
+              title="Share a pinned document in this channel"
+              onClick={canvas ? (isCanvasSharer ? openCanvasEdit : () => setCanvasCollapsed(false)) : openCanvasShare}
+            >
+              {canvas ? (isCanvasSharer ? 'Edit canvas' : 'Canvas') : 'Share canvas'}
+            </button>
+          ) : null}
           <button
             className="icon-btn"
             title={showMembers ? 'Hide members' : 'Show members'}
@@ -738,6 +1085,57 @@ export default function ChatPage() {
           </button>
         </header>
 
+        {canvas ? (
+          <section className="dc-canvas">
+            <div className="dc-canvas-head">
+              <span className="cv-title">🗎 {canvas.title}</span>
+              <span className="cv-meta">
+                shared by {authorLabel(canvas.sharerUserId)} · v{canvas.version} ·{' '}
+                {timeOf(canvas.updatedAt)}
+              </span>
+              <span className="spacer" />
+              {isCanvasSharer ? (
+                <>
+                  <button className="icon-btn" title="Edit canvas" onClick={openCanvasEdit}>
+                    ✎
+                  </button>
+                  <button className="icon-btn" title="Remove canvas" onClick={removeCanvas}>
+                    🗑
+                  </button>
+                </>
+              ) : null}
+              <button
+                className="icon-btn"
+                title={canvasCollapsed ? 'Expand' : 'Collapse'}
+                onClick={() => setCanvasCollapsed((v) => !v)}
+              >
+                {canvasCollapsed ? '▸' : '▾'}
+              </button>
+            </div>
+            {canvasCollapsed ? null : (
+              <div className="dc-canvas-body">
+                {canvas.format === 'html' ? (
+                  <iframe
+                    className="cv-frame"
+                    title={canvas.title}
+                    sandbox=""
+                    srcDoc={canvas.source}
+                  />
+                ) : canvas.format === 'text' ? (
+                  <pre className="cv-text">{canvas.source}</pre>
+                ) : (
+                  <div
+                    className="text md cv-md"
+                    dangerouslySetInnerHTML={{
+                      __html: renderMarkdown(canvas.source, { resolveMention: mentionName }),
+                    }}
+                  />
+                )}
+              </div>
+            )}
+          </section>
+        ) : null}
+
         <div
           className="dc-messages"
           onContextMenu={(e) => openCtx(e, 'Messages', blankMenu('messages'))}
@@ -769,6 +1167,29 @@ export default function ChatPage() {
                   className="text md"
                   dangerouslySetInnerHTML={{ __html: renderMarkdown(m.content, { resolveMention: mentionName }) }}
                 />
+                {!m.isDeleted && m.attachments && m.attachments.length ? (
+                  <div className="attachments">
+                    {m.attachments.map((a, ai) => {
+                      const isImg = (a.mimeType ?? '').startsWith('image/')
+                      const href = fileUrl(a.url)
+                      return isImg ? (
+                        <a key={ai} href={href} target="_blank" rel="noopener noreferrer">
+                          <img className="att-img" src={href} alt={a.name ?? 'image'} />
+                        </a>
+                      ) : (
+                        <a
+                          key={ai}
+                          className="att-chip"
+                          href={href}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                        >
+                          📎 {a.name ?? 'file'}
+                        </a>
+                      )
+                    })}
+                  </div>
+                ) : null}
                 {devMode ? (
                   <pre className="meta-raw">
 {JSON.stringify(
@@ -793,24 +1214,74 @@ export default function ChatPage() {
         {currentChannel?.closed ? (
           <div className="dc-closed-banner">This channel is closed — history is read-only.</div>
         ) : (
-          <form
+          <div className="dc-composer-wrap">
-            className="dc-composer"
+            {renderSlashPanel()}
-            onSubmit={(e) => {
+            {pendingFiles.length ? (
-              e.preventDefault()
+              <div className="pending-files">
-              void sendMessage()
+                {pendingFiles.map((f, fi) => (
-            }}
+                  <span key={fi} className="att-chip">
-          >
+                    📎 {f.name}
-            <input
+                    <button
-              className="input"
+                      type="button"
-              value={content}
+                      className="pf-x"
-              onChange={(e) => setContent(e.target.value)}
+                      title="Remove"
-              placeholder={currentChannel ? `Message #${currentChannel.name}` : 'Select a channel first'}
+                      onClick={() => setPendingFiles((prev) => prev.filter((_, j) => j !== fi))}
-              disabled={!currentChannel}
+                    >
-            />
+                      ×
-            <button className="btn" type="submit" disabled={!currentChannel || !content.trim()}>
+                    </button>
-              Send
+                  </span>
-            </button>
+                ))}
-          </form>
+              </div>
+            ) : null}
+            <form
+              className="dc-composer"
+              onSubmit={(e) => {
+                e.preventDefault()
+                void sendMessage()
+              }}
+            >
+              <label
+                className="icon-btn attach-btn"
+                title="Attach files"
+                aria-disabled={!currentChannel}
+              >
+                📎
+                <input
+                  type="file"
+                  multiple
+                  hidden
+                  disabled={!currentChannel}
+                  onChange={(e) => {
+                    const files = Array.from(e.target.files ?? [])
+                    if (files.length) setPendingFiles((prev) => [...prev, ...files])
+                    e.target.value = ''
+                  }}
+                />
+              </label>
+              <input
+                className="input"
+                value={content}
+                onChange={(e) => {
+                  setContent(e.target.value)
+                  setSlashSel(0)
+                }}
+                onKeyDown={onComposerKey}
+                placeholder={currentChannel ? `Message #${currentChannel.name}` : 'Select a channel first'}
+                disabled={!currentChannel}
+              />
+              <button
+                className="btn"
+                type="submit"
+                disabled={
+                  !currentChannel ||
+                  uploading ||
+                  (!content.trim() && pendingFiles.length === 0)
+                }
+              >
+                {uploading ? 'Sending…' : 'Send'}
+              </button>
+            </form>
+          </div>
         )}
       </main>
 
@@ -957,33 +1428,61 @@ export default function ChatPage() {
               </div>
             ) : null}
 
-            <label className="check-row" style={{ marginTop: 10 }}>
+            {newChannelXType === 'dm' ? (
-              <input type="checkbox" checked={newChannelPublic} onChange={(e) => setNewChannelPublic(e.target.checked)} />
+              <>
-              <span>Public — visible to all guild members</span>
+                <p className="muted" style={{ marginTop: 10, fontSize: 13 }}>
-            </label>
+                  Direct message — private 1:1, not unique. Pick exactly one user:
-            <p className="muted" style={{ marginTop: 8, fontSize: 13 }}>
+                </p>
-              {newChannelPublic
+                <div className="modal-list">
-                ? "You're added automatically; every guild member can see it."
+                  {members
-                : "You're added automatically. Pick who else to include:"}
+                    .filter((m) => m.userId !== session?.user.id)
-            </p>
+                    .map((m) => (
-            <div className="modal-list">
+                      <label key={m.userId} className="check-row">
-              {members
+                        <input
-                .filter((m) => m.userId !== session?.user.id)
+                          type="radio"
-                .map((m) => (
+                          name="dm-target"
-                  <label key={m.userId} className="check-row">
+                          checked={selectedMemberIds[0] === m.userId}
-                    <input
+                          onChange={() => setSelectedMemberIds([m.userId])}
-                      type="checkbox"
+                        />
-                      checked={selectedMemberIds.includes(m.userId)}
+                        <span>{m.name || m.email}</span>
-                      disabled={newChannelPublic}
+                      </label>
-                      onChange={() => toggleMember(m.userId)}
+                    ))}
-                    />
+                  {members.filter((m) => m.userId !== session?.user.id).length === 0 ? (
-                    <span>{m.name || m.email}</span>
+                    <div className="dc-empty">No other members in this guild.</div>
-                  </label>
+                  ) : null}
-                ))}
+                </div>
-              {members.filter((m) => m.userId !== session?.user.id).length === 0 ? (
+              </>
-                <div className="dc-empty">No other members in this guild.</div>
+            ) : (
-              ) : null}
+              <>
-            </div>
+                <label className="check-row" style={{ marginTop: 10 }}>
+                  <input type="checkbox" checked={newChannelPublic} onChange={(e) => setNewChannelPublic(e.target.checked)} />
+                  <span>Public — visible to all guild members</span>
+                </label>
+                <p className="muted" style={{ marginTop: 8, fontSize: 13 }}>
+                  {newChannelPublic
+                    ? "You're added automatically; every guild member can see it."
+                    : "You're added automatically. Pick who else to include:"}
+                </p>
+                <div className="modal-list">
+                  {members
+                    .filter((m) => m.userId !== session?.user.id)
+                    .map((m) => (
+                      <label key={m.userId} className="check-row">
+                        <input
+                          type="checkbox"
+                          checked={selectedMemberIds.includes(m.userId)}
+                          disabled={newChannelPublic}
+                          onChange={() => toggleMember(m.userId)}
+                        />
+                        <span>{m.name || m.email}</span>
+                      </label>
+                    ))}
+                  {members.filter((m) => m.userId !== session?.user.id).length === 0 ? (
+                    <div className="dc-empty">No other members in this guild.</div>
+                  ) : null}
+                </div>
+              </>
+            )}
             <div className="modal-actions">
               <button className="btn" onClick={createChannel}>Create</button>
               <button className="btn btn-secondary" onClick={() => setShowCreateChannelModal(false)}>Cancel</button>
@@ -1022,6 +1521,54 @@ export default function ChatPage() {
         </div>
       ) : null}
 
+      {showCanvasModal ? (
+        <div className="modal-backdrop" onClick={() => setShowCanvasModal(false)}>
+          <div className="modal-card modal-wide" onClick={(e) => e.stopPropagation()}>
+            <h3>{canvasEditMode ? 'Edit canvas' : 'Share canvas'}</h3>
+            <p className="muted" style={{ marginBottom: 10, fontSize: 13 }}>
+              A single pinned document per channel. Only you (the sharer) can
+              update it. HTML is rendered in a sandboxed frame.
+            </p>
+            <input
+              className="input"
+              value={canvasTitle}
+              onChange={(e) => setCanvasTitle(e.target.value)}
+              placeholder="Document title"
+            />
+            <div className="field" style={{ marginTop: 10 }}>
+              <label>Format</label>
+              <select
+                className="input"
+                value={canvasFormat}
+                onChange={(e) => setCanvasFormat(e.target.value as CanvasFormat)}
+              >
+                <option value="md">Markdown</option>
+                <option value="html">HTML</option>
+                <option value="text">Plain text</option>
+              </select>
+            </div>
+            <div className="field" style={{ marginTop: 10 }}>
+              <label>Content</label>
+              <textarea
+                className="input canvas-src"
+                value={canvasSource}
+                onChange={(e) => setCanvasSource(e.target.value)}
+                placeholder="Document source…"
+                rows={14}
+              />
+            </div>
+            <div className="modal-actions">
+              <button className="btn" onClick={submitCanvas}>
+                {canvasEditMode ? 'Save' : 'Share'}
+              </button>
+              <button className="btn btn-secondary" onClick={() => setShowCanvasModal(false)}>
+                Cancel
+              </button>
+            </div>
+          </div>
+        </div>
+      ) : null}
+
       {error ? (
         <div className="modal-backdrop" onClick={() => setError('')}>
           <div className="modal-card" onClick={(e) => e.stopPropagation()}>

src/pages/LoginPage.tsx

@@ -1,15 +1,29 @@
-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('http://localhost:7001/api')
+  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()
@@ -22,14 +36,29 @@ export default function LoginPage() {
     }
   }
 
+  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 Fabric'}
+          {isAuthed ? `Signed in as ${session?.user.email}` : `Sign in to continue to ${APP_NAME}`}
         </p>
-        <form onSubmit={onSubmit}>
+
+        {showCenterInput ? (
           <div className="field">
             <label>Center API Base</label>
             <input
@@ -39,29 +68,51 @@ export default function LoginPage() {
               placeholder="http://localhost:7001/api"
             />
           </div>
-          <div className="field">
+        ) : null}
-            <label>Email</label>
+
-            <input
+        {oidcEnabled ? (
-              className="input"
+          <button className="btn" type="button" onClick={startOidc} style={{ width: '100%' }}>
-              value={email}
+            Sign in with SSO
-              onChange={(e) => setEmail(e.target.value)}
+          </button>
-              placeholder="you@example.com"
+        ) : null}
-              type="email"
+
-            />
+        {OIDC_ONLY && !oidcEnabled ? (
-          </div>
+          <p className="error-text" style={{ marginTop: 12 }}>
-          <div className="field">
+            SSO is not configured on this Center yet.
-            <label>Password</label>
+          </p>
-            <input
+        ) : null}
-              className="input"
+
-              value={password}
+        {showPasswordForm ? (
-              onChange={(e) => setPassword(e.target.value)}
+          <>
-              placeholder="••••••••"
+            {oidcEnabled ? <div className="login-or">or</div> : null}
-              type="password"
+            <form onSubmit={onSubmit}>
-            />
+              <div className="field">
-          </div>
+                <label>Email</label>
-          {error ? <p className="error-text" style={{ marginBottom: 12 }}>{error}</p> : null}
+                <input
-          <button className="btn" type="submit">Sign in</button>
+                  className="input"
-        </form>
+                  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>
+  )
+}