@lotics/ui 4.4.0 → 4.5.0

package/src/change_review.tsx

@@ -1,17 +1,15 @@
 import { StyleSheet, View } from "react-native";
-import { colors, solid, tint } from "./colors";
+import { colors } from "./colors";
 import { Text } from "./text";
 import { Icon } from "./icon";
 import { Button } from "./button";
-import { IconButton } from "./icon_button";
-import { LinkButton } from "./link_button";
 
 export type ChangeReviewItemStatus = "pending" | "accepted" | "rejected";
 
 export interface ChangeReviewItem {
   /** What changed — a field/parameter name. */
   label: string;
-  /** Prior value. Omit for a newly-added value (renders as just the new value). */
+  /** Prior value. Omit for a newly-added value (renders as just the `+` line). */
   before?: string;
   /** Proposed value. */
   after: string;
@@ -29,114 +27,179 @@ export interface ChangeReviewProps {
   applyLabel?: string;
   /** Once resolved the card settles to a quiet outcome line (no actions). */
   status?: "open" | "applied" | "discarded";
-  /** Providing either flips the card into 1-BY-1 mode: each change row gets its
-   *  own ✓/✕ and reflects `item.status`; the footer counts the accepted set and
-   *  Apply commits only those. The "review the agent's suggested edits one by
-   *  one" pattern. Omit both for whole-set apply/discard. */
+  /** Providing either flips the card into 1-BY-1 mode: each edit is its own
+   *  card with Keep / Drop; deciding COLLAPSES it to a preview the host can
+   *  `onUndoItem`. "Accept all" + "Apply kept" sit in a separate footer. The
+   *  decision is recorded — nothing writes until Apply. Omit both for whole-set. */
   onAcceptItem?: (index: number) => void;
   onRejectItem?: (index: number) => void;
+  /** Revert a decided item back to pending (the Undo on a collapsed card). */
+  onUndoItem?: (index: number) => void;
+}
+
+/** A git-style stacked diff: the old value on a red `−` line (struck), the new
+ *  value on a green `+` line. An addition (no `before`) is just the `+` line. */
+function DiffLines({ before, after }: { before?: string; after: string }) {
+  return (
+    <View style={styles.diff}>
+      {before != null ? (
+        <View style={styles.diffLine}>
+          <Text size="sm" weight="medium" tabular style={styles.marker(colors.red[600])}>
+            −
+          </Text>
+          <Text size="sm" tabular style={[styles.strike, styles.value(colors.red[600])]}>
+            {before}
+          </Text>
+        </View>
+      ) : null}
+      <View style={styles.diffLine}>
+        <Text size="sm" weight="medium" tabular style={styles.marker(colors.emerald[700])}>
+          +
+        </Text>
+        <Text size="sm" weight="medium" tabular style={styles.value(colors.emerald[700])}>
+          {after}
+        </Text>
+      </View>
+    </View>
+  );
 }
 
 /**
- * An agent-proposed edit to existing state, shown as a before→after diff the
- * human reviews before it lands — never auto-applied. Two modes: whole-set
- * (apply / discard the lot) or, when the host passes `onAcceptItem`/
- * `onRejectItem`, 1-BY-1 — each suggested change accepted or rejected on its
- * own, the footer applying only the accepted set. Where `Suggestion` proposes
- * a NEW value, this reviews CHANGES to existing ones.
+ * An agent-proposed edit to existing state, reviewed before it lands — never
+ * auto-applied. Two modes. Whole-set: a list of before→after diffs + apply /
+ * discard the lot. 1-BY-1 (when the host passes `onAcceptItem`/`onRejectItem`):
+ * each edit is its own card with Keep / Drop; deciding COLLAPSES the card to a
+ * preview with Undo, and a separate footer carries Accept-all + the single Apply
+ * that commits the kept set. Where `Suggestion` proposes a NEW value, this
+ * reviews CHANGES to existing ones.
  */
 export function ChangeReview(props: ChangeReviewProps) {
   const status = props.status ?? "open";
   const perItem = props.onAcceptItem != null || props.onRejectItem != null;
-  const accepted = props.changes.filter((c) => c.status === "accepted").length;
+  const total = props.changes.length;
+  const keptCount = props.changes.filter((c) => c.status === "accepted").length;
 
-  return (
-    <View style={[styles.card, status !== "open" ? styles.resolved : null]}>
-      {props.summary ? (
-        <View style={styles.summary}>
-          <Icon name="sparkles" size={13} color={solid("violet")} />
-          <Text size="sm" weight="medium" style={{ flex: 1 }}>
-            {props.summary}
+  const acceptAll = () =>
+    props.changes.forEach((c, i) => {
+      if ((c.status ?? "pending") === "pending") props.onAcceptItem?.(i);
+    });
+
+  const summaryNote = props.summary ? (
+    <View style={styles.note}>
+      <Text size="sm" color="muted">
+        {props.summary}
+      </Text>
+    </View>
+  ) : null;
+
+  // ── 1-BY-1: each edit a card; deciding collapses it to a preview ──────────
+  if (perItem) {
+    return (
+      <View style={[styles.card, status !== "open" ? styles.resolved : null]}>
+        <View style={styles.head}>
+          <Text size="xs" color="muted" weight="medium" style={{ flex: 1 }}>
+            Suggested edits
           </Text>
+          {status === "open" ? (
+            <Text size="xs" color="muted" tabular>
+              {keptCount} of {total} kept
+            </Text>
+          ) : null}
         </View>
-      ) : null}
+        {summaryNote}
 
-      <View style={styles.changes}>
-        {props.changes.map((c, i) => {
-          const rejected = c.status === "rejected";
-          const ok = c.status === "accepted";
-          return (
-            <View key={`${c.label}-${i}`} style={styles.change}>
-              <Text size="xs" color="muted" transform="uppercase" style={styles.changeLabel}>
-                {c.label}
-              </Text>
-              <View style={styles.diff}>
-                {c.before != null ? (
-                  <>
-                    <Text size="sm" color="muted" tabular style={styles.before}>
-                      {c.before}
+        {status !== "open" ? (
+          <Text size="xs" color="muted" weight="medium">
+            {status === "applied" ? "Applied" : "Discarded"}
+          </Text>
+        ) : (
+          <>
+            <View style={styles.list}>
+              {props.changes.map((c, i) => {
+                const st = c.status ?? "pending";
+                if (st === "pending") {
+                  return (
+                    <View key={`${c.label}-${i}`} style={styles.block}>
+                      <Text size="xs" color="muted" weight="medium">
+                        {c.label}
+                      </Text>
+                      <DiffLines before={c.before} after={c.after} />
+                      <View style={styles.cardActions}>
+                        <Button title="Drop" color="muted" shape="rounded" onPress={() => props.onRejectItem?.(i)} />
+                        <Button title="Keep" color="secondary" shape="rounded" onPress={() => props.onAcceptItem?.(i)} />
+                      </View>
+                    </View>
+                  );
+                }
+                const kept = st === "accepted";
+                return (
+                  <View key={`${c.label}-${i}`} style={styles.collapsed}>
+                    <Text size="sm" weight="medium" numberOfLines={1}>
+                      {c.label}
                     </Text>
-                    <Icon name="arrow-right" size={13} color={colors.zinc[400]} />
-                  </>
-                ) : null}
-                <Text size="sm" weight="medium" tabular color={rejected ? "muted" : "default"} style={rejected ? styles.before : undefined}>
-                  {c.after}
-                </Text>
-              </View>
-              {perItem && status === "open" ? (
-                <View style={styles.itemControls}>
-                  <IconButton
-                    icon="check"
-                    size="sm"
-                    color="none"
-                    iconColor={ok ? solid("emerald") : colors.zinc[400]}
-                    accessibilityLabel={`Accept — ${c.label}`}
-                    onPress={() => props.onAcceptItem?.(i)}
-                  />
-                  <IconButton
-                    icon="x"
-                    size="sm"
-                    color="none"
-                    iconColor={rejected ? solid("red") : colors.zinc[400]}
-                    accessibilityLabel={`Reject — ${c.label}`}
-                    onPress={() => props.onRejectItem?.(i)}
-                  />
-                </View>
+                    <Text
+                      size="sm"
+                      color={kept ? "default" : "muted"}
+                      numberOfLines={1}
+                      style={[{ flex: 1 }, kept ? null : styles.strike]}
+                    >
+                      {kept ? c.after : c.before ?? c.after}
+                    </Text>
+                    <View style={styles.statusTag}>
+                      <Icon name={kept ? "check" : "x"} size={14} color={kept ? colors.emerald[600] : colors.zinc[400]} />
+                      <Text size="sm" weight="medium" color="muted">
+                        {kept ? "Kept" : "Dropped"}
+                      </Text>
+                    </View>
+                    {props.onUndoItem ? (
+                      <Button title="Undo" color="muted" shape="rounded" onPress={() => props.onUndoItem?.(i)} />
+                    ) : null}
+                  </View>
+                );
+              })}
+            </View>
+
+            <View style={styles.footer}>
+              <Button title="Accept all" color="muted" shape="rounded" onPress={acceptAll} />
+              <View style={{ flex: 1 }} />
+              {props.onDiscard ? <Button title="Discard" color="muted" shape="rounded" onPress={props.onDiscard} /> : null}
+              {props.onApply ? (
+                <Button title={props.applyLabel ?? "Apply kept"} color="primary" shape="rounded" disabled={keptCount === 0} onPress={props.onApply} />
               ) : null}
             </View>
-          );
-        })}
+          </>
+        )}
       </View>
+    );
+  }
 
+  // ── WHOLE-SET: review the lot, apply / discard together ───────────────────
+  return (
+    <View style={[styles.card, status !== "open" ? styles.resolved : null]}>
+      <Text size="xs" color="muted" weight="medium">
+        Suggested edit
+      </Text>
+      {summaryNote}
+      <View style={styles.block}>
+        {props.changes.map((c, i) => (
+          <View key={`${c.label}-${i}`} style={i > 0 ? styles.changeSpacer : undefined}>
+            <Text size="xs" color="muted" weight="medium">
+              {c.label}
+            </Text>
+            <DiffLines before={c.before} after={c.after} />
+          </View>
+        ))}
+      </View>
       {status !== "open" ? (
-        <View style={styles.outcome}>
-          <Icon
-            name={status === "applied" ? "circle-check" : "rotate-ccw"}
-            size={14}
-            color={status === "applied" ? solid("emerald") : colors.zinc[400]}
-          />
-          <Text size="xs" color="muted">
-            {status === "applied" ? "Applied" : "Discarded"}
-          </Text>
-        </View>
+        <Text size="xs" color="muted" weight="medium">
+          {status === "applied" ? "Applied" : "Discarded"}
+        </Text>
       ) : (
         <View style={styles.footer}>
-          <View style={{ flex: 1 }}>
-            {perItem ? (
-              <Text size="xs" color="muted">
-                {accepted} of {props.changes.length} accepted
-              </Text>
-            ) : null}
-          </View>
-          {props.onDiscard ? <LinkButton title={perItem ? "Reject all" : "Discard"} onPress={props.onDiscard} /> : null}
+          <View style={{ flex: 1 }} />
+          {props.onDiscard ? <Button title="Discard" color="muted" shape="rounded" onPress={props.onDiscard} /> : null}
           {props.onApply ? (
-            <Button
-              title={props.applyLabel ?? (perItem ? "Apply accepted" : "Apply")}
-              color="primary"
-              shape="rounded"
-              disabled={perItem && accepted === 0}
-              onPress={props.onApply}
-            />
+            <Button title={props.applyLabel ?? "Apply"} color="primary" shape="rounded" onPress={props.onApply} />
           ) : null}
         </View>
       )}
@@ -144,23 +207,40 @@ export function ChangeReview(props: ChangeReviewProps) {
   );
 }
 
-const styles = StyleSheet.create({
-  card: {
-    borderWidth: 1,
-    borderColor: tint("violet", 0.35),
-    backgroundColor: colors.white,
-    borderRadius: 12,
-    padding: 14,
-    gap: 12,
-  },
-  resolved: { borderColor: colors.border, backgroundColor: colors.zinc[50] },
-  summary: { flexDirection: "row", alignItems: "center", gap: 8 },
-  changes: { gap: 8 },
-  change: { flexDirection: "row", alignItems: "center", gap: 12 },
-  changeLabel: { width: 120 },
-  diff: { flexDirection: "row", alignItems: "center", gap: 8, flex: 1 },
-  before: { textDecorationLine: "line-through" },
-  itemControls: { flexDirection: "row", alignItems: "center", gap: 2 },
-  outcome: { flexDirection: "row", alignItems: "center", gap: 6 },
-  footer: { flexDirection: "row", alignItems: "center", gap: 8 },
-});
+const styles = {
+  ...StyleSheet.create({
+    card: {
+      borderWidth: 1,
+      borderColor: colors.border,
+      backgroundColor: colors.white,
+      borderRadius: 12,
+      padding: 16,
+      gap: 14,
+    },
+    resolved: { backgroundColor: colors.zinc[50] },
+    head: { flexDirection: "row", alignItems: "center", gap: 8 },
+    note: { borderLeftWidth: 2, borderLeftColor: colors.zinc[300], paddingLeft: 12 },
+    list: { gap: 8 },
+    block: { backgroundColor: colors.zinc[50], borderRadius: 10, padding: 14, gap: 10 },
+    cardActions: { flexDirection: "row", alignItems: "center", justifyContent: "flex-end", gap: 8 },
+    collapsed: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 10,
+      backgroundColor: colors.zinc[50],
+      borderRadius: 10,
+      paddingLeft: 14,
+      paddingRight: 8,
+      paddingVertical: 6,
+      minHeight: 48,
+    },
+    statusTag: { flexDirection: "row", alignItems: "center", gap: 4 },
+    changeSpacer: { marginTop: 10, borderTopWidth: 1, borderTopColor: colors.zinc[200], paddingTop: 10 },
+    diff: { gap: 3 },
+    diffLine: { flexDirection: "row", alignItems: "baseline", gap: 8 },
+    strike: { textDecorationLine: "line-through" },
+    footer: { flexDirection: "row", alignItems: "center", gap: 8 },
+  }),
+  marker: (color: string) => ({ color, width: 12 }),
+  value: (color: string) => ({ color }),
+};

package/src/choice_list.tsx

@@ -0,0 +1,63 @@
+import { StyleSheet, View } from "react-native";
+import { colors } from "./colors";
+import { Text } from "./text";
+import { Icon } from "./icon";
+import { CardSelectItem } from "./card_select_item";
+
+export interface ChoiceOption {
+  label: string;
+  value: string;
+  /** An optional second line under the label. */
+  description?: string;
+}
+
+export interface ChoiceListProps {
+  options: ChoiceOption[];
+  /** The chosen value. */
+  value?: string;
+  onSelect: (value: string) => void;
+}
+
+/**
+ * A vertical set of selectable answer options — bordered cards with the global
+ * focus/hover/selected ring (`CardSelectItem`), single-select and freely
+ * switchable (pick a different option any time). The chosen card shows a check.
+ * The agent's quick-reply surface (`Clarify` uses it) and any "pick one"
+ * question.
+ */
+export function ChoiceList(props: ChoiceListProps) {
+  const { options, value, onSelect } = props;
+  return (
+    <View style={{ gap: 8 }}>
+      {options.map((o) => {
+        const selected = value === o.value;
+        return (
+          <CardSelectItem
+            key={o.value}
+            selected={selected}
+            onPress={() => onSelect(o.value)}
+            accessibilityLabel={o.label}
+            style={styles.item}
+          >
+            <View style={styles.text}>
+              <Text size="sm" weight="medium">
+                {o.label}
+              </Text>
+              {o.description ? (
+                <Text size="xs" color="muted">
+                  {o.description}
+                </Text>
+              ) : null}
+            </View>
+            {selected ? <Icon name="check" size={16} color={colors.zinc[900]} /> : null}
+          </CardSelectItem>
+        );
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  item: { flexDirection: "row", alignItems: "center", gap: 10, paddingVertical: 11, paddingHorizontal: 14 },
+  text: { flex: 1, gap: 2 },
+});

package/src/clarify.tsx

@@ -1,54 +1,37 @@
 import { StyleSheet, View } from "react-native";
-import { colors, solid, tint } from "./colors";
+import { colors } from "./colors";
 import { Text } from "./text";
-import { Icon } from "./icon";
-import { Button } from "./button";
+import { ChoiceList, type ChoiceOption } from "./choice_list";
 
-export interface ClarifyOption {
-  label: string;
-  value: string;
-}
+export type ClarifyOption = ChoiceOption;
 
 export interface ClarifyProps {
   /** The agent's question — what it needs settled to proceed. */
   question: string;
   options: ClarifyOption[];
   onAnswer: (value: string) => void;
-  /** Once answered, the card settles showing the chosen reply (pass the option
-   *  label). */
+  /** The chosen option's VALUE — the picked choice shows selected; it stays
+   *  switchable so the human can change their mind. */
   answer?: string;
 }
 
 /**
- * The agent asks BACK — a question with quick-reply options the human picks
- * before the run continues. Human-in-the-loop input: when the agent is unsure,
- * it clarifies instead of guessing wrong. The run pauses on this; `onAnswer`
- * resumes it. Pair with `AgentRun` / `AgentProgress`.
+ * The agent asks BACK — a question with selectable answer options (`ChoiceList`)
+ * the human picks before the run continues, freely switchable until committed.
+ * Human-in-the-loop input: when the agent is unsure, it clarifies instead of
+ * guessing wrong. The run pauses on this and `onAnswer` resumes it. Pair with
+ * `AgentRun` / `AgentProgress`.
  */
 export function Clarify(props: ClarifyProps) {
-  const answered = props.answer != null;
   return (
     <View style={styles.card}>
-      <View style={styles.header}>
-        <Icon name="message-circle-question-mark" size={15} color={solid("violet")} />
-        <Text size="sm" weight="medium" style={{ flex: 1 }}>
-          {props.question}
-        </Text>
-      </View>
-      {answered ? (
-        <View style={styles.answered}>
-          <Icon name="circle-check" size={14} color={solid("emerald")} />
-          <Text size="sm" color="muted">
-            {props.answer}
-          </Text>
-        </View>
-      ) : (
-        <View style={styles.options}>
-          {props.options.map((o) => (
-            <Button key={o.value} title={o.label} color="secondary" shape="rounded" onPress={() => props.onAnswer(o.value)} />
-          ))}
-        </View>
-      )}
+      <Text size="xs" color="muted" weight="medium">
+        Question
+      </Text>
+      <Text size="sm" weight="medium">
+        {props.question}
+      </Text>
+      <ChoiceList options={props.options} value={props.answer} onSelect={props.onAnswer} />
     </View>
   );
 }
@@ -56,13 +39,10 @@ export function Clarify(props: ClarifyProps) {
 const styles = StyleSheet.create({
   card: {
     borderWidth: 1,
-    borderColor: tint("violet", 0.35),
+    borderColor: colors.border,
     backgroundColor: colors.white,
     borderRadius: 12,
-    padding: 14,
+    padding: 16,
     gap: 12,
   },
-  header: { flexDirection: "row", alignItems: "flex-start", gap: 8 },
-  options: { flexDirection: "row", flexWrap: "wrap", gap: 8 },
-  answered: { flexDirection: "row", alignItems: "center", gap: 6 },
 });

package/src/confidence.tsx

@@ -1,5 +1,6 @@
-import { Badge } from "./badge";
-import type { ColorName } from "./colors";
+import { StyleSheet, View } from "react-native";
+import { colors, solid, type ColorName } from "./colors";
+import { Text } from "./text";
 
 export type ConfidenceLevel = "high" | "medium" | "low";
 
@@ -10,8 +11,9 @@ export interface ConfidenceProps {
 }
 
 const LABEL: Record<ConfidenceLevel, string> = { high: "High", medium: "Medium", low: "Low" };
-// low is zinc (unsure, NOT an error — an error is a different signal); high
-// emerald, medium amber. One family per level, weights derive from the name.
+const FILLED: Record<ConfidenceLevel, number> = { high: 3, medium: 2, low: 1 };
+// high emerald, medium amber, low zinc (unsure — not an error). One family per
+// level; the fill count AND the colour both carry it.
 const COLOR: Record<ConfidenceLevel, ColorName> = { high: "emerald", medium: "amber", low: "zinc" };
 
 export function levelFromScore(score: number): ConfidenceLevel {
@@ -21,11 +23,31 @@ export function levelFromScore(score: number): ConfidenceLevel {
 }
 
 /**
- * How sure the AI is — a calibrated high/medium/low chip on the kit's `Badge`
- * (dot variant). The human weights an AI proposal or estimate by it before
- * accepting. Pair with `Suggestion` and `AssistedField`.
+ * How sure the AI is — a calibrated high / medium / low read as a 3-tick meter
+ * (emerald / amber / zinc) beside the level word. The fill count and the colour
+ * both carry the level. The human weights an AI proposal or estimate by it. Pair
+ * with `Suggestion` and `RecordReview`.
  */
 export function Confidence(props: ConfidenceProps) {
   const level = props.level ?? (props.score != null ? levelFromScore(props.score) : "medium");
-  return <Badge variant="dot" color={COLOR[level]} label={LABEL[level]} />;
+  const filled = FILLED[level];
+  const fill = solid(COLOR[level]);
+  return (
+    <View style={styles.row} accessibilityLabel={`${LABEL[level]} confidence`}>
+      <View style={styles.meter}>
+        {[0, 1, 2].map((i) => (
+          <View key={i} style={[styles.tick, { backgroundColor: i < filled ? fill : colors.zinc[200] }]} />
+        ))}
+      </View>
+      <Text size="xs" weight="medium" style={{ color: fill }}>
+        {LABEL[level]}
+      </Text>
+    </View>
+  );
 }
+
+const styles = StyleSheet.create({
+  row: { flexDirection: "row", alignItems: "center", gap: 6 },
+  meter: { flexDirection: "row", alignItems: "center", gap: 2 },
+  tick: { width: 3, height: 10, borderRadius: 1 },
+});