@apteva/apteva-kit 0.1.26 → 0.1.28

package/dist/index.d.mts

@@ -182,53 +182,35 @@ interface SendMessageParams {
 
 /**
  * Widget definitions for context injection
- * These are sent to the agent so it knows what UI widgets are available
  */
 declare const WIDGET_DEFINITIONS: {
     readonly card: {
-        readonly description: "Displays a card with title and optional description, image, footer";
-        readonly schema: "{\"title\": \"string\", \"description?\": \"string\", \"image?\": \"url\", \"footer?\": \"string\"}";
-        readonly example: "@ui:card[{\"title\": \"Summary\", \"description\": \"Key findings from the analysis\"}]";
+        readonly schema: "title, description?, image?, footer?";
+        readonly example: "@ui:card[{\"title\": \"Summary\", \"description\": \"Details here\"}]";
     };
     readonly list: {
-        readonly description: "Displays a list of items with title, subtitle, and optional description";
-        readonly schema: "{\"items\": [{\"id\": \"string\", \"title\": \"string\", \"subtitle?\": \"string\", \"description?\": \"string\", \"image?\": \"url\"}]}";
-        readonly example: "@ui:list[{\"items\": [{\"id\": \"1\", \"title\": \"First item\", \"subtitle\": \"Details\"}]}]";
+        readonly schema: "items: [{id, title, subtitle?, description?}]";
+        readonly example: "@ui:list[{\"items\": [{\"id\": \"1\", \"title\": \"Item\", \"subtitle\": \"Info\"}]}]";
     };
     readonly button_group: {
-        readonly description: "Displays action buttons. User clicks are sent back to you with the button id";
-        readonly schema: "{\"buttons\": [{\"id\": \"string\", \"label\": \"string\", \"variant?\": \"primary|secondary|outline\"}], \"layout?\": \"horizontal|vertical\"}";
-        readonly example: "@ui:button_group[{\"buttons\": [{\"id\": \"confirm\", \"label\": \"Confirm\", \"variant\": \"primary\"}, {\"id\": \"cancel\", \"label\": \"Cancel\"}]}]";
+        readonly schema: "buttons: [{id, label, variant?}]";
+        readonly example: "@ui:button_group[{\"buttons\": [{\"id\": \"ok\", \"label\": \"OK\"}]}]";
     };
     readonly form: {
-        readonly description: "Displays an input form. Submitted data is sent back to you";
-        readonly schema: "{\"title?\": \"string\", \"fields\": [{\"name\": \"string\", \"type\": \"text|number|select|checkbox|textarea|date\", \"label\": \"string\", \"required?\": boolean, \"placeholder?\": \"string\", \"options?\": [{\"label\": \"string\", \"value\": \"string\"}]}]}";
-        readonly example: "@ui:form[{\"title\": \"Contact\", \"fields\": [{\"name\": \"email\", \"type\": \"text\", \"label\": \"Email\", \"required\": true}]}]";
+        readonly schema: "fields: [{name, type, label, required?}]";
+        readonly example: "@ui:form[{\"fields\": [{\"name\": \"email\", \"type\": \"text\", \"label\": \"Email\"}]}]";
     };
-    readonly image: {
-        readonly description: "Displays a single image with optional caption";
-        readonly schema: "{\"src\": \"url\", \"alt\": \"string\", \"caption?\": \"string\"}";
-        readonly example: "@ui:image[{\"src\": \"https://example.com/img.png\", \"alt\": \"Description\", \"caption\": \"Figure 1\"}]";
+    readonly table: {
+        readonly schema: "columns: [{key, label}], rows: [...]";
+        readonly example: "@ui:table[{\"columns\": [{\"key\": \"name\", \"label\": \"Name\"}], \"rows\": [{\"name\": \"A\"}]}]";
     };
-    readonly gallery: {
-        readonly description: "Displays multiple images in a grid or carousel layout";
-        readonly schema: "{\"images\": [{\"id\": \"string\", \"src\": \"url\", \"alt\": \"string\", \"caption?\": \"string\"}], \"layout?\": \"grid|carousel\"}";
-        readonly example: "@ui:gallery[{\"images\": [{\"id\": \"1\", \"src\": \"https://example.com/1.png\", \"alt\": \"Image 1\"}], \"layout\": \"grid\"}]";
+    readonly image: {
+        readonly schema: "src, alt, caption?";
+        readonly example: "@ui:image[{\"src\": \"url\", \"alt\": \"desc\"}]";
     };
     readonly chart: {
-        readonly description: "Displays a chart visualization (line, bar, pie, doughnut)";
-        readonly schema: "{\"chartType\": \"line|bar|pie|doughnut\", \"title?\": \"string\", \"data\": {\"labels\": [\"string\"], \"datasets\": [{\"label\": \"string\", \"data\": [number], \"backgroundColor?\": \"string|string[]\"}]}}";
-        readonly example: "@ui:chart[{\"chartType\": \"bar\", \"title\": \"Sales\", \"data\": {\"labels\": [\"Q1\", \"Q2\"], \"datasets\": [{\"label\": \"Revenue\", \"data\": [100, 150]}]}}]";
-    };
-    readonly map: {
-        readonly description: "Displays an interactive map with optional markers";
-        readonly schema: "{\"center\": {\"lat\": number, \"lng\": number}, \"zoom?\": number, \"markers?\": [{\"id\": \"string\", \"position\": {\"lat\": number, \"lng\": number}, \"title\": \"string\"}]}";
-        readonly example: "@ui:map[{\"center\": {\"lat\": 40.7128, \"lng\": -74.0060}, \"zoom\": 12, \"markers\": [{\"id\": \"1\", \"position\": {\"lat\": 40.7128, \"lng\": -74.0060}, \"title\": \"NYC\"}]}]";
-    };
-    readonly table: {
-        readonly description: "Displays structured data in rows and columns";
-        readonly schema: "{\"columns\": [{\"key\": \"string\", \"label\": \"string\", \"align?\": \"left|center|right\"}], \"rows\": [{\"id?\": \"string\", ...}], \"caption?\": \"string\", \"compact?\": boolean, \"striped?\": boolean}";
-        readonly example: "@ui:table[{\"columns\": [{\"key\": \"name\", \"label\": \"Name\"}, {\"key\": \"status\", \"label\": \"Status\"}], \"rows\": [{\"name\": \"Item 1\", \"status\": \"Active\"}, {\"name\": \"Item 2\", \"status\": \"Pending\"}]}]";
+        readonly schema: "chartType: line|bar|pie, data: {labels, datasets}";
+        readonly example: "@ui:chart[{\"chartType\": \"bar\", \"data\": {\"labels\": [\"A\"], \"datasets\": [{\"label\": \"X\", \"data\": [10]}]}}]";
     };
 };
 type WidgetType = keyof typeof WIDGET_DEFINITIONS;

package/dist/index.d.ts

@@ -182,53 +182,35 @@ interface SendMessageParams {
 
 /**
  * Widget definitions for context injection
- * These are sent to the agent so it knows what UI widgets are available
  */
 declare const WIDGET_DEFINITIONS: {
     readonly card: {
-        readonly description: "Displays a card with title and optional description, image, footer";
-        readonly schema: "{\"title\": \"string\", \"description?\": \"string\", \"image?\": \"url\", \"footer?\": \"string\"}";
-        readonly example: "@ui:card[{\"title\": \"Summary\", \"description\": \"Key findings from the analysis\"}]";
+        readonly schema: "title, description?, image?, footer?";
+        readonly example: "@ui:card[{\"title\": \"Summary\", \"description\": \"Details here\"}]";
     };
     readonly list: {
-        readonly description: "Displays a list of items with title, subtitle, and optional description";
-        readonly schema: "{\"items\": [{\"id\": \"string\", \"title\": \"string\", \"subtitle?\": \"string\", \"description?\": \"string\", \"image?\": \"url\"}]}";
-        readonly example: "@ui:list[{\"items\": [{\"id\": \"1\", \"title\": \"First item\", \"subtitle\": \"Details\"}]}]";
+        readonly schema: "items: [{id, title, subtitle?, description?}]";
+        readonly example: "@ui:list[{\"items\": [{\"id\": \"1\", \"title\": \"Item\", \"subtitle\": \"Info\"}]}]";
     };
     readonly button_group: {
-        readonly description: "Displays action buttons. User clicks are sent back to you with the button id";
-        readonly schema: "{\"buttons\": [{\"id\": \"string\", \"label\": \"string\", \"variant?\": \"primary|secondary|outline\"}], \"layout?\": \"horizontal|vertical\"}";
-        readonly example: "@ui:button_group[{\"buttons\": [{\"id\": \"confirm\", \"label\": \"Confirm\", \"variant\": \"primary\"}, {\"id\": \"cancel\", \"label\": \"Cancel\"}]}]";
+        readonly schema: "buttons: [{id, label, variant?}]";
+        readonly example: "@ui:button_group[{\"buttons\": [{\"id\": \"ok\", \"label\": \"OK\"}]}]";
     };
     readonly form: {
-        readonly description: "Displays an input form. Submitted data is sent back to you";
-        readonly schema: "{\"title?\": \"string\", \"fields\": [{\"name\": \"string\", \"type\": \"text|number|select|checkbox|textarea|date\", \"label\": \"string\", \"required?\": boolean, \"placeholder?\": \"string\", \"options?\": [{\"label\": \"string\", \"value\": \"string\"}]}]}";
-        readonly example: "@ui:form[{\"title\": \"Contact\", \"fields\": [{\"name\": \"email\", \"type\": \"text\", \"label\": \"Email\", \"required\": true}]}]";
+        readonly schema: "fields: [{name, type, label, required?}]";
+        readonly example: "@ui:form[{\"fields\": [{\"name\": \"email\", \"type\": \"text\", \"label\": \"Email\"}]}]";
     };
-    readonly image: {
-        readonly description: "Displays a single image with optional caption";
-        readonly schema: "{\"src\": \"url\", \"alt\": \"string\", \"caption?\": \"string\"}";
-        readonly example: "@ui:image[{\"src\": \"https://example.com/img.png\", \"alt\": \"Description\", \"caption\": \"Figure 1\"}]";
+    readonly table: {
+        readonly schema: "columns: [{key, label}], rows: [...]";
+        readonly example: "@ui:table[{\"columns\": [{\"key\": \"name\", \"label\": \"Name\"}], \"rows\": [{\"name\": \"A\"}]}]";
     };
-    readonly gallery: {
-        readonly description: "Displays multiple images in a grid or carousel layout";
-        readonly schema: "{\"images\": [{\"id\": \"string\", \"src\": \"url\", \"alt\": \"string\", \"caption?\": \"string\"}], \"layout?\": \"grid|carousel\"}";
-        readonly example: "@ui:gallery[{\"images\": [{\"id\": \"1\", \"src\": \"https://example.com/1.png\", \"alt\": \"Image 1\"}], \"layout\": \"grid\"}]";
+    readonly image: {
+        readonly schema: "src, alt, caption?";
+        readonly example: "@ui:image[{\"src\": \"url\", \"alt\": \"desc\"}]";
     };
     readonly chart: {
-        readonly description: "Displays a chart visualization (line, bar, pie, doughnut)";
-        readonly schema: "{\"chartType\": \"line|bar|pie|doughnut\", \"title?\": \"string\", \"data\": {\"labels\": [\"string\"], \"datasets\": [{\"label\": \"string\", \"data\": [number], \"backgroundColor?\": \"string|string[]\"}]}}";
-        readonly example: "@ui:chart[{\"chartType\": \"bar\", \"title\": \"Sales\", \"data\": {\"labels\": [\"Q1\", \"Q2\"], \"datasets\": [{\"label\": \"Revenue\", \"data\": [100, 150]}]}}]";
-    };
-    readonly map: {
-        readonly description: "Displays an interactive map with optional markers";
-        readonly schema: "{\"center\": {\"lat\": number, \"lng\": number}, \"zoom?\": number, \"markers?\": [{\"id\": \"string\", \"position\": {\"lat\": number, \"lng\": number}, \"title\": \"string\"}]}";
-        readonly example: "@ui:map[{\"center\": {\"lat\": 40.7128, \"lng\": -74.0060}, \"zoom\": 12, \"markers\": [{\"id\": \"1\", \"position\": {\"lat\": 40.7128, \"lng\": -74.0060}, \"title\": \"NYC\"}]}]";
-    };
-    readonly table: {
-        readonly description: "Displays structured data in rows and columns";
-        readonly schema: "{\"columns\": [{\"key\": \"string\", \"label\": \"string\", \"align?\": \"left|center|right\"}], \"rows\": [{\"id?\": \"string\", ...}], \"caption?\": \"string\", \"compact?\": boolean, \"striped?\": boolean}";
-        readonly example: "@ui:table[{\"columns\": [{\"key\": \"name\", \"label\": \"Name\"}, {\"key\": \"status\", \"label\": \"Status\"}], \"rows\": [{\"name\": \"Item 1\", \"status\": \"Active\"}, {\"name\": \"Item 2\", \"status\": \"Pending\"}]}]";
+        readonly schema: "chartType: line|bar|pie, data: {labels, datasets}";
+        readonly example: "@ui:chart[{\"chartType\": \"bar\", \"data\": {\"labels\": [\"A\"], \"datasets\": [{\"label\": \"X\", \"data\": [10]}]}}]";
     };
 };
 type WidgetType = keyof typeof WIDGET_DEFINITIONS;

package/dist/index.js

@@ -639,124 +639,58 @@ function parseWidgetsFromText(text) {
 // src/utils/widget-context.ts
 var WIDGET_DEFINITIONS = {
   card: {
-    description: "Displays a card with title and optional description, image, footer",
-    schema: '{"title": "string", "description?": "string", "image?": "url", "footer?": "string"}',
-    example: '@ui:card[{"title": "Summary", "description": "Key findings from the analysis"}]'
+    schema: "title, description?, image?, footer?",
+    example: '@ui:card[{"title": "Summary", "description": "Details here"}]'
   },
   list: {
-    description: "Displays a list of items with title, subtitle, and optional description",
-    schema: '{"items": [{"id": "string", "title": "string", "subtitle?": "string", "description?": "string", "image?": "url"}]}',
-    example: '@ui:list[{"items": [{"id": "1", "title": "First item", "subtitle": "Details"}]}]'
+    schema: "items: [{id, title, subtitle?, description?}]",
+    example: '@ui:list[{"items": [{"id": "1", "title": "Item", "subtitle": "Info"}]}]'
   },
   button_group: {
-    description: "Displays action buttons. User clicks are sent back to you with the button id",
-    schema: '{"buttons": [{"id": "string", "label": "string", "variant?": "primary|secondary|outline"}], "layout?": "horizontal|vertical"}',
-    example: '@ui:button_group[{"buttons": [{"id": "confirm", "label": "Confirm", "variant": "primary"}, {"id": "cancel", "label": "Cancel"}]}]'
+    schema: "buttons: [{id, label, variant?}]",
+    example: '@ui:button_group[{"buttons": [{"id": "ok", "label": "OK"}]}]'
   },
   form: {
-    description: "Displays an input form. Submitted data is sent back to you",
-    schema: '{"title?": "string", "fields": [{"name": "string", "type": "text|number|select|checkbox|textarea|date", "label": "string", "required?": boolean, "placeholder?": "string", "options?": [{"label": "string", "value": "string"}]}]}',
-    example: '@ui:form[{"title": "Contact", "fields": [{"name": "email", "type": "text", "label": "Email", "required": true}]}]'
+    schema: "fields: [{name, type, label, required?}]",
+    example: '@ui:form[{"fields": [{"name": "email", "type": "text", "label": "Email"}]}]'
   },
-  image: {
-    description: "Displays a single image with optional caption",
-    schema: '{"src": "url", "alt": "string", "caption?": "string"}',
-    example: '@ui:image[{"src": "https://example.com/img.png", "alt": "Description", "caption": "Figure 1"}]'
+  table: {
+    schema: "columns: [{key, label}], rows: [...]",
+    example: '@ui:table[{"columns": [{"key": "name", "label": "Name"}], "rows": [{"name": "A"}]}]'
   },
-  gallery: {
-    description: "Displays multiple images in a grid or carousel layout",
-    schema: '{"images": [{"id": "string", "src": "url", "alt": "string", "caption?": "string"}], "layout?": "grid|carousel"}',
-    example: '@ui:gallery[{"images": [{"id": "1", "src": "https://example.com/1.png", "alt": "Image 1"}], "layout": "grid"}]'
+  image: {
+    schema: "src, alt, caption?",
+    example: '@ui:image[{"src": "url", "alt": "desc"}]'
   },
   chart: {
-    description: "Displays a chart visualization (line, bar, pie, doughnut)",
-    schema: '{"chartType": "line|bar|pie|doughnut", "title?": "string", "data": {"labels": ["string"], "datasets": [{"label": "string", "data": [number], "backgroundColor?": "string|string[]"}]}}',
-    example: '@ui:chart[{"chartType": "bar", "title": "Sales", "data": {"labels": ["Q1", "Q2"], "datasets": [{"label": "Revenue", "data": [100, 150]}]}}]'
-  },
-  map: {
-    description: "Displays an interactive map with optional markers",
-    schema: '{"center": {"lat": number, "lng": number}, "zoom?": number, "markers?": [{"id": "string", "position": {"lat": number, "lng": number}, "title": "string"}]}',
-    example: '@ui:map[{"center": {"lat": 40.7128, "lng": -74.0060}, "zoom": 12, "markers": [{"id": "1", "position": {"lat": 40.7128, "lng": -74.0060}, "title": "NYC"}]}]'
-  },
-  table: {
-    description: "Displays structured data in rows and columns",
-    schema: '{"columns": [{"key": "string", "label": "string", "align?": "left|center|right"}], "rows": [{"id?": "string", ...}], "caption?": "string", "compact?": boolean, "striped?": boolean}',
-    example: '@ui:table[{"columns": [{"key": "name", "label": "Name"}, {"key": "status", "label": "Status"}], "rows": [{"name": "Item 1", "status": "Active"}, {"name": "Item 2", "status": "Pending"}]}]'
+    schema: "chartType: line|bar|pie, data: {labels, datasets}",
+    example: '@ui:chart[{"chartType": "bar", "data": {"labels": ["A"], "datasets": [{"label": "X", "data": [10]}]}}]'
   }
 };
 var ALL_WIDGET_TYPES = Object.keys(WIDGET_DEFINITIONS);
 function generateWidgetContext(enabledWidgets) {
   const widgets = enabledWidgets || ALL_WIDGET_TYPES;
   let context = `
-## Available UI Widgets
-
-`;
-  context += `You can render rich UI components in your responses using this syntax: @ui:type[{json_props}]
-
-`;
-  context += `The widget syntax will be automatically converted to interactive UI. Users see the rendered widget, not the raw syntax.
-
-`;
-  context += `### Available widgets:
+## UI Widgets
+Render widgets: @ui:type[{props}]. Add "meta" for hidden data captured by UI.
 
 `;
   for (const type of widgets) {
     const def = WIDGET_DEFINITIONS[type];
     if (!def) continue;
-    context += `**${type}** - ${def.description}
-`;
-    context += `Schema: \`${def.schema}\`
-`;
-    context += `Example: \`${def.example}\`
-
+    context += `${type}: ${def.schema} | ${def.example}
 `;
   }
-  context += `### Meta field for extended data:
-
-`;
-  context += `Any widget can include a "meta" field with extended data that isn't displayed but is captured by the UI:
-`;
-  context += `- The widget displays from regular props (compact view)
-`;
-  context += `- The "meta" field contains full/detailed data for external UI components
-`;
-  context += `- Example: \`@ui:list[{"items": [{"id": "1", "title": "Task"}], "meta": {"items": [{"id": "1", "title": "Task", "description": "Full details...", "assignees": ["Alice"]}], "totalCount": 50}}]\`
-
-`;
-  context += `### Important notes:
-`;
-  context += `- JSON must be valid (use double quotes for strings)
-`;
-  context += `- Widget actions (button clicks, form submissions) are sent back to you
-`;
-  context += `- You can include multiple widgets in a single response
-`;
-  context += `- Combine widgets with regular text for context
-`;
-  context += `- Use "meta" field when the UI needs more data than what's displayed
+  context += `
+Meta example: @ui:list[{"items": [{"id": "1", "title": "Task"}], "meta": {"fullData": [...]}}]
 `;
   return context;
 }
 function generateCompactWidgetContext(enabledWidgets) {
   const widgets = enabledWidgets || ALL_WIDGET_TYPES;
-  let context = `
-UI Widgets: Use @ui:type[{props}] syntax.
-`;
-  context += `Available: ${widgets.join(", ")}
-`;
-  context += `Add "meta" field for extended data not shown in widget but captured by UI.
+  return `
+Widgets: @ui:type[{props}]. Types: ${widgets.join(", ")}. Add "meta" for extended data.
 `;
-  context += `Examples:
-`;
-  const examples = ["card", "list", "button_group"].filter((w) => widgets.includes(w));
-  for (const type of examples) {
-    const def = WIDGET_DEFINITIONS[type];
-    if (def) {
-      context += `${def.example}
-`;
-    }
-  }
-  return context;
 }
 
 // src/components/Widgets/Widgets.tsx