fix(session-ui): align provider error icon with first line

packages/session-ui/component-tests/session-timeline.spec.ts

@@ -38,6 +38,27 @@ story("aligns the retry icon with the error label", async ({ mount }) => {
   expect(iconY).toBe(labelY)
 })
 
+story("aligns provider error icons with the first line at narrow widths", async ({ mount, page }) => {
+  await page.setViewportSize({ width: 540, height: 800 })
+  const timeline = await mount("current-session-timeline-rows--provider-errors")
+  const cards = timeline.locator('[data-kind="session-error-card"]')
+  await expect(cards).toHaveCount(2)
+
+  for (const card of await cards.all()) {
+    const icon = card.locator('[data-slot="icon-svg"]')
+    const text = card.locator("strong")
+    await expect(icon).toBeVisible()
+    await expect(icon).toHaveAttribute("height", "14")
+    await expect(text).toBeVisible()
+    const [iconY, textY] = await Promise.all([
+      icon.evaluate((element) => element.getBoundingClientRect().y),
+      text.evaluate((element) => element.getBoundingClientRect().y),
+    ])
+    expect(Math.abs(iconY - textY)).toBeLessThanOrEqual(1)
+  }
+  await expect(cards.nth(1)).toHaveCSS("line-height", "16px")
+})
+
 // Moved from packages/app/e2e/regression/session-timeline-context-state.spec.ts
 story("preserves a collapsed context group through count and status updates", async ({ mount }) => {
   const timeline = await mount("current-session-research-agents--agent-research", { args: { scenario: "exploration" } })

packages/session-ui/src/components/session-error.tsx

@@ -22,8 +22,8 @@ export function SessionErrorMessage(props: { message: string }) {
 export function SessionError(props: { message: string }) {
   return (
     <Card variant="error" class="error-card" data-kind="session-error-card">
-      <div class="flex w-full min-w-0 items-center gap-2">
-        <Icon name="outline-hexagonal-warning" class="shrink-0 text-v2-state-fg-danger" />
+      <div class="flex w-full min-w-0 items-start gap-2">
+        <Icon name="outline-hexagonal-warning" size="small" class="shrink-0 text-v2-state-fg-danger" />
         <div class="min-w-0">
           <SessionErrorMessage message={props.message} />
         </div>

packages/session-ui/src/timeline/timeline-row.stories.tsx

@@ -601,6 +601,47 @@ export const Conversation = {
   },
 }
 
+export const ProviderErrors = {
+  render: () => (
+    <CurrentSessionTimelineStory
+      title="Provider errors"
+      description="Short and wrapped provider errors in the production timeline."
+      document={{
+        sessionID: CURRENT_SESSION_ID,
+        messages: [
+          ...thinkingDocument.messages,
+          {
+            id: "msg_story_error_short",
+            type: "assistant",
+            agent: "build",
+            model: STORY_MODEL,
+            content: [],
+            error: { type: "provider.content-filter", message: "Provider blocked the response: Request declined." },
+            time: { created: STORY_TIME + 33_000, completed: STORY_TIME + 34_000 },
+          },
+          { id: "msg_story_error_retry", type: "user", text: "Try again.", time: { created: STORY_TIME + 34_500 } },
+          {
+            id: "msg_story_error_long",
+            type: "assistant",
+            agent: "build",
+            model: STORY_MODEL,
+            content: [],
+            error: {
+              type: "provider.content-filter",
+              message:
+                "Provider blocked the response: This request could not be completed. Check the provider's documentation for the applicable policy, then try a different approach or model.",
+            },
+            time: { created: STORY_TIME + 35_000, completed: STORY_TIME + 36_000 },
+          },
+        ],
+        status: { type: "idle" },
+        diffs: [],
+      }}
+      width="480px"
+    />
+  ),
+}
+
 export const InstructionsUpdatedSingle = {
   render: () => (
     <CurrentSessionTimelineStory