@semiont/react-ui 0.5.28 → 0.5.30

package/src/features/auth/__tests__/SignInForm.a11y.test.tsx

@@ -29,8 +29,8 @@ const mockTranslations = {
   welcomeBack: 'Welcome back to Semiont',
   signInPrompt: 'Sign in to your knowledge workspace',
   continueWithGoogle: 'Continue with Google',
-  backendUrlLabel: 'Backend URL',
-  backendUrlPlaceholder: 'http://localhost:4000',
+  gatewayUrlLabel: 'Gateway URL',
+  gatewayUrlPlaceholder: 'http://localhost:4000',
   emailLabel: 'Email',
   emailPlaceholder: 'your@email.com',
   passwordLabel: 'Password',
@@ -44,9 +44,9 @@ const mockTranslations = {
   signUpInstead: 'Sign Up Instead',
   errorEmailRequired: 'Email is required',
   errorPasswordRequired: 'Password is required',
-  errorBackendUrlRequired: 'Backend URL is required',
-  errorBackendUrlInvalid: 'Backend URL is not valid',
-  errorBackendUrlUnreachable: 'Backend URL is unreachable',
+  errorGatewayUrlRequired: 'Gateway URL is required',
+  errorGatewayUrlInvalid: 'Gateway URL is not valid',
+  errorGatewayUrlUnreachable: 'Gateway URL is unreachable',
   tagline: 'make meaning',
 };
 
@@ -58,7 +58,7 @@ describe('SignInForm - Accessibility', () => {
       const { container } = render(
         <SignInForm
           onGoogleSignIn={onGoogleSignIn}
-          backendUrl="http://localhost:4000"
+          gatewayUrl="http://localhost:4000"
           Link={MockLink}
           translations={mockTranslations}
         />
@@ -206,7 +206,7 @@ describe('SignInForm - Accessibility', () => {
       render(
         <SignInForm
           onGoogleSignIn={onGoogleSignIn}
-          backendUrl="http://localhost:4000"
+          gatewayUrl="http://localhost:4000"
           Link={MockLink}
           translations={mockTranslations}
         />
@@ -244,7 +244,7 @@ describe('SignInForm - Accessibility', () => {
       render(
         <SignInForm
           onGoogleSignIn={onGoogleSignIn}
-          backendUrl="http://localhost:4000"
+          gatewayUrl="http://localhost:4000"
           Link={MockLink}
           translations={mockTranslations}
         />
@@ -261,7 +261,7 @@ describe('SignInForm - Accessibility', () => {
       render(
         <SignInForm
           onGoogleSignIn={onGoogleSignIn}
-          backendUrl="http://localhost:4000"
+          gatewayUrl="http://localhost:4000"
           Link={MockLink}
           translations={mockTranslations}
         />
@@ -361,7 +361,7 @@ describe('SignInForm - Accessibility', () => {
       render(
         <SignInForm
           onGoogleSignIn={onGoogleSignIn}
-          backendUrl="http://localhost:4000"
+          gatewayUrl="http://localhost:4000"
           Link={MockLink}
           translations={mockTranslations}
         />
@@ -379,7 +379,7 @@ describe('SignInForm - Accessibility', () => {
       const { container } = render(
         <SignInForm
           onGoogleSignIn={onGoogleSignIn}
-          backendUrl="http://localhost:4000"
+          gatewayUrl="http://localhost:4000"
           Link={MockLink}
           translations={mockTranslations}
         />
@@ -397,7 +397,7 @@ describe('SignInForm - Accessibility', () => {
       const { container } = render(
         <SignInForm
           onGoogleSignIn={onGoogleSignIn}
-          backendUrl="http://localhost:4000"
+          gatewayUrl="http://localhost:4000"
           Link={MockLink}
           translations={mockTranslations}
         />

package/src/features/auth/components/SignInForm.tsx

@@ -4,8 +4,8 @@
  * Supports both Google OAuth and email/password credentials.
  * No Next.js dependencies - all data via props.
  *
- * When backendUrl is provided it is shown as a locked read-only field.
- * When backendUrl is omitted the user must enter a backend URL to connect to.
+ * When gatewayUrl is provided it is shown as a locked read-only field.
+ * When gatewayUrl is omitted the user must enter a gateway URL to connect to.
  */
 
 import React from 'react';
@@ -15,21 +15,21 @@ import '../auth.css';
 export interface SignInFormProps {
   /**
    * Callback when user clicks Google sign-in.
-   * Receives the backend URL (either the locked one or what the user typed).
+   * Receives the gateway URL (either the locked one or what the user typed).
    */
-  onGoogleSignIn: (backendUrl: string) => Promise<void>;
+  onGoogleSignIn: (gatewayUrl: string) => Promise<void>;
 
   /**
    * Callback when user submits email/password credentials.
-   * Receives the backend URL along with email and password.
+   * Receives the gateway URL along with email and password.
    */
-  onCredentialsSignIn?: ((backendUrl: string, email: string, password: string) => Promise<void>) | undefined;
+  onCredentialsSignIn?: ((gatewayUrl: string, email: string, password: string) => Promise<void>) | undefined;
 
   /**
-   * Pre-filled backend URL. When provided the field is read-only (re-auth to known workspace).
+   * Pre-filled gateway URL. When provided the field is read-only (re-auth to known workspace).
    * When omitted the user enters the URL themselves (new connection).
    */
-  backendUrl?: string;
+  gatewayUrl?: string;
 
   /**
    * Error message to display (if any)
@@ -59,8 +59,8 @@ export interface SignInFormProps {
     welcomeBack: string;
     signInPrompt: string;
     continueWithGoogle: string;
-    backendUrlLabel: string;
-    backendUrlPlaceholder: string;
+    gatewayUrlLabel: string;
+    gatewayUrlPlaceholder: string;
     emailLabel: string;
     emailPlaceholder: string;
     passwordLabel: string;
@@ -72,9 +72,9 @@ export interface SignInFormProps {
     backToHome: string;
     learnMore: string;
     signUpInstead: string;
-    errorBackendUrlRequired: string;
-    errorBackendUrlInvalid: string;
-    errorBackendUrlUnreachable: string;
+    errorGatewayUrlRequired: string;
+    errorGatewayUrlInvalid: string;
+    errorGatewayUrlUnreachable: string;
     errorEmailRequired: string;
     errorPasswordRequired: string;
     tagline: string;
@@ -117,23 +117,23 @@ function normalizeUrlForProbe(raw: string): string | null {
 }
 
 /**
- * CredentialsAuthForm - Backend URL + email/password form.
- * When lockedBackendUrl is provided, the URL field is shown read-only.
+ * CredentialsAuthForm - Gateway URL + email/password form.
+ * When lockedGatewayUrl is provided, the URL field is shown read-only.
  */
 function CredentialsAuthForm({
-  lockedBackendUrl,
+  lockedGatewayUrl,
   onSubmit,
   translations: t,
 }: {
-  lockedBackendUrl: string | undefined;
-  onSubmit: (backendUrl: string, email: string, password: string) => Promise<void>;
+  lockedGatewayUrl: string | undefined;
+  onSubmit: (gatewayUrl: string, email: string, password: string) => Promise<void>;
   translations: SignInFormProps['translations'];
 }) {
-  const [backendUrl, setBackendUrl] = React.useState(lockedBackendUrl ?? '');
+  const [gatewayUrl, setGatewayUrl] = React.useState(lockedGatewayUrl ?? '');
   const [email, setEmail] = React.useState('');
   const [password, setPassword] = React.useState('');
   const [validationError, setValidationError] = React.useState<string | null>(null);
-  const [fieldErrors, setFieldErrors] = React.useState<{ backendUrl?: string; email?: string; password?: string }>({});
+  const [fieldErrors, setFieldErrors] = React.useState<{ gatewayUrl?: string; email?: string; password?: string }>({});
   const [urlProbeStatus, setUrlProbeStatus] = React.useState<UrlProbeStatus>('idle');
 
   const probeUrl = async (raw: string) => {
@@ -141,7 +141,7 @@ function CredentialsAuthForm({
     if (!url) return;
     // Validate format
     try { new URL(url); } catch {
-      setFieldErrors(prev => ({ ...prev, backendUrl: t.errorBackendUrlInvalid }));
+      setFieldErrors(prev => ({ ...prev, gatewayUrl: t.errorGatewayUrlInvalid }));
       setUrlProbeStatus('error');
       return;
     }
@@ -150,19 +150,19 @@ function CredentialsAuthForm({
       const res = await fetch(`${url}/api/health`, { signal: AbortSignal.timeout(5000) });
       setUrlProbeStatus(res.ok ? 'ok' : 'error');
       if (!res.ok) {
-        setFieldErrors(prev => ({ ...prev, backendUrl: t.errorBackendUrlUnreachable }));
+        setFieldErrors(prev => ({ ...prev, gatewayUrl: t.errorGatewayUrlUnreachable }));
       }
     } catch {
       setUrlProbeStatus('error');
-      setFieldErrors(prev => ({ ...prev, backendUrl: t.errorBackendUrlUnreachable }));
+      setFieldErrors(prev => ({ ...prev, gatewayUrl: t.errorGatewayUrlUnreachable }));
     }
   };
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    const errors: { backendUrl?: string; email?: string; password?: string } = {};
+    const errors: { gatewayUrl?: string; email?: string; password?: string } = {};
 
-    if (!backendUrl.trim()) errors.backendUrl = t.errorBackendUrlRequired;
+    if (!gatewayUrl.trim()) errors.gatewayUrl = t.errorGatewayUrlRequired;
     if (!email) errors.email = t.errorEmailRequired;
     if (!password) errors.password = t.errorPasswordRequired;
 
@@ -174,10 +174,10 @@ function CredentialsAuthForm({
 
     setFieldErrors({});
     setValidationError(null);
-    await onSubmit(backendUrl.trim(), email, password);
+    await onSubmit(gatewayUrl.trim(), email, password);
   };
 
-  const probeIndicator = !lockedBackendUrl && urlProbeStatus !== 'idle' ? (
+  const probeIndicator = !lockedGatewayUrl && urlProbeStatus !== 'idle' ? (
     <span
       className={`semiont-form__url-status semiont-form__url-status--${urlProbeStatus}`}
       aria-live="polite"
@@ -198,33 +198,33 @@ function CredentialsAuthForm({
 
       <form onSubmit={handleSubmit} className="semiont-auth__form" noValidate>
         <div className="semiont-form__field">
-          <label htmlFor="backend-url" className="semiont-form__label">
-            {t.backendUrlLabel}
+          <label htmlFor="gateway-url" className="semiont-form__label">
+            {t.gatewayUrlLabel}
           </label>
           <div className="semiont-form__input-row">
             <input
-              id="backend-url"
+              id="gateway-url"
               type="url"
-              value={backendUrl}
+              value={gatewayUrl}
               onChange={(e) => {
-                if (lockedBackendUrl) return;
-                setBackendUrl(e.target.value);
+                if (lockedGatewayUrl) return;
+                setGatewayUrl(e.target.value);
                 setUrlProbeStatus('idle');
-                if (fieldErrors.backendUrl) setFieldErrors({ ...fieldErrors, backendUrl: undefined });
+                if (fieldErrors.gatewayUrl) setFieldErrors({ ...fieldErrors, gatewayUrl: undefined });
               }}
-              onBlur={() => { if (!lockedBackendUrl) probeUrl(backendUrl); }}
-              readOnly={!!lockedBackendUrl}
-              placeholder={t.backendUrlPlaceholder}
-              className={`semiont-input${lockedBackendUrl ? ' semiont-input--readonly' : ''}`}
-              aria-invalid={!!fieldErrors.backendUrl}
-              aria-describedby={fieldErrors.backendUrl ? 'backend-url-error' : undefined}
+              onBlur={() => { if (!lockedGatewayUrl) probeUrl(gatewayUrl); }}
+              readOnly={!!lockedGatewayUrl}
+              placeholder={t.gatewayUrlPlaceholder}
+              className={`semiont-input${lockedGatewayUrl ? ' semiont-input--readonly' : ''}`}
+              aria-invalid={!!fieldErrors.gatewayUrl}
+              aria-describedby={fieldErrors.gatewayUrl ? 'gateway-url-error' : undefined}
               required
             />
             {probeIndicator}
           </div>
-          {fieldErrors.backendUrl && (
-            <span id="backend-url-error" className="semiont-form__error" role="alert">
-              {fieldErrors.backendUrl}
+          {fieldErrors.gatewayUrl && (
+            <span id="gateway-url-error" className="semiont-form__error" role="alert">
+              {fieldErrors.gatewayUrl}
             </span>
           )}
         </div>
@@ -295,23 +295,23 @@ function CredentialsAuthForm({
 /**
  * SignInForm - Main sign-in / connect component.
  *
- * When backendUrl is provided (re-auth to known workspace) the URL field is locked.
- * When backendUrl is omitted (new connection) the user enters the URL themselves.
+ * When gatewayUrl is provided (re-auth to known workspace) the URL field is locked.
+ * When gatewayUrl is omitted (new connection) the user enters the URL themselves.
  */
 export function SignInForm({
   onGoogleSignIn,
   onCredentialsSignIn,
-  backendUrl,
+  gatewayUrl,
   error,
   showCredentialsAuth = false,
   isLoading = false,
   translations: t,
 }: SignInFormProps) {
   const handleGoogleClick = () => {
-    // For Google auth we need the backend URL from the locked prop or we cannot proceed.
-    // The caller is responsible for ensuring backendUrl is set when Google sign-in is offered.
-    if (backendUrl) {
-      onGoogleSignIn(backendUrl);
+    // For Google auth we need the gateway URL from the locked prop or we cannot proceed.
+    // The caller is responsible for ensuring gatewayUrl is set when Google sign-in is offered.
+    if (gatewayUrl) {
+      onGoogleSignIn(gatewayUrl);
     }
   };
 
@@ -348,14 +348,14 @@ export function SignInForm({
               <>
                 {showCredentialsAuth && onCredentialsSignIn && (
                   <CredentialsAuthForm
-                    lockedBackendUrl={backendUrl}
+                    lockedGatewayUrl={gatewayUrl}
                     onSubmit={onCredentialsSignIn}
                     translations={t}
                   />
                 )}
 
-                {/* Google sign-in only shown when a backend URL is known */}
-                {backendUrl && (
+                {/* Google sign-in only shown when a gateway URL is known */}
+                {gatewayUrl && (
                   <button onClick={handleGoogleClick} className={`${buttonStyles.primary.base} semiont-button--full-width`}>
                     <GoogleIcon />
                     {t.continueWithGoogle}

package/src/features/auth-welcome/state/__tests__/welcome-state-unit.test.ts

@@ -3,7 +3,7 @@ import { firstValueFrom } from 'rxjs';
 import { filter } from 'rxjs/operators';
 import type { SemiontSession } from '@semiont/sdk';
 import { AuthNamespace } from '@semiont/sdk';
-import { createTestSession, stubBackend } from '@semiont/sdk/testing';
+import { createTestSession, stubGateway } from '@semiont/sdk/testing';
 import { createWelcomeStateUnit } from '../welcome-state-unit';
 import { assertStateUnitAxioms } from '@semiont/core/testing/axioms';
 
@@ -25,7 +25,7 @@ afterEach(() => {
 });
 
 function makeSession(): SemiontSession {
-  return createTestSession({ backend: stubBackend() }).session;
+  return createTestSession({ gateway: stubGateway() }).session;
 }
 
 describe('createWelcomeStateUnit', () => {

package/src/features/moderate-recent/__tests__/RecentDocumentsPage.test.tsx

@@ -368,8 +368,8 @@ describe('RecentDocumentsPage', () => {
       const props = createMockProps();
       const { container } = render(<RecentDocumentsPage {...props} />);
 
-      const svg = container.querySelector('svg[viewBox="0 0 24 24"]');
-      expect(svg).toBeInTheDocument();
+      const svg = container.querySelector('svg[viewBox]');
+      expect(svg).toHaveAttribute('viewBox', '0 0 24 24');
     });
 
     it('renders SVG path with correct attributes', () => {

package/src/features/resource-compose/components/ResourceComposePage.tsx

@@ -8,7 +8,8 @@
  */
 
 import React, { useState, useEffect } from 'react';
-import { capabilitiesOf, AUTHORABLE_MEDIA_TYPES, MEDIA_TYPES, mediaTypeForExtension, isSupportedMediaType, LOCALES } from '@semiont/core';
+import { capabilitiesOf, AUTHORABLE_MEDIA_TYPES, MEDIA_TYPES, mediaTypeForExtension, isSupportedMediaType, LOCALES, folderOf, proposeStoragePath, getStorageUri } from '@semiont/core';
+import type { SupportedMediaType } from '@semiont/core';
 import type { UploadProgress } from '@semiont/sdk';
 import { type CloneData } from '../state/compose-page-state-unit';
 import { COMMON_PANELS, type ToolbarPanelType } from '../../../state/shell-state-unit';
@@ -168,6 +169,20 @@ export function ResourceComposePage({
   // Archive original checkbox (for clones only)
   const [archiveOriginal, setArchiveOriginal] = useState(true);
 
+  // D11 — the Save location starts filled and follows the title until the user
+  // takes it over; `pathTouched` is derived, so clearing restores the proposal.
+  // A clone proposes beside its source; a new resource proposes at the root.
+  const composeFormat: SupportedMediaType =
+    isSupportedMediaType(selectedFormat) ? selectedFormat : 'text/markdown';
+  const pathTouched = storagePath !== '';
+  const effectivePath = pathTouched
+    ? storagePath
+    : proposeStoragePath(
+        mode === 'clone' && cloneData ? folderOf(getStorageUri(cloneData.sourceResource)) : '',
+        newResourceName,
+        composeFormat,
+      );
+
   // Initialize form data based on mode
   useEffect(() => {
     if (mode === 'clone' && cloneData) {
@@ -234,7 +249,7 @@ export function ResourceComposePage({
       const params: SaveResourceParams = {
         mode,
         name: newResourceName,
-        storageUri: `file://${storagePath}`,
+        storageUri: `file://${effectivePath}`,
         content: newResourceContent,
         format: uploadedFile ? fileMimeType : selectedFormat,
         entityTypes: selectedEntityTypes,
@@ -316,7 +331,7 @@ export function ResourceComposePage({
               <input
                 id="storagePath"
                 type="text"
-                value={storagePath}
+                value={effectivePath}
                 onChange={(e) => setStoragePath(e.target.value)}
                 placeholder="docs/my-resource.md"
                 required

package/src/features/resource-discovery/__tests__/ResourceDiscoveryPage.test.tsx

@@ -354,7 +354,7 @@ describe('ResourceDiscoveryPage', () => {
     });
 
     it('renders the recentDocuments prop as-is without applying any post-filter', () => {
-      // The component is now controlled — backend filtering means
+      // The component is now controlled — gateway filtering means
       // `recentDocuments` already contains only the resources matching the
       // active `selectedEntityType`. The component must not re-filter.
       const props = createMockProps({

package/src/features/resource-discovery/components/ResourceDiscoveryPage.tsx

@@ -44,7 +44,7 @@ export interface ResourceDiscoveryPageProps {
   onSearchQueryChange: (query: string) => void;
 
   // Controlled entity-type filter — owned by the state unit so filtering
-  // pushes to the backend rather than running as a post-fetch array filter.
+  // pushes to the gateway rather than running as a post-fetch array filter.
   selectedEntityType: string;
   onSelectedEntityTypeChange: (entityType: string) => void;
 
@@ -106,7 +106,7 @@ export function ResourceDiscoveryPage({
   const hasSearchQuery = searchQuery.trim() !== '';
 
   // When searching, render search results; otherwise render recent.
-  // Both already arrive entity-type-filtered from the backend — no post-filter here.
+  // Both already arrive entity-type-filtered from the gateway — no post-filter here.
   const filteredResources = hasSearchQuery ? searchDocuments : recentDocuments;
 
   // Roving tabindex for entity type filters

package/src/features/resource-discovery/state/discover-state-unit.ts

@@ -50,7 +50,7 @@ export function createDiscoverStateUnit(
 
   // Selected entity-type chip on the Discover page. Drives both the
   // `recent` list and the search results — filtering happens on the
-  // backend, not via post-fetch array filtering.
+  // gateway, not via post-fetch array filtering.
   const selectedEntityType$ = new BehaviorSubject<string>('');
   disposer.add(() => selectedEntityType$.complete());
 

package/src/features/resource-viewer/__tests__/ResourceViewerPage.test.tsx

@@ -47,8 +47,8 @@ const { stubBrowser, stubClient } = vi.hoisted(() => {
   const { SemiontClient, HttpTransport, HttpContentTransport } = require('@semiont/sdk');
   const { baseUrl } = require('@semiont/core');
   const transport = new HttpTransport({ baseUrl: baseUrl('http://localhost:4000') });
-  // HttpTransport implements both ITransport and IBackendOperations; pass it
-  // as backend so `client.auth` (used by useMediaToken) is wired.
+  // HttpTransport implements both ITransport and IGatewayOperations; pass it
+  // as gateway so `client.auth` (used by useMediaToken) is wired.
   const client = new SemiontClient(transport, new HttpContentTransport(transport), transport);
   const stubActiveSession$ = new BehaviorSubject({ client });
   const stubOpenResources$ = new BehaviorSubject([]);

package/src/features/resource-viewer/__tests__/generation-options.test.ts

@@ -0,0 +1,53 @@
+/**
+ * GENERATION-OUTPUT-FORMAT D8 — the submitted config becomes generation
+ * options in ONE place, by spread.
+ *
+ * Both page handlers used to build the options object field-by-field, so any
+ * field not explicitly listed was silently dropped. That is precisely what
+ * stranded `outputMediaType` in the SDK one layer down (P1), relocated one
+ * layer up. These pins state the PROPERTY — everything the config carries is
+ * forwarded — rather than enumerating today's fields, so a knob added later
+ * cannot regress the mode back into existence.
+ */
+import { describe, it, expect } from 'vitest';
+import type { GatheredContext } from '@semiont/core';
+import { toGenerationOptions } from '../generation-options';
+import type { GenerationConfig } from '../../../components/modals/ConfigureGenerationStep';
+
+const context = { focus: { kind: 'resource' } } as unknown as GatheredContext;
+
+const config: GenerationConfig = {
+  title: 'Cedar County',
+  storageUri: 'file://research/notes.pdf',
+  prompt: 'lead with the treaty',
+  language: 'en',
+  temperature: 0.7,
+  maxTokens: 500,
+  outputMediaType: 'application/pdf',
+  context,
+};
+
+describe('toGenerationOptions', () => {
+  it('forwards EVERY field the config carries except the context', () => {
+    // Stated structurally on purpose: the expectation is derived from the
+    // same object, so adding a field to GenerationConfig extends this pin
+    // automatically. A field-by-field assertion would have passed happily
+    // while the real handler dropped the new one.
+    const { context: _positional, ...forwarded } = config;
+    expect(toGenerationOptions(config, 'fr')).toMatchObject(forwarded);
+  });
+
+  it('does not pass the context as an option — it is the positional argument', () => {
+    expect(toGenerationOptions(config, 'fr')).not.toHaveProperty('context');
+  });
+
+  it('injects the sourceLanguage, which comes from the viewed resource and not the form', () => {
+    expect(toGenerationOptions(config, 'fr').sourceLanguage).toBe('fr');
+  });
+
+  it('omits sourceLanguage entirely when the resource has no language', () => {
+    // Absence must stay absence: a manufactured '' would tell the prompt the
+    // source is in a language named empty string.
+    expect(toGenerationOptions(config, undefined)).not.toHaveProperty('sourceLanguage');
+  });
+});

package/src/features/resource-viewer/components/ResourceViewerPage.tsx

@@ -9,9 +9,9 @@ import React, { useState, useEffect, useCallback } from 'react';
 import { useResourceViewedReport } from '../hooks/useResourceViewedReport';
 import type { components, ResourceDescriptor, ResourceId, EventMap } from '@semiont/core';
 import type { ConnectionState } from '@semiont/core';
-import { annotationId } from '@semiont/core';
+import { annotationId, folderOf } from '@semiont/core';
 import type { ComposeParams } from '../../../components/modals/ComposeStep';
-import { getLanguage, getPrimaryRepresentation, getPrimaryMediaType, capabilitiesOf, extensionForMediaType } from '@semiont/core';
+import { getLanguage, getPrimaryRepresentation, getPrimaryMediaType, getStorageUri, capabilitiesOf, extensionForMediaType } from '@semiont/core';
 import { ANNOTATORS } from '@semiont/react-ui';
 import { ErrorBoundary } from '@semiont/react-ui';
 import { AnnotationHistory } from '@semiont/react-ui';
@@ -47,6 +47,7 @@ import { useTranslations } from '../../../contexts/TranslationContext';
 import { ReferenceWizardModal } from '../../../components/modals/ReferenceWizardModal';
 import { ResourceGenerateModal } from '../../../components/modals/ResourceGenerateModal';
 import type { GenerationConfig } from '../../../components/modals/ConfigureGenerationStep';
+import { toGenerationOptions } from '../generation-options';
 
 type SemiontResource = ResourceDescriptor;
 
@@ -275,18 +276,10 @@ export function ResourceViewerPage({
 
   const handleWizardGenerateSubmit = useCallback((referenceId: string, config: GenerationConfig) => {
     clearSparkle(annotationId(referenceId));
-    stateUnit?.yield.generate(config.context, {
-      title: config.title,
-      storageUri: config.storagePath,
-      prompt: config.prompt,
-      language: config.language,
-      // The source resource is the one the user is viewing — fed into the
-      // prompt so the LLM understands the embedded context (selected
-      // passage, surrounding text) regardless of UI/target language.
-      sourceLanguage: getLanguage(resource),
-      temperature: config.temperature,
-      maxTokens: config.maxTokens,
-    });
+    // D8: forwarded by spread in ONE place, so a knob added to the form is
+    // never dropped on the way to the wire. `sourceLanguage` is the viewed
+    // resource's language — a page fact the form cannot know.
+    stateUnit?.yield.generate(config.context, toGenerationOptions(config, getLanguage(resource)));
   }, [stateUnit, clearSparkle, resource]);
 
   // Resource-generate flow (GENERATE-FROM-BUTTON): drive the SAME yield progress$
@@ -294,15 +287,7 @@ export function ResourceViewerPage({
   // toast. Both paths are one `generate(context, options)` now: the context's
   // focus.kind (resource here, annotation above) decides the shape.
   const handleResourceGenerateSubmit = useCallback((_resourceId: string, config: GenerationConfig) => {
-    stateUnit?.yield.generate(config.context, {
-      title: config.title,
-      storageUri: config.storagePath,
-      ...(config.prompt ? { prompt: config.prompt } : {}),
-      language: config.language,
-      sourceLanguage: getLanguage(resource),
-      temperature: config.temperature,
-      maxTokens: config.maxTokens,
-    });
+    stateUnit?.yield.generate(config.context, toGenerationOptions(config, getLanguage(resource)));
   }, [stateUnit, resource]);
 
   const handleWizardLinkResource = useCallback(async (referenceId: string, targetResourceId: string) => {
@@ -364,7 +349,7 @@ export function ResourceViewerPage({
   useEffect(() => {
     if (resource && rUri) {
       const mediaType = getPrimaryMediaType(resource);
-      browser.addOpenResource(rUri, resource.name, mediaType || undefined, resource.storageUri);
+      browser.addOpenResource(rUri, resource.name, mediaType || undefined, getStorageUri(resource));
       browser.setLastViewedResource(rUri);
     }
   }, [resource, rUri, browser]);
@@ -671,7 +656,7 @@ export function ResourceViewerPage({
                 documentLocale={getLanguage(resource)}
                 primaryMediaType={primaryMediaType}
                 primaryByteSize={primaryByteSize}
-                storageUri={resource.storageUri}
+                storageUri={getStorageUri(resource)}
                 isArchived={resource.archived ?? false}
                 dateCreated={resource.dateCreated}
                 dateModified={resource.dateModified}
@@ -724,6 +709,7 @@ export function ResourceViewerPage({
         annotationId={wizardAnnotationId}
         resourceId={wizardResourceId}
         defaultTitle={wizardDefaultTitle}
+        defaultFolder={folderOf(getStorageUri(resource))}
         entityTypes={wizardEntityTypes}
         resourceName={resource.name}
         locale={locale}
@@ -774,6 +760,8 @@ export function ResourceViewerPage({
           maxLength: tw('maxLength'),
           maxLengthHelp: tw('maxLengthHelp'),
           maxLengthCeiling: tw('maxLengthCeiling'),
+          outputFormat: tw('outputFormat'),
+          formatExtensionMismatch: tw('formatExtensionMismatch'),
           maxResults: tw('maxResults'),
           semanticScoring: tw('semanticScoring'),
           semanticScoringHelp: tw('semanticScoringHelp'),
@@ -797,6 +785,7 @@ export function ResourceViewerPage({
         // Seed the proposed title from the source resource's name (GFR D4/A4);
         // the field stays editable and required.
         defaultTitle={resource.name}
+        defaultFolder={folderOf(getStorageUri(resource))}
         locale={locale}
         entityTypeOptions={allEntityTypes}
         onGenerateSubmit={handleResourceGenerateSubmit}
@@ -840,6 +829,8 @@ export function ResourceViewerPage({
           maxLength: tg('maxLength'),
           maxLengthHelp: tg('maxLengthHelp'),
           maxLengthCeiling: tg('maxLengthCeiling'),
+          outputFormat: tg('outputFormat'),
+          formatExtensionMismatch: tg('formatExtensionMismatch'),
           generate: tg('generate'),
           discardDraftPrompt: tg('discardDraftPrompt'),
           discardDraft: tg('discardDraft'),

package/src/features/resource-viewer/generation-options.ts

@@ -0,0 +1,29 @@
+import type { GenerationOptions } from '@semiont/sdk';
+import type { GenerationConfig } from '../../components/modals/ConfigureGenerationStep';
+
+/**
+ * The submitted form config becomes generation options — in ONE place, by
+ * spread (GENERATION-OUTPUT-FORMAT D8).
+ *
+ * Both page handlers previously built this object field-by-field, so a knob
+ * the list didn't mention was silently dropped on the way to the wire. That
+ * is exactly how `outputMediaType` came to be unreachable one layer down
+ * (P1's finding), and copying the pattern here would have re-created it for
+ * every future knob. Spreading means the default is "forwarded"; only the two
+ * genuine transformations are spelled out:
+ *
+ * - `context` leaves the bag — it is `fromContext`'s positional argument.
+ * - `sourceLanguage` joins it — the language of the resource being VIEWED,
+ *   which the form cannot know and the page can. Omitted entirely when
+ *   unknown, so absence stays absence rather than becoming `''`.
+ */
+export function toGenerationOptions(
+  config: GenerationConfig,
+  sourceLanguage: string | undefined,
+): GenerationOptions {
+  const { context: _positional, ...options } = config;
+  return {
+    ...options,
+    ...(sourceLanguage ? { sourceLanguage } : {}),
+  };
+}

package/src/styles/index.css

@@ -43,7 +43,6 @@
 @import './features/admin.css';
 @import './features/compose.css';
 @import './features/devops.css';
-@import './features/exchange.css';
 @import './features/entity-tags.css';
 @import './features/recent-docs.css';
 @import './features/resource.css';