@arbidocs/react 0.5.111 → 0.5.113

package/dist/datasets/store.js

@@ -0,0 +1,194 @@
+import { useMemo } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useArbiHost } from "../host/config.js";
+import { useArbi } from "../useArbi.js";
+import { arbiQueryKeys } from "../query-keys.js";
+const ANALYTICS_CHART_VIEW = "analytics.chartDatabase";
+const MAX_DASHBOARD_SPEC_CHARS = 1e4;
+const isObject = (v) => typeof v === "object" && v !== null && !Array.isArray(v);
+function isPanel(v) {
+  return isObject(v) && typeof v.id === "string" && typeof v.title === "string" && isObject(v.source) && typeof v.source.id === "string" && isObject(v.chart) && typeof v.chart.type === "string";
+}
+function parseDashboardSpec(value) {
+  let parsed = value;
+  if (typeof value === "string") {
+    try {
+      parsed = JSON.parse(value);
+    } catch {
+      return null;
+    }
+  }
+  if (!isObject(parsed) || parsed.version !== 1 || typeof parsed.title !== "string") return null;
+  const panels = Array.isArray(parsed.panels) ? parsed.panels.filter(isPanel) : [];
+  return {
+    version: 1,
+    title: parsed.title,
+    ...typeof parsed.description === "string" ? { description: parsed.description } : {},
+    panels
+  };
+}
+function serializeDashboardSpec(spec, max = MAX_DASHBOARD_SPEC_CHARS) {
+  const json = JSON.stringify(spec);
+  if (json.length > max) {
+    throw new Error(
+      `This dashboard is too large to save (${json.length.toLocaleString("en-GB")} characters, at most ${max.toLocaleString("en-GB")}). Remove a panel or split it into two dashboards.`
+    );
+  }
+  return json;
+}
+function useUserDashboardStore() {
+  const arbi = useArbi();
+  const scope = arbi.isLoggedIn ? arbi.user.identity()?.externalId ?? null : null;
+  return useMemo(
+    () => ({
+      scope: scope && `user:${scope}`,
+      list: async () => (await arbi.dashboards.list()).map(({ id, json, updatedAt }) => {
+        const spec = json === null ? null : parseDashboardSpec(json);
+        return spec ? { id, spec, updatedAt } : {
+          id,
+          spec: { version: 1, title: "", panels: [] },
+          updatedAt,
+          unreadable: true
+        };
+      }),
+      async save({ id, spec }) {
+        const saved = await arbi.dashboards.save({ id, json: serializeDashboardSpec(spec) });
+        return { id: saved.id, spec, updatedAt: saved.updatedAt };
+      },
+      remove: (id) => arbi.dashboards.remove(id)
+    }),
+    [arbi, scope]
+  );
+}
+function createMemoryDashboardStore(initial = [], scope = "memory") {
+  let items = [...initial];
+  let next = items.length + 1;
+  return {
+    scope,
+    list: async () => items.map((d) => ({ ...d })),
+    save: async ({ id, spec }) => {
+      const saved = { id: id ?? `dash-${next++}`, spec, updatedAt: (/* @__PURE__ */ new Date()).toISOString() };
+      items = id ? items.map((d) => d.id === id ? saved : d) : [...items, saved];
+      return saved;
+    },
+    remove: async (id) => {
+      items = items.filter((d) => d.id !== id);
+    }
+  };
+}
+const NAME_COLUMN = "Name";
+const SPEC_COLUMN = "Spec";
+function useDatabaseDashboardStore(options = {}) {
+  const arbi = useArbi();
+  const queryClient = useQueryClient();
+  const name = options.name ?? "Dashboards";
+  const workspaceId = arbi.hasWorkspace ? arbi.getWorkspaceId() : null;
+  return useMemo(() => {
+    async function find() {
+      const all = await arbi.databases.list();
+      return all.find(
+        (d) => d.editable && d.workspace_id === workspaceId && d.name === name && (d.columns ?? []).some((c) => c.name === SPEC_COLUMN)
+      );
+    }
+    function inWorkspace(read) {
+      return workspaceId ? arbi.readInWorkspace(workspaceId, read) : read();
+    }
+    async function ensure() {
+      return inWorkspace(ensureHere);
+    }
+    async function ensureHere() {
+      const found = await find();
+      if (found) return found;
+      const created = await arbi.databases.create({
+        name,
+        description: "Saved dashboards (written by the Dashboards page).",
+        columns: [
+          { name: NAME_COLUMN, type: "text" },
+          { name: SPEC_COLUMN, type: "text" }
+        ]
+      });
+      void queryClient.invalidateQueries({
+        queryKey: arbiQueryKeys.databaseList(workspaceId ?? void 0)
+      });
+      return created;
+    }
+    return {
+      scope: workspaceId,
+      list: () => inWorkspace(async () => {
+        const database = await find();
+        if (!database) return [];
+        const spec = database.columns?.find((c) => c.name === SPEC_COLUMN)?.id ?? SPEC_COLUMN;
+        const page = await arbi.databases.rows(database.id, { limit: 1e3 });
+        return page.rows.flatMap((row) => {
+          const parsed = parseDashboardSpec(row.values[spec]);
+          return parsed ? [{ id: row.id, spec: parsed, updatedAt: row.updated_at }] : [];
+        });
+      }),
+      async save({ id, spec }) {
+        const values = { [NAME_COLUMN]: spec.title, [SPEC_COLUMN]: serializeDashboardSpec(spec) };
+        const database = await ensure();
+        const row = id ? await arbi.databases.updateRow(database.id, id, values) : (await arbi.databases.addRows(database.id, [{ values }]))[0];
+        void queryClient.invalidateQueries({
+          queryKey: arbiQueryKeys.databaseRows(workspaceId ?? "", database.id)
+        });
+        return { id: row.id, spec, updatedAt: row.updated_at };
+      },
+      async remove(id) {
+        const database = await find();
+        if (!database) return;
+        await arbi.databases.deleteRows(database.id, [id]);
+        void queryClient.invalidateQueries({
+          queryKey: arbiQueryKeys.databaseRows(workspaceId ?? "", database.id)
+        });
+      }
+    };
+  }, [arbi, queryClient, name, workspaceId]);
+}
+function useDashboardStore() {
+  const { dashboards } = useArbiHost();
+  return (dashboards?.useStore ?? useUserDashboardStore)();
+}
+function useSavedDashboards(store) {
+  return useQuery({
+    queryKey: arbiQueryKeys.dashboards(store.scope ?? ""),
+    queryFn: () => store.list(),
+    enabled: store.scope !== null
+  });
+}
+function useSaveDashboard(store) {
+  const queryClient = useQueryClient();
+  const key = arbiQueryKeys.dashboards(store.scope ?? "");
+  return useMutation({
+    mutationFn: (dashboard) => store.save(dashboard),
+    onSuccess: (saved) => {
+      queryClient.setQueryData(
+        key,
+        (old = []) => old.some((d) => d.id === saved.id) ? old.map((d) => d.id === saved.id ? saved : d) : [...old, saved]
+      );
+    }
+  });
+}
+function useDeleteDashboard(store) {
+  const queryClient = useQueryClient();
+  const key = arbiQueryKeys.dashboards(store.scope ?? "");
+  return useMutation({
+    mutationFn: (id) => store.remove(id),
+    onSuccess: (_void, id) => {
+      queryClient.setQueryData(key, (old = []) => old.filter((d) => d.id !== id));
+    }
+  });
+}
+export {
+  ANALYTICS_CHART_VIEW,
+  MAX_DASHBOARD_SPEC_CHARS,
+  createMemoryDashboardStore,
+  parseDashboardSpec,
+  serializeDashboardSpec,
+  useDashboardStore,
+  useDatabaseDashboardStore,
+  useDeleteDashboard,
+  useSaveDashboard,
+  useSavedDashboards,
+  useUserDashboardStore
+};
+//# sourceMappingURL=store.js.map

package/dist/datasets/store.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/datasets/store.ts"],
+  "sourcesContent": ["/**\n * Saved dashboards: where `DashboardSpec`s are kept, and the hooks that read and write them.\n *\n * Default store: the person's own (`useUserDashboardStore`, `/v1/user/dashboards`), each spec sealed\n * in the browser to their own key, so Analytics is theirs across workspaces. A host keeps them\n * elsewhere with `<ArbiHost config={{ dashboards: { useStore } }}>`, e.g. in a database of the open\n * workspace, shared with its members (`useDatabaseDashboardStore`).\n */\nimport { useMemo } from 'react'\nimport { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'\nimport { useArbiHost } from '../host/config'\nimport { useArbi } from '../useArbi'\nimport { arbiQueryKeys } from '../query-keys'\nimport type { DashboardSpec, PanelSpec } from './types'\n\n/**\n * The transient view through which a host asks Analytics to chart a database (\"Chart this\"): set it to\n * `{ id, name, workspaceId }` and open the page, which makes a dashboard on that database and clears it.\n */\nexport const ANALYTICS_CHART_VIEW = 'analytics.chartDatabase'\n\n/** A database Analytics is asked to chart. */\nexport interface AnalyticsChartRequest {\n  id: string\n  name: string\n  /** The database's workspace, so the new panels read it from anywhere. */\n  workspaceId?: string\n}\n\n/** A dashboard as stored. */\nexport interface SavedDashboard {\n  id: string\n  spec: DashboardSpec\n  updatedAt?: string\n  /** It could not be opened (sealed under another key, or not a dashboard): it can only be deleted. */\n  unreadable?: boolean\n}\n\n/** Where dashboards are kept. */\nexport interface DashboardStore {\n  /** What the saved list is cached under (the workspace it belongs to). `null`: not available. */\n  scope: string | null\n  list: () => Promise<SavedDashboard[]>\n  /** Create (no `id`) or replace a dashboard; resolves with it as stored. */\n  save: (dashboard: { id?: string; spec: DashboardSpec }) => Promise<SavedDashboard>\n  remove: (id: string) => Promise<void>\n}\n\n/** The longest spec a database text cell holds (the server's limit). */\nexport const MAX_DASHBOARD_SPEC_CHARS = 10_000\n\nconst isObject = (v: unknown): v is Record<string, unknown> =>\n  typeof v === 'object' && v !== null && !Array.isArray(v)\n\nfunction isPanel(v: unknown): v is PanelSpec {\n  return (\n    isObject(v) &&\n    typeof v.id === 'string' &&\n    typeof v.title === 'string' &&\n    isObject(v.source) &&\n    typeof v.source.id === 'string' &&\n    isObject(v.chart) &&\n    typeof v.chart.type === 'string'\n  )\n}\n\n/** A stored spec, checked: `null` when it is not a dashboard (malformed panels are dropped). */\nexport function parseDashboardSpec(value: unknown): DashboardSpec | null {\n  let parsed = value\n  if (typeof value === 'string') {\n    try {\n      parsed = JSON.parse(value)\n    } catch {\n      return null\n    }\n  }\n  if (!isObject(parsed) || parsed.version !== 1 || typeof parsed.title !== 'string') return null\n  const panels = Array.isArray(parsed.panels) ? parsed.panels.filter(isPanel) : []\n  return {\n    version: 1,\n    title: parsed.title,\n    ...(typeof parsed.description === 'string' ? { description: parsed.description } : {}),\n    panels,\n  }\n}\n\n/** A spec as JSON for storage; throws when it is longer than the store holds. */\nexport function serializeDashboardSpec(spec: DashboardSpec, max = MAX_DASHBOARD_SPEC_CHARS) {\n  const json = JSON.stringify(spec)\n  if (json.length > max) {\n    throw new Error(\n      `This dashboard is too large to save (${json.length.toLocaleString('en-GB')} characters, at most ${max.toLocaleString('en-GB')}). Remove a panel or split it into two dashboards.`\n    )\n  }\n  return json\n}\n\n/** The person's own dashboards (`arbi.dashboards`: sealed to their key); unavailable signed out. */\nexport function useUserDashboardStore(): DashboardStore {\n  const arbi = useArbi()\n  const scope = arbi.isLoggedIn ? (arbi.user.identity()?.externalId ?? null) : null\n  return useMemo(\n    () => ({\n      scope: scope && `user:${scope}`,\n      list: async () =>\n        (await arbi.dashboards.list()).map(({ id, json, updatedAt }) => {\n          const spec = json === null ? null : parseDashboardSpec(json)\n          return spec\n            ? { id, spec, updatedAt }\n            : {\n                id,\n                spec: { version: 1 as const, title: '', panels: [] },\n                updatedAt,\n                unreadable: true,\n              }\n        }),\n      async save({ id, spec }) {\n        const saved = await arbi.dashboards.save({ id, json: serializeDashboardSpec(spec) })\n        return { id: saved.id, spec, updatedAt: saved.updatedAt }\n      },\n      remove: (id) => arbi.dashboards.remove(id),\n    }),\n    [arbi, scope]\n  )\n}\n\n/** A store kept in memory (a demo, a test, a page without a workspace). */\nexport function createMemoryDashboardStore(\n  initial: readonly SavedDashboard[] = [],\n  scope = 'memory'\n): DashboardStore {\n  let items = [...initial]\n  let next = items.length + 1\n  return {\n    scope,\n    list: async () => items.map((d) => ({ ...d })),\n    save: async ({ id, spec }) => {\n      const saved = { id: id ?? `dash-${next++}`, spec, updatedAt: new Date().toISOString() }\n      items = id ? items.map((d) => (d.id === id ? saved : d)) : [...items, saved]\n      return saved\n    },\n    remove: async (id) => {\n      items = items.filter((d) => d.id !== id)\n    },\n  }\n}\n\nexport interface DatabaseDashboardStoreOptions {\n  /** The database's name. Default \"Dashboards\". */\n  name?: string\n}\n\nconst NAME_COLUMN = 'Name'\nconst SPEC_COLUMN = 'Spec'\n\n/** Dashboards kept as rows of a database of the open workspace (made on the first save). */\nexport function useDatabaseDashboardStore(\n  options: DatabaseDashboardStoreOptions = {}\n): DashboardStore {\n  const arbi = useArbi()\n  const queryClient = useQueryClient()\n  const name = options.name ?? 'Dashboards'\n  const workspaceId = arbi.hasWorkspace ? arbi.getWorkspaceId() : null\n  return useMemo(() => {\n    /** The workspace's own dashboards database, if there is one. */\n    async function find() {\n      const all = await arbi.databases.list()\n      return all.find(\n        (d) =>\n          d.editable &&\n          d.workspace_id === workspaceId &&\n          d.name === name &&\n          (d.columns ?? []).some((c) => c.name === SPEC_COLUMN)\n      )\n    }\n    /**\n     * Run `read` only while this store's workspace is the one open on the server (databases are\n     * listed and created there): a switch meanwhile drops it, so nothing is cached, or created,\n     * as another workspace's.\n     */\n    function inWorkspace<T>(read: () => Promise<T>): Promise<T> {\n      return workspaceId ? arbi.readInWorkspace(workspaceId, read) : read()\n    }\n    async function ensure() {\n      return inWorkspace(ensureHere)\n    }\n    async function ensureHere() {\n      const found = await find()\n      if (found) return found\n      const created = await arbi.databases.create({\n        name,\n        description: 'Saved dashboards (written by the Dashboards page).',\n        columns: [\n          { name: NAME_COLUMN, type: 'text' },\n          { name: SPEC_COLUMN, type: 'text' },\n        ],\n      })\n      void queryClient.invalidateQueries({\n        queryKey: arbiQueryKeys.databaseList(workspaceId ?? undefined),\n      })\n      return created\n    }\n    return {\n      scope: workspaceId,\n      list: () =>\n        inWorkspace(async () => {\n          const database = await find()\n          if (!database) return []\n          const spec = database.columns?.find((c) => c.name === SPEC_COLUMN)?.id ?? SPEC_COLUMN\n          const page = await arbi.databases.rows(database.id, { limit: 1000 })\n          return page.rows.flatMap((row) => {\n            const parsed = parseDashboardSpec(row.values[spec])\n            return parsed ? [{ id: row.id, spec: parsed, updatedAt: row.updated_at }] : []\n          })\n        }),\n      async save({ id, spec }) {\n        const values = { [NAME_COLUMN]: spec.title, [SPEC_COLUMN]: serializeDashboardSpec(spec) }\n        const database = await ensure()\n        const row = id\n          ? await arbi.databases.updateRow(database.id, id, values)\n          : (await arbi.databases.addRows(database.id, [{ values }]))[0]\n        // The database's own rows changed (it shows in Databases like any other).\n        void queryClient.invalidateQueries({\n          queryKey: arbiQueryKeys.databaseRows(workspaceId ?? '', database.id),\n        })\n        return { id: row.id, spec, updatedAt: row.updated_at }\n      },\n      async remove(id) {\n        const database = await find()\n        if (!database) return\n        await arbi.databases.deleteRows(database.id, [id])\n        void queryClient.invalidateQueries({\n          queryKey: arbiQueryKeys.databaseRows(workspaceId ?? '', database.id),\n        })\n      },\n    }\n  }, [arbi, queryClient, name, workspaceId])\n}\n\n/** The store dashboards are kept in here: the host's (`dashboards.useStore`) or a database. */\nexport function useDashboardStore(): DashboardStore {\n  const { dashboards } = useArbiHost()\n  // The host's configuration is one object for its life: the same hook runs every render.\n  return (dashboards?.useStore ?? useUserDashboardStore)()\n}\n\n/** The saved dashboards, oldest first. */\nexport function useSavedDashboards(store: DashboardStore) {\n  return useQuery({\n    queryKey: arbiQueryKeys.dashboards(store.scope ?? ''),\n    queryFn: () => store.list(),\n    enabled: store.scope !== null,\n  })\n}\n\n/** Save a dashboard (create without `id`); the saved list takes it straight away. */\nexport function useSaveDashboard(store: DashboardStore) {\n  const queryClient = useQueryClient()\n  const key = arbiQueryKeys.dashboards(store.scope ?? '')\n  return useMutation({\n    mutationFn: (dashboard: { id?: string; spec: DashboardSpec }) => store.save(dashboard),\n    onSuccess: (saved) => {\n      queryClient.setQueryData<SavedDashboard[]>(key, (old = []) =>\n        old.some((d) => d.id === saved.id)\n          ? old.map((d) => (d.id === saved.id ? saved : d))\n          : [...old, saved]\n      )\n    },\n  })\n}\n\nexport function useDeleteDashboard(store: DashboardStore) {\n  const queryClient = useQueryClient()\n  const key = arbiQueryKeys.dashboards(store.scope ?? '')\n  return useMutation({\n    mutationFn: (id: string) => store.remove(id),\n    onSuccess: (_void, id) => {\n      queryClient.setQueryData<SavedDashboard[]>(key, (old = []) => old.filter((d) => d.id !== id))\n    },\n  })\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/datasets/types.js

@@ -0,0 +1,14 @@
+const AGGREGATE_FIELDS = {
+  /** The group's label ("Open", "2026-06"). */
+  group: "group",
+  /** The group's key as grouped (a date bucket, an id), for ordering and links. */
+  key: "key",
+  /** The series' label (only with `splitBy`). */
+  series: "series",
+  /** The measured value; `null` when the group has no value to measure. */
+  value: "value"
+};
+export {
+  AGGREGATE_FIELDS
+};
+//# sourceMappingURL=types.js.map

package/dist/datasets/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/datasets/types.ts"],
+  "sourcesContent": ["/**\n * Datasets: the one shape every chart and dashboard reads, whatever the data comes from.\n *\n * Three layers, each knowing only the one below it:\n *   1. A `DataSource` adapter (AI usage, documents, threads, projects, a database, later an external\n *      feed) exposes its data as a normalized `Dataset`: typed fields and plain rows. Filtering,\n *      grouping and aggregation happen here (`aggregateDataset`, or on the server where the backend\n *      can, as a database does), never in a chart.\n *   2. A `ChartSpec` (inside a `PanelSpec`, inside a `DashboardSpec`) says what to show in terms of\n *      field ids only: the chart type, x / series / y fields, the aggregate, sort and limit. It is\n *      plain JSON, saved in dashboards and studio pages.\n *   3. A renderer (`@arbidocs/blocks/dashboards`) maps a spec plus the aggregated dataset onto the\n *      drawing component. No renderer type appears here, so the renderer stays swappable.\n */\n\n/** A field's value type. Dates are ISO strings (`2026-06-12` or a full timestamp). */\nexport type DatasetFieldType = 'string' | 'number' | 'date' | 'boolean'\n\n/** One column of a dataset. */\nexport interface DatasetField {\n  /** Stable id: what specs and rows use. */\n  id: string\n  /** What people read (a column name, \"Status\"). */\n  label: string\n  type: DatasetFieldType\n  /**\n   * The unit of a number field, which picks its formatting: `gbp` (\u00A3), `bytes`, `tokens`, or any\n   * suffix (`\"MB\"`, `\"%\"`).\n   */\n  unit?: string\n  /** The values a string field takes, when known (a select column's options), for a filter picker. */\n  options?: readonly string[]\n  /** A string field whose cell holds several values (tags, linked rows): a row counts in each. */\n  multiple?: boolean\n}\n\n/** A cell: a scalar, `null` when empty, or a list for a `multiple` field. */\nexport type DatasetValue = string | number | boolean | null | readonly string[]\n\n/** One row, keyed by field id. */\nexport type DatasetRow = Readonly<Record<string, DatasetValue | undefined>>\n\n/** A normalized dataset: typed fields and the rows. */\nexport interface Dataset {\n  fields: readonly DatasetField[]\n  rows: readonly DatasetRow[]\n  /** Rows matched before grouping (after filters). */\n  totalRows?: number\n  /** More groups existed than the query's `limit`. */\n  truncated?: boolean\n}\n\n/** How a date field is grouped. Keys: `2026-06-12`, `2026-W24`, `2026-06`, `2026-Q2`, `2026`. */\nexport type TimeBucket = 'day' | 'week' | 'month' | 'quarter' | 'year'\n\nexport type AggregateOp = 'count' | 'sum' | 'avg' | 'min' | 'max'\n\nexport type FilterOp =\n  'eq' | 'neq' | 'contains' | 'gt' | 'gte' | 'lt' | 'lte' | 'empty' | 'not_empty'\n\n/** Keep rows whose `field` satisfies `op value` (compared in the field's type). */\nexport interface DatasetFilter {\n  field: string\n  op: FilterOp\n  value?: string | number | boolean | null\n}\n\n/** How the groups are ordered: by label (dates: chronological), or by value. */\nexport type DatasetSort = 'label' | 'value-desc' | 'value-asc'\n\n/** How records are ordered: by a field (empty cells last). */\nexport interface DatasetOrder {\n  field: string\n  /** Default `asc`. */\n  direction?: 'asc' | 'desc'\n}\n\n/**\n * What to read of a source. Grouped (the default): the (filtered) rows grouped and each group\n * measured, a dataset in long form with the fields {@link AGGREGATE_FIELDS}, one row per group (and\n * series). With `records`: the matching rows themselves, ordered by `orderBy` and cut at `limit`.\n */\nexport interface DatasetQuery {\n  /** List the matching records instead of grouping them (`groupBy`, `splitBy`, `measure` unused). */\n  records?: boolean\n  /** The order of the records. */\n  orderBy?: DatasetOrder\n  filters?: readonly DatasetFilter[]\n  /** The field whose values (or date buckets) are the groups. Absent: one group, \"All\". */\n  groupBy?: string\n  /** The bucket of a date `groupBy` / `splitBy`. Default `month`. */\n  bucket?: TimeBucket\n  /** A second field: one series per value (a stacked or multi-line chart). */\n  splitBy?: string\n  /** Default: count rows. `count` with a `field` counts the rows where it is not empty. */\n  measure?: { op: AggregateOp; field?: string }\n  /** Default: dates chronological, others by value, largest first. */\n  sort?: DatasetSort\n  /** Most groups kept (by value), or records listed. Default 50 groups; every record. */\n  limit?: number\n}\n\n/** The field ids of an aggregated dataset. */\nexport const AGGREGATE_FIELDS = {\n  /** The group's label (\"Open\", \"2026-06\"). */\n  group: 'group',\n  /** The group's key as grouped (a date bucket, an id), for ordering and links. */\n  key: 'key',\n  /** The series' label (only with `splitBy`). */\n  series: 'series',\n  /** The measured value; `null` when the group has no value to measure. */\n  value: 'value',\n} as const\n\n/** A dataset (or a source's fields) as a hook reads it. */\nexport interface DatasetState {\n  dataset: Dataset | undefined\n  isLoading: boolean\n  error: unknown\n}\n\nexport interface DataSourceFieldsState {\n  fields: readonly DatasetField[]\n  isLoading: boolean\n  error: unknown\n}\n\n/** A source's parameters as saved in a panel (a database id, a period). */\nexport type DataSourceParams = Readonly<\n  Record<string, string | number | boolean | null | undefined>\n>\n\n/** A choice for a parameter (an option of a select). */\nexport interface DataSourceOption {\n  value: string\n  label: string\n  /** Other parameters set with this choice (a database's workspace, so a panel reads it anywhere). */\n  params?: DataSourceParams\n}\n\n/** A parameter the panel editor asks for, before the source's fields are known. */\nexport interface DataSourceParam {\n  id: string\n  label: string\n  /** Absent: the parameter may be left empty. */\n  required?: boolean\n  /** Shown when nothing is chosen (\"All columns\"). */\n  placeholder?: string\n  /** The choices, read live (databases of the open workspace; a database's saved views). */\n  useOptions: (params: DataSourceParams) => {\n    options: readonly DataSourceOption[]\n    isLoading: boolean\n  }\n}\n\n/**\n * A data source adapter: where a dataset comes from.\n *\n * `useFields` and `useDataset` are hooks. A caller renders them from a component keyed by the\n * source id, so switching source mounts afresh (the hooks differ between sources).\n *\n * Extension point: an external source (an HTTP/JSON API, a CSV feed, a warehouse) is one more\n * adapter. It reads its rows however it likes (its own `useQuery`) and returns them as a `Dataset`;\n * `defineRowsSource` aggregates them for it. A host lists it in `<ArbiHost config={{ dashboards:\n * { sources } }}>` and every editor, panel and studio block offers it. Fetching third-party URLs\n * from the browser is the host's decision (CORS, credentials, what a shared dashboard may reach),\n * so none is built in; data to chart today is imported into a database (CSV / spreadsheet import).\n */\nexport interface DataSource {\n  id: string\n  label: string\n  description?: string\n  /** `workspace`: it reads the open workspace's data (documents, threads\u2026), so it shows nothing until\n   *  one is open; a function decides from the panel's parameters (a database panel that does not name\n   *  its workspace). Absent: it is the person's own or names what it reads (AI usage). */\n  scope?: 'workspace' | ((params: DataSourceParams) => 'workspace' | undefined)\n  params?: readonly DataSourceParam[]\n  /** The fields a panel can use, given the parameters. */\n  useFields: (params: DataSourceParams) => DataSourceFieldsState\n  /**\n   * The dataset: grouped and measured (long form with {@link AGGREGATE_FIELDS}), or the records\n   * (`query.records`), filtered either way.\n   */\n  useDataset: (\n    params: DataSourceParams,\n    query: DatasetQuery,\n    options?: { enabled?: boolean }\n  ) => DatasetState\n}\n\n// \u2500\u2500 Specs: what a panel shows (plain JSON) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n/** How a panel draws its data. `metric` is one number; `table` a table of rows or groups. */\nexport type ChartType = 'metric' | 'bar' | 'line' | 'area' | 'pie' | 'donut' | 'table'\n\n/** What to show, in terms of the dataset's field ids. Serialisable. */\nexport interface ChartSpec {\n  type: ChartType\n  /** The category or date field along the x axis (pie slices; table groups). */\n  x?: string\n  /** The bucket of a date `x`. Default `month`. */\n  bucket?: TimeBucket\n  /** A field whose values become the series (stacked bars or areas, several lines). */\n  series?: string\n  /** The number field the aggregate reads (absent: rows are counted). */\n  y?: string\n  /** Default `count`. */\n  aggregate?: AggregateOp\n  sort?: DatasetSort\n  limit?: number\n  /** Stack the series (bar, area). */\n  stacked?: boolean\n  filters?: readonly DatasetFilter[]\n  /** A table of records (no aggregate): the fields shown, in order. Absent: every field. */\n  columns?: readonly string[]\n  /** A table of records: their order. */\n  orderBy?: DatasetOrder\n}\n\n/** The source a panel reads, by registry id, with its parameters. */\nexport interface DataSourceRef {\n  id: string\n  params?: DataSourceParams\n}\n\n/** One panel of a dashboard. */\nexport interface PanelSpec {\n  id: string\n  title: string\n  description?: string\n  source: DataSourceRef\n  chart: ChartSpec\n  /** Columns of the 12-column grid it spans on a wide screen (it is full width on a phone). */\n  width?: number\n}\n\n/** A dashboard: a titled grid of panels. Plain JSON (`version` for later migrations). */\nexport interface DashboardSpec {\n  version: 1\n  title: string\n  description?: string\n  panels: readonly PanelSpec[]\n}\n"],
+  "mappings": "AAuGO,MAAM,mBAAmB;AAAA;AAAA,EAE9B,OAAO;AAAA;AAAA,EAEP,KAAK;AAAA;AAAA,EAEL,QAAQ;AAAA;AAAA,EAER,OAAO;AACT;",
+  "names": []
+}

package/dist/directmessages/ConversationList.js

@@ -0,0 +1,148 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Check, CheckCheck } from "lucide-react";
+import { Badge } from "../ui/badge.js";
+import { cn } from "../lib/utils.js";
+import { formatRelativeTime, userDisplayName, isAgentUser } from "./utils.js";
+import { DmAvatar } from "./DmAvatar.js";
+import { AgentBadge } from "../entities/AgentMarkers.js";
+function ConversationList({
+  conversations,
+  selectedPeerId,
+  onSelect,
+  classNames,
+  emptyState,
+  header,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      className: cn(
+        "flex min-h-0 flex-col border-b border-border md:w-80 md:shrink-0 md:border-b-0 md:border-r",
+        className
+      ),
+      "data-testid": "arbi-dm-list",
+      children: [
+        header === void 0 ? /* @__PURE__ */ jsxs("div", { className: "border-b border-border px-4 py-3", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground", children: "Conversations" }),
+          /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+            conversations.length,
+            " ",
+            conversations.length === 1 ? "colleague" : "colleagues"
+          ] })
+        ] }) : header,
+        /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-y-auto", children: conversations.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-4 py-6 text-xs text-muted-foreground", children: emptyState ?? "No conversations yet." }) : /* @__PURE__ */ jsx("ul", { className: "w-full", children: conversations.map((c, i) => {
+          const { peer, lastMessage, unreadCount } = c;
+          const rowId = c.id ?? peer.external_id;
+          const newSection = c.sectionLabel && c.sectionLabel !== conversations[i - 1]?.sectionLabel;
+          const active = rowId === selectedPeerId;
+          const preview = lastMessage?.body ?? "No messages yet \u2014 say hello";
+          const unread = unreadCount > 0;
+          const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+            c.leading ?? /* @__PURE__ */ jsx(DmAvatar, { user: peer }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+                /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "truncate text-sm text-foreground",
+                        unread ? "font-bold" : "font-semibold"
+                      ),
+                      children: c.title ?? userDisplayName(peer)
+                    }
+                  ),
+                  c.badge ?? (isAgentUser(peer) ? /* @__PURE__ */ jsx(AgentBadge, {}) : null)
+                ] }),
+                c.statusLabel ? /* @__PURE__ */ jsx(
+                  Badge,
+                  {
+                    variant: "outline",
+                    className: "shrink-0 rounded-full px-2 py-0 text-xs font-medium text-muted-foreground",
+                    children: c.statusLabel
+                  }
+                ) : unreadCount > 0 ? (
+                  // Quiet by default: a filled brand pill with a shadow
+                  // shouted louder than the message it was counting.
+                  // Enough to catch the eye scanning the list, no more.
+                  /* @__PURE__ */ jsx(
+                    Badge,
+                    {
+                      variant: "accent",
+                      className: cn(
+                        "min-w-[1.125rem] justify-center rounded-full px-1 py-0 text-xs font-medium leading-[1.125rem] shadow-none",
+                        classNames?.unreadBadge
+                      ),
+                      children: unreadCount
+                    }
+                  )
+                ) : null
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-1.5", children: [
+                lastMessage?.isMine ? lastMessage.read ? /* @__PURE__ */ jsx(
+                  CheckCheck,
+                  {
+                    className: "size-3.5 shrink-0 text-ai-accent",
+                    "aria-label": "Read"
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  Check,
+                  {
+                    className: "size-3.5 shrink-0 text-muted-foreground",
+                    "aria-label": "Sent"
+                  }
+                ) : null,
+                /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "min-w-0 flex-1 truncate text-xs",
+                      unread ? "font-medium text-foreground" : "text-muted-foreground"
+                    ),
+                    children: c.subtitle ?? preview
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: lastMessage ? formatRelativeTime(lastMessage.createdAt) : "" })
+              ] })
+            ] })
+          ] });
+          const rowClass = cn(
+            // Each row is its own opaque surface. Left transparent it takes
+            // the panel's colour, and the chips stop reading as cards at all
+            // — which is the whole point of them.
+            "flex w-full items-start gap-3 border-b border-border/60 bg-card px-4 py-3 text-left transition-colors",
+            c.disabled ? "cursor-default" : active ? "bg-ai-accent-soft" : "hover:bg-accent/40"
+          );
+          return /* @__PURE__ */ jsxs("li", { children: [
+            newSection && /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: "bg-muted/40 px-4 py-1.5 text-xs font-medium uppercase tracking-wide text-muted-foreground",
+                "data-testid": "arbi-dm-section",
+                children: c.sectionLabel
+              }
+            ),
+            c.disabled ? /* @__PURE__ */ jsxs("div", { "data-testid": `arbi-dm-conversation-${rowId}`, className: rowClass, children: [
+              body,
+              c.trailing
+            ] }) : /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => onSelect(rowId),
+                "data-testid": `arbi-dm-conversation-${rowId}`,
+                className: rowClass,
+                children: body
+              }
+            )
+          ] }, rowId);
+        }) }) })
+      ]
+    }
+  );
+}
+export {
+  ConversationList
+};
+//# sourceMappingURL=ConversationList.js.map

package/dist/directmessages/ConversationList.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/directmessages/ConversationList.tsx"],
+  "sourcesContent": ["/**\n * The left rail: a scrollable list of conversations (1:1 or group), each showing\n * an avatar, name or title, last-message preview, relative time, and an unread pill.\n */\n\nimport { Check, CheckCheck } from 'lucide-react'\nimport { Badge } from '../ui/badge'\nimport { cn } from '../lib/utils'\nimport type { DmClassNames, DmConversation } from './types'\nimport { formatRelativeTime, userDisplayName, isAgentUser } from './utils'\nimport { DmAvatar } from './DmAvatar'\nimport { AgentBadge } from '../entities/AgentMarkers'\n\nexport interface ConversationListProps {\n  conversations: DmConversation[]\n  /** The selected row's id (`id ?? peer.external_id`). */\n  selectedPeerId: string | null\n  /** Receives the row's id (`id ?? peer.external_id`). */\n  onSelect: (id: string) => void\n  classNames?: Pick<DmClassNames, 'unreadBadge'>\n  /** Rendered when there are no conversations. */\n  emptyState?: React.ReactNode\n  /**\n   * Replaces the default \"Conversations / N colleagues\" heading \u2014 e.g. with a\n   * call to action. Pass `null` for no heading at all.\n   */\n  header?: React.ReactNode\n  /**\n   * Overrides the rail's own sizing. The default is a fixed-width column beside\n   * a thread; a consumer showing the list on its own needs it to fill instead,\n   * and cannot get there by wrapping (a narrower wrapper clips rather than\n   * shrinks).\n   */\n  className?: string\n}\n\nexport function ConversationList({\n  conversations,\n  selectedPeerId,\n  onSelect,\n  classNames,\n  emptyState,\n  header,\n  className,\n}: ConversationListProps) {\n  return (\n    <aside\n      className={cn(\n        'flex min-h-0 flex-col border-b border-border md:w-80 md:shrink-0 md:border-b-0 md:border-r',\n        className\n      )}\n      data-testid=\"arbi-dm-list\"\n    >\n      {header === undefined ? (\n        <div className=\"border-b border-border px-4 py-3\">\n          <p className=\"text-sm font-semibold text-foreground\">Conversations</p>\n          <p className=\"text-xs text-muted-foreground\">\n            {conversations.length} {conversations.length === 1 ? 'colleague' : 'colleagues'}\n          </p>\n        </div>\n      ) : (\n        header\n      )}\n      <div className=\"min-h-0 flex-1 overflow-y-auto\">\n        {conversations.length === 0 ? (\n          <div className=\"px-4 py-6 text-xs text-muted-foreground\">\n            {emptyState ?? 'No conversations yet.'}\n          </div>\n        ) : (\n          <ul className=\"w-full\">\n            {conversations.map((c, i) => {\n              const { peer, lastMessage, unreadCount } = c\n              const rowId = c.id ?? peer.external_id\n              // The heading renders once, above the first row of its group.\n              const newSection =\n                c.sectionLabel && c.sectionLabel !== conversations[i - 1]?.sectionLabel\n              const active = rowId === selectedPeerId\n              const preview = lastMessage?.body ?? 'No messages yet \u2014 say hello'\n              // Unread rows carry weight, which is the signal you catch scanning\n              // a list \u2014 the count alone is a detail you have to go looking for.\n              const unread = unreadCount > 0\n              const body = (\n                <>\n                  {c.leading ?? <DmAvatar user={peer} />}\n                  <div className=\"min-w-0 flex-1\">\n                    {/* Count sits with the name; the time sits with the message\n                        it belongs to. They were the other way round, which put\n                        \"just now\" beside a name it said nothing about. */}\n                    <div className=\"flex items-center justify-between gap-2\">\n                      <span className=\"flex min-w-0 items-center gap-1.5\">\n                        <span\n                          className={cn(\n                            'truncate text-sm text-foreground',\n                            unread ? 'font-bold' : 'font-semibold'\n                          )}\n                        >\n                          {c.title ?? userDisplayName(peer)}\n                        </span>\n                        {/* An agent is marked by default \u2014 a consumer only\n                            supplies `badge` to say something else. */}\n                        {c.badge ?? (isAgentUser(peer) ? <AgentBadge /> : null)}\n                      </span>\n                      {c.statusLabel ? (\n                        <Badge\n                          variant=\"outline\"\n                          className=\"shrink-0 rounded-full px-2 py-0 text-xs font-medium text-muted-foreground\"\n                        >\n                          {c.statusLabel}\n                        </Badge>\n                      ) : unreadCount > 0 ? (\n                        // Quiet by default: a filled brand pill with a shadow\n                        // shouted louder than the message it was counting.\n                        // Enough to catch the eye scanning the list, no more.\n                        <Badge\n                          variant=\"accent\"\n                          className={cn(\n                            'min-w-[1.125rem] justify-center rounded-full px-1 py-0 text-xs font-medium leading-[1.125rem] shadow-none',\n                            classNames?.unreadBadge\n                          )}\n                        >\n                          {unreadCount}\n                        </Badge>\n                      ) : null}\n                    </div>\n                    <div className=\"mt-1 flex items-center gap-1.5\">\n                      {/* Your own last message is marked with the same tick the\n                          bubble carries \u2014 one delivered, two read. It says who\n                          spoke last AND whether it landed, which a \"You:\" prefix\n                          cannot, and costs no preview width. */}\n                      {lastMessage?.isMine ? (\n                        lastMessage.read ? (\n                          <CheckCheck\n                            className=\"size-3.5 shrink-0 text-ai-accent\"\n                            aria-label=\"Read\"\n                          />\n                        ) : (\n                          <Check\n                            className=\"size-3.5 shrink-0 text-muted-foreground\"\n                            aria-label=\"Sent\"\n                          />\n                        )\n                      ) : null}\n                      <p\n                        className={cn(\n                          'min-w-0 flex-1 truncate text-xs',\n                          unread ? 'font-medium text-foreground' : 'text-muted-foreground'\n                        )}\n                      >\n                        {c.subtitle ?? preview}\n                      </p>\n                      <span className=\"shrink-0 text-xs text-muted-foreground\">\n                        {lastMessage ? formatRelativeTime(lastMessage.createdAt) : ''}\n                      </span>\n                    </div>\n                  </div>\n                </>\n              )\n\n              // An invitation that nobody has accepted has no thread to open, so\n              // it is listed but not offered as something to click.\n              const rowClass = cn(\n                // Each row is its own opaque surface. Left transparent it takes\n                // the panel's colour, and the chips stop reading as cards at all\n                // \u2014 which is the whole point of them.\n                'flex w-full items-start gap-3 border-b border-border/60 bg-card px-4 py-3 text-left transition-colors',\n                c.disabled ? 'cursor-default' : active ? 'bg-ai-accent-soft' : 'hover:bg-accent/40'\n              )\n\n              return (\n                <li key={rowId}>\n                  {newSection && (\n                    <p\n                      className=\"bg-muted/40 px-4 py-1.5 text-xs font-medium uppercase tracking-wide text-muted-foreground\"\n                      data-testid=\"arbi-dm-section\"\n                    >\n                      {c.sectionLabel}\n                    </p>\n                  )}\n                  {c.disabled ? (\n                    <div data-testid={`arbi-dm-conversation-${rowId}`} className={rowClass}>\n                      {body}\n                      {c.trailing}\n                    </div>\n                  ) : (\n                    <button\n                      type=\"button\"\n                      onClick={() => onSelect(rowId)}\n                      data-testid={`arbi-dm-conversation-${rowId}`}\n                      className={rowClass}\n                    >\n                      {body}\n                    </button>\n                  )}\n                </li>\n              )\n            })}\n          </ul>\n        )}\n      </div>\n    </aside>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/directmessages/DateSeparator.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+function DateSeparator({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "my-3 flex justify-center", "data-testid": "dm-date-separator", children: /* @__PURE__ */ jsx("span", { className: "rounded-full bg-background/80 px-2 py-0.5 text-xs text-muted-foreground", children }) });
+}
+export {
+  DateSeparator
+};
+//# sourceMappingURL=DateSeparator.js.map

package/dist/directmessages/DateSeparator.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/directmessages/DateSeparator.tsx"],
+  "sourcesContent": ["/**\n * The day divider between message runs in a thread.\n *\n * The label is supplied by the caller rather than formatted here: the ARBI app\n * has a friendly formatter that already says \"Today\" / \"Yesterday\" in the user's\n * locale, and a second date-formatting opinion in the kit would drift from it.\n */\n\nimport type { ReactNode } from 'react'\n\nexport interface DateSeparatorProps {\n  children: ReactNode\n}\n\nexport function DateSeparator({ children }: DateSeparatorProps) {\n  return (\n    <div className=\"my-3 flex justify-center\" data-testid=\"dm-date-separator\">\n      <span className=\"rounded-full bg-background/80 px-2 py-0.5 text-xs text-muted-foreground\">\n        {children}\n      </span>\n    </div>\n  )\n}\n"],
+  "mappings": "AAiBM;AAHC,SAAS,cAAc,EAAE,SAAS,GAAuB;AAC9D,SACE,oBAAC,SAAI,WAAU,4BAA2B,eAAY,qBACpD,8BAAC,UAAK,WAAU,2EACb,UACH,GACF;AAEJ;",
+  "names": []
+}

package/dist/directmessages/DmAvatar.js

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import { UserEntity } from "../entities/UserEntity.js";
+import { getEntityColorStyles } from "../entities/colors.js";
+import { useArbiWsStore } from "../websocket/store.js";
+import { userDisplayName, userInitials, isAgentUser } from "./utils.js";
+function DmAvatar({ user, className, size = "lg" }) {
+  const presence = useArbiWsStore((s) => s.presence[user.external_id]);
+  const displayStatus = presence === void 0 ? void 0 : presence === "online" ? "connected" : "disconnected";
+  return /* @__PURE__ */ jsx(
+    UserEntity,
+    {
+      variant: "icon",
+      size,
+      className,
+      interactive: false,
+      showTooltip: false,
+      initials: userInitials(user),
+      displayName: userDisplayName(user),
+      picture: user.picture,
+      avatarStyle: getEntityColorStyles(user.external_id),
+      isAgent: isAgentUser(user),
+      displayStatus
+    }
+  );
+}
+export {
+  DmAvatar
+};
+//# sourceMappingURL=DmAvatar.js.map

package/dist/directmessages/DmAvatar.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/directmessages/DmAvatar.tsx"],
+  "sourcesContent": ["/**\n * A peer avatar in a DM surface.\n *\n * This used to be its own small avatar that knew nothing about agents or\n * presence, which is why the ARBI app replaced it on every row with a\n * hand-rolled variant of its own. It is now a thin adapter over\n * {@link UserEntity} \u2014 the one presentational person component \u2014 so a DM row, a\n * members table and a document owner all draw a person the same way.\n *\n * The name and props are unchanged: it is exported from the package, and\n * consumers should not have to care that the implementation collapsed.\n */\n\nimport { UserEntity, type PresenceDisplayStatus } from '../entities/UserEntity'\nimport { getEntityColorStyles } from '../entities/colors'\nimport type { EntitySize } from '../entities/EntityPill'\nimport { useArbiWsStore } from '../websocket/store'\nimport type { DmUser } from './types'\nimport { userDisplayName, userInitials, isAgentUser } from './utils'\n\nexport interface DmAvatarProps {\n  user: DmUser\n  className?: string\n  /** Defaults to the 40px row avatar this component has always drawn. */\n  size?: EntitySize\n}\n\nexport function DmAvatar({ user, className, size = 'lg' }: DmAvatarProps) {\n  // Presence comes from the shared WS store, which stays empty until an app\n  // mounts ArbiWebSocketProvider. That is deliberate: with no socket we know\n  // nothing about who is online, and `undefined` hides the dot rather than\n  // asserting that everyone is offline.\n  const presence = useArbiWsStore((s) => s.presence[user.external_id])\n  const displayStatus: PresenceDisplayStatus | undefined =\n    presence === undefined ? undefined : presence === 'online' ? 'connected' : 'disconnected'\n\n  return (\n    <UserEntity\n      variant=\"icon\"\n      size={size}\n      className={className}\n      interactive={false}\n      showTooltip={false}\n      initials={userInitials(user)}\n      displayName={userDisplayName(user)}\n      picture={user.picture}\n      // Deterministic tint from the user's id so the fallback is stable + distinct.\n      avatarStyle={getEntityColorStyles(user.external_id)}\n      isAgent={isAgentUser(user)}\n      displayStatus={displayStatus}\n    />\n  )\n}\n"],
+  "mappings": "AAqCI;AAxBJ,SAAS,kBAA8C;AACvD,SAAS,4BAA4B;AAErC,SAAS,sBAAsB;AAE/B,SAAS,iBAAiB,cAAc,mBAAmB;AASpD,SAAS,SAAS,EAAE,MAAM,WAAW,OAAO,KAAK,GAAkB;AAKxE,QAAM,WAAW,eAAe,CAAC,MAAM,EAAE,SAAS,KAAK,WAAW,CAAC;AACnE,QAAM,gBACJ,aAAa,SAAY,SAAY,aAAa,WAAW,cAAc;AAE7E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb,aAAa;AAAA,MACb,UAAU,aAAa,IAAI;AAAA,MAC3B,aAAa,gBAAgB,IAAI;AAAA,MACjC,SAAS,KAAK;AAAA,MAEd,aAAa,qBAAqB,KAAK,WAAW;AAAA,MAClD,SAAS,YAAY,IAAI;AAAA,MACzB;AAAA;AAAA,EACF;AAEJ;",
+  "names": []
+}