@semiont/react-ui 0.5.28 → 0.5.29

package/src/components/modals/ComposeStep.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useState } from 'react';
-import { LOCALES } from '@semiont/core';
+import { LOCALES, proposeStoragePath } from '@semiont/core';
 import { CodeMirrorRenderer } from '../CodeMirrorRenderer';
 import { WizardFooter } from './WizardFooter';
 
@@ -37,6 +37,12 @@ export interface ComposeParams {
 export interface ComposeStepProps {
   draft: ComposeDraft;
   onDraftChange: (patch: Partial<ComposeDraft>) => void;
+  /**
+   * Folder of the resource being composed FROM, so the new file lands beside
+   * its source (D11). Compose is always `text/markdown`, so the proposal's
+   * extension is fixed.
+   */
+  defaultFolder?: string;
   /** Entity types fixed when the reference was created — read-only tags when
    *  non-empty (D6): they are not this step's to change. */
   referenceEntityTypes: string[];
@@ -65,6 +71,7 @@ export interface ComposeStepProps {
 export function ComposeStep({
   draft,
   onDraftChange,
+  defaultFolder = '',
   referenceEntityTypes,
   entityTypeOptions,
   showLineNumbers,
@@ -73,17 +80,25 @@ export function ComposeStep({
   onCompose,
   translations: t,
 }: ComposeStepProps) {
+  // D11 — the Save location starts filled and follows the title until the
+  // user takes it over; `pathTouched` is derived (see ConfigureGenerationStep),
+  // so clearing the field restores the proposal. Compose writes markdown.
+  const pathTouched = draft.storagePath !== '';
+  const effectivePath = pathTouched
+    ? draft.storagePath
+    : proposeStoragePath(defaultFolder, draft.name, 'text/markdown');
+
   const [isCreating, setIsCreating] = useState(false);
   const fixedTypes = referenceEntityTypes.length > 0;
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    if (!draft.name.trim() || !draft.storagePath.trim()) return;
+    if (!draft.name.trim() || !effectivePath.trim()) return;
     setIsCreating(true);
     try {
       await onCompose({
         name: draft.name,
-        storagePath: `file://${draft.storagePath}`,
+        storagePath: `file://${effectivePath}`,
         content: draft.content,
         entityTypes: fixedTypes ? referenceEntityTypes : draft.entityTypes,
         language: draft.language,
@@ -126,7 +141,7 @@ export function ComposeStep({
           <input
             id="compose-storagePath"
             type="text"
-            value={draft.storagePath}
+            value={effectivePath}
             onChange={(e) => onDraftChange({ storagePath: e.target.value })}
             placeholder="people/my-resource.md"
             required

package/src/components/modals/ConfigureGenerationStep.tsx

@@ -2,8 +2,9 @@
 
 import React, { useEffect } from 'react';
 import { WizardFooter } from './WizardFooter';
-import type { CollaboratorEntry, GatheredContext } from '@semiont/core';
-import { LOCALES } from '@semiont/core';
+import type { CollaboratorEntry, GatheredContext, SupportedMediaType } from '@semiont/core';
+import type { GenerationOptions } from '@semiont/sdk';
+import { LOCALES, GENERATABLE_MEDIA_TYPES, capabilitiesOf, proposeStoragePath } from '@semiont/core';
 
 /**
  * Bounds for the max-length control when no ceiling is known. These are the
@@ -15,23 +16,82 @@ 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;
+  /**
+   * The path FRAGMENT the user types beside the `file://` prefix — not a URI.
+   * (`GenerationConfig.storageUri` is the assembled one; the names differ
+   * because the things differ.)
+   */
   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;
+  /** The artifact's media type. Seeded `text/markdown` by both hosts (D2). */
+  outputMediaType: SupportedMediaType;
 }
 
-export interface GenerationConfig {
-  title: string;
-  storagePath: string;
-  prompt?: string;
-  language: string;
-  temperature: number;
-  maxTokens: number;
-  context: GatheredContext;
-}
+/**
+ * What this form fills in. Named here, but TYPED by the SDK (P2b).
+ *
+ * `storageUri` is on this list rather than a local `storagePath: string`
+ * because the two were the same thing under different names — a divergence
+ * that survived precisely because nothing tied them together (D8).
+ */
+type FormFilled =
+  | 'title'
+  | 'storageUri'
+  | 'language'
+  | 'temperature'
+  | 'maxTokens'
+  | 'outputMediaType';
+
+/**
+ * The submitted payload: the SDK's own generation options, DERIVED rather
+ * than restated (P2b), plus the grounding context.
+ *
+ * This was a hand-written interface listing the same fields with independent
+ * types — the shape `## Duplicated Shape` forbids — and it drifted exactly as
+ * predicted: `storagePath: string` held a `storageUri`, so every consumer
+ * re-mapped it by hand and silently dropped whatever the mapping forgot.
+ * Deriving means a rename or retype in `GenerationOptions` is a compile
+ * error here instead of a quiet gap at the wire.
+ *
+ * NARROWED on purpose: the SDK also carries `task`, `structure`, `cite` and
+ * `stallDeadlineMs`, which this form does not collect, and a payload type
+ * that advertised them would promise more than the UI delivers. Surfacing one
+ * later is a one-word edit to `FormFilled` plus its control — the door is
+ * unlocked, not open.
+ *
+ * `Required` because the form always fills these, even where the SDK lets
+ * them be absent; `prompt` stays optional, because a blank instruction field
+ * is omitted rather than sent empty.
+ */
+export type GenerationConfig =
+  & Required<Pick<GenerationOptions, FormFilled>>
+  & Pick<GenerationOptions, 'prompt'>
+  & { context: GatheredContext };
+
+/** The one place a format's required extension is read (D7). */
+const extensionFor = (format: SupportedMediaType): string =>
+  capabilitiesOf(format)?.extension ?? '';
+
+/**
+ * A fresh draft, defined ONCE for both hosts (D8b). The two modals carried
+ * byte-identical literals — magic numbers included — so every new field meant
+ * two edits and an opportunity to seed only one of them.
+ */
+export const freshGenerationDraft = (title: string, locale: string): GenerationDraft => ({
+  title,
+  storagePath: '',
+  prompt: '',
+  language: locale,
+  temperature: 0.7,
+  maxTokensText: '500',
+  // D2: markdown is the DEFAULT, not an assumption — the worker would also
+  // default to it, but a control must send what it shows.
+  outputMediaType: 'text/markdown',
+});
 
 export interface ConfigureGenerationStepProps {
   context: GatheredContext;
@@ -43,6 +103,12 @@ export interface ConfigureGenerationStepProps {
   /** Absent in a single-stack host (GATHER-AT-THE-TOP D6) — the footer then renders no retreat. */
   onBack?: () => void;
   onGenerate: (config: GenerationConfig) => void;
+  /**
+   * Folder of the resource being generated FROM, so the artifact lands beside
+   * its source (D11). The page derives it; this component stays
+   * presentational, exactly as it already receives the default title.
+   */
+  defaultFolder?: string;
   translations: {
     resourceTitle: string;
     resourceTitlePlaceholder: string;
@@ -62,6 +128,15 @@ export interface ConfigureGenerationStepProps {
      * and `{{model}}`.
      */
     maxLengthCeiling: string;
+    /** Label for the output-format select. */
+    outputFormat: string;
+    /**
+     * Shown when the Save location's extension contradicts the chosen format,
+     * which the form REFUSES to submit (D7 — the worker is faithful and will
+     * write a PDF to a `.md` path, so this is the only gate). Interpolates
+     * `{{extension}}`.
+     */
+    formatExtensionMismatch: string;
     back?: string;
     generate: string;
   };
@@ -82,6 +157,7 @@ export function ConfigureGenerationStep({
   onConfigChange,
   onBack,
   onGenerate,
+  defaultFolder = '',
   translations: t,
   generationAgent,
 }: ConfigureGenerationStepProps) {
@@ -90,9 +166,28 @@ export function ConfigureGenerationStep({
   // 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 { title, storagePath, prompt, language, temperature, maxTokensText, outputMediaType } = config;
   const set = (patch: Partial<GenerationDraft>) => onConfigChange({ ...config, ...patch });
 
+  // D11 — the Save location starts filled and FOLLOWS the title and format
+  // until the user takes it over. `pathTouched` is DERIVED rather than stored:
+  // it is exactly "the field holds the user's own text", which makes clearing
+  // the field un-touch it for free, keeps it reset-on-open and Back-safe
+  // because `storagePath` already is, and leaves no second field to desync.
+  const pathTouched = storagePath !== '';
+  const proposedPath = proposeStoragePath(defaultFolder, title, outputMediaType);
+  const effectivePath = pathTouched ? storagePath : proposedPath;
+
+  // D7 — the GUI is where a format/extension mismatch is caught, because it is
+  // where the person who can fix it is standing. An EMPTY path is not a
+  // mismatch: the field is `required`, so emptiness is already refused, and
+  // telling an untouched form it is wrong is not a welcome. Under D11 a
+  // PROPOSED path always matches, so this now fires only on hand-edits.
+  const requiredExtension = extensionFor(outputMediaType);
+  const extensionMismatch =
+    effectivePath !== '' &&
+    !effectivePath.toLowerCase().endsWith(requiredExtension.toLowerCase());
+
   const ceiling = generationAgent?.limits?.maxOutputTokens ?? DEFAULT_MAX_TOKENS_CEILING;
 
   /**
@@ -119,14 +214,16 @@ export function ConfigureGenerationStep({
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
+    if (extensionMismatch) return;
     const trimmedPrompt = prompt.trim();
     onGenerate({
       title,
-      storagePath: `file://${storagePath}`,
+      storageUri: `file://${effectivePath}`,
       ...(trimmedPrompt ? { prompt: trimmedPrompt } : {}),
       language,
       temperature,
       maxTokens: submittedMaxTokens,
+      outputMediaType,
       context,
     });
   };
@@ -167,13 +264,44 @@ export function ConfigureGenerationStep({
           <input
             id="wizard-storagePath"
             type="text"
-            value={storagePath}
+            value={effectivePath}
             onChange={(e) => set({ storagePath: e.target.value })}
             required
+            aria-invalid={extensionMismatch}
+            {...(extensionMismatch ? { 'aria-describedby': 'wizard-format-mismatch' } : {})}
             className="semiont-input semiont-input--addon"
             placeholder="generated/my-resource.md"
           />
         </div>
+        {/* The reason sits with the field, not on the button: the message
+            belongs where the fix is. */}
+        {extensionMismatch && (
+          <p id="wizard-format-mismatch" className="semiont-form__error" role="alert">
+            {t.formatExtensionMismatch.replace('{{extension}}', requiredExtension)}
+          </p>
+        )}
+      </div>
+
+      {/* Output format — with the artifact's IDENTITY (title, location), not
+          among the model knobs below (D5). The options are DERIVED from the
+          registry (D1): promote a fourth row to `generatable` and it appears
+          here, with no list to forget to update. */}
+      <div className="semiont-form__field">
+        <label htmlFor="wizard-outputFormat" className="semiont-form__label">
+          {t.outputFormat}
+        </label>
+        <select
+          id="wizard-outputFormat"
+          value={outputMediaType}
+          onChange={(e) => set({ outputMediaType: e.target.value as SupportedMediaType })}
+          className="semiont-select"
+        >
+          {GENERATABLE_MEDIA_TYPES.map((format) => (
+            <option key={format} value={format}>
+              {capabilitiesOf(format)?.label ?? format}
+            </option>
+          ))}
+        </select>
       </div>
 
       {/* Additional Instructions */}
@@ -275,7 +403,7 @@ export function ConfigureGenerationStep({
 
       <WizardFooter
         {...(onBack && t.back ? { backLabel: t.back, onBack } : {})}
-        primary={{ label: t.generate, type: 'submit' }}
+        primary={{ label: t.generate, type: 'submit', disabled: extensionMismatch }}
       />
     </form>
   );

package/src/components/modals/ReferenceWizardModal.tsx

@@ -8,7 +8,7 @@ import { useSemiont } from '../../session/SemiontProvider';
 import { useObservable } from '../../hooks/useObservable';
 import { useEventSubscription } from '../../contexts/useEventSubscription';
 import { GatherContextStep } from './GatherContextStep';
-import { ConfigureGenerationStep } from './ConfigureGenerationStep';
+import { ConfigureGenerationStep, freshGenerationDraft } from './ConfigureGenerationStep';
 import type { GenerationConfig } from './ConfigureGenerationStep';
 import { ConfigureSearchStep } from './ConfigureSearchStep';
 import type { SearchConfig } from './ConfigureSearchStep';
@@ -42,6 +42,8 @@ export interface ReferenceWizardModalProps {
   resourceId: string | null;
   /** Default title (selected text) */
   defaultTitle: string;
+  /** Folder of the source resource, so new files land beside it (D11). */
+  defaultFolder?: string;
   /** Entity types from the annotation */
   entityTypes: string[];
   /**
@@ -111,6 +113,8 @@ export interface ReferenceWizardModalProps {
     maxLength: string;
     maxLengthHelp: string;
     maxLengthCeiling: string;
+    outputFormat: string;
+    formatExtensionMismatch: string;
     maxResults: string;
     semanticScoring: string;
     semanticScoringHelp: string;
@@ -131,6 +135,7 @@ export function ReferenceWizardModal({
   annotationId,
   resourceId,
   defaultTitle,
+  defaultFolder,
   entityTypes,
   resourceName,
   locale,
@@ -151,10 +156,9 @@ export function ReferenceWizardModal({
   // 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 [generationDraft, setGenerationDraft] = useState<GenerationDraft>(
+    () => freshGenerationDraft(defaultTitle, locale),
+  );
   const [isSearching, setIsSearching] = useState(false);
   const [searchError, setSearchError] = useState<string | null>(null);
   const [userHint, setUserHint] = useState('');
@@ -179,10 +183,7 @@ export function ReferenceWizardModal({
       seededTitle.current = defaultTitle;
       setWizardStep({ step: 'gather' });
       setSearchConfig({ limit: 10, useSemanticScoring: true });
-      setGenerationDraft({
-        title: defaultTitle, storagePath: '', prompt: '', language: locale,
-        temperature: 0.7, maxTokensText: '500',
-      });
+      setGenerationDraft(freshGenerationDraft(defaultTitle, locale));
       setIsSearching(false);
       setSearchError(null);
       setUserHint('');
@@ -425,6 +426,7 @@ export function ReferenceWizardModal({
                   <ComposeStep
                     draft={composeDraft}
                     onDraftChange={(patch) => setComposeDraft((d) => ({ ...d, ...patch }))}
+                    defaultFolder={defaultFolder}
                     referenceEntityTypes={entityTypes}
                     entityTypeOptions={entityTypeOptions}
                     showLineNumbers={showLineNumbers}
@@ -461,6 +463,7 @@ export function ReferenceWizardModal({
                     context={contextWithHint ?? context}
                     config={generationDraft}
                     onConfigChange={setGenerationDraft}
+                    defaultFolder={defaultFolder}
                     onBack={handleBackToGather}
                     onGenerate={handleGenerateSubmit}
                     translations={{
@@ -477,6 +480,8 @@ export function ReferenceWizardModal({
                       maxLength: t.maxLength,
                       maxLengthHelp: t.maxLengthHelp,
                       maxLengthCeiling: t.maxLengthCeiling,
+                      outputFormat: t.outputFormat,
+                      formatExtensionMismatch: t.formatExtensionMismatch,
                       back: t.back,
                       generate: t.generate,
                     }}

package/src/components/modals/ResourceGenerateModal.tsx

@@ -7,7 +7,7 @@ import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@
 import { ConfigureGatherStep, type ResourceGatherConfig } from './ConfigureGatherStep';
 import { DiscardPrompt } from './DiscardPrompt';
 import { GatherContextStep } from './GatherContextStep';
-import { ConfigureGenerationStep, type GenerationConfig, type GenerationDraft } from './ConfigureGenerationStep';
+import { ConfigureGenerationStep, freshGenerationDraft, type GenerationConfig, type GenerationDraft } from './ConfigureGenerationStep';
 
 export interface ResourceGenerateModalTranslations {
   /** The ONE modal title — names the flow, not a step. */
@@ -51,6 +51,8 @@ export interface ResourceGenerateModalTranslations {
   maxLength: string;
   maxLengthHelp: string;
   maxLengthCeiling: string;
+  outputFormat: string;
+  formatExtensionMismatch: string;
   generate: string;
   // DiscardPrompt (GATHER-AT-THE-TOP P1)
   discardDraftPrompt: string;
@@ -69,6 +71,8 @@ export interface ResourceGenerateModalProps {
   onClose: () => void;
   resourceId: string;
   defaultTitle: string;
+  /** Folder of the source resource, so the artifact lands beside it (D11). */
+  defaultFolder?: string;
   locale: string;
   /**
    * Entity types offered in the exclusion picker. Owner-supplied so the
@@ -115,6 +119,7 @@ export function ResourceGenerateModal({
   onClose,
   resourceId,
   defaultTitle,
+  defaultFolder,
   locale,
   entityTypeOptions = [],
   onGenerateSubmit,
@@ -127,10 +132,7 @@ export function ResourceGenerateModal({
 }: 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 freshDraft = (): GenerationDraft => ({
-    title: defaultTitle, storagePath: '', prompt: '', language: locale,
-    temperature: 0.7, maxTokensText: '500',
-  });
+  const freshDraft = (): GenerationDraft => freshGenerationDraft(defaultTitle, locale);
   const [generationDraft, setGenerationDraft] = useState<GenerationDraft>(freshDraft);
 
   // "Has THIS run gathered yet?" — the page's gather slots survive across
@@ -358,6 +360,7 @@ export function ResourceGenerateModal({
                       context={gatherContext}
                       config={generationDraft}
                       onConfigChange={setGenerationDraft}
+                      defaultFolder={defaultFolder}
                       onGenerate={handleGenerate}
                       translations={{
                         resourceTitle: t.resourceTitle,
@@ -373,6 +376,8 @@ export function ResourceGenerateModal({
                         maxLength: t.maxLength,
                         maxLengthHelp: t.maxLengthHelp,
                         maxLengthCeiling: t.maxLengthCeiling,
+                        outputFormat: t.outputFormat,
+                        formatExtensionMismatch: t.formatExtensionMismatch,
                         generate: t.generate,
                       }}
                     />