@startsimpli/ui 0.4.160 → 0.4.162

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui",
-  "version": "0.4.160",
+  "version": "0.4.162",
   "description": "Shared UI components package for StartSimpli applications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -55,8 +55,8 @@
     "@codemirror/language": "^6.0.0",
     "@codemirror/state": "^6.0.0",
     "@codemirror/view": "^6.0.0",
-    "@startsimpli/api": "^0.5.68",
     "@startsimpli/auth": "^0.4.43",
+    "@startsimpli/api": "^0.5.68",
     "@startsimpli/i18n": "^0.1.3"
   },
   "peerDependenciesMeta": {

package/src/components/collection/ReviewDrawer.tsx

@@ -299,7 +299,9 @@ function ReviewDrawerInner({
                   {status.replace(/_/g, ' ')}
                 </span>
               ) : null
-            ) : cfg.statusChoices.length > 0 ? (
+            ) : mode !== 'edit' && cfg.statusChoices.length > 0 ? (
+              // Not while editing fields: the form carries the same status field,
+              // and two controls for one value can be set apart (bd startsim-uc9fz).
               <Select value={status || undefined} onValueChange={overrideStatus}>
                 <SelectTrigger className="h-7 w-auto gap-1 border-border text-xs capitalize">
                   <SelectValue placeholder="State…" />
@@ -379,7 +381,7 @@ function ReviewDrawerInner({
               <h2 className="text-lg font-semibold leading-snug text-foreground">{title}</h2>
 
               <div className="mt-2 flex flex-wrap items-center gap-1.5 text-xs">
-                {rank ? (
+                {rank && Number(rank) !== 0 ? (
                   <span className="rounded-full bg-primary/10 px-2 py-0.5 font-semibold text-primary">
                     rank {rank}
                   </span>
@@ -514,19 +516,10 @@ function DecisionButton({
         <Icon className="h-4 w-4" />
         {busy ? 'Saving…' : decision.label}
       </span>
-      <span className={cn('text-[10px] font-normal', decision.tone === 'good' ? 'text-white/80' : 'opacity-70')}>
-        {decisionHint(decision)}
-      </span>
     </button>
   );
 }
 
-/** The tiny "→ ready · good" outcome hint under a decision. */
-function decisionHint(d: ReviewDecision): string {
-  const parts = [d.status ? `→ ${d.status}` : null, d.verdict].filter(Boolean);
-  return parts.join(' · ');
-}
-
 /** Source chips: host + optional tier badge, linked when a url is present. */
 function ReviewSources({
   data,

package/src/components/collection/__tests__/review-drawer-chips.test.tsx

@@ -0,0 +1,88 @@
+/**
+ * The topic drawer's header chips and decision buttons read as plain words
+ * (bd startsim-piff1): a rank of 0 is no rank, and the buttons no longer carry
+ * the raw "→ ready · good" status/verdict hint.
+ */
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { ReviewDrawer } from '../ReviewDrawer';
+import type { CollectionClient, EntityRecord, EntityTypeDef, Paginated } from '../types';
+
+const TOPIC_TYPE: EntityTypeDef = {
+  id: 1,
+  key: 'topic',
+  label: 'Topic',
+  attributes: [
+    { id: 'status', name: 'status', dataType: 'enum', required: false, config: { choices: ['suggested', 'ready', 'written', 'rejected'] } },
+    { id: 'ai_rank', name: 'ai_rank', dataType: 'number', required: false, config: {} },
+    { id: 'team_verdict', name: 'team_verdict', dataType: 'text', required: false, config: {} },
+  ],
+};
+
+function topic(rank: unknown): EntityRecord {
+  return {
+    id: 1,
+    entityType: 'topic',
+    externalId: null,
+    name: 'Topic 1',
+    data: { status: 'suggested', ai_rank: rank },
+    createdAt: '2026-09-01T00:00:00Z',
+  };
+}
+
+function page<T>(results: T[]): Paginated<T> {
+  return { count: results.length, next: null, previous: null, results };
+}
+
+function client(): CollectionClient {
+  return {
+    listTypes: jest.fn(async () => page([TOPIC_TYPE])),
+    listAllEntities: jest.fn(async () => []),
+    updateEntity: jest.fn(),
+  } as unknown as CollectionClient;
+}
+
+function renderDrawer(rank: unknown) {
+  const r = topic(rank);
+  render(
+    <ReviewDrawer
+      client={client()}
+      type={TOPIC_TYPE}
+      records={[r]}
+      record={r}
+      onClose={jest.fn()}
+      onNavigate={jest.fn()}
+      renderEditFields={() => <p>the form</p>}
+    />,
+  );
+}
+
+describe('ReviewDrawer header chips', () => {
+  it('hides a rank of 0', () => {
+    renderDrawer(0);
+    expect(screen.queryByText(/rank 0/)).toBeNull();
+  });
+
+  it('still shows a real rank', () => {
+    renderDrawer(7);
+    expect(screen.getByText('rank 7')).toBeInTheDocument();
+  });
+
+  it('decision buttons carry no raw status/verdict hint', () => {
+    renderDrawer(7);
+    expect(screen.queryByText(/→/)).toBeNull();
+  });
+});
+
+describe('ReviewDrawer edit mode (bd startsim-uc9fz)', () => {
+  it('drops the header State select while the field form is open', async () => {
+    const user = userEvent.setup();
+    renderDrawer(7);
+    expect(screen.getByRole('combobox')).toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: /Edit fields/ }));
+    expect(screen.getByText('the form')).toBeInTheDocument();
+    expect(screen.queryByRole('combobox')).toBeNull();
+  });
+});

package/src/components/document-editor/DocumentEditor.tsx

@@ -352,6 +352,16 @@ function TextSection({
   );
 }
 
+/** "primaryKeyword" / "meta_description" → "Primary keyword" / "Meta description". */
+function structuredFieldLabel(key: string): string {
+  const spaced = key
+    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+    .replace(/[_-]+/g, ' ')
+    .trim()
+    .toLowerCase();
+  return spaced.charAt(0).toUpperCase() + spaced.slice(1);
+}
+
 function StructuredSection({
   section,
   readOnly,
@@ -377,7 +387,7 @@ function StructuredSection({
           return (
             <div key={field} className="grid gap-1 sm:grid-cols-[10rem_minmax(0,1fr)] sm:items-start sm:gap-3">
               <label htmlFor={`${section.key}-${field}`} className="pt-1.5 text-xs font-medium text-muted-foreground">
-                {field.replace(/[_-]+/g, ' ')}
+                {structuredFieldLabel(field)}
               </label>
               <div>
                 {readOnly ? (

package/src/components/document-editor/__tests__/DocumentEditor.test.tsx

@@ -73,12 +73,12 @@ describe('DocumentEditor', () => {
 
   it('structured section renders a field input and an SEO char meter on meta_description', () => {
     render(<Harness />);
-    const metaInput = screen.getByLabelText('meta description') as HTMLInputElement;
+    const metaInput = screen.getByLabelText('Meta description') as HTMLInputElement;
     expect(metaInput.value).toBe('short');
     // the meta meter surfaces the aim band
     expect(screen.getByText(/aim 150/)).toBeInTheDocument();
     fireEvent.change(metaInput, { target: { value: 'new description' } });
-    expect((screen.getByLabelText('meta description') as HTMLInputElement).value).toBe('new description');
+    expect((screen.getByLabelText('Meta description') as HTMLInputElement).value).toBe('new description');
   });
 
   it('list section adds, edits and removes items', () => {
@@ -123,3 +123,17 @@ describe('DocumentEditor', () => {
     expect(onSave).not.toHaveBeenCalled();
   });
 });
+
+describe('DocumentEditor structured labels (bd startsim-5w5p6)', () => {
+  it('labels camelCase and snake_case keys in plain words', () => {
+    render(
+      <DocumentEditor
+        sections={[{ key: 'seo', label: 'SEO', kind: 'structured', value: { primaryKeyword: 'kw', meta_description: 'm', tags: 't' } }]}
+        onChange={() => {}}
+      />,
+    );
+    expect(screen.getByText('Primary keyword')).toBeInTheDocument();
+    expect(screen.getByText('Meta description')).toBeInTheDocument();
+    expect(screen.getByText('Tags')).toBeInTheDocument();
+  });
+});

package/src/components/history/RecordActivityPanel.tsx

@@ -289,9 +289,12 @@ export function RecordActivityPanel({
                 <button
                   type="button"
                   className="text-xs text-muted-foreground underline underline-offset-2 hover:text-foreground"
+                  title={`Only ${actorText}'s edits`}
                   onClick={() => onFiltersChange(prune({ ...applied, actor: sitting.actorSub }))}
                 >
-                  Only {actorText}&apos;s edits
+                  {/* The actor's name is printed on the line below; saying it
+                      again here doubled every card (bd startsim-spywp). */}
+                  Only their edits
                 </button>
               )}
             </div>

package/src/components/history/RecordHistoryPanel.tsx

@@ -169,6 +169,9 @@ export interface RecordHistoryPanelProps {
   headerAside?: ReactNode;
   /** Map a wire field name to a reader-facing label. */
   fieldLabel?: (field: string) => string;
+  /** Leave a field out of every entry — its row, and the entry's field count —
+   *  e.g. a host's system bookkeeping keys (`_run_id`). Nothing hidden by default. */
+  hideField?: (field: string) => boolean;
   /** Group entries under day headings. On by default — a record's history is
    *  read by date far more often than as a flat list. */
   groupByDay?: boolean;
@@ -226,6 +229,19 @@ export interface RecordHistoryPanelProps {
   classNames?: RecordHistoryPanelClassNames;
 }
 
+/** A sitting with the host's hidden fields taken out, so the headline's count
+ *  and the rows under it agree. */
+function withoutFields(sitting: RevisionSitting, hide: (field: string) => boolean): RevisionSitting {
+  const keep = (f: string) => !hide(f);
+  return {
+    ...sitting,
+    changed: Object.fromEntries(Object.entries(sitting.changed).filter(([f]) => keep(f))),
+    preserved: sitting.preserved.filter(keep),
+    regenerate: sitting.regenerate.filter(keep),
+    redacted: sitting.redacted.filter(keep),
+  };
+}
+
 export function RecordHistoryPanel({
   client,
   queryKey = ['record-history'],
@@ -236,6 +252,7 @@ export function RecordHistoryPanel({
   description = 'Who changed which field, from what to what, newest first.',
   headerAside,
   fieldLabel = (field) => field,
+  hideField,
   groupByDay = true,
   emptyTitle = 'No edits recorded for this record',
   // NOT "this record has never changed" — see sentence 3 in the header.
@@ -427,7 +444,10 @@ export function RecordHistoryPanel({
   }, []);
 
   // THE FOLD RUNS OVER THE ACCUMULATION, never per page. See the header.
-  const sittings = useMemo(() => foldRevisions(revisions, windowMs), [revisions, windowMs]);
+  const sittings = useMemo(() => {
+    const folded = foldRevisions(revisions, windowMs);
+    return hideField ? folded.map((s) => withoutFields(s, hideField)) : folded;
+  }, [revisions, windowMs, hideField]);
 
   const items = useMemo<ActivityTimelineItem[]>(
     () =>

package/src/components/history/RevisionFields.tsx

@@ -33,6 +33,7 @@ import { DiffViewer } from '../diff';
 import {
   canDiffFieldChange,
   classifyFieldChange,
+  sittingNameRow,
   type FoldedFieldChange,
   type RevisionSitting,
 } from './revision-history';
@@ -180,13 +181,14 @@ export function RevisionFields({
   onNarrowToField,
 }: RevisionFieldsProps) {
   const [open, setOpen] = useState<string | null>(null);
+  const nameRow = sittingNameRow(sitting);
   const entries: Array<[string, FoldedFieldChange]> = [
     ...Object.keys(sitting.changed)
       .sort()
       .map((field) => [field, sitting.changed[field]!] as [string, FoldedFieldChange]),
     // The name COLUMN, kept namespaced away from the data keys because a tenant
     // may declare a data key literally called "name".
-    ...(sitting.name ? ([['name (title)', sitting.name]] as Array<[string, FoldedFieldChange]>) : []),
+    ...(nameRow ? ([['name (title)', nameRow]] as Array<[string, FoldedFieldChange]>) : []),
   ];
 
   return (

package/src/components/history/__tests__/record-activity-panel.test.tsx

@@ -167,7 +167,7 @@ describe('RecordActivityPanel', () => {
     const onFiltersChange = jest.fn()
     const list = jest.fn().mockResolvedValue({ next: null, results: [row('1', draftA)] })
     mount(<RecordActivityPanel client={{ list }} filters={{}} onFiltersChange={onFiltersChange} />)
-    fireEvent.click(await screen.findByRole('button', { name: /only jurga@ogmc\.example/i }))
+    fireEvent.click(await screen.findByRole('button', { name: 'Only their edits' }))
     expect(onFiltersChange).toHaveBeenCalledWith({ actor: 'u-jurga' })
   })
 
@@ -177,3 +177,46 @@ describe('RecordActivityPanel', () => {
     expect(await screen.findByText(/no edits match/i)).toBeInTheDocument()
   })
 })
+
+describe('an Activity card says each thing once (bd startsim-8udmw, startsim-spywp)', () => {
+  const scopeRec = { id: 's-1', type: 'scope', name: 'OGMC' }
+
+  it('a create counts the rows it lists, and the name row reads "set"', async () => {
+    const created = row('1', draftA, {
+      version: 1,
+      action: 'created',
+      metadata: {
+        changed: { blog: { after: 'x' }, linkedin: { after: 'y' } },
+        name: { before: '', after: 'Gulf logistics brief' },
+      },
+    })
+    const list = jest.fn().mockResolvedValue({ next: null, results: [created] })
+    mount(<RecordActivityPanel client={{ list }} filters={{}} onFiltersChange={jest.fn()} />)
+    expect(await screen.findByText('Created the record with 3 fields')).toBeInTheDocument()
+    const nameRow = screen.getByRole('button', { name: /name \(title\)/ })
+    expect(nameRow).toHaveTextContent('set')
+    expect(nameRow).not.toHaveTextContent('changed')
+  })
+
+  it('a type whose own `name` key mirrors the record name shows one name row', async () => {
+    const created = row('1', scopeRec, {
+      version: 1,
+      action: 'created',
+      metadata: {
+        changed: { name: { after: 'OGMC' }, path: { after: '/ogmc' } },
+        name: { before: null, after: 'OGMC' },
+      },
+    })
+    const list = jest.fn().mockResolvedValue({ next: null, results: [created] })
+    mount(<RecordActivityPanel client={{ list }} filters={{}} onFiltersChange={jest.fn()} />)
+    expect(await screen.findByText('Created the record with 2 fields')).toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: /name \(title\)/ })).toBeNull()
+  })
+
+  it('the narrow-to-person link does not repeat the address', async () => {
+    const list = jest.fn().mockResolvedValue({ next: null, results: [row('1', draftA)] })
+    mount(<RecordActivityPanel client={{ list }} filters={{}} onFiltersChange={jest.fn()} />)
+    expect(await screen.findByRole('button', { name: 'Only their edits' })).toBeInTheDocument()
+    expect(screen.queryByText(/Only jurga@ogmc\.example's edits/)).toBeNull()
+  })
+})

package/src/components/history/__tests__/record-history-panel.test.tsx

@@ -458,3 +458,34 @@ describe('RecordHistoryPanel — the unrecorded-kind sentence is scoped (bd star
     expect(note.textContent).toMatch(/for the rest/i)
   })
 })
+
+describe('RecordHistoryPanel — hideField (bd startsim-mpjbi, startsim-l1ya5)', () => {
+  it('leaves hidden fields out of the rows AND the entry count', async () => {
+    mount(
+      <RecordHistoryPanel
+        hideField={(f) => f.startsWith('_')}
+        fieldLabel={(f) => (f === 'team_verdict' ? 'Team verdict' : f)}
+        client={clientFor(
+          page([
+            rev({
+              version: 1,
+              action: 'created',
+              metadata: {
+                changed: {
+                  _run_id: { before: null, after: 'r1' },
+                  _origin: { before: null, after: 'n8n' },
+                  blog: { before: null, after: 'x' },
+                  team_verdict: { before: null, after: 'good' },
+                },
+              },
+            }),
+          ]),
+        )}
+      />,
+    )
+    await screen.findByTestId('record-history-panel')
+    expect(await screen.findByText(/Created the record with 2 fields/)).toBeInTheDocument()
+    expect(screen.queryByText('_run_id')).toBeNull()
+    expect(screen.queryByText('_origin')).toBeNull()
+  })
+})

package/src/components/history/index.ts

@@ -50,6 +50,7 @@ export {
   normalizeFieldChange,
   normalizeRevision,
   sittingFields,
+  sittingNameRow,
   sittingHeadline,
   sittingSummary,
 } from './revision-history';

package/src/components/history/revision-history.ts

@@ -457,6 +457,33 @@ export function sittingFields(sitting: RevisionSitting): string[] {
   return Object.keys(sitting.changed).sort();
 }
 
+/**
+ * The record-name row a sitting shows, if any (bd startsim-8udmw).
+ *
+ * Two corrections over printing `sitting.name` as is:
+ *
+ * - A type may declare its own data key `name` that mirrors the record name
+ *   (scope, client). When that key changed to the same value in the same
+ *   sitting, the name row says it a second time, under a different verb — so
+ *   it is dropped and the data row stands for both.
+ * - On a CREATE there was no name before it. The wire may still carry a
+ *   `before` (null or blank), which classified the row "changed" on a record
+ *   that had only just come into being; on a create it reads "set".
+ */
+export function sittingNameRow(sitting: RevisionSitting): FoldedFieldChange | undefined {
+  const name = sitting.name;
+  if (!name) return undefined;
+  const dataName = sitting.changed.name;
+  if (dataName && dataName.hasAfter && name.hasAfter && String(dataName.after) === String(name.after)) {
+    return undefined;
+  }
+  if (sitting.action === 'created' && name.hasBefore) {
+    const { before: _before, ...rest } = name;
+    return { ...rest, hasBefore: false };
+  }
+  return name;
+}
+
 /** "a", "a and b", "a, b and c" — an Oxford-free list, because these are field
  *  names in a sentence and not prose. */
 export function joinNames(names: string[]): string {
@@ -495,7 +522,9 @@ export function sittingHeadline(
       : `Restored ${fields.length} fields from ${from}`;
   }
   if (sitting.action === 'created') {
-    return fields.length ? `Created the record with ${fields.length} ${fields.length === 1 ? 'field' : 'fields'}` : 'Created the record';
+    // Counts the rows the reader is shown under it, name row included.
+    const count = fields.length + (sittingNameRow(sitting) ? 1 : 0);
+    return count ? `Created the record with ${count} ${count === 1 ? 'field' : 'fields'}` : 'Created the record';
   }
   if (!fields.length) return renamed ? 'Renamed the record' : 'Saved the record';
   const named =

package/src/components/history/stale-save-dialog-default-class-names.ts

@@ -41,5 +41,7 @@ export const STALE_SAVE_DIALOG_DEFAULTS: Required<StaleSaveDialogClassNames> = {
   // Underplayed ON PURPOSE. It is the only control here that destroys the text
   // this dialog exists to protect, so it must never be the thing a hurried
   // reviewer clicks by muscle memory.
-  destructiveAction: 'text-xs text-muted-foreground underline underline-offset-2',
+  // Red so it does not read as a help link, and pushed to the far left, apart
+  // from the two safe buttons.
+  destructiveAction: 'me-auto text-xs text-destructive underline underline-offset-2 disabled:opacity-50',
 };

package/src/components/navigation/__tests__/grouped-nav.test.tsx

@@ -67,3 +67,12 @@ describe('GroupedNav', () => {
     expect(link).toHaveAttribute('data-router-link', '1')
   })
 })
+
+describe('GroupedNav: a group holding the current page (bd startsim-m7fdm.39)', () => {
+  it('draws its header as a plain heading, not a collapse button that does nothing', () => {
+    render(<GroupedNav items={items} activeHref="/t/general" />)
+    expect(screen.queryByRole('button', { name: /Content/ })).toBeNull()
+    expect(screen.getByText('Content')).toBeInTheDocument()
+    expect(screen.getByText('General')).toBeInTheDocument()
+  })
+})

package/src/components/navigation/grouped-nav.tsx

@@ -170,7 +170,9 @@ function NavGroup({
 
   return (
     <div className="pt-3 first:pt-0">
-      {collapsible ? (
+      {/* A group holding the current page cannot close, so its header is not
+          drawn as a control that does nothing (bd startsim-m7fdm.39). */}
+      {collapsible && !hasActiveChild ? (
         <button
           type="button"
           onClick={() => setOpen((o) => !o)}

package/src/components/track-changes/ChangesRail.tsx

@@ -184,12 +184,12 @@ export function ChangesRail(props: ChangesRailProps) {
         </h3>
         <div className="flex flex-wrap gap-1">
           {onPrevChange && (
-            <button type="button" className={btn} onClick={onPrevChange} title="Shift+F8 in the text">
+            <button type="button" className={btn} onClick={onPrevChange} disabled={open.length === 0} title="Shift+F8 in the text">
               Previous
             </button>
           )}
           {onNextChange && (
-            <button type="button" className={btn} onClick={onNextChange} title="F8 in the text">
+            <button type="button" className={btn} onClick={onNextChange} disabled={open.length === 0} title="F8 in the text">
               Next change
             </button>
           )}

package/src/components/track-changes/TrackedTextEditor.tsx

@@ -531,7 +531,9 @@ export const TrackedTextEditor = forwardRef<TrackedTextEditorHandle, TrackedText
             : undefined;
 
     let proposalLine: string | null = null;
-    if (mode === 'suggesting' && canSuggest) {
+    // Nothing typed and nothing in flight: no line. "0 changes" read as a count
+    // of saved suggestions sitting right above the rail's own count.
+    if (mode === 'suggesting' && canSuggest && (localCount > 0 || proposal.state !== 'idle')) {
       const n = `${localCount} ${localCount === 1 ? 'change' : 'changes'}`;
       proposalLine =
         proposal.state === 'error'

package/src/components/track-changes/__tests__/rails.test.tsx

@@ -624,3 +624,20 @@ describe('TrackedField', () => {
     )
   })
 })
+
+describe('ChangesRail: nothing to step to (bd startsim-5378r)', () => {
+  it('disables Previous and Next change when there are no open items', () => {
+    render(
+      <ChangesRail fieldLabel="Blog" currentActorSub="ada" suggestions={[]} threads={[]} onPrevChange={jest.fn()} onNextChange={jest.fn()} />,
+    )
+    expect(screen.getByRole('button', { name: 'Previous' })).toBeDisabled()
+    expect(screen.getByRole('button', { name: 'Next change' })).toBeDisabled()
+  })
+
+  it('enables them when there is something to step to', () => {
+    render(
+      <ChangesRail fieldLabel="Blog" currentActorSub="ada" suggestions={[sugg('s1', 'Hello', 'Hi')]} threads={[]} onPrevChange={jest.fn()} onNextChange={jest.fn()} />,
+    )
+    expect(screen.getByRole('button', { name: 'Next change' })).toBeEnabled()
+  })
+})

package/src/components/track-changes/__tests__/tracked-text-editor.test.tsx

@@ -82,6 +82,13 @@ describe('suggesting mode', () => {
     return { ...utils, ref, onChange, onPropose }
   }
 
+  it('shows no "0 changes" line before anything is typed (bd startsim-9is5h)', () => {
+    const { ref } = mountSuggesting()
+    expect(screen.queryByTestId('proposal-state')).toBeNull()
+    typeAt(ref.current!, 6, 'big ')
+    expect(screen.getByTestId('proposal-state')).toHaveTextContent(/not sent yet/)
+  })
+
   it('never reports an edit to the host, and posts the whole proposed text after a 5 s pause', async () => {
     const { ref, onChange, onPropose } = mountSuggesting()
     typeAt(ref.current!, 6, 'big ')