@semiont/react-ui 0.5.25 → 0.5.27

package/src/components/modals/ConfigureGenerationStep.tsx

@@ -1,8 +1,28 @@
 'use client';
 
-import React, { useState } from 'react';
-import type { GatheredContext } from '@semiont/core';
+import React, { useEffect } from 'react';
+import { WizardFooter } from './WizardFooter';
+import type { CollaboratorEntry, GatheredContext } from '@semiont/core';
 import { LOCALES } from '@semiont/core';
+
+/**
+ * Bounds for the max-length control when no ceiling is known. These are the
+ * values this control has always shipped — the fallback is today's behaviour,
+ * not an unbounded field (INFERENCE-LIMITS-EXPOSURE D6, as corrected in review).
+ */
+const MIN_MAX_TOKENS = 100;
+const DEFAULT_MAX_TOKENS_CEILING = 4000;
+/** The step's form values, owned by the wizard so Back cannot discard them (D3). */
+export interface GenerationDraft {
+  title: string;
+  storagePath: string;
+  prompt: string;
+  language: string;
+  temperature: number;
+  /** Text, not number: the field is user-editable and may be mid-edit or empty. */
+  maxTokensText: string;
+}
+
 export interface GenerationConfig {
   title: string;
   storagePath: string;
@@ -14,11 +34,11 @@ export interface GenerationConfig {
 }
 
 export interface ConfigureGenerationStepProps {
-  defaultTitle: string;
-  locale: string;
   context: GatheredContext;
+  /** Owned by the wizard so Back is lossless (WIZARD-NAVIGATION D3). */
+  config: GenerationDraft;
+  onConfigChange: (config: GenerationDraft) => void;
   onBack: () => void;
-  onCancel: () => void;
   onGenerate: (config: GenerationConfig) => void;
   translations: {
     resourceTitle: string;
@@ -32,27 +52,65 @@ export interface ConfigureGenerationStepProps {
     creativityCreative: string;
     maxLength: string;
     maxLengthHelp: string;
-    cancel: string;
+    /**
+     * Shown INSTEAD of `maxLengthHelp` when the ceiling is known, so the bound
+     * is legible rather than mysterious. Interpolates `{{maxOutputTokens}}`
+     * and `{{model}}`.
+     */
+    maxLengthCeiling: string;
     back: string;
     generate: string;
   };
+  /**
+   * The roster entry serving `generation` (from `useCollaborators`). When its
+   * `limits` are known the max-length control is hard-bounded by the model's
+   * output ceiling; absent — or present without `limits`, which is normal when
+   * discovery could not answer right now — the control keeps its default
+   * bounds and generation still submits (D3).
+   */
+  generationAgent?: CollaboratorEntry;
 }
 
 export function ConfigureGenerationStep({
-  defaultTitle,
-  locale,
   context,
+  config,
+  onConfigChange,
   onBack,
-  onCancel,
   onGenerate,
   translations: t,
+  generationAgent,
 }: ConfigureGenerationStepProps) {
-  const [title, setTitle] = useState(defaultTitle);
-  const [storagePath, setStoragePath] = useState('');
-  const [prompt, setPrompt] = useState('');
-  const [language, setLanguage] = useState(locale);
-  const [temperature, setTemperature] = useState(0.7);
-  const [maxTokens, setMaxTokens] = useState(500);
+  // CONTROLLED (WIZARD-NAVIGATION D3): these were six local `useState`s, so Back
+  // unmounted the step and threw away every typed instruction, the save path and
+  // both sliders. `maxTokensText` stays TEXT rather than a number so the field can
+  // be cleared mid-edit — `parseInt` on an empty field yields NaN, which React
+  // warns about and which used to travel into the job config.
+  const { title, storagePath, prompt, language, temperature, maxTokensText } = config;
+  const set = (patch: Partial<GenerationDraft>) => onConfigChange({ ...config, ...patch });
+
+  const ceiling = generationAgent?.limits?.maxOutputTokens ?? DEFAULT_MAX_TOKENS_CEILING;
+
+  /**
+   * The value that will actually be submitted: always finite, always inside
+   * the bounds, whatever the field currently shows.
+   */
+  const clamp = (n: number): number =>
+    Math.min(Math.max(Number.isFinite(n) ? n : MIN_MAX_TOKENS, MIN_MAX_TOKENS), ceiling);
+
+  const submittedMaxTokens = clamp(parseInt(maxTokensText, 10));
+
+  // Re-clamp whenever the ceiling changes — which INCLUDES its first arrival.
+  // `browse.agents()` is asynchronous, so `generationAgent` is undefined on the
+  // first render and lands later; clamping only in the `useState` initializer
+  // would satisfy a mount-time test and do nothing in the running app.
+  useEffect(() => {
+    const n = parseInt(maxTokensText, 10);
+    // An empty/mid-edit field is left alone; submission clamps it anyway.
+    if (Number.isFinite(n) && n > ceiling) set({ maxTokensText: String(ceiling) });
+    // `set` and the draft are intentionally out of the dep list: this reacts to the
+    // CEILING arriving (browse.agents() is async), not to the user typing.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ceiling]);
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
@@ -63,7 +121,7 @@ export function ConfigureGenerationStep({
       ...(trimmedPrompt ? { prompt: trimmedPrompt } : {}),
       language,
       temperature,
-      maxTokens,
+      maxTokens: submittedMaxTokens,
       context,
     });
   };
@@ -79,7 +137,7 @@ export function ConfigureGenerationStep({
           id="wizard-title"
           type="text"
           value={title}
-          onChange={(e) => setTitle(e.target.value)}
+          onChange={(e) => set({ title: e.target.value })}
           required
           className="semiont-input"
           placeholder={t.resourceTitlePlaceholder}
@@ -97,7 +155,7 @@ export function ConfigureGenerationStep({
             id="wizard-storagePath"
             type="text"
             value={storagePath}
-            onChange={(e) => setStoragePath(e.target.value)}
+            onChange={(e) => set({ storagePath: e.target.value })}
             required
             className="semiont-input semiont-input--addon"
             placeholder="generated/my-resource.md"
@@ -113,7 +171,7 @@ export function ConfigureGenerationStep({
         <textarea
           id="wizard-prompt"
           value={prompt}
-          onChange={(e) => setPrompt(e.target.value)}
+          onChange={(e) => set({ prompt: e.target.value })}
           rows={2}
           className="semiont-textarea"
           placeholder={t.additionalInstructionsPlaceholder}
@@ -129,7 +187,7 @@ export function ConfigureGenerationStep({
           <select
             id="wizard-language"
             value={language}
-            onChange={(e) => setLanguage(e.target.value)}
+            onChange={(e) => set({ language: e.target.value })}
             className="semiont-select"
           >
             {LOCALES.map((lang) => (
@@ -151,7 +209,7 @@ export function ConfigureGenerationStep({
             max="1"
             step="0.1"
             value={temperature}
-            onChange={(e) => setTemperature(parseFloat(e.target.value))}
+            onChange={(e) => set({ temperature: parseFloat(e.target.value) })}
             className="semiont-slider"
           />
           <div className="semiont-slider__labels semiont-slider__labels--small">
@@ -167,39 +225,42 @@ export function ConfigureGenerationStep({
           <input
             id="wizard-maxTokens"
             type="number"
-            min="100"
-            max="4000"
+            min={MIN_MAX_TOKENS}
+            max={ceiling}
             step="100"
-            value={maxTokens}
-            onChange={(e) => setMaxTokens(parseInt(e.target.value))}
+            value={maxTokensText}
+            onChange={(e) => {
+              const raw = e.target.value;
+              // Empty is a legitimate transient state while retyping.
+              if (raw === '') { set({ maxTokensText: '' }); return; }
+              const n = parseInt(raw, 10);
+              if (!Number.isFinite(n)) return;
+              // `max` alone does not stop a larger value being typed — it only
+              // marks the field invalid. D6 says it cannot be entered, so the
+              // clamp lives here.
+              set({ maxTokensText: String(Math.min(n, ceiling)) });
+            }}
             className="semiont-input"
           />
+          <p className="semiont-form__help">
+            {generationAgent?.limits
+              ? t.maxLengthCeiling
+                  .replace('{{maxOutputTokens}}', String(ceiling))
+                  .replace(
+                    '{{model}}',
+                    (generationAgent.agent as { model?: string; name?: string }).model
+                      ?? generationAgent.agent.name,
+                  )
+              : t.maxLengthHelp}
+          </p>
         </div>
       </div>
 
-      {/* Action Buttons */}
-      <div className="semiont-modal__actions" style={{ paddingTop: '0.5rem' }}>
-        <button
-          type="button"
-          onClick={onCancel}
-          className="semiont-button--secondary semiont-button--flex"
-        >
-          ✕ {t.cancel}
-        </button>
-        <button
-          type="button"
-          onClick={onBack}
-          className="semiont-button--secondary semiont-button--flex"
-        >
-          ◀ {t.back}
-        </button>
-        <button
-          type="submit"
-          className="semiont-button--primary semiont-button--flex"
-        >
-          ✨ {t.generate}
-        </button>
-      </div>
+      <WizardFooter
+        backLabel={t.back}
+        onBack={onBack}
+        primary={{ label: t.generate, type: 'submit' }}
+      />
     </form>
   );
 }

package/src/components/modals/ConfigureSearchStep.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import React, { useState } from 'react';
+import React from 'react';
+import { WizardFooter } from './WizardFooter';
 
 export interface SearchConfig {
   limit: number;
@@ -8,15 +9,21 @@ export interface SearchConfig {
 }
 
 export interface ConfigureSearchStepProps {
+  /**
+   * CONTROLLED (WIZARD-NAVIGATION D3). This used to be local `useState`, so stepping
+   * Back unmounted the component and silently discarded what the user had chosen —
+   * a Back button that costs you work is worse than no Back button, because it
+   * invites the press. The wizard owns it for the modal's lifetime instead.
+   */
+  config: SearchConfig;
+  onConfigChange: (config: SearchConfig) => void;
   isSearching?: boolean;
   onBack: () => void;
-  onCancel: () => void;
   onSearch: (config: SearchConfig) => void;
   translations: {
     maxResults: string;
     semanticScoring: string;
     semanticScoringHelp: string;
-    cancel: string;
     back: string;
     search: string;
     searching: string;
@@ -24,18 +31,16 @@ export interface ConfigureSearchStepProps {
 }
 
 export function ConfigureSearchStep({
+  config,
+  onConfigChange,
   isSearching = false,
   onBack,
-  onCancel,
   onSearch,
   translations: t,
 }: ConfigureSearchStepProps) {
-  const [limit, setLimit] = useState(10);
-  const [useSemanticScoring, setUseSemanticScoring] = useState(true);
-
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    onSearch({ limit, useSemanticScoring });
+    onSearch(config);
   };
 
   return (
@@ -47,8 +52,8 @@ export function ConfigureSearchStep({
         </label>
         <select
           id="wizard-limit"
-          value={limit}
-          onChange={(e) => setLimit(parseInt(e.target.value))}
+          value={config.limit}
+          onChange={(e) => onConfigChange({ ...config, limit: parseInt(e.target.value) })}
           className="semiont-select"
         >
           <option value={1}>1</option>
@@ -60,11 +65,11 @@ export function ConfigureSearchStep({
 
       {/* Semantic Scoring Toggle */}
       <div className="semiont-form__field">
-        <label className="semiont-form__label" style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+        <label className="semiont-form__label semiont-form__label--inline">
           <input
             type="checkbox"
-            checked={useSemanticScoring}
-            onChange={(e) => setUseSemanticScoring(e.target.checked)}
+            checked={config.useSemanticScoring}
+            onChange={(e) => onConfigChange({ ...config, useSemanticScoring: e.target.checked })}
           />
           {t.semanticScoring}
         </label>
@@ -73,33 +78,11 @@ export function ConfigureSearchStep({
         </p>
       </div>
 
-      {/* Action Buttons */}
-      <div className="semiont-modal__actions" style={{ paddingTop: '0.5rem' }}>
-        <button
-          type="button"
-          onClick={onCancel}
-          className="semiont-button--secondary semiont-button--flex"
-          disabled={isSearching}
-        >
-          ✕ {t.cancel}
-        </button>
-        <button
-          type="button"
-          onClick={onBack}
-          className="semiont-button--secondary semiont-button--flex"
-          disabled={isSearching}
-        >
-          ◀ {t.back}
-        </button>
-        <button
-          type="submit"
-          className="semiont-button--primary semiont-button--flex"
-          disabled={isSearching}
-          data-generating={isSearching ? 'true' : 'false'}
-        >
-          {isSearching ? `✨ ${t.searching}` : `🔍 ${t.search}`}
-        </button>
-      </div>
+      <WizardFooter
+        backLabel={t.back}
+        onBack={onBack}
+        primary={{ label: t.search, pendingLabel: t.searching, pending: isSearching, type: 'submit' }}
+      />
     </form>
   );
 }

package/src/components/modals/ReferenceWizardModal.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useEffect, useCallback } from 'react';
 import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react';
-import type { GatheredContext } from '@semiont/core';
+import type { GatheredContext, CollaboratorEntry } from '@semiont/core';
 import { uuidV4 } from '@semiont/core';
 import { useSemiont } from '../../session/SemiontProvider';
 import { useObservable } from '../../hooks/useObservable';
@@ -12,6 +12,7 @@ import { ConfigureGenerationStep } from './ConfigureGenerationStep';
 import type { GenerationConfig } from './ConfigureGenerationStep';
 import { ConfigureSearchStep } from './ConfigureSearchStep';
 import type { SearchConfig } from './ConfigureSearchStep';
+import type { GenerationDraft } from './ConfigureGenerationStep';
 import { SearchResultsStep } from './SearchResultsStep';
 import type { ScoredResult } from './SearchResultsStep';
 
@@ -22,6 +23,12 @@ type WizardStep =
   | { step: 'configure-generation' };
 
 export interface ReferenceWizardModalProps {
+  /**
+   * Roster entry serving `generation`, forwarded to ConfigureGenerationStep so
+   * the max-length control is bounded by the model's real output ceiling.
+   * Optional: absent means today's default bounds (INFERENCE-LIMITS-EXPOSURE D3).
+   */
+  generationAgent?: CollaboratorEntry;
   isOpen: boolean;
   onClose: () => void;
   /** The annotation being resolved */
@@ -76,6 +83,7 @@ export interface ReferenceWizardModalProps {
     creativityCreative: string;
     maxLength: string;
     maxLengthHelp: string;
+    maxLengthCeiling: string;
     maxResults: string;
     semanticScoring: string;
     semanticScoringHelp: string;
@@ -97,9 +105,18 @@ export function ReferenceWizardModal({
   onLinkResource,
   onComposeNavigate,
   translations: t,
+  generationAgent,
 }: ReferenceWizardModalProps) {
   const session = useObservable(useSemiont().activeSession$);
   const [wizardStep, setWizardStep] = useState<WizardStep>({ step: 'gather' });
+  // Both step drafts live HERE, not in the steps (WIZARD-NAVIGATION D3). Stepping
+  // back unmounts a step; if the step owned its values, Back would silently discard
+  // everything typed — which is exactly what it used to do.
+  const [searchConfig, setSearchConfig] = useState<SearchConfig>({ limit: 10, useSemanticScoring: true });
+  const [generationDraft, setGenerationDraft] = useState<GenerationDraft>({
+    title: defaultTitle, storagePath: '', prompt: '', language: locale,
+    temperature: 0.7, maxTokensText: '500',
+  });
   const [isSearching, setIsSearching] = useState(false);
   const [userHint, setUserHint] = useState('');
 
@@ -107,6 +124,11 @@ export function ReferenceWizardModal({
   useEffect(() => {
     if (isOpen) {
       setWizardStep({ step: 'gather' });
+      setSearchConfig({ limit: 10, useSemanticScoring: true });
+      setGenerationDraft({
+        title: defaultTitle, storagePath: '', prompt: '', language: locale,
+        temperature: 0.7, maxTokensText: '500',
+      });
       setIsSearching(false);
       setUserHint('');
     }
@@ -125,25 +147,44 @@ export function ReferenceWizardModal({
     setWizardStep({ step: 'configure-search' });
   }, []);
 
+  /**
+   * The gather step's Hint, placed where the schema says it lives.
+   *
+   * Two defects, one line. (1) Search and compose each built this inline and
+   * generation did not, so picking the AI path silently discarded what the user had
+   * typed — and then showed them an empty "Additional Instructions" box.
+   * (2) Both existing sites wrote `{ ...context, userHint }`, a TOP-LEVEL key
+   * `GatheredContext` does not define; `GatheredContext.json` puts it at
+   * `focus.userHint` ("hint to supplement or replace the selected text for search and
+   * generation"). So the hint was misplaced on every path, not just missing on one.
+   *
+   * NOTE: no production code reads `focus.userHint` yet — this is correct plumbing
+   * for a field nothing consumes. Making the hint actually steer search or generation
+   * is a separate change (see WIZARD-NAVIGATION's execution log).
+   */
+  const contextWithHint = !context
+    ? null
+    : userHint
+      ? { ...context, focus: { ...context.focus, userHint } }
+      : context;
+
   const handleGenerate = useCallback(() => {
     setWizardStep({ step: 'configure-generation' });
   }, []);
 
   const handleCompose = useCallback(() => {
-    if (!context || !annotationId || !resourceId) return;
-    const contextWithHint = userHint ? { ...context, userHint } : context;
+    if (!contextWithHint || !annotationId || !resourceId) return;
     onComposeNavigate(contextWithHint, annotationId, resourceId, defaultTitle, entityTypes);
     onClose();
-  }, [context, annotationId, resourceId, defaultTitle, entityTypes, onComposeNavigate, onClose, userHint]);
+  }, [contextWithHint, annotationId, resourceId, defaultTitle, entityTypes, onComposeNavigate, onClose]);
 
   const handleBackToGather = useCallback(() => {
     setWizardStep({ step: 'gather' });
   }, []);
 
   const handleSearchSubmit = useCallback((config: SearchConfig) => {
-    if (!annotationId || !context || !resourceId) return;
+    if (!annotationId || !contextWithHint || !resourceId) return;
     setIsSearching(true);
-    const contextWithHint = userHint ? { ...context, userHint } : context;
     session?.client.match.requestSearch({
       correlationId: uuidV4(),
       resourceId,
@@ -153,7 +194,7 @@ export function ReferenceWizardModal({
       useSemanticScoring: config.useSemanticScoring,
     });
     // Stay on configure-search until results arrive (subscription above handles transition)
-  }, [annotationId, resourceId, context, session, userHint]);
+  }, [annotationId, resourceId, contextWithHint, session]);
 
   const handleGenerateSubmit = useCallback((config: GenerationConfig) => {
     if (!annotationId) return;
@@ -245,11 +286,11 @@ export function ReferenceWizardModal({
 
                 {wizardStep.step === 'configure-generation' && context && (
                   <ConfigureGenerationStep
-                    defaultTitle={defaultTitle}
-                    locale={locale}
-                    context={context}
+                    {...(generationAgent ? { generationAgent } : {})}
+                    context={contextWithHint ?? context}
+                    config={generationDraft}
+                    onConfigChange={setGenerationDraft}
                     onBack={handleBackToGather}
-                    onCancel={onClose}
                     onGenerate={handleGenerateSubmit}
                     translations={{
                       resourceTitle: t.resourceTitle,
@@ -263,7 +304,7 @@ export function ReferenceWizardModal({
                       creativityCreative: t.creativityCreative,
                       maxLength: t.maxLength,
                       maxLengthHelp: t.maxLengthHelp,
-                      cancel: t.cancel,
+                      maxLengthCeiling: t.maxLengthCeiling,
                       back: t.back,
                       generate: t.generate,
                     }}
@@ -272,15 +313,15 @@ export function ReferenceWizardModal({
 
                 {wizardStep.step === 'configure-search' && (
                   <ConfigureSearchStep
+                    config={searchConfig}
+                    onConfigChange={setSearchConfig}
                     isSearching={isSearching}
                     onBack={handleBackToGather}
-                    onCancel={onClose}
                     onSearch={handleSearchSubmit}
                     translations={{
                       maxResults: t.maxResults,
                       semanticScoring: t.semanticScoring,
                       semanticScoringHelp: t.semanticScoringHelp,
-                      cancel: t.cancel,
                       back: t.back,
                       search: t.search,
                       searching: t.searching,
@@ -294,12 +335,10 @@ export function ReferenceWizardModal({
                     context={context}
                     onLink={handleLink}
                     onBack={handleBackToGather}
-                    onCancel={onClose}
                     translations={{
                       noResults: t.noResults,
                       link: t.link,
                       back: t.back,
-                      cancel: t.cancel,
                       score: t.score,
                       sourceContextLabel: t.sourceContextLabel,
                       connectionsLabel: t.connectionsLabel,

package/src/components/modals/ResourceGenerateModal.tsx

@@ -1,11 +1,12 @@
 'use client';
 
 import { useState, useEffect, useCallback } from 'react';
+import type { CollaboratorEntry } from '@semiont/core';
 import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react';
 import { useResourceGather } from '../../hooks/useResourceGather';
 import { ConfigureGatherStep, type ResourceGatherConfig } from './ConfigureGatherStep';
 import { GatherContextStep } from './GatherContextStep';
-import { ConfigureGenerationStep, type GenerationConfig } from './ConfigureGenerationStep';
+import { ConfigureGenerationStep, type GenerationConfig, type GenerationDraft } from './ConfigureGenerationStep';
 
 export interface ResourceGenerateModalTranslations {
   // Step titles + nav
@@ -41,10 +42,17 @@ export interface ResourceGenerateModalTranslations {
   creativityCreative: string;
   maxLength: string;
   maxLengthHelp: string;
+  maxLengthCeiling: string;
   generate: string;
 }
 
 export interface ResourceGenerateModalProps {
+  /**
+   * Roster entry serving `generation`, forwarded to ConfigureGenerationStep so
+   * the max-length control is bounded by the model's real output ceiling.
+   * Optional: absent means today's default bounds (INFERENCE-LIMITS-EXPOSURE D3).
+   */
+  generationAgent?: CollaboratorEntry;
   isOpen: boolean;
   onClose: () => void;
   resourceId: string;
@@ -58,8 +66,8 @@ export interface ResourceGenerateModalProps {
   entityTypeOptions?: string[];
   /**
    * Emit the chosen generation config. The parent runs the job
-   * (`client.yield.fromResource(resourceId, …).run(…)`) — mirrors how the
-   * annotation wizard delegates `yield.fromAnnotation` to its parent.
+   * (`client.yield.fromContext(config.context, …)`) — mirrors how the
+   * annotation wizard delegates generation to its parent.
    */
   onGenerateSubmit: (resourceId: string, config: GenerationConfig) => void;
   translations: ResourceGenerateModalTranslations;
@@ -82,7 +90,15 @@ export function ResourceGenerateModal({
   entityTypeOptions = [],
   onGenerateSubmit,
   translations: t,
+  generationAgent,
 }: ResourceGenerateModalProps) {
+  // Same draft ownership as the wizard (WIZARD-NAVIGATION D3): the step is
+  // controlled, so stepping back through this modal keeps what was typed.
+  const [generationDraft, setGenerationDraft] = useState<GenerationDraft>({
+    title: defaultTitle, storagePath: '', prompt: '', language: locale,
+    temperature: 0.7, maxTokensText: '500',
+  });
+
   const [step, setStep] = useState<Step>('configure-gather');
   const { context, loading, error, gather, reset } = useResourceGather();
   // Supplied by the owner, which already tracks the list with its failure
@@ -153,12 +169,12 @@ export function ResourceGenerateModal({
                     onGather={handleGather}
                     onCancel={onClose}
                     translations={{
+                      cancel: t.cancel,
                       intro: t.gatherIntro,
                       includeContent: t.includeContent,
                       includeSummary: t.includeSummary,
                       depth: t.gatherDepth,
                       maxResources: t.gatherMaxResources,
-                      cancel: t.cancel,
                       gather: t.gatherButton,
                     }}
                   >
@@ -230,11 +246,11 @@ export function ResourceGenerateModal({
 
                 {step === 'configure-generation' && context && (
                   <ConfigureGenerationStep
-                    defaultTitle={defaultTitle}
-                    locale={locale}
+                    {...(generationAgent ? { generationAgent } : {})}
                     context={context}
+                    config={generationDraft}
+                    onConfigChange={setGenerationDraft}
                     onBack={() => setStep('review')}
-                    onCancel={onClose}
                     onGenerate={handleGenerate}
                     translations={{
                       resourceTitle: t.resourceTitle,
@@ -248,7 +264,7 @@ export function ResourceGenerateModal({
                       creativityCreative: t.creativityCreative,
                       maxLength: t.maxLength,
                       maxLengthHelp: t.maxLengthHelp,
-                      cancel: t.cancel,
+                      maxLengthCeiling: t.maxLengthCeiling,
                       back: t.back,
                       generate: t.generate,
                     }}

package/src/components/modals/ResourceSearchModal.tsx

@@ -77,7 +77,7 @@ export function ResourceSearchModal({
       (q) =>
         semiontRef.current!.browse.resources({ search: q, limit: SEARCH_LIMIT }).pipe(
           map((st) => {
-            const resources = readyValue(st);
+            const resources = readyValue(st)?.resources;
             if (resources === undefined) return undefined;
             return resources
               .map(toSearchResult)