fix(web): preserve readable conversation width (CL-12053)

apps/web/src/pages/workspace/artifact-pane.tsx

@@ -221,8 +221,8 @@ const flowRank = (kind: string) => {
   return rank === -1 ? FLOW.length : rank;
 };
 
-// The document may take most of the row; the conversation folds away entirely when it needs all of it.
-const CONVERSATION_MIN_PX = 240;
+// Keep messages, approval cards and the composer readable beside a wide preview.
+const CONVERSATION_MIN_PX = 400;
 const DOCUMENT_MIN_PX = 360;
 
 function documentStatus(item: Deliverable): string {
@@ -406,7 +406,7 @@ export function ArtifactPane({
     });
     choose(kind);
   };
-  const width = useDocumentPaneWidth();
+  const width = useDocumentPaneWidth(projectId);
   const seen = useSeenVersions();
   const tipsGroup = useTipsGroup();
   const shown =
@@ -464,7 +464,9 @@ export function ArtifactPane({
       className="workspace-artifacts"
       aria-label="Artifacts"
       width={width}
-      onWidthChange={writeDocumentPaneWidth}
+      onWidthChange={(nextWidth) =>
+        writeDocumentPaneWidth(projectId, nextWidth)
+      }
       minWidth={DOCUMENT_MIN_PX}
       mainMinWidth={CONVERSATION_MIN_PX}
     >

apps/web/src/pages/workspace/document-pane-width.ts

@@ -1,21 +1,32 @@
-/** The split between conversation and document, kept in this browser. */
+/** The split between conversation and document, kept per project in this browser. */
 import {
   useStoredPreference,
   writeStoredPreference,
 } from "../../stored-preference.ts";
 
-const WIDTH_KEY = "builder-document-pane-width";
+// Do not inherit the legacy global width: it may come from a wide app preview.
+const widthKey = (projectId: string | undefined) =>
+  `builder-document-pane-width:${projectId}`;
 const DEFAULT = "";
 
 const parseWidth = (raw: string): string | null =>
   /^\d+$/.test(raw) ? raw : null;
 
 /** The chosen width in px, or `null` for the pane's default. */
-export function useDocumentPaneWidth(): number | null {
-  const raw = useStoredPreference(WIDTH_KEY, parseWidth, DEFAULT);
-  return raw === DEFAULT ? null : Number(raw);
+export function useDocumentPaneWidth(
+  projectId: string | undefined,
+): number | null {
+  const raw = useStoredPreference(widthKey(projectId), parseWidth, DEFAULT);
+  return projectId === undefined || raw === DEFAULT ? null : Number(raw);
 }
 
-export function writeDocumentPaneWidth(width: number | null): void {
-  writeStoredPreference(WIDTH_KEY, width === null ? DEFAULT : String(width));
+export function writeDocumentPaneWidth(
+  projectId: string | undefined,
+  width: number | null,
+): void {
+  if (projectId === undefined) return;
+  writeStoredPreference(
+    widthKey(projectId),
+    width === null ? DEFAULT : String(width),
+  );
 }