@schlessera/brain-ui-react 0.4.0

package/src/lib/api-client.ts

@@ -0,0 +1,173 @@
+import { API_BASE } from "./backend.js";
+import type {
+  VoiceKeytermsResponse,
+  VoiceTokenResponse,
+  VoiceSessionResponse,
+  PronunciationOverride,
+  ProviderInfo,
+  PasskeySummary,
+} from "@schlessera/brain-ui-sdk/protocol";
+import type {
+  AuthenticationResponseJSON,
+  RegistrationResponseJSON,
+  PublicKeyCredentialCreationOptionsJSON,
+  PublicKeyCredentialRequestOptionsJSON,
+} from "@simplewebauthn/browser";
+
+/** Backend id + capability flags the client renders behavior from. */
+export interface BackendInfo {
+  id: string;
+  capabilities: {
+    concurrentSessions: boolean;
+    followUp: boolean;
+    [key: string]: boolean;
+  };
+}
+
+async function fetchJson<T>(path: string, init?: RequestInit): Promise<T> {
+  const res = await fetch(`${API_BASE}${path}`, {
+    ...init,
+    headers: {
+      "Content-Type": "application/json",
+      ...init?.headers,
+    },
+  });
+  if (!res.ok) {
+    const body = await res.json().catch(() => ({ error: res.statusText }));
+    throw new Error(body.error || `HTTP ${res.status}`);
+  }
+  return res.json();
+}
+
+export const api = {
+  health: () =>
+    fetchJson<{ status: string; uptime: number; version: string }>("/health"),
+
+  vpnCheck: () => fetchJson<{ vpn: boolean }>("/vpn-check"),
+
+  status: () =>
+    fetchJson<{
+      healthy: boolean;
+      uptime: number;
+      cronJobs: Array<{
+        name: string;
+        lastRunAt: number | null;
+        lastStatus: string | null;
+      }>;
+      activeSession: boolean;
+    }>("/status"),
+
+  brainSearch: (q: string, opts?: { type?: string; limit?: number }) =>
+    fetchJson<{
+      results: Array<{ path: string; title: string; snippet: string; score: number }>;
+      warnings: string[];
+    }>(
+      `/brain/search?q=${encodeURIComponent(q)}${opts?.type ? `&type=${opts.type}` : ""}${opts?.limit ? `&limit=${opts.limit}` : ""}`
+    ),
+
+  brainBriefing: () =>
+    fetchJson<{ content: string }>("/brain/briefing"),
+
+  brainStats: () =>
+    fetchJson<{
+      documents: number;
+      byType: Record<string, number>;
+      byStatus: Record<string, number>;
+      tags: number;
+      links: number;
+    }>("/brain/stats"),
+
+  brainSync: () =>
+    fetchJson<{ success: boolean; message: string }>("/brain/sync", {
+      method: "POST",
+    }),
+
+  brainAdd: (content: string, opts?: { type?: string; title?: string; tags?: string[] }) =>
+    fetchJson<{ success: boolean }>("/brain/add", {
+      method: "POST",
+      body: JSON.stringify({ content, ...opts }),
+    }),
+
+  sessions: () =>
+    fetchJson<{
+      sessions: Array<{
+        id: string;
+        title: string | null;
+        createdAt: number;
+        lastActiveAt: number;
+      }>;
+    }>("/sessions"),
+
+  /** Mint a dictation session for the active speech provider. */
+  voiceSession: (signal?: AbortSignal) =>
+    fetchJson<VoiceSessionResponse>("/voice/session", { method: "POST", signal }),
+
+  /** @deprecated use voiceSession(); kept during client transition. */
+  voiceToken: () =>
+    fetchJson<VoiceTokenResponse>("/voice/token", { method: "POST" }),
+
+  voiceKeyterms: () => fetchJson<VoiceKeytermsResponse>("/voice/keyterms"),
+
+  voiceOverrides: (signal?: AbortSignal) =>
+    fetchJson<{ overrides: PronunciationOverride[] }>("/voice/overrides", {
+      signal,
+    }),
+
+  providers: () =>
+    fetchJson<{
+      providers: ProviderInfo[];
+      backends?: Record<string, BackendInfo>;
+    }>("/providers"),
+
+  /** Password-mode login. Resolves on success; throws the server error otherwise. */
+  login: (password: string) =>
+    fetchJson<{ ok: true }>("/auth/login", {
+      method: "POST",
+      body: JSON.stringify({ password }),
+    }),
+
+  logout: () =>
+    fetchJson<{ ok: true }>("/auth/logout", { method: "POST" }),
+
+  /** Which login methods the server offers (public; drives the login screen). */
+  authMethods: () =>
+    fetchJson<{ password: boolean; passkey: boolean }>("/auth/methods"),
+
+  passkeyLoginOptions: () =>
+    fetchJson<PublicKeyCredentialRequestOptionsJSON>("/auth/passkey/login-options", {
+      method: "POST",
+      body: "{}",
+    }),
+
+  passkeyLoginVerify: (response: AuthenticationResponseJSON) =>
+    fetchJson<{ ok: true }>("/auth/passkey/login-verify", {
+      method: "POST",
+      body: JSON.stringify(response),
+    }),
+
+  passkeyRegisterOptions: () =>
+    fetchJson<PublicKeyCredentialCreationOptionsJSON>("/auth/passkey/register-options", {
+      method: "POST",
+      body: "{}",
+    }),
+
+  passkeyRegisterVerify: (response: RegistrationResponseJSON, label?: string) =>
+    fetchJson<{ ok: true; credential: PasskeySummary | null }>(
+      "/auth/passkey/register-verify",
+      { method: "POST", body: JSON.stringify({ response, label }) }
+    ),
+
+  passkeyList: () =>
+    fetchJson<{ credentials: PasskeySummary[] }>("/auth/passkey/list"),
+
+  passkeyRename: (id: string, label: string) =>
+    fetchJson<{ ok: true }>(`/auth/passkey/${encodeURIComponent(id)}`, {
+      method: "PUT",
+      body: JSON.stringify({ label }),
+    }),
+
+  passkeyDelete: (id: string) =>
+    fetchJson<{ ok: true }>(`/auth/passkey/${encodeURIComponent(id)}`, {
+      method: "DELETE",
+    }),
+};

package/src/lib/backend.ts

@@ -0,0 +1,35 @@
+/**
+ * Backend URL configuration.
+ *
+ * Default topology is SAME-ORIGIN: the server serves the built client and the
+ * API/WS from one origin, so API calls go to "/api" and the WebSocket derives
+ * its host from window.location. No build-time configuration is needed.
+ *
+ * VITE_BACKEND_URL is optional advanced config for a SPLIT topology (client and
+ * backend on different origins, e.g. a public frontend with the backend reached
+ * over a VPN). When set at build time, API and WS calls target that origin.
+ * The read is defensive — outside a Vite build (bun test, Node import of the
+ * dist) `import.meta.env` does not exist.
+ */
+const viteEnv = (import.meta as { env?: Record<string, string | undefined> }).env;
+const BACKEND_URL = viteEnv?.VITE_BACKEND_URL?.replace(/\/$/, "") ?? "";
+
+/** Base URL for API calls. Empty BACKEND_URL = same-origin "/api". */
+export const API_BASE = `${BACKEND_URL}/api`;
+
+/** WebSocket URL. Derives wss/ws + host from BACKEND_URL, else same-origin. */
+export function getWsUrl(): string {
+  if (BACKEND_URL) {
+    const url = new URL("/ws", BACKEND_URL);
+    url.protocol = url.protocol === "https:" ? "wss:" : "ws:";
+    return url.toString();
+  }
+  // Same-origin (default).
+  const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+  return `${protocol}//${window.location.host}/ws`;
+}
+
+/** Base URL for direct fetch calls (streaming endpoints). */
+export function getBackendUrl(path: string): string {
+  return `${BACKEND_URL}${path}`;
+}

package/src/lib/frontmatter.ts

@@ -0,0 +1,99 @@
+/**
+ * Minimal YAML-frontmatter splitter for brain repo markdown files.
+ *
+ * Brain frontmatter is single-line key:value with the occasional inline
+ * array (`tags: [a, b, c]`) and quoted string. We don't need a full YAML
+ * parser — a small focused split keeps the bundle tiny and the behaviour
+ * predictable.
+ */
+
+export interface FrontmatterField {
+  key: string;
+  /** Raw value as it appears in the file (quotes stripped). */
+  value: string;
+  /** Parsed array elements when value was `[a, b, c]`-shaped. */
+  list?: string[];
+}
+
+export interface FrontmatterSplit {
+  fields: FrontmatterField[];
+  body: string;
+}
+
+const OPEN = /^---\r?\n/;
+
+export function splitFrontmatter(md: string): FrontmatterSplit {
+  if (!OPEN.test(md)) return { fields: [], body: md };
+  // Find closing `---` on its own line after the opener.
+  const afterOpen = md.replace(OPEN, "");
+  const closeMatch = afterOpen.match(/\r?\n---\r?\n/);
+  if (!closeMatch || closeMatch.index === undefined) {
+    return { fields: [], body: md };
+  }
+  const rawFrontmatter = afterOpen.slice(0, closeMatch.index);
+  const body = afterOpen.slice(closeMatch.index + closeMatch[0].length);
+
+  const fields: FrontmatterField[] = [];
+  for (const line of rawFrontmatter.split(/\r?\n/)) {
+    if (!line.trim() || line.trimStart().startsWith("#")) continue;
+    const sep = line.indexOf(":");
+    if (sep < 0) continue;
+    const key = line.slice(0, sep).trim();
+    if (!key) continue;
+    const raw = line.slice(sep + 1).trim();
+    fields.push(parseField(key, raw));
+  }
+  return { fields, body };
+}
+
+function parseField(key: string, raw: string): FrontmatterField {
+  // Inline array: [a, "b", c]
+  if (raw.startsWith("[") && raw.endsWith("]")) {
+    const inner = raw.slice(1, -1);
+    const list = splitArray(inner).map(unquote).filter(Boolean);
+    return { key, value: raw, list };
+  }
+  return { key, value: unquote(raw) };
+}
+
+function unquote(s: string): string {
+  const trimmed = s.trim();
+  if (trimmed.length >= 2) {
+    const first = trimmed[0];
+    const last = trimmed[trimmed.length - 1];
+    if ((first === '"' && last === '"') || (first === "'" && last === "'")) {
+      return trimmed.slice(1, -1);
+    }
+  }
+  return trimmed;
+}
+
+/** Split on top-level commas, respecting quoted segments. */
+function splitArray(s: string): string[] {
+  const out: string[] = [];
+  let buf = "";
+  let quote: string | null = null;
+  for (let i = 0; i < s.length; i++) {
+    const ch = s[i];
+    if (quote) {
+      buf += ch;
+      if (ch === quote && s[i - 1] !== "\\") quote = null;
+      continue;
+    }
+    if (ch === '"' || ch === "'") {
+      quote = ch;
+      buf += ch;
+      continue;
+    }
+    if (ch === ",") {
+      const piece = buf.trim();
+      if (piece) out.push(piece);
+      buf = "";
+      continue;
+    }
+    buf += ch;
+  }
+  const tail = buf.trim();
+  if (tail) out.push(tail);
+  return out;
+}

package/src/lib/image-attachments.ts

@@ -0,0 +1,221 @@
+import type { ChatImageAttachment } from "@schlessera/brain-ui-sdk/protocol";
+import {
+  DOWNSCALE_MAX_EDGE,
+  MAX_IMAGES_PER_MESSAGE,
+  MAX_IMAGE_BYTES,
+  MAX_TOTAL_IMAGE_BYTES,
+} from "@schlessera/brain-ui-sdk/protocol";
+
+/**
+ * The vision API silently drops images below a minimum pixel size (a 2x2 PNG
+ * is stripped with a misleading "could not be processed" note; 64x64 is fine).
+ * Reject anything smaller than this on either edge so the failure is explicit.
+ */
+const MIN_IMAGE_EDGE = 32;
+
+/** A processed attachment plus a local object URL for the composer preview. */
+export interface PendingAttachment {
+  attachment: ChatImageAttachment;
+  previewUrl: string;
+  /** Decoded byte length (post-downscale) — used for total-size validation. */
+  bytes: number;
+  /** Original file name, for error messages. */
+  name: string;
+}
+
+type FileToAttachmentResult =
+  | { attachment: ChatImageAttachment; previewUrl: string; bytes: number }
+  | { error: string };
+
+/** base64 length → decoded byte count (accounts for `=` padding). */
+function decodedBytesFromBase64(b64: string): number {
+  const padding = b64.endsWith("==") ? 2 : b64.endsWith("=") ? 1 : 0;
+  return Math.floor((b64.length * 3) / 4) - padding;
+}
+
+function blobToBase64(blob: Blob): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const result = reader.result as string;
+      // Strip the `data:<mime>;base64,` prefix — protocol wants raw base64.
+      const comma = result.indexOf(",");
+      resolve(comma >= 0 ? result.slice(comma + 1) : result);
+    };
+    reader.onerror = () => reject(reader.error ?? new Error("read_failed"));
+    reader.readAsDataURL(blob);
+  });
+}
+
+/**
+ * Decode a file to raw pixels. Prefers `createImageBitmap` (honors EXIF
+ * orientation) and falls back to an `<img>` decode when it rejects (e.g.
+ * older Safari, some codecs).
+ */
+async function decodeImage(
+  file: File
+): Promise<{ width: number; height: number; draw: (ctx: CanvasRenderingContext2D, w: number, h: number) => void } | null> {
+  try {
+    const bitmap = await createImageBitmap(file, { imageOrientation: "from-image" });
+    return {
+      width: bitmap.width,
+      height: bitmap.height,
+      draw: (ctx, w, h) => {
+        ctx.drawImage(bitmap, 0, 0, w, h);
+        bitmap.close();
+      },
+    };
+  } catch {
+    // Fallback: HTMLImageElement decode via an object URL.
+    const url = URL.createObjectURL(file);
+    try {
+      const img = new Image();
+      img.src = url;
+      await img.decode();
+      const width = img.naturalWidth;
+      const height = img.naturalHeight;
+      return {
+        width,
+        height,
+        draw: (ctx, w, h) => ctx.drawImage(img, 0, 0, w, h),
+      };
+    } catch {
+      return null;
+    } finally {
+      URL.revokeObjectURL(url);
+    }
+  }
+}
+
+/**
+ * Turn a picked/pasted image File into a wire-ready attachment plus a preview
+ * URL. GIFs pass through un-re-encoded (size-checked only) so animation
+ * survives; everything else is downscaled to `DOWNSCALE_MAX_EDGE` and
+ * re-encoded to JPEG. Rejects (with a human message) on unsupported types,
+ * decode failure, or oversize-after-downscale.
+ */
+export async function fileToAttachment(
+  file: File
+): Promise<FileToAttachmentResult> {
+  const type = file.type || "";
+
+  // GIF: keep the raw bytes (canvas would flatten the animation). Measure its
+  // dimensions for the min-size guard without re-encoding, then size-check.
+  if (type === "image/gif") {
+    try {
+      const bmp = await createImageBitmap(file);
+      const tooSmall = bmp.width < MIN_IMAGE_EDGE || bmp.height < MIN_IMAGE_EDGE;
+      bmp.close();
+      if (tooSmall) {
+        return {
+          error: `${file.name}: image too small (min ${MIN_IMAGE_EDGE}px per edge)`,
+        };
+      }
+    } catch {
+      // Couldn't measure — fall through and let the size check gate it.
+    }
+    const data = await blobToBase64(file);
+    const bytes = decodedBytesFromBase64(data);
+    if (bytes > MAX_IMAGE_BYTES) {
+      return { error: `${file.name}: GIF too large (max ${mb(MAX_IMAGE_BYTES)})` };
+    }
+    return {
+      attachment: { data, mediaType: "image/gif" },
+      previewUrl: URL.createObjectURL(file),
+      bytes,
+    };
+  }
+
+  if (!type.startsWith("image/")) {
+    return { error: `${file.name}: not an image` };
+  }
+
+  const decoded = await decodeImage(file);
+  if (!decoded) {
+    return {
+      error: `${file.name}: couldn't read this image (unsupported format?)`,
+    };
+  }
+
+  const { width, height } = decoded;
+  if (!width || !height) {
+    return { error: `${file.name}: couldn't read this image` };
+  }
+  if (width < MIN_IMAGE_EDGE || height < MIN_IMAGE_EDGE) {
+    return {
+      error: `${file.name}: image too small (min ${MIN_IMAGE_EDGE}px per edge)`,
+    };
+  }
+
+  // Scale so the longest edge is at most DOWNSCALE_MAX_EDGE.
+  const scale = Math.min(1, DOWNSCALE_MAX_EDGE / Math.max(width, height));
+  const targetW = Math.max(1, Math.round(width * scale));
+  const targetH = Math.max(1, Math.round(height * scale));
+
+  const canvas = document.createElement("canvas");
+  canvas.width = targetW;
+  canvas.height = targetH;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    return { error: `${file.name}: canvas unavailable` };
+  }
+  decoded.draw(ctx, targetW, targetH);
+
+  const blob = await new Promise<Blob | null>((resolve) =>
+    canvas.toBlob(resolve, "image/jpeg", 0.85)
+  );
+  if (!blob) {
+    return { error: `${file.name}: failed to encode` };
+  }
+
+  const data = await blobToBase64(blob);
+  const bytes = decodedBytesFromBase64(data);
+  if (bytes > MAX_IMAGE_BYTES) {
+    return {
+      error: `${file.name}: still ${mb(bytes)} after downscale (max ${mb(MAX_IMAGE_BYTES)})`,
+    };
+  }
+
+  return {
+    attachment: { data, mediaType: "image/jpeg" },
+    previewUrl: URL.createObjectURL(blob),
+    bytes,
+  };
+}
+
+/**
+ * Enforce message-level caps against a proposed set of attachments (existing
+ * pending + newly added). Returns the accepted subset and per-file rejection
+ * reasons; never mutates the input.
+ */
+export function validateAttachments(pending: PendingAttachment[]): {
+  accepted: PendingAttachment[];
+  errors: string[];
+} {
+  const accepted: PendingAttachment[] = [];
+  const errors: string[] = [];
+  let total = 0;
+
+  for (const item of pending) {
+    if (accepted.length >= MAX_IMAGES_PER_MESSAGE) {
+      errors.push(
+        `${item.name}: over the ${MAX_IMAGES_PER_MESSAGE}-image limit`
+      );
+      continue;
+    }
+    if (total + item.bytes > MAX_TOTAL_IMAGE_BYTES) {
+      errors.push(
+        `${item.name}: over the ${mb(MAX_TOTAL_IMAGE_BYTES)} total-size limit`
+      );
+      continue;
+    }
+    total += item.bytes;
+    accepted.push(item);
+  }
+
+  return { accepted, errors };
+}
+
+function mb(bytes: number): string {
+  return `${(bytes / 1_000_000).toFixed(1)} MB`;
+}

package/src/lib/passkeys.ts

@@ -0,0 +1,50 @@
+import {
+  startAuthentication,
+  startRegistration,
+  browserSupportsWebAuthn,
+  browserSupportsWebAuthnAutofill,
+} from "@simplewebauthn/browser";
+import { api } from "./api-client.js";
+
+/**
+ * Thin ceremony wrappers around @simplewebauthn/browser. All server calls go
+ * through api-client; success means the server set the session cookie.
+ */
+
+export function supportsPasskeys(): boolean {
+  return browserSupportsWebAuthn();
+}
+
+export function supportsAutofill(): Promise<boolean> {
+  return browserSupportsWebAuthnAutofill();
+}
+
+/** True for the user dismissing/cancelling the OS passkey prompt. */
+export function isUserCancel(err: unknown): boolean {
+  return (
+    err instanceof Error &&
+    (err.name === "NotAllowedError" || err.name === "AbortError")
+  );
+}
+
+/**
+ * Full login ceremony. With `useBrowserAutofill`, resolves only if the user
+ * picks a passkey from the input's autofill suggestions (conditional UI).
+ */
+export async function loginWithPasskey(opts?: {
+  useBrowserAutofill?: boolean;
+}): Promise<void> {
+  const optionsJSON = await api.passkeyLoginOptions();
+  const response = await startAuthentication({
+    optionsJSON,
+    useBrowserAutofill: opts?.useBrowserAutofill ?? false,
+  });
+  await api.passkeyLoginVerify(response);
+}
+
+/** Full registration ceremony (requires an authenticated session). */
+export async function registerPasskey(label?: string): Promise<void> {
+  const optionsJSON = await api.passkeyRegisterOptions();
+  const response = await startRegistration({ optionsJSON });
+  await api.passkeyRegisterVerify(response, label);
+}