nav/Fabric.Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: nav:46cad0ec7cb60aa1d44d497f53f246ea39519d84
Branches Tags
nav:main
...
compare: nav:main
Branches Tags
nav:main

3 Commits
46cad0ec7c ... main

Author SHA1 Message Date
hzhang
607785ac0c 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>
 2026-05-18 10:02:14 +01:00
hzhang
92d3b4dc1b feat(frontend): OIDC login + runtime env (FABRIC_OIDC_ONLY/FIX_TO_CENTER) 
- Runtime container env injected by docker/entrypoint.sh -> runtime-env.js
  (loaded before the bundle); src/lib/runtime-env.ts reads it.
  FABRIC_OIDC_ONLY hides the password form; FIX_TO_CENTER pins the
  Center base and hides its input. Dockerfile ENTRYPOINT + ENV defaults.
- LoginPage: 'Sign in with SSO' when /auth/oidc/status enabled; password
  form gated by OIDC_ONLY; center input gated by FIX_TO_CENTER.
- /oidc route (OidcCallback) redeems the fragment ticket via
  /auth/oidc/exchange and adopts the session (AuthContext.adoptSession).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-05-18 09:44:49 +01:00
hzhang
4892af55e8 feat(frontend): terminal restyle + dm + grouping + brand override 
- Restyle: ink 'blueprint' surfaces + IBM Plex Mono / Major Mono
  Display, hairline borders, restrained motion, 12px radii. Fabric
  purple accent kept. Layout unchanged.
- Brand override (build-time VITE_ only): VITE_APP_NAME / VITE_LOGO_URL
  / VITE_FAVICON_URL via src/lib/brand.ts (applyBrand in main.tsx);
  login wordmark/logo + title + favicon. .env.example documented.
- dm x-type: create modal participant becomes single-select (radio)
  for dm and forces private; member right-click menu gains 'Create
  new DM channel' (non-unique, fresh channel each time).
- Channels sidebar grouped by x-type with group headers.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-05-18 09:18:21 +01:00
16 changed files with 503 additions and 87 deletions
Expand all files Collapse all files

5
.env.example
View File

@@ -2,3 +2,8 @@ VITE_CENTER_API_BASE=http://localhost:7001/api
VITE_GUILD_API_BASE=http://localhost:7002/api VITE_GUILD_API_BASE=http://localhost:7002/api
VITE_GUILD_SOCKET_BASE=http://localhost:7002/realtime VITE_GUILD_SOCKET_BASE=http://localhost:7002/realtime
VITE_API_KEY=change-me-api-key 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=

17
Dockerfile
View File

@@ -5,11 +5,28 @@ COPY package*.json ./
RUN npm ci RUN npm ci
COPY . . 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 RUN npm run build
FROM nginx:1.27-alpine AS runtime FROM nginx:1.27-alpine AS runtime
COPY docker/nginx.conf /etc/nginx/conf.d/default.conf 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 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 EXPOSE 80
ENTRYPOINT ["/docker-entrypoint-fabric.sh"]
CMD ["nginx", "-g", "daemon off;"] CMD ["nginx", "-g", "daemon off;"]

20
docker/entrypoint.sh Normal file
View File

@@ -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 "$@"

10
index.html
View File

@@ -8,11 +8,19 @@
<link rel="icon" type="image/png" sizes="256x256" href="/favicon.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" /> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=3" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#000000" /> <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> <title>Fabric</title>
</head> </head>
<body> <body>
<div id="root"></div> <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> <script type="module" src="/src/main.tsx"></script>
</body> </body>
</html> </html>

44
public/brand-logo.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

2
src/App.tsx
View File

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

5
src/auth/AuthContext.tsx
View File

@@ -18,6 +18,11 @@ export function AuthProvider({ children }: PropsWithChildren) {
setAuthSession(next) setAuthSession(next)
setSession(next) setSession(next)
}, },
// Adopt a session obtained out-of-band (OIDC ticket exchange).
adoptSession: (next: AuthSession) => {
setAuthSession(next)
setSession(next)
},
logout: async () => { logout: async () => {
if (session?.refreshToken) { if (session?.refreshToken) {
try { try {

1
src/auth/auth-context.ts
View File

@@ -5,6 +5,7 @@ export type AuthContextValue = {
session: AuthSession | null session: AuthSession | null
isAuthed: boolean isAuthed: boolean
login: (centerApiBase: string, email: string, password: string) => Promise<void> login: (centerApiBase: string, email: string, password: string) => Promise<void>
adoptSession: (session: AuthSession) => void
logout: () => Promise<void> logout: () => Promise<void>
ensureFreshToken: () => Promise<string | null> ensureFreshToken: () => Promise<string | null>
refreshGuilds: () => Promise<void> refreshGuilds: () => Promise<void>

75
src/index.css
View File

@@ -1,28 +1,32 @@
:root { :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: #a855f7;
--accent-strong: #9333ea; --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; --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; color-scheme: dark;
font-synthesis: none; font-synthesis: none;
@@ -198,6 +202,27 @@ button {
padding: 32px; padding: 32px;
box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.6); 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 { .login-card h1 {
font-size: 24px; font-size: 24px;
margin-bottom: 4px; margin-bottom: 4px;
@@ -415,6 +440,20 @@ button {
.chan-btn.xt-custom { .chan-btn.xt-custom {
--xt: #c084fc; --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 { .chan-tag {
margin-left: auto; margin-left: auto;
font-size: 10px; font-size: 10px;

21
src/lib/brand.ts Normal file
View File

@@ -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)
}
}

14
src/lib/center-auth-client.ts
View File

@@ -82,6 +82,20 @@ export async function guildMembersCenter(
return Array.isArray(res.data) ? res.data : [] 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( export async function updateMeNameCenter(
centerApiBase: string, centerApiBase: string,
accessToken: string, accessToken: string,

37
src/lib/runtime-env.ts Normal file
View File

@@ -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
}

3
src/main.tsx
View File

@@ -4,6 +4,9 @@ import { BrowserRouter, HashRouter } from 'react-router-dom'
import './index.css' import './index.css'
import App from './App.tsx' import App from './App.tsx'
import { AuthProvider } from './auth/AuthContext' import { AuthProvider } from './auth/AuthContext'
import { applyBrand } from './lib/brand'
applyBrand()
// The packaged desktop app loads the bundled SPA over file://, where the // The packaged desktop app loads the bundled SPA over file://, where the
// History API has no server to back path routing — use HashRouter there. // History API has no server to back path routing — use HashRouter there.

165
src/pages/ChatPage.tsx
View File

@@ -9,6 +9,7 @@ import {
} from 'react' } from 'react'
import { useAuth } from '../auth/auth-context' import { useAuth } from '../auth/auth-context'
import { renderMarkdown } from '../lib/markdown' import { renderMarkdown } from '../lib/markdown'
import { APP_NAME } from '../lib/brand'
import { guildMembersCenter, joinGuildCenter } from '../lib/center-auth-client' import { guildMembersCenter, joinGuildCenter } from '../lib/center-auth-client'
type Attachment = { url: string; name?: string; mimeType?: string } type Attachment = { url: string; name?: string; mimeType?: string }
@@ -67,7 +68,13 @@ function timeOf(iso?: string): string {
return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) 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 XType = (typeof X_TYPES)[number]
type GuildChannel = { id: string; name: string; guildId?: string; xType?: XType; isMember?: boolean; isPublic?: boolean; closed?: boolean } type GuildChannel = { id: string; name: string; guildId?: string; xType?: XType; isMember?: boolean; isPublic?: boolean; closed?: boolean }
@@ -412,13 +419,17 @@ export default function ChatPage() {
setError('Triage channels require an on-duty user') setError('Triage channels require an on-duty user')
return return
} }
if (newChannelXType === 'dm' && selectedMemberIds.length !== 1) {
setError('A DM needs exactly one other participant')
return
}
setError('') setError('')
try { try {
const payload = { const payload = {
name: newChannelName.trim(), name: newChannelName.trim(),
guildId: effectiveGuildId, guildId: effectiveGuildId,
xType: newChannelXType, xType: newChannelXType,
isPublic: newChannelPublic, isPublic: newChannelXType === 'dm' ? false : newChannelPublic,
memberUserIds: selectedMemberIds, memberUserIds: selectedMemberIds,
onDuty: newChannelXType === 'triage' ? newChannelOnDuty : undefined, onDuty: newChannelXType === 'triage' ? newChannelOnDuty : undefined,
listeners: newChannelXType === 'custom' ? newChannelListeners : [], listeners: newChannelXType === 'custom' ? newChannelListeners : [],
@@ -444,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) { async function joinChannel(c: GuildChannel) {
if (!guild || !guildToken) return if (!guild || !guildToken) return
try { try {
@@ -700,6 +738,15 @@ export default function ChatPage() {
{ kind: 'item', label: 'Copy user ID', onClick: () => copyText(m.userId) }, { kind: 'item', label: 'Copy user ID', onClick: () => copyText(m.userId) },
{ kind: 'item', label: 'Copy name', onClick: () => copyText(label) }, { 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)) if (inChannel && rotationChannel && !bypassMemberIds.includes(m.userId))
items.push( items.push(
{ kind: 'sep' }, { kind: 'sep' },
@@ -920,7 +967,7 @@ export default function ChatPage() {
} }
return ( 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'))}> <nav className="dc-rail" onContextMenu={(e) => openCtx(e, 'Guilds', blankMenu('guilds'))}>
{guilds.map((g) => ( {guilds.map((g) => (
<button <button
@@ -952,17 +999,25 @@ export default function ChatPage() {
</button> </button>
</div> </div>
{channels.length ? ( {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> <div className="dc-empty">{guild ? 'No channels yet' : 'Pick a guild from the left'}</div>
@@ -1373,33 +1428,61 @@ export default function ChatPage() {
</div> </div>
) : null} ) : 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"> <div className="modal-actions">
<button className="btn" onClick={createChannel}>Create</button> <button className="btn" onClick={createChannel}>Create</button>
<button className="btn btn-secondary" onClick={() => setShowCreateChannelModal(false)}>Cancel</button> <button className="btn btn-secondary" onClick={() => setShowCreateChannelModal(false)}>Cancel</button>

105
src/pages/LoginPage.tsx
View File

@@ -1,15 +1,29 @@
import { useState } from 'react' import { useEffect, useState } from 'react'
import type { FormEvent } from 'react' import type { FormEvent } from 'react'
import { useNavigate } from 'react-router-dom' import { useNavigate } from 'react-router-dom'
import { useAuth } from '../auth/auth-context' 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() { export default function LoginPage() {
const navigate = useNavigate() const navigate = useNavigate()
const { login, isAuthed, session } = useAuth() 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 [email, setEmail] = useState('')
const [password, setPassword] = useState('') const [password, setPassword] = useState('')
const [error, setError] = 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) { async function onSubmit(e: FormEvent) {
e.preventDefault() 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 ( return (
<div className="login-screen"> <div className="login-screen">
<div className="login-card"> <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> <h1>Welcome back</h1>
<p className="login-sub"> <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> </p>
<form onSubmit={onSubmit}>
{showCenterInput ? (
<div className="field"> <div className="field">
<label>Center API Base</label> <label>Center API Base</label>
<input <input
@@ -39,29 +68,51 @@ export default function LoginPage() {
placeholder="http://localhost:7001/api" placeholder="http://localhost:7001/api"
/> />
</div> </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>
</div> </div>
) )

66
src/pages/OidcCallback.tsx Normal file
View File

@@ -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>
)
}