cursedbelt 5.46.2 → 5.47.0

package/src/react/components/auth/AuthCard.tsx

@@ -57,7 +57,10 @@ export function AuthCard({
     <div
       className={cn(
         'flex w-full flex-col items-center justify-center gap-6 p-4',
-        aurora ? 'dark cb-aurora cb-auth-aurora' : 'bg-background',
+        // The page colour belongs to the full-screen page only. Embedded, the card sits on its
+        // host's surface — painting `bg-background` there drew a slab around it, a box on a box
+        // inside the host's panel (forge task 2466).
+        aurora ? 'dark cb-aurora cb-auth-aurora' : fullScreen && 'bg-background',
         fullScreen && 'min-h-dvh',
         className,
       )}

package/src/react/components/auth/PasswordSetFields.tsx

@@ -36,17 +36,13 @@ export function PasswordSetFields({
 
   return (
     <>
-      <div className='flex flex-col gap-1.5'>
-        <AuthPasswordField
-          name={passwordName}
-          label={passwordLabel}
-          autoComplete='new-password'
-          autoFocus={autoFocus}
-        />
-        {showStrength ? (
-          <PasswordStrengthMeter value={password ?? ''} minLength={minPasswordLength} />
-        ) : null}
-      </div>
+      <AuthPasswordField
+        name={passwordName}
+        label={passwordLabel}
+        autoComplete='new-password'
+        autoFocus={autoFocus}
+        status={showStrength && password ? <PasswordStrengthMeter value={password} minLength={minPasswordLength} /> : undefined}
+      />
       {showConfirm ? (
         <AuthPasswordField name={confirmName} label={confirmLabel} autoComplete='new-password' />
       ) : null}

package/src/react/components/auth/PasswordStrengthMeter.tsx

@@ -40,9 +40,11 @@ export function PasswordStrengthMeter({
   if (!value) return null;
   const tone = SEGMENT_TONE[level as Exclude<PasswordStrengthLevel, 'empty'>];
 
+  // ONE line (forge task 2466): it sits in a field's error slot (`Field status`), which is one
+  // line of `text-sm` tall, so the bars and the word share a row rather than stacking.
   return (
-    <div className={cn('flex flex-col gap-1', className)}>
-      <div className='flex gap-1' aria-hidden>
+    <div className={cn('flex min-h-[1lh] items-center gap-3 text-sm', className)}>
+      <div className='flex flex-1 gap-1' aria-hidden>
         {[0, 1, 2, 3].map((i) => (
           <span
             key={i}
@@ -54,7 +56,7 @@ export function PasswordStrengthMeter({
         ))}
       </div>
       <p
-        className='text-xs text-muted-foreground'
+        className='m-0 shrink-0 text-xs text-muted-foreground'
         role='status'
         aria-label={`Password strength: ${LABEL[level]}`}
       >

package/src/react/components/auth/RegisterForm.tsx

@@ -82,12 +82,12 @@ export function RegisterForm({
     >
       {children}
 
-      <div className='flex flex-col gap-1.5'>
-        <AuthPasswordField name='password' label='Password' autoComplete='new-password' />
-        {showStrength ? (
-          <PasswordStrengthMeter value={password} minLength={minPasswordLength} />
-        ) : null}
-      </div>
+      <AuthPasswordField
+        name='password'
+        label='Password'
+        autoComplete='new-password'
+        status={showStrength && password ? <PasswordStrengthMeter value={password} minLength={minPasswordLength} /> : undefined}
+      />
 
       <AuthPasswordField
         name='confirmPassword'

package/src/react/components/auth/SignupForm.spec.tsx

@@ -52,6 +52,23 @@ describe('SignupForm', () => {
     expect(queryByText(/Password strength/)).not.toBeNull();
   });
 
+  test('a password validates on BLUR, like every other field — not only on submit (task 2466)', async () => {
+    const { container, findByText } = render(<SignupForm onSubmit={async () => {}} />);
+    const password = container.querySelector('#cb-f-password') as HTMLInputElement;
+    fireEvent.change(password, { target: { value: 'short' } });
+    fireEvent.blur(password);
+    await findByText('Use at least 8 characters');
+  });
+
+  test("the terms error is a field error like every other — icon, and wired to the checkbox (task 2466)", async () => {
+    const { getByRole, findByText } = render(<SignupForm onSubmit={async () => {}} terms='I agree to the terms' />);
+    fireEvent.click(getByRole('button', { name: 'Create account' }));
+    const error = (await findByText('Please accept to continue')).closest('p') as HTMLElement;
+    expect(error.hasAttribute('data-cb-field-error')).toBe(true);
+    expect(error.querySelector('svg')).not.toBeNull();
+    expect(getByRole('checkbox').getAttribute('aria-describedby')).toBe(error.id);
+  });
+
   test('requires the terms checkbox when terms are given', async () => {
     const onSubmit = mock(async () => {});
     const { container, getByRole, findByText } = render(

package/src/react/components/auth/SignupForm.tsx

@@ -1,8 +1,9 @@
-import { type ReactNode, useMemo } from 'react';
+import { type ReactNode, useId, useMemo } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { makeFormConfig } from '../../lib/form.js';
 import { Checkbox } from '../Checkbox.js';
+import { FieldErrorText } from '../fieldErrorText.js';
 import { AuthForm } from './AuthForm.js';
 import { AuthPasswordField, AuthTextField } from './fields.js';
 import { PasswordStrengthMeter } from './PasswordStrengthMeter.js';
@@ -93,6 +94,7 @@ export function SignupForm({
   );
 
   const password = form.watch('password');
+  const termsErrorId = useId();
 
   return (
     <AuthForm
@@ -115,12 +117,12 @@ export function SignupForm({
 
       {children}
 
-      <div className='flex flex-col gap-1.5'>
-        <AuthPasswordField name='password' label='Password' autoComplete='new-password' />
-        {showStrength ? (
-          <PasswordStrengthMeter value={password} minLength={minPasswordLength} />
-        ) : null}
-      </div>
+      <AuthPasswordField
+        name='password'
+        label='Password'
+        autoComplete='new-password'
+        status={showStrength && password ? <PasswordStrengthMeter value={password} minLength={minPasswordLength} /> : undefined}
+      />
 
       {showConfirm ? (
         <AuthPasswordField
@@ -140,12 +142,11 @@ export function SignupForm({
                 checked={field.value}
                 onCheckedChange={(v) => field.onChange(v === true)}
                 aria-invalid={form.formState.errors.acceptTerms ? true : undefined}
+                aria-describedby={form.formState.errors.acceptTerms ? termsErrorId : undefined}
                 label={terms}
               />
               {form.formState.errors.acceptTerms ? (
-                <p role='alert' className='text-sm text-field-error'>
-                  {form.formState.errors.acceptTerms.message as string}
-                </p>
+                <FieldErrorText id={termsErrorId}>{form.formState.errors.acceptTerms.message as string}</FieldErrorText>
               ) : null}
             </div>
           )}

package/src/react/components/auth/TotpEntry.spec.tsx

@@ -32,6 +32,33 @@ describe('TotpEntry', () => {
     expect(onSubmit).toHaveBeenCalledWith({ code: 'ABCDE-FGHIJ', recovery: true });
   });
 
+  test('a refused code is cleared and the caret goes back to the first box (task 2466)', async () => {
+    const onSubmit = mock(async () => {
+      throw { message: 'That code has expired.' };
+    });
+    const { container, getByRole, findByText } = render(<TotpEntry onSubmit={onSubmit} autoSubmit={false} />);
+    const boxes = Array.from(container.querySelectorAll('input')) as HTMLInputElement[];
+    for (let i = 0; i < 6; i++) fireEvent.change(boxes[i], { target: { value: String(i + 1) } });
+    fireEvent.click(getByRole('button', { name: 'Verify' }));
+    await findByText('That code has expired.');
+    const after = Array.from(container.querySelectorAll('input')) as HTMLInputElement[];
+    await waitFor(() => expect(after.map((b) => b.value).join('')).toBe(''));
+    expect(document.activeElement).toBe(after[0]);
+  });
+
+  test('a refused RECOVERY code stays, for the user to correct', async () => {
+    const onSubmit = mock(async () => {
+      throw { message: 'That recovery code was already used.' };
+    });
+    const { container, getByRole, findByText } = render(<TotpEntry onSubmit={onSubmit} autoSubmit={false} />);
+    fireEvent.click(getByRole('button', { name: 'Use a recovery code instead' }));
+    const input = container.querySelector('#cb-f-code') as HTMLInputElement;
+    fireEvent.change(input, { target: { value: 'ABCDE-FGHIJ' } });
+    fireEvent.click(getByRole('button', { name: 'Verify' }));
+    await findByText('That recovery code was already used.');
+    expect((container.querySelector('#cb-f-code') as HTMLInputElement).value).toBe('ABCDE-FGHIJ');
+  });
+
   test('omits the recovery toggle when allowRecoveryCode is false', () => {
     const { queryByRole } = render(
       <TotpEntry onSubmit={async () => {}} allowRecoveryCode={false} autoSubmit={false} />,

package/src/react/components/auth/TotpEntry.tsx

@@ -72,11 +72,26 @@ export function TotpEntry({
     form.clearErrors();
   };
 
+  // A refused authenticator code is dead — it rotates in seconds — so clear it and put the caret
+  // back on the first box, the way GitHub and Stripe do (forge task 2466). A recovery code is
+  // long and typed by hand, so it stays for the user to correct.
+  const submit: AuthSubmitHandler<TotpValues> = async (values) => {
+    try {
+      return await onSubmit(values);
+    } catch (err) {
+      if (!values.recovery) {
+        form.setValue('code', '');
+        formRef.current?.querySelector<HTMLInputElement>('input')?.focus();
+      }
+      throw err;
+    }
+  };
+
   return (
     <AuthForm
       form={form}
       formRef={formRef}
-      onSubmit={onSubmit}
+      onSubmit={submit}
       onSuccess={onSuccess}
       mapError={mapError}
       submitLabel={submitLabel}
@@ -128,6 +143,8 @@ export function TotpEntry({
                   value={field.value}
                   onChange={field.onChange}
                   length={length}
+                  // Spread across the column, so the boxes end where every other row does.
+                  className='w-full justify-between'
                   onComplete={autoSubmit ? () => formRef.current?.requestSubmit() : undefined}
                   aria-label='Authentication code'
                   aria-invalid={aria['aria-invalid']}

package/src/react/components/auth/fields.tsx

@@ -68,6 +68,8 @@ export interface AuthPasswordFieldProps {
   description?: ReactNode;
   required?: boolean;
   autoFocus?: boolean;
+  /** Live feedback under the field — the strength meter — in its error slot ({@link Field}'s `status`). */
+  status?: ReactNode;
 }
 
 /**
@@ -83,10 +85,11 @@ export function AuthPasswordField({
   description,
   required,
   autoFocus,
+  status,
 }: AuthPasswordFieldProps) {
   const { control } = useFormContext();
   return (
-    <Field name={name} label={label} description={description} required={required} reserveErrorSpace>
+    <Field name={name} label={label} description={description} required={required} reserveErrorSpace status={status}>
       {(aria) => (
         <Controller
           name={name}
@@ -97,6 +100,10 @@ export function AuthPasswordField({
               name={field.name}
               value={field.value ?? ''}
               onChange={field.onChange}
+              // 🔴 Without this a password never validated on blur, only on submit — the forms
+              // are `mode: 'onBlur'`, and RHF only learns of a blur through `field.onBlur`
+              // (forge task 2466: "Use at least 8 characters" never showed until submit).
+              onBlur={field.onBlur}
               label={labelText(label, name)}
               placeholder={placeholder}
               autoComplete={autoComplete}

package/src/react/components/calendar/DayAgenda.spec.tsx

@@ -24,6 +24,15 @@ describe('DayAgenda', () => {
     expect(screen.getByText('Nothing planned')).toBeTruthy();
   });
 
+  test('an empty day points at Add only when there is an Add to press', () => {
+    const { unmount } = render(<DayAgenda dayDate={DAY} events={[]} onSelectOccurrence={() => {}} />);
+    expect(screen.getByText('No events on this day.')).toBeTruthy();
+    expect(screen.queryByText(/Add/)).toBeNull();
+    unmount();
+    render(<DayAgenda dayDate={DAY} events={[]} onSelectOccurrence={() => {}} onAdd={() => {}} />);
+    expect(screen.getByText('Use Add to create an event on this day.')).toBeTruthy();
+  });
+
   test('renders an event title', () => {
     const events = [makeEvent({ id: 'e1', title: 'Morning run' })];
     render(<DayAgenda dayDate={DAY} events={events} onSelectOccurrence={() => {}} />);

package/src/react/components/calendar/DayAgenda.tsx

@@ -89,7 +89,8 @@ export function DayAgenda({
         <EmptyState
           icon={<CalendarIcon className='h-6 w-6' />}
           title='Nothing planned'
-          description="Tap 'Add' to create an event."
+          // Only point at a button that is there: a read-only agenda has no Add (forge task 2591).
+          description={onAdd ? 'Use Add to create an event on this day.' : 'No events on this day.'}
         />
       ) : (
         <ul className='flex flex-col gap-1'>
@@ -140,7 +141,9 @@ function AgendaItem({ occurrence, color, calendarName, onSelect }: AgendaItemPro
           style={dotStyle}
           aria-hidden='true'
         />
-        <span className='w-16 shrink-0 font-semibold tabular-nums text-muted-foreground'>
+        {/* Wide enough for "12:00 PM" on one line — at w-16 it wrapped and pushed its title
+            out of line with every other row's (forge task 2591). */}
+        <span className='w-20 shrink-0 whitespace-nowrap font-semibold tabular-nums text-muted-foreground'>
           {occurrence.allDay ? 'All day' : fmtTime(occurrence.startAt)}
         </span>
         <span

package/src/react/components/calendar/EventChip.spec.tsx

@@ -3,6 +3,7 @@ import { cleanup, render, screen } from '@testing-library/react';
 import type { Occurrence } from 'cwip/calendar';
 import { dayKeyOf } from 'cwip/calendar';
 import { EventChip } from './EventChip.js';
+import { calendarColorClasses } from './colorUtils.js';
 import type { CalendarEventBase } from './types.js';
 
 afterEach(cleanup);
@@ -69,14 +70,17 @@ describe('EventChip', () => {
     expect(container.querySelector('button')?.className).toContain('line-through');
   });
 
-  test('hex color resolves to inline backgroundColor style', () => {
-    // guardrails-ignore no-hardcoded-colors: test fixture asserting on literal event
-    // color prop, not themeable chrome — calendar events carry arbitrary user colors.
-    const hex: CalendarEventBase = { ...base, color: '#4f86f7' };
-    const { container } = render(<EventChip occurrence={makeOccurrence(hex)} onClick={() => {}} />);
-    const style = (container.querySelector('button') as HTMLButtonElement).style;
-    // happy-dom preserves hex; browsers normalize to rgb — accept either
+  test('the time is in the name, so a phone that shows only the title still says when', () => {
+    render(<EventChip occurrence={makeOccurrence()} onClick={() => {}} />);
+    expect(screen.getByRole('button').getAttribute('aria-label')).toMatch(/^\d{1,2}:\d{2}\s?(AM|PM) Stand-up$/);
+  });
+
+  test('a hex colour is a TINT with same-hue ink, never a solid slab', () => {
+    // happy-dom drops `color-mix()` from a style, so the resolver is asserted; the browser spec
+    // (e2e/calendar-time.spec.ts) reads the painted colour.
+    // guardrails-ignore no-hardcoded-colors: test fixture asserting on literal event color, not themeable chrome
+    const { chipStyle } = calendarColorClasses('#4f86f7');
     // guardrails-ignore no-hardcoded-colors: test fixture asserting on literal event color, not themeable chrome
-    expect(style.backgroundColor).toMatch(/^(#4f86f7|rgb\(79,\s*134,\s*247\))$/i);
+    expect(chipStyle).toEqual({ backgroundColor: 'color-mix(in srgb, #4f86f7 18%, transparent)', color: 'color-mix(in srgb, #4f86f7 55%, var(--foreground))' });
   });
 });

package/src/react/components/calendar/EventChip.tsx

@@ -15,7 +15,11 @@ export interface EventChipProps {
 /**
  * A compact event pill for month and week calendar grid cells. Shows the time
  * (if not all-day) and title in the event's color; struck through when done.
- * Mobile: time stacks above title; desktop: side by side.
+ *
+ * Below `sm` the chip is the TITLE alone, one line: a month cell on a 390px phone is ~50px wide,
+ * and time stacked over title left "9:00 A" over "Sta…" — neither readable (forge task 2591).
+ * Apple Calendar's and Google Calendar's phone month views both drop the time for the title; the
+ * time stays in the accessible name and the tooltip, and the week and day views show it.
  */
 export function EventChip({ occurrence, onClick, color }: EventChipProps) {
   const { event } = occurrence;
@@ -24,7 +28,10 @@ export function EventChip({ occurrence, onClick, color }: EventChipProps) {
   const done = occurrence.done;
   const pending = event.source === 'timeoff' && event.pending;
 
-  const label = pending ? `${event.title} — not yet on your work calendar` : event.title;
+  const time = event.allDay ? null : fmtTime(occurrence.startAt);
+  // The name carries the time as well: on a phone the chip shows the title alone.
+  const named = time ? `${time} ${event.title}` : event.title;
+  const label = pending ? `${named} — not yet on your work calendar` : named;
 
   return (
     <Tooltip content={label} className='block w-full' multiline={pending}>
@@ -42,16 +49,14 @@ export function EventChip({ occurrence, onClick, color }: EventChipProps) {
         className={cn(
           'flex w-full min-w-0 truncate rounded px-1 py-0.5 text-left text-caption leading-tight',
           'min-h-11 sm:min-h-0',
-          'flex-col gap-0 sm:flex-row sm:items-center sm:gap-1 sm:px-1.5 sm:text-xs',
+          'items-center gap-1 sm:px-1.5 sm:text-xs',
           chip,
           done && 'line-through opacity-60',
           pending && 'outline-dashed outline-1 outline-tone-amber-ink',
         )}
         style={chipStyle}
       >
-        {!event.allDay && (
-          <span className='shrink-0 font-semibold tabular-nums'>{fmtTime(occurrence.startAt)}</span>
-        )}
+        {time && <span className='hidden shrink-0 font-semibold tabular-nums sm:inline'>{time}</span>}
         {pending && <span className='shrink-0'>⚠</span>}
         <span className='min-w-0 truncate'>{event.title}</span>
       </button>

package/src/react/components/calendar/MonthGrid.tsx

@@ -129,7 +129,7 @@ export function MonthGrid({
                   className={cn(
                     'inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-xs font-semibold',
                     ctx.isToday
-                      ? 'bg-accent-solid text-white'
+                      ? 'bg-accent-solid text-accent-solid-foreground'
                       : ctx.inMonth
                         ? 'text-foreground'
                         : // 🔴 Muted AND faded. `text-muted-foreground` alone was the same

package/src/react/components/calendar/WeekView.tsx

@@ -65,7 +65,9 @@ export function WeekView({
   return (
     <Surface level="flat" pad="none" radius="xl" className={cn('overflow-hidden bg-card', className)}>
       {/* Weekday header with date numbers */}
-      <div className='grid grid-cols-[repeat(7,minmax(0,1fr))] border-b border-border bg-muted/40'>
+      {/* The month grid's rules (MonthGrid.tsx): a softened header line and /40 inner rules, so the
+          two views of one calendar draw the same grid (forge task 2591). */}
+      <div className='grid grid-cols-[repeat(7,minmax(0,1fr))] border-b border-border/60 bg-muted/40'>
         {days.map((dayKey, i) => (
           <div key={dayKey} className='flex min-w-0 flex-col items-center px-1 py-2'>
             <span className='text-caption font-semibold uppercase tracking-wide text-muted-foreground sm:text-xs'>
@@ -74,7 +76,7 @@ export function WeekView({
             <span
               className={cn(
                 'mt-0.5 flex h-6 w-6 items-center justify-center rounded-full text-xs font-semibold',
-                dayKey === today ? 'bg-accent-solid text-white' : 'text-foreground',
+                dayKey === today ? 'bg-accent-solid text-accent-solid-foreground' : 'text-foreground',
               )}
             >
               {parseDayKey(dayKey).day}
@@ -97,7 +99,7 @@ export function WeekView({
               onClick={() => onSelectDay(day)}
               className={cn(
                 'group flex min-h-40 min-w-0 cursor-pointer flex-col gap-1 overflow-hidden',
-                'border-r border-border p-1 last:border-r-0',
+                'border-r border-border/40 p-1 last:border-r-0',
                 'hover:bg-muted/30',
                 dayKey === today && 'bg-accent/5',
               )}

package/src/react/components/calendar/colorUtils.ts

@@ -53,15 +53,17 @@ const FALLBACK = COLOR_MAP.slate!;
 export const isHexColor = (color?: string): color is string =>
   !!color && /^#[0-9a-f]{6}$/i.test(color);
 
-/** WCAG relative luminance — returns near-black or near-white for readable contrast. */
-const readableTextOn = (hex: string): string => {
-  const n = Number.parseInt(hex.slice(1), 16);
-  const [r, g, b] = [(n >> 16) & 255, (n >> 8) & 255, n & 255].map((c) => {
-    const s = c / 255;
-    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
-  }) as [number, number, number];
-  return 0.2126 * r + 0.7152 * g + 0.0722 * b > 0.5 ? '#111827' : '#ffffff';
-};
+/**
+ * A custom colour drawn the way the named ones are: a soft tint of the hue with ink of the same hue
+ * pulled toward the theme's foreground — so it reads in light AND dark, and sits beside the
+ * `bg-sky-100 text-sky-800` chips as a peer. Until forge task 2591 a hex was a SOLID fill with
+ * white or black text, the loudest mark on the grid whatever it meant (Google Calendar and Linear
+ * both tint a custom colour rather than fill with it).
+ */
+const hexChip = (hex: string) => ({
+  backgroundColor: `color-mix(in srgb, ${hex} 18%, transparent)`,
+  color: `color-mix(in srgb, ${hex} 55%, var(--foreground))`,
+});
 
 // ─── Public API ───────────────────────────────────────────────────────────────
 
@@ -72,9 +74,9 @@ const readableTextOn = (hex: string): string => {
 export const calendarColorClasses = (color?: string): ColorClasses => {
   if (isHexColor(color)) {
     return {
-      chip: 'font-medium',
+      chip: '',
       dot: '',
-      chipStyle: { backgroundColor: color, color: readableTextOn(color) },
+      chipStyle: hexChip(color),
       dotStyle: { backgroundColor: color },
     };
   }

package/src/react/components/fieldErrorText.tsx

@@ -0,0 +1,17 @@
+import { AlertCircle } from 'lucide-react';
+import type { ReactNode } from 'react';
+
+/**
+ * The inline error row a {@link Field} draws under its control — icon, colour and size in one
+ * place. Internal: a control that cannot sit in a `Field` (SignupForm's terms checkbox, whose
+ * label is the checkbox's own) draws this, so its error reads like every other one (forge task
+ * 2466 found that checkbox's error with no icon, as a bare red line).
+ */
+export function FieldErrorText({ id, children }: { id?: string; children: ReactNode }) {
+  return (
+    <p id={id} role='alert' className='m-0 flex items-center gap-1.5 text-sm text-field-error' data-cb-field-error=''>
+      <AlertCircle className='size-4 shrink-0' aria-hidden />
+      {children}
+    </p>
+  );
+}

package/src/react/deep-link/resume.spec.tsx

@@ -237,4 +237,20 @@ describe('createResumeClient', () => {
     });
     expect(await dead.read()).toBe(null);
   });
+
+  test('write and clear read their answer to the end, so the request finishes', async () => {
+    // Chromium reports a fetch whose body nobody reads as still loading: Playwright's
+    // `networkidle` then never comes, and music's design spec waited out its 10s cap at every
+    // place it audited — 200s of a 300s gate (forge task 2574).
+    const answers: Response[] = [];
+    const fetchImpl = (async () => {
+      const answer = new Response(JSON.stringify({ ok: true }));
+      answers.push(answer);
+      return answer;
+    }) as unknown as typeof fetch;
+    const client = createResumeClient({ key: 'library', fetchImpl });
+    await client.write('#/queue');
+    await client.clear();
+    expect(answers.map((a) => a.bodyUsed)).toEqual([true, true]);
+  });
 });

package/src/react/deep-link/resume.ts

@@ -60,6 +60,13 @@ export function createResumeClient(options: ResumeClientOptions = {}): ResumeCli
     const doFetch = options.fetchImpl ?? fetch;
     return doFetch(`${basePath}?key=${encodeURIComponent(key)}`, { credentials: 'same-origin', ...init });
   };
+  /**
+   * A write's answer is read to the end even though nothing uses it: Chromium reports an unread
+   * body as a request still loading, so a page that wrote its place never reaches network-idle.
+   */
+  const send = async (init: RequestInit): Promise<void> => {
+    await (await call(init)).text();
+  };
   return {
     async read() {
       try {
@@ -73,7 +80,7 @@ export function createResumeClient(options: ResumeClientOptions = {}): ResumeCli
     },
     async write(href) {
       try {
-        await call({
+        await send({
           method: 'PUT',
           headers: { 'content-type': 'application/json' },
           body: JSON.stringify({ location: href }),
@@ -84,7 +91,7 @@ export function createResumeClient(options: ResumeClientOptions = {}): ResumeCli
     },
     async clear() {
       try {
-        await call({ method: 'DELETE' });
+        await send({ method: 'DELETE' });
       } catch {
         /* as above */
       }

package/src/react/file-tree/FileTree.tsx

@@ -608,6 +608,9 @@ export interface FileTreeProps {
    * The row's menu on **right-click** (and ⌃-click, and Shift+F10 when {@link onRowMenu} is not
    * wired) — drawn by the tree at the pointer, VS Code's and Finder's gesture.
    *
+   * With {@link onRowMenu} and no `rowMenu`, a right-click calls `onRowMenu` at the pointer
+   * instead and the app draws its own menu — spread `folderViewMenuItems` into it.
+   *
    * Owner, 2026-09-30: *"add an option to the right click menu to hide a folder"*. Hand it the
    * SAME list your ⋯ menu draws (the shape is `DropdownMenu`'s), so the two can never offer
    * different things; {@link folderView}'s "Hide folder" and "Tags…" are appended to it on a
@@ -2699,7 +2702,17 @@ export function FileTree({
         }}
         onFocus={() => setFocused({ id: node.id, pinned: pinnedCopy })}
         onContextMenu={(event) => {
-          if (inTools(event) || !hasRowMenu(node)) return;
+          if (inTools(event)) return;
+          // An app that draws its own row menu (`onRowMenu`, no `rowMenu`) gets the right-click
+          // too, at the pointer — VS Code's gesture, and the one menu its ⋯ already opens.
+          if (!rowMenu && onRowMenu) {
+            event.preventDefault();
+            event.stopPropagation();
+            setFocused({ id: node.id, pinned: pinnedCopy });
+            onRowMenu(node, { x: event.clientX, y: event.clientY });
+            return;
+          }
+          if (!hasRowMenu(node)) return;
           event.preventDefault();
           event.stopPropagation();
           openRowMenu(node, pinnedCopy, { x: event.clientX, y: event.clientY });