chore(release): prepare packaged 0.4.1 beta validation

.gitignore

@@ -28,6 +28,7 @@ e2e/reports/latest.md
 e2e/ui/.od-data
 e2e/ui/reports
 e2e/ui/test-results
+apps/web/playwright/
 
 # Legacy folder name from before the rename; keep ignored so existing
 # clones don't accidentally stage stale runtime data.

apps/packaged/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-design/packaged",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "private": true,
   "type": "module",
   "main": "./dist/index.mjs",

apps/web/src/components/FileViewer.tsx

@@ -2702,6 +2702,7 @@ function HtmlViewer({
           <button
             type="button"
             className={`viewer-toggle${boardMode ? ' active' : ''}`}
+            data-testid="board-mode-toggle"
             title={t('fileViewer.tweaks')}
             aria-pressed={boardMode}
             disabled={!boardAvailable}

apps/web/src/components/ProjectView.tsx

@@ -84,6 +84,7 @@ import { AvatarMenu } from './AvatarMenu';
 import { ChatPane } from './ChatPane';
 import { decideAutoOpenAfterWrite } from './auto-open-file';
 import { FileWorkspace } from './FileWorkspace';
+import { CenteredLoader } from './Loading';
 
 interface Props {
   project: Project;
@@ -1746,47 +1747,53 @@ export function ProjectView({
             `${chatPanelWidth}px ${SPLIT_RESIZE_HANDLE_WIDTH}px ${workspacePanelTrack}`,
         }}
       >
-        <ChatPane
-          // The conversation id is part of the key so switching conversations
-          // resets internal scroll/draft state inside ChatPane and ChatComposer.
-          key={activeConversationId ?? 'no-conv'}
-          messages={messages}
-          streaming={streaming}
-          error={error}
-          projectId={project.id}
-          projectFiles={projectFiles}
-          projectFileNames={projectFileNames}
-          onEnsureProject={handleEnsureProject}
-          previewComments={previewComments}
-          attachedComments={attachedComments}
-          onAttachComment={attachPreviewComment}
-          onDetachComment={detachPreviewComment}
-          onDeleteComment={(commentId) => void removePreviewComment(commentId)}
-          onSend={handleSend}
-          onStop={handleStop}
-          onRequestOpenFile={requestOpenFile}
-          initialDraft={initialDraft}
-          onSubmitForm={(text) => {
-            if (streaming) return;
-            void handleSend(text, [], []);
-          }}
-          onContinueRemainingTasks={handleContinueRemainingTasks}
-          onNewConversation={handleNewConversation}
-          conversations={conversations}
-          activeConversationId={activeConversationId}
-          onSelectConversation={handleSelectConversation}
-          onDeleteConversation={handleDeleteConversation}
-          onRenameConversation={handleRenameConversation}
-          onOpenSettings={onOpenSettings}
-          petConfig={config.pet}
-          onAdoptPet={onAdoptPetInline}
-          onTogglePet={onTogglePet}
-          onOpenPetSettings={onOpenPetSettings}
-          projectMetadata={project.metadata}
-          onProjectMetadataChange={(metadata) => {
-            onProjectChange({ ...project, metadata });
-          }}
-        />
+        {activeConversationId ? (
+          <ChatPane
+            // The conversation id is part of the key so switching conversations
+            // resets internal scroll/draft state inside ChatPane and ChatComposer.
+            key={activeConversationId}
+            messages={messages}
+            streaming={streaming}
+            error={error}
+            projectId={project.id}
+            projectFiles={projectFiles}
+            projectFileNames={projectFileNames}
+            onEnsureProject={handleEnsureProject}
+            previewComments={previewComments}
+            attachedComments={attachedComments}
+            onAttachComment={attachPreviewComment}
+            onDetachComment={detachPreviewComment}
+            onDeleteComment={(commentId) => void removePreviewComment(commentId)}
+            onSend={handleSend}
+            onStop={handleStop}
+            onRequestOpenFile={requestOpenFile}
+            initialDraft={initialDraft}
+            onSubmitForm={(text) => {
+              if (streaming) return;
+              void handleSend(text, [], []);
+            }}
+            onContinueRemainingTasks={handleContinueRemainingTasks}
+            onNewConversation={handleNewConversation}
+            conversations={conversations}
+            activeConversationId={activeConversationId}
+            onSelectConversation={handleSelectConversation}
+            onDeleteConversation={handleDeleteConversation}
+            onRenameConversation={handleRenameConversation}
+            onOpenSettings={onOpenSettings}
+            petConfig={config.pet}
+            onAdoptPet={onAdoptPetInline}
+            onTogglePet={onTogglePet}
+            onOpenPetSettings={onOpenPetSettings}
+            projectMetadata={project.metadata}
+            onProjectMetadataChange={(metadata) => {
+              onProjectChange({ ...project, metadata });
+            }}
+          />
+        ) : (
+          <div className="pane" data-testid="chat-pane-loading">
+            <CenteredLoader />
+          </div>
+        )}
         <div
           className="split-resize-handle"
           role="separator"

e2e/ui/app.test.ts

@@ -489,18 +489,19 @@ async function runCommentAttachmentFlow(
   await sendPrompt(page, entry.prompt);
   await expectArtifactVisible(page, entry);
 
+  await page.getByTestId('board-mode-toggle').click();
   await page.getByTestId('comment-mode-toggle').click();
   const frame = page.frameLocator('[data-testid="artifact-preview-frame"]');
   await frame.locator('[data-od-id="hero-title"]').click();
   await expect(page.getByTestId('comment-popover')).toBeVisible();
   await page.getByTestId('comment-popover-input').fill('Make the headline more specific.');
-  await page.getByTestId('comment-add-send').click();
+  await page.getByTestId('comment-popover').getByRole('button', { name: 'Save comment' }).click();
 
-  await expect(page.getByTestId('staged-comment-attachments')).toBeVisible();
-  await expect(page.getByTestId('staged-comment-attachments')).toContainText('hero-title');
-  await expect(page.getByTestId('staged-comment-attachments')).toContainText('Make the headline more specific.');
-  await expect(page.getByTestId('chat-composer-input')).toHaveValue('');
   await expect(page.getByTestId('comment-saved-marker-hero-title')).toBeVisible();
+  await expect(page.getByTestId('staged-comment-attachments')).toHaveCount(0);
+  await expect(page.getByTestId('chat-composer-input')).toHaveValue('');
+  await expect(page.getByTestId('chat-send')).toBeDisabled();
+  await page.getByTestId('comment-popover').getByRole('button', { name: 'Close' }).click();
 
   await frame.locator('[data-od-id="hero-copy"]').hover();
   await expect(page.getByTestId('comment-target-overlay')).toBeVisible();
@@ -513,9 +514,18 @@ async function runCommentAttachmentFlow(
 
   await page.getByRole('tab', { name: 'Comments' }).click();
   await expect(page.getByTestId('comments-panel')).toBeVisible();
-  await expect(page.getByTestId('comments-panel').getByRole('heading', { name: 'Attached to chat' })).toBeVisible();
   await expect(page.getByTestId('comments-panel').getByRole('heading', { name: 'Saved comments' })).toBeVisible();
+  await page.getByTestId('comments-panel')
+    .locator('[data-testid="comment-card-hero-title"]')
+    .getByRole('button', { name: 'Add' })
+    .click();
+  await page.getByRole('tab', { name: 'Chat' }).click();
+  await expect(page.getByTestId('staged-comment-attachments')).toBeVisible();
+  await expect(page.getByTestId('staged-comment-attachments')).toContainText('hero-title');
+  await expect(page.getByTestId('staged-comment-attachments')).toContainText('Make the headline more specific.');
 
+  await page.getByRole('tab', { name: 'Comments' }).click();
+  await expect(page.getByTestId('comments-panel').getByRole('heading', { name: 'Attached to chat' })).toBeVisible();
   await page.getByTestId('comments-panel')
     .locator('[data-testid="comment-card-hero-title"]')
     .getByRole('button', { name: 'Remove' })