@lotics/ui 4.4.0 → 4.6.0

package/src/suggestion.tsx

@@ -1,10 +1,8 @@
 import { ReactNode } from "react";
 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 { LinkButton } from "./link_button";
 import { Confidence, type ConfidenceLevel } from "./confidence";
 
 export interface SuggestionProps {
@@ -28,57 +26,50 @@ export interface SuggestionProps {
 
 /**
  * The core review-for-approval surface: an AI proposal the human accepts,
- * edits, or dismisses — never auto-applied. The violet sparkle marks it as
- * AI-proposed; a `Confidence` chip says how sure; the body shows the proposed
- * value. The decision is the human's. For a shortlist, stack several (rank by
- * confidence, the top one first). Pair with `AgentRun` (what produced it) and
- * `ChangeReview` (when the proposal is an edit to existing state).
+ * edits, or dismisses — never auto-applied. A "PROPOSED" eyebrow marks it as
+ * the agent's, a `Confidence` meter says how sure, and the rationale is set as a
+ * left-ruled margin note — the machine's reasoning, quoted and kept apart from
+ * the facts and your controls. The decision is the human's. For a shortlist,
+ * stack several (rank by confidence, the top one first). Pair with `AgentRun`
+ * (what produced it) and `ChangeReview` (when the proposal edits existing state).
  */
 export function Suggestion(props: SuggestionProps) {
   const status = props.status ?? "open";
   const hasConfidence = props.confidence != null || props.confidenceScore != null;
   return (
     <View style={[styles.card, status !== "open" ? styles.resolved : null]}>
-      <View style={styles.header}>
-        <Icon name="sparkles" size={14} color={solid("violet")} />
-        <Text size="sm" weight="semibold" style={{ flex: 1 }} numberOfLines={2}>
-          {props.title}
+      <View style={styles.eyebrow}>
+        <Text size="xs" color="muted" weight="medium" style={{ flex: 1 }}>
+          Proposed
         </Text>
-        {status === "open" && hasConfidence ? (
-          <Confidence level={props.confidence} score={props.confidenceScore} />
-        ) : null}
+        {status === "open" && hasConfidence ? <Confidence level={props.confidence} score={props.confidenceScore} /> : null}
       </View>
 
+      <Text size="md" weight="semibold" numberOfLines={2}>
+        {props.title}
+      </Text>
+
       {props.rationale ? (
-        <Text size="xs" color="muted">
-          {props.rationale}
-        </Text>
+        <View style={styles.note}>
+          <Text size="sm" color="muted">
+            {props.rationale}
+          </Text>
+        </View>
       ) : null}
 
       {props.children ? <View>{props.children}</View> : null}
 
       {status !== "open" ? (
-        <View style={styles.outcome}>
-          <Icon
-            name={status === "accepted" ? "circle-check" : "x"}
-            size={14}
-            color={status === "accepted" ? solid("emerald") : colors.zinc[400]}
-          />
-          <Text size="xs" color="muted">
-            {status === "accepted" ? "Accepted" : "Dismissed"}
-          </Text>
-        </View>
+        <Text size="xs" color="muted" weight="medium">
+          {status === "accepted" ? "Accepted" : "Dismissed"}
+        </Text>
       ) : (
         <View style={styles.footer}>
-          {props.onDismiss ? <LinkButton title="Dismiss" onPress={props.onDismiss} /> : <View />}
-          <View style={styles.actions}>
-            {props.onEdit ? (
-              <Button title="Edit" color="secondary" shape="rounded" icon="square-pen" onPress={props.onEdit} />
-            ) : null}
-            {props.onAccept ? (
-              <Button title={props.acceptLabel ?? "Accept"} color="primary" shape="rounded" onPress={props.onAccept} />
-            ) : null}
-          </View>
+          {props.onDismiss ? <Button title="Dismiss" color="muted" shape="rounded" onPress={props.onDismiss} /> : null}
+          {props.onEdit ? <Button title="Edit" color="secondary" shape="rounded" onPress={props.onEdit} /> : null}
+          {props.onAccept ? (
+            <Button title={props.acceptLabel ?? "Accept"} color="primary" shape="rounded" onPress={props.onAccept} />
+          ) : null}
         </View>
       )}
     </View>
@@ -88,15 +79,14 @@ export function Suggestion(props: SuggestionProps) {
 const styles = StyleSheet.create({
   card: {
     borderWidth: 1,
-    borderColor: tint("violet", 0.35),
+    borderColor: colors.border,
     backgroundColor: colors.white,
     borderRadius: 12,
-    padding: 14,
-    gap: 10,
+    padding: 16,
+    gap: 12,
   },
-  resolved: { borderColor: colors.border, backgroundColor: colors.zinc[50] },
-  header: { flexDirection: "row", alignItems: "center", gap: 8 },
-  outcome: { flexDirection: "row", alignItems: "center", gap: 6 },
-  footer: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" },
-  actions: { flexDirection: "row", alignItems: "center", gap: 8 },
+  resolved: { backgroundColor: colors.zinc[50] },
+  eyebrow: { flexDirection: "row", alignItems: "center", gap: 8 },
+  note: { borderLeftWidth: 2, borderLeftColor: colors.zinc[300], paddingLeft: 12 },
+  footer: { flexDirection: "row", alignItems: "center", justifyContent: "flex-end", gap: 8 },
 });

package/src/time_field.tsx

@@ -10,7 +10,6 @@ import {
   fieldOrder,
   from12h,
   getTimeLayout,
-  placeholderFor,
   to12h,
 } from "./date_segments";
 
@@ -119,13 +118,13 @@ export function TimeField(props: TimeFieldProps) {
     "hour" | "minute" | "dayPeriod",
     { options: Option[]; onSelect: (v: string) => void; label: string; width: number }
   > = {
-    hour: { options: hourOptions, onSelect: setHour, label: segmentLabels.hour, width: 58 },
-    minute: { options: minuteOptions, onSelect: setMinute, label: segmentLabels.minute, width: 58 },
+    hour: { options: hourOptions, onSelect: setHour, label: segmentLabels.hour, width: 78 },
+    minute: { options: minuteOptions, onSelect: setMinute, label: segmentLabels.minute, width: 78 },
     dayPeriod: {
       options: periodOptions,
       onSelect: setPeriod,
       label: segmentLabels.dayPeriod,
-      width: 66,
+      width: 78,
     },
   };
 
@@ -142,7 +141,7 @@ export function TimeField(props: TimeFieldProps) {
             options={c.options}
             onSelect={c.onSelect}
             accessibilityLabel={c.label}
-            placeholder={placeholderFor(type)}
+            placeholder={c.label}
             disabled={disabled}
             width={c.width}
           />

package/src/triage_row.tsx

@@ -0,0 +1,99 @@
+import { StyleSheet, View } from "react-native";
+import { colors } from "./colors";
+import { Text } from "./text";
+import { Button } from "./button";
+import { Badge } from "./badge";
+import { Confidence, type ConfidenceLevel } from "./confidence";
+
+export interface TriageRowProps {
+  /** The incoming item's headline — a subject, a lead name, a ticket. */
+  title: string;
+  /** A one-line preview / snippet of the item. */
+  preview?: string;
+  /** Right meta — time, sender, channel. */
+  meta?: string;
+  /** The AI's classification, rendered as a neutral badge on the call line. */
+  category?: { label: string };
+  /** The AI's suggested action — the specific task to take ("Assign to Nguyen",
+   *  "Apply the payment"). Pairs with `category`, doesn't repeat it. */
+  suggestedAction?: string;
+  confidence?: ConfidenceLevel;
+  confidenceScore?: number;
+  /** Accept the AI's call — its classification + action. */
+  onAccept?: () => void;
+  /** Override — the host opens a reclassify control. */
+  onOverride?: () => void;
+  onDismiss?: () => void;
+  /** Resolved → settles to a quiet outcome line. */
+  status?: "open" | "accepted" | "dismissed";
+}
+
+/**
+ * An incoming item the agent has TRIAGED — the item up top (title · preview ·
+ * time), then the agent's CALL (a classification badge + the suggested action +
+ * confidence), then the decision (accept / reclassify / dismiss). High-confidence
+ * items batch-accept from the host. The unit of an AI inbox / intake / routing
+ * queue. The classification is the agent's; the decision stays the human's.
+ */
+export function TriageRow(props: TriageRowProps) {
+  const status = props.status ?? "open";
+  const resolved = status !== "open";
+  const hasConfidence = props.confidence != null || props.confidenceScore != null;
+  return (
+    <View style={[styles.card, resolved ? styles.resolved : null]}>
+      <View style={styles.titleRow}>
+        <Text size="sm" weight="semibold" style={{ flex: 1 }} numberOfLines={1}>
+          {props.title}
+        </Text>
+        {props.meta ? (
+          <Text size="xs" color="muted" numberOfLines={1}>
+            {props.meta}
+          </Text>
+        ) : null}
+      </View>
+
+      {props.preview ? (
+        <Text size="sm" color="muted" numberOfLines={1}>
+          {props.preview}
+        </Text>
+      ) : null}
+
+      <View style={styles.callRow}>
+        {props.category ? <Badge label={props.category.label} /> : null}
+        {props.suggestedAction ? (
+          <Text size="sm" weight="medium" numberOfLines={1} style={{ flexShrink: 1 }}>
+            {props.suggestedAction}
+          </Text>
+        ) : null}
+        {hasConfidence && !resolved ? <Confidence level={props.confidence} score={props.confidenceScore} /> : null}
+      </View>
+
+      {resolved ? (
+        <Text size="xs" color="muted" weight="medium">
+          {status === "accepted" ? "Accepted" : "Dismissed"}
+        </Text>
+      ) : (
+        <View style={styles.footer}>
+          {props.onOverride ? <Button title="Reclassify" color="muted" shape="rounded" onPress={props.onOverride} /> : null}
+          {props.onDismiss ? <Button title="Dismiss" color="muted" shape="rounded" onPress={props.onDismiss} /> : null}
+          {props.onAccept ? <Button title="Accept" color="primary" shape="rounded" onPress={props.onAccept} /> : null}
+        </View>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    borderWidth: 1,
+    borderColor: colors.border,
+    backgroundColor: colors.white,
+    borderRadius: 12,
+    padding: 16,
+    gap: 10,
+  },
+  resolved: { backgroundColor: colors.zinc[50] },
+  titleRow: { flexDirection: "row", alignItems: "center", gap: 10 },
+  callRow: { flexDirection: "row", alignItems: "center", gap: 10 },
+  footer: { flexDirection: "row", alignItems: "center", justifyContent: "flex-end", gap: 8 },
+});

package/src/assisted_field.tsx

@@ -1,93 +0,0 @@
-import { StyleSheet, View } from "react-native";
-import { solid, tint } from "./colors";
-import { Text } from "./text";
-import { Icon } from "./icon";
-import { IconButton } from "./icon_button";
-import { LinkButton } from "./link_button";
-import { Confidence, type ConfidenceLevel } from "./confidence";
-
-export interface AssistedFieldProps {
-  label: string;
-  /** The current value — an AI estimate until confirmed, or the final value. */
-  value: string;
-  /** Unit suffix shown after the value (mm, cm, kg). */
-  unit?: string;
-  confidence?: ConfidenceLevel;
-  confidenceScore?: number;
-  /** True while the value is still an unconfirmed AI estimate — it reads
-   *  amber-tinted with a Confidence chip and a Confirm action (visible
-   *  provenance). Confirm or override flips it to a plain confirmed value. */
-  estimated?: boolean;
-  onConfirm?: () => void;
-  /** Override — the host swaps in its own inline input to edit the value. */
-  onEdit?: () => void;
-}
-
-/**
- * A form value the AI pre-filled — shown as a tinted ESTIMATE the human
- * confirms (→ plain, checked) or overrides, never silently committed. The
- * provenance is always visible: an estimate looks different from a value a
- * person stood behind. Pair with `Confidence`; for a whole extracted record,
- * stack several and add one "Confirm all" at the form level.
- */
-export function AssistedField(props: AssistedFieldProps) {
-  const { label, value, unit, estimated, confidence, confidenceScore, onConfirm, onEdit } = props;
-  const display = unit ? `${value} ${unit}` : value;
-  return (
-    <View style={styles.row}>
-      <Text size="sm" color="muted" style={styles.label}>
-        {label}
-      </Text>
-      <View style={styles.valueCol}>
-        <View style={styles.valueRow}>
-          {estimated ? (
-            <View style={styles.estimatePill}>
-              <Icon name="sparkles" size={11} color={solid("violet")} />
-              <Text size="sm" weight="medium" tabular>
-                {display}
-              </Text>
-            </View>
-          ) : (
-            <View style={styles.confirmedRow}>
-              <Text size="sm" weight="medium" tabular>
-                {display}
-              </Text>
-              <Icon name="circle-check" size={13} color={solid("emerald")} />
-            </View>
-          )}
-          {onEdit ? (
-            <IconButton icon="square-pen" size="sm" color="none" accessibilityLabel={`Edit ${label}`} onPress={onEdit} />
-          ) : null}
-        </View>
-        {estimated ? (
-          <View style={styles.estimateMeta}>
-            {confidence != null || confidenceScore != null ? (
-              <Confidence level={confidence} score={confidenceScore} />
-            ) : null}
-            {onConfirm ? <LinkButton title="Confirm" onPress={onConfirm} /> : null}
-          </View>
-        ) : null}
-      </View>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  row: { flexDirection: "row", alignItems: "flex-start", gap: 16, paddingVertical: 8 },
-  label: { width: 132, paddingTop: 6 },
-  valueCol: { flex: 1, gap: 6, alignItems: "flex-end" },
-  valueRow: { flexDirection: "row", alignItems: "center", gap: 6 },
-  estimatePill: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6,
-    paddingHorizontal: 10,
-    paddingVertical: 5,
-    borderRadius: 8,
-    backgroundColor: tint("amber", 0.12),
-    borderWidth: 1,
-    borderColor: tint("amber", 0.35),
-  },
-  confirmedRow: { flexDirection: "row", alignItems: "center", gap: 6, paddingVertical: 5 },
-  estimateMeta: { flexDirection: "row", alignItems: "center", gap: 10 },
-});