@lotics/ui 7.15.0 → 7.17.0

package/AGENTS.md

@@ -532,7 +532,8 @@ controls — while **status/severity/diffs use functional colour** the way the r
 - **Confidence** — a 3-tick meter + the full phrase ("High confidence" / "Medium" / "Low"), emerald /
   amber / zinc by level; `labels` to translate (one phrase per level).
 - **Finding severity** — a coloured dot `Badge` + metric: red critical, amber warning, blue note,
-  emerald on-track (+ stacking order, most severe first).
+  emerald on-track (+ stacking order, most severe first). The badge words localize through
+  `LoticsLocaleProvider` (`locale.finding`, override per-instance via `labels`) — never hardcode them.
 - **Stepper / AgentRun nodes** — progress dots on a spine: `current` a **pulsing accent ring** (white
   centre), `done` a filled accent dot + **white check**, `upcoming` a faint **grey** ring, the terminal
   `complete` a **blackish ring + black check**, `warning` **amber**. Default accent is neutral ink

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "7.15.0",
+  "version": "7.17.0",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",

package/src/finding.tsx

@@ -4,11 +4,14 @@ import { Text } from "./text";
 import { Badge } from "./badge";
 import { Button } from "./button";
 import { Sources, type SourceRef } from "./sources";
+import { useLoticsLocale } from "./locale";
 
 export type FindingSeverity = "critical" | "warning" | "info" | "positive";
 
 export interface FindingProps {
   severity?: FindingSeverity;
+  /** Translated severity words. Defaults resolve through the locale ("Critical" …). */
+  labels?: Partial<FindingLabels>;
   /** The headline — what the agent found. */
   title: string;
   /** One or two lines explaining it. */
@@ -28,12 +31,13 @@ export interface FindingProps {
 
 // Severity reads through a coloured dot badge + the order it's stacked in (most
 // severe first): red critical, amber warning, blue note, emerald on-track. The
-// metric takes the same colour.
-const SEV: Record<FindingSeverity, { word: string; color: ColorName }> = {
-  critical: { word: "Critical", color: "red" },
-  warning: { word: "Warning", color: "amber" },
-  info: { word: "Note", color: "blue" },
-  positive: { word: "On track", color: "emerald" },
+// metric takes the same colour. Words resolve prop → locale → English default.
+export type FindingLabels = Record<FindingSeverity, string>;
+const SEV_COLOR: Record<FindingSeverity, ColorName> = {
+  critical: "red",
+  warning: "amber",
+  info: "blue",
+  positive: "emerald",
 };
 
 /**
@@ -45,7 +49,9 @@ const SEV: Record<FindingSeverity, { word: string; color: ColorName }> = {
  * carries its own next action.
  */
 export function Finding(props: FindingProps) {
-  const sev = SEV[props.severity ?? "info"];
+  const severity = props.severity ?? "info";
+  const words = { ...useLoticsLocale().finding, ...props.labels };
+  const sev = { word: words[severity], color: SEV_COLOR[severity] };
   return (
     <View style={styles.card}>
       <View style={styles.header}>

package/src/locale.tsx

@@ -2,6 +2,7 @@ import { createContext, useContext, type ReactNode } from "react";
 import { type PaginationLabels } from "./pagination";
 import { type SortHeaderLabels } from "./sort_header";
 import { type ConfidenceLabels } from "./confidence";
+import { type FindingLabels } from "./finding";
 import { type RemainderMeterLabels } from "./remainder_meter";
 import { type DateRangeFilterFieldLabels } from "./date_range_filter_field";
 
@@ -36,6 +37,8 @@ export interface LoticsLocale {
   drawer: { previous: string; next: string; close: string };
   /** `Confidence`: the full level phrase ("High confidence" …). */
   confidence: ConfidenceLabels;
+  /** `Finding`: the severity badge word ("Critical" …). */
+  finding: FindingLabels;
   /** `RemainderMeter`: the applied / remaining / over / exact captions. */
   remainderMeter: Required<RemainderMeterLabels>;
   /** `ChangeReview` (+ `ChangeReviewActions`): the review-card chrome — the
@@ -81,6 +84,7 @@ export const en: LoticsLocale = {
   formField: { optional: "Optional" },
   drawer: { previous: "Previous record", next: "Next record", close: "Close" },
   confidence: { high: "High confidence", medium: "Medium confidence", low: "Low confidence" },
+  finding: { critical: "Critical", warning: "Warning", info: "Note", positive: "On track" },
   remainderMeter: {
     applied: (allocated, total) => `${allocated} of ${total} applied`,
     remaining: (remainder) => `${remainder} unapplied`,
@@ -131,6 +135,7 @@ export const vi: LoticsLocale = {
   formField: { optional: "Tùy chọn" },
   drawer: { previous: "Bản ghi trước", next: "Bản ghi sau", close: "Đóng" },
   confidence: { high: "Độ tin cậy cao", medium: "Độ tin cậy trung bình", low: "Độ tin cậy thấp" },
+  finding: { critical: "Nghiêm trọng", warning: "Cảnh báo", info: "Ghi chú", positive: "Đúng tiến độ" },
   remainderMeter: {
     applied: (allocated, total) => `Đã phân bổ ${allocated}/${total}`,
     remaining: (remainder) => `Còn ${remainder}`,

package/src/table.tsx

@@ -80,30 +80,35 @@ export function Table(props: TableProps) {
 
   return (
     <TableContext.Provider value={{ columns, leading, trailing }}>
-      <View style={styles.headerBand}>
-        {leading > 0 ? <View style={{ width: leading }}>{selectAll}</View> : null}
-        {columns.map((col) => (
-          <View key={col.key} style={colStyle(col)}>
-            {col.label ? (
-              col.sortable && onSort ? (
-                <SortHeader label={col.label} sortKey={col.key} sort={sort ?? null} onSort={onSort} align={col.align} labels={sortLabels} />
-              ) : (
-                <Text size="xs" color="muted" transform="uppercase" numberOfLines={1}>
-                  {col.label}
-                </Text>
-              )
-            ) : null}
-          </View>
-        ))}
-        {trailing > 0 ? <View style={{ width: trailing }} /> : null}
-      </View>
-      <View style={styles.body}>
-        {rows.map((row, i) => (
-          <View key={i}>
-            {i > 0 ? <Divider /> : null}
-            {row}
-          </View>
-        ))}
+      {/* ONE layout node: without this wrapper the header band + body land as two
+          direct flex children of the app's container, and a parent column `gap`
+          (the standard section spacing) opens a hole between the header and rows. */}
+      <View>
+        <View style={styles.headerBand}>
+          {leading > 0 ? <View style={{ width: leading }}>{selectAll}</View> : null}
+          {columns.map((col) => (
+            <View key={col.key} style={colStyle(col)}>
+              {col.label ? (
+                col.sortable && onSort ? (
+                  <SortHeader label={col.label} sortKey={col.key} sort={sort ?? null} onSort={onSort} align={col.align} labels={sortLabels} />
+                ) : (
+                  <Text size="xs" color="muted" transform="uppercase" numberOfLines={1}>
+                    {col.label}
+                  </Text>
+                )
+              ) : null}
+            </View>
+          ))}
+          {trailing > 0 ? <View style={{ width: trailing }} /> : null}
+        </View>
+        <View style={styles.body}>
+          {rows.map((row, i) => (
+            <View key={i}>
+              {i > 0 ? <Divider /> : null}
+              {row}
+            </View>
+          ))}
+        </View>
       </View>
     </TableContext.Provider>
   );