@@ -0,0 +1,12 @@
+---
+'@object-ui/app-shell': patch
+---
+
+feat(app-shell): a Studio item header keeps the item's name readable; its chips, item tools and action labels give way first
+
+Clause-②: no
+Metadata-protocol: none
+
+On a narrow content column (a laptop window with the right panel open) the item header's title row no longer cuts the item's name to nothing. The title keeps its first twelve characters (its whole name when shorter), and the row gives way in two steps before the title does. First the identity chips (the api-name chip, the kind chip, the override and pair chips) and the five item tools (Layers, References, History, Audit, Source) leave the row and read at the top of the item's ⋯ menu: the chips as one entry, the tools as menu items opening the same sheets. Then the labelled actions (Customize, a flow's on/off switches, the Design and Run buttons) show their icon alone, the label staying their accessible name. The Interfaces and Automations headers fold into their own ⋯ menu; the Data header, which has none, draws one while something is folded. With the row's boxes fitting the row again, the ⋯ trigger stays inside the column instead of under the right panel. The draft status chip stays in the row. `StudioItemHeader` takes this as a `foldMenu` prop and exports `StudioItemHeaderFoldedItems` for a pillar's own menu; a header without `foldMenu` is unchanged.
+
+The pillar rails draw the customization mark as its glyph alone ("Customized (BASE)" and "Added" are its accessible name and lead its tooltip), so a customized row keeps its label. The All metadata lists keep the mark's text.
@@ -95,6 +95,29 @@ async function publishPair(page: Page) {
   expect((await res.json()).data.outcome).toBe('published');
 }
 
+/**
+ * The override chip is reachable on the item header once the pair is published.
+ * When the row has room it is in the row. On a narrower content column (the
+ * job's 1280 px window with the inspector open) the header folds its identity
+ * chips into the item's ⋯ menu first, so the item's name stays readable
+ * (objectstack#29693), and there the chip sits in the menu's chips entry. The
+ * menu is closed again so the next step opens it fresh.
+ */
+async function expectOverrideChip(page: Page) {
+  const chip = page.getByTestId('studio-override-chip');
+  const entry = page.getByTestId('studio-item-header-folded-chips');
+  await expect(async () => {
+    if (await chip.isVisible()) return;
+    await page.getByTestId('if-item-more').click();
+    try {
+      await expect(entry.getByTestId('studio-override-chip')).toBeVisible({ timeout: 1_000 });
+    } finally {
+      await page.keyboard.press('Escape');
+    }
+  }).toPass({ timeout: 10_000 });
+  await expect(entry).toHaveCount(0);
+}
+
 test('a read-only base is customized, restored and extended through Studio, and its uninstall is refused', async ({ page, request }) => {
   const baseRes = await request.get(`${API}/api/v1/packages/${BASE}`);
   expect(baseRes.ok(), await baseRes.text()).toBeTruthy();
@@ -134,7 +157,7 @@ test('a read-only base is customized, restored and extended through Studio, and
 
       await publishPair(page);
       expect(await threeReads(request)).toEqual({ bare: customized, base: customized, list: customized });
-      await expect(page.getByTestId('studio-override-chip')).toBeVisible();
+      await expectOverrideChip(page);
     });
 
     await test.step('Restore package original: the pair\'s draft and row go, and the shipped columns are served again', async () => {
 
@@ -22,6 +22,10 @@
  * (`source.onChange`) and the item is not read-only, so an edit there is
  * saved by the pillar's autosave like any other. Without a buffer it shows
  * the item's effective body, read-only.
+ *
+ * objectstack#29693 — when the item header folds (the title would drop below
+ * its readable width), the five buttons leave the row and the same tools read
+ * as items of the header's ⋯ menu, opening the same sheets.
  */
 
 import * as React from 'react';
@@ -44,6 +48,7 @@ import { ReferencesPanel, useReferencesScan } from './ReferencesPanel.js';
 import { HistoryPanel } from './ResourceHistoryPage.js';
 import { AuditPanel } from './AuditPanel.js';
 import { JsonSourceEditor } from './JsonSourceEditor.js';
+import { useStudioItemHeaderFold, type StudioFoldedTool } from '../studio-design/StudioItemHeader.js';
 
 /** The tool a sheet holds. */
 export type StudioItemTool = 'layers' | 'references' | 'history' | 'audit' | 'source';
@@ -123,6 +128,31 @@ function StudioItemToolsFor({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open]);
 
+  // objectstack#29693 — the tools' menu form, handed to the header's fold.
+  const fold = useStudioItemHeaderFold();
+  const setFoldedTools = fold?.setTools;
+  const refsCount = refs.state.status === 'loaded' ? refs.state.items.length : undefined;
+  React.useEffect(() => {
+    if (!setFoldedTools) return;
+    const tool = (id: StudioItemTool, label: string, icon: React.ElementType, count?: number): StudioFoldedTool => ({
+      id,
+      label,
+      icon,
+      count,
+      onSelect: () => setOpen(id),
+    });
+    setFoldedTools([
+      tool('layers', t('engine.edit.layers', locale), Layers3),
+      tool('references', t('engine.edit.references', locale), Link2, refsCount),
+      ...(canReadTrail
+        ? [tool('history', t('engine.edit.history', locale), History), tool('audit', t('engine.edit.auditTab', locale), ShieldCheck)]
+        : []),
+      tool('source', t('engine.edit.inspector.source', locale), FileCode2),
+    ]);
+    return () => setFoldedTools(null);
+  }, [setFoldedTools, canReadTrail, refsCount, locale]);
+  const folded = fold?.folded ?? false;
+
   const canRollback = !readOnly && canAuthor;
   const sourceEditable = !readOnly && !!source?.onChange;
   const close = (o: boolean) => {
@@ -181,27 +211,30 @@ function StudioItemToolsFor({
 
   return (
     <>
-      <div
-        role="group"
-        aria-label={t('engine.studio.itemTools.group', locale)}
-        data-testid="studio-item-tools"
-        className="flex shrink-0 items-center rounded-md border bg-background p-0.5"
-      >
-        {toolButton('layers', t('engine.edit.layers', locale), Layers3)}
-        {toolButton(
-          'references',
-          t('engine.edit.references', locale),
-          Link2,
-          refs.state.status === 'loaded' && refs.state.items.length > 0 ? (
-            <span className="absolute -top-1 -right-1 min-w-[14px] h-[14px] px-1 rounded-full bg-muted text-foreground text-[9px] leading-[14px] text-center font-medium border">
-              {refs.state.items.length}
-            </span>
-          ) : undefined,
-        )}
-        {canReadTrail && toolButton('history', t('engine.edit.history', locale), History)}
-        {canReadTrail && toolButton('audit', t('engine.edit.auditTab', locale), ShieldCheck)}
-        {toolButton('source', t('engine.edit.inspector.source', locale), FileCode2)}
-      </div>
+      {!folded && (
+        <div
+          role="group"
+          aria-label={t('engine.studio.itemTools.group', locale)}
+          data-testid="studio-item-tools"
+          data-studio-fold="tools"
+          className="flex shrink-0 items-center rounded-md border bg-background p-0.5"
+        >
+          {toolButton('layers', t('engine.edit.layers', locale), Layers3)}
+          {toolButton(
+            'references',
+            t('engine.edit.references', locale),
+            Link2,
+            refs.state.status === 'loaded' && refs.state.items.length > 0 ? (
+              <span className="absolute -top-1 -right-1 min-w-[14px] h-[14px] px-1 rounded-full bg-muted text-foreground text-[9px] leading-[14px] text-center font-medium border">
+                {refs.state.items.length}
+              </span>
+            ) : undefined,
+          )}
+          {canReadTrail && toolButton('history', t('engine.edit.history', locale), History)}
+          {canReadTrail && toolButton('audit', t('engine.edit.auditTab', locale), ShieldCheck)}
+          {toolButton('source', t('engine.edit.inspector.source', locale), FileCode2)}
+        </div>
+      )}
 
       {sheet('layers', t('engine.edit.layers', locale), <div className="flex-1 min-h-0 overflow-auto p-4">{layersBody}</div>)}
 
 
@@ -15,6 +15,7 @@
  */
 
 import * as React from 'react';
+import { Layers3, PencilRuler, Plus } from 'lucide-react';
 import { cn } from '@object-ui/components';
 import { customizationPackageId } from '@objectstack/spec/kernel';
 import { t, tFormat } from '../metadata-admin/i18n.js';
@@ -35,12 +36,26 @@ const KIND_CLASS: Record<CustomizationMarkChipKind, string> = {
   customizationOf: 'bg-muted text-muted-foreground',
 };
 
+/** objectstack#29693 — the glyph the compact mark draws in place of its text. */
+const KIND_ICON: Record<CustomizationMarkChipKind, React.ElementType> = {
+  customized: PencilRuler,
+  added: Plus,
+  customizationOf: Layers3,
+};
+
+/**
+ * objectstack#29693 — `compact` (the pillar rails): the mark is its glyph
+ * alone, so it never takes a row's name ("已定制（ObjectStack Showcase）" left a
+ * selected flow row no room for its label). Its text is its accessible name
+ * and leads its tooltip, before the sentence naming the pair.
+ */
 export function CustomizationMark({
   kind,
   baseName,
   pairId,
   locale,
   className,
+  compact = false,
 }: {
   kind: CustomizationMarkChipKind;
   /** The base's display name ("customized (HotCRM)"); needed by `customized` and `customizationOf`. */
@@ -49,6 +64,8 @@ export function CustomizationMark({
   pairId?: string;
   locale: string;
   className?: string;
+  /** Draw the glyph alone, the text in its accessible name and tooltip. */
+  compact?: boolean;
 }): React.ReactElement {
   const base = baseName ?? '';
   const label =
@@ -58,6 +75,22 @@ export function CustomizationMark({
   const title = pairId
     ? tFormat(`engine.customizationMark.${kind}Title`, locale, { baseName: base, pair: pairId })
     : undefined;
+  if (compact) {
+    const Icon = KIND_ICON[kind];
+    return (
+      <span
+        data-testid="customization-mark"
+        data-kind={kind}
+        data-compact=""
+        role="img"
+        aria-label={label}
+        title={title ? `${label}\n${title}` : label}
+        className={cn('inline-flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-[5px]', KIND_CLASS[kind], className)}
+      >
+        <Icon className="h-3 w-3" aria-hidden="true" />
+      </span>
+    );
+  }
   return (
     <span
       data-testid="customization-mark"
 
@@ -50,6 +50,7 @@ import {
   Label,
 } from '@object-ui/components';
 import { actionErrorDetail } from '@object-ui/core';
+import { StudioItemHeaderFoldedItems } from './StudioItemHeader.js';
 import { Copy, Loader2, MoreHorizontal, Trash2 } from 'lucide-react';
 import { t, tFormat, translateMetadataType } from '../metadata-admin/i18n.js';
 import { envelopeData, envelopeRefused } from '../setup/packagedFlows.js';
@@ -193,6 +194,8 @@ export function FlowItemMoreMenu({ name, label, locale, disabled, onDelete, newS
           </button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end" className="w-52">
+          {/* objectstack#29693 — what the flow header's title row folded away, on a narrow row. */}
+          <StudioItemHeaderFoldedItems />
           {newSimilar && (
             <DropdownMenuItem
               data-testid="auto-item-new-similar"
 
@@ -33,6 +33,7 @@ import * as React from 'react';
 import { Power } from 'lucide-react';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@object-ui/components';
 import { t } from '../metadata-admin/i18n.js';
+import { STUDIO_FOLD_LABEL } from './studio-tokens.js';
 import type { ActivationReading } from '../setup/packagedFlows.js';
 
 export function FlowLedgerSwitch({ checked, reading, notRunningReason, busy, walledReason, locale, onToggle }: {
@@ -99,11 +100,14 @@ export function FlowLedgerSwitch({ checked, reading, notRunningReason, busy, wal
         />
       </span>
       <Power className="h-3 w-3 shrink-0" aria-hidden="true" />
-      {reading === 'on'
-        ? t('engine.studio.auto.ledger.on', locale)
-        : notRunning
-          ? t('engine.studio.auto.ledger.notRunning', locale)
-          : t('engine.studio.auto.ledger.off', locale)}
+      {/* objectstack#29693 — on a narrow item header the switch keeps its track and glyph; the word stays its name. */}
+      <span data-studio-fold-label="" className={STUDIO_FOLD_LABEL}>
+        {reading === 'on'
+          ? t('engine.studio.auto.ledger.on', locale)
+          : notRunning
+            ? t('engine.studio.auto.ledger.notRunning', locale)
+            : t('engine.studio.auto.ledger.off', locale)}
+      </span>
     </button>
   );
   const hintLine = (
 
@@ -58,6 +58,7 @@ import {
 import { Layers, Pencil, RotateCcw } from 'lucide-react';
 import { postureHasOrgWall, useTenancyPosture } from '../../hooks/useTenancyPosture.js';
 import { t, tFormat } from '../metadata-admin/i18n.js';
+import { STUDIO_FOLD_LABEL } from './studio-tokens.js';
 import { readFields, writeFields, type FieldEntry } from '../metadata-admin/previews/object-fields-io.js';
 
 /**
@@ -241,7 +242,10 @@ export function StudioCustomizeButton({
       )}
     >
       <Pencil className="h-3.5 w-3.5 shrink-0 text-muted-foreground" aria-hidden="true" />
-      {t('engine.studio.customize.action', locale)}
+      {/* objectstack#29693 — on a narrow item header the button keeps its glyph; the word stays its name. */}
+      <span data-studio-fold-label="" className={STUDIO_FOLD_LABEL}>
+        {t('engine.studio.customize.action', locale)}
+      </span>
     </button>
   );
   if (reason === null) return button;
 
@@ -126,6 +126,8 @@ vi.mock('@monaco-editor/react', () => {
 vi.mock('@object-ui/plugin-editor', () => ({ configureBundledMonaco: () => Promise.resolve() }));
 
 import { AutomationsPillar, DataPillar, InterfacesPillar } from './StudioDesignSurface';
+import { StudioItemHeader } from './StudioItemHeader';
+import { StudioItemTools } from '../item-tools/StudioItemTools';
 import { MetadataResourceEditPage } from '../metadata-admin/ResourceEditPage';
 import '../../services/builtinComponents.js';
 import { t } from '../metadata-admin/i18n';
@@ -305,3 +307,78 @@ describe("CONTROL — Setup's item page still opens the five from the shared dir
     expect(await screen.findByRole('textbox', { name: 'JSON source' }, { timeout: 8000 })).toBeInTheDocument();
   });
 });
+
+/**
+ * objectstack#29693 — on a row too narrow for the title's twelve characters,
+ * the five tools fold into the header's ⋯ menu. Each menu entry opens the same
+ * sheet its button opens, reading the same door. The row's geometry is stubbed
+ * (no layout here): a 100 px row, the button group 146 px wide, the title's
+ * whole text 200 px and its first twelve characters 120 px.
+ */
+describe('Studio item toolbar — folded into the header’s ⋯ menu, each tool opens the same sheet (objectstack#29693)', () => {
+  const spies: Array<{ mockRestore: () => void }> = [];
+  const box = (width: number) => ({ left: 0, right: width, width, top: 0, bottom: 32, height: 32, x: 0, y: 0, toJSON: () => ({}) }) as DOMRect;
+  beforeEach(() => {
+    const realRect = HTMLElement.prototype.getBoundingClientRect;
+    spies.push(
+      vi.spyOn(Range.prototype, 'getBoundingClientRect').mockImplementation(() => box(120)),
+      vi.spyOn(HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(function (this: HTMLElement) {
+        return this.classList.contains('@container') ? 100 : 0;
+      }),
+      vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function (this: HTMLElement) {
+        return this.dataset.testid === 'studio-item-tools' ? box(146) : realRect.call(this);
+      }),
+      // The title's whole text, wider than its twelve characters.
+      vi.spyOn(HTMLElement.prototype, 'scrollWidth', 'get').mockImplementation(function (this: HTMLElement) {
+        return this.tagName === 'H1' ? 200 : 0;
+      }),
+    );
+  });
+  afterEach(() => {
+    for (const spy of spies.splice(0)) spy.mockRestore();
+  });
+
+  it('Layers, References, History, Audit and Source open from the menu on object/showcase_account', async () => {
+    render(
+      <MemoryRouter>
+        <StudioItemHeader
+          title="Account"
+          foldMenu={{ label: 'More', testId: 'hdr-more' }}
+          actions={<StudioItemTools type="object" name="showcase_account" packageId={PKG} locale="en" />}
+        />
+      </MemoryRouter>,
+    );
+    await waitFor(() => expect(screen.queryByTestId('studio-item-tools')).toBeNull());
+    const pick = async (tool: string) => {
+      fireEvent.pointerDown(screen.getByTestId('hdr-more'), { button: 0, ctrlKey: false, pointerType: 'mouse' });
+      fireEvent.click(within(await screen.findByRole('menu')).getByTestId(`studio-item-tool-${tool}`));
+      return screen.findByTestId(`studio-item-tool-sheet-${tool}`);
+    };
+    const close = async () => {
+      fireEvent.keyDown(document.activeElement ?? document.body, { key: 'Escape' });
+      await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull());
+    };
+
+    const layers = await pick('layers');
+    expect(await within(layers).findByRole('tab', { name: t('engine.layers.diff', 'en') })).toBeInTheDocument();
+    expect(mockClient.layered).toHaveBeenCalledWith('object', 'showcase_account', { packageId: PKG });
+    await close();
+
+    const refs = await pick('references');
+    expect(await within(refs).findByText('all_accounts')).toBeInTheDocument();
+    expect(mockClient.references).toHaveBeenCalledWith('object', 'showcase_account');
+    await close();
+
+    const history = await pick('history');
+    expect(await within(history).findAllByTitle(ROLLBACK)).toHaveLength(2);
+    await close();
+
+    await pick('audit');
+    await waitFor(() => expect(mockClient.audit).toHaveBeenCalledWith('object', 'showcase_account', { limit: 100 }));
+    await close();
+
+    const source = await pick('source');
+    const editor = await within(source).findByRole('textbox', { name: 'JSON source' }, { timeout: 8000 });
+    expect((editor as HTMLTextAreaElement).value).toContain('"name": "showcase_account"');
+  });
+});