Build an interactive Assistant card

const ui = api.input()?.$widget ?? {};
const wanted = (id) =>
  (ui.targetIds ?? ['*']).some(
    (target) => target === '*' || target === id,
  );
const matrix = [];
if (wanted('form'))
  matrix.push([
    {
      id: 'form',
      type: 'FORM',
      submitLabel: 'Start job',
      fields: [
        {
          id: 'quantity',
          type: 'INPUT',
          control: 'number',
          label: 'Quantity',
          value: 2,
          required: true,
          min: 1,
          max: 100,
        },
      ],
      on: {
        submit: {
          type: 'EXECUTE',
          target: 'launch',
          input: { quantity: { from: 'input', id: 'quantity' } },
          waitFor: {
            target: 'status',
            input: { jobId: { from: 'result', path: 'jobId' } },
            path: 'status',
            equals: 'FINISHED',
            failed: ['ERROR', 'CANCELLED', 'EXPIRED'],
            intervalSeconds: 2,
            timeoutSeconds: 120,
          },
          refresh: 'total',
          cooldownSeconds: 3,
        },
      },
    },
  ]);
if (wanted('total')) {
  const jobId = ui.actionResult?.jobId;
  const job = jobId
    ? (
        await api.getInstanceData('Jobs', {
          filter: { jobId: { equals: jobId } },
          fields: ['jobId', 'status'],
          take: 1,
        })
      ).data[0]
    : null;
  matrix.push([
    {
      id: 'total',
      type: 'TEXT',
      value: job
        ? job.jobId + ': ' + job.status
        : 'No confirmed job yet.',
      on: {
        click: {
          type: 'OPEN_WIDGET',
          target: 'details',
          mode: 'replace',
          input: { quantity: { from: 'input', id: 'quantity' } },
        },
      },
    },
  ]);
}
return {
  matrix,
  summary: 'Submit a job, then refresh only the total tile.',
  widgetConfig: {
    actionTargets: {
      launch: {
        sourceType: 'INLINE',
        codeType: 'CODE_JS',
        readOnly: false,
        code: `
const quantity = api.input().quantity;
if (!Number.isInteger(quantity) || quantity < 1 || quantity > 100)
  throw new Error('Invalid quantity');
return {
  jobId: await api.triggerJob('VERIFIED_JOB_TEMPLATE_ID', { quantity }),
};
`,
      },
      status: {
        sourceType: 'INLINE',
        codeType: 'CODE_JS',
        readOnly: true,
        code: `
const result = await api.getInstanceData('Jobs', {
  filter: { jobId: { equals: api.input().jobId } },
  fields: ['jobId', 'status'],
  take: 1,
});
if (!result.data.length) throw new Error('Job not found');
return result.data[0];
`,
      },
    },
    widgetTargets: {
      details: {
        sourceType: 'INLINE',
        codeType: 'CODE_JS',
        readOnly: true,
        code: `
const quantity = api.input().quantity;
return [
  [{ id: 'detail', type: 'TEXT', value: 'Quantity: ' + quantity }],
  [
    {
      id: 'back',
      type: 'BUTTON',
      label: 'Back',
      on: { click: { type: 'BACK' } },
    },
    {
      id: 'more',
      type: 'BUTTON',
      label: 'More',
      on: {
        click: {
          type: 'OPEN_WIDGET',
          target: 'deeper',
          mode: 'replace',
          input: { quantity },
        },
      },
    },
  ],
];
`,
      },
      deeper: {
        sourceType: 'INLINE',
        codeType: 'CODE_JS',
        readOnly: true,
        code: `
return [
  [
    {
      id: 'deep',
      type: 'TEXT',
      value: 'Received quantity: ' + api.input().quantity,
    },
  ],
  [
    {
      id: 'back',
      type: 'BUTTON',
      label: 'Back',
      on: { click: { type: 'BACK' } },
    },
  ],
];
`,
      },
    },
  },
};