@agent-native/core 0.124.0 → 0.124.2

package/corpus/templates/crm/app/components/crm/record/AttributePanel.tsx

@@ -1,17 +1,22 @@
 /**
- * The left pane: highlights, then the rest of the object's typed attributes,
- * each inline-editable when `update-crm-record` would actually accept it.
+ * Highlights, then the rest of the object's typed attributes, each
+ * inline-editable when `update-crm-record` would actually accept it.
+ *
+ * This renders the *sections*; the resizable pane that holds them (and the
+ * list memberships below them) belongs to `RecordWorkspace`.
  */
 
-import { ExtensionSlot } from "@agent-native/core/client/extensions";
 import { useT } from "@agent-native/core/client/i18n";
 import { IconChevronRight } from "@tabler/icons-react";
 import { useState } from "react";
 
+import { overlayProps } from "@/components/crm/shared/ui-tokens";
+
 import type {
   CrmAttributeDefinition,
   CrmValue,
 } from "../../../../shared/crm-contract";
+import { AttributeRowShell, PANEL_SECTION_HEADING } from "./attribute-row";
 import { FieldEditor, FieldLockNote, FieldValueDisplay } from "./field-editors";
 import { FieldHistoryButton } from "./FieldHistory";
 import {
@@ -37,32 +42,31 @@ export function AttributePanel({
     values: page.values,
   });
 
+  const row = (attribute: CrmAttributeDefinition) => (
+    <AttributeRow
+      key={attribute.id}
+      recordId={page.record.id}
+      attribute={attribute}
+      value={page.values[attribute.apiSlug]}
+      meta={page.valueMeta[attribute.apiSlug]}
+      isEditing={editingSlug === attribute.apiSlug}
+      onStartEdit={() => setEditingSlug(attribute.apiSlug)}
+      onDone={() => setEditingSlug(null)}
+      onCommit={(value) => onCommit(attribute, value)}
+    />
+  );
+
   return (
-    <aside className="flex min-h-full w-full flex-col gap-6 border-border/70 p-5 lg:w-[22rem] lg:shrink-0 lg:border-r">
+    <>
       <section aria-labelledby="crm-record-highlights">
-        <h2
-          id="crm-record-highlights"
-          className="text-xs font-medium uppercase tracking-[0.12em] text-muted-foreground"
-        >
+        <h2 id="crm-record-highlights" className={PANEL_SECTION_HEADING}>
           {t("record.highlights")}
         </h2>
-        <div className="mt-3 grid gap-0.5">
+        <div className="mt-2">
           {highlights.length ? (
-            highlights.map((attribute) => (
-              <AttributeRow
-                key={attribute.id}
-                recordId={page.record.id}
-                attribute={attribute}
-                value={page.values[attribute.apiSlug]}
-                meta={page.valueMeta[attribute.apiSlug]}
-                isEditing={editingSlug === attribute.apiSlug}
-                onStartEdit={() => setEditingSlug(attribute.apiSlug)}
-                onDone={() => setEditingSlug(null)}
-                onCommit={(value) => onCommit(attribute, value)}
-              />
-            ))
+            highlights.map(row)
           ) : (
-            <p className="py-3 text-sm text-muted-foreground">
+            <p className="py-3 text-sm text-content-tertiary">
               {t("record.noAttributes")}
             </p>
           )}
@@ -71,41 +75,16 @@ export function AttributePanel({
 
       {rest.length ? (
         <details open className="group/details">
-          <summary className="flex cursor-pointer list-none items-center gap-1.5 text-xs font-medium uppercase tracking-[0.12em] text-muted-foreground">
+          <summary
+            className={`flex cursor-pointer list-none items-center gap-1.5 ${PANEL_SECTION_HEADING}`}
+          >
             <IconChevronRight className="size-3.5 transition-transform group-open/details:rotate-90" />
             {t("record.allAttributes")}
           </summary>
-          <div className="mt-3 grid gap-0.5">
-            {rest.map((attribute) => (
-              <AttributeRow
-                key={attribute.id}
-                recordId={page.record.id}
-                attribute={attribute}
-                value={page.values[attribute.apiSlug]}
-                meta={page.valueMeta[attribute.apiSlug]}
-                isEditing={editingSlug === attribute.apiSlug}
-                onStartEdit={() => setEditingSlug(attribute.apiSlug)}
-                onDone={() => setEditingSlug(null)}
-                onCommit={(value) => onCommit(attribute, value)}
-              />
-            ))}
-          </div>
+          <div className="mt-2">{rest.map(row)}</div>
         </details>
       ) : null}
-
-      {/* Stable extension contract: changing this slot id or context is a migration. */}
-      <ExtensionSlot
-        id="crm.record-sidebar.bottom"
-        context={{
-          recordId: page.record.id,
-          objectType: page.record.objectType,
-          kind: page.record.kind,
-          displayName: page.record.displayName,
-          provider: page.record.provider,
-          values: page.values,
-        }}
-      />
-    </aside>
+    </>
   );
 }
 
@@ -139,54 +118,54 @@ function AttributeRow({
         (attribute.attributeType === "status" ||
           attribute.attributeType === "select")));
 
+  // Provenance rides on the row's tooltip instead of a hover-revealed caption:
+  // a caption either reserves ~15px on every row (killing the 36px rhythm) or
+  // grows the row on hover, and animating layout is off the table. The history
+  // dialog still carries the full actor-and-when list.
+  const title = [
+    attribute.description ?? attribute.label,
+    meta
+      ? t("record.lastSetBy", { actor: meta.actorId ?? meta.actorType })
+      : "",
+  ]
+    .filter(Boolean)
+    .join(" · ");
+
   return (
-    <div className="group grid grid-cols-[minmax(6.5rem,0.8fr)_minmax(0,1.2fr)] items-start gap-3 rounded-md px-2 py-1.5 hover:bg-muted/50">
-      <div className="flex min-w-0 items-start gap-1 pt-1">
-        {/* Wrapped, not truncated: a label column this narrow truncates long
-            attribute names (e.g. "Desired Cadence Days") past readability, and
-            a hover-only tooltip would hide the same text at rest. Wrapping
-            keeps the two-column grid and just grows the row. */}
-        <span
-          className="text-sm text-muted-foreground"
-          title={attribute.description ?? attribute.label}
-        >
-          {attribute.label}
-        </span>
-        {attribute.historyTracked ? (
+    <AttributeRowShell
+      type={attribute.attributeType}
+      label={attribute.label}
+      title={title}
+      affordance={
+        attribute.historyTracked ? (
           <FieldHistoryButton recordId={recordId} attribute={attribute} />
-        ) : null}
-      </div>
-      <div className="min-w-0 text-sm">
-        {alwaysLive || isEditing ? (
-          <FieldEditor
-            attribute={attribute}
-            value={value}
-            autoFocus={isEditing}
-            onCommit={onCommit}
-            onDone={onDone}
-          />
-        ) : editability.editable ? (
-          <button
-            type="button"
-            className="w-full cursor-pointer rounded px-1 py-1 text-left hover:bg-background"
-            onClick={onStartEdit}
-          >
-            <FieldValueDisplay attribute={attribute} value={value} />
-          </button>
-        ) : (
-          <div className="grid gap-1 px-1 py-1">
-            <FieldValueDisplay attribute={attribute} value={value} />
-            <FieldLockNote reason={editability.reason} />
-          </div>
-        )}
-        {meta && !isEditing ? (
-          <p className="mt-0.5 px-1 text-[11px] text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100">
-            {t("record.lastSetBy", {
-              actor: meta.actorId ?? meta.actorType,
-            })}
-          </p>
-        ) : null}
-      </div>
-    </div>
+        ) : null
+      }
+    >
+      {alwaysLive || isEditing ? (
+        <FieldEditor
+          attribute={attribute}
+          value={value}
+          autoFocus={isEditing}
+          onCommit={onCommit}
+          onDone={onDone}
+        />
+      ) : editability.editable ? (
+        <button
+          type="button"
+          {...overlayProps({
+            className: "w-full cursor-pointer rounded-lg px-2 py-1 text-left",
+          })}
+          onClick={onStartEdit}
+        >
+          <FieldValueDisplay attribute={attribute} value={value} />
+        </button>
+      ) : (
+        <div className="grid gap-1 px-2 py-1">
+          <FieldValueDisplay attribute={attribute} value={value} />
+          <FieldLockNote reason={editability.reason} />
+        </div>
+      )}
+    </AttributeRowShell>
   );
 }

package/corpus/templates/crm/app/components/crm/record/RecordHeader.tsx

@@ -31,15 +31,17 @@ export function RecordHeader({
     : undefined;
 
   return (
-    <header className="border-b border-border/70 px-5 py-4 sm:px-6">
-      <div className="flex flex-wrap items-start justify-between gap-4">
+    /* 104px: the record header's fixed band. `min-h` rather than `h` so a
+       wrapped title or a second row of badges grows it instead of clipping. */
+    <header className="flex min-h-[6.5rem] items-center border-b border-hairline px-5 py-4 sm:px-6">
+      <div className="flex w-full flex-wrap items-center justify-between gap-4">
         <div className="flex min-w-0 items-center gap-3">
           <RecordAvatar name={record.displayName} kind={record.kind} />
           <div className="min-w-0">
-            <h1 className="truncate text-xl font-semibold tracking-tight">
+            <h1 className="truncate text-xl font-semibold">
               {record.displayName}
             </h1>
-            <div className="mt-1 flex flex-wrap items-center gap-1.5 text-xs text-muted-foreground">
+            <div className="mt-1 flex flex-wrap items-center gap-1.5 text-xs text-content-secondary">
               <span className="capitalize">{record.kind}</span>
               {record.stage ? (
                 <Badge variant="secondary" className="font-normal">
@@ -69,7 +71,7 @@ export function RecordHeader({
             </Button>
           ) : null}
           {providerLabel && !recordUrl && recordUrlUnavailableReason ? (
-            <span className="text-xs text-muted-foreground">
+            <span className="text-xs text-content-tertiary">
               {t("record.upstreamLinkUnavailable", {
                 provider: providerLabel,
                 reason: recordUrlUnavailableReason,
@@ -90,12 +92,14 @@ function RecordAvatar({ name, kind }: { name: string; kind: string }) {
     .slice(0, 2)
     .map((part) => part[0]?.toUpperCase() ?? "")
     .join("");
+  // Person avatars are circles, company avatars a 30% squircle — the shape is
+  // how the two record kinds stay distinguishable at a glance.
   return (
     <div
       aria-hidden
-      className={`grid size-10 shrink-0 place-items-center text-sm font-semibold text-muted-foreground ${
-        kind === "person" ? "rounded-full" : "rounded-lg"
-      } bg-muted`}
+      className={`grid size-10 shrink-0 place-items-center bg-muted text-sm font-medium uppercase text-content-secondary ring-1 ring-inset ring-hairline ${
+        kind === "person" ? "rounded-full" : "rounded-avatar-company"
+      }`}
     >
       {initials || "?"}
     </div>

package/corpus/templates/crm/app/components/crm/record/RecordLists.tsx

@@ -26,6 +26,7 @@ import {
 } from "@/components/ui/select";
 
 import type { CrmValue } from "../../../../shared/crm-contract";
+import { AttributeRowShell, PANEL_SECTION_HEADING } from "./attribute-row";
 import { FieldEditor } from "./field-editors";
 import { FieldHistoryButton } from "./FieldHistory";
 import {
@@ -57,12 +58,9 @@ export function RecordLists({
 }) {
   const t = useT();
   return (
-    <section className="grid gap-3" aria-labelledby="crm-record-lists">
-      <div className="flex items-center justify-between gap-2">
-        <h2
-          id="crm-record-lists"
-          className="text-xs font-medium uppercase tracking-[0.12em] text-muted-foreground"
-        >
+    <section className="grid gap-2" aria-labelledby="crm-record-lists">
+      <div className="flex min-h-9 items-center justify-between gap-2">
+        <h2 id="crm-record-lists" className={PANEL_SECTION_HEADING}>
           {t("record.lists")}
         </h2>
         <AddToListControl page={page} />
@@ -77,12 +75,12 @@ export function RecordLists({
           />
         ))
       ) : (
-        <p className="text-sm text-muted-foreground">
+        <p className="text-sm text-content-tertiary">
           {t("record.listsEmpty")}
         </p>
       )}
       {page.listMembershipsTruncated ? (
-        <p className="text-xs text-muted-foreground">
+        <p className="text-xs text-content-tertiary">
           {t("record.listsTruncated")}
         </p>
       ) : null}
@@ -105,49 +103,47 @@ function ListCard({
 }) {
   const t = useT();
   return (
-    <div className="rounded-lg border border-border/70 bg-card">
-      <div className="flex items-center justify-between gap-2 border-b border-border/70 px-3 py-2">
+    <div className="rounded-card border border-hairline bg-card">
+      <div className="flex min-h-9 items-center justify-between gap-2 border-b border-hairline px-3">
         <Link
           to={`/lists/${encodeURIComponent(list.id)}`}
           className="truncate text-sm font-medium hover:underline"
         >
           {list.name}
         </Link>
-        <span className="shrink-0 text-xs text-muted-foreground">
+        <span className="shrink-0 text-xs tabular-nums text-content-tertiary">
           {t("record.entryCount", { count: list.entries.length })}
         </span>
       </div>
-      <div className="divide-y divide-border/70">
+      <div className="divide-y divide-hairline">
         {list.entries.map((entry, index) => (
-          <div key={entry.id} className="grid gap-1.5 px-3 py-2.5">
+          <div key={entry.id} className="px-1 py-1">
             {list.entries.length > 1 ? (
-              <p className="text-[11px] uppercase tracking-[0.1em] text-muted-foreground">
+              <p className="px-2 py-1 text-xs text-content-tertiary">
                 {t("record.entryOrdinal", { index: index + 1 })}
               </p>
             ) : null}
             {list.attributes.length ? (
               list.attributes.map((attribute) => (
-                <div
+                /* An entry attribute is the list's own workflow value, not the
+                   record's — an opportunity's `Stage` and a pipeline's `Stage`
+                   are different fields, and moving one does not move the other.
+                   This label still reads identically to the object attribute
+                   above; qualifying it needs a new i18n key, which is reported
+                   rather than added here. */
+                <AttributeRowShell
                   key={attribute.id}
-                  className="group grid grid-cols-[minmax(5rem,0.7fr)_minmax(0,1.3fr)] items-center gap-2"
-                >
-                  <div className="flex min-w-0 items-start gap-1">
-                    {/* An entry attribute is the list's own workflow value, not
-                        the record's — an opportunity's `Stage` and a pipeline's
-                        `Stage` are different fields, and moving one does not
-                        move the other. This label still reads identically to
-                        the object attribute in the left panel; qualifying it
-                        needs a new i18n key, which is reported rather than
-                        added here. */}
-                    <span className="min-w-0 text-xs text-muted-foreground">
-                      {attribute.label}
-                    </span>
+                  type={attribute.attributeType}
+                  label={attribute.label}
+                  title={attribute.description ?? attribute.label}
+                  affordance={
                     <FieldHistoryButton
                       recordId={recordId}
                       entryId={entry.id}
                       attribute={entryAttributeAsEditable(attribute)}
                     />
-                  </div>
+                  }
+                >
                   <FieldEditor
                     attribute={entryAttributeAsEditable(attribute)}
                     value={entry.values[attribute.apiSlug]}
@@ -155,10 +151,10 @@ function ListCard({
                       onEntryCommit(entry.id, attribute, value)
                     }
                   />
-                </div>
+                </AttributeRowShell>
               ))
             ) : (
-              <p className="text-xs text-muted-foreground">
+              <p className="px-2 py-1 text-xs text-content-tertiary">
                 {t("record.listNoAttributes")}
               </p>
             )}

package/corpus/templates/crm/app/components/crm/record/RecordTabs.tsx

@@ -16,6 +16,7 @@ import {
 } from "@tabler/icons-react";
 import { Link } from "react-router";
 
+import { overlayProps } from "@/components/crm/shared/ui-tokens";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
@@ -45,7 +46,7 @@ export function RecordTabs({
     <Tabs
       value={tab}
       onValueChange={(next) => onTabChange(next as RecordTab)}
-      className="flex min-h-full flex-col p-5 sm:p-6"
+      className="flex flex-col p-5 sm:p-6"
     >
       <TabsList className="h-9 self-start bg-muted/70">
         <TabsTrigger value="activity" className="gap-1.5">
@@ -73,16 +74,16 @@ export function RecordTabs({
             description={t("record.activityNotIngestedDescription")}
           />
         ) : (
-          <div className="divide-y divide-border rounded-lg border border-border/70 bg-card">
+          <div className="divide-y divide-hairline rounded-card border border-hairline bg-card">
             {activity.items.map((item) => (
               <div key={item.id} className="px-4 py-3">
                 <p className="text-sm font-medium">{item.title}</p>
                 {item.summary ? (
-                  <p className="mt-1 text-sm text-muted-foreground">
+                  <p className="mt-1 text-sm text-content-secondary">
                     {item.summary}
                   </p>
                 ) : null}
-                <p className="mt-2 text-xs text-muted-foreground">
+                <p className="mt-2 text-xs text-content-secondary">
                   {[
                     item.actor,
                     item.occurredAt ? formatDate(item.occurredAt) : undefined,
@@ -104,13 +105,13 @@ export function RecordTabs({
       </TabsContent>
 
       <TabsContent value="tasks" className="mt-4 max-w-2xl">
-        <div className="divide-y divide-border rounded-lg border border-border/70 bg-card">
+        <div className="divide-y divide-hairline rounded-card border border-hairline bg-card">
           {tasks.length ? (
             tasks.map((task) => (
               <div key={task.id} className="flex items-center gap-3 px-4 py-3">
                 <div className="min-w-0 flex-1">
                   <p className="text-sm font-medium">{task.title}</p>
-                  <p className="mt-0.5 text-xs text-muted-foreground">
+                  <p className="mt-0.5 text-xs text-content-secondary">
                     {task.dueAt
                       ? t("record.taskDue", { when: formatDate(task.dueAt) })
                       : task.status}
@@ -132,7 +133,7 @@ export function RecordTabs({
               </div>
             ))
           ) : (
-            <p className="px-4 py-8 text-center text-sm text-muted-foreground">
+            <p className="px-4 py-8 text-center text-sm text-content-secondary">
               {t("record.tasksEmpty")}
             </p>
           )}
@@ -140,19 +141,21 @@ export function RecordTabs({
       </TabsContent>
 
       <TabsContent value="related" className="mt-4 max-w-2xl">
-        <div className="divide-y divide-border rounded-lg border border-border/70 bg-card">
+        <div className="divide-y divide-hairline rounded-card border border-hairline bg-card">
           {record.relatedRecords?.length ? (
             record.relatedRecords.map((related) => (
               <Link
                 key={`${related.id}:${related.relationshipType}`}
                 to={`/records/${encodeURIComponent(related.id)}`}
-                className="flex items-center gap-3 px-4 py-3 hover:bg-muted/50"
+                {...overlayProps({
+                  className: "flex items-center gap-3 px-4 py-3",
+                })}
               >
                 <div className="min-w-0 flex-1">
                   <p className="truncate text-sm font-medium">
                     {related.displayName}
                   </p>
-                  <p className="mt-0.5 truncate text-xs text-muted-foreground">
+                  <p className="mt-0.5 truncate text-xs text-content-secondary">
                     {[
                       related.relationshipLabel ?? related.relationshipType,
                       related.subtitle,
@@ -167,7 +170,7 @@ export function RecordTabs({
               </Link>
             ))
           ) : (
-            <p className="px-4 py-8 text-center text-sm text-muted-foreground">
+            <p className="px-4 py-8 text-center text-sm text-content-secondary">
               {t("record.relatedEmpty")}
             </p>
           )}
@@ -185,9 +188,9 @@ function ComingSoon({
   description: string;
 }) {
   return (
-    <div className="rounded-lg border border-dashed border-border/70 bg-card px-5 py-8 text-center">
+    <div className="rounded-card border border-dashed border-hairline bg-card px-5 py-8 text-center">
       <p className="text-sm font-medium">{title}</p>
-      <p className="mx-auto mt-1.5 max-w-md text-sm leading-6 text-muted-foreground">
+      <p className="mx-auto mt-1.5 max-w-md text-sm leading-6 text-content-secondary">
         {description}
       </p>
     </div>

package/corpus/templates/crm/app/components/crm/record/attribute-row.tsx

@@ -0,0 +1,108 @@
+/**
+ * The label/value row shared by the record's object attributes and by a list
+ * entry's own attributes. One shell, so a pipeline value and a record value
+ * cannot drift into looking like two different products.
+ *
+ * Geometry: a 30%/1fr split, a 20px icon box with a 14px glyph at a 7px gap,
+ * and a hairline under every row but the last.
+ */
+
+import {
+  IconActivity,
+  IconAlignLeft,
+  IconCalendar,
+  IconCircleDot,
+  IconClock,
+  IconCurrencyDollar,
+  IconHash,
+  IconId,
+  IconLink,
+  IconMail,
+  IconMapPin,
+  IconPhone,
+  IconSquareCheck,
+  IconStar,
+  IconTag,
+  IconUser,
+  IconWorld,
+} from "@tabler/icons-react";
+
+import { overlayProps } from "@/components/crm/shared/ui-tokens";
+
+import type { CrmAttributeType } from "../../../../shared/crm-attributes";
+
+const TYPE_ICONS: Record<CrmAttributeType, typeof IconAlignLeft> = {
+  text: IconAlignLeft,
+  number: IconHash,
+  checkbox: IconSquareCheck,
+  currency: IconCurrencyDollar,
+  date: IconCalendar,
+  timestamp: IconClock,
+  rating: IconStar,
+  status: IconCircleDot,
+  select: IconTag,
+  "record-reference": IconLink,
+  "actor-reference": IconUser,
+  location: IconMapPin,
+  domain: IconWorld,
+  "email-address": IconMail,
+  "phone-number": IconPhone,
+  interaction: IconActivity,
+  "personal-name": IconId,
+};
+
+/** Section headings sit at body size in the secondary content color — the same
+ *  relationship the grid's column headers use. Small uppercase micro-labels are
+ *  the tell we are moving away from. */
+export const PANEL_SECTION_HEADING =
+  "text-sm font-medium text-content-secondary";
+
+export function AttributeTypeIcon({ type }: { type: CrmAttributeType }) {
+  const Icon = TYPE_ICONS[type] ?? IconAlignLeft;
+  return (
+    <span
+      aria-hidden
+      className="grid size-5 shrink-0 place-items-center text-content-tertiary"
+    >
+      <Icon className="size-3.5" />
+    </span>
+  );
+}
+
+/**
+ * `min-h-9` rather than a fixed 36px: a long attribute name ("Desired Cadence
+ * Days") in a 30% column has to go somewhere, and truncating it hides the one
+ * piece of text the row exists to identify. The row grows; it never clips.
+ */
+export function AttributeRowShell({
+  type,
+  label,
+  title,
+  affordance,
+  children,
+}: {
+  type: CrmAttributeType;
+  label: string;
+  title?: string;
+  affordance?: React.ReactNode;
+  children: React.ReactNode;
+}) {
+  return (
+    <div
+      {...overlayProps({
+        className:
+          "group grid min-h-9 grid-cols-[30%_1fr] items-center gap-2 rounded-card py-1 pl-[7px] pr-3 [&:not(:last-child)]:border-b [&:not(:last-child)]:border-hairline",
+      })}
+      title={title}
+    >
+      <div className="flex min-w-0 items-center gap-[7px]">
+        <AttributeTypeIcon type={type} />
+        <span className="min-w-0 break-words text-sm text-content-secondary">
+          {label}
+        </span>
+        {affordance}
+      </div>
+      <div className="min-w-0 text-sm">{children}</div>
+    </div>
+  );
+}