@open-mercato/ui 0.7.1-develop.7186.1.6e080a5017 → 0.7.1-develop.7193.1.910a5b0a1e

package/src/backend/__tests__/DataTable.perspectiveReconcile.test.tsx

@@ -0,0 +1,312 @@
+/** @jest-environment jsdom */
+import * as React from 'react'
+import { DataTable, writePerspectiveSnapshot, readPerspectiveSnapshot } from '../DataTable'
+import type { ColumnDef } from '@tanstack/react-table'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { I18nProvider } from '@open-mercato/shared/lib/i18n/context'
+import { render, act } from '@testing-library/react'
+import type { PerspectivesIndexResponse } from '@open-mercato/shared/modules/perspectives/types'
+import { createEmptyTree } from '@open-mercato/shared/lib/query/advanced-filter-tree'
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: jest.fn(), replace: jest.fn(), prefetch: jest.fn() }),
+}))
+
+jest.mock('../injection/useInjectionDataWidgets', () => ({
+  useInjectionDataWidgets: () => ({ widgets: [], isLoading: false }),
+}))
+
+jest.mock('../injection/useGuardedMutation', () => ({
+  useGuardedMutation: () => ({
+    runMutation: async ({ operation }: { operation: () => Promise<unknown> }) => operation(),
+    retryLastMutation: async () => false,
+  }),
+}))
+
+jest.mock('../FlashMessages', () => ({ flash: jest.fn() }))
+
+jest.mock('../utils/apiCall', () => ({
+  apiCall: jest.fn(async () => ({
+    ok: true,
+    status: 200,
+    result: undefined,
+    response: { ok: true, status: 200 } as Response,
+    cacheStatus: null as const,
+  })),
+  withScopedApiRequestHeaders: async (_headers: Record<string, string>, run: () => Promise<unknown>) => run(),
+}))
+
+jest.mock('../PerspectiveSidebar', () => ({
+  PerspectiveSidebar: () => null,
+}))
+
+type Row = { id: string; name: string }
+
+const TABLE_ID = 'reconcile-table'
+const SERVER_UPDATED_AT = '2026-08-06T00:00:00.000Z'
+const SERVER_UPDATED_AT_MS = Date.parse(SERVER_UPDATED_AT)
+
+const columns: ColumnDef<Row>[] = [
+  { accessorKey: 'name', header: 'Name' },
+  { accessorKey: 'id', header: 'Id' },
+]
+
+function buildIndexResponse(
+  perspectives: PerspectivesIndexResponse['perspectives'],
+  overrides?: Partial<PerspectivesIndexResponse>,
+): PerspectivesIndexResponse {
+  return {
+    tableId: TABLE_ID,
+    perspectives,
+    defaultPerspectiveId: null,
+    rolePerspectives: [],
+    manageableRolePerspectives: [],
+    roles: [],
+    canApplyToRoles: false,
+    ...overrides,
+  }
+}
+
+function buildPerspective(
+  id: string,
+  searchValue: string,
+  updatedAt: string = SERVER_UPDATED_AT,
+): PerspectivesIndexResponse['perspectives'][number] {
+  return {
+    id,
+    name: id,
+    tableId: TABLE_ID,
+    settings: { searchValue },
+    isDefault: false,
+    createdAt: 'now',
+    updatedAt,
+  }
+}
+
+function renderTable(response: PerspectivesIndexResponse, options?: { withAdvancedFilterHost?: boolean }) {
+  const searchChanges: string[] = []
+  const appliedTrees: unknown[] = []
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { staleTime: Infinity, gcTime: Infinity, retry: false },
+      mutations: { retry: false },
+    },
+  })
+  queryClient.setQueryData(['feature-check', 'perspectives'], { use: true, roleDefaults: true })
+  queryClient.setQueryData(['table-perspectives', TABLE_ID], response)
+
+  const utils = render(
+    <QueryClientProvider client={queryClient}>
+      <I18nProvider locale="en" dict={{}}>
+        <DataTable<Row>
+          columns={columns}
+          data={[]}
+          searchValue=""
+          onSearchChange={(value) => { searchChanges.push(value) }}
+          perspective={{ tableId: TABLE_ID }}
+          advancedFilter={options?.withAdvancedFilterHost
+            ? {
+                fields: [],
+                value: createEmptyTree(),
+                onChange: () => {},
+                onApply: () => {},
+                onClear: () => {},
+                onApplyTree: (tree) => { appliedTrees.push(tree) },
+              }
+            : undefined}
+        />
+      </I18nProvider>
+    </QueryClientProvider>,
+  )
+  return { ...utils, searchChanges, appliedTrees, queryClient }
+}
+
+describe('DataTable localStorage snapshot vs. server perspective reconciliation (#5113)', () => {
+  beforeEach(() => {
+    localStorage.clear()
+    for (const cookie of document.cookie ? document.cookie.split(';') : []) {
+      const name = cookie.split('=')[0].trim()
+      if (name) document.cookie = `${name}=; Path=/; Max-Age=0`
+    }
+  })
+
+  it('yields to a newer server perspective instead of staying pinned to the snapshot', () => {
+    // Tab A mounted before tab B saved: the snapshot predates the stored row.
+    writePerspectiveSnapshot(TABLE_ID, {
+      perspectiveId: 'persp-1',
+      settings: { searchValue: 'stale' },
+      updatedAt: SERVER_UPDATED_AT_MS - 60_000,
+    })
+
+    const { searchChanges } = renderTable(buildIndexResponse([buildPerspective('persp-1', 'fresh')]))
+
+    expect(searchChanges[0]).toBe('stale')
+    expect(searchChanges[searchChanges.length - 1]).toBe('fresh')
+  })
+
+  it('keeps the snapshot when the server row is older, so a stale read never wins', () => {
+    writePerspectiveSnapshot(TABLE_ID, {
+      perspectiveId: 'persp-1',
+      settings: { searchValue: 'local' },
+      updatedAt: SERVER_UPDATED_AT_MS + 60_000,
+    })
+
+    const { searchChanges } = renderTable(buildIndexResponse([buildPerspective('persp-1', 'older-server')]))
+
+    expect(searchChanges).toEqual(['local'])
+  })
+
+  it('does not re-apply on clock skew alone when the settings are identical', () => {
+    // `updatedAt` in the snapshot is a browser clock reading and the server's is
+    // a database one, so "server is newer" on its own must not repaint the table.
+    writePerspectiveSnapshot(TABLE_ID, {
+      perspectiveId: 'persp-1',
+      settings: { searchValue: 'same' },
+      updatedAt: SERVER_UPDATED_AT_MS - 60_000,
+    })
+
+    const { searchChanges } = renderTable(buildIndexResponse([buildPerspective('persp-1', 'same')]))
+
+    expect(searchChanges).toEqual(['same'])
+  })
+
+  it('drops a snapshot pointing at a deleted perspective and resumes normal resolution', () => {
+    writePerspectiveSnapshot(TABLE_ID, {
+      perspectiveId: 'deleted-1',
+      settings: { searchValue: 'orphaned' },
+      updatedAt: SERVER_UPDATED_AT_MS - 60_000,
+    })
+
+    const { searchChanges } = renderTable(buildIndexResponse(
+      [buildPerspective('persp-2', 'server-default')],
+      { defaultPerspectiveId: 'persp-2' },
+    ))
+
+    expect(searchChanges[searchChanges.length - 1]).toBe('server-default')
+    expect(readPerspectiveSnapshot(TABLE_ID)?.perspectiveId).toBe('persp-2')
+  })
+
+  it('drops an orphaned snapshot without touching a host-owned advanced filter when a replacement view exists', () => {
+    // Same background correction as the "no replacement left" case below — the
+    // active view was deleted, unshared or reassigned in another session — but
+    // taken through the *common* branch: normal resolution finds a replacement
+    // (here, the server default) instead of finding nothing at all.
+    writePerspectiveSnapshot(TABLE_ID, {
+      perspectiveId: 'deleted-1',
+      settings: { searchValue: 'orphaned' },
+      updatedAt: SERVER_UPDATED_AT_MS - 60_000,
+    })
+
+    const { searchChanges, appliedTrees } = renderTable(
+      buildIndexResponse(
+        [buildPerspective('persp-2', 'server-default')],
+        { defaultPerspectiveId: 'persp-2' },
+      ),
+      { withAdvancedFilterHost: true },
+    )
+
+    expect(searchChanges[searchChanges.length - 1]).toBe('server-default')
+    expect(readPerspectiveSnapshot(TABLE_ID)?.perspectiveId).toBe('persp-2')
+    expect(appliedTrees).toHaveLength(0)
+  })
+
+  it('clears an orphaned snapshot even when no replacement view is left to fall back to', () => {
+    // "my only saved view was deleted elsewhere" is one of the two #5113
+    // scenarios. With no default, no role default and no remaining perspective,
+    // normal resolution finds no target, so the orphaned settings would stay
+    // painted — and `activePerspectiveId` would keep naming a deleted row — for
+    // the rest of this page load unless the empty case clears explicitly.
+    writePerspectiveSnapshot(TABLE_ID, {
+      perspectiveId: 'deleted-1',
+      settings: { searchValue: 'orphaned' },
+      updatedAt: SERVER_UPDATED_AT_MS - 60_000,
+    })
+
+    const { searchChanges } = renderTable(buildIndexResponse([]))
+
+    expect(searchChanges[0]).toBe('orphaned')
+    expect(searchChanges[searchChanges.length - 1]).toBe('')
+    expect(readPerspectiveSnapshot(TABLE_ID)).toBeNull()
+  })
+
+  it('clears without touching a host-owned advanced filter when no replacement view is left', () => {
+    // The clear above is a background correction — the view was deleted in
+    // another session — so it follows the same rule as the reconciling apply:
+    // on People/Companies/Deals the URL owns the filter and the user must not
+    // lose what is on screen because a view they were not looking at vanished.
+    writePerspectiveSnapshot(TABLE_ID, {
+      perspectiveId: 'deleted-1',
+      settings: { searchValue: 'orphaned' },
+      updatedAt: SERVER_UPDATED_AT_MS - 60_000,
+    })
+
+    const { searchChanges, appliedTrees } = renderTable(
+      buildIndexResponse([]),
+      { withAdvancedFilterHost: true },
+    )
+
+    expect(searchChanges[searchChanges.length - 1]).toBe('')
+    expect(readPerspectiveSnapshot(TABLE_ID)).toBeNull()
+    expect(appliedTrees).toHaveLength(0)
+  })
+
+  it('leaves a "No view" widths-only snapshot alone rather than forcing the server default', () => {
+    // #1835: column widths survive a refresh without an active perspective, and
+    // "No view" is an explicit user choice the server default must not override.
+    writePerspectiveSnapshot(TABLE_ID, {
+      perspectiveId: null,
+      settings: { columnSizing: { name: 240 } },
+      updatedAt: SERVER_UPDATED_AT_MS - 60_000,
+    })
+
+    const { searchChanges } = renderTable(buildIndexResponse(
+      [buildPerspective('persp-2', 'server-default')],
+      { defaultPerspectiveId: 'persp-2' },
+    ))
+
+    expect(searchChanges).not.toContain('server-default')
+  })
+
+  it('does not overwrite a host-owned advanced filter while reconciling', () => {
+    // Reconciliation is a background correction, so it follows the mount-time
+    // restore: on People/Companies/Deals the URL owns the filter and a repaint
+    // the user never asked for must not clear what is on screen.
+    writePerspectiveSnapshot(TABLE_ID, {
+      perspectiveId: 'persp-1',
+      settings: { searchValue: 'stale' },
+      updatedAt: SERVER_UPDATED_AT_MS - 60_000,
+    })
+
+    const { searchChanges, appliedTrees } = renderTable(
+      buildIndexResponse([buildPerspective('persp-1', 'fresh')]),
+      { withAdvancedFilterHost: true },
+    )
+
+    expect(searchChanges[searchChanges.length - 1]).toBe('fresh')
+    expect(appliedTrees).toHaveLength(0)
+  })
+
+  it('reconciles once per table, so a later refetch cannot clobber post-mount edits', () => {
+    writePerspectiveSnapshot(TABLE_ID, {
+      perspectiveId: 'persp-1',
+      settings: { searchValue: 'stale' },
+      updatedAt: SERVER_UPDATED_AT_MS - 60_000,
+    })
+
+    const { searchChanges, queryClient } = renderTable(
+      buildIndexResponse([buildPerspective('persp-1', 'fresh')]),
+    )
+    expect(searchChanges[searchChanges.length - 1]).toBe('fresh')
+    const callsAfterReconcile = searchChanges.length
+
+    act(() => {
+      queryClient.setQueryData(
+        ['table-perspectives', TABLE_ID],
+        buildIndexResponse([buildPerspective('persp-1', 'refetched', '2027-01-01T00:00:00.000Z')]),
+      )
+    })
+
+    expect(searchChanges).toHaveLength(callsAfterReconcile)
+    expect(searchChanges).not.toContain('refetched')
+  })
+})

package/src/backend/__tests__/PerspectiveSidebar.roleAutosave.test.tsx

@@ -0,0 +1,252 @@
+/** @jest-environment jsdom */
+import * as React from 'react'
+import { render, screen, fireEvent, act } from '@testing-library/react'
+import { I18nProvider } from '@open-mercato/shared/lib/i18n/context'
+import { PerspectiveSidebar, type PerspectiveSidebarProps } from '../PerspectiveSidebar'
+import type { PerspectiveDto, RolePerspectiveDto } from '@open-mercato/shared/modules/perspectives/types'
+
+const mockFlash = jest.fn()
+jest.mock('../FlashMessages', () => ({ flash: (...args: unknown[]) => mockFlash(...args) }))
+
+// The column chooser owns drag-and-drop sensors jsdom cannot exercise; the stub
+// keeps this suite on what is under test — how a column toggle is routed into
+// autosave — while still going through the real prop wiring.
+jest.mock('../columns/ColumnChooserPanel', () => ({
+  ColumnChooserSection: (props: { onToggleColumn: (key: string) => void }) => (
+    <button type="button" data-testid="toggle-column" onClick={() => props.onToggleColumn('email')} />
+  ),
+}))
+
+const PERSONAL_VIEW: PerspectiveDto = {
+  id: 'persp-1',
+  name: 'My view',
+  tableId: 'test-table',
+  settings: { searchValue: 'acme' },
+  isDefault: false,
+  createdAt: 'now',
+  updatedAt: '2026-08-06T00:00:00.000Z',
+}
+
+const ROLE_VIEW: RolePerspectiveDto = {
+  id: 'role-1',
+  name: 'Team view',
+  tableId: 'test-table',
+  settings: { searchValue: 'acme' },
+  isDefault: true,
+  createdAt: 'now',
+  updatedAt: '2026-08-06T00:00:00.000Z',
+  roleId: 'role-sales',
+  roleName: 'Sales',
+  tenantId: null,
+  organizationId: null,
+}
+
+function renderSidebar(overrides: Partial<PerspectiveSidebarProps> = {}) {
+  const onSave = jest.fn(async () => {})
+  const props: PerspectiveSidebarProps = {
+    open: true,
+    onOpenChange: () => {},
+    loading: false,
+    perspectives: [PERSONAL_VIEW],
+    rolePerspectives: [ROLE_VIEW],
+    roles: [],
+    activePerspectiveId: null,
+    onActivatePerspective: () => {},
+    onDeletePerspective: async () => {},
+    onClearRole: async () => {},
+    onSave,
+    canApplyToRoles: false,
+    availableColumns: [{ key: 'email', label: 'Email' }],
+    visibleColumnKeys: ['email'],
+    columnOrder: ['email'],
+    onToggleColumn: () => {},
+    onReorderColumns: () => {},
+    saving: false,
+    deletingIds: [],
+    roleClearingIds: [],
+    ...overrides,
+  }
+  const utils = render(
+    <I18nProvider locale="en" dict={{}}>
+      <PerspectiveSidebar {...props} />
+    </I18nProvider>,
+  )
+  const rerenderWith = (next: Partial<PerspectiveSidebarProps>) => {
+    utils.rerender(
+      <I18nProvider locale="en" dict={{}}>
+        <PerspectiveSidebar {...props} {...next} />
+      </I18nProvider>,
+    )
+  }
+  return { ...utils, onSave, rerenderWith }
+}
+
+function toggleColumn() {
+  fireEvent.click(screen.getByTestId('toggle-column'))
+}
+
+async function flushAutosave() {
+  await act(async () => {
+    jest.advanceTimersByTime(500)
+  })
+}
+
+describe('PerspectiveSidebar autosave with an active role perspective (#5113)', () => {
+  beforeEach(() => {
+    mockFlash.mockClear()
+    jest.useFakeTimers()
+  })
+
+  afterEach(() => {
+    jest.runOnlyPendingTimers()
+    jest.useRealTimers()
+  })
+
+  it('warns instead of silently discarding a column change on a shared view', async () => {
+    const { onSave } = renderSidebar({ activePerspectiveId: ROLE_VIEW.id })
+
+    toggleColumn()
+    await flushAutosave()
+
+    expect(onSave).not.toHaveBeenCalled()
+    expect(mockFlash).toHaveBeenCalledTimes(1)
+    expect(mockFlash).toHaveBeenCalledWith(
+      expect.stringContaining('Shared views do not save automatically'),
+      'warning',
+    )
+  })
+
+  it('debounces the warning across a burst of toggles', async () => {
+    renderSidebar({ activePerspectiveId: ROLE_VIEW.id })
+
+    toggleColumn()
+    toggleColumn()
+    await flushAutosave()
+
+    expect(mockFlash).toHaveBeenCalledTimes(1)
+  })
+
+  it('still autosaves into an active personal view', async () => {
+    const { onSave } = renderSidebar({ activePerspectiveId: PERSONAL_VIEW.id })
+
+    toggleColumn()
+    await flushAutosave()
+
+    expect(onSave).toHaveBeenCalledWith(expect.objectContaining({
+      perspectiveId: PERSONAL_VIEW.id,
+      name: PERSONAL_VIEW.name,
+    }))
+  })
+
+  it('drops a pending warning when the user switches to a personal view first', async () => {
+    // The warning names the shared view the edit was made on. Firing it after the
+    // user has already moved to a personal view would warn about a view they are
+    // no longer editing, which is its own kind of misinformation.
+    const { rerenderWith } = renderSidebar({ activePerspectiveId: ROLE_VIEW.id })
+
+    toggleColumn()
+    rerenderWith({ activePerspectiveId: PERSONAL_VIEW.id })
+    await flushAutosave()
+
+    expect(mockFlash).not.toHaveBeenCalled()
+  })
+
+  it('stays silent when no view is active', async () => {
+    const { onSave } = renderSidebar({ activePerspectiveId: null })
+
+    toggleColumn()
+    await flushAutosave()
+
+    expect(onSave).not.toHaveBeenCalled()
+    expect(mockFlash).not.toHaveBeenCalled()
+  })
+
+  it('raises the shared-view warning immediately when the panel closes inside the debounce window', async () => {
+    // Closing the panel before the 400ms debounce fires must not drop the
+    // warning in silence — that is the same discarded-edit bug (#5113) the
+    // warning itself exists to surface.
+    const { rerenderWith } = renderSidebar({ activePerspectiveId: ROLE_VIEW.id })
+
+    toggleColumn()
+    await act(async () => {
+      rerenderWith({ open: false })
+      jest.advanceTimersByTime(100)
+    })
+
+    expect(mockFlash).toHaveBeenCalledTimes(1)
+    expect(mockFlash).toHaveBeenCalledWith(
+      expect.stringContaining('Shared views do not save automatically'),
+      'warning',
+    )
+  })
+
+  it('saves a personal view immediately when the panel closes inside the debounce window', async () => {
+    const { onSave, rerenderWith } = renderSidebar({ activePerspectiveId: PERSONAL_VIEW.id })
+
+    toggleColumn()
+    await act(async () => {
+      rerenderWith({ open: false })
+      jest.advanceTimersByTime(100)
+    })
+
+    expect(onSave).toHaveBeenCalledWith(expect.objectContaining({
+      perspectiveId: PERSONAL_VIEW.id,
+      name: PERSONAL_VIEW.name,
+    }))
+  })
+})
+
+describe('PerspectiveSidebar new-view mode affordances (#5113)', () => {
+  beforeEach(() => {
+    mockFlash.mockClear()
+  })
+
+  it('explains why the create control is inert while the name is blank', () => {
+    renderSidebar({ activePerspectiveId: ROLE_VIEW.id })
+
+    fireEvent.click(screen.getByRole('button', { name: 'New' }))
+
+    const confirm = screen.getByRole('button', { name: 'Create view' })
+    expect(confirm).toBeDisabled()
+    expect(confirm).toHaveAttribute('title', 'Enter a name to create the view')
+    expect(screen.getByText('Enter a name to create the view')).toBeInTheDocument()
+  })
+
+  it('keeps the hint out of the box that centres the confirm/cancel buttons', () => {
+    // The buttons are `top-1/2 -translate-y-1/2` against their positioning
+    // context, so a hint sharing that box grows it and drags them out of the
+    // input. jsdom has no layout engine, so assert the structure that causes it.
+    renderSidebar({ activePerspectiveId: ROLE_VIEW.id })
+
+    fireEvent.click(screen.getByRole('button', { name: 'New' }))
+
+    const confirm = screen.getByRole('button', { name: 'Create view' })
+    const positioningContext = confirm.closest('.relative') as HTMLElement
+    const hint = screen.getByText('Enter a name to create the view')
+    expect(positioningContext).not.toBeNull()
+    expect(positioningContext.contains(hint)).toBe(false)
+  })
+
+  it('keeps the hint mounted once a name is typed, so nothing reflows mid-edit', () => {
+    renderSidebar({ activePerspectiveId: ROLE_VIEW.id })
+
+    fireEvent.click(screen.getByRole('button', { name: 'New' }))
+    fireEvent.change(screen.getByPlaceholderText('View name...'), { target: { value: 'Q1' } })
+
+    const hint = screen.getByText('Enter a name to create the view')
+    expect(hint).toBeInTheDocument()
+    expect(hint.className).toContain('invisible')
+    expect(screen.getByRole('button', { name: 'Create view' })).toBeEnabled()
+  })
+
+  it('drops the active-view highlight while the new-view form is open', () => {
+    renderSidebar({ activePerspectiveId: ROLE_VIEW.id })
+
+    const chip = screen.getByRole('button', { name: ROLE_VIEW.name }).parentElement as HTMLElement
+    expect(chip.className).toContain('border-brand-violet/30')
+
+    fireEvent.click(screen.getByRole('button', { name: 'New' }))
+
+    expect(chip.className).not.toContain('border-brand-violet/30')
+  })
+})

package/src/backend/views/NewViewForm.tsx

@@ -15,40 +15,54 @@ type Props = {
 export function NewViewForm({ name, onNameChange, onSubmit, onCancel, saving }: Props) {
   const t = useT()
   const trimmed = name.trim()
+  const hintId = React.useId()
+  // A greyed-out check that does nothing when clicked is the dead end reported
+  // in #5113 — always render the reason the control is inert.
+  const nameRequiredHint = t('ui.perspectives.form.nameRequired', 'Enter a name to create the view')
   return (
-    <div className="relative">
-      <input
-        value={name}
-        onChange={(e) => onNameChange(e.target.value)}
-        placeholder={t('ui.perspectives.form.namePlaceholder', 'View name...')}
-        autoFocus
-        className="w-full h-9 rounded border border-primary pl-2 pr-16 text-sm"
-        onKeyDown={(e) => {
-          if (e.key === 'Enter' && trimmed) onSubmit()
-          if (e.key === 'Escape') onCancel()
-        }}
-      />
-      <div className="absolute right-1 top-1/2 -translate-y-1/2 flex items-center gap-0.5">
-        <IconButton
-          type="button"
-          variant="ghost"
-          size="xs"
-          onClick={() => { if (trimmed) onSubmit() }}
-          disabled={!trimmed || saving}
-          aria-label={t('ui.perspectives.form.confirmCreate', 'Create view')}
-        >
-          <Check className={`size-4 ${trimmed ? 'text-brand-violet' : 'text-muted-foreground opacity-50'}`} />
-        </IconButton>
-        <IconButton
-          type="button"
-          variant="ghost"
-          size="xs"
-          onClick={onCancel}
-          aria-label={t('ui.perspectives.form.cancelCreate', 'Cancel')}
-        >
-          <X className="size-4 text-muted-foreground hover:text-destructive" />
-        </IconButton>
+    <div>
+      {/* The overlay buttons are centred against this wrapper, so it must contain
+          nothing but the input — a sibling hint here would drag them off-centre
+          and make them jump on the keystroke that hides it. */}
+      <div className="relative">
+        <input
+          value={name}
+          onChange={(e) => onNameChange(e.target.value)}
+          placeholder={t('ui.perspectives.form.namePlaceholder', 'View name...')}
+          autoFocus
+          aria-describedby={trimmed ? undefined : hintId}
+          className="w-full h-9 rounded border border-primary pl-2 pr-16 text-sm"
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' && trimmed) onSubmit()
+            if (e.key === 'Escape') onCancel()
+          }}
+        />
+        <div className="absolute right-1 top-1/2 -translate-y-1/2 flex items-center gap-0.5">
+          <IconButton
+            type="button"
+            variant="ghost"
+            size="xs"
+            onClick={() => { if (trimmed) onSubmit() }}
+            disabled={!trimmed || saving}
+            title={trimmed ? undefined : nameRequiredHint}
+            aria-label={t('ui.perspectives.form.confirmCreate', 'Create view')}
+          >
+            <Check className={`size-4 ${trimmed ? 'text-brand-violet' : 'text-muted-foreground opacity-50'}`} />
+          </IconButton>
+          <IconButton
+            type="button"
+            variant="ghost"
+            size="xs"
+            onClick={onCancel}
+            aria-label={t('ui.perspectives.form.cancelCreate', 'Cancel')}
+          >
+            <X className="size-4 text-muted-foreground hover:text-destructive" />
+          </IconButton>
+        </div>
       </div>
+      {/* Kept mounted and merely hidden so the first keystroke does not reflow the
+          sidebar, and so the aria-describedby target never disappears mid-edit. */}
+      <p id={hintId} className={`mt-1 text-xs text-muted-foreground ${trimmed ? 'invisible' : ''}`}>{nameRequiredHint}</p>
     </div>
   )
 }