@agent-native/core 0.124.0 → 0.124.2

package/corpus/templates/crm/actions/create-crm-list.ts

@@ -4,17 +4,23 @@ import { and, eq } from "drizzle-orm";
 import { z } from "zod";
 
 import { getDb, schema } from "../server/db/index.js";
+import {
+  legacyValueTypeFor,
+  type CrmAttributeType,
+} from "../shared/crm-attributes.js";
 import { requireCrmScope } from "./_crm-action-utils.js";
 import {
   CrmListError,
   crmApiSlug,
+  loadCrmObjectAttributes,
   uniqueCrmListSlug,
+  type CrmObjectAttribute,
 } from "./_crm-list-utils.js";
 
 /**
- * A new list is useless without somewhere to move entries to, so it is seeded
- * with a `status` attribute. It lives on the list, not on the record: two
- * entries for the same account can sit in different stages.
+ * Stage options for a list whose parent object declares no status attribute to
+ * copy. A board with no options has no columns at all, and a status write with
+ * no options is a 422, so this is the floor rather than an empty stage.
  */
 const DEFAULT_STAGE_OPTIONS = [
   { value: "new", title: "New" },
@@ -23,6 +29,30 @@ const DEFAULT_STAGE_OPTIONS = [
   { value: "lost", title: "Lost" },
 ] as const;
 
+/** Currency config for a seeded amount when the parent object has no currency
+ * attribute to copy one from. Matches the native adapter's own default. */
+const DEFAULT_CURRENCY_CONFIG = JSON.stringify({ currency: { code: "USD" } });
+
+interface SeedOption {
+  value: string;
+  title: string;
+  color: string | null;
+  position: number;
+  targetDays: number | null;
+  celebrate: boolean;
+}
+
+interface ListAttributeSeed {
+  id: string;
+  apiSlug: string;
+  label: string;
+  description: string;
+  attributeType: CrmAttributeType;
+  configJson: string;
+  position: number;
+  options: SeedOption[];
+}
+
 async function resolveConnectionId(
   db: ReturnType<typeof getDb>,
   connectionId: string | undefined,
@@ -59,9 +89,54 @@ async function resolveConnectionId(
   return rows[0]!.id;
 }
 
+/** The live options of the object's status attribute, in their own order, so a
+ * seeded board's columns read like the object's stages instead of a generic
+ * vocabulary the records never use. */
+async function loadSourceOptions(
+  db: ReturnType<typeof getDb>,
+  attributeId: string,
+): Promise<SeedOption[]> {
+  const rows = await db
+    .select({
+      value: schema.crmAttributeOptions.value,
+      title: schema.crmAttributeOptions.title,
+      color: schema.crmAttributeOptions.color,
+      position: schema.crmAttributeOptions.position,
+      targetDays: schema.crmAttributeOptions.targetDays,
+      celebrate: schema.crmAttributeOptions.celebrate,
+    })
+    .from(schema.crmAttributeOptions)
+    .where(
+      and(
+        eq(schema.crmAttributeOptions.attributeId, attributeId),
+        eq(schema.crmAttributeOptions.archived, false),
+        accessFilter(
+          schema.crmAttributeOptions,
+          schema.crmAttributeOptionShares,
+        ),
+      ),
+    );
+  return rows.sort(
+    (a, b) => a.position - b.position || a.value.localeCompare(b.value),
+  );
+}
+
+/** Says what a seeded attribute is, in the one place a user sees it: the
+ * attribute's own description. The initial copy is stated as a copy so nobody
+ * reads a board as live-linked to its records. */
+function seedDescription(
+  listName: string,
+  objectType: string,
+  source: CrmObjectAttribute | null,
+): string {
+  return source
+    ? `The list "${listName}" owns this value. Each entry starts from the ${objectType} record's ${source.label} when the record is added, and changes independently after that — editing it never writes the record.`
+    : `The list "${listName}" owns this value. It starts empty and is never written back to the ${objectType} record.`;
+}
+
 export default defineAction({
   description:
-    "Create a CRM list — a workflow overlay over one object type, with its own entry attributes. Lists and their entries are local-authoritative on every backend, including HubSpot and Salesforce, so a pipeline never needs a provider write. Seeds a Stage attribute unless seedStageAttribute is false.",
+    "Create a CRM list — a workflow overlay over one object type, with its own entry attributes. Lists and their entries are local-authoritative on every backend, including HubSpot and Salesforce, so a pipeline never needs a provider write. Unless seedAttributes is false, the list is seeded with its own Stage (status, with the parent object's stage options when it has any), an amount (currency), and the parent object's date attribute, so a new board has columns and a summable total immediately. A seeded attribute is a COPY of the object's shape, not a link to it: each entry's first value is copied from the record once when the record is added and never re-synced.",
   schema: z.object({
     connectionId: z.string().trim().min(1).max(128).optional(),
     name: z.string().trim().min(1).max(120),
@@ -75,7 +150,12 @@ export default defineAction({
       ),
     description: z.string().trim().max(500).optional(),
     position: z.number().int().min(0).max(100_000).optional(),
-    seedStageAttribute: z.boolean().default(true),
+    seedAttributes: z
+      .boolean()
+      .default(true)
+      .describe(
+        "Seed the list's own stage, amount, and date attributes from the parent object. False creates a list with no attributes at all — its board has no columns until you add a status attribute.",
+      ),
   }),
   audit: {
     target: (_args, result) => {
@@ -107,9 +187,94 @@ export default defineAction({
     const listId = crypto.randomUUID();
     const now = new Date().toISOString();
 
-    const stageAttributeId = args.seedStageAttribute
-      ? crypto.randomUUID()
-      : null;
+    const sources = args.seedAttributes
+      ? await loadCrmObjectAttributes(db, connectionId, args.parentObjectType)
+      : [];
+    const sourceOf = (type: CrmAttributeType): CrmObjectAttribute | null =>
+      sources.find((source) => source.attributeType === type) ?? null;
+    const statusSource = sourceOf("status");
+    const currencySource = sourceOf("currency");
+    const dateSource = sourceOf("date");
+
+    const stageOptions = statusSource
+      ? await loadSourceOptions(db, statusSource.id)
+      : [];
+
+    const seeds: ListAttributeSeed[] = args.seedAttributes
+      ? [
+          {
+            id: crypto.randomUUID(),
+            // The slug follows the object's attribute so an entry's first value
+            // has an unambiguous source; `stage` is the fallback name.
+            apiSlug: statusSource?.apiSlug ?? "stage",
+            // Qualified by the list: an opportunity's own Stage and this
+            // pipeline's Stage are different fields that a bare "Stage" on both
+            // makes indistinguishable in the record panel.
+            label: `${args.name} Stage`,
+            description: seedDescription(
+              args.name,
+              args.parentObjectType,
+              statusSource,
+            ),
+            attributeType: "status",
+            configJson: statusSource?.configJson ?? "{}",
+            position: 0,
+            options: stageOptions.length
+              ? stageOptions
+              : DEFAULT_STAGE_OPTIONS.map((option, index) => ({
+                  value: option.value,
+                  title: option.title,
+                  color: null,
+                  position: index,
+                  targetDays: null,
+                  celebrate: "celebrate" in option ? option.celebrate : false,
+                })),
+          },
+          {
+            id: crypto.randomUUID(),
+            apiSlug: currencySource?.apiSlug ?? "amount",
+            label: currencySource?.label ?? "Amount",
+            description: seedDescription(
+              args.name,
+              args.parentObjectType,
+              currencySource,
+            ),
+            attributeType: "currency",
+            configJson: currencySource?.configJson ?? DEFAULT_CURRENCY_CONFIG,
+            position: 1,
+            options: [],
+          },
+          ...(dateSource
+            ? [
+                {
+                  id: crypto.randomUUID(),
+                  apiSlug: dateSource.apiSlug,
+                  label: dateSource.label,
+                  description: seedDescription(
+                    args.name,
+                    args.parentObjectType,
+                    dateSource,
+                  ),
+                  attributeType: "date" as const,
+                  configJson: dateSource.configJson,
+                  position: 2,
+                  options: [],
+                },
+              ]
+            : []),
+        ]
+      : [];
+
+    // `(connection_id, object_type, field_name)` is unique and `object_type`
+    // mirrors the list id here, so two seeds may never claim one slug.
+    const claimed = new Set<string>();
+    const attributes = seeds.filter((seed) => {
+      if (claimed.has(seed.apiSlug)) return false;
+      claimed.add(seed.apiSlug);
+      return true;
+    });
+    const stageAttributeId =
+      attributes.find((seed) => seed.attributeType === "status")?.id ?? null;
 
     await db.transaction(async (tx) => {
       await tx.insert(schema.crmLists).values({
@@ -128,52 +293,60 @@ export default defineAction({
         updatedAt: now,
       });
 
-      if (!stageAttributeId) return;
+      if (!attributes.length) return;
 
-      await tx.insert(schema.crmFieldPolicies).values({
-        id: stageAttributeId,
-        connectionId,
-        // `object_type` mirrors `target_id` for list attributes so the legacy
-        // (connection_id, object_type, field_name) unique index keeps working.
-        objectType: listId,
-        fieldName: "stage",
-        label: "Stage",
-        valueType: "enum",
-        storagePolicy: "local-authoritative",
-        sensitive: false,
-        readable: true,
-        createable: true,
-        updateable: true,
-        required: false,
-        attributeType: "status",
-        target: "list",
-        targetId: listId,
-        apiSlug: "stage",
-        multi: false,
-        authority: "local-authoritative",
-        historyTracked: true,
-        uniqueValue: false,
-        archived: false,
-        position: 0,
-        ...ownership,
-        createdAt: now,
-        updatedAt: now,
-      });
+      await tx.insert(schema.crmFieldPolicies).values(
+        attributes.map((seed) => ({
+          id: seed.id,
+          connectionId,
+          // `object_type` mirrors `target_id` for list attributes so the legacy
+          // (connection_id, object_type, field_name) unique index keeps working.
+          objectType: listId,
+          fieldName: seed.apiSlug,
+          label: seed.label,
+          description: seed.description,
+          valueType: legacyValueTypeFor(seed.attributeType, false),
+          storagePolicy: "local-authoritative" as const,
+          sensitive: false,
+          readable: true,
+          createable: true,
+          updateable: true,
+          required: false,
+          attributeType: seed.attributeType,
+          target: "list" as const,
+          targetId: listId,
+          apiSlug: seed.apiSlug,
+          configJson: seed.configJson,
+          multi: false,
+          authority: "local-authoritative" as const,
+          historyTracked: true,
+          uniqueValue: false,
+          archived: false,
+          position: seed.position,
+          ...ownership,
+          createdAt: now,
+          updatedAt: now,
+        })),
+      );
 
-      await tx.insert(schema.crmAttributeOptions).values(
-        DEFAULT_STAGE_OPTIONS.map((option, index) => ({
+      const options = attributes.flatMap((seed) =>
+        seed.options.map((option, index) => ({
           id: crypto.randomUUID(),
-          attributeId: stageAttributeId,
+          attributeId: seed.id,
           value: option.value,
           title: option.title,
+          color: option.color,
           position: index,
           archived: false,
-          celebrate: "celebrate" in option ? option.celebrate : false,
+          targetDays: option.targetDays,
+          celebrate: option.celebrate,
           ...ownership,
           createdAt: now,
           updatedAt: now,
         })),
       );
+      if (options.length)
+        await tx.insert(schema.crmAttributeOptions).values(options);
     });
 
     const [list] = await db
@@ -189,6 +362,19 @@ export default defineAction({
     if (!list) {
       throw new Error("CRM list could not be verified after creation.");
     }
-    return { ...list, stageAttributeId };
+    return {
+      ...list,
+      stageAttributeId,
+      seededAttributes: attributes.map((seed) => ({
+        id: seed.id,
+        apiSlug: seed.apiSlug,
+        label: seed.label,
+        attributeType: seed.attributeType,
+        /** The object attribute this one was copied from, if any. */
+        seededFrom:
+          sources.find((source) => source.apiSlug === seed.apiSlug)?.apiSlug ??
+          null,
+      })),
+    };
   },
 });

package/corpus/templates/crm/actions/create-crm-record.ts

@@ -104,11 +104,19 @@ export default defineAction({
       ).id;
     const objectType = kindToObjectType[args.kind];
     const remoteId = crypto.randomUUID();
-    const fields = {
-      ...(args.fields as Record<string, CrmValue> | undefined),
-      displayName: args.displayName,
-      ...(args.kind === "person" ? {} : { name: args.displayName }),
-    };
+    // accounts and opportunities already carry a `name` attribute, so only
+    // people (which have no `name` field) need a separate stored `displayName`
+    // attribute. Minting both would leave two attributes for one value.
+    const fields =
+      args.kind === "person"
+        ? {
+            ...(args.fields as Record<string, CrmValue> | undefined),
+            displayName: args.displayName,
+          }
+        : {
+            ...(args.fields as Record<string, CrmValue> | undefined),
+            name: args.displayName,
+          };
     const idempotencyKey = await scopedCrmIdempotencyKey({
       ...ownership,
       recordId: `${connectionId}:${objectType}`,

package/corpus/templates/crm/actions/update-crm-list-entry.ts

@@ -17,7 +17,7 @@ import { listEntryValuesSchema } from "./add-crm-record-to-list.js";
 
 export default defineAction({
   description:
-    "Set values on a CRM list entry's own attributes and/or reorder it. Moving an entry to another stage is exactly this call: the previous value's row is closed and a new one opened, so time-in-stage is derivable from the entry's own history. Entry attributes belong to the list, not to the record — this never writes to the record or to a provider.",
+    "Set values on a CRM list entry's own attributes and/or reorder it. Moving an entry to another stage is exactly this call: the previous value's row is closed and a new one opened, so time-in-stage is derivable from the entry's own history. Entry attributes belong to the list, not to the record — this never writes to the record or to a provider. An entry's values were copied from the record once, when it was added; they are not bound to it, so changing one here leaves the record's own value alone and a later record change does not reach the entry.",
   schema: z.object({
     entryId: z.string().trim().min(1).max(128),
     values: listEntryValuesSchema.optional(),

package/corpus/templates/crm/app/components/crm/RecordGrid.tsx

@@ -1,6 +1,11 @@
 import { callAction, useActionQuery } from "@agent-native/core/client/hooks";
 import { useT } from "@agent-native/core/client/i18n";
-import { IconSearch } from "@tabler/icons-react";
+import {
+  IconBuilding,
+  IconRoute,
+  IconSearch,
+  IconUser,
+} from "@tabler/icons-react";
 import {
   useInfiniteQuery,
   useQueries,
@@ -37,6 +42,17 @@ import {
 import { Input } from "@/components/ui/input";
 import type { CrmKind, CrmRecordSummary } from "@/lib/types";
 
+/** The glyph the grid's icon column shows until a row is hovered, and the
+ *  avatar shape that goes with it — round is a person, squircle is not. */
+const KIND_ICONS: Record<
+  CrmKind,
+  React.ComponentType<{ className?: string }>
+> = {
+  account: IconBuilding,
+  person: IconUser,
+  opportunity: IconRoute,
+};
+
 /** One `list-crm-record-values` request per chunk; the action caps at 200. */
 const VALUES_CHUNK = 100;
 /** Column resize fires per mouse move; only the settled layout is persisted. */
@@ -355,7 +371,9 @@ export function RecordGrid({ kind, emptyTitle }: RecordGridProps) {
     // shell's <main> is a scroll container, not a flex column, so `flex-1` here
     // would collapse. Switch to flex-1 if <main> ever becomes display:flex.
     <div className="flex h-[calc(100vh-9.5rem)] min-h-[320px] flex-col">
-      <div className="flex items-center gap-2 border-b border-border/70 px-5 py-2.5">
+      {/* No bottom rule here: the grid header carries its own top border, and
+          two adjacent lines read as a heavy divider. */}
+      <div className="flex items-center gap-2 px-5 py-2.5">
         <div className="flex w-full max-w-sm items-center gap-2 rounded-md border border-input bg-background px-3">
           <IconSearch className="size-4 shrink-0 text-muted-foreground" />
           <Input
@@ -381,6 +399,8 @@ export function RecordGrid({ kind, emptyTitle }: RecordGridProps) {
         onRetry={() => void list.refetch()}
         emptyTitle={emptyTitle}
         nameLabel={t(`grid.name.${kind}`)}
+        objectIcon={KIND_ICONS[kind]}
+        avatarShape={kind === "person" ? "person" : "company"}
         rowHref={(row) => `/records/${encodeURIComponent(row.id)}`}
         onCommitCell={commitCell}
         onAddToList={setAddToListIds}

package/corpus/templates/crm/app/components/crm/RecordWorkspace.tsx

@@ -1,6 +1,13 @@
 /**
- * The record page: attribute panel on the left, tabs in the middle, list
- * memberships and signals on the right.
+ * The record page: TWO panes. A resizable left pane carrying the record's
+ * typed attributes and its list memberships, and a main pane carrying the tabs
+ * and the signals section.
+ *
+ * There is deliberately no third pane. Lists and signals used to sit in one,
+ * which cost the main pane ~350px on every screen and gave the page three
+ * competing reading orders. Lists are label/value rows, so they belong beside
+ * the attributes; signals are an evidence feed, so they belong in the main
+ * pane. The app shell's own left sidebar and right agent rail are untouched.
  *
  * The page reads two actions on purpose. `get-crm-record` is the one that
  * verifies provider read-through permission for a mirrored record and carries
@@ -10,17 +17,25 @@
  */
 
 import { setClientAppState } from "@agent-native/core/client/application-state";
+import { ExtensionSlot } from "@agent-native/core/client/extensions";
 import {
   useActionMutation,
   useActionQuery,
 } from "@agent-native/core/client/hooks";
 import { useT } from "@agent-native/core/client/i18n";
 import { useQueryClient } from "@tanstack/react-query";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 
 import { CrmSignalsPanel } from "@/components/crm/CrmSignalsPanel";
+import { PANEL_SECTION_HEADING } from "@/components/crm/record/attribute-row";
 import { AttributePanel } from "@/components/crm/record/AttributePanel";
+import {
+  clampPanelPercent,
+  DEFAULT_RECORD_PANEL_PERCENT,
+  readPanelPercent,
+  writePanelPercent,
+} from "@/components/crm/record/panel-resize";
 import {
   applyEntryValue,
   applyFieldValue,
@@ -33,6 +48,10 @@ import {
 import { RecordHeader } from "@/components/crm/record/RecordHeader";
 import { RecordLists } from "@/components/crm/record/RecordLists";
 import { RecordTabs } from "@/components/crm/record/RecordTabs";
+import {
+  RECORD_MAIN_MIN_WIDTH,
+  RECORD_PANEL_MIN_WIDTH,
+} from "@/components/crm/shared/ui-tokens";
 import { LoadingRows, SetupEmptyState } from "@/components/crm/Surface";
 import { TAB_ID } from "@/lib/tab-id";
 import type { CrmRecordDetail } from "@/lib/types";
@@ -61,6 +80,29 @@ export function RecordWorkspace({
   const [tab, setTab] = useState<RecordTab>("activity");
   const queryClient = useQueryClient();
   const recordId = record?.id;
+  const regionRef = useRef<HTMLDivElement>(null);
+  const [panelPercent, setPanelPercent] = useState(readPanelPercent);
+  const [isResizing, setIsResizing] = useState(false);
+
+  function resizeTo(clientX: number) {
+    const region = regionRef.current;
+    if (!region) return;
+    const bounds = region.getBoundingClientRect();
+    if (bounds.width <= 0) return;
+    setPanelPercent(
+      clampPanelPercent(
+        ((clientX - bounds.left) / bounds.width) * 100,
+        bounds.width,
+      ),
+    );
+  }
+
+  function nudgePanel(deltaPercent: number) {
+    const width = regionRef.current?.getBoundingClientRect().width ?? 0;
+    const next = clampPanelPercent(panelPercent + deltaPercent, width);
+    setPanelPercent(next);
+    writePanelPercent(next);
+  }
 
   const pageParams = { recordId };
   const pageQuery = useActionQuery<CrmRecordPage>(
@@ -179,27 +221,100 @@ export function RecordWorkspace({
         recordUrlUnavailableReason={page?.recordUrlUnavailableReason ?? null}
         actions={actions}
       />
-      <div className="flex min-h-0 flex-1 flex-col lg:flex-row">
-        {/* A failed panel load is a visible error, not an empty attribute list:
-            "this record has no attributes" and "we could not read them" are
-            different answers and must not render the same. */}
-        {pageQuery.error ? (
-          <aside className="w-full border-border/70 p-5 lg:w-[22rem] lg:shrink-0 lg:border-r">
+      <div ref={regionRef} className="flex min-h-0 flex-1 flex-col lg:flex-row">
+        {/* The pane's floors live in CSS, not in the drag handler: a window
+            resize must not be able to strand the main pane under its minimum,
+            and only `min-width`/`max-width` hold at every width without a
+            resize observer. */}
+        <aside
+          style={
+            {
+              "--crm-record-panel": `${panelPercent}%`,
+              "--crm-record-panel-min": `${RECORD_PANEL_MIN_WIDTH}px`,
+              "--crm-record-panel-max": `min(60%, calc(100% - ${RECORD_MAIN_MIN_WIDTH}px))`,
+            } as React.CSSProperties
+          }
+          className="grid w-full content-start gap-5 border-hairline p-4 lg:w-[var(--crm-record-panel)] lg:min-w-[var(--crm-record-panel-min)] lg:max-w-[var(--crm-record-panel-max)] lg:shrink-0 lg:border-r"
+        >
+          {/* A failed panel load is a visible error, not an empty attribute
+              list: "this record has no attributes" and "we could not read them"
+              are different answers and must not render the same. */}
+          {pageQuery.error ? (
             <p className="text-sm text-destructive">
               {pageQuery.error instanceof Error
                 ? pageQuery.error.message
                 : t("record.panelLoadFailed")}
             </p>
-          </aside>
-        ) : page ? (
-          <AttributePanel page={page} onCommit={commitField} />
-        ) : (
-          <aside className="w-full border-border/70 p-5 lg:w-[22rem] lg:shrink-0 lg:border-r">
+          ) : page ? (
+            <>
+              <AttributePanel page={page} onCommit={commitField} />
+              <RecordLists page={page} onEntryCommit={commitEntryValue} />
+              {/* 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,
+                }}
+              />
+            </>
+          ) : (
             <LoadingRows rows={6} />
-          </aside>
-        )}
+          )}
+        </aside>
+
+        <div
+          role="separator"
+          aria-orientation="vertical"
+          aria-label={t("record.resizePanel")}
+          aria-valuenow={Math.round(panelPercent)}
+          tabIndex={0}
+          data-resizing={isResizing ? "true" : undefined}
+          className="group/resize relative hidden w-1.5 shrink-0 cursor-col-resize touch-none lg:block"
+          onPointerDown={(event) => {
+            event.preventDefault();
+            event.currentTarget.setPointerCapture(event.pointerId);
+            setIsResizing(true);
+          }}
+          onPointerMove={(event) => {
+            if (!isResizing) return;
+            resizeTo(event.clientX);
+          }}
+          onPointerUp={(event) => {
+            if (!isResizing) return;
+            event.currentTarget.releasePointerCapture(event.pointerId);
+            setIsResizing(false);
+            writePanelPercent(panelPercent);
+          }}
+          onDoubleClick={() => {
+            setPanelPercent(DEFAULT_RECORD_PANEL_PERCENT);
+            writePanelPercent(DEFAULT_RECORD_PANEL_PERCENT);
+          }}
+          onKeyDown={(event) => {
+            if (event.key === "ArrowLeft") nudgePanel(-2);
+            else if (event.key === "ArrowRight") nudgePanel(2);
+            else return;
+            event.preventDefault();
+          }}
+        >
+          {/* The 100ms delay before the handle appears is deliberate: without
+              it, crossing the divider on the way somewhere else flickers. */}
+          <span className="pointer-events-none absolute inset-y-0 left-1/2 w-0.5 -translate-x-1/2 rounded-[3px] bg-primary opacity-0 transition-opacity delay-100 duration-100 group-hover/resize:opacity-100 group-focus-visible/resize:opacity-100 group-data-[resizing=true]/resize:opacity-100" />
+        </div>
 
-        <div className="min-w-0 flex-1">
+        <div
+          style={
+            {
+              "--crm-record-main-min": `${RECORD_MAIN_MIN_WIDTH}px`,
+            } as React.CSSProperties
+          }
+          className="min-w-0 flex-1 lg:min-w-[var(--crm-record-main-min)]"
+        >
           <RecordTabs
             record={record}
             tab={tab}
@@ -207,23 +322,19 @@ export function RecordWorkspace({
             onCompleteTask={onCompleteTask}
             isCompletingTask={isCompletingTask}
           />
-        </div>
-
-        <div className="grid w-full content-start gap-6 border-border/70 p-5 lg:w-[22rem] lg:shrink-0 lg:border-l">
-          {page ? (
-            <RecordLists page={page} onEntryCommit={commitEntryValue} />
-          ) : null}
-          <section aria-labelledby="crm-record-signals">
-            <h2
-              id="crm-record-signals"
-              className="mb-2 text-xs font-medium uppercase tracking-[0.12em] text-muted-foreground"
-            >
+          <section
+            aria-labelledby="crm-record-signals"
+            className="border-t border-hairline p-5 sm:p-6"
+          >
+            <h2 id="crm-record-signals" className={PANEL_SECTION_HEADING}>
               {t("record.signals")}
             </h2>
-            <CrmSignalsPanel
-              recordId={record.id}
-              evidence={record.evidence ?? []}
-            />
+            <div className="mt-3 max-w-2xl">
+              <CrmSignalsPanel
+                recordId={record.id}
+                evidence={record.evidence ?? []}
+              />
+            </div>
           </section>
         </div>
       </div>