pgkiln 0.51.0 → 0.52.0

package/src/builder/ai.ts

@@ -1,5 +1,7 @@
 import type { FastifyInstance } from 'fastify';
-import { DEFAULT_CLAUDE_MODEL, envKeyName, generate, keySource, usageToday, type AiService } from '../ai/service.ts';
+import { DEFAULT_CLAUDE_MODEL, envKeyName, GEMINI_BASE_URL, generate, keySource, providerLabel, usageToday, type AiService } from '../ai/service.ts';
+import type { ProviderName } from '../ai/types.ts';
+import { toolCallTable } from './ai-agents.ts';
 import { AiError } from '../ai/types.ts';
 import { owner } from '../db.ts';
 import { html, raw } from '../html.ts';
@@ -16,7 +18,7 @@ import { back, BASE, csrf, developer, flash, input, region, select, send, shell,
 // AI usage (developers): what an application may use and what it used.
 // API keys are encrypted (src/secrets.ts) and never sent back to the browser.
 
-const PROVIDERS: [string, string][] = [['anthropic', 'Claude (Anthropic)'], ['openai', 'OpenAI']];
+const PROVIDERS: [string, string][] = [['anthropic', 'Claude (Anthropic)'], ['openai', 'OpenAI'], ['gemini', 'Gemini (Google, OpenAI-compatible endpoint)'], ['openai_compatible', 'OpenAI-compatible (Ollama, vLLM, Azure OpenAI, a gateway)']];
 const EFFORTS: [string, string][] = [['', 'Model default'], ['low', 'low'], ['medium', 'medium'], ['high', 'high'], ['xhigh', 'xhigh'], ['max', 'max']];
 const TEST_RESULT = '__AITEST';
 
@@ -33,18 +35,18 @@ function serviceForm(s: Partial<AiService>, action: string, csrfField: ReturnTyp
     <fieldset class="prop-group"><legend>Service</legend><div class="form-grid">
       ${isNew ? input('name', 'Name', '', { required: true, placeholder: 'e.g. CLAUDE', help: 'Upper case letters, digits and _. Processes refer to the service by this name.' }) : ''}
       ${input('description', 'Description', s.description)}
-      ${select('provider', 'Provider', s.provider ?? 'anthropic', PROVIDERS, 'Prompts, and the item values they contain, are sent to this provider.')}
+      ${select('provider', 'Provider', s.provider ?? 'anthropic', PROVIDERS, 'Prompts, and the item values they contain, are sent to this provider. Gemini and OpenAI-compatible endpoints speak OpenAI\'s Chat Completions.')}
       ${input('model', 'Model', s.model ?? (isNew ? DEFAULT_CLAUDE_MODEL : ''), { required: true, help: `Exactly as the provider names it, e.g. ${DEFAULT_CLAUDE_MODEL} (Claude) or the OpenAI model your account uses. pgkiln never changes it.` })}
       ${select('effort', 'Effort (Claude)', isNew ? 'medium' : s.effort ?? '', EFFORTS, 'How deeply Claude thinks (thinking is always on for current Claude models): lower is faster and cheaper; high or more for hard tasks. Model default: medium for Claude Opus 5.5.')}
       ${input('max_tokens', 'Maximum output tokens', s.max_tokens ?? 4000, { type: 'number', help: 'Per request (1 – 128000); a process may ask for fewer.' })}
       ${input('timeout_s', 'Time limit (seconds)', s.timeout_s ?? 120, { type: 'number', help: '5 – 600. Pages wait for the answer.' })}
-      ${input('base_url', 'Base URL', s.base_url, { placeholder: 'empty: the provider\'s own API', help: 'A gateway or proxy that speaks the provider\'s API. Administrators only.' })}
+      ${input('base_url', 'Base URL', s.base_url, { placeholder: 'empty: the provider\'s own API', help: `A gateway or proxy that speaks the provider's API. Administrators only. Gemini: empty is ${GEMINI_BASE_URL}. OpenAI-compatible: required, e.g. http://localhost:11434/v1 (Ollama), https://<resource>.openai.azure.com/openai/v1/ (Azure OpenAI).` })}
     </div>
     ${check('refusal_fallback', 'Refusal fallbacks (Claude)', s.refusal_fallback !== false, 'When Claude declines a request for safety reasons, Anthropic re-runs it on its recommended fallback model. The usage log shows the model that answered.')}
     ${check('enabled', 'Enabled', s.enabled !== false)}
     </fieldset>
     <fieldset class="prop-group"><legend>API key</legend>
-      ${input('api_key', 'API key', '', { type: 'password', auto: 'new-password', help: source === 'stored' ? 'A key is stored (encrypted). It is never shown; type a new one to replace it.' : `Empty: the server's ${envKeyName((s.provider as 'anthropic') ?? 'anthropic')} is used (when set).` })}
+      ${input('api_key', 'API key', '', { type: 'password', auto: 'new-password', help: source === 'stored' ? 'A key is stored (encrypted). It is never shown; type a new one to replace it.' : `Empty: the server's ${envKeyName((s.provider as ProviderName) ?? 'anthropic')} is used (when set)${s.provider === 'openai_compatible' ? '; an endpoint without keys (Ollama) needs none' : ''}.` })}
       ${source === 'stored' ? check('remove_key', 'Remove the stored key (use the server default)', false) : ''}
       ${secretKeyConfigured() ? '' : html`<div class="alert alert-error" role="alert">The server has no <code>PGKILN_SECRET_KEY</code>: API keys can't be stored until it is set (the server's environment variables still work).</div>`}
     </fieldset>
@@ -54,7 +56,7 @@ function serviceForm(s: Partial<AiService>, action: string, csrfField: ReturnTyp
 
 /** The form's values, checked; throws with a message. */
 function formValues(b: Record<string, string | undefined>) {
-  const provider = b.provider === 'openai' ? 'openai' : 'anthropic';
+  const provider: ProviderName = (['openai', 'gemini', 'openai_compatible'] as const).find((p) => p === b.provider) ?? 'anthropic';
   const model = (b.model ?? '').trim();
   if (!/^[A-Za-z0-9][A-Za-z0-9._:/@-]{0,199}$/.test(model)) throw new Error('The model is a name like claude-opus-5-5 (letters, digits and . _ : / @ -).');
   const maxTokens = Number(b.max_tokens || 4000);
@@ -63,6 +65,7 @@ function formValues(b: Record<string, string | undefined>) {
   if (!Number.isInteger(timeout) || timeout < 5 || timeout > 600) throw new Error('Time limit: 5 to 600 seconds.');
   const baseUrl = (b.base_url ?? '').trim() || null;
   if (baseUrl && (!/^https?:\/\/[^\s]+$/i.test(baseUrl) || baseUrl.length > 500)) throw new Error('The base URL starts with http:// or https://.');
+  if (!baseUrl && provider === 'openai_compatible') throw new Error('An OpenAI-compatible service needs a base URL (e.g. http://localhost:11434/v1 for Ollama).');
   const effort = ['low', 'medium', 'high', 'xhigh', 'max'].includes(b.effort ?? '') ? b.effort! : null;
   return [(b.description ?? '').trim() || null, provider, model, provider === 'anthropic' ? effort : null, b.refusal_fallback === 'true', maxTokens, timeout, baseUrl, b.enabled === 'true'];
 }
@@ -104,7 +107,7 @@ export async function aiRoutes(app: FastifyInstance) {
           <thead><tr><th>Service</th><th>Provider</th><th>Model</th><th>API key</th><th>Applications</th><th>Status</th></tr></thead>
           <tbody>${services.length ? services.map((x) => html`<tr>
             <td data-label="Service"><a href="${BASE}/ai/${x.id}">${x.name}</a>${x.description ? html` <span class="muted">${x.description}</span>` : ''}</td>
-            <td data-label="Provider">${x.provider === 'anthropic' ? 'Claude' : 'OpenAI'}</td>
+            <td data-label="Provider">${providerLabel(x.provider)}</td>
             <td data-label="Model">${x.model}${x.effort ? html` <span class="muted">(${x.effort})</span>` : ''}</td>
             <td data-label="API key">${KEY_TEXT[keySource(x)]}</td>
             <td data-label="Applications">${x.apps ?? html`<span class="muted">none</span>`}</td>
@@ -271,12 +274,13 @@ export async function aiRoutes(app: FastifyInstance) {
       <div class="title-row"><h1 class="ai-name">AI usage · ${a.name}</h1></div>
       <p class="muted u-mt0">The AI services this application may use (an administrator allows them${admin ? html` under <a href="${BASE}/ai">AI services</a>` : ''}), today's use against their limits, and the recent requests.</p>
       ${region('Services', html`<div class="table-wrap"><table class="report report-reflow"><thead><tr><th>Service</th><th>Model</th><th class="num">Requests today</th><th class="num">Tokens today</th><th>Status</th></tr></thead>
-        <tbody>${allowed.length ? allowed.map((x, i) => html`<tr><td data-label="Service">${x.name}</td><td data-label="Model">${x.provider === 'anthropic' ? 'Claude' : 'OpenAI'} ${x.model}</td>
+        <tbody>${allowed.length ? allowed.map((x, i) => html`<tr><td data-label="Service">${x.name}</td><td data-label="Model">${providerLabel(x.provider)} ${x.model}</td>
           <td class="num" data-label="Requests today">${today[i].requests}${x.max_requests !== null ? ` / ${x.max_requests}` : ''}</td>
           <td class="num" data-label="Tokens today">${today[i].tokens}${x.max_tokens !== null ? ` / ${x.max_tokens}` : ''}</td>
           <td data-label="Status">${x.enabled ? 'enabled' : html`<b>disabled</b>`}</td></tr>`)
           : html`<tr><td colspan="5" class="empty">This application may not use any AI service yet.</td></tr>`}</tbody></table></div>`)}
-      ${region('Recent requests', usageTable(recent, false))}`;
+      ${region('Recent requests', usageTable(recent, false))}
+      ${await toolCallTable(a.id)}`;
     return send(reply, s, shell(s, `AI usage · ${a.name}`, [['App Builder', BASE], [a.name, `${BASE}/apps/${a.id}`], ['Activity', `${BASE}/apps/${a.id}/activity`], ['AI usage']], main));
   });
 }

package/src/builder/assistant.ts

@@ -1,9 +1,11 @@
 import type { FastifyInstance } from 'fastify';
+import { providerLabel } from '../ai/service.ts';
 import { owner } from '../db.ts';
 import { html, raw, type Raw } from '../html.ts';
 import { aiFilterProblems } from '../runtime/ai-filter.ts';
 import { assistantProblems, type AssistantConfig } from '../runtime/assistant.ts';
 import type { Session } from '../session.ts';
+import { agentOptions } from './ai-agents.ts';
 import { back, BASE, csrf, developer, flash, type Req } from './ui.ts';
 
 // Page designer → an AI assistant region → Settings (service, prompts,
@@ -23,7 +25,7 @@ async function serviceOptions(appId: number, current: unknown) {
   const cur = typeof current === 'string' ? current.toUpperCase() : '';
   return {
     allowed,
-    options: html`${allowed.map((x) => opt(x.name, `${x.name} (${x.provider === 'anthropic' ? 'Claude' : 'OpenAI'}, ${x.model})`, cur))}${cur && !allowed.some((x) => x.name === cur) ? opt(cur, `${cur} (not available to this application)`, cur) : ''}`,
+    options: html`${allowed.map((x) => opt(x.name, `${x.name} (${providerLabel(x.provider)}, ${x.model})`, cur))}${cur && !allowed.some((x) => x.name === cur) ? opt(cur, `${cur} (not available to this application)`, cur) : ''}`,
   };
 }
 
@@ -36,14 +38,19 @@ export async function assistantSettingsForm(pageId: number, appId: number, r: {
   const id = (n: string) => `ra_${r.id}_${n}`;
   const { allowed, options } = await serviceOptions(appId, cfg.service);
   const problems = assistantProblems(cfg);
+  const agents = await agentOptions(appId);
+  const agent = typeof cfg.agent === 'string' ? cfg.agent.toUpperCase() : '';
   return html`<h3 class="u-mt15">AI assistant settings</h3>
     <p class="muted u-mt0">A chat with an AI service. What users type, the context rows and the tools' results go to the service's provider (Claude or OpenAI). Context queries and SQL tools run as the application's database role; SQL tools are rolled back unless they may change data.</p>
     ${allowed.length ? '' : NO_SERVICE}
     ${problems.length ? html`<div class="alert alert-error" role="alert">${problems.join(' ')}</div>` : ''}
     <form method="post" action="${BASE}/pages/${pageId}/region/${r.id}/assistant" class="component-form">${csrf(s)}
       <fieldset class="prop-group"><legend>Assistant</legend><div class="form-grid">
+        <div class="field"><label class="label" for="${id('agent')}">AI agent</label>
+          <select id="${id('agent')}" name="agent">${opt('', '- none: the service, prompt and tools below -', agent)}${agents.map((n) => opt(n, n, agent))}${agent && !agents.includes(agent) ? opt(agent, `${agent} (does not exist)`, agent) : ''}</select>
+          <small class="help">An agent of <a href="${BASE}/apps/${appId}/ai-agents">Shared Components → AI Agents</a> sets the service, system prompt, reasoning effort, tools and steps; saving with an agent removes the region's own service, system prompt, tools and tool rounds.</small></div>
         <div class="field"><label class="label" for="${id('service')}">AI service</label>
-          <select id="${id('service')}" name="service" required>${opt('', '- choose -', cfg.service ?? '')}${options}</select></div>
+          <select id="${id('service')}" name="service">${opt('', '- choose -', cfg.service ?? '')}${options}</select></div>
         <div class="field"><label class="label" for="${id('max_rounds')}">Tool rounds per question</label>
           <input id="${id('max_rounds')}" name="max_rounds" type="number" min="1" max="10" value="${cfg.max_rounds ?? ''}" placeholder="5"></div>
         <div class="field"><label class="label" for="${id('max_turns')}">Questions per conversation</label>
@@ -95,6 +102,10 @@ export async function mergeAssistantSettings(appId: number, config: Config, b: B
   };
   out.service = (b.service ?? '').trim().toUpperCase();
   if (!out.service) delete out.service;
+  // (121) an agent sets the service, system prompt, tools and steps itself
+  const agent = (b.agent ?? '').trim().toUpperCase();
+  if (agent) out.agent = agent;
+  else delete out.agent;
   text('system', 20_000);
   text('welcome', 2000);
   text('placeholder', 200);
@@ -116,6 +127,10 @@ export async function mergeAssistantSettings(appId: number, config: Config, b: B
         errors.push(`${k === 'tools' ? 'Tools' : 'Context queries'}: not valid JSON (kept as it was).`);
       }
   }
+  if (out.agent) {
+    for (const k of ['service', 'system', 'tools', 'max_rounds']) delete out[k];
+    if (!(await agentOptions(appId)).includes(out.agent)) errors.push(`There is no AI agent ${out.agent}.`);
+  }
   errors.push(...assistantProblems(out), ...(await appProblems(appId, out as AssistantConfig)));
   return { config: out, errors };
 }
@@ -124,14 +139,13 @@ export async function mergeAssistantSettings(appId: number, config: Config, b: B
 export async function aiFilterSettingsForm(pageId: number, appId: number, r: { id: number; config: Config }, s: Session): Promise<Raw> {
   const cfg = (r.config?.ai_filter ?? {}) as Config;
   const id = (n: string) => `raf_${r.id}_${n}`;
-  const { allowed, options } = await serviceOptions(appId, cfg.service);
+  const { options } = await serviceOptions(appId, cfg.service);
   return html`<h3 class="u-mt15">Ask in your own words (AI)</h3>
-    <p class="muted u-mt0">Users type a question; an AI service turns it into the report's filters, search and sort (only columns the report shows, only its operators). The question and the column names go to the service's provider.</p>
-    ${allowed.length || cfg.service ? '' : NO_SERVICE}
+    <p class="muted u-mt0">Users type a question; it becomes the report's own settings (filters, highlights, sort, control break, totals, group by, pivot, chart, computed columns; only columns the report shows, only its operators), shown as chips they can edit, remove or undo. With an AI service the question and the column names go to the service's provider; without one (<i>built-in phrases</i>) pgkiln reads common phrases itself, in English, Dutch and German.</p>
     <form method="post" action="${BASE}/pages/${pageId}/region/${r.id}/ai-filter" class="component-form">${csrf(s)}
       <div class="form-grid">
         <div class="field"><label class="label" for="${id('service')}">AI service</label>
-          <select id="${id('service')}" name="service">${opt('', '- off -', cfg.service ?? '')}${options}</select></div>
+          <select id="${id('service')}" name="service">${opt('', '- off -', r.config?.ai_filter ? '-' : '')}${opt('-', 'Built-in phrases (no AI)', r.config?.ai_filter && !cfg.service ? '-' : '')}${options}</select></div>
         <div class="field" data-wide><label class="label" for="${id('placeholder')}">Placeholder</label>
           <input id="${id('placeholder')}" name="placeholder" maxlength="200" value="${cfg.placeholder ?? ''}"></div>
       </div>
@@ -171,8 +185,9 @@ export async function assistantBuilderRoutes(app: FastifyInstance) {
     const service = (b.service ?? '').trim().toUpperCase();
     if (!service) delete config.ai_filter;
     else {
+      // "-": the built-in phrases, no AI service (sprint 112)
       const placeholder = (b.placeholder ?? '').trim().slice(0, 200);
-      config.ai_filter = { service, ...(placeholder ? { placeholder } : {}), ...(b.public === 'true' ? { public: true } : {}) };
+      config.ai_filter = { ...(service === '-' ? {} : { service }), ...(placeholder ? { placeholder } : {}), ...(b.public === 'true' ? { public: true } : {}) };
     }
     const errors = aiFilterProblems(config.ai_filter);
     if (errors.length) flash(s, errors.join(' '), 'error');

package/src/builder/components.ts

@@ -11,6 +11,7 @@ import { scheduleProblem } from '../automations.ts';
 import { ICONS, isIcon } from '../icons.ts';
 import { templateProblem } from '../runtime/document.ts';
 import { stepProblems } from '../workflow.ts';
+import { eventProblems, notificationProblems, outcomeProblems } from '../task-events.ts';
 import { workflowBeforeSave } from './workflows.ts';
 import { handlerProblems } from '../runtime/rest.ts';
 import { TEMPLATE_COMPONENT_SPEC } from './template-spec.ts';
@@ -89,6 +90,14 @@ const conditionFields = (group: string): Field[] => [
 const menuBeforeSave = async (v: Record<string, unknown>) => {
   if (v.menu === '{}' || v.menu === '[]') v.menu = null;
   if (typeof v.menu === 'string' && !Array.isArray(JSON.parse(v.menu))) throw new Error('Menu entries: a JSON array, e.g. [{"label": "Details", "page": 3, "items": {"P3_ID": "&P2_ID."}}, {"label": "Archive", "request": "ARCHIVE"}]');
+  // (124) the database checks every entry too (meta.button_menu_ok); this names the one that's wrong
+  if (typeof v.menu === 'string')
+    for (const e of JSON.parse(v.menu) as Record<string, unknown>[]) {
+      const kinds = ['page', 'request', 'action'].filter((k) => e && typeof e === 'object' && k in e);
+      if (kinds.length !== 1) throw new Error(`Menu entry "${String(e?.label ?? '')}": exactly one of "page", "request" or "action".`);
+      if ('action' in e && !/^[A-Z][A-Z0-9_]{0,59}$/.test(String(e.action)))
+        throw new Error(`Menu entry "${String(e.label ?? '')}": "action" is a name in capitals (A-Z, 0-9, _), e.g. EXPORT.`);
+    }
 };
 const CLASS_LIST = /^[a-z][a-z0-9_-]{0,39}( [a-z][a-z0-9_-]{0,39}){0,4}$/;
 
@@ -175,7 +184,7 @@ export const COMPONENTS: Record<string, ComponentSpec> = {
       { name: 'target_items', label: 'Set items (JSON)', kind: 'json', group: 'Behaviour', help: '{"P3_ID": "&P2_ID."}' },
       { name: 'confirm', label: 'Confirm message', kind: 'text', group: 'Behaviour' },
       { name: 'menu', label: 'Menu entries (action menu, JSON)', kind: 'json', wide: true, group: 'Behaviour',
-        help: '[{"label": "Details", "page": 3, "items": {"P3_ID": "&P2_ID."}}, {"label": "Archive", "request": "ARCHIVE", "confirm": "Archive it?", "authz": "ADMIN", "icon": "inbox"}] — a link to a page, or a submit with that request (processes and branches see it as the button pressed). At most 20.' },
+        help: '[{"label": "Details", "page": 3, "items": {"P3_ID": "&P2_ID."}}, {"label": "Archive", "request": "ARCHIVE", "confirm": "Archive it?", "authz": "ADMIN", "icon": "inbox"}, {"label": "Export", "action": "EXPORT"}] — a link to a page, a submit with that request (processes and branches see it as the button pressed), or an action: the dynamic actions of event menu_entry with that name (or the menu button\'s name) as trigger. At most 20.' },
       { name: 'hot', common: true, label: 'Primary (hot) button', kind: 'bool', group: 'Appearance' },
       { name: 'template_options', label: 'Template options', kind: 'options', choices: BUTTON_OPTIONS, group: 'Appearance',
         help: 'CSS classes from a fixed list, added to the button (APEX: Template Options).' },
@@ -206,18 +215,18 @@ export const COMPONENTS: Record<string, ComponentSpec> = {
           : null,
     fields: [
       { name: 'name', label: 'Name', kind: 'text', group: 'When' },
-      { name: 'event', label: 'Event', kind: 'select', options: ['change', 'click', 'load', 'dialog_closed', 'focus', 'blur', 'key_release', 'after_refresh', 'selection_change', 'before_submit', 'custom'], group: 'When',
-        help: 'dialog_closed: a modal dialog opened from this page was submitted and closed (instead of reloading the page), e.g. refresh a region. focus / blur / key_release: an item gets or loses the focus, a key is released in it. after_refresh: a region was refreshed or loaded. selection_change: rows were selected in a report (row selection) or a grid\'s master row. before_submit: the page is about to be submitted (a declined confirm keeps it). custom: JavaScript raised it with pgkiln.trigger(\'NAME\', value). The actions of one event and trigger run in sequence order; a declined confirm stops the ones after it.' },
-      { name: 'trigger_element', label: 'Item(s) / button / region / page / event', kind: 'upper', group: 'When', help: 'Comma separated: item names (change, focus, blur, key_release), a button name (click), region ids or static ids (after_refresh, selection_change), dialog page numbers (dialog_closed; empty: any dialog), event names (custom). Empty for load and before_submit.' },
+      { name: 'event', label: 'Event', kind: 'select', options: ['change', 'click', 'load', 'dialog_closed', 'focus', 'blur', 'key_release', 'after_refresh', 'selection_change', 'before_submit', 'custom', 'menu_entry'], group: 'When',
+        help: 'dialog_closed: a modal dialog opened from this page was submitted and closed (instead of reloading the page), e.g. refresh a region. focus / blur / key_release: an item gets or loses the focus, a key is released in it. after_refresh: a region was refreshed or loaded. selection_change: rows were selected in a report (row selection) or a grid\'s master row. before_submit: the page is about to be submitted (a declined confirm keeps it). custom: JavaScript raised it with pgkiln.trigger(\'NAME\', value). menu_entry (Menu entry chosen): an entry {"label": …, "action": "NAME"} of a menu button was chosen. The actions of one event and trigger run in sequence order; a declined confirm stops the ones after it.' },
+      { name: 'trigger_element', label: 'Item(s) / button / region / page / event', kind: 'upper', group: 'When', help: 'Comma separated: item names (change, focus, blur, key_release), a button name (click), region ids or static ids (after_refresh, selection_change), dialog page numbers (dialog_closed; empty: any dialog), event names (custom), menu entry action names or menu button names (menu_entry: any of its entries; a client-side condition tests the entry\'s name). Empty for load and before_submit.' },
       { name: 'condition_type', label: 'Client-side condition', kind: 'select', options: ['', 'equals', 'not_equals', 'in_list', 'is_null', 'is_not_null'], group: 'When' },
       { name: 'condition_value', label: 'Condition value', kind: 'text', group: 'When' },
-      { name: 'action', label: 'Action', kind: 'select', options: ['show', 'hide', 'enable', 'disable', 'set_value', 'execute_sql', 'refresh_region', 'refresh_item', 'alert', 'submit', 'set_focus', 'add_class', 'remove_class', 'show_success', 'show_error', 'clear_errors', 'ai_generate', 'execute_javascript', 'plugin', 'push_subscribe', 'confirm', 'close_dialog', 'cancel_dialog', 'clear', 'open_region', 'close_region', 'download', 'print', 'current_position', 'share'], group: 'Action',
-        help: 'show/hide/enable/disable reverse automatically when the condition is false. set_focus: the first affected item (or the region). show_error: on the affected items, or at the top. clear_errors: of the affected items, or all. ai_generate: runs the "Generate text with AI" process named in Code through AJAX, without submitting the page (on a submit button, the button submits instead when JavaScript is off). execute_javascript: calls the function named in Code, registered by a static application file (Shared Components → Static Application Files). push_subscribe: turns on push notifications on the user\'s device (use it on click: browsers ask only after one; the app needs push notifications on in Settings → Progressive Web App); Message is shown when it worked. confirm: asks Message; No stops the actions after it. close_dialog / cancel_dialog: close the modal page this runs on (close_dialog refreshes the page below and runs its dialog_closed actions). clear: empties the affected items. open_region / close_region: a collapsible region opens or closes (another region shows or hides). download: the file of the download process named in Code (Items to submit are sent first). print: the browser\'s print dialog. current_position: the device\'s position as latitude,longitude into the first affected item. share: the device\'s share sheet for this page (Message as the text), or the link copied.' },
+      { name: 'action', label: 'Action', kind: 'select', options: ['show', 'hide', 'enable', 'disable', 'set_value', 'execute_sql', 'refresh_region', 'refresh_item', 'alert', 'submit', 'set_focus', 'add_class', 'remove_class', 'show_success', 'show_error', 'clear_errors', 'ai_generate', 'execute_javascript', 'plugin', 'push_subscribe', 'confirm', 'close_dialog', 'cancel_dialog', 'clear', 'open_region', 'close_region', 'download', 'print', 'current_position', 'share', 'wait_popup', 'remove_wait_popup'], group: 'Action',
+        help: 'show/hide/enable/disable reverse automatically when the condition is false. set_focus: the first affected item (or the region). show_error: on the affected items, or at the top. clear_errors: of the affected items, or all. ai_generate: runs the "Generate text with AI" process named in Code through AJAX, without submitting the page (on a submit button, the button submits instead when JavaScript is off). execute_javascript: calls the function named in Code, registered by a static application file (Shared Components → Static Application Files). push_subscribe: turns on push notifications on the user\'s device (use it on click: browsers ask only after one; the app needs push notifications on in Settings → Progressive Web App); Message is shown when it worked. confirm: asks Message; No stops the actions after it. close_dialog / cancel_dialog: close the modal page this runs on (close_dialog refreshes the page below and runs its dialog_closed actions). clear: empties the affected items. open_region / close_region: a collapsible region opens or closes (another region shows or hides). download: the file of the download process named in Code (Items to submit are sent first). print: the browser\'s print dialog. current_position: the device\'s position as latitude,longitude into the first affected item. share: the device\'s share sheet for this page (Message as the text), or the link copied. wait_popup: a modal "please wait" overlay (Message as its text) until remove_wait_popup or the next page, e.g. on before_submit around a long process, or wait_popup, execute_sql, remove_wait_popup around an Ajax call.' },
       { name: 'affected_items', label: 'Affected items', kind: 'upper', group: 'Action' },
       { name: 'affected_region_id', label: 'Affected region', kind: 'region', group: 'Action' },
       { name: 'code', label: 'SQL', kind: 'code', wide: true, group: 'Action', help: 'set_value: a SELECT whose columns set the affected items · execute_sql: any SQL; returned columns named like items set them · ai_generate: the name of an ai_generate process on this page (its output items are updated; items to submit default to the items its prompts use) · execute_javascript: the name of a function registered with pgkiln.actions.register(name, fn) in a static file the page loads.' },
       { name: 'items_to_submit', label: 'Items to submit', kind: 'upper', group: 'Action' },
-      { name: 'message', label: 'Message (alert, show_success, show_error)', kind: 'text', group: 'Action' },
+      { name: 'message', label: 'Message (alert, confirm, show_success, show_error, wait_popup)', kind: 'text', group: 'Action' },
       { name: 'config', label: 'Plug-in attributes (JSON)', kind: 'json', group: 'Action', help: 'plugin: {"attributes": {"NAME": "value or &ITEM."}} (Shared Components → Plug-ins lists each plug-in\'s attributes).' },
       { name: 'css_classes', label: 'CSS classes (add_class, remove_class)', kind: 'text', group: 'Action', help: 'Up to five class names, e.g. is-highlight is-muted (lower case letters, digits, - and _).' },
       { name: 'seq', label: 'Sequence', kind: 'int', group: 'Security' },
@@ -614,7 +623,18 @@ export const COMPONENTS: Record<string, ComponentSpec> = {
       if (v.expiration && !v.due_in) return 'When overdue: set "Due in" first (a task without a due date is never overdue).';
       if (v.expiration === 'renew' && v.max_renewals !== null && v.max_renewals !== undefined && v.max_renewals !== '' && (Number(v.max_renewals) < 1 || Number(v.max_renewals) > 100)) return 'Maximum renewals: 1 to 100.';
       if (v.expiration === 'escalate' && !String(v.escalate_role ?? '').trim()) return 'Escalation role: the role that takes the task over.';
-      return null;
+      // (123) custom outcomes, events and notifications (parseFields gives the JSON as text)
+      const json = (x: unknown) => {
+        const parsed = typeof x === 'string' ? (x.trim() ? JSON.parse(x) : null) : x;
+        return parsed && typeof parsed === 'object' && !Array.isArray(parsed) && !Object.keys(parsed).length ? null : parsed;
+      };
+      const problems = [...outcomeProblems(json(v.outcomes)), ...eventProblems(json(v.events)), ...notificationProblems(json(v.notifications))];
+      return problems.length ? problems.join(' ') : null;
+    },
+    // (123) an empty JSON field is "none" (null), not {}
+    beforeSave: async (v) => {
+      for (const k of ['outcomes', 'events', 'notifications']) if (v[k] === '{}' || v[k] === '[]' || v[k] === '') v[k] = null;
+      if (v.fail_recovery === '') v.fail_recovery = null;
     },
     fields: [
       { name: 'name', label: 'Name', kind: 'upper', group: 'Identification', help: "Application SQL creates tasks with meta.create_task('NAME', :P1_ID, params, owners)." },
@@ -632,7 +652,16 @@ export const COMPONENTS: Record<string, ComponentSpec> = {
       { name: 'details_page', label: 'Details page', kind: 'page', group: 'Details', help: 'The subject links here, setting the item below to the task\'s record key.' },
       { name: 'details_item', label: 'Details item', kind: 'upper', group: 'Details', help: 'e.g. P7_ID' },
       { name: 'action_code', label: 'On completion (SQL)', kind: 'code', wide: true, group: 'Action',
-        help: 'Runs as the application\'s role when the task is approved, rejected or completed, in the same transaction (an error undoes the decision). Binds: :TASK_ID, :DETAIL_PK, :OUTCOME (APPROVED, REJECTED, COMPLETED), :COMMENT, :APPROVER, :INITIATOR and the task parameters, e.g. select expenses.decide(:DETAIL_PK::int, :OUTCOME, :COMMENT)' },
+        help: 'Runs as the application\'s role when the task is approved, rejected or completed, in the same transaction (an error undoes the decision). Binds: :TASK_ID, :DETAIL_PK, :OUTCOME (APPROVED, REJECTED, COMPLETED, or a custom outcome such as YES), :COMMENT, :APPROVER, :INITIATOR and the task parameters, e.g. select expenses.decide(:DETAIL_PK::int, :OUTCOME, :COMMENT)' },
+      // (123) custom outcomes, events and notifications
+      { name: 'outcomes', label: 'Outcomes (JSON)', kind: 'json', wide: true, group: 'Outcomes',
+        help: 'Custom outcomes instead of Approve / Reject (or Complete): [{"name": "YES", "label": "Yes", "colour": "success"}, {"name": "NO", "label": "No", "colour": "danger"}, {"name": "UNDECIDED", "label": "Undecided", "colour": "warning"}] · colours: default, primary, success, danger, warning. The task list shows one button each; :OUTCOME is the name (YES); a workflow\'s task step names them in "next" ({"yes": "PAY", "no": "END"}) and a switch case in "outcome". Empty: the type\'s own outcomes.' },
+      { name: 'events', label: 'Events (JSON)', kind: 'json', wide: true, group: 'Events',
+        help: '[{"on": "complete", "type": "sql", "code": "select expenses.log(:TASK_ID::bigint, :OUTCOME)"}, {"on": "expire", "type": "mail", "to": "select email from staff where role = \'manager\'", "template": "TASK_EXPIRED"}, {"on": "fail", "type": "workflow", "workflow": "FIX_REQUEST", "vars": {"REASON": "&ERROR."}}] · on: complete, expire, fail (the completion SQL failed) · type: sql (as the application\'s role), mail (meta.send_mail_template with a "template", or "subject" and "body"; "to" is a SELECT returning addresses, or addresses), workflow (meta.start_workflow with the task\'s record key and parameters, plus "vars"). Binds and #NAME# placeholders: the task parameters, :TASK_ID, :DETAIL_PK, :SUBJECT, :OUTCOME, :APPROVER, :INITIATOR, :EVENT; for fail also :ERROR and :COMMENT. Complete and expire run right after the commit, in a transaction of their own; fail runs in the request.' },
+      { name: 'fail_recovery', label: 'When the completion SQL fails', kind: 'select', options: ['', 'reopen', 'complete'], group: 'Events',
+        help: 'reopen (the default): the decision is undone and the task stays open; the user sees the error. complete: the task is completed with the outcome, without the SQL\'s effect. The "fail" events run either way.' },
+      { name: 'notifications', label: 'Notifications (JSON)', kind: 'json', wide: true, group: 'Events',
+        help: 'E-mail templates (Shared Components → E-mail templates) sent by pgkiln itself: {"create": "TASK_CREATED", "complete": "TASK_DONE", "expire": "TASK_EXPIRED"} · create: to the potential owners (named users and the application\'s users with an owner role), complete: to the initiator, expire: to both; at the e-mail address of their account. Placeholders: #SUBJECT#, #TASK_ID#, #DETAIL_PK#, #OUTCOME#, #APPROVER#, #INITIATOR#, #EVENT# and the task parameters. The application needs a mail service.' },
     ],
   },
   template_component: TEMPLATE_COMPONENT_SPEC,

package/src/builder/designer.ts

@@ -1,3 +1,4 @@
+import { pageIssuesNote } from './team.ts';
 import type { FastifyInstance, FastifyReply } from 'fastify';
 import { owner } from '../db.ts';
 import { html, raw, type Raw } from '../html.ts';
@@ -163,13 +164,17 @@ export async function designerRoutes(app: FastifyInstance) {
           <div class="pd-dialog-buttons"><button type="button" class="btn" data-dialog-close>Cancel</button><button class="btn btn-primary">Copy</button></div>
         </form>
       </dialog>`;
-    const events: [string, string][] = [['change', 'Change'], ['click', 'Click'], ['load', 'Page load']];
+    const events: [string, string][] = [['change', 'Change'], ['click', 'Click'], ['load', 'Page load'], ['menu_entry', 'Menu entry chosen']];
+    const daLeaf = (d: (typeof rows.dynamic_action)[number]) => leaf('dynamic_action', d, icon('bolt'), d.name, `${d.trigger_element ?? ''} → ${d.action}`);
+    // (sprint 115) the other events (focus, custom, before_submit, …) in one folder, when there are any
+    const others = rows.dynamic_action.filter((d) => !events.some(([ev]) => ev === d.event));
     const dynamicActions = html`${createBar([['dynamic_action', 'Dynamic action']])}
       <ul class="pd-tree" aria-label="Dynamic actions">
         ${events.map(([ev, label]) => {
           const list = rows.dynamic_action.filter((d) => d.event === ev);
-          return folder(`Events: ${label}`, list.length ? list.map((d) => leaf('dynamic_action', d, icon('bolt'), d.name, `${d.trigger_element ?? ''} → ${d.action}`)) : none('None'), list.length > 0);
+          return folder(`Events: ${label}`, list.length ? list.map(daLeaf) : none('None'), list.length > 0);
         })}
+        ${others.length ? folder('Events: Other', others.map((d) => leaf('dynamic_action', d, icon('bolt'), d.name, `${d.event}: ${d.trigger_element ?? ''} → ${d.action}`)), true) : ''}
       </ul>`;
     // after processing: the branches in sequence, then (when none applies) the pressed button's target page
     const afterBranches = rows.branch.filter((x) => x.point !== 'before_header');
@@ -303,7 +308,7 @@ export async function designerRoutes(app: FastifyInstance) {
     const blocking = runOnly ?? locks.find((l) => l.locked_by !== s.username);
     const mine = locks.find((l) => l.locked_by === s.username);
     const commentCount = (await owner.one('select count(*)::int as n from meta.dev_comment where app_id = $1 and page_no = $2', [p.app_id, p.page_no])).n;
-    const center = html`${blocking ? html`<div class="alert alert-error pd-lock" role="status">${icon('key')} ${lockText(blocking)} Your changes will be refused.</div>` : ''}
+    const center = html`${blocking ? html`<div class="alert alert-error pd-lock" role="status">${icon('key')} ${lockText(blocking)} Your changes will be refused.</div>` : ''}${await pageIssuesNote(p.app_id, p.page_no)}
       <div class="pd-tabs pd-tabs-center" data-tabs="pd-center" aria-label="Page">
       ${tab('pd-c-layout', 'Layout', layout, true)}
       ${tab('pd-c-search', 'Page search', pageSearch)}

package/src/builder/feedback.ts

@@ -3,6 +3,8 @@ import { owner } from '../db.ts';
 import { html, raw } from '../html.ts';
 import { icon } from '../icons.ts';
 import { appOr404 } from './forms.ts';
+import { issuesFrom } from '../team.ts';
+import { toIssueButton } from './team.ts';
 import { appHeader, back, BASE, csrf, developer, flash, region, select, send, shell, type Req } from './ui.ts';
 
 // Application → Feedback (APEX: Team Development → Feedback, migration 084):
@@ -28,6 +30,8 @@ export async function feedbackRoutes(app: FastifyInstance) {
       [a.id, status, kind])).rows;
     const counts = (await owner.query(`select status, count(*)::int as n from meta.feedback where app_id = $1 group by 1`, [a.id])).rows;
     const count = (st: string) => counts.find((c) => c.status === st)?.n ?? 0;
+    // (sprint 113) feedback turned into a Team Development issue links to it
+    const issues = await issuesFrom('feedback', rows.map((f) => Number(f.id)));
     const body = html`
       ${region('Feedback', html`
         <form method="post" action="${BASE}/apps/${a.id}/feedback/settings" class="u-mb1">${csrf(s)}
@@ -39,10 +43,11 @@ export async function feedbackRoutes(app: FastifyInstance) {
           ${select('status', 'Status', status, [['', 'All'], ...STATUSES])}
           ${select('kind', 'Kind', kind, [['', 'All'], ...KINDS])}
           <button class="btn btn-sm">${icon('filter')} Show</button></form>
-        ${rows.length ? html`<ul class="feedback-admin">${rows.map((f) => html`<li class="feedback-item">
+        ${rows.length ? html`<ul class="feedback-admin">${rows.map((f) => html`<li class="feedback-item" id="feedback-${f.id}">
           <div class="feedback-meta"><span class="tag">${KINDS.find(([v]) => v === f.kind)?.[1]}</span>
             <b>${f.username}</b> <span class="muted">${when(f.created_at)}${f.page_no ? html` · <a href="/a/${a.alias}/${f.page_no}" target="_blank" rel="noopener">page ${f.page_no}</a>` : ''}${f.rating ? ` · ${'★'.repeat(f.rating)}` : ''}${f.user_agent ? ` · ${f.user_agent}` : ''}</span></div>
           <p class="feedback-body">${f.body}</p>
+          <p class="feedback-issue">${toIssueButton(s, 'feedback', Number(f.id), issues.get(Number(f.id)))}</p>
           <form method="post" action="${BASE}/apps/${a.id}/feedback/${f.id}">${csrf(s)}
             <div class="form-grid">
               ${select('status', 'Status', f.status, STATUSES)}

package/src/builder/locks.ts

@@ -4,6 +4,7 @@ import { html, raw, type Raw } from '../html.ts';
 import { icon } from '../icons.ts';
 import { clientIp, logActivity, type Session } from '../session.ts';
 import { back, BASE, csrf, developer, flash, type Req } from './ui.ts';
+import { issuesFrom } from '../team.ts';
 
 // Page locks, the application lock and developer comments (APEX: page locks,
 // application lock in 26.1, developer comments). A developer locks a page
@@ -96,6 +97,8 @@ export async function lockPanel(s: Session, appId: number, pageNo: number, opts:
     owner.query('select id, author, body, created_at::text from meta.dev_comment where app_id = $1 and page_no = $2 order by created_at desc, id desc limit 200', [appId, pageNo]),
     isAdmin(s.username),
   ]);
+  // (sprint 113) a comment turned into a Team Development issue links to it
+  const issues = await issuesFrom('comment', comments.rows.map((c) => Number(c.id)));
   const own = locks.find((l) => l.page_no === pageNo);
   const appLock = pageNo ? locks.find((l) => l.page_no === 0) : undefined;
   const what = pageNo ? `page ${pageNo}` : 'the application';
@@ -126,7 +129,10 @@ export async function lockPanel(s: Session, appId: number, pageNo: number, opts:
           <div class="dev-comment-head"><b>${c.author}</b> <span class="muted">${String(c.created_at).slice(0, 16)}</span>
             ${c.author === s.username || admin
               ? html`<form method="post" action="${BASE}/apps/${appId}/comments/${c.id}/delete" class="u-inline">${csrf(s)}<button class="link-button" data-confirm="Delete this comment?">Delete</button></form>`
-              : ''}</div>
+              : ''}
+            ${issues.get(Number(c.id))
+              ? html`<a class="small" href="/builder/team/issues/${issues.get(Number(c.id))}">${icon('kanban')} Issue #${issues.get(Number(c.id))}</a>`
+              : html`<form method="post" action="/builder/team/from-comment" class="u-inline">${csrf(s)}<input type="hidden" name="comment" value="${c.id}"><button class="link-button">Make an issue</button></form>`}</div>
           <p class="dev-comment-body">${c.body}</p></li>`)}</ul>`
       : html`<p class="muted">No comments yet.</p>`}
   </div>`;

package/src/builder/region-help.ts

@@ -22,8 +22,8 @@ export const REGION_CONFIG_HELP: [string[], string][] = [
   [['report', 'chart', 'cards', 'dynamic', 'tree', 'template_component'], '{"lazy":true} loads it after the page shows, {"cache":{"scope":"user"|"session"|"all","seconds":300}} keeps its HTML (a submit of the page empties it)'],
   [['data_reporter'], '{"sources":[{"id":"orders","label":"Orders","description":"…","schema":"sales","table":"order_v","columns":[{"name":"total","label":"Total","format":"FML999G990D00"}]}],"sharing":true,"share_authz":"SCHEME","page_size":25} (the Data Reporter settings below edit it)'],
   [['form_designer'], '{"sources":[{"id":"orders","label":"Orders","description":"…","schema":"sales","table":"orders","key":"id","columns":[{"name":"customer","label":"Customer"},{"name":"status","lov":"LOV:ORDER_STATUS"}],"insert":true,"update":true,"delete":false}],"design_authz":"SCHEME","page_size":25} (the Form Designer region\'s Settings; users that pass design_authz design forms)'],
-  [['ai_assistant'], '{"service":"NAME","system":"…","welcome":"…","context":[{"name":"policy","sql":"select … :AI_PROMPT …"}],"tools":[{"name":"my_leave","description":"…","sql":"select … where status = :STATUS","parameters":{"STATUS":{"type":"string","enum":["PENDING"]}}},{"name":"dept","type":"rest","source":"DEPARTMENT","description":"…"}],"max_rounds":5,"max_turns":20} (the AI assistant settings below edit it)'],
-  [['report'], '{"ai_filter":{"service":"NAME"}} adds an "Ask in your own words" box (natural-language filters)'],
+  [['ai_assistant'], '{"service":"NAME","system":"…","welcome":"…","context":[{"name":"policy","sql":"select … :AI_PROMPT …"}],"tools":[{"name":"my_leave","description":"…","sql":"select … where status = :STATUS","parameters":{"STATUS":{"type":"string","enum":["PENDING"]}}},{"name":"dept","type":"rest","source":"DEPARTMENT","description":"…"}],"max_rounds":5,"max_turns":20}; or {"agent":"SALES_AGENT","welcome":"…"} for an AI agent of Shared Components (the AI assistant settings below edit it)'],
+  [['report'], '{"ai_filter":{}} adds an "Ask in your own words" box: the question becomes the report\'s settings, shown as chips (built-in phrases; {"service":"NAME"} uses an AI service)'],
   [['plugin'], '{"plugin":"name","attributes":{"NAME":"value"}} (a region plug-in; a Source SELECT feeds its template)'],
   [['form'], '{"lost_update":false} saves without checking that the row is unchanged since it was shown'],
   [['login'], '(no attributes) the sign-in form of the application\'s login page (Application settings → Login page): providers, user name and password, "Keep me signed in", "Forgot password?"'],

package/src/builder/routes.ts

@@ -2,6 +2,7 @@ import { advise } from './advisor.ts';
 import { appLocks, isAdmin, lockPanel, lockText } from './locks.ts';
 import { parseRoleList, validRoleName } from '../dbauth.ts';
 import { DEFAULT_HEADER, headerProxiesConfigured } from '../headerauth.ts';
+import { appIssues } from './team.ts';
 import type { FastifyInstance } from 'fastify';
 import { owner } from '../db.ts';
 import { html, raw } from '../html.ts';
@@ -259,6 +260,7 @@ export async function builderRoutes(app: FastifyInstance) {
     const locks = new Map((await appLocks(a.id)).map((l) => [l.page_no, l]));
     const commentsPerPage = new Map((await owner.query('select page_no, count(*)::int as n from meta.dev_comment where app_id = $1 group by 1', [a.id])).rows.map((r) => [r.page_no, r.n]));
     const appLock = locks.get(0);
+    const issues = await appIssues(a.id);
 
     const main = html`
       ${appHeader(a, 'pages')}
@@ -282,7 +284,7 @@ export async function builderRoutes(app: FastifyInstance) {
           : html`<div class="table-wrap"><table class="report">
           <thead><tr><th class="num">Page</th><th>Name</th>${grouped ? html`<th>Group</th>` : ''}<th>Mode</th><th class="num">Regions</th><th class="num">Items</th><th class="num">DAs</th><th class="num">Processes</th><th>Authorization</th><th>Protection</th><th>Lock</th><th></th></tr></thead>
           <tbody id="pages-rows">${shownPages.map((p) => html`<tr>
-            <td class="num">${p.page_no}</td><td><a href="${designerUrl(a.id, p.page_no)}">${p.name}</a>${commentsPerPage.get(p.page_no) ? html` <span class="tag" title="Developer comments">${commentsPerPage.get(p.page_no)} comment${commentsPerPage.get(p.page_no) === 1 ? '' : 's'}</span>` : ''}</td>${grouped ? html`<td>${p.page_group ?? '—'}</td>` : ''}<td>${p.mode}</td>
+            <td class="num">${p.page_no}</td><td><a href="${designerUrl(a.id, p.page_no)}">${p.name}</a>${commentsPerPage.get(p.page_no) ? html` <span class="tag" title="Developer comments">${commentsPerPage.get(p.page_no)} comment${commentsPerPage.get(p.page_no) === 1 ? '' : 's'}</span>` : ''}${issues.tag(p.page_no)}</td>${grouped ? html`<td>${p.page_group ?? '—'}</td>` : ''}<td>${p.mode}</td>
             <td class="num">${p.regions}</td><td class="num">${p.items}</td><td class="num">${p.das}</td><td class="num">${p.processes}</td>
             <td>${p.requires_auth ? (p.authz ?? '—') : 'public'}</td><td>${p.protection}</td>
             <td>${((l) => (l ? html`<span class="lock-tag" title="${lockText(l)}">${icon('key')}<span>${l.locked_by === s.username ? 'you' : l.locked_by}</span></span>` : '—'))(locks.get(p.page_no))}</td>
@@ -323,6 +325,7 @@ export async function builderRoutes(app: FastifyInstance) {
           <li><a href="${BASE}/apps/${a.id}/backups">${icon('history')} Backups</a></li>
           <li><a href="${BASE}/apps/${a.id}/supporting-objects">${icon('database')} Supporting objects</a></li>
           <li><a href="#app-lock">${icon('lock')} Lock the application</a></li>
+          ${issues.task}
           <li><a href="${BASE}/apps/${a.id}/settings?tab=definition">${icon('trash')} Delete the application</a></li>
         </ul></aside>
       </div>`;

package/src/builder/shared.ts

@@ -71,7 +71,7 @@ export function sharedGroups(appId: number): { key: string; title: string; icon:
     { key: 'data', title: 'Data Sources', icon: 'database', items: [t('rest_source', 'REST Data Sources'), t('web_credential', 'Web Credentials'), t('rest_module', 'RESTful Services'), t('data_load_def', 'Data Load Definitions')] },
     { key: 'workflows', title: 'Workflows and Automations', icon: 'activity', items: [t('workflow_definition', 'Workflows'), t('task_definition', 'Task Definitions'), t('automation', 'Automations')] },
     { key: 'globalization', title: 'Globalization', icon: 'globe', items: [page('globalization', 'Translations and Text Messages'), t('dynamic_translation', 'Dynamic Translations'), settings('globalization', 'Globalization Attributes')] },
-    { key: 'ai', title: 'Generative AI', icon: 'lightbulb', items: [page('ai', 'AI Services')] },
+    { key: 'ai', title: 'Generative AI', icon: 'lightbulb', items: [page('ai', 'AI Services'), page('ai-agents', 'AI Agents')] },
   ];
 }