@parlor/scaffold 0.0.0-stage → 0.2.0

package/templates/default/actions/index.ts

@@ -0,0 +1,58 @@
+import { ActionError, defineAction } from "@parlor/core";
+import { createRegistry } from "@parlor/core/registry";
+import { and, asc, eq } from "drizzle-orm";
+import { z } from "zod";
+
+import { todos } from "../schema/index.js";
+
+const mine = (id: string, scope: string) => and(eq(todos.id, id), eq(todos.scope, scope));
+
+export const registry = createRegistry({
+  listTodos: defineAction({
+    description: "List the todos, oldest first.",
+    input: z.object({}),
+    reads: [todos],
+    run: (_, { db, scope }) =>
+      db.select().from(todos).where(eq(todos.scope, scope)).orderBy(asc(todos.createdAt)),
+  }),
+  addTodo: defineAction({
+    description: "Add a todo.",
+    input: z.object({
+      title: z.string().trim().min(1).describe("What needs to be done"),
+    }),
+    writes: [todos],
+    run: async ({ title }, { db, scope }) => {
+      const [todo] = await db
+        .insert(todos)
+        .values({ id: crypto.randomUUID(), scope, title })
+        .returning();
+      return todo;
+    },
+  }),
+  toggleTodo: defineAction({
+    description: "Mark a todo done, or not done again.",
+    input: z.object({ id: z.string() }),
+    writes: [todos],
+    run: async ({ id }, { db, scope }) => {
+      const [current] = await db.select().from(todos).where(mine(id, scope));
+      if (!current) throw new ActionError("not_found", `No todo ${id}`);
+      const [todo] = await db
+        .update(todos)
+        .set({ done: !current.done })
+        .where(mine(id, scope))
+        .returning();
+      return todo;
+    },
+  }),
+  deleteTodo: defineAction({
+    description: "Delete a todo.",
+    input: z.object({ id: z.string() }),
+    writes: [todos],
+    confirm: true,
+    run: async ({ id }, { db, scope }) => {
+      const [todo] = await db.delete(todos).where(mine(id, scope)).returning();
+      if (!todo) throw new ActionError("not_found", `No todo ${id}`);
+      return todo;
+    },
+  }),
+});

package/templates/default/actions/todos.spec.ts

@@ -0,0 +1,38 @@
+import { fileURLToPath } from "node:url";
+
+import { createActionClient } from "@parlor/client";
+import type { ActionsOf } from "@parlor/core/registry";
+import { createDatabase } from "@parlor/data";
+import { createServer } from "@parlor/server";
+import { afterEach, expect, test } from "vitest";
+
+import { registry } from "./index.js";
+
+const servers: { close(): Promise<void> }[] = [];
+
+afterEach(async () => {
+  await Promise.all(servers.splice(0).map((server) => server.close()));
+});
+
+async function startApp() {
+  const database = await createDatabase({
+    dataDir: "memory://",
+    migrationsFolder: fileURLToPath(new URL("../migrations", import.meta.url)),
+  });
+  const server = createServer({ actions: registry, database });
+  servers.push(server);
+  return createActionClient<ActionsOf<typeof registry>>({
+    baseUrl: "http://app.test",
+    fetch: (input, init) => server.fetch(new Request(input, init)),
+  });
+}
+
+test("a todo added through its action is in the list, not done", async () => {
+  const app = await startApp();
+
+  await app.call("addTodo", { title: "Buy milk" });
+
+  expect(await app.call("listTodos", {})).toMatchObject([
+    { title: "Buy milk", done: false },
+  ]);
+});

package/templates/default/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="data:," />
+    <link rel="stylesheet" href="/src/app.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/default/migrations/0000_init.sql

@@ -0,0 +1,9 @@
+CREATE TABLE "todos" (
+	"id" text PRIMARY KEY NOT NULL,
+	"scope" text DEFAULT 'default' NOT NULL,
+	"title" text NOT NULL,
+	"done" boolean DEFAULT false NOT NULL,
+	"created_at" timestamp with time zone DEFAULT now() NOT NULL
+);
+--> statement-breakpoint
+CREATE INDEX "todos_scope_created_at_idx" ON "todos" USING btree ("scope","created_at");

package/templates/default/migrations/meta/0000_snapshot.json

@@ -0,0 +1,87 @@
+{
+  "id": "d877853a-ee64-4c03-9a26-1c6dc29be490",
+  "prevId": "00000000-0000-0000-0000-000000000000",
+  "version": "7",
+  "dialect": "postgresql",
+  "tables": {
+    "public.todos": {
+      "name": "todos",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "scope": {
+          "name": "scope",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'default'"
+        },
+        "title": {
+          "name": "title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "done": {
+          "name": "done",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {
+        "todos_scope_created_at_idx": {
+          "name": "todos_scope_created_at_idx",
+          "columns": [
+            {
+              "expression": "scope",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "created_at",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    }
+  },
+  "enums": {},
+  "schemas": {},
+  "sequences": {},
+  "roles": {},
+  "policies": {},
+  "views": {},
+  "_meta": {
+    "columns": {},
+    "schemas": {},
+    "tables": {}
+  }
+}

package/templates/default/migrations/meta/_journal.json

@@ -0,0 +1,13 @@
+{
+  "version": "7",
+  "dialect": "postgresql",
+  "entries": [
+    {
+      "idx": 0,
+      "version": "7",
+      "when": 1792687346970,
+      "tag": "0000_init",
+      "breakpoints": true
+    }
+  ]
+}

package/templates/default/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "parlor-template-default",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "parlor dev",
+    "build": "parlor build",
+    "typecheck": "parlor typegen && tsc --noEmit",
+    "test": "vitest run",
+    "db:generate": "parlor db generate",
+    "db:migrate": "parlor db migrate"
+  },
+  "dependencies": {
+    "@parlor/chat": "workspace:*",
+    "@parlor/client": "workspace:*",
+    "@parlor/core": "workspace:*",
+    "@parlor/data": "workspace:*",
+    "@parlor/server": "workspace:*",
+    "@tanstack/react-query": "catalog:",
+    "@tanstack/react-router": "catalog:",
+    "drizzle-orm": "^0.45.4",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "uqr": "^0.1.3",
+    "zod": "catalog:"
+  },
+  "devDependencies": {
+    "@parlor/agent-host": "workspace:*",
+    "@parlor/cli": "workspace:*",
+    "@parlor/config": "workspace:*",
+    "@tailwindcss/vite": "^4.3.3",
+    "@types/node": "catalog:",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "tailwindcss": "^4.3.3",
+    "typescript": "catalog:",
+    "vite": "catalog:",
+    "vitest": "catalog:"
+  },
+  "engines": {
+    "node": ">=24"
+  }
+}

package/templates/default/parlor.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "@parlor/config";
+import tailwindcss from "@tailwindcss/vite";
+
+export default defineConfig({
+  app: {
+    id: "com.example.parlorapp",
+    name: "Parlor App",
+  },
+  vite: {
+    plugins: [tailwindcss()],
+  },
+});

package/templates/default/schema/index.ts

@@ -0,0 +1 @@
+export { todos } from "./todos.js";

package/templates/default/schema/todos.ts

@@ -0,0 +1,13 @@
+import { boolean, index, pgTable, text, timestamp } from "drizzle-orm/pg-core";
+
+export const todos = pgTable(
+  "todos",
+  {
+    id: text("id").primaryKey(),
+    scope: text("scope").notNull().default("default"),
+    title: text("title").notNull(),
+    done: boolean("done").notNull().default(false),
+    createdAt: timestamp("created_at", { withTimezone: true }).notNull().defaultNow(),
+  },
+  (table) => [index("todos_scope_created_at_idx").on(table.scope, table.createdAt)],
+);

package/templates/default/server.ts

@@ -0,0 +1,13 @@
+import { chat } from "@parlor/chat/server";
+import { createDatabase } from "@parlor/data";
+import { createServer } from "@parlor/server";
+
+import { registry } from "./actions/index.js";
+
+const database = await createDatabase({ migrationsFolder: "migrations" });
+
+export default createServer({
+  actions: registry,
+  database,
+  plugins: [chat()],
+});

package/templates/default/src/agent/agent-button.tsx

@@ -0,0 +1,120 @@
+import { useAgentConfirmations, useAgentView } from "@parlor/client/react";
+import {
+  lazy,
+  startTransition,
+  Suspense,
+  useCallback,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+} from "react";
+import { createPortal } from "react-dom";
+
+import "./agent.css";
+import { sidebarView } from "./sidebar-view.js";
+import { agentPanel } from "./views.js";
+
+const AgentSidebar = lazy(() => import("./agent-sidebar.js"));
+
+export function AgentButton() {
+  const regionId = useId();
+  const titleId = useId();
+  const button = useRef<HTMLButtonElement | null>(null);
+  const region = useRef<HTMLElement | null>(null);
+  const [open, setOpen] = useState(false);
+  const [everOpened, setEverOpened] = useState(false);
+  const pending = useAgentConfirmations().length;
+  const { ref } = useAgentView(agentPanel, { get: () => ({ open }) });
+  const attach = useCallback(
+    (element: HTMLElement | null) => {
+      region.current = element;
+      ref(element);
+    },
+    [ref],
+  );
+
+  useEffect(() => {
+    if (open) region.current?.querySelector("textarea")?.focus();
+  }, [open]);
+  useEffect(() => {
+    sidebarView.set({ open });
+    return () => sidebarView.set({ open: false });
+  }, [open]);
+  useEffect(() => {
+    if (!open) return;
+    const dismiss = (event: KeyboardEvent) => {
+      if (event.key !== "Escape" || event.defaultPrevented || event.isComposing) return;
+      const focus = document.activeElement;
+      const inside =
+        focus === document.body ||
+        focus === button.current ||
+        region.current?.contains(focus);
+      if (!inside) return;
+      event.preventDefault();
+      setOpen(false);
+      button.current?.focus();
+    };
+    document.addEventListener("keydown", dismiss);
+    return () => document.removeEventListener("keydown", dismiss);
+  }, [open]);
+
+  const toggle = () => {
+    startTransition(() => {
+      setOpen(!open);
+      setEverOpened(true);
+    });
+  };
+  const close = () => {
+    setOpen(false);
+    button.current?.focus();
+  };
+
+  return (
+    <>
+      <button
+        ref={button}
+        type="button"
+        aria-expanded={open}
+        aria-controls={regionId}
+        aria-label={pending > 0 ? `Agent, ${pending} pending` : undefined}
+        onClick={toggle}
+        className="inline-flex items-center gap-2 rounded-md border border-zinc-300 bg-white px-3 py-1.5 text-sm font-medium hover:bg-zinc-100 aria-expanded:bg-zinc-900 aria-expanded:text-white"
+      >
+        Agent
+        {pending > 0 ? (
+          <span className="rounded-full bg-amber-500 px-1.5 text-xs text-white">
+            {pending}
+          </span>
+        ) : null}
+      </button>
+      {createPortal(
+        <section
+          id={regionId}
+          ref={attach}
+          aria-labelledby={titleId}
+          data-agent-sidebar
+          hidden={!open}
+          className="fixed inset-y-0 right-0 z-50 flex w-full max-w-md flex-col border-l border-zinc-200 bg-white shadow-xl"
+        >
+          <header className="flex items-center justify-between border-b border-zinc-200 px-4 py-3">
+            <h2 id={titleId} className="font-semibold">
+              Agent
+            </h2>
+            <button
+              type="button"
+              onClick={close}
+              className="rounded-md px-2 py-1 text-sm text-zinc-600 hover:bg-zinc-100"
+            >
+              Close
+            </button>
+          </header>
+          <Suspense fallback={<p className="p-4 text-sm text-zinc-500">Loading...</p>}>
+            {everOpened ? <AgentSidebar /> : null}
+          </Suspense>
+        </section>,
+        document.body,
+      )}
+    </>
+  );
+}