@@ -0,0 +1,10 @@
+---
+'@object-ui/app-shell': patch
+---
+
+fix(app-shell): the draft preview's failure pane is announced as an alert, drawn by the shared `DataErrorState`
+
+Clause-②: no (one surface swaps its own block for the shared components; no exported type change. If the shared component needs a new prop, the thread reports first and the seat amends this line)
+Metadata-protocol: none
+
+The pane a `?preview=draft` tree shows when it has nothing to draw (`PreviewDraftEmptyState`) now uses the shared view states from `@object-ui/components` instead of its own `Empty` block. When the draft overlay read fails, it is `DataErrorState` and is announced to assistive technology as `role="alert"`. When the app is not in the draft yet, or nothing is drafted, it is `DataEmptyState` with `role="status"`. Before, both were the same unlabelled node, so a screen reader said nothing when the preview failed to load. The text, the Retry button and the test ids are unchanged; the title and icon now use the shared components' smaller size.
@@ -23,10 +23,18 @@
  *
  * Deliberately CTA-free beyond Retry: the preview is a window owned by the
  * build conversation; every corrective action lives there.
+ *
+ * The two halves are drawn by the shared vocabulary, not by a block of their
+ * own: the load failure by `DataErrorState` and the other two by
+ * `DataEmptyState`. That is what makes them distinguishable to assistive
+ * technology — the failure is announced as `role="alert"`, the empty pane as
+ * `role="status"` — where the bare `Empty` primitive this used to compose gave
+ * both the same unlabelled node, so a failed overlay read was announced as
+ * nothing at all.
  */
 
 import { Eye, RefreshCw, TriangleAlert } from 'lucide-react';
-import { Empty, EmptyTitle, EmptyDescription, Button } from '@object-ui/components';
+import { Button, DataEmptyState, DataErrorState } from '@object-ui/components';
 import { useObjectTranslation } from '@object-ui/i18n';
 
 export interface PreviewDraftEmptyStateProps {
@@ -40,40 +48,45 @@ export interface PreviewDraftEmptyStateProps {
 
 export function PreviewDraftEmptyState({ appName, error, onRetry }: PreviewDraftEmptyStateProps) {
   const { t } = useObjectTranslation();
-  const failed = Boolean(error);
+  // Both states offer the same Retry, so it is one node: the shared
+  // components' own `onRetry` button carries neither the glyph nor the test id
+  // this control has always had.
+  const retry = (
+    <Button variant="outline" onClick={onRetry} data-testid="preview-draft-retry">
+      <RefreshCw className="mr-1.5 h-3.5 w-3.5" />
+      {t('preview.empty.retry', { defaultValue: 'Retry' })}
+    </Button>
+  );
   return (
     <div className="flex h-screen items-center justify-center" data-testid="preview-draft-empty-state">
-      <Empty>
-        <div className="mb-2 flex justify-center text-muted-foreground" aria-hidden="true">
-          {failed ? <TriangleAlert className="h-8 w-8" /> : <Eye className="h-8 w-8" />}
-        </div>
-        <EmptyTitle>
-          {failed
-            ? t('preview.empty.loadFailedTitle', { defaultValue: 'Draft preview failed to load' })
-            : appName
+      {error ? (
+        <DataErrorState
+          icon={<TriangleAlert className="size-5 text-destructive" aria-hidden="true" />}
+          title={t('preview.empty.loadFailedTitle', { defaultValue: 'Draft preview failed to load' })}
+          message={t('preview.empty.loadFailedDescription', {
+            defaultValue: 'The draft overlay could not be read. Retry, or check your connection.',
+          })}
+        >
+          {retry}
+        </DataErrorState>
+      ) : (
+        <DataEmptyState
+          icon={<Eye className="size-5 text-muted-foreground" aria-hidden="true" />}
+          title={
+            appName
               ? t('preview.empty.notReadyTitle', {
                   app: appName,
                   defaultValue: '“{{app}}” isn’t in the draft yet',
                 })
-              : t('preview.empty.nothingTitle', { defaultValue: 'Nothing to preview yet' })}
-        </EmptyTitle>
-        <EmptyDescription>
-          {failed
-            ? t('preview.empty.loadFailedDescription', {
-                defaultValue: 'The draft overlay could not be read. Retry, or check your connection.',
-              })
-            : t('preview.empty.notReadyDescription', {
-                defaultValue:
-                  'The build may still be running, or it may have failed before this app was staged. Check the conversation for the build status — this pane refreshes as drafts land.',
-              })}
-        </EmptyDescription>
-        <div className="mt-4 flex justify-center">
-          <Button variant="outline" onClick={onRetry} data-testid="preview-draft-retry">
-            <RefreshCw className="mr-1.5 h-3.5 w-3.5" />
-            {t('preview.empty.retry', { defaultValue: 'Retry' })}
-          </Button>
-        </div>
-      </Empty>
+              : t('preview.empty.nothingTitle', { defaultValue: 'Nothing to preview yet' })
+          }
+          description={t('preview.empty.notReadyDescription', {
+            defaultValue:
+              'The build may still be running, or it may have failed before this app was staged. Check the conversation for the build status — this pane refreshes as drafts land.',
+          })}
+          action={retry}
+        />
+      )}
     </div>
   );
 }
@@ -0,0 +1,71 @@
+/**
+ * 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.
+ */
+
+/**
+ * The draft preview's non-happy pane is drawn by the shared view-state
+ * vocabulary (objectstack#25915), so a failed overlay read and an app that is
+ * not drafted yet are two different nodes to assistive technology: the
+ * failure is the `role="alert"` `DataErrorState`, the empty pane the
+ * `role="status"` `DataEmptyState`. Before, both were the same unlabelled
+ * `Empty` block, and the failure was announced as nothing.
+ *
+ * The `t` mock returns each call site's `defaultValue`, which the i18n
+ * call-site gate holds byte-equal to the `en` pack value.
+ */
+
+import '@testing-library/jest-dom/vitest';
+import { describe, expect, it, vi } from 'vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
+
+vi.mock('@object-ui/i18n', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('@object-ui/i18n')>()),
+  useObjectTranslation: () => ({
+    t: (_k: string, o?: { defaultValue?: string }) => o?.defaultValue ?? _k,
+  }),
+}));
+
+import { PreviewDraftEmptyState } from '../PreviewDraftEmptyState';
+
+describe('PreviewDraftEmptyState draws the shared view states (objectstack#25915)', () => {
+  it('announces a failed overlay read as an alert, through DataErrorState', () => {
+    render(<PreviewDraftEmptyState appName="crm" error={new Error('boom')} onRetry={() => {}} />);
+
+    const alert = screen.getByRole('alert');
+    expect(alert).toHaveAttribute('data-slot', 'data-error-state');
+    expect(alert).toHaveTextContent('Draft preview failed to load');
+    expect(screen.queryByRole('status')).toBeNull();
+  });
+
+  it('draws an app not yet drafted as a status, through DataEmptyState', () => {
+    render(<PreviewDraftEmptyState appName="crm" error={null} onRetry={() => {}} />);
+
+    const status = screen.getByRole('status');
+    expect(status).toHaveAttribute('data-slot', 'data-empty-state');
+    expect(status).toHaveTextContent('isn’t in the draft yet');
+    expect(screen.queryByRole('alert')).toBeNull();
+  });
+
+  it('draws nothing drafted (no app in the URL) as a status too', () => {
+    render(<PreviewDraftEmptyState onRetry={() => {}} />);
+
+    expect(screen.getByRole('status')).toHaveTextContent('Nothing to preview yet');
+    expect(screen.queryByRole('alert')).toBeNull();
+  });
+
+  it.each([
+    ['failed', new Error('boom')],
+    ['empty', null],
+  ])('keeps the one Retry control in the %s pane', (_label, error) => {
+    const onRetry = vi.fn();
+    render(<PreviewDraftEmptyState appName="crm" error={error} onRetry={onRetry} />);
+
+    expect(screen.getAllByRole('button')).toHaveLength(1);
+    fireEvent.click(screen.getByTestId('preview-draft-retry'));
+    expect(onRetry).toHaveBeenCalledTimes(1);
+  });
+});