Skip to content

Add scripts CRUD UI and Storybook coverage - #12

Merged
kamath merged 3 commits into
mainfrom
script-crud-frontend
Jul 26, 2026
Merged

Add scripts CRUD UI and Storybook coverage#12
kamath merged 3 commits into
mainfrom
script-crud-frontend

Conversation

@kamath

@kamath kamath commented Jul 26, 2026

Copy link
Copy Markdown
Collaborator

Summary

  • Adds a scripts CRUD homepage (list, create, edit, run, delete) wired to the API via React Query hooks and Jotai state.
  • Sets up Storybook with atom stories for the full UI component set.
  • Adds molecule stories for AI Elements (Message, Conversation, Tool, CodeBlock).

Test plan

  • Open the homepage and create, edit, run, and delete a script
  • Run pnpm storybook in apps/frontend and spot-check atoms + molecules
  • Confirm React Query + Jotai providers wrap the app without console errors

Made with Cursor

kamath and others added 3 commits July 26, 2026 01:04
Wire the homepage to create, edit, run, and delete scripts against the API, and document the design system in Storybook.

Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
The homepage was one card with a table and a modal editor. It is now a
workbench: a rail of stored scripts, real routes, and a pane whose job depends
on where you are.

Writing is gone from the UI. Storing a script means validating it against the
catalog and keeping it only if it checks, and the agent already does that in one
turn through `/api/mcp` — a form here was a second, worse way to reach the same
routes, so `/chat` is the only authoring path and the empty state says so. That
took the editor, the diagnostics list, `useUpsertScript`, `useValidateScript` and
most of `atoms.ts` with it.

Routes replace the state machine. A pathless `_workbench` layout mounts the rail
and the delete dialog once, so `/`, `/scripts/$name` and `/chat` each own a pane
and nothing flickers between them. The script route reads through `useScript`
rather than the list, so a deep link works cold, and it accepts an id as well as
a name because the API resolves both. Deleting the script the URL names
navigates away from it.

A script's page is its run screen: the contract and the method sit behind a
sheet, because the report is the only thing on that page a stored row cannot
already tell you. Schemas are shown as the JSON Schema they are.

`GET /api/scripts` now derives `authorization` per declared toolkit: the granted
tools, their union of OAuth scopes, and whether any of them needs an account at
all. The scopes were already mirrored in `tools.requirements`, never read. Three
states have to stay distinct — a toolkit declared and never called authorizes
nothing, `Math` needs no account, and Github demands one while declaring no
scopes per tool — so `requiresAuth` is not `scopes.length > 0`. Hovering a
toolkit on the run screen is what makes least privilege visible: two Gmail calls
out of thirty tools ask for `gmail.readonly` and nothing else.

Storybook keeps up: a `layouts` collection for the shell and the panes, plus
molecules for the rail, the report, the metadata band and the scope badges, all
driven by fixtures so every state — loading, empty, drifted, unauthorized — is
reachable without a client. `panes.test.tsx` server-renders the panes and asserts
what a reader sees, including that nothing offers to write a script.

Co-Authored-By: Claude <noreply@anthropic.com>
@kamath
kamath merged commit bc4ff45 into main Jul 26, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant