@parlor/scaffold 0.0.0-stage → 0.2.0

package/templates/default/src/agent/agent.css

@@ -0,0 +1,5 @@
+@media (min-width: 64rem) {
+  body:has(> [data-agent-sidebar]:not([hidden])) {
+    padding-right: 28rem;
+  }
+}

package/templates/default/src/agent/confirmation-card.tsx

@@ -0,0 +1,42 @@
+import { type AgentConfirmation, Chat } from "@parlor/client/react";
+import type { MouseEvent } from "react";
+
+export function focusComposer(event: MouseEvent<HTMLElement>) {
+  event.currentTarget.closest("section")?.querySelector("textarea")?.focus();
+}
+
+export function ConfirmationCard({
+  confirmation,
+}: {
+  readonly confirmation: AgentConfirmation;
+}) {
+  const agent = confirmation.origin.name ?? "An agent";
+  return (
+    <Chat.Confirm
+      confirmation={confirmation}
+      className="space-y-2 rounded-lg border border-amber-300 bg-amber-50 p-3 text-sm"
+    >
+      <Chat.ConfirmLabel>
+        <strong>{agent}</strong> wants to run <code>{confirmation.action}</code>
+      </Chat.ConfirmLabel>
+      <p>{confirmation.description}</p>
+      <details>
+        <summary className="cursor-pointer text-zinc-500">Details</summary>
+        <pre className="mt-1 overflow-x-auto text-xs">
+          {JSON.stringify(confirmation.input, null, 2)}
+        </pre>
+      </details>
+      <div className="flex gap-2">
+        <Chat.Approve
+          onClick={focusComposer}
+          className="rounded-md bg-zinc-900 px-3 py-1 font-medium text-white"
+        >
+          Approve
+        </Chat.Approve>
+        <Chat.Decline onClick={focusComposer} className="rounded-md border px-3 py-1">
+          Decline
+        </Chat.Decline>
+      </div>
+    </Chat.Confirm>
+  );
+}

package/templates/default/src/agent/sidebar-view.ts

@@ -0,0 +1,36 @@
+import { useSyncExternalStore } from "react";
+
+export interface SidebarView {
+  readonly open: boolean;
+  readonly threadId: string | undefined;
+}
+
+export interface SidebarViewStore {
+  subscribe(listener: () => void): () => void;
+  get(): SidebarView;
+  set(patch: Partial<SidebarView>): void;
+}
+
+export function createSidebarViewStore(): SidebarViewStore {
+  const listeners = new Set<() => void>();
+  let view: SidebarView = { open: false, threadId: undefined };
+  return {
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+    get: () => view,
+    set(patch) {
+      const next = { ...view, ...patch };
+      if (next.open === view.open && next.threadId === view.threadId) return;
+      view = next;
+      for (const listener of listeners) listener();
+    },
+  };
+}
+
+export const sidebarView = createSidebarViewStore();
+
+export function useSidebarView(): SidebarView {
+  return useSyncExternalStore(sidebarView.subscribe, sidebarView.get, sidebarView.get);
+}

package/templates/default/src/agent/views.ts

@@ -0,0 +1,9 @@
+import { defineAgentView } from "@parlor/client";
+import * as z from "zod/mini";
+
+export const agentPanel = defineAgentView({
+  name: "agentPanel",
+  description:
+    "The agent sidebar: the chat with the user's agent and the requests waiting for the user's approval. Read-only; it says whether the sidebar is open.",
+  schema: z.object({ open: z.boolean() }),
+});

package/templates/default/src/app.css

@@ -0,0 +1 @@
+@import "tailwindcss";

package/templates/default/src/header-actions.tsx

@@ -0,0 +1,9 @@
+import { AgentButton } from "./agent/agent-button.js";
+
+export function HeaderActions() {
+  return (
+    <div className="flex items-center gap-2">
+      <AgentButton />
+    </div>
+  );
+}

package/templates/default/src/main.tsx

@@ -0,0 +1,27 @@
+import { createActionClient } from "@parlor/client";
+import { FrameworkProvider } from "@parlor/client/react";
+import { createParlorRouter, mount } from "@parlor/client/router";
+import { RouterProvider } from "@tanstack/react-router";
+import { StrictMode } from "react";
+
+import { routeTree } from "./routeTree.gen.js";
+
+const client = createActionClient();
+const router = createParlorRouter({ routeTree, client });
+
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: typeof router;
+  }
+}
+
+mount(document.getElementById("root")!, {
+  router,
+  element: (
+    <StrictMode>
+      <FrameworkProvider client={client} router={router}>
+        <RouterProvider router={router} />
+      </FrameworkProvider>
+    </StrictMode>
+  ),
+});

package/templates/default/src/parlor.d.ts

@@ -0,0 +1,9 @@
+import type { ActionsOf } from "@parlor/core/registry";
+
+import type { registry } from "../actions/index.js";
+
+declare module "@parlor/client" {
+  interface Register {
+    actions: ActionsOf<typeof registry>;
+  }
+}

package/templates/default/src/routeTree.gen.ts

@@ -0,0 +1,59 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from "./routes/__root";
+import { Route as IndexRouteImport } from "./routes/index";
+
+const IndexRoute = IndexRouteImport.update({
+  id: "/",
+  path: "/",
+  getParentRoute: () => rootRouteImport,
+} as any);
+
+export interface FileRoutesByFullPath {
+  "/": typeof IndexRoute;
+}
+export interface FileRoutesByTo {
+  "/": typeof IndexRoute;
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport;
+  "/": typeof IndexRoute;
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath;
+  fullPaths: "/";
+  fileRoutesByTo: FileRoutesByTo;
+  to: "/";
+  id: "__root__" | "/";
+  fileRoutesById: FileRoutesById;
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute;
+}
+
+declare module "@tanstack/react-router" {
+  interface FileRoutesByPath {
+    "/": {
+      id: "/";
+      path: "/";
+      fullPath: "/";
+      preLoaderRoute: typeof IndexRouteImport;
+      parentRoute: typeof rootRouteImport;
+    };
+  }
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+};
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>();

package/templates/default/src/routes/__root.tsx

@@ -0,0 +1,29 @@
+import type { ParlorRouterContext } from "@parlor/client/router";
+import { createRootRouteWithContext, Link, Outlet } from "@tanstack/react-router";
+
+import { agentPanel } from "../agent/views.js";
+import { HeaderActions } from "../header-actions.js";
+
+export const Route = createRootRouteWithContext<ParlorRouterContext>()({
+  staticData: {
+    description: "The app shell: a header with the agent button, then the page.",
+    views: [agentPanel],
+  },
+  component: Layout,
+});
+
+function Layout() {
+  return (
+    <div className="min-h-dvh bg-zinc-50 text-zinc-900">
+      <header className="flex items-center justify-between border-b border-zinc-200 bg-white px-6 py-3">
+        <Link to="/" className="font-semibold tracking-tight">
+          Todos
+        </Link>
+        <HeaderActions />
+      </header>
+      <main className="mx-auto max-w-2xl px-6 py-10">
+        <Outlet />
+      </main>
+    </div>
+  );
+}

package/templates/default/src/routes/index.tsx

@@ -0,0 +1,141 @@
+import { defineAgentView } from "@parlor/client";
+import {
+  ensureActionQueryData,
+  useActionMutation,
+  useActionSuspenseQuery,
+  useAgentView,
+} from "@parlor/client/react";
+import { createFileRoute } from "@tanstack/react-router";
+import { type FormEvent, useState } from "react";
+import * as z from "zod/mini";
+
+const todoView = defineAgentView({
+  name: "todo",
+  description: "A todo. The key is the todo id that toggleTodo and deleteTodo take.",
+  keyed: true,
+  schema: z.object({ title: z.string(), done: z.boolean() }),
+});
+
+const newTodoView = defineAgentView({
+  name: "newTodo",
+  description: "The New todo field. Fill it in for the user; they press Add themselves.",
+  schema: z.object({ title: z.string() }),
+  writable: true,
+});
+
+export const Route = createFileRoute("/")({
+  staticData: {
+    description: "The todo list: add a todo, check it off, or delete it.",
+    views: [newTodoView, todoView],
+  },
+  loader: ({ context }) => ensureActionQueryData(context, "listTodos", {}),
+  component: Todos,
+});
+
+interface Todo {
+  readonly id: string;
+  readonly title: string;
+  readonly done: boolean;
+}
+
+function Todos() {
+  const { data: todos } = useActionSuspenseQuery("listTodos", {});
+  const toggle = useActionMutation("toggleTodo");
+  const remove = useActionMutation("deleteTodo");
+
+  return (
+    <section className="space-y-6">
+      <h1 className="text-2xl font-semibold tracking-tight">Todos</h1>
+      <NewTodo />
+      {todos.length === 0 ? (
+        <p className="text-sm text-zinc-500">
+          Nothing yet. Add a todo, or ask the agent to.
+        </p>
+      ) : null}
+      <ul
+        data-testid="todos"
+        className="divide-y divide-zinc-200 rounded-lg border border-zinc-200 bg-white empty:hidden"
+      >
+        {todos.map((todo) => (
+          <TodoRow
+            key={todo.id}
+            todo={todo}
+            onToggle={() => toggle.mutate({ id: todo.id })}
+            onDelete={() => remove.mutate({ id: todo.id })}
+          />
+        ))}
+      </ul>
+    </section>
+  );
+}
+
+function TodoRow({
+  todo,
+  onToggle,
+  onDelete,
+}: {
+  readonly todo: Todo;
+  readonly onToggle: () => void;
+  readonly onDelete: () => void;
+}) {
+  const { ref } = useAgentView(todoView, {
+    key: todo.id,
+    get: () => ({ title: todo.title, done: todo.done }),
+  });
+  return (
+    <li ref={ref} className="flex items-center gap-3 px-4 py-3">
+      <input
+        type="checkbox"
+        className="size-4 accent-zinc-900"
+        checked={todo.done}
+        aria-label={`Done: ${todo.title}`}
+        onChange={onToggle}
+      />
+      <span className={todo.done ? "flex-1 text-zinc-400 line-through" : "flex-1"}>
+        {todo.title}
+      </span>
+      <button
+        type="button"
+        className="text-sm text-zinc-500 hover:text-red-600"
+        onClick={onDelete}
+      >
+        Delete
+      </button>
+    </li>
+  );
+}
+
+function NewTodo() {
+  const [title, setTitle] = useState("");
+  const { ref } = useAgentView(newTodoView, {
+    get: () => ({ title }),
+    set: (value) => setTitle(value.title),
+  });
+  const add = useActionMutation("addTodo", { onSuccess: () => setTitle("") });
+
+  const submit = (event: FormEvent) => {
+    event.preventDefault();
+    if (title.trim()) add.mutate({ title });
+  };
+
+  return (
+    <form ref={ref} onSubmit={submit} className="flex gap-2">
+      <input
+        name="title"
+        aria-label="New todo"
+        placeholder="What needs to be done?"
+        autoComplete="off"
+        value={title}
+        onChange={(event) => setTitle(event.target.value)}
+        className="flex-1 rounded-md border border-zinc-300 bg-white px-3 py-2 focus:border-zinc-900 focus:outline-none"
+      />
+      <button
+        type="submit"
+        disabled={add.isPending}
+        className="rounded-md bg-zinc-900 px-4 py-2 font-medium text-white hover:bg-zinc-700 disabled:opacity-50"
+      >
+        Add
+      </button>
+    </form>
+  );
+}

package/templates/default/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@parlor/config/tsconfig",
+  "compilerOptions": {
+    "noEmit": true,
+    "types": ["node", "vite/client"]
+  },
+  "include": ["*.ts", "actions", "schema", "src"]
+}

package/templates/default/vitest.config.ts

@@ -0,0 +1,5 @@
+import { defineProject } from "vitest/config";
+
+export default defineProject({
+  test: { include: ["actions/**/*.spec.ts", "src/**/*.spec.ts"], testTimeout: 30_000 },
+});