@lotics/ui 5.6.1 → 5.7.0

package/AGENTS.md

@@ -270,9 +270,9 @@ Compose the surfaces as a loop, and reach for the right one by job:
   attaching HOLDS the file for review; the human presses Send. The canvas (`tpl_dieline`) uses it this
   way; while running the host swaps `Composer` for `AgentProgress` (same pill geometry, so it reads as
   a morph).
-- **Show the work** — `AgentRun`: a live feed of the agent's work — its streamed narration (with a
-  blinking caret) + tool calls as a vertical `Stepper` of neutral dots (the latest pulsing while live,
-  a white-check dot once done). No title, no avatar — just the work. A terminal "Done" step (the
+- **Show the work** — `AgentRun`: a live feed of the agent's work — its streamed narration (rendered
+  as `Markdown`, with a trailing ▍ while live) + tool calls as a vertical `Stepper` of neutral dots (the
+  latest pulsing while live, a white-check dot once done). No title, no avatar — just the work. A terminal "Done" step (the
   `complete` node) appears ONLY once the run finishes. A step can carry `peek` content to glance into
   via a popover. Tool labels resolve from the raw tool name via a built-in default map + an optional
   `labelForTool` override (localize THERE — the kit stays English). `doneLabel` localizes the terminal.
@@ -581,7 +581,9 @@ recipe for a screen JOB; copy and adapt). Pick by the job:
 
 ## Full component inventory (import as `@lotics/ui/<module>`)
 
-text · card (Card · CardHeader · CardHeaderTitle · CardHeaderMeta · CardBody · CardFooter) ·
+text ·
+markdown (Markdown — the single canonical markdown renderer for chat, apps, and `AgentRun`; rich on web via react-markdown/remark-gfm with copyable tables, plain-text on native; takes a markdown `children` string; import `@lotics/ui/markdown.css` once for styling) ·
+card (Card · CardHeader · CardHeaderTitle · CardHeaderMeta · CardBody · CardFooter) ·
 section_heading (SectionHeading · SectionHeadingTitle — compound, owns no margin) · badge ·
 option_badge (OptionBadge — a select value as its configured colored badge) ·
 member_chip (MemberChip — avatar + name; the universal person render) ·

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "5.6.1",
+  "version": "5.7.0",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",
@@ -63,6 +63,11 @@
     "./activity_indicator": "./src/activity_indicator.tsx",
     "./agent_run": "./src/agent_run.tsx",
     "./agent_progress": "./src/agent_progress.tsx",
+    "./markdown": {
+      "react-native": "./src/markdown.tsx",
+      "default": "./src/markdown.web.tsx"
+    },
+    "./markdown.css": "./src/markdown.css",
     "./confidence": "./src/confidence.tsx",
     "./review_card": "./src/review_card.tsx",
     "./change_review": "./src/change_review.tsx",
@@ -217,6 +222,10 @@
     "directory": "packages/ui"
   },
   "license": "MIT",
+  "dependencies": {
+    "react-markdown": "^10.0.0",
+    "remark-gfm": "^4.0.0"
+  },
   "peerDependencies": {
     "@lotics/docx": "^0.1.0",
     "@lotics/xlsx": "^0.1.0",

package/src/agent_run.tsx

@@ -1,8 +1,8 @@
-import { useEffect, useRef, type ReactNode } from "react";
-import { Animated, StyleSheet, View } from "react-native";
-import { colors, solid } from "./colors";
+import { type ReactNode } from "react";
+import { View } from "react-native";
 import { Text } from "./text";
 import { type IconName } from "./icon";
+import { Markdown } from "./markdown";
 import { Peek } from "./peek";
 import { Stepper, Step, type StepStatus } from "./stepper";
 
@@ -25,10 +25,10 @@ export interface AgentRunStep {
 
 export interface AgentRunProps {
   steps: AgentRunStep[];
-  /** The agent's streamed reasoning / answer text — shown as a narration block
-   *  above the feed, with a live caret while streaming. */
+  /** The agent's streamed reasoning / answer text — rendered as markdown in a
+   *  narration block above the feed, with a trailing ▍ while streaming. */
   text?: string;
-  /** Whole-run state. `streaming` keeps the caret blinking + the latest step
+  /** Whole-run state. `streaming` keeps the trailing ▍ + the latest step
    *  pulsing; `done`/`error` settle it. Defaults to `streaming` while a step runs. */
   state?: "streaming" | "done" | "error";
   /** Localize / override a TOOL step's display label by its raw tool name
@@ -96,12 +96,7 @@ export function AgentRun(props: AgentRunProps) {
 
   return (
     <View accessibilityLabel={accessibilityLabel} style={{ gap: 12 }}>
-      {text ? (
-        <Text size="sm" style={styles.narration}>
-          {text}
-          {streaming ? <Caret /> : null}
-        </Text>
-      ) : null}
+      {text ? <Markdown>{streaming ? `${text} ▍` : text}</Markdown> : null}
 
       <Stepper orientation="vertical" live={streaming}>
         {steps.map((s, i) => {
@@ -147,23 +142,3 @@ export function AgentRun(props: AgentRunProps) {
     </View>
   );
 }
-
-// A blinking caret that trails the streamed text — the signature of live writing.
-function Caret() {
-  const opacity = useRef(new Animated.Value(1)).current;
-  useEffect(() => {
-    const loop = Animated.loop(
-      Animated.sequence([
-        Animated.timing(opacity, { toValue: 0, duration: 480, useNativeDriver: false }),
-        Animated.timing(opacity, { toValue: 1, duration: 480, useNativeDriver: false }),
-      ]),
-    );
-    loop.start();
-    return () => loop.stop();
-  }, [opacity]);
-  return <Animated.Text style={{ opacity, color: solid("blue") }}>▍</Animated.Text>;
-}
-
-const styles = StyleSheet.create({
-  narration: { lineHeight: 21, color: colors.zinc[700] },
-});

package/src/markdown.css

@@ -0,0 +1,209 @@
+.ui-markdown {
+  font-family: Inter_400Regular, "apple-system", "BlinkMacSystemFont", "Segoe UI",
+    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
+    "Helvetica Neue", sans-serif;
+  font-size: 14px;
+  line-height: 24px;
+  letter-spacing: -0.4px;
+  color: rgba(24, 24, 27, 1);
+}
+
+/* Headings */
+
+.ui-markdown h1 {
+  font-family: Inter_600SemiBold, "apple-system", "BlinkMacSystemFont", "Segoe UI",
+    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
+    "Helvetica Neue", sans-serif;
+  font-size: 24px;
+  line-height: 30px;
+  font-weight: 600;
+  padding-top: 12px;
+  padding-bottom: 4px;
+  margin: 0;
+}
+
+.ui-markdown h2 {
+  font-family: Inter_600SemiBold, "apple-system", "BlinkMacSystemFont", "Segoe UI",
+    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
+    "Helvetica Neue", sans-serif;
+  font-size: 18px;
+  line-height: 24px;
+  font-weight: 600;
+  padding-top: 12px;
+  padding-bottom: 4px;
+  margin: 0;
+}
+
+.ui-markdown h3 {
+  font-family: Inter_600SemiBold, "apple-system", "BlinkMacSystemFont", "Segoe UI",
+    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
+    "Helvetica Neue", sans-serif;
+  font-size: 16px;
+  line-height: 22px;
+  font-weight: 600;
+  padding-top: 8px;
+  padding-bottom: 4px;
+  margin: 0;
+}
+
+.ui-markdown h4,
+.ui-markdown h5,
+.ui-markdown h6 {
+  font-family: Inter_500Medium, "apple-system", "BlinkMacSystemFont", "Segoe UI",
+    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
+    "Helvetica Neue", sans-serif;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 500;
+  padding-top: 8px;
+  padding-bottom: 4px;
+  margin: 0;
+}
+
+/* Block elements */
+
+.ui-markdown p {
+  margin: 0;
+  padding: 4px 0;
+}
+
+.ui-markdown blockquote {
+  border-left: 3px solid rgba(228, 228, 231, 1);
+  margin: 4px 0;
+  padding-left: 12px;
+  color: rgba(113, 113, 122, 1);
+}
+
+.ui-markdown hr {
+  border: none;
+  border-top: 1px solid rgba(228, 228, 231, 1);
+  margin: 8px 0;
+}
+
+/* Lists */
+
+.ui-markdown ul,
+.ui-markdown ol {
+  padding-left: 24px;
+  margin: 4px 0;
+}
+
+.ui-markdown li {
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+
+/* Inline */
+
+.ui-markdown strong {
+  font-family: Inter_500Medium, "apple-system", "BlinkMacSystemFont", "Segoe UI",
+    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
+    "Helvetica Neue", sans-serif;
+  font-weight: 500;
+}
+
+.ui-markdown a {
+  color: rgba(59, 130, 246, 1);
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.ui-markdown del {
+  color: rgba(113, 113, 122, 1);
+}
+
+/* Code */
+
+.ui-markdown code {
+  padding: 1px 5px;
+  color: rgba(127, 29, 29, 1);
+  background-color: rgba(244, 244, 245, 1);
+  border-radius: 4px;
+  font-size: 13px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
+
+.ui-markdown pre {
+  background-color: rgba(244, 244, 245, 1);
+  padding: 12px;
+  border-radius: 8px;
+  margin: 4px 0;
+  overflow-x: auto;
+}
+
+.ui-markdown pre code {
+  padding: 0;
+  color: inherit;
+  background-color: transparent;
+  border-radius: 0;
+  font-size: 13px;
+  line-height: 20px;
+}
+
+/* Tables */
+
+.ui-markdown table {
+  border-collapse: collapse;
+  margin: 4px 0;
+  width: max-content;
+  min-width: 100%;
+}
+
+.ui-markdown th,
+.ui-markdown td {
+  border: 1px solid rgba(228, 228, 231, 1);
+  padding: 6px 12px;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.ui-markdown th {
+  background-color: rgba(244, 244, 245, 1);
+  font-family: Inter_500Medium, "apple-system", "BlinkMacSystemFont", "Segoe UI",
+    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
+    "Helvetica Neue", sans-serif;
+  font-weight: 500;
+}
+
+/* Table copy button */
+
+.ui-markdown-table-wrapper {
+  position: relative;
+  margin: 16px 0;
+  max-width: 100%;
+}
+
+.ui-markdown-table-scroll {
+  overflow-x: auto;
+  max-width: 100%;
+}
+
+.ui-markdown-table-wrapper table {
+  margin: 0;
+}
+
+.ui-markdown-table-copy {
+  position: absolute;
+  top: 1px;
+  right: 1px;
+  opacity: 0;
+  transition: opacity 0.15s ease-out;
+  background: rgba(244, 244, 245, 0.9);
+  border: 1px solid rgba(228, 228, 231, 1);
+  border-radius: 0 0 0 6px;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ui-markdown-table-wrapper:hover .ui-markdown-table-copy {
+  opacity: 1;
+}
+
+.ui-markdown-table-copy:hover {
+  background: rgba(228, 228, 231, 1);
+}

package/src/markdown.tsx

@@ -0,0 +1,17 @@
+import { View } from "react-native";
+import { Text } from "./text";
+
+/**
+ * Native fallback. The rich renderer (`markdown.web.tsx`) is react-markdown over
+ * the DOM (`<div>`/`<table>`/clipboard) — web-only. `@lotics/ui` also builds for
+ * native, so this renders the source as plain text. Rich markdown shows on web
+ * (custom-code apps + the frontend on web), which is where it's used; the web
+ * variant is picked via the conditional `exports` in package.json.
+ */
+export function Markdown({ children }: { children: string }) {
+  return (
+    <View>
+      <Text size="sm">{children}</Text>
+    </View>
+  );
+}

package/src/markdown.web.tsx

@@ -0,0 +1,69 @@
+import "./markdown.css";
+import React, { useCallback, useRef, useState } from "react";
+import { View } from "react-native";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { Icon } from "./icon";
+import { colors } from "./colors";
+
+export function Markdown({ children }: { children: string }) {
+  return (
+    <View>
+      <div className="ui-markdown">
+        <ReactMarkdown remarkPlugins={[remarkGfm]} components={markdownComponents}>
+          {children}
+        </ReactMarkdown>
+      </div>
+    </View>
+  );
+}
+
+const markdownComponents = {
+  table: CopyableTable,
+};
+
+function CopyableTable(props: React.ComponentPropsWithoutRef<"table"> & { node?: unknown }) {
+  const { node: _node, children, ...rest } = props;
+  const tableRef = useRef<HTMLTableElement>(null);
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = useCallback(async () => {
+    const table = tableRef.current;
+    if (!table) return;
+
+    const rows = table.querySelectorAll("tr");
+    const tsv = Array.from(rows)
+      .map((row) =>
+        Array.from(row.querySelectorAll("th, td"))
+          .map((cell) => (cell.textContent ?? "").replace(/\t/g, " ").replace(/\n/g, " ").trim())
+          .join("\t"),
+      )
+      .join("\n");
+
+    await navigator.clipboard.writeText(tsv);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  }, []);
+
+  return (
+    <div className="ui-markdown-table-wrapper">
+      <div className="ui-markdown-table-scroll">
+        <table ref={tableRef} {...rest}>
+          {children}
+        </table>
+      </div>
+      <button
+        className="ui-markdown-table-copy"
+        onClick={handleCopy}
+        type="button"
+        title={copied ? "Copied!" : "Copy table"}
+      >
+        <Icon
+          name={copied ? "check" : "copy"}
+          size={14}
+          color={copied ? colors.green[600] : colors.zinc[500]}
+        />
+      </button>
+    </div>
+  );
+}

package/src/primitives_purity.test.ts

@@ -8,10 +8,18 @@ import * as path from "node:path";
  * `@lotics/ui` is the public, published, universal-rendering primitives
  * package. Every file in `src/` is a primitive. It must not import any
  * dependency that ties it to a specific Lotics runtime context: no chat
- * SDK, no analytics, no i18n, no markdown libraries, and no Lotics
- * domain types (which live in `@lotics/shared`). Lotics-coupled UI is
- * in the workspace-private `@lotics/ui-internal` package, which may
- * import from here and from `@lotics/shared` freely.
+ * SDK, no analytics, no i18n, and no Lotics domain types (which live in
+ * `@lotics/shared`). Lotics-coupled UI is in the workspace-private
+ * `@lotics/ui-internal` package, which may import from here and from
+ * `@lotics/shared` freely.
+ *
+ * Markdown (react-markdown/remark) is the one heavy third-party dependency
+ * the kit carries on purpose — it's the single canonical renderer for chat,
+ * apps, and `AgentRun`. It's generic, not a Lotics coupling; it stays
+ * universal via the `markdown.web.tsx` (DOM) / `markdown.tsx` (native
+ * plain-text) split and is tree-shaken out of any consumer that doesn't
+ * import `./markdown`. So it's allowed — the guards below remain for the
+ * genuine context couplings.
  *
  * The boundary is enforced by this test — without it primitives drift
  * back into the parent app's contexts over months.
@@ -22,8 +30,6 @@ const FORBIDDEN_PATTERNS = [
   /from\s+["']@lingui\//,
   /from\s+["']@ai-sdk\//,
   /from\s+["']ai["']/,
-  /from\s+["']react-markdown/,
-  /from\s+["']remark-/,
   /from\s+["']@lotics\/shared/,
 ];
 
@@ -38,7 +44,7 @@ function listTopLevelSourceFiles(): string[] {
 }
 
 describe("packages/ui primitives — purity", () => {
-  it("no primitive imports posthog, lingui, ai-sdk, markdown, or @lotics/shared", () => {
+  it("no primitive imports posthog, lingui, ai-sdk, or @lotics/shared", () => {
     const violations: string[] = [];
     for (const file of listTopLevelSourceFiles()) {
       const src = fs.readFileSync(file, "utf-8");