Write routes and pages for a web app

import { LuaAgent } from 'lua-cli';
import opsDashboard from './apps/ops-dashboard/app';

export const agent = new LuaAgent({
  name: 'Ops dashboard example',
  persona: 'You help the operations team keep track of their work.',
  webApps: [opsDashboard],
});

import { Data, defineWebApp, env, json, route } from 'lua-cli';
import { z } from 'zod';

export default defineWebApp({
  name: 'ops-dashboard',
  pages: { root: './web', nav: [{ path: '/', label: 'Tickets' }] },
  routes: {
    'GET /tickets': route({
      description: 'Lists tickets with one status',
      query: z.object({ status: z.enum(['open', 'closed']).default('open') }),
      handler: async ({ query }) => {
        const page = await Data.get('tickets', { status: query.status ?? 'open' }, 1, 50);
        return { items: page.data.map((entry) => ({ id: entry.id, ...entry.data })) };
      },
    }),

    'POST /tickets/:id/close': route({
      description: 'Closes a ticket and records who closed it',
      params: z.object({ id: z.string().min(1) }),
      body: z.object({ note: z.string().max(500).optional() }),
      responses: {
        204: z.undefined().describe('Closed; no body'),
        404: z.object({ message: z.string() }),
      },
      handler: async ({ params, body, auth }) => {
        try {
          await Data.getEntry('tickets', params.id);
        } catch {
          return json({ message: `No ticket ${params.id}` }, 404);
        }
        await Data.patch('tickets', params.id, {
          set: { status: 'closed', closedBy: auth.userId, note: body.note ?? null },
        });
        return json(undefined, 204);
      },
    }),

    'GET /status': route({
      description: 'Checks the ticketing backend',
      handler: async () => {
        const res = await fetch(`${env('TICKETS_API_URL')}/health`);
        return { ok: res.ok };
      },
    }),
  },
});

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { lua } from '@lua-ai-global/app-client';
import { App } from './App';
import './index.css';

// Follow the shell's theme: first the one the app opened with, then every change.
document.documentElement.classList.toggle('dark', lua.theme === 'dark');
lua.onInit((init) => document.documentElement.classList.toggle('dark', init.theme === 'dark'));

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>
);
void lua.start();

import { useEffect, useState } from 'react';
import { lua, LuaApiError } from '@lua-ai-global/app-client';

interface Ticket {
  id: string;
  title: string;
}

export function App() {
  const [tickets, setTickets] = useState<Ticket[]>([]);
  const [error, setError] = useState<string>();

  useEffect(() => {
    lua
      .api<{ items: Ticket[] }>('GET', '/tickets?status=open')
      .then((r) => setTickets(r.items))
      .catch((e) => setError(e instanceof LuaApiError ? `${e.message} (${e.status})` : String(e)));
  }, []);

  const close = (id: string) => lua.api('POST', `/tickets/${encodeURIComponent(id)}/close`, { note: 'Done' });

  return (
    <ul>
      {error && <li>{error}</li>}
      {tickets.map((t) => (
        <li key={t.id}>
          {t.title} <button onClick={() => close(t.id)}>Close</button>
        </li>
      ))}
    </ul>
  );
}