Build and open your first web app

  created src/apps/ops-dashboard/app.ts
  created src/apps/ops-dashboard/web/index.html
  created src/apps/ops-dashboard/web/package.json
  …
  updated src/index.ts                     webApps: [opsDashboard]
  updated tsconfig.json                    exclude: "src/apps/*/web"

✅ Web app ops-dashboard created

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

const Ticket = z.object({
  id: z.string(),
  title: z.string(),
  createdBy: z.string(),
  createdAt: z.string(),
});

export default defineWebApp({
  name: 'ops-dashboard',
  description: 'Tickets for the team',
  pages: {
    root: './web',
    nav: [{ path: '/', label: 'Tickets' }],
  },
  routes: {
    'GET /tickets': route({
      description: 'Lists the newest tickets',
      responses: { 200: z.object({ items: z.array(Ticket) }) },
      handler: async () => {
        const page = await Data.get('tickets', {}, 1, 20);
        return { items: page.data.map((entry) => ({ id: entry.id, ...entry.data })) };
      },
    }),

    'POST /tickets': route({
      description: 'Opens a ticket as the signed-in person',
      body: z.object({ title: z.string().trim().min(1).max(200) }),
      handler: async ({ body, auth }) => {
        const fields = {
          title: body.title,
          createdBy: auth.name ?? auth.email ?? auth.userId,
          createdAt: new Date().toISOString(),
        };
        const entry = await Data.create('tickets', fields, body.title);
        return json({ id: entry.id, ...fields }, 201);
      },
    }),
  },
});

✅ Compiled 2 primitives (1 agent, 1 web-app) in 397ms

import { useEffect, useState, type FormEvent } from 'react';
import { lua } from '@lua-ai-global/app-client';
import { Button } from '@lua-ai-global/ui/button';
import { Card } from '@lua-ai-global/ui/card';
import { Input } from '@lua-ai-global/ui/input';

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

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

  const load = () => {
    lua
      .api<{ items: Ticket[] }>('GET', '/tickets')
      .then((r) => setTickets(r.items))
      .catch((e: Error) => setError(e.message));
  };
  useEffect(load, []);

  const add = async (event: FormEvent) => {
    event.preventDefault();
    try {
      await lua.api('POST', '/tickets', { title });
      setTitle('');
      load();
    } catch (e) {
      setError((e as Error).message);
    }
  };

  return (
    <main className="min-h-screen bg-background p-6 text-foreground">
      <Card className="mx-auto max-w-md space-y-4 p-6">
        <h1 className="text-lg font-semibold">{lua.appName}</h1>
        <form className="flex gap-2" onSubmit={add}>
          <Input value={title} onChange={(e) => setTitle(e.target.value)} placeholder="New ticket" />
          <Button type="submit" disabled={!title.trim()}>Add</Button>
        </form>
        {error && <p className="text-sm text-destructive">{error}</p>}
        <ul className="space-y-1">
          {tickets.map((t) => (
            <li key={t.id}>
              {t.title} <span className="text-muted-foreground">· {t.createdBy}</span>
            </li>
          ))}
        </ul>
      </Card>
    </main>
  );
}

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';

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();