meta-sovereign 0.49.7 → 0.49.8

package/js/src/web/api-errors.js

@@ -0,0 +1,163 @@
+// A server refusal never goes unseen (R-Z12). Every answer in the uniform
+// `{ ok: false, error, code }` shape is logged to the console once per
+// distinct error; a user-triggered (non-GET) request that fails with a
+// systemic code also raises a localised toast, so a failed send or save is
+// never a silent empty panel. Background reads stay quiet on the page.
+
+import React, { useEffect, useState } from 'react';
+import { useT } from './i18n.js';
+
+const el = React.createElement;
+
+export const API_ERROR_EVENT = 'ms-api-error';
+
+// Codes with their own wording (error.code.<code> in every locale).
+export const KNOWN_CODES = [
+  'bad-host',
+  'too-large',
+  'bad-json',
+  'internal',
+  'send-unknown',
+  'unsupported',
+  'unsupported-chat',
+  'captcha',
+  'LOW_DISK',
+  'STORE_WRITE_FAILED',
+  'STORE_FULL',
+  'STORE_LOCKED',
+  'outbox-unavailable',
+  'send-in-doubt',
+  'timeout',
+  'network',
+];
+
+// Never a toast: a feature probe or a chat that cannot do it is explained
+// inline by the panel that asked. Codes outside KNOWN_CODES are the panels'.
+const INLINE_ONLY = new Set(['unsupported', 'unsupported-chat']);
+
+const seen = new Set();
+
+/** The localised sentence for a server code, else the server's own text. */
+export const errorText = (t, code, fallback = '') => {
+  const key = `error.code.${code}`;
+  const text = code ? t(key) : key;
+  return text === key ? fallback || t('error.code.unknown') : text;
+};
+
+/** The `{ code, error }` of a failed answer, or null when it succeeded. */
+export const failureOf = (status, data) => {
+  if (
+    data?.ok === false ||
+    (typeof data?.error === 'string' && status >= 400)
+  ) {
+    return { code: data.code ?? '', error: String(data.error ?? '') };
+  }
+  return status >= 500 ? { code: 'internal', error: '' } : null;
+};
+
+/** Logs once per distinct error; raises the toast for user-triggered calls. */
+export const reportApiFailure = ({ path, method = 'GET', status, data }) => {
+  const failure = failureOf(status, data);
+  if (!failure) {
+    return null;
+  }
+  const key = `${method} ${path} ${failure.code} ${failure.error}`;
+  if (!seen.has(key)) {
+    seen.add(key);
+    globalThis.console?.warn?.(
+      `[meta-sovereign] ${method} ${path} failed (${status}): ${failure.code} ${failure.error}`.trim()
+    );
+  }
+  if (
+    method !== 'GET' &&
+    KNOWN_CODES.includes(failure.code) &&
+    !INLINE_ONLY.has(failure.code)
+  ) {
+    globalThis.dispatchEvent?.(
+      new CustomEvent(API_ERROR_EVENT, { detail: { ...failure, path } })
+    );
+  }
+  return failure;
+};
+
+/** Forgets what was logged (tests). */
+export const resetApiErrors = () => seen.clear();
+
+/** The toast, mounted once in the app; Escape or × hides it. */
+export const ApiErrorToast = () => {
+  const t = useT();
+  const [shown, setShown] = useState(null);
+  useEffect(() => {
+    const on = (event) => setShown(event.detail);
+    globalThis.addEventListener?.(API_ERROR_EVENT, on);
+    return () => globalThis.removeEventListener?.(API_ERROR_EVENT, on);
+  }, []);
+  if (!shown) {
+    return null;
+  }
+  return el(
+    'aside',
+    {
+      className: 'disk-banner api-error-toast',
+      role: 'alert',
+      'data-banner': 'api-error',
+      'data-error-code': shown.code,
+    },
+    [
+      el('span', { key: 'text' }, errorText(t, shown.code, shown.error)),
+      el(
+        'button',
+        {
+          key: 'x',
+          type: 'button',
+          'data-action': 'api-error-dismiss',
+          onClick: () => setShown(null),
+        },
+        t('disk.dismiss')
+      ),
+    ]
+  );
+};
+
+/** Logs a background failure to the console once per distinct message. */
+export const logOnce = (what, error) => {
+  const key = `${what} ${String(error?.message ?? error)}`;
+  if (!seen.has(key)) {
+    seen.add(key);
+    globalThis.console?.warn?.(`[meta-sovereign] ${key}`);
+  }
+};
+
+/** A list that could not load: what failed, and a button to try again. */
+export const LoadError = ({ error, retry, what }) => {
+  const t = useT();
+  const code = typeof error === 'object' ? error?.code : '';
+  return el(
+    'div',
+    {
+      className: 'load-error',
+      role: 'alert',
+      'data-load-error': what ?? 'list',
+    },
+    [
+      el('p', { key: 'm' }, t('error.load')),
+      el(
+        'p',
+        { key: 'd', className: 'meta' },
+        errorText(t, code, String(error?.message ?? error ?? ''))
+      ),
+      retry
+        ? el(
+            'button',
+            {
+              key: 'r',
+              type: 'button',
+              'data-action': 'load-retry',
+              onClick: retry,
+            },
+            t('error.retry')
+          )
+        : null,
+    ]
+  );
+};

package/js/src/web/app.css

@@ -12531,3 +12531,28 @@ a.remote-chip:hover {
   text-transform: none;
   text-decoration: underline;
 }
+
+/* A list that could not load, with a retry button (R-Z12). */
+.load-error {
+  margin: 1rem;
+  padding: 0.75rem 1rem;
+  border: 1px solid var(--border);
+  border-left: 4px solid var(--accent);
+  border-radius: 8px;
+  background: var(--bg-elev);
+}
+
+/* The error toast floats above any open dialog so a refusal is never hidden. */
+.api-error-toast {
+  position: fixed;
+  top: 0.75rem;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10001;
+  max-width: min(36rem, calc(100vw - 2rem));
+  margin: 0;
+  box-shadow: 0 4px 16px rgb(0 0 0 / 25%);
+}
+main[data-view='chat'] > .api-error-toast {
+  margin: 0;
+}

package/js/src/web/app.js

@@ -26,6 +26,8 @@ import { useAppearance, useApplyAppearance } from './appearance.js';
 import { WebModeBanner } from './web-mode-banner.js';
 import { DiskBanner } from './disk-banner.js';
 import { SchemaBanner } from './schema-banner.js';
+import { ApiErrorToast } from './api-errors.js';
+import { installDialogFocus } from './dialog-focus.js';
 import { shouldAutoOpen, useAnyConnection } from './tutorial-start.js';
 import { Icon } from './icons.js';
 import { ModeBadge } from './telegram-online.js';
@@ -207,6 +209,7 @@ const App = () => {
           [
             el(DiskBanner, { key: 'disk', api }),
             el(SchemaBanner, { key: 'schema', api }),
+            el(ApiErrorToast, { key: 'api-error' }),
             el(WebModeBanner, {
               key: 'web-mode',
               online,
@@ -257,4 +260,5 @@ const Root = () => {
 
 const mount = document.getElementById('app');
 installClientLog({ send: api.clientLog });
+installDialogFocus();
 createRoot(mount).render(el(Root));