fix: solve small pm chat ui issues

unwrap the pill
fix the fetching images in pm not auto download

agents-docs/LESSONS.md

@@ -25,6 +25,20 @@ Durable rules for AI agents working on this project. Read this file at session s
 
 ## Lessons
 
+### Disambiguate nested chat cards [chat] [ui]
+
+- **Trigger:** removing a visual treatment from chat history when a system message has both an outer row wrapper and an inner pill/card.
+- **Rule:** preserve the intended inner timeline pill unless the user explicitly targets it; render system messages outside the themed `chatMessageBubble` wrapper and keep `data-message-id` off direct child `div`s.
+- **Why:** PM call-started history should stay as a compact centered pill, while theme CSS such as `app-chat-message-item > div[data-message-id]` can turn the full-width row around it into the unnecessary card.
+- **Example:** In `chat-message-item.component.html`, keep `data-testid="chat-system-message"` with `rounded-full border bg-secondary/45`, put `appThemeNode="chatMessageBubble"` only on the non-system branch, and place `[attr.data-message-id]` on the nested pill instead of the system row wrapper.
+
+### Use terminal Vitest when the test tool hangs [testing]
+
+- **Trigger:** VS Code test execution stays at "Starting test run..." without producing Vitest output.
+- **Rule:** run the focused spec through the terminal with `cd toju-app && npx vitest run <spec-path>` and report the direct Vitest result.
+- **Why:** the test integration can hang before starting the runner, while the terminal Vitest command returns quickly and gives actionable failures.
+- **Example:** `cd toju-app && npx vitest run src/app/domains/game-activity/application/game-activity.service.spec.ts`.
+
 ### Do not add fake chrome around screenshots [website] [design]
 
 - **Trigger:** wrapping a real product screenshot in decorative titlebar/window chrome or placing oversized marketing headings beside copy without checking overlap.