From 743d38377300061beb07e0c550193a18b7ade44e Mon Sep 17 00:00:00 2001
From: Joao <joaocarvoli@hotmail.com>
Date: Sun, 17 May 2026 14:04:43 -0500
Subject: [PATCH 1/7] =?UTF-8?q?feat(auth):=20single-step=20signup=20?=
 =?UTF-8?q?=E2=80=94=20drop=20fields=20the=20backend=20can't=20persist?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signup was a two-step form: Step 1 (name + email + password) → Step 2
(organization, role select, avatar). But the submit handler only
shipped {email, password, display_name}; organization, role, and
avatar were silently dropped, and the backend User model has no
fields for them today.

Reduce to single-step (name + email + password). Removes the unused
RoleOptionKey type and ROLE_OPTION_KEYS export from agents.ts. If
these fields are needed later we can add them back together with the
backend schema, instead of asking users to fill them into the void.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/lib/agents.ts    |  17 ---
 src/pages/Signup.tsx | 314 ++++++++++---------------------------------
 2 files changed, 69 insertions(+), 262 deletions(-)

diff --git a/src/lib/agents.ts b/src/lib/agents.ts
index 6d1a516..6531576 100644
--- a/src/lib/agents.ts
+++ b/src/lib/agents.ts
@@ -85,20 +85,3 @@ export const AGENTS: Agent[] = [
 export const AGENT_BY_ID: Record<AgentId, Agent> = Object.fromEntries(
   AGENTS.map((a) => [a.id, a]),
 ) as Record<AgentId, Agent>;
-
-export type RoleOptionKey =
-  | 'mothertongue'
-  | 'facilitator'
-  | 'advisor'
-  | 'consultant'
-  | 'administrator'
-  | 'other';
-
-export const ROLE_OPTION_KEYS: RoleOptionKey[] = [
-  'mothertongue',
-  'facilitator',
-  'advisor',
-  'consultant',
-  'administrator',
-  'other',
-];
diff --git a/src/pages/Signup.tsx b/src/pages/Signup.tsx
index 99b28b2..c144e91 100644
--- a/src/pages/Signup.tsx
+++ b/src/pages/Signup.tsx
@@ -1,10 +1,8 @@
 import { useState, type FormEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link, useLocation } from 'wouter';
-import { Icon } from '../components/Icon';
-import { Alert, Button, Input, Select } from '../components/primitives';
+import { Alert, Button, Input } from '../components/primitives';
 import { AuthShell } from '../components/shells';
-import { ROLE_OPTION_KEYS, type RoleOptionKey } from '../lib/agents';
 import { useToast } from '../lib/hooks/useToast';
 import { useAuthStore } from '../lib/stores/authStore';
 
@@ -14,8 +12,6 @@ interface SignupForm {
   email: string;
   password: string;
   confirmPassword: string;
-  organization: string;
-  role: RoleOptionKey;
 }
 
 const initialForm = (): SignupForm => ({
@@ -24,21 +20,22 @@ const initialForm = (): SignupForm => ({
   email: '',
   password: '',
   confirmPassword: '',
-  organization: '',
-  role: ROLE_OPTION_KEYS[0],
 });
 
 export default function Signup() {
   const { t } = useTranslation();
   const [, navigate] = useLocation();
-  const [step, setStep] = useState<1 | 2>(1);
   const [form, setForm] = useState<SignupForm>(initialForm);
   const [error, setError] = useState<string | null>(null);
   const [submitting, setSubmitting] = useState(false);
   const toast = useToast();
   const signup = useAuthStore((s) => s.signup);
 
-  const onCreate = async () => {
+  const patch = (key: keyof SignupForm, value: string) =>
+    setForm((prev) => ({ ...prev, [key]: value }));
+
+  const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
     setError(null);
     if (form.password !== form.confirmPassword) {
       setError(t('auth.passwordsDontMatch'));
@@ -85,264 +82,91 @@ export default function Signup() {
 
   return (
     <AuthShell alert={alert}>
-      <ProgressBar step={step} />
-
       <div className="tw-h2" style={{ marginBottom: 6 }}>
-        {step === 1 ? t('auth.createYourAccount') : t('auth.tellAboutYourWork')}
+        {t('auth.createYourAccount')}
       </div>
       <div className="tw-small" style={{ color: 'var(--text-2)', marginBottom: 24 }}>
-        {step === 1 ? t('auth.fewDetailsToSetUp') : t('auth.helpsUsTailor')}
+        {t('auth.fewDetailsToSetUp')}
       </div>
 
-      {step === 1 ? (
-        <AccountStep form={form} setForm={setForm} onNext={() => setStep(2)} />
-      ) : (
-        <ProfileStep
-          form={form}
-          setForm={setForm}
-          onBack={() => setStep(1)}
-          onCreate={onCreate}
-          submitting={submitting}
-        />
-      )}
-
-      <div style={{ marginTop: 24, paddingTop: 18, borderTop: '1px solid var(--border-subtle)' }}>
-        <div className="tw-small" style={{ textAlign: 'center', color: 'var(--text-2)' }}>
-          {t('auth.alreadyHaveAccount')}{' '}
-          <Link href="/login" style={{ color: 'var(--accent)', fontWeight: 500 }}>
-            {t('auth.signIn')}
-          </Link>
-        </div>
-      </div>
-    </AuthShell>
-  );
-}
-
-function ProgressBar({ step }: { step: 1 | 2 }) {
-  const { t } = useTranslation();
-  return (
-    <div style={{ marginBottom: 24 }}>
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          marginBottom: 10,
-        }}
+      <form
+        onSubmit={onSubmit}
+        style={{ display: 'flex', flexDirection: 'column', gap: 14 }}
       >
-        <span className="tw-eyebrow">{t('auth.stepOf', { current: step, total: 2 })}</span>
-        <span className="tw-micro" style={{ color: 'var(--text-3)' }}>
-          {step === 1 ? t('auth.stepAccount') : t('auth.stepProfile')}
-        </span>
-      </div>
-      <div style={{ display: 'flex', gap: 4 }}>
-        <div style={{ flex: 1, height: 3, background: 'var(--accent)', borderRadius: 999 }} />
-        <div
-          style={{
-            flex: 1,
-            height: 3,
-            background: step === 2 ? 'var(--accent)' : 'var(--surface-2)',
-            borderRadius: 999,
-          }}
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
+          <Input
+            label={t('auth.firstName')}
+            placeholder={t('auth.firstNamePlaceholder')}
+            autoComplete="given-name"
+            value={form.firstName}
+            onChange={(e) => patch('firstName', e.currentTarget.value)}
+            disabled={submitting}
+            required
+          />
+          <Input
+            label={t('auth.lastName')}
+            placeholder={t('auth.lastNamePlaceholder')}
+            autoComplete="family-name"
+            value={form.lastName}
+            onChange={(e) => patch('lastName', e.currentTarget.value)}
+            disabled={submitting}
+            required
+          />
+        </div>
+        <Input
+          label={t('auth.email')}
+          type="email"
+          placeholder={t('auth.emailPlaceholder')}
+          leadingIcon="mail"
+          autoComplete="email"
+          value={form.email}
+          onChange={(e) => patch('email', e.currentTarget.value)}
+          disabled={submitting}
+          required
         />
-      </div>
-    </div>
-  );
-}
-
-function AccountStep({
-  form,
-  setForm,
-  onNext,
-}: {
-  form: SignupForm;
-  setForm: (updater: (prev: SignupForm) => SignupForm) => void;
-  onNext: () => void;
-}) {
-  const { t } = useTranslation();
-  const patch = (key: keyof SignupForm, value: string) =>
-    setForm((prev) => ({ ...prev, [key]: value }));
-
-  const onSubmit = (e: FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    onNext();
-  };
-
-  return (
-    <form
-      onSubmit={onSubmit}
-      style={{ display: 'flex', flexDirection: 'column', gap: 14 }}
-    >
-      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
         <Input
-          label={t('auth.firstName')}
-          placeholder={t('auth.firstNamePlaceholder')}
-          autoComplete="given-name"
-          value={form.firstName}
-          onChange={(e) => patch('firstName', e.currentTarget.value)}
+          label={t('auth.password')}
+          type="password"
+          placeholder={t('auth.passwordCreatePlaceholder')}
+          leadingIcon="lock"
+          hint={t('auth.passwordHint')}
+          autoComplete="new-password"
+          value={form.password}
+          onChange={(e) => patch('password', e.currentTarget.value)}
+          disabled={submitting}
           required
         />
         <Input
-          label={t('auth.lastName')}
-          placeholder={t('auth.lastNamePlaceholder')}
-          autoComplete="family-name"
-          value={form.lastName}
-          onChange={(e) => patch('lastName', e.currentTarget.value)}
+          label={t('auth.confirmPassword')}
+          type="password"
+          placeholder={t('auth.confirmPasswordPlaceholder')}
+          leadingIcon="lock"
+          autoComplete="new-password"
+          value={form.confirmPassword}
+          onChange={(e) => patch('confirmPassword', e.currentTarget.value)}
+          disabled={submitting}
           required
         />
-      </div>
-      <Input
-        label={t('auth.email')}
-        type="email"
-        placeholder={t('auth.emailPlaceholder')}
-        leadingIcon="mail"
-        autoComplete="email"
-        value={form.email}
-        onChange={(e) => patch('email', e.currentTarget.value)}
-        required
-      />
-      <Input
-        label={t('auth.password')}
-        type="password"
-        placeholder={t('auth.passwordCreatePlaceholder')}
-        leadingIcon="lock"
-        hint={t('auth.passwordHint')}
-        autoComplete="new-password"
-        value={form.password}
-        onChange={(e) => patch('password', e.currentTarget.value)}
-        required
-      />
-      <Input
-        label={t('auth.confirmPassword')}
-        type="password"
-        placeholder={t('auth.confirmPasswordPlaceholder')}
-        leadingIcon="lock"
-        autoComplete="new-password"
-        value={form.confirmPassword}
-        onChange={(e) => patch('confirmPassword', e.currentTarget.value)}
-        required
-      />
-      <Button
-        type="submit"
-        variant="primary"
-        size="md"
-        trailingIcon="arrow-right"
-        fullWidth
-        style={{ marginTop: 8 }}
-      >
-        {t('common.continue')}
-      </Button>
-    </form>
-  );
-}
-
-function ProfileStep({
-  form,
-  setForm,
-  onBack,
-  onCreate,
-  submitting,
-}: {
-  form: SignupForm;
-  setForm: (updater: (prev: SignupForm) => SignupForm) => void;
-  onBack: () => void;
-  onCreate: () => void;
-  submitting: boolean;
-}) {
-  const { t } = useTranslation();
-  const patch = <K extends keyof SignupForm>(key: K, value: SignupForm[K]) =>
-    setForm((prev) => ({ ...prev, [key]: value }));
-
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
-      <AvatarUploader />
-      <Input
-        label={t('auth.organization')}
-        placeholder={t('auth.organizationPlaceholder')}
-        value={form.organization}
-        onChange={(e) => patch('organization', e.currentTarget.value)}
-        disabled={submitting}
-      />
-      <Select
-        label={t('auth.yourRole')}
-        value={form.role}
-        onChange={(v) => patch('role', v as RoleOptionKey)}
-        disabled={submitting}
-        options={ROLE_OPTION_KEYS.map((r) => ({ value: r, label: t(`agents.roleOptions.${r}`) }))}
-      />
-      <div style={{ display: 'flex', gap: 10, marginTop: 4 }}>
-        <Button variant="ghost" leadingIcon="chevron-left" onClick={onBack}>
-          {t('common.back')}
-        </Button>
         <Button
+          type="submit"
           variant="primary"
           size="md"
-          style={{ flex: 1 }}
-          onClick={onCreate}
+          fullWidth
           disabled={submitting}
+          style={{ marginTop: 8 }}
         >
           {submitting ? t('auth.creatingAccount') : t('auth.createAccount')}
         </Button>
-      </div>
-    </div>
-  );
-}
+      </form>
 
-function AvatarUploader() {
-  const { t } = useTranslation();
-  const toast = useToast();
-  return (
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        gap: 10,
-        marginBottom: 4,
-      }}
-    >
-      <div style={{ position: 'relative', width: 110, height: 110 }}>
-        <div
-          style={{
-            width: 110,
-            height: 110,
-            borderRadius: 999,
-            background: 'var(--surface-2)',
-            border: '1px solid var(--border-subtle)',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            color: 'var(--text-3)',
-          }}
-        >
-          <Icon name="user" size={40} strokeWidth={1.5} />
+      <div style={{ marginTop: 24, paddingTop: 18, borderTop: '1px solid var(--border-subtle)' }}>
+        <div className="tw-small" style={{ textAlign: 'center', color: 'var(--text-2)' }}>
+          {t('auth.alreadyHaveAccount')}{' '}
+          <Link href="/login" style={{ color: 'var(--accent)', fontWeight: 500 }}>
+            {t('auth.signIn')}
+          </Link>
         </div>
-        <button
-          onClick={() => toast.show({ title: t('auth.photoUploadComingSoon') })}
-          style={{
-            position: 'absolute',
-            right: -2,
-            bottom: -2,
-            width: 36,
-            height: 36,
-            borderRadius: 999,
-            background: 'var(--accent)',
-            color: 'var(--on-accent)',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            border: '3px solid var(--paper)',
-            boxShadow: 'var(--shadow-sm)',
-            cursor: 'pointer',
-          }}
-          aria-label={t('auth.addPhotoOptional')}
-        >
-          <Icon name="camera" size={14} />
-        </button>
       </div>
-      <div className="tw-micro" style={{ color: 'var(--text-3)' }}>
-        {t('auth.addPhotoOptional')}
-      </div>
-    </div>
+    </AuthShell>
   );
 }

From debc61361de279ca74510de5af37af850a911f14 Mon Sep 17 00:00:00 2001
From: Joao <joaocarvoli@hotmail.com>
Date: Sun, 17 May 2026 14:04:53 -0500
Subject: [PATCH 2/7] feat(chat): pass UI locale as TTS language_code
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The /audio/speak endpoint runs langdetect when language_code is
absent, but its 0.85 confidence threshold + 12-char minimum mean that
short replies (the typical Listen target) flop to the en-US fallback.
The UI already knows the locale — pass it.

Also drops the unused voice_name plumbing (no UI surface ever set it).

ttsLanguageCode() maps our i18n locales (en, pt-BR, es, fr) to the
BCP-47 codes the backend's VOICE_MAP understands.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/chat/MessageActions.tsx |  8 ++++++--
 src/lib/api/audio.ts                   | 19 +++++++++++++++++--
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/components/chat/MessageActions.tsx b/src/components/chat/MessageActions.tsx
index 5c11ef6..ef7ff79 100644
--- a/src/components/chat/MessageActions.tsx
+++ b/src/components/chat/MessageActions.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { audioApi } from '../../lib/api';
+import { ttsLanguageCode } from '../../lib/api/audio';
 import { useToast } from '../../lib/hooks/useToast';
 import { stripMarkdownForSpeech } from '../../lib/text/stripMarkdownForSpeech';
 import { Icon } from '../Icon';
@@ -13,7 +14,7 @@ interface MessageActionsProps {
 type PlaybackState = 'idle' | 'loading' | 'playing';
 
 export function MessageActions({ copyText }: MessageActionsProps) {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const toast = useToast();
   const [state, setState] = useState<PlaybackState>('idle');
   const audioRef = useRef<HTMLAudioElement | null>(null);
@@ -69,7 +70,10 @@ export function MessageActions({ copyText }: MessageActionsProps) {
 
     setState('loading');
     try {
-      const { audio_base64, mime_type } = await audioApi.speak(spoken.slice(0, 4500));
+      const { audio_base64, mime_type } = await audioApi.speak(
+        spoken.slice(0, 4500),
+        ttsLanguageCode(i18n.language),
+      );
       const bin = atob(audio_base64);
       const bytes = new Uint8Array(bin.length);
       for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i);
diff --git a/src/lib/api/audio.ts b/src/lib/api/audio.ts
index 1f5a662..f56898e 100644
--- a/src/lib/api/audio.ts
+++ b/src/lib/api/audio.ts
@@ -1,6 +1,21 @@
 import { api } from './client';
 import type { SpeakResponse, TranscribeResponse } from './types';
 
+const UI_LOCALE_TO_TTS: Record<string, string> = {
+  en: 'en-US',
+  'pt-BR': 'pt-BR',
+  es: 'es-ES',
+  fr: 'fr-FR',
+};
+
+/** Resolve a UI i18n locale (e.g. "en", "pt-BR") to a Google TTS language code
+ *  the backend's VOICE_MAP understands. Returns undefined if unknown so the
+ *  backend can fall back to its own langdetect. */
+export function ttsLanguageCode(uiLocale: string | null | undefined): string | undefined {
+  if (!uiLocale) return undefined;
+  return UI_LOCALE_TO_TTS[uiLocale] ?? UI_LOCALE_TO_TTS[uiLocale.split('-')[0]];
+}
+
 export async function transcribeAudio(
   blob: Blob,
   filename = 'recording.webm',
@@ -16,10 +31,10 @@ export async function transcribeAudio(
   return data;
 }
 
-export async function speak(text: string, voiceName?: string): Promise<SpeakResponse> {
+export async function speak(text: string, languageCode?: string): Promise<SpeakResponse> {
   const { data } = await api.post<SpeakResponse>('/api/translation-helper/audio/speak', {
     text,
-    voice_name: voiceName,
+    language_code: languageCode,
   });
   return data;
 }

From cafde6478668b2042f10a3cc7bda4f6bfb8e719a Mon Sep 17 00:00:00 2001
From: Joao <joaocarvoli@hotmail.com>
Date: Sun, 17 May 2026 14:04:59 -0500
Subject: [PATCH 3/7] chore(api): drop AgentInfo extras and
 TranscribeResponse.duration_sec
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

GET /api/translation-helper/agents now returns only id/name/description/
prompt_version (icons/shorts/starters were never read off the response
— they live in agents.ts because they need i18n). Mirror that on the
type. Same for duration_sec, which the backend never populated.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/lib/api/types.ts | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/lib/api/types.ts b/src/lib/api/types.ts
index 1ce07ac..77c8dd1 100644
--- a/src/lib/api/types.ts
+++ b/src/lib/api/types.ts
@@ -47,9 +47,6 @@ export interface AgentInfo {
   id: AgentId;
   name: string;
   description: string;
-  short: string;
-  icon: string;
-  starters: string[];
   prompt_version: number | null;
 }
 
@@ -91,7 +88,6 @@ export interface AgentPrompt {
 
 export interface TranscribeResponse {
   text: string;
-  duration_sec: number | null;
 }
 
 export interface SpeakResponse {

From a3cd1037aa6a4bcaa07d5dd0af2ecc614bbf2e49 Mon Sep 17 00:00:00 2001
From: Joao <joaocarvoli@hotmail.com>
Date: Sun, 17 May 2026 14:05:02 -0500
Subject: [PATCH 4/7] chore: extract TH_APP_KEY constant for translation-helper

The literal 'translation-helper' was hardcoded in three places. Move
it to src/lib/constants.ts so future apps (or a rename) only have to
edit one site.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/lib/api/auth.ts         | 5 +++--
 src/lib/constants.ts        | 1 +
 src/lib/stores/authStore.ts | 7 ++++---
 3 files changed, 8 insertions(+), 5 deletions(-)
 create mode 100644 src/lib/constants.ts

diff --git a/src/lib/api/auth.ts b/src/lib/api/auth.ts
index 642bc70..e698021 100644
--- a/src/lib/api/auth.ts
+++ b/src/lib/api/auth.ts
@@ -1,3 +1,4 @@
+import { TH_APP_KEY } from '../constants';
 import { api } from './client';
 import type { CurrentUser } from './types';
 
@@ -40,7 +41,7 @@ export async function updateProfile(payload: {
   return data;
 }
 
-export async function forgotPassword(email: string, appKey = 'translation-helper'): Promise<void> {
+export async function forgotPassword(email: string, appKey: string = TH_APP_KEY): Promise<void> {
   await api.post('/api/auth/forgot-password', { email, app_key: appKey });
 }
 
@@ -49,7 +50,7 @@ export async function resetPassword(token: string, password: string): Promise<vo
 }
 
 export async function requestAccess(
-  appKey = 'translation-helper',
+  appKey: string = TH_APP_KEY,
   note?: string,
 ): Promise<void> {
   await api.post('/api/access-requests', { app_key: appKey, note });
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
new file mode 100644
index 0000000..20df14e
--- /dev/null
+++ b/src/lib/constants.ts
@@ -0,0 +1 @@
+export const TH_APP_KEY = 'translation-helper';
diff --git a/src/lib/stores/authStore.ts b/src/lib/stores/authStore.ts
index 3e461b4..8f6e75b 100644
--- a/src/lib/stores/authStore.ts
+++ b/src/lib/stores/authStore.ts
@@ -2,6 +2,7 @@ import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 import i18n, { LOCALE_STORAGE_KEY, isSupportedLocale } from '../../i18n';
 import { authApi, configureApiAuth, type CurrentUser } from '../api';
+import { TH_APP_KEY } from '../constants';
 import { useChatHistoryStore } from './chatHistoryStore';
 
 function syncLocaleFromUser(user: CurrentUser | null): void {
@@ -85,10 +86,10 @@ export const useAuthStore = create<AuthState>()(
           });
           let accessRequested = true;
           try {
-            await authApi.requestAccess('translation-helper');
+            await authApi.requestAccess(TH_APP_KEY);
           } catch (err) {
             accessRequested = false;
-            console.warn('translation-helper access request failed:', err);
+            console.warn(`${TH_APP_KEY} access request failed:`, err);
           }
           return { accessRequested };
         } catch (e) {
@@ -120,7 +121,7 @@ export const useAuthStore = create<AuthState>()(
 
       refreshMyRoles: async () => {
         try {
-          const roles = await authApi.myRoles('translation-helper');
+          const roles = await authApi.myRoles(TH_APP_KEY);
           set({ appRoles: roles.map((r) => r.role_key) });
         } catch {
           set({ appRoles: [] });

From 570b92f3a3c7e3262ce282fd60fca67a1c8b5bda Mon Sep 17 00:00:00 2001
From: Joao <joaocarvoli@hotmail.com>
Date: Sun, 17 May 2026 14:05:04 -0500
Subject: [PATCH 5/7] refactor(chat): simplify SSE error parse path
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Previous code wrapped the throw inside the JSON.parse try/catch, then
re-threw from the catch — works, but the control flow is hard to
follow. Parse the JSON first, then throw outside the try.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/lib/api/chats.ts | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/lib/api/chats.ts b/src/lib/api/chats.ts
index c8e005d..122048b 100644
--- a/src/lib/api/chats.ts
+++ b/src/lib/api/chats.ts
@@ -101,13 +101,14 @@ export async function streamChatMessage(
           // ignore malformed
         }
       } else if (eventName === 'error') {
+        let message = 'Streaming error';
         try {
           const parsed = JSON.parse(dataLine) as { message?: string };
-          throw new Error(parsed.message || 'Streaming error');
-        } catch (e) {
-          if (e instanceof Error) throw e;
-          throw new Error('Streaming error');
+          if (parsed.message) message = parsed.message;
+        } catch {
+          // Malformed error payload — fall back to default message.
         }
+        throw new Error(message);
       } else if (eventName === 'done') {
         return;
       }

From bf4977ad0ba1e4cc828470fad1e6adfc727276e1 Mon Sep 17 00:00:00 2001
From: Joao <joaocarvoli@hotmail.com>
Date: Sun, 17 May 2026 14:05:07 -0500
Subject: [PATCH 6/7] refactor(chat): derive rotateAgent's ID list from AGENTS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

useChat hardcoded ['storyteller', 'conversation', 'oral', 'health',
'backtrans'] alongside the AGENTS array — drift the moment a new
agent lands. Export AGENT_IDS from agents.ts and use it.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/lib/agents.ts         | 2 ++
 src/lib/hooks/useChat.tsx | 5 ++---
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/lib/agents.ts b/src/lib/agents.ts
index 6531576..126c198 100644
--- a/src/lib/agents.ts
+++ b/src/lib/agents.ts
@@ -85,3 +85,5 @@ export const AGENTS: Agent[] = [
 export const AGENT_BY_ID: Record<AgentId, Agent> = Object.fromEntries(
   AGENTS.map((a) => [a.id, a]),
 ) as Record<AgentId, Agent>;
+
+export const AGENT_IDS: AgentId[] = AGENTS.map((a) => a.id);
diff --git a/src/lib/hooks/useChat.tsx b/src/lib/hooks/useChat.tsx
index f424d17..fd45538 100644
--- a/src/lib/hooks/useChat.tsx
+++ b/src/lib/hooks/useChat.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'wouter';
-import { AGENT_BY_ID, type Agent, type AgentId } from '../agents';
+import { AGENT_BY_ID, AGENT_IDS, type Agent, type AgentId } from '../agents';
 import { chatsApi } from '../api';
 import type { ChatMessageDto } from '../api/types';
 import type { ChatMessageSeed } from '../fixtures';
@@ -223,8 +223,7 @@ export function useChat(chatId?: string, opts: UseChatOptions = {}) {
   }, []);
 
   const rotateAgent = useCallback(() => {
-    const ids: AgentId[] = ['storyteller', 'conversation', 'oral', 'health', 'backtrans'];
-    setAgentId((cur) => ids[(ids.indexOf(cur) + 1) % ids.length]);
+    setAgentId((cur) => AGENT_IDS[(AGENT_IDS.indexOf(cur) + 1) % AGENT_IDS.length]);
   }, []);
 
   const agent: Agent = useMemo(() => AGENT_BY_ID[agentId], [agentId]);

From addaccdd8e5deaf513b4436b2cc12525ace6b252 Mon Sep 17 00:00:00 2001
From: Joao <joaocarvoli@hotmail.com>
Date: Sun, 17 May 2026 21:23:05 -0500
Subject: [PATCH 7/7] feat(chat): render markdown in assistant replies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Gemini outputs markdown (**bold**, headings, lists, etc.) but
AssistantMessage was rendering the content as raw text — readers saw
the literal asterisks instead of formatted output (see screenshot).

Adds a small dependency-free markdown renderer (MarkdownContent) that
handles headings, paragraphs, bold, italic, lists (ul/ol),
blockquotes, code blocks, inline code, links, and horizontal rules.
Stream-safe: unclosed **bold leaves the literal characters in place
until the closing pair arrives.

AssistantMessage runs the renderer only when children is a string, so
user messages and the streaming indicator are unaffected.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/chat/AssistantMessage.tsx |   3 +-
 src/components/chat/MarkdownContent.tsx  | 324 +++++++++++++++++++++++
 2 files changed, 326 insertions(+), 1 deletion(-)
 create mode 100644 src/components/chat/MarkdownContent.tsx

diff --git a/src/components/chat/AssistantMessage.tsx b/src/components/chat/AssistantMessage.tsx
index 6a57e61..9d79f32 100644
--- a/src/components/chat/AssistantMessage.tsx
+++ b/src/components/chat/AssistantMessage.tsx
@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { AGENT_BY_ID, type AgentId } from '../../lib/agents';
 import { Icon } from '../Icon';
 import { Streaming } from '../primitives';
+import { MarkdownContent } from './MarkdownContent';
 import { MessageActions } from './MessageActions';
 
 interface AssistantMessageProps {
@@ -58,7 +59,7 @@ export function AssistantMessage({
         </div>
       )}
       <div style={{ fontSize: 15, lineHeight: 1.7, color: 'var(--text)' }}>
-        {children}
+        {typeof children === 'string' ? <MarkdownContent text={children} /> : children}
         {streaming && (
           <span style={{ color: 'var(--text-3)' }}>
             <Streaming />
diff --git a/src/components/chat/MarkdownContent.tsx b/src/components/chat/MarkdownContent.tsx
new file mode 100644
index 0000000..8d48fdb
--- /dev/null
+++ b/src/components/chat/MarkdownContent.tsx
@@ -0,0 +1,324 @@
+import { Fragment, type ReactNode } from 'react';
+
+type Block =
+  | { kind: 'h'; level: 1 | 2 | 3 | 4 | 5 | 6; text: string }
+  | { kind: 'p'; text: string }
+  | { kind: 'ul'; items: string[] }
+  | { kind: 'ol'; items: string[] }
+  | { kind: 'quote'; text: string }
+  | { kind: 'code'; text: string }
+  | { kind: 'hr' };
+
+const HEADING_RE = /^(#{1,6})\s+(.*)$/;
+const HR_RE = /^[\s]*([-*_])\1{2,}[\s]*$/;
+const UL_RE = /^[\s]*[-*+]\s+(.*)$/;
+const OL_RE = /^[\s]*\d+\.\s+(.*)$/;
+const QUOTE_RE = /^>\s?(.*)$/;
+
+function isBlockStart(line: string): boolean {
+  return (
+    HEADING_RE.test(line) ||
+    HR_RE.test(line) ||
+    UL_RE.test(line) ||
+    OL_RE.test(line) ||
+    QUOTE_RE.test(line) ||
+    line.startsWith('```')
+  );
+}
+
+function parseBlocks(input: string): Block[] {
+  const lines = input.replace(/\r\n/g, '\n').split('\n');
+  const blocks: Block[] = [];
+  let i = 0;
+  while (i < lines.length) {
+    const line = lines[i];
+
+    if (line.startsWith('```')) {
+      i++;
+      const codeLines: string[] = [];
+      while (i < lines.length && !lines[i].startsWith('```')) {
+        codeLines.push(lines[i]);
+        i++;
+      }
+      if (i < lines.length) i++;
+      blocks.push({ kind: 'code', text: codeLines.join('\n') });
+      continue;
+    }
+
+    if (HR_RE.test(line)) {
+      blocks.push({ kind: 'hr' });
+      i++;
+      continue;
+    }
+
+    const h = HEADING_RE.exec(line);
+    if (h) {
+      blocks.push({
+        kind: 'h',
+        level: Math.min(6, h[1].length) as 1 | 2 | 3 | 4 | 5 | 6,
+        text: h[2],
+      });
+      i++;
+      continue;
+    }
+
+    if (QUOTE_RE.test(line)) {
+      const quoteLines: string[] = [];
+      while (i < lines.length) {
+        const m = QUOTE_RE.exec(lines[i]);
+        if (!m) break;
+        quoteLines.push(m[1]);
+        i++;
+      }
+      blocks.push({ kind: 'quote', text: quoteLines.join('\n') });
+      continue;
+    }
+
+    if (UL_RE.test(line)) {
+      const items: string[] = [];
+      while (i < lines.length) {
+        const m = UL_RE.exec(lines[i]);
+        if (!m) break;
+        items.push(m[1]);
+        i++;
+      }
+      blocks.push({ kind: 'ul', items });
+      continue;
+    }
+
+    if (OL_RE.test(line)) {
+      const items: string[] = [];
+      while (i < lines.length) {
+        const m = OL_RE.exec(lines[i]);
+        if (!m) break;
+        items.push(m[1]);
+        i++;
+      }
+      blocks.push({ kind: 'ol', items });
+      continue;
+    }
+
+    if (line.trim() === '') {
+      i++;
+      continue;
+    }
+
+    const paraLines: string[] = [];
+    while (i < lines.length && lines[i].trim() !== '' && !isBlockStart(lines[i])) {
+      paraLines.push(lines[i]);
+      i++;
+    }
+    blocks.push({ kind: 'p', text: paraLines.join('\n') });
+  }
+  return blocks;
+}
+
+const INLINE_RE =
+  /(`[^`\n]+`)|(\*\*[\s\S]+?\*\*)|(__[\s\S]+?__)|(\*[^*\n]+\*)|(_[^_\n]+_)|(\[[^\]]+\]\([^)\s]+\))/g;
+
+function renderInline(text: string, keyPrefix: string): ReactNode[] {
+  if (!text) return [];
+  const out: ReactNode[] = [];
+  let lastIndex = 0;
+  let k = 0;
+  text.replace(INLINE_RE, (match, code, b1, b2, i1, i2, link, offset: number) => {
+    if (offset > lastIndex) {
+      out.push(...withSoftBreaks(text.slice(lastIndex, offset), `${keyPrefix}t${k++}`));
+    }
+    if (code) {
+      out.push(
+        <code
+          key={`${keyPrefix}c${k++}`}
+          style={{
+            background: 'var(--surface-2)',
+            border: '1px solid var(--border-subtle)',
+            borderRadius: 6,
+            padding: '1px 6px',
+            fontSize: '0.9em',
+            fontFamily:
+              "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+          }}
+        >
+          {match.slice(1, -1)}
+        </code>,
+      );
+    } else if (b1 || b2) {
+      const inner = match.slice(2, -2);
+      out.push(
+        <strong key={`${keyPrefix}b${k++}`} style={{ fontWeight: 600, color: 'var(--text)' }}>
+          {renderInline(inner, `${keyPrefix}b${k}.`)}
+        </strong>,
+      );
+    } else if (i1 || i2) {
+      const inner = match.slice(1, -1);
+      out.push(
+        <em key={`${keyPrefix}i${k++}`}>
+          {renderInline(inner, `${keyPrefix}i${k}.`)}
+        </em>,
+      );
+    } else if (link) {
+      const closeBracket = match.indexOf(']');
+      const linkText = match.slice(1, closeBracket);
+      const url = match.slice(closeBracket + 2, -1);
+      out.push(
+        <a
+          key={`${keyPrefix}l${k++}`}
+          href={url}
+          target="_blank"
+          rel="noreferrer noopener"
+          style={{ color: 'var(--accent)', textDecoration: 'underline' }}
+        >
+          {renderInline(linkText, `${keyPrefix}l${k}.`)}
+        </a>,
+      );
+    }
+    lastIndex = offset + match.length;
+    return match;
+  });
+  if (lastIndex < text.length) {
+    out.push(...withSoftBreaks(text.slice(lastIndex), `${keyPrefix}t${k++}`));
+  }
+  return out;
+}
+
+function withSoftBreaks(text: string, keyPrefix: string): ReactNode[] {
+  if (!text.includes('\n')) return [text];
+  const parts = text.split('\n');
+  const out: ReactNode[] = [];
+  parts.forEach((part, idx) => {
+    if (idx > 0) out.push(<br key={`${keyPrefix}br${idx}`} />);
+    if (part) out.push(<Fragment key={`${keyPrefix}s${idx}`}>{part}</Fragment>);
+  });
+  return out;
+}
+
+interface MarkdownContentProps {
+  text: string;
+}
+
+export function MarkdownContent({ text }: MarkdownContentProps) {
+  const blocks = parseBlocks(text);
+  return (
+    <>
+      {blocks.map((block, idx) => {
+        const key = `b${idx}`;
+        switch (block.kind) {
+          case 'h': {
+            const Tag = (`h${block.level}` as unknown) as keyof JSX.IntrinsicElements;
+            const size = [1.5, 1.3, 1.15, 1.05, 1, 0.95][block.level - 1];
+            return (
+              <Tag
+                key={key}
+                style={{
+                  fontSize: `${size}em`,
+                  fontWeight: 600,
+                  marginTop: idx === 0 ? 0 : '1.2em',
+                  marginBottom: '0.6em',
+                  lineHeight: 1.3,
+                  color: 'var(--text)',
+                }}
+              >
+                {renderInline(block.text, `${key}.`)}
+              </Tag>
+            );
+          }
+          case 'p':
+            return (
+              <p
+                key={key}
+                style={{ margin: idx === 0 ? '0 0 0.9em' : '0.9em 0', lineHeight: 1.7 }}
+              >
+                {renderInline(block.text, `${key}.`)}
+              </p>
+            );
+          case 'ul':
+            return (
+              <ul
+                key={key}
+                style={{
+                  margin: '0.9em 0',
+                  paddingLeft: '1.5em',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: '0.35em',
+                }}
+              >
+                {block.items.map((item, j) => (
+                  <li key={`${key}.i${j}`} style={{ lineHeight: 1.6 }}>
+                    {renderInline(item, `${key}.i${j}.`)}
+                  </li>
+                ))}
+              </ul>
+            );
+          case 'ol':
+            return (
+              <ol
+                key={key}
+                style={{
+                  margin: '0.9em 0',
+                  paddingLeft: '1.6em',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: '0.35em',
+                }}
+              >
+                {block.items.map((item, j) => (
+                  <li key={`${key}.i${j}`} style={{ lineHeight: 1.6 }}>
+                    {renderInline(item, `${key}.i${j}.`)}
+                  </li>
+                ))}
+              </ol>
+            );
+          case 'quote':
+            return (
+              <blockquote
+                key={key}
+                style={{
+                  margin: '0.9em 0',
+                  padding: '0.4em 0.9em',
+                  borderLeft: '3px solid var(--accent)',
+                  background: 'var(--surface-2)',
+                  borderRadius: '0 8px 8px 0',
+                  color: 'var(--text-2)',
+                  fontStyle: 'italic',
+                }}
+              >
+                {renderInline(block.text, `${key}.`)}
+              </blockquote>
+            );
+          case 'code':
+            return (
+              <pre
+                key={key}
+                style={{
+                  margin: '0.9em 0',
+                  padding: '0.8em 1em',
+                  background: 'var(--surface-2)',
+                  border: '1px solid var(--border-subtle)',
+                  borderRadius: 8,
+                  overflowX: 'auto',
+                  fontFamily:
+                    "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+                  fontSize: '0.9em',
+                  lineHeight: 1.5,
+                }}
+              >
+                <code>{block.text}</code>
+              </pre>
+            );
+          case 'hr':
+            return (
+              <hr
+                key={key}
+                style={{
+                  border: 0,
+                  borderTop: '1px solid var(--border-subtle)',
+                  margin: '1.2em 0',
+                }}
+              />
+            );
+        }
+      })}
+    </>
+  );
+}