From c0bd2d11a6cea717e4809e2946418fd9c66b674a Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 15 Oct 2026 03:06:35 +0000
Subject: [PATCH] fix(app-shell): Studio names a draft-only item by its _drafts
 label, machine name second (objectui#11862 remainder)

Each `GET /meta/_drafts` row carries the draft body's own label since
objectstack#22200 (installed as 18.0.0-next.1). Read it off the row, never
by reading the item:

- Access: a draft-only permission set leads with its label in the rail.
- Automations: a draft-only flow reads as its label (packageSurfaces).
- Interfaces: a label-less nav entry that opens a draft-only object or
  dashboard inherits the draft's label (rail, edit-mode cards, inspector
  placeholder) through a last rung on useNavTargetLabel fed with the
  surface's pending drafts; the target pickers offer draft rows by label.
- Changes list: every row leads with the row's label, name beneath it.

A row with no label keeps its name alone. Display only.

Claude-Session: https://claude.ai/code/session_01JZnppgHRp4sREcouhkQYDB
Co-authored-by: Claude <noreply@anthropic.com>
---
 .changeset/11862-draft-labels-remainder.md    |  14 +
 .../app-shell/src/hooks/useNavTargetLabel.ts  |  54 +++-
 .../src/preview/DraftChangesPanel.tsx         |  31 +-
 ...raftChangesPanel.labelFirst-11862.test.tsx | 118 +++++++
 .../app-shell/src/preview/usePendingDrafts.ts |  42 ++-
 ...ignSurface.accessRailLabels-11862.test.tsx |  43 ++-
 ...esignSurface.navDraftLabels-11862.test.tsx | 297 ++++++++++++++++++
 .../studio-design/StudioDesignSurface.tsx     |  73 +++--
 .../studio-design/packageSurfaces.test.ts     |  64 +++-
 .../views/studio-design/packageSurfaces.ts    |  38 ++-
 10 files changed, 714 insertions(+), 60 deletions(-)
 create mode 100644 .changeset/11862-draft-labels-remainder.md
 create mode 100644 packages/app-shell/src/preview/__tests__/DraftChangesPanel.labelFirst-11862.test.tsx
 create mode 100644 packages/app-shell/src/views/studio-design/StudioDesignSurface.navDraftLabels-11862.test.tsx

diff --git a/.changeset/11862-draft-labels-remainder.md b/.changeset/11862-draft-labels-remainder.md
new file mode 100644
index 0000000000..ce287690ee
--- /dev/null
+++ b/.changeset/11862-draft-labels-remainder.md
@@ -0,0 +1,14 @@
+---
+'@object-ui/app-shell': patch
+---
+
+Studio names a draft-only item by its label, with the machine name as secondary text (objectui#11862, the remainder after objectui#11906).
+
+Since objectstack 18.0.0-next.0 each row of `GET /meta/_drafts` carries the draft body's own label, or `null` when the body declares none (objectstack#22200). Studio now reads that label off the row. It does not read each item to find it:
+
+- **Access:** a new permission set that exists only as a draft reads as its label in the permission-set list, with its machine name beneath it. It used to read as its identifier (`qa_readers`) after a reload.
+- **Automations:** a draft-only flow reads as its label in the flow list.
+- **Interfaces:** a nav entry that has no label of its own and opens a draft-only object or dashboard reads as that draft's label. This holds in the nav list, on the edit-mode cards and in the Label placeholder of the nav-item inspector. A published label still wins. The inspector's page, dashboard and report pickers offer a draft-only item as `Label (name)`, as they offer a published one.
+- **Pending changes:** each row of the list leads with its label, with the machine name beneath it in monospace. This applies to new and updated items alike. A label given in several languages reads in the console language.
+
+A row whose draft declares no label shows its name alone, as before. Display only: nothing that is saved changes. Nothing is added to the package entry: no export, prop or language-pack key.
diff --git a/packages/app-shell/src/hooks/useNavTargetLabel.ts b/packages/app-shell/src/hooks/useNavTargetLabel.ts
index c65f5f3004..12608265c4 100644
--- a/packages/app-shell/src/hooks/useNavTargetLabel.ts
+++ b/packages/app-shell/src/hooks/useNavTargetLabel.ts
@@ -44,9 +44,22 @@
  *
  * A target with no label answers `undefined` — the renderer then falls through
  * the spec's ladder and, at the bottom, to the target's machine name.
+ *
+ * ## A designer's pending drafts — the last rung (objectui#11862)
+ *
+ * A draft-only object or dashboard is in no published list, so the metadata
+ * above cannot name it, and a label-less entry that opens one read as its
+ * machine name in the Studio's nav editor. Where a designer holds its
+ * package's pending drafts, it hands them to {@link DraftTargetLabels}, and the
+ * label a draft's `_drafts` row carries (objectstack-ai/objectstack#22200) is
+ * asked last: only when the metadata has no label for the target, so a
+ * published label still wins. Nothing is fetched for it — the rows are the
+ * ones the designer already read. Without a provider the list is empty and
+ * this hook answers exactly as before, which is the console's case.
  */
 
-import { useMemo } from 'react';
+import { createContext, useContext, useMemo } from 'react';
+import { canonicalMetaUrlType } from '@objectstack/spec/shared';
 import { resolveI18nLabel as resolveInlineI18nLabel } from '@objectstack/spec/ui';
 import { resolveViewId } from '@object-ui/core';
 import { useObjectLabel, useObjectTranslation } from '@object-ui/i18n';
@@ -83,6 +96,36 @@ export function findByName(items: readonly unknown[] | undefined, name: string):
   );
 }
 
+/**
+ * A pending draft as a designer holds it: the type its row is stored under,
+ * its name, and the label its `_drafts` row carries (absent or `null` when the
+ * draft body declares none).
+ */
+export interface DraftTargetLabel {
+  type: string;
+  name: string;
+  label?: unknown;
+}
+
+/**
+ * The pending drafts a designer holds, for the last rung above. Internal to
+ * app-shell: the Studio surface provides the `_drafts` rows it reads for its
+ * Changes count; nothing else does.
+ */
+export const DraftTargetLabels = createContext<ReadonlyArray<DraftTargetLabel>>([]);
+
+/** The label of the pending draft of `type` named `name`, as display text, or `undefined`. */
+function draftText(
+  drafts: ReadonlyArray<DraftTargetLabel>,
+  type: string,
+  name: string,
+  language: string | undefined,
+): string | undefined {
+  // A stored type spelling is folded as every `/meta` reader folds it.
+  const draft = drafts.find((d) => d.name === name && canonicalMetaUrlType(d.type) === type);
+  return draft ? metadataText(draft.label, language) : undefined;
+}
+
 /** An object's merged `listViews` map (`<object>.<key>` → view), or `{}` when it has none. */
 function listViewsOf(def: LabelledRecord | undefined): Record<string, LabelledRecord | undefined> {
   const views = def?.listViews;
@@ -93,13 +136,15 @@ export function useNavTargetLabel(): NavTargetLabelResolver {
   const metadata = useMetadata();
   const { objectLabel, viewLabel, dashboardLabel } = useObjectLabel();
   const { language } = useObjectTranslation();
+  const drafts = useContext(DraftTargetLabels);
 
   return useMemo<NavTargetLabelResolver>(
     () => (target: NavLabelTarget) => {
       switch (target.kind) {
         case 'object': {
           const def = findByName(metadata.objects, target.objectName);
-          const text = metadataText(def?.label, language);
+          const text =
+            metadataText(def?.label, language) ?? draftText(drafts, 'object', target.objectName, language);
           return nonEmpty(objectLabel({ name: target.objectName, label: text ?? '' }));
         }
         case 'view': {
@@ -110,13 +155,14 @@ export function useNavTargetLabel(): NavTargetLabelResolver {
         }
         case 'dashboard': {
           const def = findByName(metadata.dashboards, target.dashboardName);
-          const text = metadataText(def?.label, language);
+          const text =
+            metadataText(def?.label, language) ?? draftText(drafts, 'dashboard', target.dashboardName, language);
           return nonEmpty(dashboardLabel({ name: target.dashboardName, label: text ?? '' }));
         }
         default:
           return undefined;
       }
     },
-    [metadata, objectLabel, viewLabel, dashboardLabel, language],
+    [metadata, objectLabel, viewLabel, dashboardLabel, language, drafts],
   );
 }
diff --git a/packages/app-shell/src/preview/DraftChangesPanel.tsx b/packages/app-shell/src/preview/DraftChangesPanel.tsx
index cc71e34a1a..889646a653 100644
--- a/packages/app-shell/src/preview/DraftChangesPanel.tsx
+++ b/packages/app-shell/src/preview/DraftChangesPanel.tsx
@@ -72,6 +72,7 @@ import { useObjectTranslation } from '@object-ui/i18n';
 // refuses, and a faithful copy is exactly the fork that guard exists to prevent.
 import { fetchPendingDrafts } from './usePendingDrafts.js';
 import { canonicalMetaUrlType } from '@objectstack/spec/shared';
+import { resolveI18nLabel, type I18nLabel } from '@objectstack/spec/ui';
 import { stripReadDecorations } from '@objectstack/spec/kernel';
 import { diffFields } from '../views/metadata-admin/previews/object-fields-io.js';
 // The live `?surface=` channel, and NOT `useSurfaceDeepLink` beside it: this
@@ -100,6 +101,13 @@ export interface DraftChangeEntry {
    * two rows, each with its own reads; an entry without one sends no selector.
    */
   member?: string;
+  /**
+   * The label this draft's `_drafts` row carries (objectui#11862): the draft
+   * body's own label, read off the row (objectstack-ai/objectstack#22200).
+   * Absent when the body declares none. The row leads with it and shows the
+   * name beneath it; with none, the name alone is the row's text.
+   */
+  label?: I18nLabel;
   /** `new` = no published version; `update` = overwrites one; undefined = probing. */
   kind?: 'new' | 'update';
 }
@@ -133,6 +141,7 @@ async function listPendingDrafts(packageId?: string | null): Promise<DraftChange
       name: d.name,
       packageId: d.packageId,
       ...(d.member ? { member: d.member } : {}),
+      ...(d.label !== undefined ? { label: d.label } : {}),
     }));
 }
 
@@ -472,7 +481,7 @@ export function DraftChangesPanel({
   onPublish,
   publishing = false,
 }: DraftChangesPanelProps) {
-  const { t } = useObjectTranslation();
+  const { t, language } = useObjectTranslation();
   const [entries, setEntries] = useState<DraftChangeEntry[] | null>(null);
   const [error, setError] = useState<string | null>(null);
   /**
@@ -685,6 +694,13 @@ export function DraftChangesPanel({
                     // objectui#11807 — the drill-in found nothing this publish
                     // changes: not an UPDATE, whatever the name list said.
                     const isUnchanged = unchanged.has(key);
+                    // objectui#11862 — the row's label leads, in the console
+                    // language, for a NEW row and an UPDATE row alike: the one
+                    // `_drafts` serves, so this list never chooses between a
+                    // published and a draft label. The name follows as
+                    // secondary text, or is the row's text when there is no
+                    // label.
+                    const labelText = resolveI18nLabel(entry.label, language)?.trim() ?? '';
                     return (
                       <li key={key} className="rounded-md border text-sm">
                         <button
@@ -716,7 +732,18 @@ export function DraftChangesPanel({
                           ) : (
                             <Loader2 className="h-3.5 w-3.5 shrink-0 animate-spin text-muted-foreground" />
                           )}
-                          <span className="min-w-0 flex-1 truncate font-mono text-xs">{entry.name}</span>
+                          {labelText ? (
+                            <span className="flex min-w-0 flex-1 flex-col">
+                              <span className="truncate">{labelText}</span>
+                              {labelText !== entry.name ? (
+                                <span className="truncate font-mono text-[11px] leading-tight text-muted-foreground">
+                                  {entry.name}
+                                </span>
+                              ) : null}
+                            </span>
+                          ) : (
+                            <span className="min-w-0 flex-1 truncate font-mono text-xs">{entry.name}</span>
+                          )}
                           {entry.member ? (
                             // The member is what tells two rows of one name
                             // apart (objectstack#23073); shown as served.
diff --git a/packages/app-shell/src/preview/__tests__/DraftChangesPanel.labelFirst-11862.test.tsx b/packages/app-shell/src/preview/__tests__/DraftChangesPanel.labelFirst-11862.test.tsx
new file mode 100644
index 0000000000..19f24260b0
--- /dev/null
+++ b/packages/app-shell/src/preview/__tests__/DraftChangesPanel.labelFirst-11862.test.tsx
@@ -0,0 +1,118 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * objectui#11862 (the remainder) — the Changes list leads each row with the
+ * item's label, and the machine name follows as secondary text.
+ *
+ * Measured on a live boot (re-measure `6138292486`): rows read
+ * `PERMISSION · 1 | qa_readers | New` and `OBJECT · 1 | laneawf_qa_wf_obj |
+ * Update`, where the object's label is "QA WF Object 2". On the maintainer's
+ * word 「所有地方以标签为主，机器名只作为次要信息」 and the seat ruling `6053526025`
+ * (question 1, A at the producer), the label is the one each `_drafts` row
+ * carries since objectstack-ai/objectstack#22200: the draft body's own label,
+ * or `null`. It is read off that row, for a NEW row and an UPDATE row alike,
+ * and no item is read to find it.
+ *
+ *  - a NEW row and an UPDATE row lead with the row's label, the machine name
+ *    beneath it in monospace;
+ *  - a locale-map label reads in the console language;
+ *  - CONTROL: a row whose label is `null` reads as its name alone, once, in
+ *    monospace, as before;
+ *  - no item is read for a label: before any row is expanded, a permission
+ *    or page row is never read by name. (An object row's draft IS read at
+ *    open, by the security-posture lint, for its sharing settings: that read
+ *    predates this change and is not a label read.)
+ */
+
+import '@testing-library/jest-dom/vitest';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, render, screen, waitFor, within } from '@testing-library/react';
+
+vi.mock('@object-ui/i18n', async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
+  useObjectTranslation: () => ({
+    t: (_k: string, o?: { defaultValue?: string }) => o?.defaultValue ?? _k,
+    language: 'zh-CN',
+  }),
+}));
+
+import { DraftChangesPanel } from '../DraftChangesPanel';
+
+const DRAFT_ROWS = [
+  { type: 'permission', name: 'qa_readers', packageId: 'com.x', label: 'QA Readers' },
+  { type: 'object', name: 'laneawf_qa_wf_obj', packageId: 'com.x', label: 'QA WF Object 2' },
+  { type: 'page', name: 'home', packageId: 'com.x', label: { en: 'Home', 'zh-CN': '首页' } },
+  { type: 'object', name: 'bare_obj', packageId: 'com.x', label: null },
+];
+
+const fetchMock = vi.fn(async (input: RequestInfo | URL) => {
+  const url = String(input);
+  const ok = (body: unknown) => ({ ok: true, status: 200, json: async () => body });
+  if (url.includes('/_drafts')) return ok({ drafts: DRAFT_ROWS });
+  if (/\/meta\/object(\?|$)/.test(url)) return ok([{ name: 'laneawf_qa_wf_obj', label: 'QA WF Object' }]);
+  if (/\/meta\/page(\?|$)/.test(url)) return ok([]);
+  if (/\/meta\/permission(\?|$)/.test(url)) return ok([]);
+  return { ok: false, status: 404, json: async () => ({}) };
+});
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+  fetchMock.mockClear();
+});
+
+async function renderPanel() {
+  vi.stubGlobal('fetch', fetchMock as unknown as typeof fetch);
+  render(<DraftChangesPanel open onOpenChange={() => {}} packageId="com.x" />);
+  // Every row classified: each badge has replaced its spinner.
+  await waitFor(() => expect(screen.getAllByText(/^(New|Update)$/)).toHaveLength(DRAFT_ROWS.length));
+}
+
+/** The row toggle that holds `text`. */
+function rowOf(text: string): HTMLElement {
+  return screen.getByText(text).closest('[data-testid="draft-entry-toggle"]') as HTMLElement;
+}
+
+describe('objectui#11862 — the Changes list: label first, machine name second', () => {
+  it("a NEW row leads with its `_drafts` row's label, the machine name beneath it", async () => {
+    await renderPanel();
+    const row = rowOf('QA Readers');
+    expect(within(row).getByText('qa_readers')).toHaveClass('font-mono');
+    expect(within(row).getByText('New')).toBeInTheDocument();
+  });
+
+  it("an UPDATE row leads with its `_drafts` row's label, the machine name beneath it", async () => {
+    await renderPanel();
+    const row = rowOf('QA WF Object 2');
+    expect(within(row).getByText('laneawf_qa_wf_obj')).toHaveClass('font-mono');
+    expect(within(row).getByText('Update')).toBeInTheDocument();
+  });
+
+  it('a locale-map label reads in the console language, never as [object Object]', async () => {
+    await renderPanel();
+    const row = rowOf('首页');
+    expect(within(row).getByText('home')).toHaveClass('font-mono');
+    expect(screen.queryByText('[object Object]')).toBeNull();
+  });
+
+  it('CONTROL: a row whose label is null reads as its name alone, once, in monospace', async () => {
+    await renderPanel();
+    const row = rowOf('bare_obj');
+    expect(within(row).getAllByText('bare_obj')).toHaveLength(1);
+    expect(within(row).getByText('bare_obj')).toHaveClass('font-mono');
+  });
+
+  it('no item is read for a label: a permission or page row is never read by name', async () => {
+    await renderPanel();
+    const urls = fetchMock.mock.calls.map(([input]) => String(input));
+    expect(urls.some((u) => u.includes('/_drafts'))).toBe(true);
+    // An item read is `/meta/TYPE/NAME`; none is made for these rows before one is expanded.
+    expect(urls.filter((u) => /\/meta\/(permission|page)\/[^/?]+/.test(u))).toEqual([]);
+  });
+});
diff --git a/packages/app-shell/src/preview/usePendingDrafts.ts b/packages/app-shell/src/preview/usePendingDrafts.ts
index e87dbb6468..58b684a8fc 100644
--- a/packages/app-shell/src/preview/usePendingDrafts.ts
+++ b/packages/app-shell/src/preview/usePendingDrafts.ts
@@ -32,6 +32,7 @@
  */
 
 import { useCallback, useEffect, useRef, useState } from 'react';
+import type { I18nLabel } from '@objectstack/spec/ui';
 import { subscribeMetadataRefresh } from '../assistant/assistantBus.js';
 
 export interface PendingDraftEntry {
@@ -48,6 +49,26 @@ export interface PendingDraftEntry {
    * as `?member=`. Copied as served, never derived from the name or the body.
    */
   member?: string;
+  /**
+   * The draft body's own label, as `_drafts` served it
+   * (objectstack-ai/objectstack#22200, `ListDraftsResponseSchema`
+   * `drafts[].label`): a plain string, or on the UI types an inline locale map
+   * the reader resolves (`resolveI18nLabel`). Absent when the row's label is
+   * `null` — the producer's answer for a body that declares none — so a caller
+   * shows the name only where there is truly no label (objectui#11862). Copied
+   * as served; never a fallback to the name.
+   */
+  label?: I18nLabel;
+}
+
+/**
+ * A `_drafts` row's `label`, as served: a non-blank string or a locale map,
+ * else `undefined` (`null` and anything else).
+ */
+function servedLabel(raw: unknown): I18nLabel | undefined {
+  if (typeof raw === 'string') return raw.trim() ? raw : undefined;
+  if (raw && typeof raw === 'object' && !Array.isArray(raw)) return raw as I18nLabel;
+  return undefined;
 }
 
 /**
@@ -129,14 +150,19 @@ export async function fetchPendingDrafts(
   const list = Array.isArray(data) ? data : (data?.drafts ?? data?.data?.drafts ?? []);
   return (Array.isArray(list) ? list : [])
     .filter((d) => typeof d?.type === 'string' && typeof d?.name === 'string')
-    .map((d) => ({
-      type: d.type as string,
-      name: d.name as string,
-      packageId: typeof d.packageId === 'string' && d.packageId ? (d.packageId as string) : null,
-      // Only when served: an entry without `member` stays without one, so no
-      // caller ever sends an empty `?member=` (a blank selector is a 400).
-      ...(typeof d.member === 'string' && d.member ? { member: d.member as string } : {}),
-    }));
+    .map((d) => {
+      // objectui#11862 — the label, read off the row it arrived on.
+      const label = servedLabel(d.label);
+      return {
+        type: d.type as string,
+        name: d.name as string,
+        packageId: typeof d.packageId === 'string' && d.packageId ? (d.packageId as string) : null,
+        // Only when served: an entry without `member` stays without one, so no
+        // caller ever sends an empty `?member=` (a blank selector is a 400).
+        ...(typeof d.member === 'string' && d.member ? { member: d.member as string } : {}),
+        ...(label !== undefined ? { label } : {}),
+      };
+    });
 }
 
 export interface UsePendingDraftsOptions {
diff --git a/packages/app-shell/src/views/studio-design/StudioDesignSurface.accessRailLabels-11862.test.tsx b/packages/app-shell/src/views/studio-design/StudioDesignSurface.accessRailLabels-11862.test.tsx
index f41c9b27f8..9bf9fd0363 100644
--- a/packages/app-shell/src/views/studio-design/StudioDesignSurface.accessRailLabels-11862.test.tsx
+++ b/packages/app-shell/src/views/studio-design/StudioDesignSurface.accessRailLabels-11862.test.tsx
@@ -9,8 +9,14 @@
  *  - a set with a label reads as the label, with its machine name beneath it
  *    (small, monospace), and the row's accessible name stays the label;
  *  - CONTROL: a set with no label reads as its name alone, once;
- *  - CONTROL: a set listed from its draft header alone reads as its name
- *    alone — the draft header carries no label, and none is fetched for it.
+ *  - a set that exists only as a draft reads as the label its `_drafts` row
+ *    carries (objectstack-ai/objectstack#22200, ruling `6053526025` question 1),
+ *    with its machine name beneath it. The label is read off that row: the
+ *    set itself is not read for it;
+ *  - a draft's locale-map label reads in the designer locale, never as
+ *    `[object Object]`;
+ *  - CONTROL: a draft whose `_drafts` row carries no label (`null`, the
+ *    producer's honest answer) reads as its name alone, once.
  */
 
 import '@testing-library/jest-dom/vitest';
@@ -24,8 +30,13 @@ const mockClient = {
     if (type === 'object') return [{ name: 'a_account' }];
     return [];
   }),
-  // A draft-only set: the `_drafts` header carries its name and no label.
-  listDrafts: vi.fn(async () => [{ type: 'permission', name: 'dispatcher', packageId: 'app.a' }]),
+  // Draft-only sets: each `_drafts` row carries the draft body's own label,
+  // or `null` when the body declares none (objectstack-ai/objectstack#22200).
+  listDrafts: vi.fn(async () => [
+    { type: 'permission', name: 'dispatcher', packageId: 'app.a', label: 'Dispatcher' },
+    { type: 'permission', name: 'night_shift', packageId: 'app.a', label: { en: 'Night shift', 'zh-CN': '夜班' } },
+    { type: 'permission', name: 'auditor', packageId: 'app.a', label: null },
+  ]),
   layered: vi.fn(async (_type: string, name: string) => ({
     effective: { name, label: name === 'technician' ? 'Technician' : undefined, objects: {}, fields: {} },
     code: null,
@@ -92,9 +103,27 @@ describe('objectui#11862 — the permission-set list: label first, machine name
     expect(within(row).getAllByText('field_lead')).toHaveLength(1);
   });
 
-  it('CONTROL: a set listed from its draft header alone reads as its name alone', async () => {
+  it("a draft-only set reads as its `_drafts` row's label, its machine name as secondary text", async () => {
     renderPillar();
-    const row = await screen.findByRole('button', { name: 'dispatcher' });
-    expect(within(row).getAllByText('dispatcher')).toHaveLength(1);
+    const row = await screen.findByRole('button', { name: 'Dispatcher' });
+    expect(within(row).getByText('Dispatcher')).toBeInTheDocument();
+    expect(within(row).getByText('dispatcher')).toHaveClass('font-mono', 'text-[10px]');
+    expect(within(row).getByText('dispatcher')).toHaveAttribute('aria-hidden', 'true');
+    // Read off the row: the draft-only set is never read for its label.
+    const reads = [...mockClient.layered.mock.calls, ...mockClient.getDraft.mock.calls, ...mockClient.get.mock.calls];
+    expect(reads.filter((call) => (call as unknown[])[1] === 'dispatcher')).toEqual([]);
+  });
+
+  it("a draft's locale-map label reads in the designer locale", async () => {
+    renderPillar();
+    const row = await screen.findByRole('button', { name: 'Night shift' });
+    expect(within(row).getByText('night_shift')).toHaveClass('font-mono');
+    expect(row).not.toHaveTextContent('[object Object]');
+  });
+
+  it('CONTROL: a draft whose `_drafts` row carries no label reads as its name alone, once', async () => {
+    renderPillar();
+    const row = await screen.findByRole('button', { name: 'auditor' });
+    expect(within(row).getAllByText('auditor')).toHaveLength(1);
   });
 });
diff --git a/packages/app-shell/src/views/studio-design/StudioDesignSurface.navDraftLabels-11862.test.tsx b/packages/app-shell/src/views/studio-design/StudioDesignSurface.navDraftLabels-11862.test.tsx
new file mode 100644
index 0000000000..6f79f65d47
--- /dev/null
+++ b/packages/app-shell/src/views/studio-design/StudioDesignSurface.navDraftLabels-11862.test.tsx
@@ -0,0 +1,297 @@
+// Copyright (c) 2026 ObjectStack. Licensed under the Apache-2.0 license.
+
+/**
+ * objectui#11862 (the remainder) — the Interfaces nav editor names a draft-only
+ * target by the label its `_drafts` row carries, with the machine name as
+ * secondary text.
+ *
+ * On the maintainer's word 「所有地方以标签为主，机器名只作为次要信息」, and the seat
+ * ruling `6053526025` question 1 (A, at the producer): each `_drafts` row
+ * carries the draft body's own label, or `null` (objectstack-ai/objectstack#22200),
+ * and Studio reads it off that row rather than reading each item for its label.
+ *
+ * A label-less nav entry inherits its target's CURRENT label (the runtime's
+ * rule, `useNavTargetLabel`). A draft-only object or dashboard is in no
+ * published list, so the console's metadata cannot name it, and the entry read
+ * as its machine name in the rail, on the edit-mode cards and as the
+ * inspector's Label placeholder. The Studio surface now hands the pending
+ * drafts it already holds to that resolver as its last rung:
+ *
+ *  - the whole surface: the rail names a draft-only object entry and a
+ *    draft-only dashboard entry by their `_drafts` labels, machine name beneath;
+ *  - the edit-mode cards and the inspector's placeholder read the same label;
+ *  - the inspector's target picker offers a draft-only dashboard by the label
+ *    its `_drafts` row carries, as it offers a published one;
+ *  - the published label still wins where the console's metadata has one;
+ *  - CONTROL: a `_drafts` row whose label is `null` leaves the machine name
+ *    alone, once;
+ *  - a row stored under a plural type spelling is folded, as every `/meta`
+ *    reader folds it.
+ */
+
+import '@testing-library/jest-dom/vitest';
+import * as React from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, fireEvent, render, screen, within } from '@testing-library/react';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { MetadataCtx } from '@object-ui/react';
+
+const PKG = 'com.acme.app';
+
+const NAV = [
+  // Label-less entries, as the app scaffold and the *New dashboard* flow write them.
+  { id: 'nav_ticket', type: 'object', objectName: 'repairs_ticket' },
+  { id: 'nav_board', type: 'dashboard', dashboardName: 'ops_board' },
+  { id: 'nav_bare', type: 'object', objectName: 'b2r4_bare' },
+];
+const APP = { name: 'acme_app', label: 'Acme', navigation: NAV };
+
+/** The package's `_drafts` rows, as objectstack serves them since #22200. */
+const DRAFT_ROWS = [
+  { type: 'object', name: 'repairs_ticket', packageId: PKG, label: 'Repair Ticket', updatedAt: null, updatedBy: null },
+  { type: 'dashboard', name: 'ops_board', packageId: PKG, label: 'Ops board', updatedAt: null, updatedBy: null },
+  { type: 'object', name: 'b2r4_bare', packageId: PKG, label: null, updatedAt: null, updatedBy: null },
+];
+
+const mockClient = vi.hoisted(() => ({
+  list: vi.fn(async (type: string) => (type === 'app' ? [{ name: 'acme_app', label: 'Acme' }] : [])),
+  // The client's per-type `_drafts` read; the nav inspector's dashboard picker asks it.
+  listDrafts: vi.fn(async (options?: { packageId?: string; type?: string }): Promise<unknown[]> =>
+    options?.type === 'dashboard'
+      ? [
+          { type: 'dashboard', name: 'ops_board', packageId: 'com.acme.app', label: 'Ops board' },
+          { type: 'dashboard', name: 'night_board', packageId: 'com.acme.app', label: null },
+        ]
+      : [],
+  ),
+  listTypes: vi.fn(async () => ({ entries: [] })),
+  layered: vi.fn(async (type: string, name: string) => {
+    if (type === 'app') return { effective: JSON.parse(JSON.stringify({ name: 'acme_app', label: 'Acme', navigation: [] })) };
+    return { effective: { name } };
+  }),
+  getDraft: vi.fn(async () => null),
+  get: vi.fn(async () => undefined),
+  references: vi.fn(async () => []),
+  save: vi.fn(async () => ({})),
+  publish: vi.fn(async () => ({ success: true })),
+  reset: vi.fn(async () => ({})),
+}));
+
+vi.mock('../metadata-admin/useMetadata', async (importOriginal) => {
+  const mod = await importOriginal<typeof import('../metadata-admin/useMetadata')>();
+  return {
+    ...mod,
+    useMetadataClient: () => mockClient,
+    useMetadataTypes: () => ({ loading: false, error: null, entries: [] }),
+  };
+});
+
+const fetchPackagesMock = vi.hoisted(() => vi.fn());
+vi.mock('./packages-io', async (importOriginal) => {
+  const mod = await importOriginal<typeof import('./packages-io')>();
+  return { ...mod, fetchPackages: (...args: unknown[]) => fetchPackagesMock(...args) };
+});
+
+vi.mock('@object-ui/react', async (importOriginal) => {
+  const mod = await importOriginal<typeof import('@object-ui/react')>();
+  return { ...mod, useAdapter: () => ({}) };
+});
+
+vi.mock('sonner', () => ({
+  toast: { success: vi.fn(), error: vi.fn(), info: vi.fn(), dismiss: vi.fn() },
+  Toaster: () => null,
+}));
+
+vi.mock('../../components/SuggestedBindingsPanel', () => ({ SuggestedBindingsPanel: () => null }));
+vi.mock('../metadata-admin/AccessExplainPanel', () => ({ AccessExplainPanel: () => null }));
+vi.mock('./StudioAiCopilot', () => ({ StudioChatDock: () => null }));
+vi.mock('../../preview/DraftChangesPanel', () => ({ DraftChangesPanel: () => null }));
+
+import { StudioDesignSurface, StudioNavItemInspector } from './StudioDesignSurface';
+import { DraftTargetLabels, useNavTargetLabel } from '../../hooks/useNavTargetLabel';
+
+window.matchMedia = ((query: string) => ({
+  matches: false,
+  media: query,
+  onchange: null,
+  addEventListener: () => {},
+  removeEventListener: () => {},
+  addListener: () => {},
+  removeListener: () => {},
+  dispatchEvent: () => false,
+})) as unknown as typeof window.matchMedia;
+(globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver =
+  (globalThis as unknown as { ResizeObserver?: unknown }).ResizeObserver ??
+  class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  };
+
+/** The host's metadata cache: published only, so no draft-only target is in it. */
+const METADATA = {
+  apps: [],
+  objects: [{ name: 'b2r4_customer', label: 'Customers' }],
+  dashboards: [],
+  reports: [],
+  pages: [],
+  loading: false,
+  error: null,
+  refresh: async () => {},
+  invalidate: () => {},
+  ensureType: async () => [],
+  getItem: async () => null,
+  getItemsByType: () => [],
+  getTypeStatus: () => 'ready' as const,
+};
+
+beforeEach(() => {
+  for (const fn of Object.values(mockClient)) (fn as unknown as { mockClear: () => void }).mockClear();
+  mockClient.layered.mockImplementation(async (type: string, name: string) => {
+    if (type === 'app') return { effective: JSON.parse(JSON.stringify(APP)) };
+    return { effective: { name } };
+  });
+  fetchPackagesMock.mockReset();
+  fetchPackagesMock.mockResolvedValue([{ id: PKG, name: 'Acme', writable: true, namespace: 'acme' }]);
+  // The surface's pending-drafts feed (`GET /api/v1/meta/_drafts?packageId=…`).
+  vi.stubGlobal(
+    'fetch',
+    vi.fn(async (input: RequestInfo | URL) => {
+      const url = String(input);
+      const body = url.includes('/_drafts') ? { drafts: DRAFT_ROWS } : [];
+      return { ok: true, status: 200, json: async () => body };
+    }) as unknown as typeof fetch,
+  );
+});
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+});
+
+function renderSurface() {
+  return render(
+    <MetadataCtx.Provider value={METADATA as never}>
+      <MemoryRouter initialEntries={[`/studio/${PKG}/interfaces`]}>
+        <Routes>
+          <Route path="/studio/:packageId/:tab" element={<StudioDesignSurface />} />
+        </Routes>
+      </MemoryRouter>
+    </MetadataCtx.Provider>,
+  );
+}
+
+describe("objectui#11862 — the Interfaces nav editor names a draft-only target by its `_drafts` label", () => {
+  it('the rail: a draft-only object entry reads as its label, its machine name as secondary text', async () => {
+    renderSurface();
+    const row = await screen.findByRole('button', { name: 'Repair Ticket Object' }, { timeout: 8000 });
+    expect(within(row).getByText('repairs_ticket')).toHaveClass('font-mono', 'text-[10px]');
+    expect(within(row).getByText('repairs_ticket')).toHaveAttribute('aria-hidden', 'true');
+  });
+
+  it('the rail: a draft-only dashboard entry reads as its label, its machine name as secondary text', async () => {
+    renderSurface();
+    const row = await screen.findByRole('button', { name: 'Ops board Dashboard' }, { timeout: 8000 });
+    expect(within(row).getByText('ops_board')).toHaveClass('font-mono');
+  });
+
+  it('CONTROL: a `_drafts` row whose label is null leaves the machine name alone, once', async () => {
+    renderSurface();
+    const row = await screen.findByRole('button', { name: 'b2r4_bare Object' }, { timeout: 8000 });
+    expect(within(row).getAllByText('b2r4_bare')).toHaveLength(1);
+  });
+
+  it('the edit-mode cards read the same label, the machine name beside it', async () => {
+    renderSurface();
+    await screen.findByRole('button', { name: 'Repair Ticket Object' }, { timeout: 8000 });
+    fireEvent.click(screen.getByTitle(/^Edit navigation/));
+    const card = await screen.findByRole('button', { name: /^Repair Ticket/ });
+    expect(within(card).getByText('repairs_ticket')).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /^repairs_ticket/ })).toBeNull();
+  });
+});
+
+describe('objectui#11862 — the resolver the nav editor asks: the draft label is the last rung', () => {
+  function Probe({ target }: { target: Parameters<ReturnType<typeof useNavTargetLabel>>[0] }) {
+    const resolve = useNavTargetLabel();
+    return <output data-testid="probe">{resolve(target) ?? '(none)'}</output>;
+  }
+
+  function probe(target: Parameters<ReturnType<typeof useNavTargetLabel>>[0], drafts: unknown[]) {
+    render(
+      <MetadataCtx.Provider value={METADATA as never}>
+        <DraftTargetLabels.Provider value={drafts as never}>
+          <Probe target={target} />
+        </DraftTargetLabels.Provider>
+      </MetadataCtx.Provider>,
+    );
+    return screen.getByTestId('probe').textContent;
+  }
+
+  it("a draft-only object answers its `_drafts` row's label", () => {
+    expect(probe({ kind: 'object', objectName: 'repairs_ticket' }, DRAFT_ROWS)).toBe('Repair Ticket');
+  });
+
+  it('the published label still wins over a pending draft of the same object', () => {
+    const drafts = [{ type: 'object', name: 'b2r4_customer', label: 'Draft customers' }];
+    expect(probe({ kind: 'object', objectName: 'b2r4_customer' }, drafts)).toBe('Customers');
+  });
+
+  it('a row stored under a plural type spelling is folded to its singular type', () => {
+    const drafts = [{ type: 'objects', name: 'repairs_ticket', label: 'Repair Ticket' }];
+    expect(probe({ kind: 'object', objectName: 'repairs_ticket' }, drafts)).toBe('Repair Ticket');
+  });
+
+  it("a draft of another type does not name the target", () => {
+    const drafts = [{ type: 'dashboard', name: 'repairs_ticket', label: 'Not this one' }];
+    expect(probe({ kind: 'object', objectName: 'repairs_ticket' }, drafts)).toBe('(none)');
+  });
+
+  it('CONTROL: with no provider the resolver answers as it did — nothing for a target the metadata lacks', () => {
+    render(
+      <MetadataCtx.Provider value={METADATA as never}>
+        <Probe target={{ kind: 'object', objectName: 'repairs_ticket' }} />
+      </MetadataCtx.Provider>,
+    );
+    expect(screen.getByTestId('probe').textContent).toBe('(none)');
+  });
+
+  it("the inspector's Label placeholder inherits the draft label", () => {
+    render(
+      <MetadataCtx.Provider value={METADATA as never}>
+        <DraftTargetLabels.Provider value={DRAFT_ROWS as never}>
+          <StudioNavItemInspector
+            navId="navigation[0]"
+            appDraft={{ navigation: NAV }}
+            objects={[{ name: 'repairs_ticket', label: 'Repair Ticket' }]}
+            packageId={PKG}
+            onNavPatch={vi.fn()}
+            onClear={vi.fn()}
+          />
+        </DraftTargetLabels.Provider>
+      </MetadataCtx.Provider>,
+    );
+    expect(screen.getByPlaceholderText('Repair Ticket')).toBeInTheDocument();
+  });
+
+  it("the inspector's target picker offers a draft-only dashboard by its `_drafts` label", async () => {
+    render(
+      <MetadataCtx.Provider value={METADATA as never}>
+        <StudioNavItemInspector
+          navId="navigation[1]"
+          appDraft={{ navigation: NAV }}
+          objects={[]}
+          packageId={PKG}
+          onNavPatch={vi.fn()}
+          onClear={vi.fn()}
+        />
+      </MetadataCtx.Provider>,
+    );
+    fireEvent.keyDown(screen.getByRole('combobox', { name: 'Dashboard' }), { key: 'ArrowDown' });
+    const listbox = await screen.findByRole('listbox');
+    expect(await within(listbox).findByRole('option', { name: 'Ops board (ops_board)' })).toBeInTheDocument();
+    // CONTROL: a `_drafts` row with no label is offered by its name alone.
+    expect(within(listbox).getByRole('option', { name: 'night_board' })).toBeInTheDocument();
+    expect(mockClient.listDrafts).toHaveBeenCalledWith({ packageId: PKG, type: 'dashboard' });
+  });
+});
diff --git a/packages/app-shell/src/views/studio-design/StudioDesignSurface.tsx b/packages/app-shell/src/views/studio-design/StudioDesignSurface.tsx
index e79bd95b36..d2f6323592 100644
--- a/packages/app-shell/src/views/studio-design/StudioDesignSurface.tsx
+++ b/packages/app-shell/src/views/studio-design/StudioDesignSurface.tsx
@@ -202,7 +202,7 @@ import {
   renamedLabel,
   type NavEntryLike,
 } from '../metadata-admin/previews/navItemLabel.js';
-import { useNavTargetLabel } from '../../hooks/useNavTargetLabel.js';
+import { DraftTargetLabels, useNavTargetLabel } from '../../hooks/useNavTargetLabel.js';
 import { listAppComponents } from '../../services/componentRegistry.js';
 import {
   NAV_ENTRY_TYPES,
@@ -1792,20 +1792,27 @@ export function StudioDesignSurface({ aiSlot }: StudioDesignSurfaceProps): React
               // draft; the previous package's page stayed open and saved into
               // the next one. One reset, of all of it. This is a new document,
               // not a data refresh, which Commandment #8 keeps from a key bump.
-              <InterfacesPillar
-                key={packageId}
-                packageId={packageId}
-                publishNonce={publishNonce}
-                draftNonce={draftNonce}
-                onDraftSaved={onDraftSaved}
-                onCreateApp={readOnly ? undefined : () => setAppCreating(true)}
-                readOnly={readOnly}
-                readOnlySettled={pkgWritable !== undefined}
-                foldInspector={chatDockMode}
-                onDirtyChange={setPillarDirty}
-                onSurfaceLabelChange={setSurfaceLabel}
-                onHeldEditChange={setHeldEdit}
-              />
+              // objectui#11862 — the pending drafts read above (the Changes
+              // count's `_drafts` rows, each with its label) are the last rung
+              // of the nav editor's label resolver: a label-less entry that
+              // opens a draft-only object or dashboard reads as that draft's
+              // label, not its machine name. No read is added for it.
+              <DraftTargetLabels.Provider value={pendingEntries}>
+                <InterfacesPillar
+                  key={packageId}
+                  packageId={packageId}
+                  publishNonce={publishNonce}
+                  draftNonce={draftNonce}
+                  onDraftSaved={onDraftSaved}
+                  onCreateApp={readOnly ? undefined : () => setAppCreating(true)}
+                  readOnly={readOnly}
+                  readOnlySettled={pkgWritable !== undefined}
+                  foldInspector={chatDockMode}
+                  onDirtyChange={setPillarDirty}
+                  onSurfaceLabelChange={setSurfaceLabel}
+                  onHeldEditChange={setHeldEdit}
+                />
+              </DraftTargetLabels.Provider>
             )}
           </div>
         </div>
@@ -2431,9 +2438,12 @@ function usePackageNavTargets(
           if (!name || byName.has(name) || !isNavTargetRow(metaType, row)) continue;
           byName.set(name, { name, label: row.label as I18nLabel | undefined });
         }
-        for (const draft of drafts ?? []) {
+        // objectui#11862 — a draft-only target carries the label its `_drafts`
+        // row serves (objectstack-ai/objectstack#22200), so the picker offers
+        // it by that label, as it offers a published one.
+        for (const draft of (drafts ?? []) as Array<{ name?: string | null; label?: I18nLabel | null }>) {
           const name = typeof draft?.name === 'string' ? draft.name : '';
-          if (name && !byName.has(name)) byName.set(name, { name });
+          if (name && !byName.has(name)) byName.set(name, { name, label: draft.label ?? undefined });
         }
       } catch {
         /* non-fatal — the picker just stays empty */
@@ -4647,7 +4657,9 @@ export function DataPillar({
         // whose objects are all drafts would render an empty (previously:
         // forever-"loading") rail.
         //
-        // objectui#11843 — a draft header carries no label, so a draft-only
+        // objectui#11843 — written when a draft header carried no label (since
+        // objectstack-ai/objectstack#22200 the `_drafts` row carries one; this
+        // read predates it and still works, objectui#11862), a draft-only
         // object takes its label from the draft-overlaid list
         // (`GET /meta/object?package=…&preview=draft`), which serves each
         // pending draft of the package with its own label and a `_draft` mark.
@@ -6090,10 +6102,12 @@ export function AutomationsPillar({
         // draft exists. Mirrors the Data / Interfaces / Access pillars, which all
         // merge their drafts. Keyed on `publishNonce` too so drafts that go live
         // collapse back into the published rail after a package publish.
+        // objectui#11862 — a draft-only flow reads as the label its `_drafts`
+        // row carries, resolved in the designer locale.
         const [items, registrations] = await Promise.all([
           packageId === null
-            ? loadPackageLessSurfaces(client, 'flow')
-            : loadPackageSurfaces(client, 'flow', packageId),
+            ? loadPackageLessSurfaces(client, 'flow', locale)
+            : loadPackageSurfaces(client, 'flow', packageId, locale),
           readFlowRegistrations(client, packageId),
         ]);
         if (cancelled) return;
@@ -6108,7 +6122,7 @@ export function AutomationsPillar({
         const named = initialSurface?.type === 'flow' ? initialSurface.name : null;
         if (named && !deepLinked && packageId !== null && !deepLinkProbedRef.current) {
           deepLinkProbedRef.current = true;
-          const packageLess = await loadPackageLessSurfaces(client, 'flow').catch(() => []);
+          const packageLess = await loadPackageLessSurfaces(client, 'flow', locale).catch(() => []);
           if (cancelled) return;
           if (packageLess.some((f) => f.name === named)) {
             navigate(studioOrgScopePath({ type: 'flow', name: named }), { replace: true });
@@ -6125,7 +6139,7 @@ export function AutomationsPillar({
     return () => {
       cancelled = true;
     };
-  }, [client, packageId, publishNonce, metadataRefreshNonce]);
+  }, [client, packageId, publishNonce, metadataRefreshNonce, locale]);
 
   const doCreateFlow = React.useCallback(
     async (label: string, name: string, trigger: NewFlowTrigger | null) => {
@@ -6945,10 +6959,14 @@ export function AccessPillar({
           isDefault: !!(p as Record<string, unknown>).isDefault,
         });
       }
-      for (const d of (drafts as Array<{ name?: string }>) || []) {
+      // objectui#11862 — a draft-only set reads as the label its `_drafts` row
+      // carries (objectstack-ai/objectstack#22200), in the designer locale; the
+      // set is not read for it (ruling `6053526025`, question 1). A row with
+      // no label leaves `label` empty, and the rail shows the name alone.
+      for (const d of (drafts as Array<{ name?: string; label?: I18nLabel | null }>) || []) {
         const name = String(d?.name ?? '');
         if (!name || byName.has(name)) continue;
-        byName.set(name, { name, label: name });
+        byName.set(name, { name, label: navItemLabelText(d?.label ?? undefined, locale).trim() });
       }
       const scoped = [...byName.values()];
       setPerms(scoped);
@@ -6967,7 +6985,7 @@ export function AccessPillar({
     } finally {
       setLoaded(true);
     }
-  }, [client, packageId]);
+  }, [client, packageId, locale]);
 
   React.useEffect(() => {
     void load();
@@ -7181,9 +7199,8 @@ export function AccessPillar({
               >
                 <Shield className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
                 {/* objectui#11862 — the set's label first, its machine name as
-                    secondary text. A set listed from its draft header alone
-                    has no label in hand (the header carries none), so its
-                    name is the text, as before. */}
+                    secondary text. A draft-only set's label is the one its
+                    `_drafts` row carries; with none, its name is the text. */}
                 <StudioNameLabel label={p.label} name={p.name} />
                 {p.isDefault && (
                   <span className="text-[9px] uppercase tracking-wide text-muted-foreground/60">
diff --git a/packages/app-shell/src/views/studio-design/packageSurfaces.test.ts b/packages/app-shell/src/views/studio-design/packageSurfaces.test.ts
index 8fcc7cfc0d..76be25ecd1 100644
--- a/packages/app-shell/src/views/studio-design/packageSurfaces.test.ts
+++ b/packages/app-shell/src/views/studio-design/packageSurfaces.test.ts
@@ -17,7 +17,7 @@ import { loadPackageLessSurfaces, loadPackageSurfaces, type PackageSurfaceClient
 
 function makeClient(
   published: Array<Record<string, unknown>>,
-  drafts: Array<{ name?: string | null; packageId?: string | null }> | Error,
+  drafts: Array<{ name?: string | null; packageId?: string | null; label?: unknown }> | Error,
 ): PackageSurfaceClient {
   return {
     list: vi.fn(async () => published),
@@ -147,3 +147,65 @@ describe('loadPackageLessSurfaces (objectui#11553)', () => {
     expect(items).toEqual([{ type: 'flow', name: 'qa_urgent_alert_clone', label: 'QA urgent alert clone' }]);
   });
 });
+
+/**
+ * objectui#11862 — a draft-only item reads as the label its `_drafts` row
+ * carries. Since objectstack-ai/objectstack#22200 each row carries the draft
+ * body's own label, or `null` when the body declares none; the seat ruling
+ * `6053526025` (question 1, A at the producer) has every rail read it off that
+ * row. The rail used to name such an item by its machine name until its body
+ * was opened. A published row still wins, with its own label.
+ */
+describe("a draft-only item reads as its `_drafts` row's label (objectui#11862)", () => {
+  it("a draft-only flow takes the label its `_drafts` row carries", async () => {
+    const client = makeClient([], [{ name: 'ft_draft_only', label: 'Draft only flow' }]);
+
+    const items = await loadPackageSurfaces(client, 'flow', 'pkg');
+
+    expect(items).toEqual([{ type: 'flow', name: 'ft_draft_only', label: 'Draft only flow' }]);
+  });
+
+  it('a locale-map label resolves in the locale the rail is drawn in, never as [object Object]', async () => {
+    const client = makeClient([], [{ name: 'ft_map', label: { en: 'Approval', 'zh-CN': '审批' } }]);
+
+    expect(await loadPackageSurfaces(client, 'flow', 'pkg', 'zh-CN')).toEqual([
+      { type: 'flow', name: 'ft_map', label: '审批' },
+    ]);
+    expect(await loadPackageSurfaces(client, 'flow', 'pkg', 'en-US')).toEqual([
+      { type: 'flow', name: 'ft_map', label: 'Approval' },
+    ]);
+  });
+
+  it("CONTROL: a row whose label is null, or blank, reads as its name", async () => {
+    const client = makeClient([], [
+      { name: 'ft_null', label: null },
+      { name: 'ft_blank', label: '  ' },
+    ]);
+
+    const items = await loadPackageSurfaces(client, 'flow', 'pkg');
+
+    expect(items).toEqual([
+      { type: 'flow', name: 'ft_null', label: 'ft_null' },
+      { type: 'flow', name: 'ft_blank', label: 'ft_blank' },
+    ]);
+  });
+
+  it("a published row still wins over a same-named draft's label", async () => {
+    const client = makeClient(
+      [{ name: 'shared', label: 'Published Label' }],
+      [{ name: 'shared', label: 'Draft Label' }],
+    );
+
+    expect(await loadPackageSurfaces(client, 'flow', 'pkg')).toEqual([
+      { type: 'flow', name: 'shared', label: 'Published Label' },
+    ]);
+  });
+
+  it('the package-less loader reads the same label', async () => {
+    const client = makeClient([], [{ name: 'org_draft_only', packageId: null, label: 'Org draft' }]);
+
+    expect(await loadPackageLessSurfaces(client, 'flow')).toEqual([
+      { type: 'flow', name: 'org_draft_only', label: 'Org draft' },
+    ]);
+  });
+});
diff --git a/packages/app-shell/src/views/studio-design/packageSurfaces.ts b/packages/app-shell/src/views/studio-design/packageSurfaces.ts
index 752e07e6bf..f0ea40e377 100644
--- a/packages/app-shell/src/views/studio-design/packageSurfaces.ts
+++ b/packages/app-shell/src/views/studio-design/packageSurfaces.ts
@@ -17,21 +17,33 @@
  * the sole rail that listed only published items and hid draft-only flows, and
  * (b) makes the behaviour unit-testable without rendering a heavy pillar tree.
  *
- * Draft headers carry no label (they are light rows — no body), so a draft-only
- * item shows its machine name until the draft body loads on selection, matching
- * the sibling pillars.
+ * A draft-only item reads as the label its `_drafts` row carries
+ * (objectui#11862): since objectstack-ai/objectstack#22200 each row carries the
+ * draft body's own label, or `null` when the body declares none, so the label
+ * is read off the row and the item is never read for it (seat ruling
+ * `6053526025`, question 1). A locale map resolves in the `locale` the rail is
+ * drawn in, through the spec's own `resolveI18nLabel`. Only a row with no label
+ * shows its machine name.
  */
 
+import { resolveI18nLabel, type I18nLabel } from '@objectstack/spec/ui';
 import { isPackageLessDraft, isPackageLessItem } from './studioScope.js';
 
 /** Minimal structural view of the metadata client this helper needs. */
 export interface PackageSurfaceClient {
   list(type: string, options?: { packageId?: string }): Promise<unknown>;
+  /**
+   * The `_drafts` rows: the members read here are the name, the package and
+   * the label the draft body declares (`ListDraftsResponseSchema` `drafts[]`).
+   */
   listDrafts(
     options?: { packageId?: string; type?: string },
-  ): Promise<Array<{ name?: string | null; packageId?: string | null }>>;
+  ): Promise<Array<{ name?: string | null; packageId?: string | null; label?: I18nLabel | null }>>;
 }
 
+/** One `_drafts` row, as {@link PackageSurfaceClient.listDrafts} answers it. */
+type DraftRow = Awaited<ReturnType<PackageSurfaceClient['listDrafts']>>[number];
+
 /** One rail entry — mirrors the `Surface` shape used by the pillars. */
 export interface PackageSurface {
   type: string;
@@ -42,7 +54,8 @@ export interface PackageSurface {
 /**
  * Fetch published + pending-draft items of `type` for `packageId` and merge them
  * into rail entries. Published rows win on name collision (their real label is
- * kept); draft-only names are appended with the machine name as the label.
+ * kept); draft-only items are appended with the label their `_drafts` row
+ * carries, in `locale`, else the machine name.
  *
  * `listDrafts` failures are tolerated (an older server without the drafts
  * endpoint, or a transient error) — the rail still renders the published set
@@ -52,14 +65,15 @@ export async function loadPackageSurfaces(
   client: PackageSurfaceClient,
   type: string,
   packageId: string,
+  locale?: string,
 ): Promise<PackageSurface[]> {
   const [published, draftHeaders] = await Promise.all([
     client.list(type, { packageId }) as Promise<Array<Record<string, unknown>> | null | undefined>,
     client
       .listDrafts({ packageId, type })
-      .catch(() => [] as Array<{ name?: string | null }>),
+      .catch(() => [] as DraftRow[]),
   ]);
-  return mergeSurfaces(type, published, draftHeaders);
+  return mergeSurfaces(type, published, draftHeaders, locale);
 }
 
 /**
@@ -78,17 +92,19 @@ export async function loadPackageSurfaces(
 export async function loadPackageLessSurfaces(
   client: PackageSurfaceClient,
   type: string,
+  locale?: string,
 ): Promise<PackageSurface[]> {
   const [published, draftHeaders] = await Promise.all([
     client.list(type) as Promise<Array<Record<string, unknown>> | null | undefined>,
     client
       .listDrafts({ type })
-      .catch(() => [] as Array<{ name?: string | null; packageId?: string | null }>),
+      .catch(() => [] as DraftRow[]),
   ]);
   return mergeSurfaces(
     type,
     (published || []).filter((o) => isPackageLessItem(o)),
     (draftHeaders || []).filter((d) => isPackageLessDraft(d)),
+    locale,
   );
 }
 
@@ -96,7 +112,8 @@ export async function loadPackageLessSurfaces(
 function mergeSurfaces(
   type: string,
   published: Array<Record<string, unknown>> | null | undefined,
-  draftHeaders: Array<{ name?: string | null }> | null | undefined,
+  draftHeaders: DraftRow[] | null | undefined,
+  locale: string | undefined,
 ): PackageSurface[] {
   const items: PackageSurface[] = (published || [])
     .map((o) => ({
@@ -110,7 +127,8 @@ function mergeSurfaces(
   for (const d of draftHeaders || []) {
     const name = String(d?.name ?? '');
     if (name && !known.has(name)) {
-      items.push({ type, name, label: name });
+      const label = resolveI18nLabel(d?.label ?? undefined, locale)?.trim();
+      items.push({ type, name, label: label || name });
       known.add(name);
     }
   }