@semiont/react-ui 0.5.25 → 0.5.27

package/src/components/modals/SearchModal.css

@@ -211,11 +211,11 @@
 }
 
 .semiont-search-modal__result-icon--entity {
-  color: var(--semiont-color-success-500);
+  color: var(--semiont-color-green-500);
 }
 
 [data-theme="dark"] .semiont-search-modal__result-icon--entity {
-  color: var(--semiont-color-success-400);
+  color: var(--semiont-color-green-400);
 }
 
 /* Result content */
@@ -244,13 +244,13 @@
   font-size: 0.75rem;
   font-weight: 500;
   border-radius: 9999px;
-  background-color: var(--semiont-color-success-100);
-  color: var(--semiont-color-success-700);
+  background-color: var(--semiont-color-green-100);
+  color: var(--semiont-color-green-700);
 }
 
 [data-theme="dark"] .semiont-search-modal__result-badge {
   background-color: rgba(34, 197, 94, 0.3);
-  color: var(--semiont-color-success-300);
+  color: var(--semiont-color-green-300);
 }
 
 .semiont-search-modal__result-description {
@@ -503,10 +503,6 @@
   font-weight: 500;
 }
 
-[data-theme="dark"] .semiont-gather__loading-text {
-  color: var(--semiont-text-secondary);
-}
-
 .semiont-gather__loading-dot {
   display: inline-block;
   width: 0.625rem;
@@ -599,10 +595,6 @@
   margin-bottom: 0.5rem;
 }
 
-[data-theme="dark"] .semiont-gather__footer-label {
-  color: var(--semiont-text-tertiary);
-}
-
 .semiont-gather__actions {
   display: flex;
   flex-flow: row nowrap;
@@ -665,10 +657,6 @@
   color: var(--semiont-color-primary-600);
 }
 
-[data-theme="dark"] .semiont-gather__expand-btn {
-  color: var(--semiont-text-tertiary);
-}
-
 [data-theme="dark"] .semiont-gather__expand-btn:hover {
   color: var(--semiont-color-primary-400);
 }

package/src/components/modals/SearchModal.tsx

@@ -74,7 +74,7 @@ export function SearchModal({
       (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((resource): SearchResult | null => {

package/src/components/modals/SearchResultsStep.tsx

@@ -1,4 +1,5 @@
 'use client';
+import { WizardFooter } from './WizardFooter';
 
 import type { GatheredContext, ResourceDescriptor } from '@semiont/core';
 import { ContextSummary } from './ContextSummary';
@@ -14,12 +15,10 @@ export interface SearchResultsStepProps {
   context: GatheredContext;
   onLink: (resourceId: string) => void;
   onBack: () => void;
-  onCancel: () => void;
   translations: {
     noResults: string;
     link: string;
     back: string;
-    cancel: string;
     score: string;
   } & ContextSummaryTranslations;
 }
@@ -29,7 +28,6 @@ export function SearchResultsStep({
   context,
   onLink,
   onBack,
-  onCancel,
   translations: t,
 }: SearchResultsStepProps) {
   return (
@@ -102,23 +100,7 @@ export function SearchResultsStep({
         </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>
-      </div>
+      <WizardFooter backLabel={t.back} onBack={onBack} />
     </>
   );
 }

package/src/components/modals/WizardFooter.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+/**
+ * The one wizard footer (WIZARD-NAVIGATION D7).
+ *
+ * Four steps used to hand-build this markup, which is how four different footers
+ * happened: three carried a `✕ Cancel` that duplicated the corner control, one had no
+ * footer at all, and every button stretched to equal width so "leave" read as a peer of
+ * "do the thing".
+ *
+ * The grammar, settled in D1/D2:
+ *   • Dismissal is NOT here. The corner ✕, Esc and the backdrop are the way out, and
+ *     they are the same on every step including the one with no footer.
+ *   • Retreat is chrome: quiet, left, no emoji.
+ *   • Advance is the decision: filled, right, one verb.
+ */
+
+export interface WizardFooterPrimary {
+  label: string;
+  /** Shown while `pending`; falls back to `label`. */
+  pendingLabel?: string;
+  pending?: boolean;
+  type: 'submit' | 'button';
+  onClick?: () => void;
+}
+
+export interface WizardFooterProps {
+  /** Omit both to render no retreat — correct on the first step. */
+  backLabel?: string;
+  onBack?: () => void;
+  /** Omit on steps whose action lives elsewhere (search results links per row). */
+  primary?: WizardFooterPrimary;
+}
+
+export function WizardFooter({ backLabel, onBack, primary }: WizardFooterProps) {
+  const pending = primary?.pending ?? false;
+
+  return (
+    <div className="semiont-modal__actions semiont-modal__actions--wizard">
+      {onBack && backLabel && (
+        <button
+          type="button"
+          onClick={onBack}
+          className="semiont-button--secondary semiont-wizard-footer__back"
+          disabled={pending}
+        >
+          ◀ {backLabel}
+        </button>
+      )}
+      {primary && (
+        <button
+          type={primary.type}
+          {...(primary.onClick ? { onClick: primary.onClick } : {})}
+          className="semiont-button--primary"
+          disabled={pending}
+          data-pending={pending ? 'true' : 'false'}
+        >
+          {pending ? (primary.pendingLabel ?? primary.label) : primary.label}
+        </button>
+      )}
+    </div>
+  );
+}

package/src/components/modals/__tests__/ConfigureGenerationStep.test.tsx

@@ -0,0 +1,255 @@
+/**
+ * INFERENCE-LIMITS-EXPOSURE P3b — the max-length control is bounded by the
+ * generation-serving agent's discovered output ceiling.
+ *
+ * The control was NOT previously unbounded: it shipped `min="100" max="4000"`.
+ * So this phase replaces a hardcoded 4000 with the real ceiling, which for any
+ * model above 4000 RAISES a cap users hit today, and for a smaller model
+ * lowers it to something the provider will actually honour.
+ */
+import { describe, it, expect, vi } from 'vitest';
+import { useState } from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import type { CollaboratorEntry, GatheredContext } from '@semiont/core';
+import { ConfigureGenerationStep } from '../ConfigureGenerationStep';
+
+const translations = {
+  resourceTitle: 'Title',
+  resourceTitlePlaceholder: 'Title…',
+  additionalInstructions: 'Instructions',
+  additionalInstructionsPlaceholder: 'Instructions…',
+  language: 'Language',
+  languageHelp: 'Language help',
+  creativity: 'Creativity',
+  creativityFocused: 'Focused',
+  creativityCreative: 'Creative',
+  maxLength: 'Max length',
+  maxLengthHelp: 'How long the generated resource may be.',
+  // Named model + ceiling, so the bound is legible rather than mysterious (D6).
+  maxLengthCeiling: 'Limited to {{maxOutputTokens}} tokens by {{model}}.',
+  back: 'Back',
+  generate: 'Generate',
+};
+
+const context = { resources: [], annotations: [] } as unknown as GatheredContext;
+
+/** The wizard's initial draft (WIZARD-NAVIGATION D3). */
+const DRAFT = {
+  title: 'Untitled', storagePath: '', prompt: '', language: 'en',
+  temperature: 0.7, maxTokensText: '500',
+};
+
+const agentWithCeiling = (maxOutputTokens: number): CollaboratorEntry =>
+  ({
+    agent: {
+      '@type': 'Software',
+      name: 'Claude Sonnet 5',
+      provider: 'anthropic',
+      model: 'claude-sonnet-5',
+    },
+    servesJobTypes: ['generation'],
+    limits: { contextTokens: 200_000, maxOutputTokens },
+  }) as unknown as CollaboratorEntry;
+
+/**
+ * The step is CONTROLLED since WIZARD-NAVIGATION D3 — the wizard owns the draft so
+ * Back cannot discard it. These tests therefore mount a tiny stateful harness rather
+ * than the bare component: a `vi.fn()` for `onConfigChange` would swallow every edit
+ * and quietly turn each assertion below into a test of nothing.
+ */
+function Harness({ generationAgent }: { generationAgent?: CollaboratorEntry }) {
+  const [draft, setDraft] = useState(DRAFT);
+  return (
+    <ConfigureGenerationStep
+      config={draft}
+      onConfigChange={setDraft}
+      context={context}
+      onBack={vi.fn()}
+      onGenerate={onGenerateSpy}
+      translations={translations}
+      {...(generationAgent ? { generationAgent } : {})}
+    />
+  );
+}
+
+let onGenerateSpy = vi.fn();
+
+function renderStep(generationAgent?: CollaboratorEntry) {
+  onGenerateSpy = vi.fn();
+  const utils = render(<Harness {...(generationAgent ? { generationAgent } : {})} />);
+  const input = () => screen.getByLabelText('Max length') as HTMLInputElement;
+  return { ...utils, input, props: { onGenerate: onGenerateSpy } };
+}
+
+function fillRequired() {
+  fireEvent.change(screen.getByLabelText('Save location'), {
+    target: { value: 'generated/out.md' },
+  });
+}
+
+describe('ConfigureGenerationStep — ceiling awareness', () => {
+  it('bounds the control by the agent ceiling and names it in help text', () => {
+    const { input } = renderStep(agentWithCeiling(64_000));
+
+    expect(input().max).toBe('64000');
+    expect(screen.getByText(/Limited to 64000 tokens by claude-sonnet-5\./)).toBeInTheDocument();
+  });
+
+  it('will not commit a value above the ceiling', () => {
+    // `max` on a number input does not prevent TYPING an over-value — it only
+    // marks the field invalid. D6 says the value cannot be entered, so assert
+    // the committed state, never the attribute alone.
+    const { input } = renderStep(agentWithCeiling(2_000));
+
+    fireEvent.change(input(), { target: { value: '9999' } });
+
+    expect(input().value).toBe('2000');
+  });
+
+  it('clamps the 500 default down when the ceiling is smaller', () => {
+    const { input } = renderStep(agentWithCeiling(300));
+
+    expect(input().value).toBe('300');
+  });
+
+  it('re-bounds and clamps when the ceiling arrives AFTER mount', () => {
+    // The case that decides whether this feature works in the app at all:
+    // `browse.agents()` is asynchronous, so `generationAgent` is undefined on
+    // first render and arrives later. An implementation that only consults the
+    // ceiling in the `useState` initializer passes every test above and does
+    // nothing in production.
+    const { input, rerender } = renderStep(undefined);
+
+    expect(input().max).toBe('4000');
+    fireEvent.change(input(), { target: { value: '3000' } });
+    expect(input().value).toBe('3000');
+
+    rerender(<Harness generationAgent={agentWithCeiling(1_000)} />);
+
+    expect(input().max).toBe('1000');
+    // 3000 is now out of range and must not survive as a submittable value.
+    expect(input().value).toBe('1000');
+  });
+
+  it('keeps a value that is still within a newly arrived ceiling', () => {
+    const { input, rerender } = renderStep(undefined);
+    fireEvent.change(input(), { target: { value: '800' } });
+
+    rerender(<Harness generationAgent={agentWithCeiling(4_000)} />);
+
+    expect(input().value).toBe('800');
+  });
+
+  it('falls back to today\'s bounds and copy without an agent (D3/D6 degradation)', () => {
+    const { input } = renderStep(undefined);
+
+    expect(input().min).toBe('100');
+    expect(input().max).toBe('4000');
+    expect(screen.getByText('How long the generated resource may be.')).toBeInTheDocument();
+    expect(screen.queryByText(/Limited to/)).not.toBeInTheDocument();
+  });
+
+  it('falls back when the agent is present but discovery could not answer', () => {
+    const noLimits = { ...agentWithCeiling(64_000) } as Record<string, unknown>;
+    delete noLimits.limits;
+    const { input } = renderStep(noLimits as unknown as CollaboratorEntry);
+
+    expect(input().max).toBe('4000');
+    expect(screen.queryByText(/Limited to/)).not.toBeInTheDocument();
+  });
+
+  it('submits the clamped value, not the typed one', () => {
+    const { props } = renderStep(agentWithCeiling(1_500));
+    const onGenerate = props.onGenerate;
+
+    fillRequired();
+    const input = screen.getByLabelText('Max length') as HTMLInputElement;
+    fireEvent.change(input, { target: { value: '8000' } });
+    fireEvent.click(screen.getByText(/Generate/));
+
+    expect(onGenerate).toHaveBeenCalledTimes(1);
+    expect(onGenerate.mock.calls[0]![0].maxTokens).toBe(1_500);
+  });
+
+  it('lets the field be cleared, and never submits NaN for it', () => {
+    // Pre-existing hazard the clamp must not inherit: the handler was
+    // `parseInt(e.target.value)` and `parseInt('')` is NaN, which React then
+    // warns about and which would travel into the job config. Clearing must
+    // stay possible (you cannot retype a number otherwise), so the contract is
+    // about what SUBMITS, not about forbidding the empty state.
+    const { props } = renderStep(agentWithCeiling(4_000));
+    const onGenerate = props.onGenerate;
+    const input = screen.getByLabelText('Max length') as HTMLInputElement;
+
+    fillRequired();
+    fireEvent.change(input, { target: { value: '' } });
+    expect(input.value).toBe('');
+
+    fireEvent.click(screen.getByText(/Generate/));
+
+    const submitted = onGenerate.mock.calls[0]![0].maxTokens;
+    expect(Number.isFinite(submitted)).toBe(true);
+    expect(submitted).toBeGreaterThanOrEqual(100);
+    expect(submitted).toBeLessThanOrEqual(4_000);
+  });
+});
+
+// The rest of the draft, same contract as the ceiling: every field reports to
+// the owner (WIZARD-NAVIGATION D3). A field that kept its own state would look
+// right until someone pressed Back.
+describe('ConfigureGenerationStep — the draft is the owner\'s', () => {
+  it('reports edits to title, instructions, language and creativity', async () => {
+    const { input } = renderStep(agentWithCeiling(4_000));
+    expect(input()).toBeInTheDocument();
+
+    fireEvent.change(screen.getByLabelText(translations.resourceTitle), { target: { value: 'Caspian Sea' } });
+    expect((screen.getByLabelText(translations.resourceTitle) as HTMLInputElement).value).toBe('Caspian Sea');
+
+    fireEvent.change(screen.getByLabelText(translations.additionalInstructions), { target: { value: 'hydrology only' } });
+    expect((screen.getByLabelText(translations.additionalInstructions) as HTMLTextAreaElement).value).toBe('hydrology only');
+
+    // The label carries the live value — "Creativity (0.7)" — which is itself
+    // the proof the slider is controlled: it can only update if the owner's
+    // draft came back down.
+    const slider = () => screen.getByLabelText(new RegExp(`^${translations.creativity}`)) as HTMLInputElement;
+    fireEvent.change(slider(), { target: { value: '0.2' } });
+    expect(slider().value).toBe('0.2');
+    expect(screen.getByText(/Creativity \(0\.2\)/)).toBeInTheDocument();
+  });
+
+  it('lets the max-length field go empty while retyping', () => {
+    // Clearing is a legitimate mid-edit state — you cannot retype a number
+    // otherwise — so the field must accept '' and let submission clamp it.
+    const { input } = renderStep(agentWithCeiling(4_000));
+    fireEvent.change(input(), { target: { value: '' } });
+    expect(input().value).toBe('');
+  });
+
+  it('reports a language change to the owner', () => {
+    renderStep(agentWithCeiling(4_000));
+    const select = () => screen.getByLabelText(translations.language) as HTMLSelectElement;
+    const other = Array.from(select().options).map((o) => o.value).find((v) => v !== select().value);
+    fireEvent.change(select(), { target: { value: other } });
+    expect(select().value).toBe(other);
+  });
+
+  it('carries the typed instructions into the submitted config, trimmed', () => {
+    const { props } = renderStep(agentWithCeiling(4_000));
+    fillRequired();
+    fireEvent.change(screen.getByLabelText(translations.additionalInstructions), { target: { value: '  hydrology only  ' } });
+    fireEvent.click(screen.getByText(new RegExp(translations.generate)));
+
+    expect(props.onGenerate).toHaveBeenCalledTimes(1);
+    expect(props.onGenerate.mock.calls[0]![0].prompt).toBe('hydrology only');
+  });
+
+  it('omits the prompt entirely when the field is blank', () => {
+    // `prompt` is optional on the wire; sending "" would be a claim the user
+    // never made, and the worker would prepend an empty instruction block.
+    const { props } = renderStep(agentWithCeiling(4_000));
+    fillRequired();
+    fireEvent.click(screen.getByText(new RegExp(translations.generate)));
+    expect(props.onGenerate.mock.calls[0]![0]).not.toHaveProperty('prompt');
+  });
+});

package/src/components/modals/__tests__/ConfigureSearchStep.test.tsx

@@ -0,0 +1,72 @@
+/**
+ * The search step is CONTROLLED (WIZARD-NAVIGATION D3) — the wizard owns
+ * `limit` and `useSemanticScoring` so stepping Back cannot discard them.
+ *
+ * That makes these tests about the contract rather than the widget: every edit
+ * must reach `onConfigChange` (an uncontrolled field would appear to work and
+ * silently revert on Back), and submit must send the CURRENT config rather than
+ * a stale copy.
+ */
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import { ConfigureSearchStep, type SearchConfig } from '../ConfigureSearchStep';
+
+const T = {
+  maxResults: 'Max Results', semanticScoring: 'Semantic Scoring',
+  semanticScoringHelp: 'Use AI to score results by semantic relevance',
+  back: 'Back', search: 'Search', searching: 'Searching…',
+};
+
+const CONFIG: SearchConfig = { limit: 10, useSemanticScoring: true };
+
+function renderStep(config: SearchConfig = CONFIG) {
+  const onConfigChange = vi.fn();
+  const onSearch = vi.fn();
+  const onBack = vi.fn();
+  render(
+    <ConfigureSearchStep
+      config={config}
+      onConfigChange={onConfigChange}
+      onBack={onBack}
+      onSearch={onSearch}
+      translations={T}
+    />,
+  );
+  return { onConfigChange, onSearch, onBack };
+}
+
+describe('ConfigureSearchStep', () => {
+  it('reports a new result limit to the owner rather than keeping it', async () => {
+    const { onConfigChange } = renderStep();
+    await userEvent.selectOptions(screen.getByLabelText(T.maxResults), '20');
+    expect(onConfigChange).toHaveBeenCalledWith({ limit: 20, useSemanticScoring: true });
+  });
+
+  it('reports the semantic-scoring toggle the same way', async () => {
+    const { onConfigChange } = renderStep();
+    await userEvent.click(screen.getByLabelText(new RegExp(T.semanticScoring)));
+    expect(onConfigChange).toHaveBeenCalledWith({ limit: 10, useSemanticScoring: false });
+  });
+
+  it('submits whatever the owner currently holds, not a default', async () => {
+    // The point of controlled state: a step that kept its own copy could submit
+    // something the wizard never saw.
+    const { onSearch } = renderStep({ limit: 5, useSemanticScoring: false });
+    await userEvent.click(screen.getByRole('button', { name: T.search }));
+    expect(onSearch).toHaveBeenCalledWith({ limit: 5, useSemanticScoring: false });
+  });
+
+  it('renders the owner\'s values, so Back-then-forward shows them again', () => {
+    renderStep({ limit: 20, useSemanticScoring: false });
+    expect((screen.getByLabelText(T.maxResults) as HTMLSelectElement).value).toBe('20');
+    expect((screen.getByLabelText(new RegExp(T.semanticScoring)) as HTMLInputElement).checked).toBe(false);
+  });
+
+  it('retreats when Back is pressed', async () => {
+    const { onBack } = renderStep();
+    await userEvent.click(screen.getByRole('button', { name: /Back/ }));
+    expect(onBack).toHaveBeenCalledTimes(1);
+  });
+});