@exegia/corpora-ui 0.28.0 → 1.0.0

package/src/components/composed/chat/flowchart/step-body.tsx

@@ -0,0 +1,82 @@
+import { useState } from "react";
+import { SelectChip, SourceChip } from "@/components/atoms/chip";
+import { FLAVORS, PROPERTIES, TOPPINGS } from "./constant";
+import type { StepNode } from "./types";
+import { mix } from "./utils";
+
+/* ── icons ── */
+function ConeIcon({ size = 16 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
+      <path d="m7 11 4.08 10.35a1 1 0 0 0 1.84 0L17 11" />
+      <path d="M17 7A5 5 0 0 0 7 7" />
+      <path d="M17 7a2 2 0 0 1 0 4H7a2 2 0 0 1 0-4" />
+    </svg>
+  );
+}
+
+export function StepBody({ node }: { node: StepNode }) {
+  const hue = node.hue ?? "var(--accent-default)";
+  return (
+    <div className="flex items-center gap-2.5 p-2.5">
+      {node.image ? (
+        <img
+          alt={node.image.alt ?? ""}
+          className="size-9 shrink-0 rounded-[8px] object-cover"
+          src={node.image.src}
+          style={{ boxShadow: `0 0 0 1px ${mix(hue, 20)}` }}
+        />
+      ) : (
+        <span
+          className="flex size-9 shrink-0 items-center justify-center rounded-[8px] [&>svg]:size-4"
+          style={{
+            background: mix(hue, 12),
+            color: hue,
+            boxShadow: `0 0 0 1px ${mix(hue, 20)}`,
+          }}
+        >
+          {node.icon ?? <ConeIcon />}
+        </span>
+      )}
+      <span className="min-w-0 text-left">
+        <span className="block truncate text-[13px] font-semibold leading-tight text-ink">{node.title}</span>
+        <span className="mt-0.5 block text-[12px] leading-snug text-ink-2">{node.caption}</span>
+      </span>
+    </div>
+  );
+}
+
+/** Default If/Else card body: two chip rows. Picking a value is a TODO until SelectChip's menu lands. */
+export function ConditionBody() {
+  const [open, setOpen] = useState<string | null>(null);
+  const values: Record<string, string> = {
+    prop1: "flavor",
+    val1: "Rocky Road",
+    prop2: "topping",
+    val2: "Brown butter bourbon brittle crunch",
+  };
+  const toggle = (id: string) => setOpen((current) => (current === id ? null : id));
+  const pick = () => setOpen(null);
+  const chip = (id: string, items: { name: string; tag?: string }[], width: string, extra?: object) => (
+    <SelectChip id={id} value={values[id]} items={items} width={width} open={open === id} onToggle={toggle} onPick={pick} {...extra} />
+  );
+
+  return (
+    <div className="flex flex-col gap-1.5 px-3 py-2.5">
+      <div className="flex min-w-0 items-center gap-1.5">
+        <span className="w-7 text-[12.5px] text-ink-2">If</span>
+        <SourceChip />
+        {chip("prop1", PROPERTIES.map((name) => ({ name })), "w-36")}
+        <span className="text-[12.5px] text-ink-2">is</span>
+        {chip("val1", FLAVORS, "w-44", { dot: true, align: "right" })}
+      </div>
+      <div className="flex min-w-0 flex-wrap items-center gap-1.5">
+        <span className="w-7 text-[12.5px] text-ink-2">and</span>
+        <SourceChip />
+        {chip("prop2", PROPERTIES.map((name) => ({ name })), "w-36")}
+        <span className="text-[12.5px] text-ink-2">is</span>
+        {chip("val2", TOPPINGS, "w-64", { dot: true })}
+      </div>
+    </div>
+  );
+}

package/src/components/composed/chat/flowchart/types.ts

@@ -0,0 +1,89 @@
+import type { SVGProps } from "react"
+
+export type FlowchartSide = "top" | "right" | "bottom" | "left"
+
+export interface FlowchartProps {
+  /** Cards to lay out. Defaults to the Trigger → If / Else sample. */
+  steps?: StepNode[]
+  /** Connectors. Defaults to a chain through `steps` in order. */
+  edges?: Edge[]
+  /** No drag, no add / remove buttons. Selection still works. */
+  readOnly?: boolean
+  /** Ctrl/⌘ + wheel and the +/− buttons scale the canvas. */
+  zoomable?: boolean
+  /** A card was dragged; `offset` is its displacement from the laid-out position. */
+  onDrag?: (id: string, offset: { dx: number; dy: number }) => void
+  /** The add button on one side of a card was pressed. */
+  onAdd?: (id: string, side: FlowchartSide) => void
+  /** The remove button was pressed (already confirmed when children would be orphaned). */
+  onRemove?: (id: string) => void
+  /**
+   * Canvas min-height in px. The canvas fills its parent; without this it
+   * floors at the content height it loaded with, so zooming out or removing
+   * a card never collapses it.
+   */
+  height?: number
+  /** Disconnect was pressed on a selected connector. Enables connector editing. */
+  onEdgeRemove?: (id: string) => void
+  /** A connector end was dropped on another card; `edge` carries the new source / target. */
+  onEdgeConnect?: (edge: Edge) => void
+  /** Stroke width or colour picked from the connector toolbar. */
+  onEdgeChange?: (id: string, patch: Pick<Edge, "strokeWidth" | "color">) => void
+  /** The pill was renamed inline (double-click, then click away or Enter). */
+  onRename?: (id: string, name: string) => void
+  /** "Duplicate" in the context menu: copy the card to a new node on its right. */
+  onDuplicate?: (id: string) => void
+  variant?: string
+  children?: React.ReactNode
+  className?: string
+}
+
+export type StepNode = {
+  id: string
+  row: number
+  x: number // 0–1 center of the node
+  w: number
+  kind?: { label: string; hue: string }
+  /** Pill text; defaults to the kind label, or "Node n" for conditions. */
+  name?: string
+  hue?: string
+  title?: string
+  caption?: string
+  /** Replaces the icon tile — a person, a manuscript, a corpus cover. */
+  image?: { src: string; alt?: string }
+  /** Custom tile icon when there is no image. */
+  icon?: React.ReactNode
+  condition?: boolean // renders the if/else chip rows instead
+  /** Custom card body; replaces the default title / caption body. */
+  children?: React.ReactNode
+}
+
+export type Edge = {
+  id: string
+  source: string
+  target: string
+  bezierCurve?: boolean
+  strokeWidth?: number
+  /** Any CSS colour; defaults to the line token, accent when lit. */
+  color?: string
+}
+
+export type EdgeEnd = "source" | "target"
+
+export interface ConnectorProps extends Omit<SVGProps<SVGPathElement>, "strokeWidth"> {
+  edge: Edge
+  isLit: boolean
+  strokeWidth?: number
+  /** Selected for editing: bolder hit, toolbar and end handles render in Root. */
+  selected?: boolean
+  /** Enables the wide click target; called with the edge id. */
+  onPick?: (id: string) => void
+}
+
+export interface ChartNodeProps {
+  node: StepNode
+  /** Position in `steps`, for the generated "Node n" label. */
+  index?: number
+  onRef: (el: HTMLDivElement | null) => void
+  children?: React.ReactNode
+}

package/src/components/composed/chat/flowchart/utils.ts

@@ -0,0 +1,78 @@
+import { PAD_Y, PILL_OFFSET, ROW_GAP } from "./constant";
+import type { StepNode } from "./types";
+
+export type Offsets = Record<string, { dx: number; dy: number }>;
+export type Heights = Record<string, number>;
+
+/** Everything `place`/`bezier` need to position a node, resolved once per render. */
+export type Layout = {
+  width: number;
+  offsets: Offsets;
+  rows: number[];
+  rowY: number[];
+  heights: Heights;
+};
+
+/** Distinct row indices, ascending. */
+export const rows = (steps: StepNode[]) =>
+  [...new Set(steps.map((n) => n.row))].sort((a, b) => a - b);
+
+/** Height of each row = tallest node in it. */
+export const rowH = (steps: StepNode[], heights: Heights) =>
+  rows(steps).map((r) =>
+    Math.max(...steps.filter((n) => n.row === r).map((n) => heights[n.id] ?? 90)),
+  );
+
+/** Y offset of each row, stacked with ROW_GAP. */
+export const rowYs = (rowH: number[]) =>
+  rowH.map((_, i) => (i === 0 ? PAD_Y : PAD_Y + rowH.slice(0, i).reduce((a, b) => a + b, 0) + i * ROW_GAP));
+
+export const canvasH = (rowY: number[], rowH: number[]) =>
+  (rowY[rowY.length - 1] ?? PAD_Y) + (rowH[rowH.length - 1] ?? 0) + PAD_Y;
+
+export const mix = (hue: string, pct: number, base = "var(--surface)") =>
+  `color-mix(in srgb, ${hue} ${pct}%, ${base})`;
+
+export const cw = (width: number) => width || 480;
+
+export const place = (n: StepNode, { width, offsets, rows, rowY }: Layout) => {
+  const w = Math.min(n.w, cw(width) * 0.92);
+  const off = offsets[n.id];
+  return {
+    w,
+    cx: n.x * cw(width) + (off?.dx ?? 0),
+    top: (rowY[rows.indexOf(n.row)] ?? PAD_Y) + (off?.dy ?? 0),
+  };
+};
+
+/** Card anchor points (pills sit above the card, so offset the top). */
+export const anchors = (n: StepNode, layout: Layout) => {
+  const { cx, top } = place(n, layout);
+  return {
+    top: { x: cx, y: top + (n.kind ? PILL_OFFSET : 0) },
+    bottom: { x: cx, y: top + (layout.heights[n.id] ?? 90) },
+  };
+};
+
+export type Point = { x: number; y: number };
+
+/** Vertical S-curve between two points. */
+export const curve = (from: Point, to: Point) => {
+  const k = Math.min(Math.max(Math.abs(to.y - from.y) * 0.55, 24), 84);
+  return `M ${from.x} ${from.y} C ${from.x} ${from.y + k}, ${to.x} ${to.y - k}, ${to.x} ${to.y}`;
+};
+
+/** Cubic bezier midpoint, where the connector toolbar sits. */
+export const midpoint = (from: Point, to: Point): Point => ({ x: (from.x + to.x) / 2, y: (from.y + to.y) / 2 });
+
+export const edgePoints = (edge: { from: string; to: string }, steps: StepNode[], layout: Layout) => {
+  const a = steps.find((n) => n.id === edge.from);
+  const b = steps.find((n) => n.id === edge.to);
+  if (!a || !b) return null;
+  return { from: anchors(a, layout).bottom, to: anchors(b, layout).top };
+};
+
+export const bezier = (edge: { from: string; to: string }, steps: StepNode[], layout: Layout) => {
+  const pts = edgePoints(edge, steps, layout);
+  return pts ? curve(pts.from, pts.to) : "";
+};

package/src/components/composed/chat/hint.tsx

@@ -0,0 +1,59 @@
+import { Kbd, KbdGroup } from "@/components/ui/kbd";
+import { SPRING_LAYOUT } from "@/lib/ease";
+import { cn } from "@/lib/utils";
+import { useReducedMotion, motion } from "motion/react";
+
+
+/** "Press ⌘ + ↵ to send message" — the composer's send hint. */
+export function SendHint({
+  className,
+  verbose = true,
+}: {
+  className?: string
+  /** Pin the keycaps to the end and drop the trailing "to send message". */
+  verbose?: boolean
+}): React.ReactElement {
+  const reduceMotion = useReducedMotion()
+  // `justify-content` and `display` are discrete — they snap rather than tween.
+  // A spacer whose flex-grow rises 0 → 1 buys the start → end shift, and it
+  // takes exactly the room the collapsing label gives back, so both halves ride
+  // the same spring.
+  const transition = reduceMotion ? { duration: 0 } : SPRING_LAYOUT
+
+  return (
+    <motion.span
+      className={cn(
+        "flex flex-1 items-center gap-1.5 text-sm whitespace-nowrap text-muted-foreground/60",
+        className
+      )}
+      data-slot="send-hint"
+    >
+      <motion.span
+        aria-hidden="true"
+        animate={{ flexGrow: verbose ? 1 : 0 }}
+        className="inline-flex shrink-0 basis-0 items-center"
+        initial={false}
+        transition={transition}
+      />
+      Press
+      <KbdGroup className="max-h-3 items-center">
+        <Kbd aria-label="Command">⌘</Kbd>
+        <Kbd aria-label="Enter" className="w-8">
+          ↵
+        </Kbd>
+      </KbdGroup>
+      <motion.span
+        animate={{
+          opacity: verbose ? 0 : 1,
+          width: verbose ? 0 : "auto",
+          x: verbose ? -8 : 0,
+        }}
+        className="inline-block shrink-0 overflow-hidden"
+        initial={false}
+        transition={transition}
+      >
+        to send message
+      </motion.span>
+    </motion.span>
+  )
+}

package/src/components/composed/chat/index.ts

@@ -0,0 +1,96 @@
+export {
+  Attachment,
+  type AttachmentKind,
+  type AttachmentProps,
+  type AttachmentVariant,
+} from "./attachment"
+export {
+  Chart,
+  type ChartDatum,
+  type ChartProps,
+  type ChartSeries,
+  type ChartType,
+} from "./chart"
+export {
+  Markdown,
+  markdownViewAtom,
+  removeMarkdownInstance,
+  useMarkdownView,
+  type MarkdownProps,
+  type MarkdownView,
+} from "./markdown"
+// `SuggestedPrompts`, `SendButton` and `AddButton` stay off the barrel on
+// purpose: `blocks/ai-panel` and `ui/chat` already export those names, and
+// all the barrels flow into `src/index.ts`. Reach them as
+// `composed/chat/composer` — or hand the slots to `Composer`.
+export {
+  addComposerAttachmentAtom,
+  clearComposerAttachmentsAtom,
+  CommandMenu,
+  Composer,
+  composerAttachmentsAtom,
+  removeComposerAttachmentAtom,
+  removeComposerInstance,
+  useComposerAttachmentActions,
+  useComposerAttachments,
+} from "./composer"
+export type {
+  ComposerAttachment,
+  ComposerBaseProps,
+  ComposerMode,
+  ComposerSuggestionsProps,
+  IComposerMenuProps,
+  IComposerProps,
+  IComposerSubmitButtonProps,
+} from "./composer"
+
+export { Recommendation, RecommendationCard } from "./recommendation"
+export type {
+  RecommendationCardProps,
+  RecommendationCheckboxProps,
+  RecommendationEntity,
+  RecommendationFields,
+  RecommendationGroupProps,
+  RecommendationItemProps,
+  RecommendationOption,
+  RecommendationState,
+} from "./recommendation"
+export {
+  ContextCards,
+  type ContextCard,
+  type ContextCardsProps,
+} from "./context-cards"
+export {
+  CodeBlock,
+  tokenize,
+  type CodeBlockProps,
+  type CodeDiffLine,
+} from "./code-block"
+export {
+  FilterTable,
+  filterTableFilterAtom,
+  removeFilterTableInstance,
+  type FilterTableColumn,
+  type FilterTableProps,
+  type FilterTableStatus,
+} from "./filter-table"
+export {
+  RecordsTable,
+  recordsTableSelectionAtom,
+  removeRecordsTableInstance,
+  type RecordsColumnKey,
+  type RecordsRow,
+  type RecordsTableProps,
+} from "./records-table"
+export * from "./flowchart"
+export { type ChartNodeProps, type FlowchartProps } from "./flowchart"
+export {
+  InsightCards,
+  InsightEntity,
+  type Insight,
+  type InsightAllocation,
+  type InsightSegment,
+  type InsightCardsProps,
+} from "./insight-cards"
+
+export { SendHint } from "./hint"

package/src/components/composed/chat/insight-cards.tsx

@@ -0,0 +1,199 @@
+"use client"
+
+import { ChevronDown, ChevronUp } from "lucide-react"
+import { AnimatePresence, motion, useReducedMotion } from "motion/react"
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { Card, CardFrame, CardFrameHeader, CardPanel } from "@/components/ui/card"
+import { SPRING_SWAP } from "@/lib/ease"
+import { DOT_TONE_CLASSES, Dot, FollowUpRow, IconButton, Pill, Stat, type DotTone, type StatProps } from "@/components/ui/chat"
+import { Chart, type ChartDatum, type ChartSeries } from "./chart"
+
+export interface Insight {
+  /** Sentence; `entity` is highlighted with a dot in front. */
+  summary: React.ReactNode
+  stats?: StatProps[]
+  snapshot?: { label?: React.ReactNode; badge?: React.ReactNode; data: ChartDatum[]; series: ChartSeries[] }
+  /** Share breakdown: tile + big value, a segmented bar, selectable legend pills and a detail panel. */
+  allocation?: InsightAllocation
+  followUp?: string
+}
+
+export interface InsightSegment {
+  key: string
+  label: React.ReactNode
+  value: number
+  tone?: DotTone
+  /** Detail panel heading; falls back to `label`. */
+  title?: React.ReactNode
+  description?: React.ReactNode
+}
+
+export interface InsightAllocation {
+  label: React.ReactNode
+  value: React.ReactNode
+  /** Letter in the tile; takes the first segment's tone. */
+  initials?: string
+  segments: InsightSegment[]
+  defaultSelected?: string
+}
+
+const TONE_TEXT: Record<DotTone, string> = {
+  success: "text-semantic-success", warning: "text-semantic-warning", info: "text-semantic-info", danger: "text-semantic-danger",
+  neutral: "text-text-muted", accent: "text-accent-default", brand: "text-brand",
+  "series-1": "text-chart-series-1", "series-2": "text-chart-series-2", "series-3": "text-chart-series-3", "series-4": "text-chart-series-4", "series-5": "text-chart-series-5",
+}
+
+const pct = (n: number, total: number) => `${Math.round((n / total) * 1000) / 10}%`
+
+/** @sketch beautiful-ui "Insight Cards / allocation" — segment selection changes the inspected group without moving the card. */
+function Allocation({ label, value, initials, segments, defaultSelected }: InsightAllocation): React.ReactElement {
+  const reduceMotion = useReducedMotion()
+  const [selected, setSelected] = React.useState(defaultSelected ?? segments[0]?.key)
+  const total = segments.reduce((n, s) => n + s.value, 0) || 1
+  const active = segments.find((s) => s.key === selected) ?? segments[0]
+  const tone = (s?: InsightSegment) => s?.tone ?? "series-1"
+
+  return (
+    <CardPanel data-slot="insight-allocation" className="flex flex-col gap-3 p-3">
+      <span className="flex items-center gap-2 text-[12.5px] text-text-secondary">
+        <span className={cn("inline-flex size-5 items-center justify-center rounded-full text-[9px] font-semibold text-white", DOT_TONE_CLASSES[tone(segments[0])])}>
+          {initials ?? String(label).slice(0, 1).toUpperCase()}
+        </span>
+        {label}
+      </span>
+      <span className="text-[26px] font-semibold leading-8 tracking-tight text-text-primary">{value}</span>
+      <div className="flex h-6 gap-1" role="group" aria-label="Share by segment">
+        {segments.map((s) => (
+          <button
+            key={s.key}
+            type="button"
+            aria-label={typeof s.label === "string" ? s.label : undefined}
+            aria-pressed={s.key === active?.key}
+            onClick={() => setSelected(s.key)}
+            style={{ flexGrow: s.value }}
+            className={cn(
+              "min-w-1.5 rounded-full outline-none transition-[opacity,box-shadow] duration-300 ease-[var(--ease-out-strong)] focus-visible:ring-2 focus-visible:ring-ring",
+              s.key === active?.key ? cn("ring-2 ring-inset ring-white/25", DOT_TONE_CLASSES[tone(s)]) : "bg-surface-subtle hover:opacity-80"
+            )}
+          />
+        ))}
+      </div>
+      <div className="flex flex-wrap gap-1.5">
+        {segments.map((s) => (
+          <button
+            key={s.key}
+            type="button"
+            aria-pressed={s.key === active?.key}
+            onClick={() => setSelected(s.key)}
+            className={cn(
+              "inline-flex h-5 items-center gap-1.5 rounded-full px-2 text-[11px] font-medium leading-none outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring",
+              s.key === active?.key ? "bg-surface-subtle text-text-primary" : "text-text-secondary hover:text-text-primary"
+            )}
+          >
+            <Dot tone={s.key === active?.key ? tone(s) : "neutral"} />
+            {s.label} {pct(s.value, total)}
+          </button>
+        ))}
+      </div>
+      {active ? (
+        <AnimatePresence initial={false} mode="wait">
+          <motion.div
+            key={active.key}
+            initial={reduceMotion ? false : { opacity: 0, y: 4 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={reduceMotion ? undefined : { opacity: 0, y: -4 }}
+            transition={reduceMotion ? { duration: 0 } : SPRING_SWAP}
+            className="flex flex-col gap-1 rounded-md bg-surface-subtle px-3 py-2.5"
+          >
+            <span className={cn("text-[12px] font-semibold leading-4", TONE_TEXT[tone(active)])}>{active.title ?? active.label}</span>
+            {active.description ? <span className="text-[12px] leading-4 text-text-secondary">{active.description}</span> : null}
+          </motion.div>
+        </AnimatePresence>
+      ) : null}
+    </CardPanel>
+  )
+}
+
+export interface InsightCardsProps extends React.ComponentPropsWithoutRef<"div"> {
+  header?: React.ReactNode
+  insights: Insight[]
+  index?: number
+  defaultIndex?: number
+  onIndexChange?: (index: number) => void
+  onFollowUp?: (text: string) => void
+}
+
+/**
+ * Paged insights: header with count and prev/next, summary, stats,
+ * a trend snapshot (line plot + legend) or an allocation breakdown, and a follow-up prompt.
+ *
+ * @sketch "Component / Insight Cards"
+ */
+export function InsightCards({ header = "Insights", insights, index, defaultIndex = 0, onIndexChange, onFollowUp, className, ...props }: InsightCardsProps): React.ReactElement {
+  const reduceMotion = useReducedMotion()
+  const [internal, setInternal] = React.useState(defaultIndex)
+  const current = Math.min(index ?? internal, Math.max(insights.length - 1, 0))
+  // Which way the card slides: next pulls the new one up from below, previous from above.
+  const [direction, setDirection] = React.useState(1)
+  const go = (next: number) => {
+    setDirection(next > current ? 1 : -1)
+    if (index === undefined) setInternal(next)
+    onIndexChange?.(next)
+  }
+  const insight = insights[current]
+  const offset = reduceMotion ? 0 : 24 * direction
+
+  return (
+    <div data-slot="insight-cards" className={cn("flex w-[344px] max-w-full flex-col gap-2.5", className)} {...props}>
+      <div className="flex items-center gap-1.5">
+        <span className="text-[13px] font-semibold leading-4 text-text-primary">{header}</span>
+        <span className="text-[13px] text-text-muted">{insights.length}</span>
+        <span className="ml-auto flex items-center gap-0.5">
+          <IconButton aria-label="Previous insight" disabled={current <= 0} onClick={() => go(current - 1)}><ChevronUp /></IconButton>
+          <IconButton aria-label="Next insight" disabled={current >= insights.length - 1} onClick={() => go(current + 1)}><ChevronDown /></IconButton>
+        </span>
+      </div>
+      <AnimatePresence custom={direction} initial={false} mode="popLayout">
+      {insight ? (
+        <motion.div
+          key={current}
+          className="flex flex-col gap-2.5"
+          initial={{ opacity: 0, y: offset }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: -offset }}
+          transition={reduceMotion ? { duration: 0 } : SPRING_SWAP}
+        >
+          <p className="text-[13px] leading-[15px] text-text-secondary [&_[data-slot=dot]]:mx-0.5 [&_[data-slot=dot]]:inline-block [&_[data-slot=dot]]:align-middle">
+            {insight.summary}
+          </p>
+          <CardFrame className="[--frame-radius:var(--radius-md)]">
+            {insight.stats?.length ? (
+              <CardFrameHeader className="flex flex-row gap-4 p-4">
+                {insight.stats.map((s, i) => <Stat key={i} {...s} />)}
+              </CardFrameHeader>
+            ) : null}
+            {insight.allocation ? <Card><Allocation {...insight.allocation} /></Card> : null}
+            {insight.snapshot ? (
+              <Card><CardPanel className="flex flex-col gap-2 p-2.5">
+                <div className="flex items-center justify-between">
+                  <span className="text-[11px] leading-3 text-text-secondary">{insight.snapshot.label ?? "Trend snapshot"}</span>
+                  <Pill>{insight.snapshot.badge ?? "Snapshot"}</Pill>
+                </div>
+                <Chart type="line" headerless plotHeight={110} data={insight.snapshot.data} series={insight.snapshot.series} className="w-full" />
+              </CardPanel></Card>
+            ) : null}
+          </CardFrame>
+          {insight.followUp ? <FollowUpRow onSelect={() => onFollowUp?.(insight.followUp!)} className="w-fit rounded-full border border-border-default bg-surface-card px-3 hover:bg-surface-subtle">{insight.followUp}</FollowUpRow> : null}
+        </motion.div>
+      ) : null}
+      </AnimatePresence>
+    </div>
+  )
+}
+
+/** Inline entity marker for `Insight.summary`: dot + name. */
+export function InsightEntity({ tone = "neutral", children }: { tone?: DotTone; children: React.ReactNode }): React.ReactElement {
+  return <><Dot tone={tone} size={8} /> {children}</>
+}
+

package/src/components/composed/chat/markdown-atom.ts

@@ -0,0 +1,15 @@
+import { useAtom } from "jotai"
+
+import { createKeyedFamilies } from "@/lib/keyed-atom"
+
+export type MarkdownView = "preview" | "markup"
+
+const { stateFamily, removeInstance } = createKeyedFamilies("markdown")
+
+/** Which pane a Markdown card shows, keyed by its `markdownId`; `null` until first toggled (the card then falls back to its `defaultView`). */
+export const markdownViewAtom = stateFamily<MarkdownView | null>("view", null)
+export const removeMarkdownInstance = removeInstance
+
+export function useMarkdownView(markdownId: string) {
+  return useAtom(markdownViewAtom(markdownId))
+}