fix: redo record-list "Add View" flow — empty-name 405, invisible drafts, canonical naming (#2768)

Rebuilds the record-list "Add View" / "Save as view" create path so a
runtime-created view has one canonical identity and is verifiable before
publish. Supersedes #2754; fixes #2767.

P1 — unified identity. New `viewEnvelope(objectName, spec, { name, label })`
seam emits the canonical ViewItem `{ name: '<object>.<key>', object,
viewKind: 'list', label, config }` (config.data stamped), mirroring the Studio
`anchors.ts:createBuildBody`. The qualified name is used as BOTH the
`PUT /meta/view/:name` URL segment and `body.name`, so the sys_metadata row
key, the ViewTabBar tab id, and the body identity agree and the draft → read →
publish loop resolves. `ObjectView` and `ObjectDataPage` share the one helper.

Empty-name 405. `MetadataClient.save()` and `createRuntimeMetadata()` throw a
clear error instead of emitting `PUT /meta/view/` (empty :name).

P2/P3/P4 — draft visibility. `listViews(objectName, { previewDrafts })`: in
preview mode the adapter makes a single `MetadataClient.withPreviewDrafts(true)
.list('view')` request and uses the server's already-overlaid list (draft wins
by name, `_draft` tagged) — replacing, not appending, so a draft that edits a
published view can't double-tab. No hand-rolled metadata fetch at the adapter.
After a create in normal mode the console navigates to the new view with
`?preview=draft` so the DraftPreviewBar is visible and Publish is one click.

P5 — CJK naming. `CreateViewDialog` gains an editable machine-name field,
prefilled via slugify(label) and required (submit disabled) when slugify is
empty for non-Latin labels — no silent random names. New i18n keys (en/zh).

Tests: viewEnvelope/deriveViewKey, empty-name guards, and the listViews
preview branch (single request, no dupe, _draft passthrough). Docs updated.


Claude-Session: https://claude.ai/code/session_01Y2ZKbzgbsYndkWYojr1NTc

Co-authored-by: Claude <noreply@anthropic.com>

Author: os-zhuang

.changeset/record-list-add-view-flow.md

@@ -0,0 +1,38 @@
+---
+"@object-ui/data-objectstack": patch
+"@object-ui/app-shell": patch
+"@object-ui/types": patch
+"@object-ui/i18n": patch
+---
+
+fix(app-shell): redo the record-list "Add View" create flow — empty-name 405, invisible drafts, canonical naming
+
+Rebuilds the record-list "Add View" / "Save as view" create path so a
+runtime-created view has one canonical identity and is actually verifiable
+before publish (supersedes #2754; fixes #2767).
+
+- **Unified identity (P1).** New `viewEnvelope(objectName, spec, { name, label })`
+  seam in `runtime-metadata-persistence.ts` emits the canonical ViewItem
+  (`{ name: '<object>.<key>', object, viewKind: 'list', label, config }` with
+  `config.data = { provider: 'object', object }`), mirroring the Studio
+  `anchors.ts:createBuildBody`. The **qualified** name is passed as BOTH the
+  `PUT /meta/view/:name` URL segment and `body.name`, so the `sys_metadata`
+  row key, the ViewTabBar tab id, and the body identity all agree and the
+  draft → read → publish loop resolves. `ObjectView` and `ObjectDataPage` both
+  call the single helper — the duplicated envelope block is gone (P6).
+- **Empty-name guards (405).** `MetadataClient.save()` and
+  `createRuntimeMetadata()` throw a clear contextual error instead of emitting
+  `PUT /meta/view/` (empty `:name`, server 405).
+- **Draft visibility (P2/P3/P4).** `DataSource.listViews(objectName, { previewDrafts })`:
+  in draft-preview mode the `ObjectStackAdapter` makes a **single**
+  `MetadataClient.withPreviewDrafts(true).list('view')` request and uses the
+  server's already-overlaid list (draft wins by name, `_draft` tagged) —
+  replacing, not appending, so a draft that edits a published view can't
+  double-tab. No hand-rolled `fetch` of metadata routes at the adapter layer.
+  After a create in normal mode the console navigates to the new view with
+  `?preview=draft`, so the DraftPreviewBar is visible and Publish is one click.
+- **CJK-aware naming (P5).** `CreateViewDialog` gains an editable machine-name
+  field, prefilled via `slugify(label)` for Latin labels and required (submit
+  disabled) when slugify yields empty for non-Latin labels — no more silent
+  random `task_grid_mrsyt56j` names. New `console.objectView.viewName*` keys
+  (en/zh).

content/docs/guide/designing-app-navigation.md

@@ -26,6 +26,18 @@ The key asymmetry: a page can imitate the other two, but it **loses the object
 shell** — and every future improvement to that shell (new actions, better view
 switching, permission trimming) will skip your page.
 
+> **Creating a view at runtime ("Add View" / "Save as view").** Both entry
+> points stage the new view as a per-item **draft** (ADR-0034) — invisible to
+> other users until you Publish. Its identity is the canonical qualified name
+> `<object>.<key>` (e.g. `project.by_status`), used as the metadata row key,
+> the `body.name`, and the ViewTabBar tab id alike, so the draft → preview →
+> publish loop resolves to a single row. After creating, the console navigates
+> you to the new view in **draft-preview mode** (`?preview=draft`) so you can
+> verify it and Publish from the DraftPreviewBar in one click. The create
+> dialog asks for a display label **and** a machine key; the key auto-fills
+> from the label for Latin text, and must be typed for non-Latin (CJK, …)
+> labels rather than falling back to a random name.
+
 ## The Rule of Least Power
 
 Use the least powerful construct that expresses the requirement:

packages/app-shell/src/views/CreateViewDialog.tsx

@@ -7,9 +7,13 @@
  * configuration fields (e.g. the group-by field for kanban, the start-date
  * field for calendar/timeline/gantt, lat/lng for map, image for gallery).
  *   The Create button stays disabled until every required field is set.
- * Step 3: The user enters a name (required, defaults to "Grid 1" etc.).
+ * Step 3: The user enters a display label (required, defaults to "Grid 1" etc.)
+ * and a machine `name` (the metadata key). The name auto-fills from the label
+ * via `slugify`; for non-Latin (CJK/…) labels slugify yields nothing, so the
+ * field is left empty and the user must type a key before Create enables
+ * (#2767 P5 — no more silent random names).
  *
- * On submit, calls `onCreate({ type, label, [type]: {...required fields} })`.
+ * On submit, calls `onCreate({ type, label, name, [type]: {...required fields} })`.
  * The parent is responsible for actually persisting the view (we keep this
  * component pure — no dataSource coupling).
  */
@@ -27,6 +31,7 @@ import {
   cn,
 } from '@object-ui/components';
 import { useObjectTranslation } from '@object-ui/i18n';
+import { slugify } from './metadata-admin/createDerive';
 import {
   deriveFieldOptions,
   isImageLikeField,
@@ -58,7 +63,7 @@ export interface CreateViewDialogProps {
    * fields are nested under their type key (e.g. `kanban.groupByField`),
    * matching the @objectstack/spec NamedListView shape.
    */
-  onCreate: (config: Record<string, any> & { type: string; label: string }) => void;
+  onCreate: (config: Record<string, any> & { type: string; label: string; name: string }) => void;
   /** Used to suggest unique default names like "Grid 2" if "Grid 1" exists. */
   existingLabels?: string[];
   /** Restrict the available view types. Defaults to all built-in types. */
@@ -305,6 +310,10 @@ export function CreateViewDialog({
   const [selectedType, setSelectedType] = useState<string>(types[0]?.type ?? 'grid');
   const [label, setLabel] = useState<string>('');
   const [touched, setTouched] = useState(false);
+  // Machine `name` (metadata key) + whether the user has typed into it. Auto-
+  // derived from `label` via slugify until the user edits it directly.
+  const [name, setName] = useState<string>('');
+  const [nameTouched, setNameTouched] = useState(false);
   /** Map of `${type}.${fieldKey}` → selected field name. Per-type so switching
    *  view types preserves the user's earlier choices in case they switch back. */
   const [requiredFieldValues, setRequiredFieldValues] = useState<Record<string, string>>({});
@@ -315,6 +324,7 @@ export function CreateViewDialog({
     if (open) {
       setSelectedType(types[0]?.type ?? 'grid');
       setTouched(false);
+      setNameTouched(false);
       setRequiredFieldValues({});
     }
   }, [open, types]);
@@ -326,6 +336,13 @@ export function CreateViewDialog({
     }
   }, [selectedType, touched, types, existingSet]);
 
+  // Derive the machine name from the label until the user edits it. slugify
+  // returns '' for non-Latin labels, so the field stays empty and the user is
+  // prompted to fill it in (rather than a silent random key — #2767 P5).
+  useEffect(() => {
+    if (!nameTouched) setName(slugify(label));
+  }, [label, nameTouched]);
+
   // Required fields for the currently selected type
   const requiredFields = REQUIRED_FIELDS_BY_TYPE[selectedType] ?? [];
 
@@ -358,7 +375,13 @@ export function CreateViewDialog({
   const trimmed = label.trim();
   const isDuplicate = trimmed.length > 0 && existingSet.has(trimmed);
   const allRequiredFilled = requiredFields.every(f => getRequiredValue(f.key).length > 0);
-  const canSubmit = trimmed.length > 0 && !isDuplicate && allRequiredFilled;
+  // Machine name: same snake_case shape slugify emits and the metadata `name`
+  // pattern (`^[a-z_][a-z0-9_]*$`) accepts. Empty → prompt; malformed → hint.
+  const NAME_RE = /^[a-z_][a-z0-9_]*$/;
+  const nameKey = name.trim();
+  const nameMissing = nameKey.length === 0;
+  const nameInvalid = nameKey.length > 0 && !NAME_RE.test(nameKey);
+  const canSubmit = trimmed.length > 0 && !isDuplicate && allRequiredFilled && !nameMissing && !nameInvalid;
 
   // Auto-pick a sensible default for any required field. Runs whenever the
   // type or available options change, but only fills slots the user hasn't
@@ -398,9 +421,10 @@ export function CreateViewDialog({
       if (!v) return;
       subConfig[rf.key] = rf.key === 'yAxisFields' ? [v] : v;
     });
-    const payload: Record<string, any> & { type: string; label: string } = {
+    const payload: Record<string, any> & { type: string; label: string; name: string } = {
       type: selectedType,
       label: trimmed,
+      name: nameKey,
     };
     if (Object.keys(subConfig).length > 0) {
       payload[selectedType] = subConfig;
@@ -549,6 +573,35 @@ export function CreateViewDialog({
           )}
         </div>
 
+        <div className="space-y-1">
+          <label htmlFor="create-view-machine-name-input" className="text-xs font-medium">
+            {t('console.objectView.viewName')}
+            <span className="ml-1 text-destructive">*</span>
+          </label>
+          <Input
+            id="create-view-machine-name-input"
+            data-testid="create-view-machine-name-input"
+            value={name}
+            onChange={(e) => { setName(e.target.value); setNameTouched(true); }}
+            onKeyDown={(e) => { if (e.key === 'Enter' && canSubmit) handleSubmit(); }}
+            placeholder="grid_1"
+            className="h-9 font-mono"
+          />
+          {nameMissing ? (
+            <p className="text-[11px] text-muted-foreground" data-testid="create-view-machine-name-help">
+              {t('console.objectView.viewNameRequired')}
+            </p>
+          ) : nameInvalid ? (
+            <p className="text-[11px] text-destructive" data-testid="create-view-error-machine-name">
+              {t('console.objectView.viewNameInvalid')}
+            </p>
+          ) : (
+            <p className="text-[11px] text-muted-foreground" data-testid="create-view-machine-name-help">
+              {t('console.objectView.viewNameHelp')}
+            </p>
+          )}
+        </div>
+
         <DialogFooter className="mt-2">
           <Button
             type="button"

packages/app-shell/src/views/ObjectDataPage.tsx

@@ -58,8 +58,13 @@ import { RecordDetailView } from './RecordDetailView';
 import { PageHeader } from '../layout/PageHeader';
 import { getIcon } from '../utils/getIcon';
 import { useMetadataClient } from './metadata-admin/useMetadata';
-import { createRuntimeMetadata } from './runtime-metadata-persistence';
+import { createRuntimeMetadata, viewEnvelope } from './runtime-metadata-persistence';
 import { CreateViewDialog } from './CreateViewDialog';
+import {
+  usePreviewDrafts,
+  PREVIEW_QUERY_FLAG,
+  PREVIEW_QUERY_VALUE,
+} from '../preview/PreviewModeContext';
 
 /** Field types the auto-derived user-filter bar offers as dropdowns. */
 const USER_FILTER_TYPES = new Set(['select', 'multiselect', 'radio', 'enum', 'boolean']);
@@ -76,6 +81,9 @@ export function ObjectDataPage({ dataSource, objects }: any) {
   const { user } = useAuth();
   const isAdmin = useIsWorkspaceAdmin();
   const metadataClient = useMetadataClient();
+  // ADR-0037: enter draft-preview after "Save as view" so the fresh draft is
+  // visible; if already previewing, keep the flag off the suffix (it's sticky).
+  const previewDrafts = usePreviewDrafts();
   const [showCreateViewDialog, setShowCreateViewDialog] = React.useState(false);
 
   const objectDef = React.useMemo(
@@ -233,14 +241,25 @@ export function ObjectDataPage({ dataSource, objects }: any) {
           columns: Array.isArray(config.columns) && config.columns.length > 0 ? config.columns : columns,
           ...(urlFilters.length ? { filter: urlFilters } : {}),
         };
-        const draftName = String(config?.name ?? config?.id ?? '');
-        const createdId = await createRuntimeMetadata('view', draftName, spec, { metadataClient });
-        if (createdId) navigate(`../view/${createdId}`, { relative: 'path' });
+        // #2767 P1: unified identity — the qualified `<object>.<key>` name is the
+        // URL segment AND the body identity. #2767 P4: land on the new draft in
+        // preview mode so it's visible and one click from Publish.
+        const env = viewEnvelope(objectName ?? '', spec, {
+          name: config.name,
+          label: config.label,
+        });
+        const createdId = await createRuntimeMetadata('view', env.name, env, { metadataClient });
+        if (createdId) {
+          const previewSuffix = previewDrafts
+            ? ''
+            : `?${PREVIEW_QUERY_FLAG}=${PREVIEW_QUERY_VALUE}`;
+          navigate(`../view/${createdId}${previewSuffix}`, { relative: 'path' });
+        }
       } catch (err) {
         console.error('[ObjectDataPage] Failed to save view:', err);
       }
     },
-    [columns, urlFilters, metadataClient, navigate],
+    [columns, urlFilters, metadataClient, navigate, objectName, previewDrafts],
   );
 
   if (!objectDef) {

packages/app-shell/src/views/ObjectView.tsx

@@ -41,8 +41,13 @@ import { detectStatusField } from '@object-ui/types';
 import { MetadataPanel, useMetadataInspector } from './MetadataInspector';
 import { ViewConfigPanel } from './ViewConfigPanel';
 import { useMetadataClient } from './metadata-admin/useMetadata';
-import { persistRuntimeMetadata, createRuntimeMetadata } from './runtime-metadata-persistence';
+import { persistRuntimeMetadata, createRuntimeMetadata, viewEnvelope } from './runtime-metadata-persistence';
 import { CreateViewDialog } from './CreateViewDialog';
+import {
+  usePreviewDrafts,
+  PREVIEW_QUERY_FLAG,
+  PREVIEW_QUERY_VALUE,
+} from '../preview/PreviewModeContext';
 import { PageHeader } from '../layout/PageHeader';
 import { useMobileViewSwitcherRegistration } from '../layout/MobileViewSwitcherContext';
 import type { MobileViewSwitcherItem } from '../layout/MobileViewSwitcherContext';
@@ -169,6 +174,12 @@ function ObjectViewInner({ dataSource, objects, onEdit, externalRefreshKey }: an
     // model (the `sys_view` table is retired).
     const metadataClient = useMetadataClient();
 
+    // ADR-0037: in draft-preview mode (`?preview=draft`), `listViews()` reads
+    // the draft-overlaid world so a view just created via "Add View" shows up
+    // in the ViewTabBar before it is published. Normal mode sees published
+    // views only (the publish gate stays intact).
+    const previewDrafts = usePreviewDrafts();
+
     // Inline view config panel state (Airtable-style right sidebar)
     const [showViewConfigPanel, setShowViewConfigPanel] = useState(false);
     const [viewConfigPanelMode, setViewConfigPanelMode] = useState<'create' | 'edit'>('edit');
@@ -276,31 +287,45 @@ function ObjectViewInner({ dataSource, objects, onEdit, externalRefreshKey }: an
                 // ADR-0034: a new view is created as an invisible per-item
                 // draft via the metadata seam; an explicit Publish promotes it.
                 // UI-layer concerns (default columns, kanban/gallery massaging
-                // above, and the auto-activation below) stay here.
-                const draftName = String(
-                    (config as any)?.name ?? (config as any)?.id ?? (spec as any)?.id ?? '',
-                );
-                createdId = await createRuntimeMetadata('view', draftName, spec, {
+                // above, and the auto-activation below) stay here; the canonical
+                // ViewItem envelope + qualified-name identity live in the seam.
+                //
+                // #2767 P1: the qualified name `<object>.<key>` is used as BOTH
+                // the URL segment and `body.name`, so the sys_metadata row key,
+                // the ViewTabBar tab id, and the body identity all agree and the
+                // draft → read → publish loop resolves.
+                const env = viewEnvelope(objectName, spec, {
+                    name: (config as any)?.name,
+                    label: config.label,
+                });
+                createdId = await createRuntimeMetadata('view', env.name, env, {
                     metadataClient,
                 });
             }
             setShowViewConfigPanel(false);
             setViewConfigPanelMode('edit');
             setRefreshKey(k => k + 1);
-            // Auto-activate the newly created view (Airtable parity).
-            // Routing falls back to the default view if `createdId` doesn't
-            // resolve yet — re-render after refresh will pick it up.
+            // Auto-activate the newly created view (Airtable parity), and close
+            // the main-path loop (#2767 P4): a fresh view is a DRAFT, invisible
+            // to a normal (published-only) read, so navigating there plainly
+            // would land on "view not found". Enter draft-preview mode
+            // (`?preview=draft`) instead — the DraftPreviewBar then lets the
+            // user verify and Publish in one click. If already in preview, the
+            // sticky provider keeps the flag, so no suffix is needed.
             if (createdId) {
+                const previewSuffix = previewDrafts
+                    ? ''
+                    : `?${PREVIEW_QUERY_FLAG}=${PREVIEW_QUERY_VALUE}`;
                 if (viewId) {
-                    navigate(`../${createdId}`, { relative: 'path' });
+                    navigate(`../${createdId}${previewSuffix}`, { relative: 'path' });
                 } else {
-                    navigate(`view/${createdId}`);
+                    navigate(`view/${createdId}${previewSuffix}`);
                 }
             }
         } catch (err) {
             console.error('[ViewConfigPanel] Failed to create view:', err);
         }
-    }, [dataSource, objectName, objects, navigate, viewId, metadataClient]);
+    }, [dataSource, objectName, objects, navigate, viewId, metadataClient, previewDrafts]);
 
     // Record count tracking for footer
     const [recordCount, setRecordCount] = useState<number | undefined>(undefined);
@@ -418,7 +443,7 @@ function ObjectViewInner({ dataSource, objects, onEdit, externalRefreshKey }: an
         // Read saved views from the metadata overlay (`/meta/view`) via the
         // adapter's `listViews`. Adapters without it surface no saved views.
         if (typeof (dataSource as any)?.listViews === 'function') {
-            (dataSource as any).listViews(objectName)
+            (dataSource as any).listViews(objectName, { previewDrafts })
                 .then((rows: any[]) => {
                     if (cancelled) return;
                     // Normalize: ensure each view has an `id` for ViewTabBar
@@ -445,7 +470,7 @@ function ObjectViewInner({ dataSource, objects, onEdit, externalRefreshKey }: an
         // saved views. The retired `sys_view` table is no longer read.
         setSavedViews([]);
         return () => { cancelled = true; };
-    }, [dataSource, objectName, refreshKey]);
+    }, [dataSource, objectName, refreshKey, previewDrafts]);
 
     // Persisted per-view config overrides (e.g. density toggle). Saved
     // separately from `objectDef.listViews` (the embedded definition) via