The AI skill layer

import * as ng from '@angular/core';
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { createGrid } from '@toclocoinc/lattice-grid';
import '@toclocoinc/lattice-grid/css';
import createLatticeGrid from '@toclocoinc/lattice-grid/modules/angular';

const { LatticeGridComponent } = createLatticeGrid({ ng, createGrid });

// ask is the host's, and the only thing that touches a model. The grid opens no
// connection of its own: it describes itself, hands the schema to this callback
// and waits. Column ids, titles, types and lookup options leave the grid; values
// never do unless the host puts them in context itself. Here the answer is looked
// up from a small script, so nothing is sent anywhere.
const scenes = [
  {
    match: ['prod', 'production', 'live'],
    reply: JSON.stringify({
      actions: [
        { action: 'setFilters', filters: { op: 'and', conditions: [
          { col: 'environment', op: 'in', value: ['prod', 'prod-2', 'definitely-prod'] },
        ] } },
        { action: 'setSort', sort: [{ col: 'cost', dir: 'desc' }] },
      ],
      explain: 'Filter to the production environments and sort by cost, largest first.',
    }),
  },
  {
    match: ['over', 'expensive', 'costly', '1000', 'budget'],
    reply: JSON.stringify({
      actions: [
        { action: 'setFilters', filters: { col: 'cost', op: 'gt', value: 1000 } },
        { action: 'setSort', sort: [{ col: 'cost', dir: 'desc' }] },
      ],
      explain: 'Show only resources costing more than $1,000 a month.',
    }),
  },
  {
    match: ['group', 'service', 'breakdown', 'by team'],
    reply: JSON.stringify({
      actions: [
        { action: 'groupBy', columns: ['service'] },
        { action: 'setSort', sort: [{ col: 'cost', dir: 'desc' }] },
        { action: 'hideColumns', columns: ['resource'] },
      ],
      explain: 'Group by service, sort by cost and hide the resource names.',
    }),
  },
];

// The stand-in for a real ask. Its signature matches: it is handed the prompt,
// the generated schema and the assembled message, and returns a string.
const ask = (req: any) => {
  const text = String(req.prompt || '').toLowerCase();
  const scene = scenes.find((s) => s.match.some((w) => text.includes(w)));
  const noAnswer = JSON.stringify({ actions: [], explain: 'No answer for that request.' });
  return new Promise((resolve) => {
    setTimeout(() => resolve(scene ? scene.reply : noAnswer), 500);
  });
};

const columns = [
  { field: 'account', title: 'Account', filter: { type: 'set' } },
  { field: 'service', title: 'Service', filter: { type: 'set' } },
  { field: 'resource', title: 'Resource', layout: { flex: 1, min: 200, max: 320 } },
  { field: 'region', title: 'Region', filter: { type: 'set' } },
  { field: 'environment', title: 'Env', filter: { type: 'set' },
    cell: { decoration: 'pill', variant: { map: {
      prod: 'danger', 'prod-2': 'danger', 'definitely-prod': 'danger',
      staging: 'warning', untagged: 'warning', test: 'info',
      dev: 'success', 'not-prod': 'neutral',
    } } } },
  { field: 'change', title: 'Change', type: 'number',
    layout: { width: 140, min: 140 }, format: { style: 'percent', decimals: 1 } },
  { field: 'cost', title: 'Monthly cost', type: 'number', layout: { width: 170 },
    format: { style: 'currency', currency: 'USD', decimals: 2 }, total: 'sum' },
];

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [LatticeGridComponent],
  template: '<lattice-grid [config]="grid" style="display:block;height:540px"></lattice-grid>',
})
export class AppComponent implements AfterViewInit {
  @ViewChild(LatticeGridComponent) gridRef!: LatticeGridComponent;

  grid = {
    rowKey: 'id',
    selection: 'multiple',
    toolPanel: { side: 'left',
      panels: ['columns', 'filters', 'views', 'quick'],
      actions: ['undo', 'redo', 'export', 'restore', 'maximise'],
      exportName: 'lattice-demo' },
    columns,
    rows: [/* cloud-cost records: account, service, resource, region, environment, change, cost */],
    ai: {
      ask,
      // No element given, so the prompt bar mounts at the top of the grid's own
      // viewport.
      placeholder: 'Ask for a view: "production only, most expensive first"',
      schemaOptions: { maxOptions: 12 },
    },
  };

  // The schema is what leaves the grid on an ask, and the tool is how it is
  // offered to a model with tool calling. Both are read from the live grid,
  // nothing is sent. A reply is validated against the schema before you see it,
  // and nothing reaches the grid until you press Apply.
  ngAfterViewInit() {
    const grid = this.gridRef.grid;
    const schema = grid.ai.schema({ maxOptions: 12 });
    const tool = grid.ai.tool();
    grid.promptBar.ask('production only, most expensive first');
  }
}

bootstrapApplication(AppComponent);