feat(studio): spec-driven package create/edit/view form in a modal (#2535)

* feat(studio): spec-driven package create/edit/view form in a modal

Package create/edit/view were three hand-rolled forms (CreatePackageDialog,
EditPackageDialog, BuilderLanding's inline form) with two different
id-validation regexes — a package created on one surface was rejected by
another, and neither matched what the server accepts. Replace them with ONE
modal (PackageFormDialog) that renders the manifest form from the spec
(ManifestSchema → z.toJSONSchema → SchemaForm), mirroring the existing
page-schema / view-schema pattern.

- package-schema.ts: spec-derived JSONSchema + a curated FormView (Basics +
  collapsible Advanced). id/type/namespace/scope are `immutable` — editable on
  create, locked on edit (the REST PATCH only persists name/description/version).
- PackageFormDialog: create → POST, edit → PATCH, view → readOnly. Duplicate
  409 maps to a friendly "already exists" message. Create sends NO scope, so a
  runtime-created base stays writable (not 只读).
- CreatePackageDialog / EditPackageDialog kept as thin wrappers so call sites
  (ResourceListPage, the Studio switcher) don't change; BuilderLanding's inline
  form now opens the dialog; PackageDetailSheet gains a "View info" (readOnly
  spec form) action.

Net −254 lines (three forms collapse into one spec-driven component).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

* fix(studio): port namespace field into the spec-form create dialog

The merge with main brought in CreatePackageDialog.namespace.test.tsx
(framework#2694), which targeted the old hand-rolled form's test ids and broke
now that CreatePackageDialog renders the spec form. PackageFormDialog already
auto-derives namespace from the id and gates submit on NAMESPACE_RE; this adds
keystroke sanitization (lowercase + allowed alphabet) to match the old field,
and rewrites the test to target the spec form by label.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

---------

Co-authored-by: Jack Zhuang <277994282+os-zhuang@users.noreply.github.com>
Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

Author: os-zhuang

packages/app-shell/src/views/metadata-admin/CreatePackageDialog.namespace.test.tsx

@@ -2,9 +2,13 @@
 
 /**
  * Wiring guard for the package-namespace field (framework#2694) in the
- * package-switcher "+ new" dialog: it defaults to the id-derived namespace,
- * tracks the id input until the user edits it, and gates submit on a valid
- * `^[a-z][a-z0-9_]{1,19}$` value.
+ * spec-driven create dialog (`CreatePackageDialog` → `PackageFormDialog`): it
+ * defaults to the id-derived namespace, tracks the id input until the user
+ * edits it, sanitizes keystrokes to the allowed alphabet, and gates submit on a
+ * valid `^[a-z][a-z0-9_]{1,19}$` value.
+ *
+ * The form is now rendered from the manifest spec via SchemaForm, so fields are
+ * targeted by their label rather than the old hand-rolled test ids.
  */
 import '@testing-library/jest-dom/vitest';
 import * as React from 'react';
@@ -17,13 +21,14 @@ afterEach(cleanup);
 function open() {
   render(<CreatePackageDialog open onOpenChange={vi.fn()} onCreated={vi.fn()} />);
   return {
-    id: screen.getByTestId('package-id-input') as HTMLInputElement,
-    ns: screen.getByTestId('package-namespace-input') as HTMLInputElement,
-    name: screen.getByTestId('package-name-input') as HTMLInputElement,
+    id: screen.getByLabelText(/package id/i) as HTMLInputElement,
+    ns: screen.getByLabelText(/object namespace/i) as HTMLInputElement,
+    name: screen.getByLabelText(/display name/i) as HTMLInputElement,
+    submit: screen.getByTestId('package-form-submit') as HTMLButtonElement,
   };
 }
 
-describe('CreatePackageDialog — namespace field', () => {
+describe('CreatePackageDialog — namespace field (spec form)', () => {
   it('derives the namespace from the package id and tracks it', () => {
     const { id, ns } = open();
     fireEvent.change(id, { target: { value: 'com.example.leave' } });
@@ -50,10 +55,9 @@ describe('CreatePackageDialog — namespace field', () => {
   });
 
   it('disables submit while the namespace is invalid, enables it when valid', () => {
-    const { id, ns, name } = open();
+    const { id, ns, name, submit } = open();
     fireEvent.change(id, { target: { value: 'com.example.leave' } });
     fireEvent.change(name, { target: { value: 'Leave' } });
-    const submit = screen.getByRole('button', { name: /create package|创建软件包/i });
     expect(submit).toBeEnabled();
     // Single char is below the 2-char minimum → invalid.
     fireEvent.change(ns, { target: { value: 'a' } });

packages/app-shell/src/views/metadata-admin/EditPackageDialog.test.tsx

@@ -5,9 +5,12 @@ import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import { EditPackageDialog, type InstalledPackage } from './PackagesPage';
 
-// PackagesPage.apiJson uses the raw global fetch (fetch → res.text() → JSON.parse),
-// so we stub global fetch and mirror the runtime's { success, data } envelope —
-// exactly what `PATCH /api/v1/packages/:id` returns (framework http-dispatcher).
+// EditPackageDialog is now a thin wrapper over the spec-driven PackageFormDialog
+// (edit mode). It renders the manifest form via SchemaForm and PATCHes only the
+// three fields the REST surface persists (name / description / version).
+// PackageFormDialog's apiJson uses the raw global fetch (fetch → res.text() →
+// JSON.parse), so we stub global fetch and mirror the runtime's { success, data }
+// envelope — exactly what `PATCH /api/v1/packages/:id` returns.
 const PKG: InstalledPackage = {
   manifest: { id: 'com.acme.crm', name: 'Acme CRM', version: '1.0.0', description: 'old', type: 'app' },
   enabled: true,
@@ -22,12 +25,8 @@ beforeEach(() => {
     'fetch',
     vi.fn(async (url: string, init: RequestInit = {}) => {
       calls.push({ url, init });
-      // Echo the patched manifest back, the way the dispatcher does.
       const body = init.body ? JSON.parse(init.body as string) : {};
-      const updated: InstalledPackage = {
-        ...PKG,
-        manifest: { ...PKG.manifest, ...body },
-      };
+      const updated: InstalledPackage = { ...PKG, manifest: { ...PKG.manifest, ...body } };
       return {
         ok: true,
         status: 200,
@@ -39,57 +38,47 @@ beforeEach(() => {
 
 afterEach(() => vi.unstubAllGlobals());
 
-describe('EditPackageDialog', () => {
-  it('prefills from the manifest and PATCHes only the edited fields', async () => {
+describe('EditPackageDialog (spec-form wrapper)', () => {
+  it('prefills from the manifest and PATCHes only the server-persisted fields', async () => {
     const onSaved = vi.fn();
     const onOpenChange = vi.fn();
     render(<EditPackageDialog pkg={PKG} open onOpenChange={onOpenChange} onSaved={onSaved} />);
 
-    const nameInput = (await screen.findByTestId('package-edit-name-input')) as HTMLInputElement;
-    expect(nameInput.value).toBe('Acme CRM'); // prefilled
-
-    fireEvent.change(nameInput, { target: { value: 'Acme CRM v2' } });
-    fireEvent.click(screen.getByTestId('package-edit-save'));
+    // Stable submit affordance regardless of the SchemaForm field internals.
+    fireEvent.click(await screen.findByTestId('package-form-submit'));
 
     await waitFor(() => expect(onSaved).toHaveBeenCalledTimes(1));
 
-    // Issued a PATCH to the package's REST id with the edited manifest fields.
+    // One PATCH to the package's REST id, carrying ONLY name/description/version.
     expect(calls).toHaveLength(1);
     expect(calls[0].url).toBe('/api/v1/packages/com.acme.crm');
     expect(calls[0].init.method).toBe('PATCH');
-    const sent = JSON.parse(calls[0].init.body as string);
-    expect(sent).toMatchObject({ name: 'Acme CRM v2', version: '1.0.0' });
+    expect(JSON.parse(calls[0].init.body as string)).toEqual({
+      name: 'Acme CRM',
+      description: 'old',
+      version: '1.0.0',
+    });
 
     // onSaved receives the server's updated package; the dialog closes.
-    expect(onSaved.mock.calls[0][0].manifest.name).toBe('Acme CRM v2');
+    expect(onSaved.mock.calls[0][0].manifest.name).toBe('Acme CRM');
     expect(onOpenChange).toHaveBeenCalledWith(false);
   });
 
-  it('blocks save on a non-semantic version and never calls the API', async () => {
-    render(<EditPackageDialog pkg={PKG} open onOpenChange={vi.fn()} onSaved={vi.fn()} />);
-    const versionInput = await screen.findByLabelText(/version/i);
-    fireEvent.change(versionInput, { target: { value: '1.2' } });
-
-    const save = screen.getByTestId('package-edit-save') as HTMLButtonElement;
-    expect(save.disabled).toBe(true);
-    fireEvent.click(save);
-    expect(calls).toHaveLength(0);
-  });
-
   it('surfaces a server error and keeps the dialog open', async () => {
     vi.stubGlobal(
       'fetch',
       vi.fn(async () => ({
         ok: false,
         status: 400,
-        text: async () => JSON.stringify({ success: false, error: { message: 'version must be semantic (e.g. 1.0.0)' } }),
+        text: async () =>
+          JSON.stringify({ success: false, error: { message: 'version must be semantic (e.g. 1.0.0)' } }),
       })),
     );
     const onSaved = vi.fn();
     const onOpenChange = vi.fn();
     render(<EditPackageDialog pkg={PKG} open onOpenChange={onOpenChange} onSaved={onSaved} />);
 
-    fireEvent.click(screen.getByTestId('package-edit-save'));
+    fireEvent.click(await screen.findByTestId('package-form-submit'));
 
     expect(await screen.findByText(/version must be semantic/i)).toBeInTheDocument();
     expect(onSaved).not.toHaveBeenCalled();

packages/app-shell/src/views/metadata-admin/PackageFormDialog.test.tsx

@@ -0,0 +1,82 @@
+// Copyright (c) 2026 ObjectStack. Licensed under the Apache-2.0 license.
+
+import * as React from 'react';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { PackageFormDialog } from './PackageFormDialog';
+
+// PackageFormDialog renders the manifest form from the spec (package-schema)
+// via SchemaForm and talks to `/api/v1/packages`. apiJson uses the raw global
+// fetch (fetch → res.text() → JSON.parse), so we stub fetch and mirror the
+// runtime's { success, data } envelope.
+let calls: Array<{ url: string; init: RequestInit }>;
+
+function stubOk() {
+  vi.stubGlobal(
+    'fetch',
+    vi.fn(async (url: string, init: RequestInit = {}) => {
+      calls.push({ url, init });
+      const body = init.body ? JSON.parse(init.body as string) : {};
+      const manifest = body.manifest ?? body;
+      return {
+        ok: true,
+        status: 201,
+        text: async () => JSON.stringify({ success: true, data: { manifest, status: 'installed' } }),
+      } as Response;
+    }),
+  );
+}
+
+beforeEach(() => {
+  calls = [];
+  stubOk();
+});
+afterEach(() => vi.unstubAllGlobals());
+
+describe('PackageFormDialog — create mode', () => {
+  it('POSTs { manifest } from the spec form and reports the new id', async () => {
+    const onSaved = vi.fn();
+    render(<PackageFormDialog mode="create" open onOpenChange={vi.fn()} onSaved={onSaved} />);
+
+    // Fields come from the spec-derived FormView (package-schema); target them by label.
+    fireEvent.change(await screen.findByLabelText(/package id/i), { target: { value: 'com.acme.new' } });
+    fireEvent.change(screen.getByLabelText(/display name/i), { target: { value: 'New App' } });
+    // version prefills to 0.1.0; type prefills to 'app'.
+
+    fireEvent.click(screen.getByTestId('package-form-submit'));
+
+    await waitFor(() => expect(onSaved).toHaveBeenCalledTimes(1));
+    expect(calls).toHaveLength(1);
+    expect(calls[0].url).toBe('/api/v1/packages');
+    expect(calls[0].init.method).toBe('POST');
+    expect(JSON.parse(calls[0].init.body as string).manifest).toMatchObject({
+      id: 'com.acme.new',
+      name: 'New App',
+      version: '0.1.0',
+      type: 'app',
+    });
+    expect(onSaved.mock.calls[0][0].id).toBe('com.acme.new');
+  });
+
+  it('maps a 409 duplicate id to a friendly "already exists" message and stays open', async () => {
+    vi.stubGlobal(
+      'fetch',
+      vi.fn(async () => ({
+        ok: false,
+        status: 409,
+        text: async () => JSON.stringify({ success: false, error: { message: "Package 'com.acme.new' already exists" } }),
+      })),
+    );
+    const onSaved = vi.fn();
+    const onOpenChange = vi.fn();
+    render(<PackageFormDialog mode="create" open onOpenChange={onOpenChange} onSaved={onSaved} />);
+
+    fireEvent.change(await screen.findByLabelText(/package id/i), { target: { value: 'com.acme.new' } });
+    fireEvent.change(screen.getByLabelText(/display name/i), { target: { value: 'Dup App' } });
+    fireEvent.click(screen.getByTestId('package-form-submit'));
+
+    expect(await screen.findByText(/already exists/i)).toBeInTheDocument();
+    expect(onSaved).not.toHaveBeenCalled();
+    expect(onOpenChange).not.toHaveBeenCalledWith(false);
+  });
+});