@adatechnology/conversations-ui 0.1.0-rc.30 → 0.1.0-rc.31

package/dist/{chunk-GY472G6E.js → chunk-CUYYYZWD.js}

@@ -2270,6 +2270,7 @@ export {
   formatDateTime,
   isSameDay,
   formatFileSize,
+  documentTypeLabel,
   MediaRenderer,
   DEFAULT_LIGHTBOX_LABELS,
   Lightbox,

package/dist/flows/index.d.ts

@@ -345,13 +345,26 @@ type FlowNodePosition = {
     readonly x: number;
     readonly y: number;
 };
-/** Onde cada conversa viva está parada agora. */
+/** Onde cada conversa viva está parada agora — uma linha por sessão. */
 type FlowLivePosition = {
     readonly currentState: string;
     readonly flow: string | null;
     readonly nodeId: string | null;
     readonly menuNodeId: string | null;
 };
+/**
+ * Quantas conversas estão paradas num nó — o formato que o servidor já agrega.
+ *
+ * `meta-whatsapp-module` responde `GROUP BY (flowKey, currentNodeId)`, e trazer uma linha por
+ * sessão só para o editor recontar em memória seria pior em toda base grande. Os dois formatos
+ * valem porque produto que já implementou o de sessão não deve quebrar numa release de correção.
+ */
+type FlowLiveNodeCount = {
+    readonly flowKey: string;
+    readonly nodeId: string;
+    readonly count: number;
+};
+type FlowLivePositionInput = FlowLivePosition | FlowLiveNodeCount;
 /**
  * Pseudo-nó que representa um fluxo alvo ainda não mesclado no canvas.
  *
@@ -364,14 +377,15 @@ declare const GROUP_HEADER_NODE_ID = "__group_header__";
 /**
  * Quantas conversas estão paradas em cada nó de um fluxo.
  *
- * A raiz é caso à parte: o servidor guarda o passo do menu em `menuNodeId`, num campo próprio, e uma
- * conversa no menu não carrega `flow`. Ler `nodeId` ali daria contagem zero na tela mais visitada do
- * editor.
+ * A raiz é caso à parte no formato por sessão: o servidor guarda o passo do menu em `menuNodeId`,
+ * num campo próprio, e uma conversa no menu não carrega `flow`. Ler `nodeId` ali daria contagem
+ * zero na tela mais visitada do editor. No formato agregado a chave do fluxo já vem na linha,
+ * então a raiz não tem exceção.
  */
 declare function countLiveByNode(params: {
     readonly flowKey: string;
     readonly rootFlowKey: string;
-    readonly positions: readonly FlowLivePosition[] | undefined;
+    readonly positions: readonly FlowLivePositionInput[] | undefined;
 }): Record<string, number>;
 /**
  * Um layout só para TODOS os nós de TODOS os fluxos abertos juntos.
@@ -408,7 +422,7 @@ declare function buildFlowEdges(params: {
     readonly openKeys: readonly string[];
     readonly graphs: Readonly<Record<string, FlowGraphData>>;
     readonly rootFlowKey: string;
-    readonly livePositions?: readonly FlowLivePosition[] | undefined;
+    readonly livePositions?: readonly FlowLivePositionInput[] | undefined;
 }): FlowEdgeSpec[];
 /** Nós de um fluxo que ninguém aponta — o card ganha contorno tracejado para cobrar a ligação. */
 declare function detachedNodeIds(graph: FlowGraphData): Set<string>;
@@ -453,8 +467,13 @@ interface FlowsWorkspaceApi {
      */
     createFlow?(input: CreateFlowInput): Promise<void>;
     deleteFlow?(key: string): Promise<void>;
-    /** Contagem de conversas vivas por nó. Ausente, os cards não pulsam e nada é consultado. */
-    getLivePositions?(): Promise<FlowLivePosition[]>;
+    /**
+     * Onde estão as conversas vivas. Ausente, os cards não pulsam e nada é consultado.
+     *
+     * Aceita a linha por sessão e a linha já agregada por nó — `meta-whatsapp-module` responde a
+     * segunda, e exigir a primeira deixava os cards parados em todo produto que usa o módulo.
+     */
+    getLivePositions?(): Promise<readonly FlowLivePositionInput[]>;
 }
 interface FlowsWorkspaceProps {
     readonly api: FlowsWorkspaceApi;
@@ -467,6 +486,14 @@ interface FlowsWorkspaceProps {
     readonly renderMediaPicker?: (node: FlowNodeData, graph: FlowGraphData) => ReactNode;
     /** Intervalo do polling de posições vivas. Só tem efeito com `getLivePositions`. */
     readonly livePollIntervalMs?: number;
+    /**
+     * Título e subtítulo do editor. `false` deixa só a barra de ações.
+     *
+     * Produto cuja navegação já nomeia a tela mostrava o nome duas vezes, em dois tamanhos, porque a
+     * tipografia daqui é do pacote e a de lá é do host. Esconder é a única saída que não força o
+     * pacote a adivinhar a escala tipográfica de cada produto.
+     */
+    readonly showHeader?: boolean;
     readonly className?: string;
 }
 /**
@@ -477,7 +504,7 @@ interface FlowsWorkspaceProps {
  * versão diferente do mesmo editor. Customização entra por `labels`, `actionOptions` e
  * `renderMediaPicker` — nunca por cópia do arquivo.
  */
-declare function FlowsWorkspace({ api, rootFlowKey, labels: labelsOverride, actionOptions, renderMediaPicker, livePollIntervalMs, className, }: FlowsWorkspaceProps): react.JSX.Element;
+declare function FlowsWorkspace({ api, rootFlowKey, labels: labelsOverride, actionOptions, renderMediaPicker, livePollIntervalMs, showHeader, className, }: FlowsWorkspaceProps): react.JSX.Element;
 
 /**
  * Copyright (c) 2026 Ada Technology. MIT License.
@@ -550,4 +577,4 @@ declare function applyConnection(node: FlowNodeData, resolved: ResolvedConnectio
  */
 declare function isGraphDirty(working: FlowGraphData | undefined, published: FlowGraphData | undefined): boolean;
 
-export { BUILT_IN_ACTION_KINDS, CONDITION_OPERATORS, CROSS_FLOW_PREFIX, type CollectionChain, type ConnectionRequest, type CreateFlowInput, DEFAULT_FLOW_EDITOR_LABELS, type FlowEdgeKind, type FlowEdgeSpec, type FlowEditorLabels, FlowGroupFrame, type FlowGroupFrameData, FlowGroupHeader, type FlowGroupHeaderData, type FlowLivePosition, FlowMapCanvas, type FlowMapCanvasProps, FlowMapNode, type FlowMapNodeData, FlowNodeCard, type FlowNodeCardData, FlowNodePanel, type FlowNodePanelProps, type FlowNodePosition, FlowPalette, type FlowPaletteActionOption, type FlowPaletteProps, FlowPortalNode, type FlowPortalNodeData, type FlowValidationLabels, FlowWhatsAppPreview, type FlowWhatsAppPreviewProps, FlowsWorkspace, type FlowsWorkspaceApi, type FlowsWorkspaceProps, GROUP_HEADER_NODE_ID, type GraphIssue, NODE_CARD_WIDTH, type NewNodeSpec, type ResolvedConnection, WHATSAPP_LIMITS, applyConnection, buildFlowEdges, chainFrameBounds, chainFrameNodeId, computeAutoLayout, computeFlowMapLayout, computeMergedLayout, countLiveByNode, crossFlowKey, crossFlowTargetsOf, detachedNodeIds, estimateNodeHeight, findCollectionChains, flowGroupFrameNodeTypes, flowGroupHeaderNodeTypes, flowMapNodeTypes, flowNodeTypes, flowPortalNodeTypes, isCrossFlowTarget, isGraphDirty, mergeFlowEditorLabels, mergedFlowKeysFrom, namespaceNodeId, newNodeFromSpec, nodeLabel, parseNamespacedId, portalNodeId, removeNodeAndCleanRefs, rendersAsButtons, resolveConnection, slugifyNodeId, targetsOf, validateGraph };
+export { BUILT_IN_ACTION_KINDS, CONDITION_OPERATORS, CROSS_FLOW_PREFIX, type CollectionChain, type ConnectionRequest, type CreateFlowInput, DEFAULT_FLOW_EDITOR_LABELS, type FlowEdgeKind, type FlowEdgeSpec, type FlowEditorLabels, FlowGroupFrame, type FlowGroupFrameData, FlowGroupHeader, type FlowGroupHeaderData, type FlowLiveNodeCount, type FlowLivePosition, type FlowLivePositionInput, FlowMapCanvas, type FlowMapCanvasProps, FlowMapNode, type FlowMapNodeData, FlowNodeCard, type FlowNodeCardData, FlowNodePanel, type FlowNodePanelProps, type FlowNodePosition, FlowPalette, type FlowPaletteActionOption, type FlowPaletteProps, FlowPortalNode, type FlowPortalNodeData, type FlowValidationLabels, FlowWhatsAppPreview, type FlowWhatsAppPreviewProps, FlowsWorkspace, type FlowsWorkspaceApi, type FlowsWorkspaceProps, GROUP_HEADER_NODE_ID, type GraphIssue, NODE_CARD_WIDTH, type NewNodeSpec, type ResolvedConnection, WHATSAPP_LIMITS, applyConnection, buildFlowEdges, chainFrameBounds, chainFrameNodeId, computeAutoLayout, computeFlowMapLayout, computeMergedLayout, countLiveByNode, crossFlowKey, crossFlowTargetsOf, detachedNodeIds, estimateNodeHeight, findCollectionChains, flowGroupFrameNodeTypes, flowGroupHeaderNodeTypes, flowMapNodeTypes, flowNodeTypes, flowPortalNodeTypes, isCrossFlowTarget, isGraphDirty, mergeFlowEditorLabels, mergedFlowKeysFrom, namespaceNodeId, newNodeFromSpec, nodeLabel, parseNamespacedId, portalNodeId, removeNodeAndCleanRefs, rendersAsButtons, resolveConnection, slugifyNodeId, targetsOf, validateGraph };

package/dist/flows/index.js

@@ -1351,6 +1351,9 @@ function isGraphDirty(working, published) {
 var COLUMN_GAP = 360;
 var ROW_GAP = 40;
 var CHAIN_LABEL_ROOM = 24;
+function isNodeCount(position) {
+  return typeof position.count === "number";
+}
 function portalNodeId(sourceNodeId, target) {
   return `__portal__${sourceNodeId}__${target}`;
 }
@@ -1363,6 +1366,11 @@ function countLiveByNode(params) {
   const isRoot = flowKey === rootFlowKey;
   const counts = {};
   for (const position of positions ?? []) {
+    if (isNodeCount(position)) {
+      if (position.flowKey !== flowKey) continue;
+      counts[position.nodeId] = (counts[position.nodeId] ?? 0) + position.count;
+      continue;
+    }
     if (position.flow !== flowKey && !isRoot) continue;
     const nodeId = isRoot ? position.menuNodeId : position.nodeId;
     if (!nodeId) continue;
@@ -1594,6 +1602,7 @@ function FlowsWorkspace({
   actionOptions,
   renderMediaPicker,
   livePollIntervalMs = 5e3,
+  showHeader = true,
   className
 }) {
   const labels = useMemo2(() => mergeFlowEditorLabels(labelsOverride), [labelsOverride]);
@@ -2011,11 +2020,11 @@ function FlowsWorkspace({
   return /* @__PURE__ */ jsxs9("div", { className: `space-y-4 h-full flex flex-col ${className ?? ""}`, children: [
     /* @__PURE__ */ jsx10(TooltipLayer, {}),
     /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between flex-wrap gap-3", children: [
-      /* @__PURE__ */ jsxs9("div", { children: [
+      showHeader && /* @__PURE__ */ jsxs9("div", { className: "min-w-0", children: [
         /* @__PURE__ */ jsx10("h2", { className: "text-2xl font-bold text-gray-900 dark:text-gray-100", children: labels.workspace.title }),
         /* @__PURE__ */ jsx10("p", { className: "text-gray-500 dark:text-gray-400 text-sm mt-1", children: labels.workspace.subtitle })
       ] }),
-      /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsxs9("div", { className: "flex flex-wrap items-center justify-end gap-3 ml-auto", children: [
         saveState === "success" && /* @__PURE__ */ jsx10("span", { className: "text-sm text-green-600", children: labels.workspace.saveSuccess }),
         saveState === "error" && /* @__PURE__ */ jsx10("span", { className: "text-sm text-red-600", children: saveErrorMessage ?? labels.workspace.saveError }),
         /* @__PURE__ */ jsxs9(

package/dist/index.js

@@ -43,6 +43,7 @@ import {
   cn,
   conversationsOf,
   createMediaUrlResolver,
+  documentTypeLabel,
   formatDateTime,
   formatFileSize,
   formatPhone,
@@ -57,7 +58,7 @@ import {
   useConversationDocuments,
   useConversationLocales,
   useConversations
-} from "./chunk-GY472G6E.js";
+} from "./chunk-CUYYYZWD.js";
 import {
   ZERO_WIDTH_SPACE,
   htmlToWA,
@@ -2287,7 +2288,7 @@ function DocumentsWorkspace({
           onChange: (event) => setSearch(event.target.value),
           placeholder: labels.searchPlaceholder,
           "aria-label": labels.searchPlaceholder,
-          className: "w-full rounded-md border px-3 py-2 text-sm dark:border-gray-700 dark:bg-gray-900 sm:w-64"
+          className: "w-full rounded-md border border-gray-300 px-3 py-2 text-sm dark:border-gray-700 dark:bg-gray-900 sm:w-64"
         }
       ),
       /* @__PURE__ */ jsx16(MultiSelectFilter, { label: labels.sourceFilter, options: sourceOptions, selected: source, onChange: setSource }),
@@ -2308,7 +2309,7 @@ function DocumentsWorkspace({
             value: startDate,
             onChange: (event) => setStartDate(event.target.value),
             "aria-label": labels.startDate,
-            className: "rounded-md border px-2 py-2 text-xs dark:border-gray-700 dark:bg-gray-900"
+            className: "rounded-md border border-gray-300 px-2 py-2 text-xs dark:border-gray-700 dark:bg-gray-900"
           }
         ),
         /* @__PURE__ */ jsx16(
@@ -2318,7 +2319,7 @@ function DocumentsWorkspace({
             value: endDate,
             onChange: (event) => setEndDate(event.target.value),
             "aria-label": labels.endDate,
-            className: "rounded-md border px-2 py-2 text-xs dark:border-gray-700 dark:bg-gray-900"
+            className: "rounded-md border border-gray-300 px-2 py-2 text-xs dark:border-gray-700 dark:bg-gray-900"
           }
         )
       ] }) : null,
@@ -2404,9 +2405,9 @@ function DocumentsWorkspace({
     ) : null,
     loading ? /* @__PURE__ */ jsx16("p", { className: cn("text-sm text-gray-500", classNames?.status), children: labels.loading }) : null,
     failed ? /* @__PURE__ */ jsx16("p", { role: "alert", className: cn("text-sm text-red-600 dark:text-red-400", classNames?.status), children: labels.failure }) : null,
-    /* @__PURE__ */ jsxs14("div", { className: cn("overflow-x-auto rounded-xl border dark:border-gray-700", classNames?.table), children: [
-      /* @__PURE__ */ jsxs14("table", { className: "w-full text-sm", children: [
-        /* @__PURE__ */ jsx16("thead", { className: "border-b text-gray-500 dark:border-gray-700 dark:text-gray-400", children: /* @__PURE__ */ jsxs14("tr", { children: [
+    /* @__PURE__ */ jsxs14("div", { className: cn("cv-table-card", classNames?.table), children: [
+      /* @__PURE__ */ jsxs14("table", { className: "cv-table", children: [
+        /* @__PURE__ */ jsx16("thead", { children: /* @__PURE__ */ jsxs14("tr", { children: [
           canSelect ? /* @__PURE__ */ jsx16("th", { scope: "col", className: "w-10 px-3 py-2", children: /* @__PURE__ */ jsx16(
             "input",
             {
@@ -2425,7 +2426,7 @@ function DocumentsWorkspace({
           /* @__PURE__ */ jsx16(SortableHead, { label: labels.columnDate, field: "linkedAt", activeField: sortField, direction, onSort: toggleSort, className: "hidden xl:table-cell" }),
           /* @__PURE__ */ jsx16("th", { scope: "col", className: "px-3 py-2 text-left text-xs font-medium", children: labels.columnActions })
         ] }) }),
-        /* @__PURE__ */ jsx16("tbody", { children: documents.map((document2) => /* @__PURE__ */ jsxs14("tr", { className: cn("border-b last:border-0 dark:border-gray-800", classNames?.row), children: [
+        /* @__PURE__ */ jsx16("tbody", { children: documents.map((document2) => /* @__PURE__ */ jsxs14("tr", { className: classNames?.row, children: [
           canSelect ? /* @__PURE__ */ jsx16("td", { className: "w-10 px-3 py-2", children: /* @__PURE__ */ jsx16(
             "input",
             {
@@ -2454,10 +2455,10 @@ function DocumentsWorkspace({
               ]
             }
           ) : /* @__PURE__ */ jsx16("span", { className: "text-xs text-gray-500", children: document2.contactName ?? formatPhone(document2.conversationId) }) }),
-          /* @__PURE__ */ jsx16("td", { className: "hidden px-3 py-2 font-mono text-xs md:table-cell", children: document2.mimeType }),
-          /* @__PURE__ */ jsx16("td", { className: "hidden px-3 py-2 text-xs lg:table-cell", children: formatFileSize(document2.sizeBytes) }),
-          /* @__PURE__ */ jsx16("td", { className: "hidden px-3 py-2 text-xs lg:table-cell", children: labels.sourceLabels[document2.source] ?? document2.source }),
-          /* @__PURE__ */ jsx16("td", { className: "hidden px-3 py-2 text-xs xl:table-cell", children: formatDateTime(document2.linkedAt) }),
+          /* @__PURE__ */ jsx16("td", { className: "hidden px-3 py-2 md:table-cell", "data-cv-tooltip": document2.mimeType, children: /* @__PURE__ */ jsx16("span", { className: "cv-type-tag", children: documentTypeLabel(document2.filename, document2.mimeType) }) }),
+          /* @__PURE__ */ jsx16("td", { className: "hidden whitespace-nowrap px-3 py-2 text-xs lg:table-cell", children: formatFileSize(document2.sizeBytes) }),
+          /* @__PURE__ */ jsx16("td", { className: "hidden whitespace-nowrap px-3 py-2 text-xs lg:table-cell", children: labels.sourceLabels[document2.source] ?? document2.source }),
+          /* @__PURE__ */ jsx16("td", { className: "hidden whitespace-nowrap px-3 py-2 text-xs xl:table-cell", children: formatDateTime(document2.linkedAt) }),
           /* @__PURE__ */ jsx16("td", { className: "px-3 py-2", children: /* @__PURE__ */ jsxs14("div", { className: "flex gap-1", children: [
             /* @__PURE__ */ jsx16(
               "button",

package/dist/preview/index.js

@@ -8,7 +8,7 @@ import {
   DocumentsLibrary,
   MessageBubble,
   MessageComposer
-} from "../chunk-GY472G6E.js";
+} from "../chunk-CUYYYZWD.js";
 import "../chunk-WCBDXZ3X.js";
 
 // src/preview/previewStore.ts

package/dist/styles.css

@@ -981,6 +981,86 @@
 .dark .cv-listing-perpage {
   border-color: rgb(71 85 105);
 }
+:root {
+  --cv-border-color: rgb(229 231 235);
+}
+.dark {
+  --cv-border-color: rgb(51 65 85);
+}
+@layer base {
+  *,
+  ::before,
+  ::after,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--cv-border-color);
+  }
+}
+.cv-table-card {
+  overflow-x: auto;
+  border: 1px solid rgb(229 231 235);
+  border-radius: 0.75rem;
+  background: #fff;
+}
+.dark .cv-table-card {
+  border-color: rgb(51 65 85);
+  background: rgb(17 24 39);
+}
+.cv-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+}
+.cv-table thead {
+  background: rgb(248 250 252);
+  color: rgb(100 116 139);
+}
+.dark .cv-table thead {
+  background: rgb(30 41 59 / 60%);
+  color: rgb(148 163 184);
+}
+.cv-table thead th {
+  border-bottom: 1px solid rgb(226 232 240);
+  white-space: nowrap;
+}
+.dark .cv-table thead th {
+  border-bottom-color: rgb(51 65 85);
+}
+.cv-table tbody tr {
+  border-bottom: 1px solid rgb(241 245 249);
+}
+.dark .cv-table tbody tr {
+  border-bottom-color: rgb(30 41 59);
+}
+.cv-table tbody tr:last-child {
+  border-bottom: 0;
+}
+.cv-table tbody tr:nth-child(even) {
+  background: rgb(248 250 252 / 70%);
+}
+.dark .cv-table tbody tr:nth-child(even) {
+  background: rgb(30 41 59 / 35%);
+}
+.cv-table tbody tr:hover {
+  background: rgb(239 246 255);
+}
+.dark .cv-table tbody tr:hover {
+  background: rgb(30 58 138 / 25%);
+}
+.cv-type-tag {
+  display: inline-block;
+  border-radius: 0.25rem;
+  background: rgb(241 245 249);
+  padding: 0.125rem 0.375rem;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: rgb(71 85 105);
+}
+.dark .cv-type-tag {
+  background: rgb(51 65 85);
+  color: rgb(203 213 225);
+}
 .cv-tooltip {
   position: fixed;
   z-index: 9999;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adatechnology/conversations-ui",
-  "version": "0.1.0-rc.30",
+  "version": "0.1.0-rc.31",
   "description": "WhatsApp conversation UI components — parametrizável por endpoint, tema e feature flags",
   "publishConfig": {
     "access": "public"

package/src/documents/DocumentsWorkspace.tsx

@@ -14,6 +14,7 @@ import { Download, Eye, MessageSquare, Trash2, Upload, X } from 'lucide-react'
 
 import { useConversations } from '../providers/ConversationsProvider'
 import { FileIcon } from '../FileIcon'
+import { documentTypeLabel } from '../MediaRenderer'
 import { cn } from '../lib/cn'
 import { formatDateTime, formatFileSize } from '../lib/format'
 import { formatPhone } from '../lib/phone'
@@ -281,7 +282,7 @@ export function DocumentsWorkspace({
           onChange={(event) => setSearch(event.target.value)}
           placeholder={labels.searchPlaceholder}
           aria-label={labels.searchPlaceholder}
-          className="w-full rounded-md border px-3 py-2 text-sm dark:border-gray-700 dark:bg-gray-900 sm:w-64"
+          className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm dark:border-gray-700 dark:bg-gray-900 sm:w-64"
         />
 
         <MultiSelectFilter label={labels.sourceFilter} options={sourceOptions} selected={source} onChange={setSource} />
@@ -302,14 +303,14 @@ export function DocumentsWorkspace({
               value={startDate}
               onChange={(event) => setStartDate(event.target.value)}
               aria-label={labels.startDate}
-              className="rounded-md border px-2 py-2 text-xs dark:border-gray-700 dark:bg-gray-900"
+              className="rounded-md border border-gray-300 px-2 py-2 text-xs dark:border-gray-700 dark:bg-gray-900"
             />
             <input
               type="date"
               value={endDate}
               onChange={(event) => setEndDate(event.target.value)}
               aria-label={labels.endDate}
-              className="rounded-md border px-2 py-2 text-xs dark:border-gray-700 dark:bg-gray-900"
+              className="rounded-md border border-gray-300 px-2 py-2 text-xs dark:border-gray-700 dark:bg-gray-900"
             />
           </>
         ) : null}
@@ -399,9 +400,9 @@ export function DocumentsWorkspace({
         </p>
       ) : null}
 
-      <div className={cn('overflow-x-auto rounded-xl border dark:border-gray-700', classNames?.table)}>
-        <table className="w-full text-sm">
-          <thead className="border-b text-gray-500 dark:border-gray-700 dark:text-gray-400">
+      <div className={cn('cv-table-card', classNames?.table)}>
+        <table className="cv-table">
+          <thead>
             <tr>
               {canSelect ? (
                 <th scope="col" className="w-10 px-3 py-2">
@@ -427,7 +428,7 @@ export function DocumentsWorkspace({
           </thead>
           <tbody>
             {documents.map((document) => (
-              <tr key={`${document.conversationId}:${document.id}`} className={cn('border-b last:border-0 dark:border-gray-800', classNames?.row)}>
+              <tr key={`${document.conversationId}:${document.id}`} className={classNames?.row}>
                 {canSelect ? (
                   <td className="w-10 px-3 py-2">
                     <input
@@ -467,12 +468,18 @@ export function DocumentsWorkspace({
                   )}
                 </td>
 
-                <td className="hidden px-3 py-2 font-mono text-xs md:table-cell">{document.mimeType}</td>
-                <td className="hidden px-3 py-2 text-xs lg:table-cell">{formatFileSize(document.sizeBytes)}</td>
-                <td className="hidden px-3 py-2 text-xs lg:table-cell">
+                {/* O tipo curto, não o MIME cru: `.docx` responde
+                    `application/vnd.openxmlformats-officedocument.wordprocessingml.document`, que numa
+                    célula sem quebra esticava a coluna a 556px e espremia todas as outras. O MIME
+                    inteiro continua na dica. */}
+                <td className="hidden px-3 py-2 md:table-cell" data-cv-tooltip={document.mimeType}>
+                  <span className="cv-type-tag">{documentTypeLabel(document.filename, document.mimeType)}</span>
+                </td>
+                <td className="hidden whitespace-nowrap px-3 py-2 text-xs lg:table-cell">{formatFileSize(document.sizeBytes)}</td>
+                <td className="hidden whitespace-nowrap px-3 py-2 text-xs lg:table-cell">
                   {labels.sourceLabels[document.source] ?? document.source}
                 </td>
-                <td className="hidden px-3 py-2 text-xs xl:table-cell">{formatDateTime(document.linkedAt)}</td>
+                <td className="hidden whitespace-nowrap px-3 py-2 text-xs xl:table-cell">{formatDateTime(document.linkedAt)}</td>
 
                 <td className="px-3 py-2">
                   <div className="flex gap-1">

package/src/flows/FlowsWorkspace.tsx

@@ -36,7 +36,7 @@ import {
   portalNodeId,
   GROUP_HEADER_NODE_ID,
   type FlowEdgeSpec,
-  type FlowLivePosition,
+  type FlowLivePositionInput,
 } from './flowCanvasModel'
 import {
   applyConnection,
@@ -79,9 +79,10 @@ const EDGE_COLOR_CROSS_FLOW = '#06b6d4'
 const BACKGROUND_COLOR_LIGHT = '#cbd5e1'
 const BACKGROUND_COLOR_DARK = '#334155'
 
-// `FlowLivePosition` mora no modelo, que é quem conta — e é reexportado aqui porque faz parte da api
-// que o produto implementa. Declarar nos dois lugares faria as duas formas divergirem em silêncio.
-export type { FlowLivePosition } from './flowCanvasModel'
+// Os formatos de posição viva moram no modelo, que é quem conta — e são reexportados aqui porque
+// fazem parte da api que o produto implementa. Declarar nos dois lugares faria as duas formas
+// divergirem em silêncio.
+export type { FlowLivePosition, FlowLiveNodeCount, FlowLivePositionInput } from './flowCanvasModel'
 
 export interface CreateFlowInput {
   key: string
@@ -105,8 +106,13 @@ export interface FlowsWorkspaceApi {
    */
   createFlow?(input: CreateFlowInput): Promise<void>
   deleteFlow?(key: string): Promise<void>
-  /** Contagem de conversas vivas por nó. Ausente, os cards não pulsam e nada é consultado. */
-  getLivePositions?(): Promise<FlowLivePosition[]>
+  /**
+   * Onde estão as conversas vivas. Ausente, os cards não pulsam e nada é consultado.
+   *
+   * Aceita a linha por sessão e a linha já agregada por nó — `meta-whatsapp-module` responde a
+   * segunda, e exigir a primeira deixava os cards parados em todo produto que usa o módulo.
+   */
+  getLivePositions?(): Promise<readonly FlowLivePositionInput[]>
 }
 
 export interface FlowsWorkspaceProps {
@@ -122,6 +128,14 @@ export interface FlowsWorkspaceProps {
   readonly renderMediaPicker?: (node: FlowNodeData, graph: FlowGraphData) => ReactNode
   /** Intervalo do polling de posições vivas. Só tem efeito com `getLivePositions`. */
   readonly livePollIntervalMs?: number
+  /**
+   * Título e subtítulo do editor. `false` deixa só a barra de ações.
+   *
+   * Produto cuja navegação já nomeia a tela mostrava o nome duas vezes, em dois tamanhos, porque a
+   * tipografia daqui é do pacote e a de lá é do host. Esconder é a única saída que não força o
+   * pacote a adivinhar a escala tipográfica de cada produto.
+   */
+  readonly showHeader?: boolean
   readonly className?: string
 }
 
@@ -190,6 +204,7 @@ export function FlowsWorkspace({
   actionOptions,
   renderMediaPicker,
   livePollIntervalMs = 5000,
+  showHeader = true,
   className,
 }: FlowsWorkspaceProps) {
   const labels = useMemo(() => mergeFlowEditorLabels(labelsOverride), [labelsOverride])
@@ -197,7 +212,7 @@ export function FlowsWorkspace({
 
   const [graphs, setGraphs] = useState<Record<string, FlowGraphData> | undefined>(undefined)
   const [loadState, setLoadState] = useState<'loading' | 'ready' | 'error'>('loading')
-  const [livePositions, setLivePositions] = useState<FlowLivePosition[] | undefined>(undefined)
+  const [livePositions, setLivePositions] = useState<readonly FlowLivePositionInput[] | undefined>(undefined)
   const [viewMode, setViewMode] = useState<'detail' | 'map'>('detail')
   const [openFlowKeys, setOpenFlowKeys] = useState<readonly string[]>([rootFlowKey])
   const [hasAutoMerged, setHasAutoMerged] = useState(false)
@@ -709,11 +724,16 @@ export function FlowsWorkspace({
     <div className={`space-y-4 h-full flex flex-col ${className ?? ''}`}>
       <TooltipLayer />
       <div className="flex items-center justify-between flex-wrap gap-3">
-        <div>
-          <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100">{labels.workspace.title}</h2>
-          <p className="text-gray-500 dark:text-gray-400 text-sm mt-1">{labels.workspace.subtitle}</p>
-        </div>
-        <div className="flex items-center gap-3">
+        {showHeader && (
+          <div className="min-w-0">
+            <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100">{labels.workspace.title}</h2>
+            <p className="text-gray-500 dark:text-gray-400 text-sm mt-1">{labels.workspace.subtitle}</p>
+          </div>
+        )}
+        {/* Quatro botões passam de 580px e a tela mais estreita é de 375px: sem `flex-wrap` a barra
+            empurrava a página inteira para o lado. `ml-auto` mantém tudo à direita mesmo sem o
+            título ao lado, que é o caso de `showHeader={false}`. */}
+        <div className="flex flex-wrap items-center justify-end gap-3 ml-auto">
           {saveState === 'success' && <span className="text-sm text-green-600">{labels.workspace.saveSuccess}</span>}
           {saveState === 'error' && (
             <span className="text-sm text-red-600">{saveErrorMessage ?? labels.workspace.saveError}</span>

package/src/flows/flowCanvasModel.test.ts

@@ -171,6 +171,25 @@ describe('contagem ao vivo', () => {
   it('sem posições devolve vazio, em vez de estourar', () => {
     expect(countLiveByNode({ flowKey: ROOT, rootFlowKey: ROOT, positions: undefined })).toEqual({})
   })
+
+  it('linha já agregada pelo servidor soma pelo count, inclusive na raiz', () => {
+    // `meta-whatsapp-module` responde `GROUP BY (flowKey, currentNodeId)`. Contando como uma sessão
+    // por linha, dez conversas paradas no mesmo nó apareciam como uma — ou como nenhuma, porque a
+    // linha agregada não tem `menuNodeId` para a raiz ler.
+    const positions = [
+      { flowKey: ROOT, nodeId: 'saudacao', count: 7 },
+      { flowKey: 'sim', nodeId: 'renda', count: 3 },
+    ]
+
+    expect(countLiveByNode({ flowKey: ROOT, rootFlowKey: ROOT, positions })).toEqual({ saudacao: 7 })
+    expect(countLiveByNode({ flowKey: 'sim', rootFlowKey: ROOT, positions })).toEqual({ renda: 3 })
+  })
+
+  it('os dois formatos convivem na mesma resposta', () => {
+    const positions = [live({ flow: 'sim', nodeId: 'renda' }), { flowKey: 'sim', nodeId: 'renda', count: 2 }]
+
+    expect(countLiveByNode({ flowKey: 'sim', rootFlowKey: ROOT, positions })).toEqual({ renda: 3 })
+  })
 })
 
 describe('layout mesclado', () => {

package/src/flows/flowCanvasModel.ts

@@ -30,7 +30,7 @@ const CHAIN_LABEL_ROOM = 24
 
 export type FlowNodePosition = { readonly x: number; readonly y: number }
 
-/** Onde cada conversa viva está parada agora. */
+/** Onde cada conversa viva está parada agora — uma linha por sessão. */
 export type FlowLivePosition = {
   readonly currentState: string
   readonly flow: string | null
@@ -38,6 +38,25 @@ export type FlowLivePosition = {
   readonly menuNodeId: string | null
 }
 
+/**
+ * Quantas conversas estão paradas num nó — o formato que o servidor já agrega.
+ *
+ * `meta-whatsapp-module` responde `GROUP BY (flowKey, currentNodeId)`, e trazer uma linha por
+ * sessão só para o editor recontar em memória seria pior em toda base grande. Os dois formatos
+ * valem porque produto que já implementou o de sessão não deve quebrar numa release de correção.
+ */
+export type FlowLiveNodeCount = {
+  readonly flowKey: string
+  readonly nodeId: string
+  readonly count: number
+}
+
+export type FlowLivePositionInput = FlowLivePosition | FlowLiveNodeCount
+
+function isNodeCount(position: FlowLivePositionInput): position is FlowLiveNodeCount {
+  return typeof (position as FlowLiveNodeCount).count === 'number'
+}
+
 /**
  * Pseudo-nó que representa um fluxo alvo ainda não mesclado no canvas.
  *
@@ -57,20 +76,27 @@ export const GROUP_HEADER_NODE_ID = '__group_header__'
 /**
  * Quantas conversas estão paradas em cada nó de um fluxo.
  *
- * A raiz é caso à parte: o servidor guarda o passo do menu em `menuNodeId`, num campo próprio, e uma
- * conversa no menu não carrega `flow`. Ler `nodeId` ali daria contagem zero na tela mais visitada do
- * editor.
+ * A raiz é caso à parte no formato por sessão: o servidor guarda o passo do menu em `menuNodeId`,
+ * num campo próprio, e uma conversa no menu não carrega `flow`. Ler `nodeId` ali daria contagem
+ * zero na tela mais visitada do editor. No formato agregado a chave do fluxo já vem na linha,
+ * então a raiz não tem exceção.
  */
 export function countLiveByNode(params: {
   readonly flowKey: string
   readonly rootFlowKey: string
-  readonly positions: readonly FlowLivePosition[] | undefined
+  readonly positions: readonly FlowLivePositionInput[] | undefined
 }): Record<string, number> {
   const { flowKey, rootFlowKey, positions } = params
   const isRoot = flowKey === rootFlowKey
   const counts: Record<string, number> = {}
 
   for (const position of positions ?? []) {
+    if (isNodeCount(position)) {
+      if (position.flowKey !== flowKey) continue
+      counts[position.nodeId] = (counts[position.nodeId] ?? 0) + position.count
+      continue
+    }
+
     if (position.flow !== flowKey && !isRoot) continue
     const nodeId = isRoot ? position.menuNodeId : position.nodeId
     if (!nodeId) continue
@@ -191,7 +217,7 @@ export function buildFlowEdges(params: {
   readonly openKeys: readonly string[]
   readonly graphs: Readonly<Record<string, FlowGraphData>>
   readonly rootFlowKey: string
-  readonly livePositions?: readonly FlowLivePosition[] | undefined
+  readonly livePositions?: readonly FlowLivePositionInput[] | undefined
 }): FlowEdgeSpec[] {
   const { openKeys, graphs, rootFlowKey, livePositions } = params
   const open = new Set(openKeys)

package/src/flows/index.ts

@@ -45,7 +45,14 @@ export type {
 } from './flowGraph'
 
 export type { FlowEditorLabels, FlowValidationLabels } from './labels'
-export type { FlowsWorkspaceProps, FlowsWorkspaceApi, FlowLivePosition, CreateFlowInput } from './FlowsWorkspace'
+export type {
+  FlowsWorkspaceProps,
+  FlowsWorkspaceApi,
+  FlowLivePosition,
+  FlowLiveNodeCount,
+  FlowLivePositionInput,
+  CreateFlowInput,
+} from './FlowsWorkspace'
 export type { FlowNodeCardData } from './FlowNodeCard'
 export type { FlowMapNodeData } from './FlowMapNode'
 export type { FlowMapCanvasProps } from './FlowMapCanvas'
@@ -89,6 +96,6 @@ export {
   portalNodeId,
   GROUP_HEADER_NODE_ID,
 } from './flowCanvasModel'
-// `FlowLivePosition` já sai pelo `FlowsWorkspace`, que é onde o produto a encontra ao implementar a
-// api — exportar de novo aqui daria dois caminhos para o mesmo tipo.
+// Os formatos de posição viva já saem pelo `FlowsWorkspace`, que é onde o produto os encontra ao
+// implementar a api — exportar de novo aqui daria dois caminhos para o mesmo tipo.
 export type { FlowEdgeKind, FlowEdgeSpec, FlowNodePosition } from './flowCanvasModel'

package/src/styles.css

@@ -888,6 +888,85 @@
 }
 .dark .cv-listing-perpage { border-color: rgb(71 85 105); }
 
+/**
+ * Cor padrão de borda para as classes `border` sem cor ao lado.
+ *
+ * O Tailwind v4 trocou o padrão de `gray-200` por `currentColor`, e os componentes daqui foram
+ * escritos no v3. Em produto que traz a base do shadcn nada aparece — ela já redefine isto; em
+ * produto sem shadcn, cada `border` sai na cor do texto, e a tabela de documentos vinha com régua
+ * azul-quase-preta em vez de cinza. Fica na camada `base`, então qualquer `border-*` do host ou
+ * daqui continua ganhando, e a variável deixa o produto escolher outra cor sem editar o pacote.
+ */
+:root { --cv-border-color: rgb(229 231 235); }
+.dark { --cv-border-color: rgb(51 65 85); }
+
+@layer base {
+  *,
+  ::before,
+  ::after,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--cv-border-color);
+  }
+}
+
+/* Tabela de listagem: a moldura, o cabeçalho e a zebra que `web.md` §7 exige, no stylesheet pelo
+   mesmo motivo do resto — host que não varre `node_modules` com `@source` não compila utilitário
+   nenhum do pacote, e a tabela sairia crua. */
+.cv-table-card {
+  overflow-x: auto;
+  border: 1px solid rgb(229 231 235);
+  border-radius: 0.75rem;
+  background: #fff;
+}
+.dark .cv-table-card { border-color: rgb(51 65 85); background: rgb(17 24 39); }
+
+/* `collapse` porque a régua de baixo mora no `tr`: com o `separate` padrão o navegador ignora borda
+   de linha e a tabela ficava sem separação nenhuma entre os registros. */
+.cv-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+}
+
+.cv-table thead {
+  background: rgb(248 250 252);
+  color: rgb(100 116 139);
+}
+.dark .cv-table thead { background: rgb(30 41 59 / 60%); color: rgb(148 163 184); }
+
+.cv-table thead th {
+  border-bottom: 1px solid rgb(226 232 240);
+  white-space: nowrap;
+}
+.dark .cv-table thead th { border-bottom-color: rgb(51 65 85); }
+
+.cv-table tbody tr { border-bottom: 1px solid rgb(241 245 249); }
+.dark .cv-table tbody tr { border-bottom-color: rgb(30 41 59); }
+.cv-table tbody tr:last-child { border-bottom: 0; }
+
+/* A alternada é o que leva o olho do nome do arquivo até a coluna de ações; em tela larga a régua
+   sozinha não segura a linha. */
+.cv-table tbody tr:nth-child(even) { background: rgb(248 250 252 / 70%); }
+.dark .cv-table tbody tr:nth-child(even) { background: rgb(30 41 59 / 35%); }
+
+.cv-table tbody tr:hover { background: rgb(239 246 255); }
+.dark .cv-table tbody tr:hover { background: rgb(30 58 138 / 25%); }
+
+/* Extensão do arquivo como etiqueta: `PDF` e `DOCX` têm larguras parecidas e a coluna para de dançar
+   a cada linha, o que o MIME cru não permitia. */
+.cv-type-tag {
+  display: inline-block;
+  border-radius: 0.25rem;
+  background: rgb(241 245 249);
+  padding: 0.125rem 0.375rem;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: rgb(71 85 105);
+}
+.dark .cv-type-tag { background: rgb(51 65 85); color: rgb(203 213 225); }
+
 /* Dica de ação (ver `Tooltip.tsx`). Impressa em `document.body`, então a posição é da janela e o
    `z-index` fica acima de qualquer painel do produto. */
 .cv-tooltip {