@startsimpli/ui 0.4.61 → 0.4.62

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui",
-  "version": "0.4.61",
+  "version": "0.4.62",
   "description": "Shared UI components package for StartSimpli applications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/components/collection/ReviewDrawer.tsx

@@ -2,30 +2,29 @@
 
 /**
  * Review-first record drawer — the fast triage surface for a status-carrying
- * entity type (bd startsim-768w.18.14).
+ * entity type (bd startsim-768w.18.14 / .15).
  *
- * Opens READ-OPTIMISED, not as an edit form: the record's title / summary / sources
- * up top, then a sticky action bar that ACTS IN ONE CLICK and SAVES IMMEDIATELY —
- * cast a verdict (👍/👎/✎), Approve (→ ready) or Reject (→ rejected) which advances
- * to the next record without closing, and jot a quick note. ↑/↓ (or j/k) walk the
- * queue; a / x / e / g / b are bare-letter shortcuts (guarded while typing). Deep
- * field-editing stays available behind "Edit fields" (the app injects its own form
- * via renderEditFields), so nothing is lost — it's just no longer the default.
+ * Opens READ-OPTIMISED, not as an edit form: the record's title / summary /
+ * sources up top, then a sticky bar with ONE decision — Approve / Needs work /
+ * Reject. Each decision writes BOTH underlying fields coherently (status = the
+ * pipeline gate + team_verdict = the re-rank signal) in a single save, so there's
+ * no separate "verdict" row duplicating Approve/Reject. Approve/Reject advance to
+ * the next record; the current state shows as a badge that doubles as the rare
+ * manual override (mark written, un-reject). ↑/↓ (or j/k) walk the queue; a / w /
+ * x / e are bare-letter shortcuts (guarded while typing). Deep field-editing stays
+ * behind "Edit fields" (the app injects its form via renderEditFields).
  *
- * Generic + client-injected: the consumer passes a CollectionClient (its authed
- * tenant API), the ordered queue (for prev/next), and an optional ReviewConfig /
- * render-props. Defaults match the OGMC content schema but everything is a prop, so
- * nothing here is tenant-specific.
+ * Generic + client-injected: the consumer passes a CollectionClient, the ordered
+ * queue (prev/next), and optional ReviewConfig / render-props. Defaults match the
+ * OGMC content schema but everything is a prop — nothing here is tenant-specific.
  */
 import { useEffect, useMemo, useState, type ReactNode } from 'react';
 import {
   ChevronLeft,
   ChevronRight,
-  ThumbsUp,
-  ThumbsDown,
-  PencilLine,
   Check,
   X,
+  PencilLine,
   ExternalLink,
   ShieldCheck,
   MessageSquarePlus,
@@ -33,6 +32,13 @@ import {
 
 import { Button } from '../ui/button';
 import { Textarea } from '../ui/textarea';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../ui/select';
 import { notify } from '../toast/use-notify';
 import { cn } from '../../lib/utils';
 import type { CollectionClient, EntityRecord, EntityTypeDef } from './types';
@@ -40,11 +46,12 @@ import { readData, toCamelKey } from './data';
 import { parseSources } from './drafts';
 import {
   resolveReviewConfig,
+  reviewDecisions,
   shouldIgnoreShortcut,
   fieldStr,
   reviewHostOf,
   type ReviewConfig,
-  type VerdictOption,
+  type ReviewDecision,
 } from './review';
 
 export interface ReviewDrawerProps {
@@ -95,6 +102,7 @@ function ReviewDrawerInner({
   renderExtra,
 }: ReviewDrawerProps & { record: EntityRecord }) {
   const cfg = useMemo(() => resolveReviewConfig(type, config), [type, config]);
+  const decisions = useMemo(() => reviewDecisions(cfg), [cfg]);
   const [mode, setMode] = useState<'review' | 'edit'>('review');
   // Local optimistic copy so a click reflects instantly (the parent also refetches).
   const [data, setData] = useState<Record<string, unknown>>(() => ({ ...record.data }));
@@ -139,25 +147,37 @@ function ReviewDrawerInner({
     }
   }
 
-  function setVerdict(value: string) {
-    void patch({ [cfg.verdictAttr]: verdict === value ? '' : value }, `verdict:${value}`);
+  /** One decision → write status AND verdict together (the coherent pair). */
+  function applyDecision(d: ReviewDecision) {
+    const changes: Record<string, unknown> = {};
+    if (d.status) changes[cfg.statusName] = d.status;
+    if (d.verdict) changes[cfg.verdictAttr] = d.verdict;
+    if (d.promptNote) setNoteOpen(true);
+    void patch(changes, `decision:${d.key}`, d.advance);
   }
-  function approve() {
-    if (cfg.transitions.approve) void patch({ [cfg.statusName]: cfg.transitions.approve }, 'approve', true);
-  }
-  function reject() {
-    if (cfg.transitions.reject) void patch({ [cfg.statusName]: cfg.transitions.reject }, 'reject', true);
+
+  /** Manual state override from the badge — status only, no verdict, no advance. */
+  function overrideStatus(value: string) {
+    if (value === status) return;
+    void patch({ [cfg.statusName]: value }, `status:${value}`, false);
   }
+
   async function saveNote() {
     await patch({ [cfg.noteAttr]: note.trim() }, 'note');
     setNoteOpen(false);
   }
 
-  // Keyboard: walk the queue + one-key act. Guarded so it never fires while typing.
+  // Keyboard: walk the queue + one-key decide. Guarded so it never fires while typing.
   useEffect(() => {
     if (mode !== 'review') return;
     function onKey(e: KeyboardEvent) {
       if (shouldIgnoreShortcut(e)) return;
+      const d = decisions.find((x) => x.shortcut === e.key);
+      if (d) {
+        e.preventDefault();
+        applyDecision(d);
+        return;
+      }
       switch (e.key) {
         case 'j':
         case 'ArrowDown':
@@ -167,18 +187,16 @@ function ReviewDrawerInner({
         case 'ArrowUp':
           if (prev) { e.preventDefault(); onNavigate(prev); }
           break;
-        case 'a': e.preventDefault(); approve(); break;
-        case 'x': e.preventDefault(); reject(); break;
         case 'e': e.preventDefault(); setMode('edit'); break;
-        case 'g': e.preventDefault(); setVerdict('good'); break;
-        case 'b': e.preventDefault(); setVerdict('bad'); break;
         case 'Escape': e.preventDefault(); onClose(); break;
       }
     }
     window.addEventListener('keydown', onKey);
     return () => window.removeEventListener('keydown', onKey);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [mode, prev, next, verdict, status, data]);
+  }, [mode, prev, next, decisions, data]);
+
+  const legend = [...decisions.map((d) => `${d.shortcut} ${d.label.toLowerCase()}`), 'e edit', 'j/k move'].join(' · ');
 
   return (
     <div className="fixed inset-0 z-50 flex justify-end" role="dialog" aria-modal="true">
@@ -194,6 +212,21 @@ function ReviewDrawerInner({
             ) : null}
           </div>
           <div className="flex shrink-0 items-center gap-1">
+            {/* Current state — and the rare manual override (mark written, un-reject). */}
+            {cfg.statusChoices.length > 0 ? (
+              <Select value={status || undefined} onValueChange={overrideStatus}>
+                <SelectTrigger className="h-7 w-auto gap-1 border-border text-xs capitalize">
+                  <SelectValue placeholder="State…" />
+                </SelectTrigger>
+                <SelectContent>
+                  {cfg.statusChoices.map((s) => (
+                    <SelectItem key={s} value={s} className="capitalize">
+                      {s}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            ) : null}
             <button
               onClick={() => onNavigate(prev!)}
               disabled={!prev}
@@ -256,11 +289,6 @@ function ReviewDrawerInner({
                     rank {rank}
                   </span>
                 ) : null}
-                {status ? (
-                  <span className="rounded-full bg-muted px-2 py-0.5 capitalize text-muted-foreground">
-                    {status}
-                  </span>
-                ) : null}
                 {cfg.metaAttrs.map((a) => {
                   const v = fieldStr(data, a);
                   if (!v) return null;
@@ -280,30 +308,32 @@ function ReviewDrawerInner({
             </div>
 
             <footer className="space-y-3 border-t border-border px-4 py-3">
-              {/* Verdict */}
-              <div className="flex flex-wrap items-center gap-2">
-                <span className="text-xs font-medium text-muted-foreground">Verdict</span>
-                <div className="flex overflow-hidden rounded-md border border-border">
-                  {cfg.verdicts.map((v) => (
-                    <VerdictButton
-                      key={v.value}
-                      option={v}
-                      active={verdict === v.value}
-                      busy={busy === `verdict:${v.value}`}
-                      onClick={() => setVerdict(v.value)}
+              {decisions.length > 0 ? (
+                <div className="flex items-stretch gap-2">
+                  {decisions.map((d) => (
+                    <DecisionButton
+                      key={d.key}
+                      decision={d}
+                      active={verdict !== '' && d.verdict === verdict}
+                      busy={busy === `decision:${d.key}`}
+                      onClick={() => applyDecision(d)}
                     />
                   ))}
                 </div>
+              ) : null}
+
+              <div className="flex items-center gap-2">
                 <button
                   onClick={() => setNoteOpen((o) => !o)}
                   className={cn(
-                    'ml-auto inline-flex items-center gap-1 rounded-md border border-border px-2.5 py-1 text-xs hover:bg-muted',
+                    'inline-flex items-center gap-1 rounded-md border border-border px-2.5 py-1 text-xs hover:bg-muted',
                     note && 'text-primary-700',
                   )}
                 >
                   <MessageSquarePlus className="h-3.5 w-3.5" />
-                  {note ? 'Note ✓' : 'Note'}
+                  {note ? 'Note ✓' : 'Add note'}
                 </button>
+                <span className="ml-auto text-[11px] text-muted-foreground">{legend}</span>
               </div>
 
               {noteOpen ? (
@@ -312,8 +342,9 @@ function ReviewDrawerInner({
                     value={note}
                     onChange={(e) => setNote(e.target.value)}
                     rows={2}
-                    placeholder="Quick note for the AI — e.g. “good topic, angle too broad; needs a fresher source.”"
+                    placeholder="Why? — e.g. “good topic, angle too broad; needs a fresher source.”"
                     className="text-sm"
+                    autoFocus
                   />
                   <div className="flex gap-2">
                     <Button size="sm" onClick={saveNote} disabled={busy === 'note'}>
@@ -334,36 +365,6 @@ function ReviewDrawerInner({
               ) : note ? (
                 <p className="border-l-2 border-border pl-2 text-xs italic text-muted-foreground">{note}</p>
               ) : null}
-
-              {/* Decide */}
-              <div className="flex items-center gap-2">
-                {cfg.transitions.approve ? (
-                  <Button
-                    size="sm"
-                    onClick={approve}
-                    disabled={busy === 'approve'}
-                    className="flex-1 bg-emerald-600 hover:bg-emerald-700"
-                  >
-                    <Check className="mr-1.5 h-4 w-4" />
-                    {busy === 'approve' ? 'Saving…' : `Approve → ${cfg.transitions.approve}`}
-                  </Button>
-                ) : null}
-                {cfg.transitions.reject ? (
-                  <Button
-                    size="sm"
-                    variant="outline"
-                    onClick={reject}
-                    disabled={busy === 'reject'}
-                    className="flex-1 border-rose-300 text-rose-700 hover:bg-rose-50"
-                  >
-                    <X className="mr-1.5 h-4 w-4" />
-                    {busy === 'reject' ? 'Saving…' : 'Reject'}
-                  </Button>
-                ) : null}
-              </div>
-              <p className="text-center text-[11px] text-muted-foreground">
-                j/k move · a approve · x reject · e edit · g/b verdict
-              </p>
             </footer>
           </>
         )}
@@ -372,44 +373,58 @@ function ReviewDrawerInner({
   );
 }
 
-const TONE_ON: Record<VerdictOption['tone'], string> = {
-  good: 'bg-emerald-600 text-white',
-  bad: 'bg-rose-600 text-white',
-  neutral: 'bg-amber-500 text-white',
-};
-const TONE_ICON: Record<VerdictOption['tone'], typeof ThumbsUp> = {
-  good: ThumbsUp,
-  bad: ThumbsDown,
+const DECISION_ICON: Record<ReviewDecision['tone'], typeof Check> = {
+  good: Check,
+  bad: X,
   neutral: PencilLine,
 };
+const DECISION_STYLE: Record<ReviewDecision['tone'], string> = {
+  good: 'bg-emerald-600 text-white hover:bg-emerald-700 border-emerald-600',
+  bad: 'border-rose-300 text-rose-700 hover:bg-rose-50',
+  neutral: 'border-amber-300 text-amber-700 hover:bg-amber-50',
+};
 
-function VerdictButton({
-  option,
+function DecisionButton({
+  decision,
   active,
   busy,
   onClick,
 }: {
-  option: VerdictOption;
+  decision: ReviewDecision;
   active: boolean;
   busy: boolean;
   onClick: () => void;
 }) {
-  const Icon = TONE_ICON[option.tone];
+  const Icon = DECISION_ICON[decision.tone];
   return (
     <button
       type="button"
       onClick={onClick}
       disabled={busy}
+      title={`${decision.label} (${decision.shortcut})`}
       className={cn(
-        'flex items-center gap-1 px-2.5 py-1 text-xs font-medium transition disabled:opacity-60',
-        active ? TONE_ON[option.tone] : 'bg-card text-muted-foreground hover:bg-muted',
+        'flex flex-1 flex-col items-center justify-center gap-0.5 rounded-md border px-3 py-2 text-sm font-medium transition disabled:opacity-60',
+        DECISION_STYLE[decision.tone],
+        active && 'ring-2 ring-offset-1 ring-current',
       )}
     >
-      <Icon className="h-3.5 w-3.5" /> {option.label}
+      <span className="flex items-center gap-1.5">
+        <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.test.ts

@@ -1,6 +1,7 @@
 import {
   deriveReviewTransitions,
   resolveReviewConfig,
+  reviewDecisions,
   pickStatusAttr,
   shouldIgnoreShortcut,
   nextReviewIndex,
@@ -100,6 +101,44 @@ describe('resolveReviewConfig', () => {
   });
 });
 
+describe('reviewDecisions', () => {
+  const topic = type([
+    enumAttr('status', ['suggested', 'ready', 'rejected', 'written']),
+    textAttr('team_verdict'),
+  ]);
+
+  it('maps the three decisions to status + verdict pairs on the OGMC schema', () => {
+    const d = reviewDecisions(resolveReviewConfig(topic));
+    expect(d.map((x) => x.key)).toEqual(['approve', 'needs_work', 'reject']);
+    expect(d.find((x) => x.key === 'approve')).toMatchObject({ status: 'ready', verdict: 'good', advance: true });
+    expect(d.find((x) => x.key === 'needs_work')).toMatchObject({ status: 'suggested', verdict: 'edit', advance: false, promptNote: true });
+    expect(d.find((x) => x.key === 'reject')).toMatchObject({ status: 'rejected', verdict: 'bad', advance: true });
+  });
+
+  it('drops decisions whose status target does not resolve', () => {
+    // two-state enum with no rejection word → no Reject; approve resolves to the successor
+    const twoState = type([enumAttr('status', ['open', 'closed']), textAttr('team_verdict')]);
+    const keys = reviewDecisions(resolveReviewConfig(twoState)).map((x) => x.key);
+    expect(keys).toContain('approve');
+    expect(keys).not.toContain('reject');
+  });
+
+  it('uses custom verdict vocab tones', () => {
+    const d = reviewDecisions(
+      resolveReviewConfig(topic, {
+        verdicts: [
+          { value: 'yes', label: 'Yes', tone: 'good' },
+          { value: 'no', label: 'No', tone: 'bad' },
+        ],
+      }),
+    );
+    expect(d.find((x) => x.key === 'approve')?.verdict).toBe('yes');
+    expect(d.find((x) => x.key === 'reject')?.verdict).toBe('no');
+    // no neutral verdict, but an entry stage exists → Needs work still offered (verdict null)
+    expect(d.find((x) => x.key === 'needs_work')).toMatchObject({ verdict: null });
+  });
+});
+
 describe('shouldIgnoreShortcut', () => {
   it('ignores while typing in a form control', () => {
     expect(shouldIgnoreShortcut({ key: 'a', target: { tagName: 'INPUT' } })).toBe(true);

package/src/components/collection/index.ts

@@ -11,6 +11,8 @@ export { ReviewDrawer, type ReviewDrawerProps } from './ReviewDrawer';
 export {
   resolveReviewConfig,
   deriveReviewTransitions,
+  reviewDecisions,
+  type ReviewDecision,
   pickStatusAttr,
   shouldIgnoreShortcut,
   nextReviewIndex,

package/src/components/collection/review.ts

@@ -215,6 +215,88 @@ export function resolveReviewConfig(
   };
 }
 
+// ---- the single review decision (Approve / Needs work / Reject) ----
+//
+// status and team_verdict are two fields with different consumers (status = the
+// pipeline gate the writer keys off; team_verdict = the signal the re-rank agent
+// turns INTO status). Their outcomes overlap, so the reviewer makes ONE decision
+// and we write BOTH fields coherently — never two competing button rows.
+
+export interface ReviewDecision {
+  /** Stable id ('approve' | 'needs_work' | 'reject'). */
+  key: string;
+  label: string;
+  /** Status to write (null → leave status untouched). */
+  status: string | null;
+  /** Verdict to write (null → leave verdict untouched). */
+  verdict: string | null;
+  tone: VerdictTone;
+  /** Auto-advance to the next record after this decision. */
+  advance: boolean;
+  /** Bare-letter shortcut. */
+  shortcut: string;
+  /** Open the note box on this decision (a rejection/hold wants a reason). */
+  promptNote: boolean;
+}
+
+/**
+ * The (up to) three review decisions derived from the resolved config:
+ *   - Approve    → the approve status  + the "good" verdict, auto-advances
+ *   - Needs work → back to the entry stage + the "edit"/neutral verdict, holds
+ *                  (so it's revisited) and prompts a note
+ *   - Reject     → the reject status + the "bad" verdict, auto-advances
+ * A decision only appears when its status target resolves (or, for Needs work,
+ * when there's an entry stage or an edit verdict) — so a two-state or non-workflow
+ * enum simply shows fewer buttons instead of guessing.
+ */
+export function reviewDecisions(r: ResolvedReview): ReviewDecision[] {
+  const verdictOf = (tone: VerdictTone): string | null =>
+    r.verdicts.find((v) => v.tone === tone)?.value ?? null;
+  const entry = r.statusChoices[0] ?? null;
+  const out: ReviewDecision[] = [];
+
+  if (r.transitions.approve) {
+    out.push({
+      key: 'approve',
+      label: 'Approve',
+      status: r.transitions.approve,
+      verdict: verdictOf('good'),
+      tone: 'good',
+      advance: true,
+      shortcut: 'a',
+      promptNote: false,
+    });
+  }
+
+  const editVerdict = verdictOf('neutral');
+  if (entry && (editVerdict || entry !== r.transitions.approve)) {
+    out.push({
+      key: 'needs_work',
+      label: 'Needs work',
+      status: entry,
+      verdict: editVerdict,
+      tone: 'neutral',
+      advance: false,
+      shortcut: 'w',
+      promptNote: true,
+    });
+  }
+
+  if (r.transitions.reject) {
+    out.push({
+      key: 'reject',
+      label: 'Reject',
+      status: r.transitions.reject,
+      verdict: verdictOf('bad'),
+      tone: 'bad',
+      advance: true,
+      shortcut: 'x',
+      promptNote: false,
+    });
+  }
+  return out;
+}
+
 // ---- small read helpers used by the component (kept here so they're tested) ----
 
 /** String read of an attr off a record's data blob ('' when missing). */