@segmentstream/app 0.0.0-stage → 0.38.0

package/dist/ui/store.js

@@ -0,0 +1,280 @@
+"use client";
+import { createAuthClient } from "@neondatabase/auth/next";
+import { CHANNEL_LOGOUT_PATH, CHANNEL_SESSION_PATH } from "../channel-protocol.js";
+import { NOT_INVITED, SegmentStreamApiError, apiErrorFrom, readJson } from "../errors.js";
+import { ME_PATH, parseMe } from "../me.js";
+/** The Neon Auth API the app serves from `app/src/app/api/auth/[...path]/route.ts`. */
+export const AUTH_API_PATH = "/api/auth";
+/** The app's sign-in page. */
+export const SIGN_IN_PAGE = "/sign-in";
+export { NOT_INVITED };
+export const LOADING_USER = { status: "loading", user: null, error: null };
+export const SIGNED_OUT_USER = { status: "signed-out", user: null, error: null };
+const SERVER_SNAPSHOT = { session: { status: "loading" }, users: new Map() };
+let snapshot = SERVER_SNAPSHOT;
+let sessionLoad = null;
+let sessionGeneration = 0;
+const loadingUsers = new Set();
+const listeners = new Set();
+let client;
+let explicitlySignedOut = false;
+export function sessionWasEnded() {
+    return explicitlySignedOut;
+}
+/** The Neon Auth browser client, created on first use. It talks to the app's `/api/auth`. */
+export function authClient() {
+    client ??= createAuthClient();
+    return client;
+}
+function update(change) {
+    snapshot = { ...snapshot, ...change };
+    for (const listener of listeners) {
+        listener();
+    }
+}
+export function subscribe(listener) {
+    listeners.add(listener);
+    sessionLoad ??= loadSession();
+    return () => {
+        listeners.delete(listener);
+    };
+}
+export function getSnapshot() {
+    return snapshot;
+}
+export function getServerSnapshot() {
+    return SERVER_SNAPSHOT;
+}
+/** Reads the session again, after signing in or out. */
+export function refreshSession() {
+    if (snapshot.session.status === "unavailable") {
+        configurationLoad = undefined;
+    }
+    sessionLoad = loadSession();
+    return sessionLoad;
+}
+/** Forgets the session and every `/me` answer, after signing out. */
+export function clearSession() {
+    sessionGeneration++;
+    explicitlySignedOut = true;
+    loadingUsers.clear();
+    update({ session: { status: "signed-out" }, users: new Map() });
+}
+/** Ends the selected authentication session before any browser state is cleared. */
+export async function endBrowserSession() {
+    if (snapshot.session.status !== "signed-in" || snapshot.session.source !== "channel") {
+        if (snapshot.session.status === "signed-in" && snapshot.session.source === "oidc") {
+            const response = await fetch("/api/segmentstream/sign-out", {
+                method: "POST",
+                credentials: "same-origin",
+            });
+            if (!response.ok) {
+                throw new Error("logout_failed");
+            }
+        }
+        else {
+            await authClient().signOut();
+        }
+        return;
+    }
+    const response = await fetch(CHANNEL_LOGOUT_PATH, {
+        method: "POST",
+        credentials: "same-origin",
+    });
+    if (!response.ok) {
+        throw new Error("logout_failed");
+    }
+}
+let configurationLoad;
+/** Public, non-secret app opt-ins from the existing SDK handlers. No provider is enabled by default. */
+export function appSignInConfiguration() {
+    configurationLoad ??= (async () => {
+        try {
+            const response = await fetch("/api/segmentstream/configuration", {
+                credentials: "same-origin",
+                cache: "no-store",
+            });
+            const body = response.ok ? await readJson(response) : null;
+            if (!body || typeof body !== "object" || !("enabled" in body)) {
+                return null;
+            }
+            const { enabled } = body;
+            // Older SDK handlers omit this field; keep their existing session discovery precedence.
+            const neon = "neon" in body ? body.neon : true;
+            const channels = "channels" in body ? body.channels : {};
+            if (typeof enabled !== "boolean" ||
+                typeof neon !== "boolean" ||
+                !channels ||
+                typeof channels !== "object" ||
+                Array.isArray(channels) ||
+                Object.values(channels).some((value) => typeof value !== "boolean")) {
+                return null;
+            }
+            return {
+                enabled,
+                neon,
+                channels: channels,
+                browser: body.browser,
+            };
+        }
+        catch {
+            return null;
+        }
+    })();
+    return configurationLoad;
+}
+async function discover(path, source) {
+    try {
+        const response = await fetch(path, {
+            credentials: "same-origin",
+            cache: "no-store",
+            headers: { accept: "application/json" },
+        });
+        const payload = await readJson(response);
+        const session = response.ok
+            ? sessionFrom(payload)
+            : response.status === 401
+                ? { status: "signed-out" }
+                : { status: "unavailable" };
+        // Channel/OIDC endpoints confirm absence with 401. A malformed success is an outage,
+        // and must not select a different user from a lower-priority provider.
+        if (source && response.ok && session.status === "signed-out") {
+            return { status: "unavailable" };
+        }
+        if (source === "oidc" &&
+            (session.status === "signed-out" || session.status === "unavailable") &&
+            payload &&
+            typeof payload === "object" &&
+            payload.source === "oidc") {
+            return { ...session, source: "oidc" };
+        }
+        return session.status === "signed-in" && source
+            ? {
+                ...session,
+                sessionId: `${source}:${session.sessionId}`,
+                source,
+            }
+            : session;
+    }
+    catch {
+        return { status: "unavailable" };
+    }
+}
+async function loadSession() {
+    const generation = ++sessionGeneration;
+    const config = await appSignInConfiguration();
+    let session = { status: config ? "signed-out" : "unavailable" };
+    // Same precedence as ontology cookie authentication and app server helpers: channel, OIDC, Neon.
+    if (config && Object.values(config.channels).some((enabled) => enabled === true)) {
+        session = await discover(CHANNEL_SESSION_PATH, "channel");
+    }
+    if (session.status === "signed-out" && config?.enabled) {
+        session = await discover("/api/segmentstream/session", "oidc");
+    }
+    if (session.status === "signed-out" && session.source !== "oidc" && config?.neon) {
+        session = await discover(`${AUTH_API_PATH}/get-session`);
+    }
+    if (generation !== sessionGeneration) {
+        return;
+    }
+    if (session.status === "signed-in") {
+        explicitlySignedOut = false;
+    }
+    update({ session });
+}
+function sessionFrom(payload) {
+    if (typeof payload !== "object" || payload === null) {
+        return { status: "signed-out" };
+    }
+    const { session, user } = payload;
+    if (typeof session !== "object" ||
+        session === null ||
+        typeof user !== "object" ||
+        user === null) {
+        return { status: "signed-out" };
+    }
+    const { id: sessionId, expires_at } = session;
+    const { id, email, name } = user;
+    if (typeof sessionId !== "string" || typeof id !== "string") {
+        return { status: "signed-out" };
+    }
+    return {
+        status: "signed-in",
+        sessionId,
+        ...(typeof expires_at === "string" && Number.isFinite(Date.parse(expires_at))
+            ? { expiresAt: expires_at }
+            : {}),
+        user: {
+            id,
+            email: typeof email === "string" ? email : null,
+            name: typeof name === "string" ? name : null,
+        },
+    };
+}
+/** Starts loading `/me` for a session unless it is loaded or loading. */
+export function ensureUser(sessionId, source) {
+    if (snapshot.users.has(sessionId) || loadingUsers.has(sessionId)) {
+        return;
+    }
+    loadingUsers.add(sessionId);
+    void loadUser(source).then((state) => {
+        if (!loadingUsers.delete(sessionId)) {
+            return; // Signed out meanwhile.
+        }
+        update({ users: new Map(snapshot.users).set(sessionId, state) });
+    });
+}
+/** The session's JWT from Neon Auth, then the ontology's account of the user. */
+async function loadUser(source) {
+    try {
+        let token;
+        if (source === undefined) {
+            const tokenResponse = await fetch(`${AUTH_API_PATH}/token`, {
+                credentials: "same-origin",
+                cache: "no-store",
+                headers: { accept: "application/json" },
+            });
+            if (tokenResponse.status === 401) {
+                return SIGNED_OUT_USER;
+            }
+            const tokenPayload = await readJson(tokenResponse);
+            token =
+                typeof tokenPayload === "object" && tokenPayload !== null
+                    ? tokenPayload.token
+                    : undefined;
+            if (!tokenResponse.ok || typeof token !== "string" || token === "") {
+                return failed("auth_unavailable", 503, "Neon Auth did not issue a token. Try again.");
+            }
+        }
+        const response = await fetch(ME_PATH, {
+            cache: "no-store",
+            credentials: "same-origin",
+            headers: {
+                accept: "application/json",
+                ...(typeof token === "string" ? { authorization: `Bearer ${token}` } : {}),
+            },
+        });
+        const payload = await readJson(response);
+        if (!response.ok) {
+            return {
+                status: "error",
+                user: null,
+                error: apiErrorFrom(response.status, payload, "The ontology service rejected the user."),
+            };
+        }
+        const user = parseMe(payload);
+        return user === null
+            ? failed("ontology_invalid_response", 502, "GET /api/ontology/me answered an unexpected body.")
+            : { status: "signed-in", user, error: null };
+    }
+    catch (error) {
+        return failed("ontology_unreachable", 503, "The app's ontology could not be reached.", error);
+    }
+}
+function failed(code, status, detail, cause) {
+    return {
+        status: "error",
+        user: null,
+        error: new SegmentStreamApiError({ code, status, detail, retryable: true, cause }),
+    };
+}

package/dist/ui/styles.css

@@ -0,0 +1,249 @@
+/*
+ * @segmentstream/app/ui: neutral styles for the sign-in form and the user menu.
+ * Each rule is one class, so the app's own class selectors override it; the custom properties
+ * below change colours, radius and font in one place.
+ */
+
+:root {
+  --ss-font: inherit;
+  --ss-text: #111111;
+  --ss-muted: #5f5f5f;
+  --ss-surface: #ffffff;
+  --ss-border: #d4d4d4;
+  --ss-accent: #111111;
+  --ss-accent-text: #ffffff;
+  --ss-danger: #b42318;
+  --ss-focus: #2563eb;
+  --ss-radius: 0.5rem;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --ss-text: #f5f5f5;
+    --ss-muted: #a3a3a3;
+    --ss-surface: #171717;
+    --ss-border: #3f3f3f;
+    --ss-accent: #f5f5f5;
+    --ss-accent-text: #111111;
+    --ss-danger: #f97066;
+    --ss-focus: #60a5fa;
+  }
+}
+
+.ss-card {
+  box-sizing: border-box;
+  width: min(24rem, 100%);
+  margin: 0 auto;
+  padding: 2rem;
+  border: 1px solid var(--ss-border);
+  border-radius: calc(var(--ss-radius) * 2);
+  background: var(--ss-surface);
+  color: var(--ss-text);
+  font-family: var(--ss-font);
+}
+
+.ss-title {
+  margin: 0 0 0.5rem;
+  font-size: 1.5rem;
+  line-height: 1.25;
+}
+
+.ss-text {
+  margin: 0 0 1.25rem;
+  color: var(--ss-muted);
+  line-height: 1.5;
+}
+
+.ss-text strong {
+  color: var(--ss-text);
+}
+
+.ss-form {
+  display: grid;
+  gap: 1rem;
+}
+
+.ss-field {
+  display: grid;
+  gap: 0.375rem;
+}
+
+.ss-label {
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.ss-input {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 0.625rem 0.75rem;
+  border: 1px solid var(--ss-border);
+  border-radius: var(--ss-radius);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+}
+
+.ss-input--code {
+  font-size: 1.5rem;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.5em;
+  text-align: center;
+}
+
+.ss-input[aria-invalid="true"] {
+  border-color: var(--ss-danger);
+}
+
+.ss-input:focus-visible,
+.ss-button:focus-visible,
+.ss-link:focus-visible,
+.ss-user-menu-trigger:focus-visible {
+  outline: 2px solid var(--ss-focus);
+  outline-offset: 2px;
+}
+
+.ss-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: 0.625rem 1rem;
+  border: 1px solid var(--ss-accent);
+  border-radius: var(--ss-radius);
+  background: var(--ss-accent);
+  color: var(--ss-accent-text);
+  font: inherit;
+  font-weight: 600;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.ss-button--secondary {
+  background: transparent;
+  color: var(--ss-text);
+  border-color: var(--ss-border);
+}
+
+.ss-button:disabled,
+.ss-link:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.ss-link {
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--ss-text);
+  font: inherit;
+  font-size: 0.875rem;
+  text-decoration: underline;
+  text-underline-offset: 0.2em;
+  cursor: pointer;
+}
+
+.ss-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  align-items: center;
+  margin-top: 1.25rem;
+}
+
+.ss-error {
+  margin: 0;
+  color: var(--ss-danger);
+  font-size: 0.875rem;
+}
+
+.ss-notice {
+  margin: 0;
+  color: var(--ss-muted);
+  font-size: 0.875rem;
+}
+
+.ss-user-menu {
+  position: relative;
+  display: inline-block;
+  color: var(--ss-text);
+  font-family: var(--ss-font);
+}
+
+.ss-user-menu-trigger {
+  display: inline-flex;
+  gap: 0.5rem;
+  align-items: center;
+  padding: 0.25rem 0.5rem 0.25rem 0.25rem;
+  border: 1px solid var(--ss-border);
+  border-radius: 999px;
+  cursor: pointer;
+  list-style: none;
+}
+
+.ss-user-menu-trigger::-webkit-details-marker {
+  display: none;
+}
+
+.ss-avatar {
+  display: inline-grid;
+  place-items: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  background: var(--ss-accent);
+  color: var(--ss-accent-text);
+  font-size: 0.75rem;
+  font-weight: 700;
+}
+
+.ss-user-menu-label {
+  max-width: 12rem;
+  overflow: hidden;
+  font-size: 0.875rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ss-user-menu-panel {
+  position: absolute;
+  right: 0;
+  z-index: 10;
+  display: grid;
+  gap: 0.5rem;
+  min-width: 14rem;
+  margin-top: 0.5rem;
+  padding: 1rem;
+  border: 1px solid var(--ss-border);
+  border-radius: var(--ss-radius);
+  background: var(--ss-surface);
+  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
+}
+
+.ss-user-menu-name {
+  margin: 0;
+  font-weight: 600;
+}
+
+.ss-user-menu-email {
+  margin: 0;
+  color: var(--ss-muted);
+  font-size: 0.875rem;
+  overflow-wrap: anywhere;
+}
+
+.ss-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.ss-badge {
+  padding: 0.125rem 0.5rem;
+  border: 1px solid var(--ss-border);
+  border-radius: 999px;
+  font-size: 0.75rem;
+}

package/dist/ui/telegram-sign-in.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+import { type ChannelSignInState } from "./use-channel-sign-in.js";
+export interface TelegramSignInOptions {
+    readonly redirectTo?: string;
+    /** Read fresh signed initData from the app's Telegram integration. */
+    readonly initData?: () => string | undefined;
+}
+/** Telegram carries launch data in a URL fragment, which browsers inherit through HTTP redirects. */
+export declare function telegramInitData(): string | undefined;
+/** Works on any app page; the public SDK configuration must explicitly enable Telegram. */
+export declare function useTelegramSignIn(options?: TelegramSignInOptions): ChannelSignInState;
+export interface TelegramSignInProps extends TelegramSignInOptions {
+    readonly children?: (state: ChannelSignInState) => ReactNode;
+}
+/** Headless component: the app owns all labels and error messages. */
+export declare function TelegramSignIn({ children, ...options }: TelegramSignInProps): string | number | bigint | boolean | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null;

package/dist/ui/telegram-sign-in.js

@@ -0,0 +1,21 @@
+"use client";
+import { useChannelSignIn } from "./use-channel-sign-in.js";
+/** Telegram carries launch data in a URL fragment, which browsers inherit through HTTP redirects. */
+export function telegramInitData() {
+    const telegram = window.Telegram;
+    return (telegram?.WebApp?.initData ||
+        new URLSearchParams(window.location.hash.slice(1)).get("tgWebAppData") ||
+        undefined);
+}
+/** Works on any app page; the public SDK configuration must explicitly enable Telegram. */
+export function useTelegramSignIn(options = {}) {
+    return useChannelSignIn("telegram", {
+        ...options,
+        assertion: options.initData ?? telegramInitData,
+    });
+}
+/** Headless component: the app owns all labels and error messages. */
+export function TelegramSignIn({ children, ...options }) {
+    const state = useTelegramSignIn(options);
+    return children?.(state) ?? null;
+}

package/dist/ui/use-browser-sign-in.d.ts

@@ -0,0 +1,52 @@
+export type BrowserSignInMethod = "email" | "segmentstream";
+export interface BrowserSignInOptions {
+    readonly returnTo?: string;
+    readonly error?: string;
+}
+/** Headless browser-method discovery. The workspace supplies every message and control. */
+export declare function useBrowserSignIn(options?: BrowserSignInOptions): {
+    status: "unavailable" | "loading" | "ready";
+    methods: readonly BrowserSignInMethod[];
+    primary: "email" | "segmentstream";
+    returnTo: string;
+    error: string | null;
+    segmentstreamSignInUrl: string | null;
+    connectAccountUrl: string | null;
+    accountSwitchUrl: string | null;
+    emailSignInUrl: string | null;
+};
+export interface LinkAccountIdentity {
+    readonly id: string;
+    readonly email?: string;
+    readonly name?: string;
+}
+export interface IdentityLinkState {
+    readonly status: "loading" | "ready" | "unavailable";
+    readonly pending: boolean;
+    readonly proofReady: boolean;
+    readonly emailEnabled: boolean;
+    readonly identity: LinkAccountIdentity | null;
+    readonly workspaceUser: LinkAccountIdentity | null;
+    readonly expiresAt: number | null;
+    readonly returnTo: string | null;
+}
+/** Linking never confirms during a GET. Post the form to confirmationUrl after explicit consent. */
+export declare function useIdentityLink(): {
+    confirmationUrl: string;
+    emailProofUrl: string;
+    status: "loading" | "ready" | "unavailable";
+    pending: boolean;
+    proofReady: boolean;
+    emailEnabled: boolean;
+    identity: LinkAccountIdentity | null;
+    workspaceUser: LinkAccountIdentity | null;
+    expiresAt: number | null;
+    returnTo: string | null;
+};
+/** Explicit reverse linking. Email possession is proof only; the OIDC session selects the user. */
+export declare function useEmailIdentityLink(): {
+    status: "error" | "pending" | "linked" | "idle";
+    error: string | null;
+    confirm: () => Promise<boolean>;
+    requestProof: (email: string, returnTo?: string) => Promise<boolean>;
+};