From 3723265f56a08e7c3f709af0a4d1341d64891775 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 15 Oct 2026 23:00:09 +0000
Subject: [PATCH 1/3] feat(app-shell): the item header owns the status chip's
 place (objectui#12524)

StudioItemHeader takes the item's status as data (`status`) and draws the
amber chip itself, after the identity (title, api-name and kind chips) and
before the meta. The Data, Automations and Interfaces pillars pass their
"Unpublished draft" status through it, and Access its writable "saved as
draft" note; the Interfaces chip leaves the actions slot, which now holds
actions only. The identity sits in one `contents` wrapper, so the chip is
the same child of the same row in every pillar.

Claude-Session: https://claude.ai/code/session_01GzRy6FiHuy1vpBecH2KRYM
Co-authored-by: Claude <noreply@anthropic.com>
---
 .../studio-design/StudioDesignSurface.tsx     |  45 +--
 ...tudioItemHeader.statusPlace-12524.test.tsx | 286 ++++++++++++++++++
 .../views/studio-design/StudioItemHeader.tsx  |  62 +++-
 3 files changed, 353 insertions(+), 40 deletions(-)
 create mode 100644 packages/app-shell/src/views/studio-design/StudioItemHeader.statusPlace-12524.test.tsx

diff --git a/packages/app-shell/src/views/studio-design/StudioDesignSurface.tsx b/packages/app-shell/src/views/studio-design/StudioDesignSurface.tsx
index 844ff8cf0f..5d519af29a 100644
--- a/packages/app-shell/src/views/studio-design/StudioDesignSurface.tsx
+++ b/packages/app-shell/src/views/studio-design/StudioDesignSurface.tsx
@@ -39,7 +39,7 @@ import {
   STUDIO_KIND_CHIP,
 } from './studio-tokens.js';
 import { StudioInspector } from './StudioInspector.js';
-import { StudioItemHeader, StudioTab } from './StudioItemHeader.js';
+import { StudioItemHeader, StudioStatusChip, StudioTab, type StudioItemStatus } from './StudioItemHeader.js';
 import { overlayPath } from './BuilderLanding.js';
 import { DATA_CONTENT_CONTAINER, DATA_TAB_FLAT_ONLY, DATA_TAB_FOLDED_ONLY } from './dataTabsFold.js';
 import { StudioRail, StudioRailGroup, StudioRailRow } from './StudioRail.js';
@@ -4014,13 +4014,11 @@ export function InterfacesPillar({
           </span>
         ) : undefined
       }
+      // objectui#12524 — the draft status sits after the kind chip, as in
+      // every pillar; the right slot holds actions only.
+      status={hasDraft && draftLoaded ? { label: t('engine.studio.unpublishedDraft', locale) } : undefined}
       actions={
         <>
-          {hasDraft && draftLoaded && (
-            <span className="rounded bg-amber-400/15 px-2 py-0.5 text-[11px] text-amber-600 dark:text-amber-300">
-              {t('engine.studio.unpublishedDraft', locale)}
-            </span>
-          )}
           {/* objectui#5813 — drafts auto-save; the spinner is the affordance. */}
           {saving === 'draft' && (
             <span className="inline-flex items-center gap-1 text-[11px] text-muted-foreground" data-testid="if-autosaving">
@@ -5805,13 +5803,7 @@ export function DataPillar({
             titleProps={current ? undefined : { className: 'text-[13px] font-normal text-muted-foreground' }}
             apiName={current?.name}
             meta={current && objLoaded ? tFormat('engine.studio.data.fieldCount', locale, { count: fieldCount }) : undefined}
-            chips={
-              hasDraft && objLoaded ? (
-                <span className="rounded bg-amber-400/15 px-2 py-0.5 text-[11px] text-amber-600 dark:text-amber-300">
-                  {t('engine.studio.unpublishedDraft', locale)}
-                </span>
-              ) : undefined
-            }
+            status={hasDraft && objLoaded ? { label: t('engine.studio.unpublishedDraft', locale) } : undefined}
             actions={
               <>
                 {/* objectui#5813 — drafts auto-save (see useDraftAutoSave above); the
@@ -7412,13 +7404,7 @@ export function AutomationsPillar({
                 <span className="hidden 2xl:inline">{t('engine.studio.auto.designersMissing', locale)}</span>
               )
             }
-            chips={
-              hasDraft && flowLoaded ? (
-                <span className="rounded bg-amber-400/15 px-2 py-0.5 text-[11px] text-amber-600 dark:text-amber-300">
-                  {t('engine.studio.unpublishedDraft', locale)}
-                </span>
-              ) : undefined
-            }
+            status={hasDraft && flowLoaded ? { label: t('engine.studio.unpublishedDraft', locale) } : undefined}
             actions={
               <>
                 {/* objectui#5813 — drafts auto-save; the spinner is the affordance. */}
@@ -7965,19 +7951,20 @@ export function AccessPillar({
   // the note was, and the link's title carries the note's sentence. An open
   // set's header draws it at the tab row's right end (objectui#12456: the
   // title row truncated the set's label at the 1280 px design width).
-  const accessNoteEl = readOnly ? (
+  // objectui#12524 — the writable note is this pillar's draft status: the
+  // header draws it in the status place every pillar shares. The read-only
+  // link is an action, so it stays in the actions slot.
+  const accessStatus: StudioItemStatus | undefined = readOnly
+    ? undefined
+    : { label: t('engine.studio.access.banner', locale), title: t('engine.studio.access.bannerTitle', locale) };
+  const accessNoteEl = accessStatus ? (
+    <StudioStatusChip {...accessStatus} />
+  ) : (
     <StudioReadOnlyLink
       packageId={packageId}
       title={t('engine.studio.access.bannerTitleReadOnly', locale)}
       locale={locale}
     />
-  ) : (
-    <span
-      title={t('engine.studio.access.bannerTitle', locale)}
-      className="rounded bg-amber-400/15 px-2 py-0.5 text-[11px] text-amber-600 dark:text-amber-300"
-    >
-      {t('engine.studio.access.banner', locale)}
-    </span>
   );
   const accessExplainEl = (
     <button
@@ -8007,7 +7994,7 @@ export function AccessPillar({
       icon={owdOpen ? ShieldCheck : Shield}
       title={owdOpen ? t('engine.studio.owd.title', locale) : t('engine.studio.access.title', locale)}
       meta={owdOpen ? t('engine.studio.owd.subtitle', locale) : t('engine.studio.access.subtitle', locale)}
-      chips={readOnly ? undefined : accessNoteEl}
+      status={accessStatus}
       actions={
         <>
           {readOnly && accessNoteEl}
diff --git a/packages/app-shell/src/views/studio-design/StudioItemHeader.statusPlace-12524.test.tsx b/packages/app-shell/src/views/studio-design/StudioItemHeader.statusPlace-12524.test.tsx
new file mode 100644
index 0000000000..d5ec0d9a33
--- /dev/null
+++ b/packages/app-shell/src/views/studio-design/StudioItemHeader.statusPlace-12524.test.tsx
@@ -0,0 +1,286 @@
+// Copyright (c) 2026 ObjectStack. Licensed under the Apache-2.0 license.
+
+/**
+ * objectui#12524 — the draft status chip sits in the same place in every
+ * pillar's item header.
+ *
+ * Measured in the 2026-10-15 Studio test pass (a writable package): Data and
+ * Automations showed "Unpublished draft" beside the title, Access its "saved
+ * as draft" note beside the title, and Interfaces "Unpublished draft" at the
+ * far right, among the Design / Run actions. Four headers, two positions.
+ *
+ * `StudioItemHeader` now takes the status as data (`status`) and draws the
+ * chip itself, after the identity (title, api-name or kind chips) and before
+ * the meta; the right slot holds actions only. The identity sits in one
+ * `contents` wrapper, so the chip is the same child of the same row whatever
+ * identity chips a pillar shows.
+ *
+ * The REAL four pillars against one server double that serves a pending draft
+ * for the open object, the open flow and the open page. Access has no
+ * item-level draft: its writable "saved as draft" note is the pillar's status.
+ *
+ * Pinned:
+ *  - with a draft, the chip in all four headers is a child of the header's
+ *    title row at the same index, after the identity and outside the actions;
+ *  - the Interfaces actions keep their order with the chip gone from them;
+ *  - CONTROL: no draft (and, for Access, a read-only package), no chip, and
+ *    Access's read-only link stays in the actions slot.
+ */
+
+import '@testing-library/jest-dom/vitest';
+import * as React from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, render, screen, waitFor, within } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+
+const PKG = 'com.acme.app';
+
+const OBJECT = { name: 'acme_account', label: 'Account', fields: { title: { name: 'title', type: 'text' } } };
+const FLOW = {
+  name: 'route_lead',
+  label: 'Route lead',
+  type: 'autolaunched',
+  status: 'active',
+  nodes: [
+    { id: 'start', type: 'start', label: 'Start', config: { triggerType: 'record-after-create', objectName: 'acme_account' } },
+    { id: 'end', type: 'end', label: 'End' },
+  ],
+  edges: [{ id: 'e1', source: 'start', target: 'end' }],
+};
+const APP = { name: 'acme_app', label: 'Acme', navigation: [{ id: 'nav_home', type: 'page', label: 'Home', pageName: 'home' }] };
+const PAGE = {
+  name: 'home',
+  label: 'Home',
+  type: 'app',
+  regions: [{ name: 'main', components: [{ id: 'hello', type: 'element:text', properties: { content: 'Hello' } }] }],
+};
+
+const server = vi.hoisted(() => ({
+  active: new Map<string, Record<string, unknown>>(),
+  /** Whether the open object, flow and page each have a pending draft. */
+  drafts: true,
+}));
+
+const mockClient = vi.hoisted(() => {
+  const k = (type: string, name: string) => `${type}/${name}`;
+  const client = {
+    withPreviewDrafts: vi.fn((): unknown => client),
+    list: vi.fn(async (type: string) =>
+      [...server.active.entries()].filter(([key]) => key.startsWith(`${type}/`)).map(([, row]) => row),
+    ),
+    listDrafts: vi.fn(async () => []),
+    listTypes: vi.fn(async () => ({ entries: [] })),
+    get: vi.fn(async () => null),
+    references: vi.fn(async () => []),
+    layered: vi.fn(async (type: string, name: string) => {
+      const eff = server.active.get(k(type, name)) ?? null;
+      return { code: null, overlay: eff, overlayScope: eff ? 'env' : null, effective: eff, editable: true, deletable: true, resettable: false, lock: 'none' };
+    }),
+    getDraft: vi.fn(async (type: string, name: string) => {
+      const body = server.drafts && type !== 'app' ? server.active.get(k(type, name)) : undefined;
+      if (body) return { item: JSON.parse(JSON.stringify(body)) };
+      throw Object.assign(new Error(`No pending draft exists for ${type}/${name}.`), { code: 'NO_DRAFT', status: 404 });
+    }),
+    save: vi.fn(async (type: string, name: string, item: unknown) => ({ type, name, item })),
+    publish: vi.fn(async () => ({ success: true })),
+    reset: vi.fn(async () => ({})),
+  };
+  return client;
+});
+
+vi.mock('../metadata-admin/useMetadata', async (importOriginal) => {
+  const mod = await importOriginal<typeof import('../metadata-admin/useMetadata')>();
+  return { ...mod, useMetadataClient: () => mockClient, useMetadataTypes: () => ({ entries: [] }) };
+});
+
+vi.mock('./packages-io', async (importOriginal) => {
+  const mod = await importOriginal<typeof import('./packages-io')>();
+  return { ...mod, fetchPackages: vi.fn(async () => []) };
+});
+
+vi.mock('@object-ui/react', async (importOriginal) => {
+  const mod = await importOriginal<typeof import('@object-ui/react')>();
+  return { ...mod, useAdapter: () => dataSource };
+});
+
+vi.mock('sonner', () => ({ toast: { success: vi.fn(), error: vi.fn() } }));
+
+// The Access pillar's siblings that play no part in its header.
+vi.mock('../../components/SuggestedBindingsPanel', () => ({ SuggestedBindingsPanel: () => null }));
+vi.mock('../metadata-admin/AccessExplainPanel', () => ({ AccessExplainPanel: () => null }));
+
+import { AccessPillar, AutomationsPillar, DataPillar, InterfacesPillar } from './StudioDesignSurface';
+import '../../services/builtinComponents.js';
+import { t } from '../metadata-admin/i18n';
+import { createEmptyDataSource, failOnAbsorbedFetchError } from './__tests__/emptyDataSource';
+import { registerMetadataPreview } from '../metadata-admin/preview-registry';
+import { registerMetadataInspector } from '../metadata-admin/inspector-registry';
+import { registerMetadataDefaultInspector } from '../metadata-admin/default-inspector-registry';
+import { PagePreview } from '../metadata-admin/previews/PagePreview';
+import { PageBlockInspector } from '../metadata-admin/inspectors/PageBlockInspector';
+import { PageDefaultInspector } from '../metadata-admin/inspectors/PageDefaultInspector';
+import { FlowPreview } from '../metadata-admin/previews/FlowPreview';
+import { FlowInspector } from '../metadata-admin/inspectors/FlowInspector';
+
+const dataSource = createEmptyDataSource();
+failOnAbsorbedFetchError();
+
+registerMetadataPreview('page', PagePreview);
+registerMetadataInspector('page', PageBlockInspector);
+registerMetadataDefaultInspector('page', PageDefaultInspector);
+registerMetadataPreview('flow', FlowPreview);
+registerMetadataInspector('flow', FlowInspector);
+
+const en = (key: string) => t(key, 'en');
+
+beforeEach(() => {
+  server.active.clear();
+  server.drafts = true;
+  for (const [type, body] of [
+    ['object', OBJECT],
+    ['flow', FLOW],
+    ['app', APP],
+    ['page', PAGE],
+  ] as const) {
+    server.active.set(`${type}/${body.name}`, JSON.parse(JSON.stringify(body)));
+  }
+  for (const fn of Object.values(mockClient)) (fn as unknown as { mockClear: () => void }).mockClear();
+  vi.stubGlobal(
+    'fetch',
+    vi.fn(async () => new Response('null', { status: 404, headers: { 'content-type': 'application/json' } })),
+  );
+});
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+});
+
+type PillarCase = {
+  pillar: string;
+  testId: string;
+  element: (readOnly: boolean) => React.ReactElement;
+  /** Resolves once the open item's draft read has settled. */
+  settled: (header: HTMLElement) => Promise<void>;
+};
+
+const CASES: PillarCase[] = [
+  {
+    pillar: 'Data',
+    testId: 'data-object-header',
+    element: (readOnly) => <DataPillar packageId={PKG} readOnly={readOnly} />,
+    settled: async (header) => {
+      await within(header).findByText(OBJECT.name, undefined, { timeout: 8000 });
+    },
+  },
+  {
+    pillar: 'Automations',
+    testId: 'auto-flow-header',
+    element: (readOnly) => <AutomationsPillar packageId={PKG} readOnly={readOnly} />,
+    settled: async () => {
+      await screen.findByTestId('auto-flow-meta', undefined, { timeout: 8000 });
+    },
+  },
+  {
+    pillar: 'Interfaces',
+    testId: 'if-item-header',
+    element: (readOnly) => <InterfacesPillar packageId={PKG} readOnly={readOnly} />,
+    settled: async () => {
+      await screen.findByRole('button', { name: 'Select hello' }, { timeout: 8000 });
+    },
+  },
+  {
+    pillar: 'Access',
+    testId: 'access-item-header',
+    element: (readOnly) => <AccessPillar packageId={PKG} readOnly={readOnly} />,
+    settled: async (header) => {
+      await within(header).findByRole('button', { name: en('engine.studio.access.explain.open') }, { timeout: 8000 });
+    },
+  },
+];
+
+async function openHeader(c: PillarCase, readOnly = false): Promise<HTMLElement> {
+  render(<MemoryRouter initialEntries={[`/studio/${PKG}`]}>{c.element(readOnly)}</MemoryRouter>);
+  const header = await screen.findByTestId(c.testId, undefined, { timeout: 8000 });
+  await c.settled(header);
+  return header;
+}
+
+/** The header's title row: the row that holds the item's title. */
+function titleRow(header: HTMLElement): HTMLElement {
+  const row = header.querySelector('h1')?.parentElement?.parentElement;
+  expect(row, 'the header has no title row: the harness is dead').toBeTruthy();
+  return row as HTMLElement;
+}
+
+/** Where the status chip sits: its row and its index among the row's children. */
+async function statusPlace(header: HTMLElement): Promise<{ index: number; chip: HTMLElement; row: HTMLElement }> {
+  const chip = await within(header).findByTestId('studio-item-status', undefined, { timeout: 8000 });
+  const row = titleRow(header);
+  return { index: Array.from(row.children).indexOf(chip), chip, row };
+}
+
+describe('the status chip sits in the same place in every pillar’s item header (objectui#12524)', () => {
+  it('with a draft, all four headers draw it as the same child of the title row: after the identity, before meta and actions', async () => {
+    const places: Array<{ pillar: string; index: number; text: string }> = [];
+    for (const c of CASES) {
+      const header = await openHeader(c);
+      const { index, chip, row } = await statusPlace(header);
+      // A child of the title row, never of the actions slot.
+      expect(chip.parentElement, c.pillar).toBe(row);
+      // Right after the identity: the wrapper that holds the title and its chips.
+      const identity = row.children[index - 1];
+      expect(identity?.querySelector('h1'), `${c.pillar}: the chip does not follow the identity`).not.toBeNull();
+      // Nothing after it is identity: the meta and the actions follow.
+      for (const later of Array.from(row.children).slice(index + 1)) {
+        expect(later.querySelector('h1'), c.pillar).toBeNull();
+      }
+      places.push({ pillar: c.pillar, index, text: chip.textContent ?? '' });
+      cleanup();
+    }
+
+    expect(places.map((p) => p.pillar)).toEqual(['Data', 'Automations', 'Interfaces', 'Access']);
+    // The same index in all four.
+    expect(new Set(places.map((p) => p.index)).size, JSON.stringify(places)).toBe(1);
+    // The three item drafts say so; Access says its edits save as drafts.
+    expect(places.map((p) => p.text)).toEqual([
+      en('engine.studio.unpublishedDraft'),
+      en('engine.studio.unpublishedDraft'),
+      en('engine.studio.unpublishedDraft'),
+      en('engine.studio.access.banner'),
+    ]);
+  });
+
+  it('the Interfaces actions keep their order, and the chip is no longer one of them', async () => {
+    const header = await openHeader(CASES[2]);
+    const { row } = await statusPlace(header);
+    const actions = row.lastElementChild as HTMLElement;
+    expect(within(actions).queryByTestId('studio-item-status')).toBeNull();
+    expect(within(actions).queryByText(en('engine.studio.unpublishedDraft'))).toBeNull();
+    const order = Array.from(actions.querySelectorAll('[data-testid]'))
+      .map((el) => el.getAttribute('data-testid'))
+      .filter((id) => id === 'canvas-mode-toggle' || id === 'if-properties-toggle');
+    expect(order).toEqual(['canvas-mode-toggle', 'if-properties-toggle']);
+  });
+
+  it('CONTROL: with no draft, Data, Automations and Interfaces draw no status chip', async () => {
+    server.drafts = false;
+    for (const c of CASES.slice(0, 3)) {
+      const header = await openHeader(c);
+      // The draft read has settled (the header's identity is in), and nothing says draft.
+      await waitFor(() => expect(mockClient.getDraft).toHaveBeenCalled());
+      expect(within(header).queryByTestId('studio-item-status'), c.pillar).toBeNull();
+      expect(within(header).queryByText(en('engine.studio.unpublishedDraft')), c.pillar).toBeNull();
+      cleanup();
+    }
+  });
+
+  it('CONTROL: a read-only package draws no Access status; its read-only link stays in the actions slot', async () => {
+    const header = await openHeader(CASES[3], true);
+    expect(within(header).queryByTestId('studio-item-status')).toBeNull();
+    const link = within(header).getByTestId('studio-readonly-link');
+    const row = titleRow(header);
+    expect(link.parentElement).toBe(row.lastElementChild);
+    expect(link.parentElement).toHaveClass('ml-auto');
+  });
+});
diff --git a/packages/app-shell/src/views/studio-design/StudioItemHeader.tsx b/packages/app-shell/src/views/studio-design/StudioItemHeader.tsx
index 70af156a1d..ddf9afa399 100644
--- a/packages/app-shell/src/views/studio-design/StudioItemHeader.tsx
+++ b/packages/app-shell/src/views/studio-design/StudioItemHeader.tsx
@@ -5,11 +5,20 @@
  * Studio pillar's content column (objectui#12459, epic objectui#12446).
  *
  * One row: an icon tile, the item's label at 18 px, its machine name as a
- * mono chip, optional kind chips, a muted meta slot, and a right-aligned
- * actions slot. Under it, when the pillar has tabs, a 36 px tab row whose
- * active tab carries a 2 px primary underline; without tabs the header keeps
- * 12 px of bottom padding so the body starts at the same rhythm. The pillar
- * decides what each slot holds; this file decides where everything sits.
+ * mono chip, optional kind chips, the item's status chip, a muted meta slot,
+ * and a right-aligned actions slot. Under it, when the pillar has tabs, a
+ * 36 px tab row whose active tab carries a 2 px primary underline; without
+ * tabs the header keeps 12 px of bottom padding so the body starts at the
+ * same rhythm. The pillar decides what each slot holds; this file decides
+ * where everything sits.
+ *
+ * objectui#12524 — the status chip ("Unpublished draft") has one place in
+ * every pillar: right after the identity (title, api-name chip, kind chips),
+ * before the meta, never in the actions slot, which holds actions only. The
+ * pillar passes the status as data and this file draws the chip, so no
+ * pillar places or styles it itself. The identity sits in a `contents`
+ * wrapper: it changes no layout, and the status chip is the same child of
+ * the same row in every pillar whatever identity chips the pillar shows.
  */
 
 import * as React from 'react';
@@ -26,6 +35,31 @@ import {
   STUDIO_TAB_ROW,
 } from './studio-tokens.js';
 
+/** The item's status, drawn by the header as one amber chip (objectui#12524). */
+export interface StudioItemStatus {
+  /** The chip's text. */
+  label: string;
+  /** A longer sentence for the tooltip. */
+  title?: string;
+}
+
+/**
+ * The amber status chip. The header draws it from `status`; it is exported
+ * for the one place that shows the same status outside a title row (the
+ * Access set page's tab row).
+ */
+export function StudioStatusChip({ label, title }: StudioItemStatus): React.ReactElement {
+  return (
+    <span
+      data-testid="studio-item-status"
+      title={title}
+      className="inline-flex shrink-0 items-center whitespace-nowrap rounded bg-amber-400/15 px-2 py-0.5 text-[11px] text-amber-600 dark:text-amber-300"
+    >
+      {label}
+    </span>
+  );
+}
+
 export interface StudioItemHeaderProps {
   /** The icon component for the tile; omitted when the pillar has nothing open. */
   icon?: React.ElementType;
@@ -35,8 +69,10 @@ export interface StudioItemHeaderProps {
   titleProps?: React.HTMLAttributes<HTMLElement> & { 'data-testid'?: string };
   /** The item's machine name, as a mono chip. */
   apiName?: string;
-  /** Kind chips and badges after the name. */
+  /** Kind chips and badges after the name. Not the status: that is `status`. */
   chips?: React.ReactNode;
+  /** The item's status ("Unpublished draft"), after the chips and before the meta. */
+  status?: StudioItemStatus;
   /** Muted meta text (a field count, a trigger summary). */
   meta?: React.ReactNode;
   /** The right-aligned actions slot. */
@@ -55,6 +91,7 @@ export function StudioItemHeader({
   titleProps,
   apiName,
   chips,
+  status,
   meta,
   actions,
   tabs,
@@ -71,11 +108,14 @@ export function StudioItemHeader({
             <Icon className="h-4 w-4" />
           </span>
         )}
-        <h1 {...titleProps} className={cn(STUDIO_ITEM_TITLE, titleProps?.className)}>
-          {title}
-        </h1>
-        {apiName && <code className={STUDIO_API_CHIP}>{apiName}</code>}
-        {chips}
+        <div className="contents">
+          <h1 {...titleProps} className={cn(STUDIO_ITEM_TITLE, titleProps?.className)}>
+            {title}
+          </h1>
+          {apiName && <code className={STUDIO_API_CHIP}>{apiName}</code>}
+          {chips}
+        </div>
+        {status && <StudioStatusChip {...status} />}
         {meta && <span className={STUDIO_META}>{meta}</span>}
         {actions && <div className="ml-auto flex shrink-0 items-center gap-2">{actions}</div>}
       </div>

From 81ec63c3714b6a3e3edd759f4233bc4ea3fbc7bd Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 15 Oct 2026 23:00:20 +0000
Subject: [PATCH 2/3] chore(changeset): the draft status chip's one place
 (objectui#12524)

Claude-Session: https://claude.ai/code/session_01GzRy6FiHuy1vpBecH2KRYM
Co-authored-by: Claude <noreply@anthropic.com>
---
 .changeset/12524-header-status-chip.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/12524-header-status-chip.md

diff --git a/.changeset/12524-header-status-chip.md b/.changeset/12524-header-status-chip.md
new file mode 100644
index 0000000000..e8e0b912a7
--- /dev/null
+++ b/.changeset/12524-header-status-chip.md
@@ -0,0 +1,5 @@
+---
+'@object-ui/app-shell': patch
+---
+
+Studio: the draft status chip sits in the same place in every pillar's item header (objectui#12524). "Unpublished draft" in Data, Automations and Interfaces, and Access's "saved as draft" note, now follow the item's title and its name or kind chip, before the meta line. In Interfaces it no longer sits among the Design / Run actions at the right of the header, which now holds actions only. `StudioItemHeader` draws the chip from a new `status` prop, so a pillar passes the status and no longer places or styles it.

From d9376ccc4c2a1868c9f962df2d80c14193c4d119 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 15 Oct 2026 23:41:20 +0000
Subject: [PATCH 3/3] fix(app-shell): keep the item title a direct child of the
 header row (objectui#12524)

The `contents` wrapper now holds only the identity chips (api name and kind
chips), always rendered, so the title stays the row's child as the
objectui#11665 pin reads it, and the status chip keeps one index in every
pillar.

Claude-Session: https://claude.ai/code/session_01GzRy6FiHuy1vpBecH2KRYM
Co-authored-by: Claude <noreply@anthropic.com>
---
 ...tudioItemHeader.statusPlace-12524.test.tsx | 20 +++++++++++--------
 .../views/studio-design/StudioItemHeader.tsx  | 18 +++++++++--------
 2 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/packages/app-shell/src/views/studio-design/StudioItemHeader.statusPlace-12524.test.tsx b/packages/app-shell/src/views/studio-design/StudioItemHeader.statusPlace-12524.test.tsx
index d5ec0d9a33..3c5067adf0 100644
--- a/packages/app-shell/src/views/studio-design/StudioItemHeader.statusPlace-12524.test.tsx
+++ b/packages/app-shell/src/views/studio-design/StudioItemHeader.statusPlace-12524.test.tsx
@@ -11,9 +11,9 @@
  *
  * `StudioItemHeader` now takes the status as data (`status`) and draws the
  * chip itself, after the identity (title, api-name or kind chips) and before
- * the meta; the right slot holds actions only. The identity sits in one
- * `contents` wrapper, so the chip is the same child of the same row whatever
- * identity chips a pillar shows.
+ * the meta; the right slot holds actions only. The identity chips sit in
+ * one `contents` wrapper, so the chip is the same child of the same row
+ * whatever identity chips a pillar shows.
  *
  * The REAL four pillars against one server double that serves a pending draft
  * for the open object, the open flow and the open page. Access has no
@@ -208,7 +208,7 @@ async function openHeader(c: PillarCase, readOnly = false): Promise<HTMLElement>
 
 /** The header's title row: the row that holds the item's title. */
 function titleRow(header: HTMLElement): HTMLElement {
-  const row = header.querySelector('h1')?.parentElement?.parentElement;
+  const row = header.querySelector('h1')?.parentElement;
   expect(row, 'the header has no title row: the harness is dead').toBeTruthy();
   return row as HTMLElement;
 }
@@ -228,12 +228,16 @@ describe('the status chip sits in the same place in every pillar’s item header
       const { index, chip, row } = await statusPlace(header);
       // A child of the title row, never of the actions slot.
       expect(chip.parentElement, c.pillar).toBe(row);
-      // Right after the identity: the wrapper that holds the title and its chips.
-      const identity = row.children[index - 1];
-      expect(identity?.querySelector('h1'), `${c.pillar}: the chip does not follow the identity`).not.toBeNull();
+      // Right after the identity: the title, then the wrapper of its chips.
+      expect(row.children[index - 2]?.tagName, `${c.pillar}: the chip does not follow the title`).toBe('H1');
+      expect(row.children[index - 1], `${c.pillar}: the chip does not follow the identity chips`).toHaveAttribute(
+        'data-slot',
+        'identity-chips',
+      );
       // Nothing after it is identity: the meta and the actions follow.
       for (const later of Array.from(row.children).slice(index + 1)) {
-        expect(later.querySelector('h1'), c.pillar).toBeNull();
+        expect(later.tagName, c.pillar).not.toBe('H1');
+        expect(later.getAttribute('data-slot'), c.pillar).not.toBe('identity-chips');
       }
       places.push({ pillar: c.pillar, index, text: chip.textContent ?? '' });
       cleanup();
diff --git a/packages/app-shell/src/views/studio-design/StudioItemHeader.tsx b/packages/app-shell/src/views/studio-design/StudioItemHeader.tsx
index ddf9afa399..99963dd86e 100644
--- a/packages/app-shell/src/views/studio-design/StudioItemHeader.tsx
+++ b/packages/app-shell/src/views/studio-design/StudioItemHeader.tsx
@@ -16,9 +16,11 @@
  * every pillar: right after the identity (title, api-name chip, kind chips),
  * before the meta, never in the actions slot, which holds actions only. The
  * pillar passes the status as data and this file draws the chip, so no
- * pillar places or styles it itself. The identity sits in a `contents`
- * wrapper: it changes no layout, and the status chip is the same child of
- * the same row in every pillar whatever identity chips the pillar shows.
+ * pillar places or styles it itself. The identity chips sit in one
+ * `contents` wrapper, always rendered: it draws no box, so the layout is
+ * unchanged, and the status chip is the same child of the same row in every
+ * pillar whatever identity chips the pillar shows. The title stays a direct
+ * child of the row.
  */
 
 import * as React from 'react';
@@ -108,13 +110,13 @@ export function StudioItemHeader({
             <Icon className="h-4 w-4" />
           </span>
         )}
-        <div className="contents">
-          <h1 {...titleProps} className={cn(STUDIO_ITEM_TITLE, titleProps?.className)}>
-            {title}
-          </h1>
+        <h1 {...titleProps} className={cn(STUDIO_ITEM_TITLE, titleProps?.className)}>
+          {title}
+        </h1>
+        <span className="contents" data-slot="identity-chips">
           {apiName && <code className={STUDIO_API_CHIP}>{apiName}</code>}
           {chips}
-        </div>
+        </span>
         {status && <StudioStatusChip {...status} />}
         {meta && <span className={STUDIO_META}>{meta}</span>}
         {actions && <div className="ml-auto flex shrink-0 items-center gap-2">{actions}</div>}