feat(frontend): v2 rewrite — Vite + React + TS readonly SPA
Replaces the v1 CRA app (which targeted the obsolete Python Dialectic
backend) with a fresh Vite + React 18 + TypeScript scaffold that talks
to Dialectic.Backend Go v2.
Pages (all readonly — propose/signup/post are agent-only by design):
- / TopicList — filter by status, paginated
- /topics/:id TopicDetail — meta + camps + transcript
(polling every 8s)
- /topics/:id/verdict Verdict permalink (shareable)
- /agents/:id AgentActivity — admin diagnostics card
Stack:
- Vite 5 + React 18 + react-router-dom 6
- Pure ESM, NodeNext-style imports, .tsx
- Style: ~/STYLE.md tokens (IBM Plex Mono + Major Mono Display +
--acid #d8ff3e on --ink #080a0d, with subtle blueprint grid wash)
Auth:
- v1 dev-bypass only — VITE_OIDC_DEV_BYPASS auto-attaches
x-dev-bypass header. Real Keycloak OIDC redirect ships as v2.
- Admin endpoints (x-dialectic-admin-key) prompt on first visit
and store key in localStorage. Never baked into bundle. Never
sent to non-admin endpoints.
Backend pairing:
- Dialectic.Backend@0b16b52 adds GET /api/admin/agents/{id} for the
AgentActivity page. AgentActivity calls it via the admin-key
branch in api.ts.
Deploy:
- Multi-stage Dockerfile (node:22-alpine build → nginx:1.27-alpine
serve). nginx.conf reverse-proxies /api/ → dialectic-backend:8090
so the browser sees one origin (no CORS).
Reuses the existing hzhang/Dialectic.Frontend repo — old CRA contents
nuked in this commit. History preserved on master.
This commit is contained in:
33
src/auth.tsx
Normal file
33
src/auth.tsx
Normal file
@@ -0,0 +1,33 @@
|
||||
// AuthProvider — minimal v1: dev-bypass only, no OIDC redirect yet.
|
||||
//
|
||||
// Real OIDC + Keycloak ships when the backend's OIDC middleware is
|
||||
// fully wired (Phase 4 in DIALECTIC-V2-DESIGN.md). Until then this
|
||||
// just surfaces whether dev-bypass is on so the UI can show a banner
|
||||
// ("dev mode — running as operator") and route admin-gated pages.
|
||||
|
||||
import { createContext, useContext, type ReactNode } from 'react';
|
||||
|
||||
interface AuthCtx {
|
||||
// Whether dev-bypass token is configured at build time.
|
||||
devBypass: boolean;
|
||||
// Display label for the "current user" — in dev-bypass mode this is
|
||||
// the literal env value (a placeholder until real OIDC).
|
||||
user: { id: string; label: string } | null;
|
||||
}
|
||||
|
||||
const Ctx = createContext<AuthCtx>({
|
||||
devBypass: false,
|
||||
user: null,
|
||||
});
|
||||
|
||||
export function AuthProvider({ children }: { children: ReactNode }) {
|
||||
const devBypass = Boolean(import.meta.env.VITE_OIDC_DEV_BYPASS);
|
||||
const user = devBypass
|
||||
? { id: 'dev-operator', label: 'dev-operator (bypass)' }
|
||||
: null;
|
||||
return <Ctx.Provider value={{ devBypass, user }}>{children}</Ctx.Provider>;
|
||||
}
|
||||
|
||||
export function useAuth(): AuthCtx {
|
||||
return useContext(Ctx);
|
||||
}
|
||||
Reference in New Issue
Block a user