Dato Agent: give the inspector chat a usable starting width

dato-agent/src/components/AgentSurface.module.css

@@ -485,7 +485,7 @@
 
 .transcriptInner {
   box-sizing: border-box;
-  width: 100%;
+  width: min(100%, 760px);
   min-height: 100%;
   margin: 0 auto;
   padding: 14px 14px 18px;
@@ -1125,7 +1125,7 @@
 
 .composerInner {
   box-sizing: border-box;
-  width: 100%;
+  width: min(100%, 760px);
   margin: 0 auto;
   padding: 10px 14px 12px;
 }

dato-agent/src/entrypoints/InspectorEmptyPanel.module.css

@@ -10,7 +10,13 @@
 }
 
 .empty p {
+  max-width: 36ch;
   margin: 0;
   color: var(--color--ink-subtle);
   font-size: var(--font-size-m);
 }
+
+.empty p + p {
+  margin-top: var(--spacing-s);
+  font-size: var(--font-size-s);
+}

dato-agent/src/entrypoints/InspectorEmptyPanel.tsx

@@ -11,6 +11,10 @@ export default function InspectorEmptyPanel({ ctx }: Props) {
     <Canvas ctx={ctx} noAutoResizer>
       <div className={styles.empty}>
         <p>Records will open here</p>
+        <p>
+          Ask the agent to open a record and it appears in this pane. Drag the
+          divider to resize it.
+        </p>
       </div>
     </Canvas>
   );

dato-agent/src/lib/inspectorLayout.test.ts

@@ -3,22 +3,26 @@ import { inspectorRecordPaneWidth } from './inspectorLayout';
 
 describe('inspectorRecordPaneWidth', () => {
   it.each([
-    [1710, 1290],
-    [1440, 1020],
-    [1280, 860],
+    [1710, 770],
+    [1440, 648],
+    [1280, 576],
   ])(
-    'keeps a compact 420px agent beside a %ipx browser',
+    'gives the record pane about 45% of a %ipx browser',
     (browserWidth, expected) => {
       expect(inspectorRecordPaneWidth(browserWidth)).toBe(expected);
     },
   );
 
-  it('preserves the CMS minimum record width on a narrow browser', () => {
-    expect(inspectorRecordPaneWidth(800)).toBe(550);
+  it('keeps the chat usable when 45% would leave the record too narrow', () => {
+    expect(inspectorRecordPaneWidth(1200)).toBe(560);
+  });
+
+  it('splits a narrow browser evenly', () => {
+    expect(inspectorRecordPaneWidth(800)).toBe(400);
   });
 
   it('uses a desktop fallback when browser sizing is unavailable', () => {
-    expect(inspectorRecordPaneWidth(undefined)).toBe(1020);
-    expect(inspectorRecordPaneWidth(Number.NaN)).toBe(1020);
+    expect(inspectorRecordPaneWidth(undefined)).toBe(648);
+    expect(inspectorRecordPaneWidth(Number.NaN)).toBe(648);
   });
 });

dato-agent/src/lib/inspectorLayout.ts

@@ -1,6 +1,6 @@
 const FALLBACK_BROWSER_WIDTH = 1440;
-const MINIMUM_RECORD_PANE_WIDTH = 550;
-const TARGET_AGENT_PANE_WIDTH = 420;
+const MINIMUM_PANE_WIDTH = 560;
+const RECORD_PANE_SHARE = 0.45;
 
 export function inspectorRecordPaneWidth(
   browserOuterWidth: number | undefined,
@@ -12,8 +12,14 @@ export function inspectorRecordPaneWidth(
       ? browserOuterWidth
       : FALLBACK_BROWSER_WIDTH;
 
-  return Math.max(
-    MINIMUM_RECORD_PANE_WIDTH,
-    Math.round(browserWidth - TARGET_AGENT_PANE_WIDTH),
+  // A window too small for two usable panes is split evenly. Otherwise the
+  // record pane starts at about 45% and neither pane drops below the floor.
+  if (browserWidth < MINIMUM_PANE_WIDTH * 2) {
+    return Math.round(browserWidth / 2);
+  }
+
+  return Math.min(
+    Math.max(Math.round(browserWidth * RECORD_PANE_SHARE), MINIMUM_PANE_WIDTH),
+    browserWidth - MINIMUM_PANE_WIDTH,
   );
 }

dato-agent/src/main.tsx

@@ -57,9 +57,9 @@ if (!handledOAuthCallback) {
           placement: ['before', 'content'],
           pointsTo: {
             inspectorId: 'dato-agent',
-            // Inspector tabs render the CMS record in the right-hand secondary
-            // pane, so this value deliberately reserves most of the viewport
-            // for the record and leaves the agent as a compact companion.
+            // The inspector always shows a right-hand pane and only reads this
+            // width once. Start with a balanced split so the chat is usable
+            // before a record is opened; the editor can drag the divider.
             preferredWidth: inspectorRecordPaneWidth(window.outerWidth),
             initialInspectorPanel: {
               panelId: 'dato-agent-empty',