@tai42/studio-sdk 15.0.0 → 16.0.1

package/src/state-binding/StateAttachRow.tsx

@@ -127,163 +127,238 @@ export function StateAttachRow({
         borderRadius: 'var(--tai-radius-md)',
       }}
     >
-      <div
-        style={{
-          display: 'flex',
-          gap: 'var(--tai-space-2)',
-          alignItems: 'flex-end',
-          flexWrap: 'wrap',
+      <AttachStateHeader
+        state={attach.state}
+        statesCatalog={statesCatalog}
+        onSelectState={(next) => {
+          // A new state resets the template picks (its attachments differ).
+          onChange({ ...attach, state: next, templates: [] });
         }}
-      >
-        <Field label="State">
-          <Select
-            aria-label="State"
-            placeholder="Choose a state"
-            value={attach.state}
-            onValueChange={(next) => {
-              // A new state resets the template picks (its attachments differ).
-              onChange({ ...attach, state: next, templates: [] });
-            }}
-            options={statesCatalog.map((option) => ({ value: option.name, label: option.name }))}
-          />
-        </Field>
-        <Button
-          type="button"
-          variant="ghost"
-          aria-label={`Remove state ${attach.state === '' ? '(unset)' : attach.state}`}
-          onClick={onRemove}
-        >
-          <CloseIcon aria-hidden="true" />
-        </Button>
-      </div>
+        onRemove={onRemove}
+      />
 
       {inherited !== undefined && attach.state !== '' ? (
-        <div
-          role="status"
-          style={{
-            display: 'flex',
-            gap: 'var(--tai-space-2)',
-            alignItems: 'flex-start',
-            padding: 'var(--tai-space-2)',
-            borderRadius: 'var(--tai-radius-md)',
-            background: 'var(--tai-color-warn-tint)',
-            color: 'var(--tai-color-warn-text)',
-          }}
-        >
-          <AlertTriangleIcon aria-hidden="true" />
-          <div>
-            <strong>Overrides the preset&rsquo;s subject</strong>
-            <div style={{ display: 'flex', gap: 'var(--tai-space-2)', flexWrap: 'wrap' }}>
-              <span
-                style={{ color: 'var(--tai-color-text-muted)', fontSize: 'var(--tai-text-sm)' }}
-              >
-                Preset default:
-              </span>
-              <span style={{ fontFamily: 'var(--tai-font-mono)', fontSize: 'var(--tai-text-sm)' }}>
-                {`subject: ${templatedTextSummary(inherited.subject_expr)}`}
-                {inherited.scope_expr !== null
-                  ? `, scope: ${templatedTextSummary(inherited.scope_expr)}`
-                  : ''}
-              </span>
-            </div>
-          </div>
-        </div>
+        <InheritedSubjectNote inherited={inherited} />
       ) : null}
 
-      {attach.state !== '' && unresolved ? (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--tai-space-2)' }}>
-          <p role="alert" style={{ margin: 0, color: 'var(--tai-color-err-text)' }}>
-            Template not attached.
-          </p>
-          <CodeBlock code={rawBindingLines(attach)} language="text" />
-        </div>
-      ) : null}
+      {attach.state !== '' && unresolved ? <UnresolvedBinding attach={attach} /> : null}
 
       {attach.state !== '' && !unresolved ? (
-        <>
-          <Field
-            label="Templates"
-            group
-            description="One or more templates this binding attaches to the state."
-          >
-            <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--tai-space-1)' }}>
-              {templatesCatalog.length === 0 ? (
-                <p style={{ margin: 0, color: 'var(--tai-color-text-muted)' }}>
-                  No templates available.
-                </p>
-              ) : (
-                templatesCatalog.map((template) => {
-                  const checked = attach.templates.includes(template.name);
-                  const willAttach = checked && !attachedTemplates.includes(template.name);
-                  return (
-                    <div
-                      key={template.name}
-                      style={{ display: 'flex', flexDirection: 'column', gap: '2px' }}
-                    >
-                      <Checkbox
-                        checked={checked}
-                        label={template.name}
-                        onCheckedChange={(next) => {
-                          toggleTemplate(template.name, next);
-                        }}
-                      />
-                      {willAttach ? (
-                        <span
-                          style={{
-                            color: 'var(--tai-color-text-muted)',
-                            fontSize: 'var(--tai-text-sm)',
-                          }}
-                        >
-                          {ATTACH_ON_USE_HINT}
-                        </span>
-                      ) : null}
-                    </div>
-                  );
-                })
-              )}
-            </div>
-          </Field>
+        <ResolvedAttachBody
+          attach={attach}
+          templatesCatalog={templatesCatalog}
+          attachedTemplates={attachedTemplates}
+          subjectError={subjectError}
+          suggestions={suggestions}
+          templates={templates}
+          sources={sources}
+          inputJq={inputJq}
+          updateJq={updateJq}
+          onChange={onChange}
+          onToggleTemplate={toggleTemplate}
+        />
+      ) : null}
+    </div>
+  );
+}
 
-          <SubjectScopeFields
-            subjectExpr={attach.subject_expr}
-            scopeExpr={attach.scope_expr}
-            subjectError={subjectError}
-            suggestions={suggestions}
-            templates={templates}
-            onSubjectChange={(next) => {
-              onChange({ ...attach, subject_expr: next });
-            }}
-            onScopeChange={(next) => {
-              onChange({ ...attach, scope_expr: next });
-            }}
-          />
+/** The state selector plus the remove control. */
+function AttachStateHeader({
+  state,
+  statesCatalog,
+  onSelectState,
+  onRemove,
+}: {
+  readonly state: string;
+  readonly statesCatalog: readonly BindingStateOption[];
+  readonly onSelectState: (next: string) => void;
+  readonly onRemove: () => void;
+}): ReactNode {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        gap: 'var(--tai-space-2)',
+        alignItems: 'flex-end',
+        flexWrap: 'wrap',
+      }}
+    >
+      <Field label="State">
+        <Select
+          aria-label="State"
+          placeholder="Choose a state"
+          value={state}
+          onValueChange={onSelectState}
+          options={statesCatalog.map((option) => ({ value: option.name, label: option.name }))}
+        />
+      </Field>
+      <Button
+        type="button"
+        variant="ghost"
+        aria-label={`Remove state ${state === '' ? '(unset)' : state}`}
+        onClick={onRemove}
+      >
+        <CloseIcon aria-hidden="true" />
+      </Button>
+    </div>
+  );
+}
 
-          <Field label="Inputs" group>
-            <InjectionList
-              injections={attach.input_injections}
-              inputJq={inputJq}
-              suggestions={suggestions}
-              templates={templates}
-              onChange={(next) => {
-                onChange({ ...attach, input_injections: [...next] });
-              }}
-            />
-          </Field>
+/** The precedence warning shown when the target's own binding already sets this state's subject. */
+function InheritedSubjectNote({ inherited }: { readonly inherited: InheritedSubject }): ReactNode {
+  return (
+    <div
+      role="status"
+      style={{
+        display: 'flex',
+        gap: 'var(--tai-space-2)',
+        alignItems: 'flex-start',
+        padding: 'var(--tai-space-2)',
+        borderRadius: 'var(--tai-radius-md)',
+        background: 'var(--tai-color-warn-tint)',
+        color: 'var(--tai-color-warn-text)',
+      }}
+    >
+      <AlertTriangleIcon aria-hidden="true" />
+      <div>
+        <strong>Overrides the preset&rsquo;s subject</strong>
+        <div style={{ display: 'flex', gap: 'var(--tai-space-2)', flexWrap: 'wrap' }}>
+          <span style={{ color: 'var(--tai-color-text-muted)', fontSize: 'var(--tai-text-sm)' }}>
+            Preset default:
+          </span>
+          <span style={{ fontFamily: 'var(--tai-font-mono)', fontSize: 'var(--tai-text-sm)' }}>
+            {`subject: ${templatedTextSummary(inherited.subject_expr)}`}
+            {inherited.scope_expr !== null
+              ? `, scope: ${templatedTextSummary(inherited.scope_expr)}`
+              : ''}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
 
-          <Field label="Updates" group>
-            <UpdateList
-              updates={attach.updates}
-              updateJq={updateJq}
-              sources={sources}
-              suggestions={suggestions}
-              templates={templates}
-              onChange={(next) => {
-                onChange({ ...attach, updates: [...next] });
-              }}
-            />
-          </Field>
-        </>
-      ) : null}
+/** The read-only fallback for a state/template the server no longer resolves: the raw jq. */
+function UnresolvedBinding({ attach }: { readonly attach: StateAttach }): ReactNode {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--tai-space-2)' }}>
+      <p role="alert" style={{ margin: 0, color: 'var(--tai-color-err-text)' }}>
+        Template not attached.
+      </p>
+      <CodeBlock code={rawBindingLines(attach)} language="text" />
     </div>
   );
 }
+
+/** The resolved binding editor: the template checklist, subject/scope, inputs and updates. */
+function ResolvedAttachBody({
+  attach,
+  templatesCatalog,
+  attachedTemplates,
+  subjectError,
+  suggestions,
+  templates,
+  sources,
+  inputJq,
+  updateJq,
+  onChange,
+  onToggleTemplate,
+}: {
+  readonly attach: StateAttach;
+  readonly templatesCatalog: readonly BindingTemplateOption[];
+  readonly attachedTemplates: readonly string[];
+  readonly subjectError?: string;
+  readonly suggestions: readonly TemplateJqSuggestion[];
+  readonly templates?: TemplatedTextCatalog;
+  readonly sources?: BindingSourceSchemas;
+  readonly inputJq: ReturnType<typeof resolveTemplateJq>;
+  readonly updateJq: ReturnType<typeof resolveTemplateJq>;
+  readonly onChange: (attach: StateAttach) => void;
+  readonly onToggleTemplate: (name: string, checked: boolean) => void;
+}): ReactNode {
+  return (
+    <>
+      <Field
+        label="Templates"
+        group
+        description="One or more templates this binding attaches to the state."
+      >
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--tai-space-1)' }}>
+          {templatesCatalog.length === 0 ? (
+            <p style={{ margin: 0, color: 'var(--tai-color-text-muted)' }}>
+              No templates available.
+            </p>
+          ) : (
+            templatesCatalog.map((template) => {
+              const checked = attach.templates.includes(template.name);
+              const willAttach = checked && !attachedTemplates.includes(template.name);
+              return (
+                <div
+                  key={template.name}
+                  style={{ display: 'flex', flexDirection: 'column', gap: '2px' }}
+                >
+                  <Checkbox
+                    checked={checked}
+                    label={template.name}
+                    onCheckedChange={(next) => {
+                      onToggleTemplate(template.name, next);
+                    }}
+                  />
+                  {willAttach ? (
+                    <span
+                      style={{
+                        color: 'var(--tai-color-text-muted)',
+                        fontSize: 'var(--tai-text-sm)',
+                      }}
+                    >
+                      {ATTACH_ON_USE_HINT}
+                    </span>
+                  ) : null}
+                </div>
+              );
+            })
+          )}
+        </div>
+      </Field>
+
+      <SubjectScopeFields
+        subjectExpr={attach.subject_expr}
+        scopeExpr={attach.scope_expr}
+        subjectError={subjectError}
+        suggestions={suggestions}
+        templates={templates}
+        onSubjectChange={(next) => {
+          onChange({ ...attach, subject_expr: next });
+        }}
+        onScopeChange={(next) => {
+          onChange({ ...attach, scope_expr: next });
+        }}
+      />
+
+      <Field label="Inputs" group>
+        <InjectionList
+          injections={attach.input_injections}
+          inputJq={inputJq}
+          suggestions={suggestions}
+          templates={templates}
+          onChange={(next) => {
+            onChange({ ...attach, input_injections: [...next] });
+          }}
+        />
+      </Field>
+
+      <Field label="Updates" group>
+        <UpdateList
+          updates={attach.updates}
+          updateJq={updateJq}
+          sources={sources}
+          suggestions={suggestions}
+          templates={templates}
+          onChange={(next) => {
+            onChange({ ...attach, updates: [...next] });
+          }}
+        />
+      </Field>
+    </>
+  );
+}

package/src/state-binding/adapter-mapping-row.tsx

@@ -0,0 +1,232 @@
+/**
+ * One row of the adapter mapping form: it picks ONE of three value sources for a
+ * declared input key — a picked field (from the run's output / input schema), a
+ * hardcoded literal, or a jq expression — and shows the row's own compiled jq on
+ * demand. {@link AdapterMapping} composes one editor per declared key.
+ */
+import { useState, type ReactNode } from 'react';
+
+import { Badge } from '../components/badge';
+import { Button, Skeleton } from '../components/primitives';
+import { Field } from '../components/field';
+import { Select } from '../components/select';
+import { TextInput } from '../components/inputs';
+import { BindingJqField, type TemplateJqSuggestion } from './BindingJqField';
+import { rowValueJq, type FieldRoot, type MappingRow, type MappingSource } from './adapter';
+import type { BindingSourceSchemas, SchemaFieldPath } from './types';
+
+const ROOT_OPTIONS: readonly { value: FieldRoot; label: string }[] = [
+  { value: 'output', label: 'Run output' },
+  { value: 'input', label: 'Run input' },
+];
+
+const SOURCE_OPTIONS = [
+  { value: 'field', label: 'Field' },
+  { value: 'literal', label: 'Literal' },
+  { value: 'jq', label: 'Jq' },
+];
+
+function fieldsFor(
+  root: FieldRoot,
+  sources: BindingSourceSchemas | undefined,
+): readonly SchemaFieldPath[] {
+  if (root === 'output') return sources?.output ?? [];
+  return sources?.input ?? [];
+}
+
+/** The value control for one row's picked-field source: a Select where a schema is known, else a path input. */
+function FieldSourceControl({
+  root,
+  path,
+  onRootChange,
+  onPathChange,
+  fields,
+  loading = false,
+  error,
+}: {
+  readonly root: FieldRoot;
+  readonly path: readonly string[];
+  readonly onRootChange: (root: FieldRoot) => void;
+  readonly onPathChange: (path: readonly string[]) => void;
+  readonly fields: readonly SchemaFieldPath[];
+  readonly loading?: boolean;
+  readonly error?: string;
+}): ReactNode {
+  const pathInput = (
+    <TextInput
+      aria-label="Field path"
+      placeholder="path.into.value"
+      value={path.join('.')}
+      onChange={(event) => {
+        const text = event.target.value.trim();
+        onPathChange(text === '' ? [] : text.split('.'));
+      }}
+    />
+  );
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--tai-space-1)' }}>
+      <div style={{ display: 'flex', gap: 'var(--tai-space-2)', flexWrap: 'wrap' }}>
+        <Field label="Field root" hideLabel>
+          <Select
+            value={root}
+            onValueChange={(next) => {
+              onRootChange(next as FieldRoot);
+            }}
+            options={ROOT_OPTIONS.map((option) => ({ value: option.value, label: option.label }))}
+          />
+        </Field>
+        {loading ? (
+          <Skeleton height={32} width={220} />
+        ) : fields.length > 0 ? (
+          <Field label="Field" hideLabel>
+            <Select
+              placeholder="Choose a field"
+              value={path.length === 0 ? '' : JSON.stringify(path)}
+              onValueChange={(next) => {
+                onPathChange(next === '' ? [] : (JSON.parse(next) as string[]));
+              }}
+              options={[
+                { value: '', label: '(whole value)' },
+                ...fields.map((field) => ({
+                  value: JSON.stringify(field.path),
+                  label: field.label,
+                })),
+              ]}
+            />
+          </Field>
+        ) : (
+          pathInput
+        )}
+      </div>
+      {error !== undefined && !loading ? (
+        <span
+          role="status"
+          style={{ color: 'var(--tai-color-text-muted)', fontSize: 'var(--tai-text-sm)' }}
+        >
+          {error}
+        </span>
+      ) : null}
+    </div>
+  );
+}
+
+export function MappingRowEditor({
+  row,
+  onChange,
+  sources,
+  suggestions,
+}: {
+  readonly row: MappingRow;
+  readonly onChange: (row: MappingRow) => void;
+  readonly sources?: BindingSourceSchemas;
+  readonly suggestions?: readonly TemplateJqSuggestion[];
+}): ReactNode {
+  const [showJq, setShowJq] = useState(false);
+  const source = row.source;
+  const preview = rowValueJq(source);
+
+  const setSource = (next: MappingSource): void => {
+    onChange({ ...row, source: next });
+  };
+
+  const changeKind = (kind: string): void => {
+    if (kind === 'field') setSource({ kind: 'field', root: 'output', path: [] });
+    else if (kind === 'literal') setSource({ kind: 'literal', json: '' });
+    else setSource({ kind: 'jq', expr: '' });
+  };
+
+  return (
+    <div
+      data-testid={`adapter-row-${row.target}`}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 'var(--tai-space-1)',
+        padding: 'var(--tai-space-2)',
+        border: '1px solid var(--tai-color-border)',
+        borderRadius: 'var(--tai-radius-md)',
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 'var(--tai-space-2)',
+          flexWrap: 'wrap',
+        }}
+      >
+        <Badge variant="neutral">{row.target}</Badge>
+        <Field label={`Source for ${row.target}`} hideLabel>
+          <Select
+            aria-label={`Source for ${row.target}`}
+            value={source.kind}
+            onValueChange={changeKind}
+            options={SOURCE_OPTIONS}
+          />
+        </Field>
+      </div>
+
+      {source.kind === 'field' ? (
+        <FieldSourceControl
+          root={source.root}
+          path={source.path}
+          fields={fieldsFor(source.root, sources)}
+          loading={sources?.loading}
+          error={sources?.error}
+          onRootChange={(nextRoot) => {
+            setSource({ kind: 'field', root: nextRoot, path: [] });
+          }}
+          onPathChange={(nextPath) => {
+            setSource({ kind: 'field', root: source.root, path: nextPath });
+          }}
+        />
+      ) : source.kind === 'literal' ? (
+        <Field
+          label={`Literal for ${row.target}`}
+          hideLabel
+          error={preview.ok ? undefined : preview.error}
+        >
+          <TextInput
+            aria-label={`Literal for ${row.target}`}
+            placeholder='"a string", 42, true, or {"k":1}'
+            value={source.json}
+            onChange={(event) => {
+              setSource({ kind: 'literal', json: event.target.value });
+            }}
+          />
+        </Field>
+      ) : (
+        <BindingJqField
+          label={`Jq for ${row.target}`}
+          value={source.expr}
+          onChange={(next) => {
+            setSource({ kind: 'jq', expr: next });
+          }}
+          error={preview.ok ? undefined : preview.error}
+          suggestions={suggestions}
+        />
+      )}
+
+      <div>
+        <Button
+          type="button"
+          variant="ghost"
+          aria-expanded={showJq}
+          onClick={() => {
+            setShowJq((open) => !open);
+          }}
+        >
+          {showJq ? 'Hide jq' : 'Show jq'}
+        </Button>
+        {showJq ? (
+          <pre
+            data-testid={`adapter-row-jq-${row.target}`}
+            style={{ margin: 0, fontFamily: 'var(--tai-font-mono)', whiteSpace: 'pre-wrap' }}
+          >
+            {preview.ok ? preview.jq : preview.error}
+          </pre>
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/src/structured-output/StructuredOutput.tsx

@@ -14,6 +14,7 @@ import type { ReactNode } from 'react';
 import { JsonTree } from '../components/json-tree';
 import { resolveRef } from '../schema-form/resolve';
 import type { JsonSchema } from '../schema-form/types';
+import { isRecord } from '../guards';
 
 export interface StructuredOutputProps {
   /** The tool's declared MCP output schema, if any. */
@@ -25,10 +26,6 @@ export interface StructuredOutputProps {
 /** The pane's name when the payload has no schema to name it by. */
 const RAW_OUTPUT_LABEL = 'Structured output';
 
-function isRecord(value: unknown): value is Record<string, unknown> {
-  return typeof value === 'object' && value !== null && !Array.isArray(value);
-}
-
 function isObjectSchema(
   schema: JsonSchema | undefined,
   root: JsonSchema | undefined,