Refactor Dyad card components to use new DyadCardPrimitives (#2482)

e2e-tests/snapshots/approve.spec.ts_write-to-index-approve-check-preview-1.aria.yml

 - paragraph: tc=write-index
 - paragraph: OK, I'm going to do some writing now...
+- 'button "Index.tsx src/pages/Index.tsx Edit Summary: write-description"':
+  - img
+  - button "Edit":
+    - img
+  - img
+- paragraph: And it's done!
+- button "Copy":
+  - img
 - img
-- text: Index.tsx
+- text: test-model
 - img
-- text: "src/pages/Index.tsx Summary: write-description"
-- paragraph: And it's done!
+- text: less than a minute ago
+- button "Undo":
+  - img
 - button "Retry":
   - img
\ No newline at end of file

e2e-tests/snapshots/approve.spec.ts_write-to-index-approve-check-preview-2.aria.yml

 - paragraph: tc=write-index
 - paragraph: OK, I'm going to do some writing now...
-- img
-- text: Index.tsx
-- button "Edit":
+- 'button "Index.tsx src/pages/Index.tsx Edit Summary: write-description"':
   - img
-- img
-- text: "src/pages/Index.tsx Summary: write-description"
+  - text: ""
+  - button "Edit":
+    - img
+    - text: ""
+  - img
+  - text: ""
 - paragraph: And it's done!
 - button "Copy":
   - img
 - img
+- text: Approved
+- img
 - text: test-model
 - img
 - text: less than a minute ago
+- img
+- text: wrote 1 file(s)
 - button "Undo":
   - img
+  - text: ""
 - button "Retry":
-  - img
+  - img
\ No newline at end of file
+  - text: ""
\ No newline at end of file

e2e-tests/snapshots/attach_image.spec.ts_attach-image---chat---upload-to-codebase-1.aria.yml

 - paragraph: basic
-- img
-- text: file1.txt
-- img
-- text: file1.txt
+- button "file1.txt file1.txt Edit":
+  - img
+  - text: ""
+  - button "Edit":
+    - img
+    - text: ""
+  - img
 - paragraph: More EOM
+- button "Copy":
+  - img
 - img
 - text: Approved
+- img
+- text: test-model
+- img
+- text: less than a minute ago
+- img
+- text: wrote 1 file(s)
 - paragraph: "[[UPLOAD_IMAGE_TO_CODEBASE]]"
 - paragraph: "Attachments:"
 - paragraph: "File to upload to codebase: logo.png (file id: DYAD_ATTACHMENT_0)"
 - paragraph: Uploading image to codebase
-- img
-- text: file.png
-- img
-- text: "new/image/file.png Summary: Uploaded image to codebase"
+- 'button "file.png new/image/file.png Edit Summary: Uploaded image to codebase"':
+  - img
+  - text: ""
+  - button "Edit":
+    - img
+    - text: ""
+  - img
+  - text: ""
 - paragraph: "[[dyad-dump-path=*]]"
+- button "Copy":
+  - img
 - img
 - text: Approved
+- img
+- text: test-model
+- img
+- text: less than a minute ago
+- img
+- text: wrote 1 file(s)
 - button "Undo":
   - img
+  - text: ""
 - button "Retry":
-  - img
+  - img
\ No newline at end of file
+  - text: ""
\ No newline at end of file

e2e-tests/snapshots/attach_image.spec.ts_attach-image---chat-1.aria.yml

 - paragraph: basic
-- img
-- text: file1.txt
-- img
-- text: file1.txt
+- button "file1.txt file1.txt Edit"
 - paragraph: More EOM
 - img
 - text: Approved
@@ -14,4 +11,4 @@
 - img
 - text: Approved
 - button "Retry":
-  - img
+  - img
\ No newline at end of file

e2e-tests/snapshots/attach_image.spec.ts_attach-image-via-drag---chat-1.aria.yml

 - paragraph: basic
-- img
-- text: file1.txt
-- img
-- text: file1.txt
+- button "file1.txt file1.txt Edit"
 - paragraph: More EOM
 - img
 - text: Approved
@@ -14,4 +11,4 @@
 - img
 - text: Approved
 - button "Retry":
-  - img
+  - img
\ No newline at end of file

e2e-tests/snapshots/auto_approve.spec.ts_auto-approve-1.aria.yml

 - paragraph: tc=write-index
 - paragraph: OK, I'm going to do some writing now...
-- img
-- text: Index.tsx
-- img
-- text: "src/pages/Index.tsx Summary: write-description"
+- 'button "Index.tsx src/pages/Index.tsx Edit Summary: write-description"':
+  - img
+  - text: ""
+  - button "Edit":
+    - img
+    - text: ""
+  - img
+  - text: ""
 - paragraph: And it's done!
+- button "Copy":
+  - img
 - img
 - text: Approved
+- img
+- text: test-model
+- img
+- text: less than a minute ago
+- img
+- text: wrote 1 file(s)
 - button "Undo":
   - img
+  - text: ""
 - button "Retry":
-  - img
+  - img
\ No newline at end of file
+  - text: ""
\ No newline at end of file

e2e-tests/snapshots/auto_approve.spec.ts_auto-approve-2.aria.yml

 - region "Notifications (F8)":
   - list
 - region "Notifications alt+T"
-- text: Testing:write-index!
+- text: Testing:write-index!
\ No newline at end of file

e2e-tests/snapshots/chat_mode.spec.ts_chat-mode-selector---ask-mode-1.aria.yml

 - paragraph: /Generate an AI_RULES\.md file for this app\. Describe the tech stack in 5-\d+ bullet points and describe clear rules about what libraries to use for what\./
-- img
-- text: file1.txt
-- img
-- text: file1.txt
+- button "file1.txt file1.txt Edit"
 - paragraph: More EOM
 - img
 - text: Approved
 - paragraph: "[dump] hi"
 - paragraph: "[[dyad-dump-path=*]]"
 - button "Retry":
-  - img
+  - img
\ No newline at end of file

e2e-tests/snapshots/chat_mode.spec.ts_chat-mode-selector---default-build-mode-1.aria.yml

 - paragraph: /Generate an AI_RULES\.md file for this app\. Describe the tech stack in 5-\d+ bullet points and describe clear rules about what libraries to use for what\./
-- img
-- text: file1.txt
-- img
-- text: file1.txt
+- button "file1.txt file1.txt Edit"
 - paragraph: More EOM
 - img
 - text: Approved
@@ -11,4 +8,4 @@
 - img
 - text: Approved
 - button "Retry":
-  - img
+  - img
\ No newline at end of file

e2e-tests/snapshots/chat_mode.spec.ts_dyadwrite-edit-and-cancel-1.aria.yml

 - paragraph: Create a utility function in src/utils/helper.ts
-- img
-- text: file1.txt
-- button "Edit":
-  - img
-- img
-- text: file1.txt typescript
+- button "file1.txt file1.txt Cancel"
+- text: typescript
 - button "Copy":
   - img
 - paragraph: More EOM
@@ -17,4 +13,4 @@
 - button "Undo":
   - img
 - button "Retry":
-  - img
+  - img
\ No newline at end of file

e2e-tests/snapshots/chat_mode.spec.ts_dyadwrite-edit-and-save---basic-flow-1.aria.yml

 - paragraph: Create a simple React component in src/components/Hello.tsx
-- img
-- text: file1.txt
-- button "Cancel":
-  - img
-- img
-- text: file1.txt file1.txt
+- button "file1.txt file1.txt Cancel" [aria-expanded="true"]
 - button [disabled]:
   - img
 - img
@@ -21,4 +16,4 @@
 - button "Undo":
   - img
 - button "Retry":
-  - img
+  - img
\ No newline at end of file

e2e-tests/snapshots/context_compaction.spec.ts_local-agent---context-compaction-triggers-and-shows-summary-1.aria.yml

 - paragraph: /Generate an AI_RULES\.md file for this app\. Describe the tech stack in 5-\d+ bullet points and describe clear rules about what libraries to use for what\./
-- img
-- text: file1.txt
-- button "Edit":
-  - img
-- img
-- text: file1.txt
+- button "file1.txt file1.txt Edit"
 - paragraph: More EOM
 - button "Copy":
   - img
@@ -68,4 +63,4 @@
 - button "Undo":
   - img
 - button "Retry":
-  - img
+  - img
\ No newline at end of file

e2e-tests/snapshots/context_limit_banner.spec.ts_context-limit-banner-shows-running-out-when-near-context-limit-1.aria.yml

 - paragraph: Summarize from chat-id=1
-- img
-- text: file1.txt
-- button "Edit":
-  - img
-- img
-- text: file1.txt
+- button "file1.txt file1.txt Edit"
 - paragraph: More EOM
 - button "Copy":
   - img
@@ -15,4 +10,4 @@
 - button "Undo":
   - img
 - button "Retry":
-  - img
+  - img
\ No newline at end of file

e2e-tests/snapshots/fix_error.spec.ts_fix-all-errors-button-1.aria.yml

 - paragraph: tc=create-multiple-errors
 - paragraph: I will intentionally add multiple errors to test the Fix All Errors button
-- img
-- text: Index.tsx
-- button "Edit":
+- 'button "Index.tsx src/pages/Index.tsx Edit Summary: intentionally add first error"':
   - img
-- img
-- text: "src/pages/Index.tsx Summary: intentionally add first error"
-- img
-- text: Error First error in Index...
-- img
-- button "Copy":
+  - text: ""
+  - button "Edit":
+    - img
+    - text: ""
   - img
-- button "Fix with AI":
+  - text: ""
+- button "Error First error in Index Copy Fix with AI":
   - img
-- img
-- text: ErrorComponent.tsx
-- button "Edit":
+  - text: ""
   - img
-- img
-- text: "src/components/ErrorComponent.tsx Summary: intentionally add second error"
-- img
-- text: Error Second error in ErrorComponent...
-- img
-- button "Copy":
+  - button "Copy":
+    - img
+    - text: ""
+  - button "Fix with AI":
+    - img
+    - text: ""
+- 'button "ErrorComponent.tsx src/components/ErrorComponent.tsx Edit Summary: intentionally add second error"':
   - img
-- button "Fix with AI":
+  - text: ""
+  - button "Edit":
+    - img
+    - text: ""
   - img
-- img
-- text: helper.ts
-- button "Edit":
+  - text: ""
+- button "Error Second error in ErrorComponent Copy Fix with AI":
   - img
-- img
-- text: "src/utils/helper.ts Summary: intentionally add third error"
-- img
-- text: Error Third error in helper...
-- img
-- button "Copy":
+  - text: ""
+  - img
+  - button "Copy":
+    - img
+    - text: ""
+  - button "Fix with AI":
+    - img
+    - text: ""
+- 'button "helper.ts src/utils/helper.ts Edit Summary: intentionally add third error"':
+  - img
+  - text: ""
+  - button "Edit":
+    - img
+    - text: ""
   - img
-- button "Fix with AI":
+  - text: ""
+- button "Error Third error in helper Copy Fix with AI":
   - img
+  - text: ""
+  - img
+  - button "Copy":
+    - img
+    - text: ""
+  - button "Fix with AI":
+    - img
+    - text: ""
 - button "Fix All Errors (3)":
   - img
-- button:
+  - text: ""
+- button "Copy":
   - img
 - img
 - text: Approved
 - img
+- text: test-model
+- img
 - text: less than a minute ago
 - img
 - text: wrote 3 file(s)
@@ -54,22 +72,27 @@
   - listitem: First error in Index
   - listitem: Second error in ErrorComponent
   - listitem: Third error in helper
-- img
-- text: file1.txt
-- button "Edit":
+- button "file1.txt file1.txt Edit":
+  - img
+  - text: ""
+  - button "Edit":
+    - img
+    - text: ""
   - img
-- img
-- text: file1.txt
 - paragraph: More EOM
-- button:
+- button "Copy":
   - img
 - img
 - text: Approved
 - img
+- text: test-model
+- img
 - text: less than a minute ago
 - img
 - text: wrote 1 file(s)
 - button "Undo":
   - img
+  - text: ""
 - button "Retry":
-  - img
+  - img
\ No newline at end of file
+  - text: ""
\ No newline at end of file

e2e-tests/snapshots/fix_error.spec.ts_fix-error-with-AI-1.aria.yml

@@ -5,4 +5,4 @@
 - img
 - text: "Tip: Check if restarting the app fixes the error."
 - button "Fix error with AI":
-  - img
+  - img
\ No newline at end of file

e2e-tests/snapshots/fix_error.spec.ts_fix-error-with-AI-2.aria.yml

@@ -5,4 +5,4 @@
 - img
 - text: "Tip: Check if restarting the app fixes the error."
 - button "Fix error with AI":
-  - img
+  - img
\ No newline at end of file

e2e-tests/snapshots/fix_error.spec.ts_fix-error-with-AI-3.aria.yml

 - paragraph: tc=create-error
 - paragraph: I will intentionally add an error
-- img
-- text: Index.tsx
-- button "Edit":
+- 'button "Index.tsx src/pages/Index.tsx Edit Summary: intentionally add an error"':
   - img
-- img
-- text: "src/pages/Index.tsx Summary: intentionally add an error"
-- button:
+  - text: ""
+  - button "Edit":
+    - img
+    - text: ""
+  - img
+  - text: ""
+- button "Copy":
   - img
 - img
 - text: Approved
@@ -19,17 +21,18 @@
 - paragraph:
   - text: "Fix error: Error Line 6 error Stack trace: Index ("
   - link /http:\/\/localhost:\d+\/src\/pages\/Index\.tsx:6:6/:
-    - /url: /http:\/\/localhost:\d+\/src\/pages\/Index\.tsx:6:6/
+    - /url: http://localhost:53524/src/pages/Index.tsx:6:6
   - text: )
 - text: plaintext
 - code: Fixing the error...
-- img
-- text: Index.tsx
-- button "Edit":
+- button "Index.tsx src/pages/Index.tsx Edit":
   - img
-- img
-- text: src/pages/Index.tsx
-- button:
+  - text: ""
+  - button "Edit":
+    - img
+    - text: ""
+  - img
+- button "Copy":
   - img
 - img
 - text: Approved
@@ -41,5 +44,7 @@
 - text: wrote 1 file(s)
 - button "Undo":
   - img
+  - text: ""
 - button "Retry":
-  - img
+  - img
\ No newline at end of file
+  - text: ""
\ No newline at end of file

e2e-tests/snapshots/fix_error.spec.ts_fix-error-with-AI-4.aria.yml

-- region "Notifications (F8)":
-  - list
-- region "Notifications alt+T"
-- heading "No more errors!" [level=1]
-- link "Made with Dyad":
-  - /url: https://www.dyad.sh/
\ No newline at end of file

e2e-tests/snapshots/github-import.spec.ts_should-import-from-URL-1.aria.yml

 - paragraph: /Generate an AI_RULES\.md file for this app\. Describe the tech stack in 5-\d+ bullet points and describe clear rules about what libraries to use for what\./
-- img
-- text: file1.txt
-- button "Edit":
-  - img
-- img
-- text: file1.txt
+- button "file1.txt file1.txt Edit"
 - paragraph: More EOM
 - button:
   - img
 - img
 - text: less than a minute ago
 - button "Retry":
-  - img
+  - img
\ No newline at end of file

e2e-tests/snapshots/github-import.spec.ts_should-import-from-repository-list-1.aria.yml

 - paragraph: /Generate an AI_RULES\.md file for this app\. Describe the tech stack in 5-\d+ bullet points and describe clear rules about what libraries to use for what\./
-- img
-- text: file1.txt
-- button "Edit":
-  - img
-- img
-- text: file1.txt
+- button "file1.txt file1.txt Edit"
 - paragraph: More EOM
 - button:
   - img
 - img
 - text: less than a minute ago
 - button "Retry":
-  - img
+  - img
\ No newline at end of file

e2e-tests/snapshots/import.spec.ts_import-app-2.aria.yml

 - paragraph: /Generate an AI_RULES\.md file for this app\. Describe the tech stack in 5-\d+ bullet points and describe clear rules about what libraries to use for what\./
+- button "file1.txt file1.txt Edit":
+  - img
+  - text: ""
+  - button "Edit":
+    - img
+    - text: ""
+  - img
+- paragraph: More EOM
+- button "Copy":
+  - img
 - img
-- text: file1.txt
+- text: test-model
 - img
-- text: file1.txt
-- paragraph: More EOM
+- text: less than a minute ago
+- button "Undo":
+  - img
+  - text: ""
 - button "Retry":
-  - img
+  - img
\ No newline at end of file
+  - text: ""
\ No newline at end of file

e2e-tests/snapshots/lm_studio.spec.ts_send-message-to-LM-studio-1.aria.yml

 - paragraph: hi
+- button "file1.txt file1.txt Edit":
+  - img
+  - text: ""
+  - button "Edit":
+    - img
+    - text: ""
+  - img
+- paragraph: More EOM
+- button "Copy":
+  - img
 - img
-- text: file1.txt
+- text: lmstudio-model-1
 - img
-- text: file1.txt
-- paragraph: More EOM
+- text: less than a minute ago
+- button "Undo":
+  - img
+  - text: ""
 - button "Retry":
-  - img
+  - img
\ No newline at end of file
+  - text: ""
\ No newline at end of file

e2e-tests/snapshots/local_agent_advanced.spec.ts_local-agent---mcp-tool-call-1.aria.yml

 - paragraph: /Generate an AI_RULES\.md file for this app\. Describe the tech stack in 5-\d+ bullet points and describe clear rules about what libraries to use for what\./
-- img
-- text: file1.txt
-- button "Edit":
+- button "file1.txt file1.txt Edit":
+  - img
+  - text: ""
+  - button "Edit":
+    - img
+    - text: ""
   - img
-- img
-- text: file1.txt
 - paragraph: More EOM
 - button "Copy":
   - img
@@ -16,19 +17,23 @@
 - text: less than a minute ago
 - button "Copy Request ID":
   - img
+  - text: ""
 - paragraph: tc=local-agent/mcp-calculator
 - paragraph: I'll calculate the sum of 5 and 3 using the calculator.
-- img
-- text: Tool Call
-- img
-- text: testing-mcp-server calculator_add
-- img
-- text: "Error MCP tool 'testing-mcp-server__calculator_add' failed: keyValidator._parse is not a function..."
-- img
-- button "Copy":
+- button "Tool Call testing-mcp-server calculator_add":
+  - img
+  - text: ""
   - img
-- button "Fix with AI":
+- 'button "Error MCP tool ''testing-mcp-server__calculator_add'' failed: keyValidator._parse is not a function Copy Fix with AI"':
   - img
+  - text: ""
+  - img
+  - button "Copy":
+    - img
+    - text: ""
+  - button "Fix with AI":
+    - img
+    - text: ""
 - paragraph: The sum of 5 and 3 is 8. The calculation was performed successfully using the MCP calculator tool.
 - button "Copy":
   - img
@@ -38,7 +43,10 @@
 - text: less than a minute ago
 - button "Copy Request ID":
   - img
+  - text: ""
 - button "Undo":
   - img
+  - text: ""
 - button "Retry":
-  - img
+  - img
\ No newline at end of file
+  - text: ""
\ No newline at end of file

e2e-tests/snapshots/local_agent_ask.spec.ts_local-agent-ask-mode-1.aria.yml

 - paragraph: /Generate an AI_RULES\.md file for this app\. Describe the tech stack in 5-\d+ bullet points and describe clear rules about what libraries to use for what\./
-- img
-- text: file1.txt
-- button "Edit":
+- button "file1.txt file1.txt Edit":
+  - img
+  - text: ""
+  - button "Edit":
+    - img
+    - text: ""
   - img
-- img
-- text: file1.txt
 - paragraph: More EOM
 - button "Copy":
   - img
@@ -16,10 +17,11 @@
 - text: less than a minute ago
 - button "Copy Request ID":
   - img
+  - text: ""
 - paragraph: tc=local-agent/ask-read-file
 - paragraph: Let me read the file to explain its contents.
 - img
-- text: App.tsx Read src/App.tsx
+- text: Read src/App.tsx
 - paragraph: This is a simple React component that renders a div with the text 'Minimal imported app'. The component is exported as the default export.
 - button "Copy":
   - img
@@ -29,7 +31,10 @@
 - text: less than a minute ago
 - button "Copy Request ID":
   - img
+  - text: ""
 - button "Undo":
   - img
+  - text: ""
 - button "Retry":
-  - img
+  - img
\ No newline at end of file
+  - text: ""
\ No newline at end of file

e2e-tests/snapshots/local_agent_basic.spec.ts_local-agent---parallel-tool-calls-1.aria.yml

 - paragraph: /Generate an AI_RULES\.md file for this app\. Describe the tech stack in 5-\d+ bullet points and describe clear rules about what libraries to use for what\./
-- img
-- text: file1.txt
-- button "Edit":
+- button "file1.txt file1.txt Edit":
+  - img
+  - text: ""
+  - button "Edit":
+    - img
+    - text: ""
   - img
-- img
-- text: file1.txt
 - paragraph: More EOM
 - button "Copy":
   - img
@@ -16,20 +17,25 @@
 - text: less than a minute ago
 - button "Copy Request ID":
   - img
+  - text: ""
 - paragraph: tc=local-agent/parallel-tools
 - paragraph: I'll create two files for you in parallel.
-- img
-- text: math.ts
-- button "Edit":
+- 'button "math.ts src/utils/math.ts Edit Summary: Create math utilities"':
   - img
-- img
-- text: "src/utils/math.ts Summary: Create math utilities"
-- img
-- text: string.ts
-- button "Edit":
+  - text: ""
+  - button "Edit":
+    - img
+    - text: ""
   - img
-- img
-- text: "src/utils/string.ts Summary: Create string utilities"
+  - text: ""
+- 'button "string.ts src/utils/string.ts Edit Summary: Create string utilities"':
+  - img
+  - text: ""
+  - button "Edit":
+    - img
+    - text: ""
+  - img
+  - text: ""
 - paragraph: Task completed.
 - button "Copy":
   - img
@@ -39,7 +45,10 @@
 - text: less than a minute ago
 - button "Copy Request ID":
   - img
+  - text: ""
 - button "Undo":
   - img
+  - text: ""
 - button "Retry":
-  - img
+  - img
\ No newline at end of file
+  - text: ""
\ No newline at end of file

e2e-tests/snapshots/local_agent_basic.spec.ts_local-agent---read-then-edit-1.aria.yml

 - paragraph: /Generate an AI_RULES\.md file for this app\. Describe the tech stack in 5-\d+ bullet points and describe clear rules about what libraries to use for what\./
-- img
-- text: file1.txt
-- button "Edit":
+- button "file1.txt file1.txt Edit":
+  - img
+  - text: ""
+  - button "Edit":
+    - img
+    - text: ""
   - img
-- img
-- text: file1.txt
 - paragraph: More EOM
 - button "Copy":
   - img
@@ -16,15 +17,16 @@
 - text: less than a minute ago
 - button "Copy Request ID":
   - img
+  - text: ""
 - paragraph: tc=local-agent/read-then-edit
 - paragraph: Let me first read the current file contents to understand what we're working with.
 - img
-- text: App.tsx Read src/App.tsx
+- text: Read src/App.tsx
 - paragraph: Now I'll update the welcome message to say Hello World instead.
-- img
-- text: Turbo Edit App.tsx
-- img
-- text: src/App.tsx
+- button "App.tsx src/App.tsx Turbo Edit":
+  - img
+  - text: ""
+  - img
 - paragraph: Done! I've updated the title from 'Minimal imported app' to 'UPDATED imported app'. The change has been applied successfully.
 - button "Copy":
   - img
@@ -34,7 +36,10 @@
 - text: less than a minute ago
 - button "Copy Request ID":
   - img
+  - text: ""
 - button "Undo":
   - img
+  - text: ""
 - button "Retry":
-  - img
+  - img
\ No newline at end of file
+  - text: ""
\ No newline at end of file

e2e-tests/snapshots/local_agent_code_search.spec.ts_local-agent---code-search-1.aria.yml

 - paragraph: /Generate an AI_RULES\.md file for this app\. Describe the tech stack in 5-\d+ bullet points and describe clear rules about what libraries to use for what\./
-- img
-- text: file1.txt
-- button "Edit":
+- button "file1.txt file1.txt Edit":
+  - img
+  - text: ""
+  - button "Edit":
+    - img
+    - text: ""
   - img
-- img
-- text: file1.txt
 - paragraph: More EOM
 - button "Copy":
   - img
@@ -16,10 +17,12 @@
 - text: less than a minute ago
 - button "Copy Request ID":
   - img
+  - text: ""
 - paragraph: tc=local-agent/code-search
 - paragraph: I'll search for files related to React components in the codebase.
-- 'button "Code Search React component rendering Query: React component rendering Results: - .gitignore - index.html - package.json"':
+- button "Code Search React component rendering":
   - img
+  - text: ""
   - img
 - paragraph: I found the relevant files! The main React component is in src/App.tsx which handles the app rendering.
 - button "Copy":
@@ -30,7 +33,10 @@
 - text: less than a minute ago
 - button "Copy Request ID":
   - img
+  - text: ""
 - button "Undo":
   - img
+  - text: ""
 - button "Retry":
-  - img
+  - img
\ No newline at end of file
+  - text: ""
\ No newline at end of file

e2e-tests/snapshots/local_agent_consent.spec.ts_local-agent---add-dependency-consent-allow-once-1.aria.yml

 - paragraph: /Generate an AI_RULES\.md file for this app\. Describe the tech stack in 5-\d+ bullet points and describe clear rules about what libraries to use for what\./
-- img
-- text: file1.txt
-- button "Edit":
+- button "file1.txt file1.txt Edit":
+  - img
+  - text: ""
+  - button "Edit":
+    - img
+    - text: ""
   - img
-- img
-- text: file1.txt
 - paragraph: More EOM
 - button "Copy":
   - img
@@ -16,10 +17,11 @@
 - text: less than a minute ago
 - button "Copy Request ID":
   - img
+  - text: ""
 - paragraph: tc=local-agent/add-dependency
 - paragraph: I'll add a dependency to your project.
 - img
-- text: Do you want to install these packages? @dyad-sh/supabase-management-js Make sure these packages are what you want.
+- text: Add Packages Do you want to install these packages? @dyad-sh/supabase-management-js Make sure these packages are what you want.
 - paragraph: Dependency added done.
 - button "Copy":
   - img
@@ -29,7 +31,10 @@
 - text: less than a minute ago
 - button "Copy Request ID":
   - img
+  - text: ""
 - button "Undo":
   - img
+  - text: ""
 - button "Retry":
-  - img
+  - img
\ No newline at end of file
+  - text: ""
\ No newline at end of file

e2e-tests/snapshots/local_agent_consent.spec.ts_local-agent---add-dependency-consent-always-allow-1.aria.yml

 - paragraph: /Generate an AI_RULES\.md file for this app\. Describe the tech stack in 5-\d+ bullet points and describe clear rules about what libraries to use for what\./
-- img
-- text: file1.txt
-- button "Edit":
+- button "file1.txt file1.txt Edit":
+  - img
+  - text: ""
+  - button "Edit":
+    - img
+    - text: ""
   - img
-- img
-- text: file1.txt
 - paragraph: More EOM
 - button "Copy":
   - img
@@ -16,10 +17,11 @@
 - text: less than a minute ago
 - button "Copy Request ID":
   - img
+  - text: ""
 - paragraph: tc=local-agent/add-dependency
 - paragraph: I'll add a dependency to your project.
 - img
-- text: Do you want to install these packages? @dyad-sh/supabase-management-js Make sure these packages are what you want.
+- text: Add Packages Do you want to install these packages? @dyad-sh/supabase-management-js Make sure these packages are what you want.
 - paragraph: Dependency added done.
 - button "Copy":
   - img
@@ -29,7 +31,10 @@
 - text: less than a minute ago
 - button "Copy Request ID":
   - img
+  - text: ""
 - button "Undo":
   - img
+  - text: ""
 - button "Retry":
-  - img
+  - img
\ No newline at end of file
+  - text: ""
\ No newline at end of file

e2e-tests/snapshots/local_agent_consent.spec.ts_local-agent---add-dependency-consent-decline-1.aria.yml

 - paragraph: /Generate an AI_RULES\.md file for this app\. Describe the tech stack in 5-\d+ bullet points and describe clear rules about what libraries to use for what\./
-- img
-- text: file1.txt
-- button "Edit":
+- button "file1.txt file1.txt Edit":
+  - img
+  - text: ""
+  - button "Edit":
+    - img
+    - text: ""
   - img
-- img
-- text: file1.txt
 - paragraph: More EOM
 - button "Copy":
   - img
@@ -16,17 +17,21 @@
 - text: less than a minute ago
 - button "Copy Request ID":
   - img
+  - text: ""
 - paragraph: tc=local-agent/add-dependency
 - paragraph: I'll add a dependency to your project.
 - img
-- text: Do you want to install these packages? @dyad-sh/supabase-management-js Make sure these packages are what you want.
-- img
-- text: "Error Tool 'add_dependency' failed: User denied permission for add_dependency..."
-- img
-- button "Copy":
+- text: Add Packages Do you want to install these packages? @dyad-sh/supabase-management-js Make sure these packages are what you want.
+- 'button "Error Tool ''add_dependency'' failed: User denied permission for add_dependency Copy Fix with AI"':
   - img
-- button "Fix with AI":
+  - text: ""
   - img
+  - button "Copy":
+    - img
+    - text: ""
+  - button "Fix with AI":
+    - img
+    - text: ""
 - paragraph: Dependency added done.
 - button "Copy":
   - img
@@ -36,7 +41,10 @@
 - text: less than a minute ago
 - button "Copy Request ID":
   - img
+  - text: ""
 - button "Undo":
   - img
+  - text: ""
 - button "Retry":
-  - img
+  - img
\ No newline at end of file
+  - text: ""
\ No newline at end of file

e2e-tests/snapshots/local_agent_file_upload.spec.ts_local-agent---upload-file-to-codebase-1.aria.yml

 - paragraph: /Generate an AI_RULES\.md file for this app\. Describe the tech stack in 5-\d+ bullet points and describe clear rules about what libraries to use for what\./
-- img
-- text: file1.txt
-- button "Edit":
+- button "file1.txt file1.txt Edit":
+  - img
+  - text: ""
+  - button "Edit":
+    - img
+    - text: ""
   - img
-- img
-- text: file1.txt
 - paragraph: More EOM
 - button "Copy":
   - img
@@ -16,16 +17,19 @@
 - text: less than a minute ago
 - button "Copy Request ID":
   - img
+  - text: ""
 - paragraph: tc=local-agent/upload-to-codebase
 - paragraph: "Attachments:"
 - paragraph: "File to upload to codebase: logo.png (file id: DYAD_ATTACHMENT_0)"
 - paragraph: I'll upload your file to the codebase.
-- img
-- text: uploaded-file.png
-- button "Edit":
+- 'button "uploaded-file.png assets/uploaded-file.png Edit Summary: Upload file to codebase"':
   - img
-- img
-- text: "assets/uploaded-file.png Summary: Upload file to codebase"
+  - text: ""
+  - button "Edit":
+    - img
+    - text: ""
+  - img
+  - text: ""
 - paragraph: I've successfully uploaded your file to assets/uploaded-file.png in the codebase.
 - button "Copy":
   - img
@@ -35,7 +39,10 @@
 - text: less than a minute ago
 - button "Copy Request ID":
   - img
+  - text: ""
 - button "Undo":
   - img
+  - text: ""
 - button "Retry":
-  - img
+  - img
\ No newline at end of file
+  - text: ""
\ No newline at end of file

e2e-tests/snapshots/local_agent_grep.spec.ts_local-agent---grep-search-1.aria.yml

 - paragraph: /Generate an AI_RULES\.md file for this app\. Describe the tech stack in 5-\d+ bullet points and describe clear rules about what libraries to use for what\./
-- img
-- text: file1.txt
-- button "Edit":
+- button "file1.txt file1.txt Edit":
+  - img
+  - text: ""
+  - button "Edit":
+    - img
+    - text: ""
   - img
-- img
-- text: file1.txt
 - paragraph: More EOM
 - button "Copy":
   - img
@@ -16,25 +17,30 @@
 - text: less than a minute ago
 - button "Copy Request ID":
   - img
+  - text: ""
 - paragraph: tc=local-agent/grep-search
 - paragraph: I'll search for 'createRoot' in the codebase to find where the React app is initialized.
-- img
-- text: GREP"createRoot"(2 matches)
-- img
-- text: log
-- button "Copy":
+- 'button "GREP \"createRoot\" (2 matches) log Copy log src/main.tsx:1: import { createRoot } from \"react-dom/client\"; src/main.tsx:4: createRoot(document.getElementById(\"root\")!).render(<App />);" [expanded]':
   - img
-- text: log
-- code: "src/main.tsx:1: import { createRoot } from \"react-dom/client\"; src/main.tsx:4: createRoot(document.getElementById(\"root\")!).render(<App />);"
+  - text: ""
+  - img
+  - text: ""
+  - button "Copy":
+    - img
+    - text: ""
+  - text: ""
+  - code: "src/main.tsx:1: import { createRoot } from \"react-dom/client\"; src/main.tsx:4: createRoot(document.getElementById(\"root\")!).render(<App />);"
 - paragraph: Now I'll search specifically in .tsx files for 'App' to find component references.
-- img
-- text: GREP"App" in *.tsx(4 matches)
-- img
-- text: log
-- button "Copy":
+- 'button "GREP \"App\" in *.tsx (4 matches) log Copy log src/App.tsx:1: const App = () => <div>Minimal imported app</div>; src/App.tsx:3: export default App; src/main.tsx:2: import App from \"./App.tsx\"; src/main.tsx:4: createRoot(document.getElementById(\"root\")!).render(<App />);" [expanded]':
+  - img
+  - text: ""
   - img
-- text: log
-- code: "src/App.tsx:1: const App = () => <div>Minimal imported app</div>; src/App.tsx:3: export default App; src/main.tsx:2: import App from \"./App.tsx\"; src/main.tsx:4: createRoot(document.getElementById(\"root\")!).render(<App />);"
+  - text: ""
+  - button "Copy":
+    - img
+    - text: ""
+  - text: ""
+  - code: "src/App.tsx:1: const App = () => <div>Minimal imported app</div>; src/App.tsx:3: export default App; src/main.tsx:2: import App from \"./App.tsx\"; src/main.tsx:4: createRoot(document.getElementById(\"root\")!).render(<App />);"
 - paragraph: I found the matches! The React app is initialized in src/main.tsx using createRoot, and the App component is defined in src/App.tsx and imported in src/main.tsx.
 - button "Copy":
   - img
@@ -44,7 +50,10 @@
 - text: less than a minute ago
 - button "Copy Request ID":
   - img
+  - text: ""
 - button "Undo":
   - img
+  - text: ""
 - button "Retry":
-  - img
+  - img
\ No newline at end of file
+  - text: ""
\ No newline at end of file

e2e-tests/snapshots/local_agent_grep.spec.ts_local-agent---grep-search-2.aria.yml

-- img
-- text: GREP"createRoot"(2 matches)
-- img
-- text: log
-- button "Copy":
+- 'button "GREP \"createRoot\" (2 matches) log Copy log src/main.tsx:1: import { createRoot } from \"react-dom/client\"; src/main.tsx:4: createRoot(document.getElementById(\"root\")!).render(<App />);" [expanded]':
   - img
-- text: log
-- code: "src/main.tsx:1: import { createRoot } from \"react-dom/client\"; src/main.tsx:4: createRoot(document.getElementById(\"root\")!).render(<App />);"
+  - text: ""
+  - img
\ No newline at end of file
+  - text: ""
+  - button "Copy":
+    - img
+    - text: ""
+  - text: ""
+  - code: "src/main.tsx:1: import { createRoot } from \"react-dom/client\"; src/main.tsx:4: createRoot(document.getElementById(\"root\")!).render(<App />);"
\ No newline at end of file

e2e-tests/snapshots/local_agent_grep.spec.ts_local-agent---grep-search-3.aria.yml

-- img
-- text: GREP"App" in *.tsx(4 matches)
-- img
-- text: log
-- button "Copy":
+- 'button "GREP \"App\" in *.tsx (4 matches) log Copy log src/App.tsx:1: const App = () => <div>Minimal imported app</div>; src/App.tsx:3: export default App; src/main.tsx:2: import App from \"./App.tsx\"; src/main.tsx:4: createRoot(document.getElementById(\"root\")!).render(<App />);" [expanded]':
   - img
-- text: log
-- code: "src/App.tsx:1: const App = () => <div>Minimal imported app</div>; src/App.tsx:3: export default App; src/main.tsx:2: import App from \"./App.tsx\"; src/main.tsx:4: createRoot(document.getElementById(\"root\")!).render(<App />);"
+  - text: ""
+  - img
\ No newline at end of file
+  - text: ""
+  - button "Copy":
+    - img
+    - text: ""
+  - text: ""
+  - code: "src/App.tsx:1: const App = () => <div>Minimal imported app</div>; src/App.tsx:3: export default App; src/main.tsx:2: import App from \"./App.tsx\"; src/main.tsx:4: createRoot(document.getElementById(\"root\")!).render(<App />);"
\ No newline at end of file

e2e-tests/snapshots/local_agent_list_files.spec.ts_local-agent---list-files-1.aria.yml

-- 'button "List Files: src"':
+- button "src - src/App.tsx - src/main.tsx - src/vite-env.d.ts (3 files total)" [expanded]:
   - img
+  - text: ""
   - img
-- text: "- src/App.tsx - src/main.tsx - src/vite-env.d.ts (3 files total)"
+  - text: ""
\ No newline at end of file

e2e-tests/snapshots/local_agent_list_files.spec.ts_local-agent---list-files-2.aria.yml

-- 'button "List Files: src (recursive)"':
+- button "src recursive - src/App.tsx - src/main.tsx - src/vite-env.d.ts (3 files total)" [expanded]:
   - img
+  - text: ""
   - img
-- text: "- src/App.tsx - src/main.tsx - src/vite-env.d.ts (3 files total)"
+  - text: ""
\ No newline at end of file

e2e-tests/snapshots/local_agent_list_files.spec.ts_local-agent---list-files-include-hidden-1.aria.yml

-- button "List Files (recursive) (include hidden)":
+- button /List Files recursive include hidden - \.dyad\/plans\/test-plan\.md - index\.html - package\.json - src\/App\.tsx - src\/main\.tsx - src\/vite-env\.d\.ts - tsconfig\.app\.json - tsconfig\.json - tsconfig\.node\.json - vite\.config\.ts \(\d+ files total\)/ [expanded]:
   - img
+  - text: ""
   - img
-- text: /- \.dyad\/plans\/test-plan\.md - index\.html - package\.json - src\/App\.tsx - src\/main\.tsx - src\/vite-env\.d\.ts - tsconfig\.app\.json - tsconfig\.json - tsconfig\.node\.json - vite\.config\.ts \(\d+ files total\)/
+  - text: ""
\ No newline at end of file

e2e-tests/snapshots/local_agent_read_logs.spec.ts_local-agent---read-logs-with-filters-1.aria.yml

 - paragraph: /Generate an AI_RULES\.md file for this app\. Describe the tech stack in 5-\d+ bullet points and describe clear rules about what libraries to use for what\./
-- img
-- text: file1.txt
-- button "Edit":
+- button "file1.txt file1.txt Edit":
+  - img
+  - text: ""
+  - button "Edit":
+    - img
+    - text: ""
   - img
-- img
-- text: file1.txt
 - paragraph: More EOM
 - button "Copy":
   - img
@@ -16,19 +17,23 @@
 - text: less than a minute ago
 - button "Copy Request ID":
   - img
+  - text: ""
 - paragraph: tc=local-agent/read-logs
 - paragraph: Let me check the recent console logs to see what's happening in the application.
-- img
-- text: /LOGSReading \d+ logs/    
-- img
+- button "LOGS Reading 1 logs":
+  - img
+  - text: ""
+  - img
 - paragraph: Now let me filter for only error logs to identify any issues.
-- img
-- text: "LOGSReading 0 logs (level: error)"
-- img
+- 'button "LOGS Reading 0 logs (level: error)"':
+  - img
+  - text: ""
+  - img
 - paragraph: Let me also check client-side logs specifically.
-- img
-- text: "LOGSReading 0 logs (type: client)"
-- img
+- 'button "LOGS Reading 0 logs (type: client)"':
+  - img
+  - text: ""
+  - img
 - paragraph: I've reviewed the console logs. The application appears to be running normally with no critical errors detected.
 - button "Copy":
   - img
@@ -38,7 +43,10 @@
 - text: less than a minute ago
 - button "Copy Request ID":
   - img
+  - text: ""
 - button "Undo":
   - img
+  - text: ""
 - button "Retry":
-  - img
+  - img
\ No newline at end of file
+  - text: ""
\ No newline at end of file

e2e-tests/snapshots/local_agent_search_replace.spec.ts_local-agent---search-replace-edit-1.aria.yml

 - paragraph: /Generate an AI_RULES\.md file for this app\. Describe the tech stack in 5-\d+ bullet points and describe clear rules about what libraries to use for what\./
-- img
-- text: file1.txt
-- button "Edit":
+- button "file1.txt file1.txt Edit":
+  - img
+  - text: ""
+  - button "Edit":
+    - img
+    - text: ""
   - img
-- img
-- text: file1.txt
 - paragraph: More EOM
 - button "Copy":
   - img
@@ -16,15 +17,17 @@
 - text: less than a minute ago
 - button "Copy Request ID":
   - img
+  - text: ""
 - paragraph: tc=local-agent/search-replace
 - paragraph: Let me first read the file to see its contents.
 - img
-- text: App.tsx Read src/App.tsx
+- text: Read src/App.tsx
 - paragraph: Now I'll use search_replace to update the text with proper context.
-- img
-- text: Search & Replace App.tsx
-- img
-- text: src/App.tsx
+- button "Search & Replace App.tsx src/App.tsx":
+  - img
+  - text: ""
+  - img
+  - text: ""
 - paragraph: Done! I've updated the message using search_replace. The edit was applied successfully.
 - button "Copy":
   - img
@@ -34,7 +37,10 @@
 - text: less than a minute ago
 - button "Copy Request ID":
   - img
+  - text: ""
 - button "Undo":
   - img
+  - text: ""
 - button "Retry":
-  - img
+  - img
\ No newline at end of file
+  - text: ""
\ No newline at end of file

e2e-tests/snapshots/local_agent_summarize.spec.ts_local-agent---summarize-to-new-chat-works-1.aria.yml

 - paragraph: Summarize from chat-id=1
-- img
-- text: file1.txt
-- button "Edit":
-  - img
-- img
-- text: file1.txt
+- button "file1.txt file1.txt Edit"
 - paragraph: More EOM
 - button "Copy":
   - img
@@ -17,4 +12,4 @@
 - button "Undo":
   - img
 - button "Retry":
-  - img
+  - img
\ No newline at end of file

e2e-tests/snapshots/main.spec.ts_simple-message-to-custom-test-model-1.aria.yml

 - paragraph: hi
-- img
-- text: file1.txt
-- img
-- text: file1.txt
+- button "file1.txt file1.txt Edit"
 - paragraph: More EOM
 - button "Retry":
   - img
\ No newline at end of file

e2e-tests/snapshots/mcp.spec.ts_mcp---call-calculator-1.aria.yml

 - paragraph: "[call_tool=calculator_add]"
-- img
-- text: Tool Call
-- img
-- text: testing-mcp-server calculator_add
+- button "Tool Call testing-mcp-server calculator_add"
 - img
 - text: less than a minute ago

e2e-tests/snapshots/mcp.spec.ts_mcp---call-calculator-via-http-1.aria.yml

 - paragraph: "[call_tool=calculator_add]"
-- img
-- text: Tool Call
-- img
-- text: testing-mcp-server calculator_add
+- button "Tool Call testing-mcp-server calculator_add":
+  - img
+  - text: ""
+  - img
 - img
 - text: less than a minute ago
\ No newline at end of file

e2e-tests/snapshots/ollama.spec.ts_send-message-to-ollama-1.aria.yml

 - paragraph: hi
+- button "file1.txt file1.txt Edit":
+  - img
+  - text: ""
+  - button "Edit":
+    - img
+    - text: ""
+  - img
+- paragraph: More EOM
+- button "Copy":
+  - img
 - img
-- text: file1.txt
+- text: testollama
 - img
-- text: file1.txt
-- paragraph: More EOM
+- text: less than a minute ago
+- button "Undo":
+  - img
+  - text: ""
 - button "Retry":
-  - img
+  - img
\ No newline at end of file
+  - text: ""
\ No newline at end of file

e2e-tests/snapshots/partial_response.spec.ts_partial-message-is-resumed-1.aria.yml

 - paragraph: /Generate an AI_RULES\.md file for this app\. Describe the tech stack in 5-\d+ bullet points and describe clear rules about what libraries to use for what\./
-- img
-- text: file1.txt
-- img
-- text: file1.txt
+- button "file1.txt file1.txt Edit":
+  - img
+  - text: ""
+  - button "Edit":
+    - img
+    - text: ""
+  - img
 - paragraph: More EOM
+- button "Copy":
+  - img
 - img
 - text: Approved
-- paragraph: tc=partial-write
-- paragraph: START OF MESSAGE
 - img
-- text: new-file.ts
+- text: test-model
 - img
-- text: "src/new-file.ts Summary: this file will be partially written"
+- text: less than a minute ago
+- img
+- text: wrote 1 file(s)
+- paragraph: tc=partial-write
+- paragraph: START OF MESSAGE
+- 'button "new-file.ts src/new-file.ts Edit Summary: this file will be partially written"':
+  - img
+  - text: ""
+  - button "Edit":
+    - img
+    - text: ""
+  - img
+  - text: ""
+- paragraph: Finished writing file.
 - paragraph: "[[dyad-dump-path=*]]"
+- button "Copy":
+  - img
 - img
 - text: Approved
+- img
+- text: test-model
+- img
+- text: less than a minute ago
+- img
+- text: wrote 1 file(s)
 - button "Undo":
   - img
+  - text: ""
 - button "Retry":
-  - img
+  - img
\ No newline at end of file
+  - text: ""
\ No newline at end of file

e2e-tests/snapshots/plan_mode.spec.ts_plan-mode---questionnaire-flow-1.aria.yml

@@ -15,13 +15,7 @@
 - paragraph:
   - strong: Which framework do you prefer?
   - text: Vue
-- img
-- text: file1.txt
-- button "Edit":
-  - img
-  - text: Edit
-- img
-- text: file1.txt
+- button "file1.txt file1.txt Edit"
 - paragraph: More EOM
 - button "Copy":
   - img

e2e-tests/snapshots/problems.spec.ts_problems---fix-all-1.aria.yml

 - paragraph: tc=create-ts-errors
 - paragraph: This will get a TypeScript error.
-- img
-- text: bad-file.ts
-- img
-- text: "src/bad-file.ts Summary: This will get a TypeScript error."
+- 'button "bad-file.ts src/bad-file.ts Edit Summary: This will get a TypeScript error."':
+  - img
+  - text: ""
+  - button "Edit":
+    - img
+    - text: ""
+  - img
+  - text: ""
 - paragraph: EOM
-- img
-- text: Auto-fix5 problems
-- img
-- img
-- text: file1.txt
-- img
-- text: file1.txt
+- button "Auto-fix 5 problems":
+  - img
+  - text: ""
+  - img
+- button "file1.txt file1.txt Edit":
+  - img
+  - text: ""
+  - button "Edit":
+    - img
+    - text: ""
+  - img
 - paragraph: More EOM
 - paragraph: "[[dyad-dump-path=*]]"
-- img
-- text: Auto-fix5 problems
-- img
-- img
-- text: file1.txt
-- img
-- text: file1.txt
+- button "Auto-fix 5 problems":
+  - img
+  - text: ""
+  - img
+- button "file1.txt file1.txt Edit":
+  - img
+  - text: ""
+  - button "Edit":
+    - img
+    - text: ""
+  - img
 - paragraph: More EOM
 - paragraph: "[[dyad-dump-path=*]]"
+- button "Copy":
+  - img
+- img
+- text: test-model
+- img
+- text: less than a minute ago
 - paragraph: "Fix these 3 TypeScript compile-time errors:"
 - list:
   - listitem: src/bad-file.tsx:2:1 - Cannot find name 'nonExistentFunction1'. (TS2304)
+- text: plaintext
 - code: const App = () => <div>Minimal imported app</div>; nonExistentFunction1(); // <-- TypeScript compiler error here nonExistentFunction2();
 - list:
   - listitem: src/bad-file.tsx:3:1 - Cannot find name 'nonExistentFunction2'. (TS2304)
+- text: plaintext
 - code: nonExistentFunction1(); nonExistentFunction2(); // <-- TypeScript compiler error here nonExistentFunction3();
 - list:
   - listitem: src/bad-file.tsx:4:1 - Cannot find name 'nonExistentFunction3'. (TS2304)
+- text: plaintext
 - code: nonExistentFunction2(); nonExistentFunction3(); // <-- TypeScript compiler error here
 - paragraph: Please fix all errors in a concise way.
-- img
-- text: file1.txt
-- img
-- text: file1.txt
+- button "file1.txt file1.txt Edit":
+  - img
+  - text: ""
+  - button "Edit":
+    - img
+    - text: ""
+  - img
 - paragraph: More EOM
 - paragraph: "[[dyad-dump-path=*]]"
-- img
-- text: Auto-fix3 problems
-- img
-- img
-- text: file1.txt
-- img
-- text: file1.txt
+- button "Auto-fix 3 problems":
+  - img
+  - text: ""
+  - img
+- button "file1.txt file1.txt Edit":
+  - img
+  - text: ""
+  - button "Edit":
+    - img
+    - text: ""
+  - img
 - paragraph: More EOM
 - paragraph: "[[dyad-dump-path=*]]"
-- img
-- text: Auto-fix3 problems
-- img
-- img
-- text: file1.txt
-- img
-- text: file1.txt
+- button "Auto-fix 3 problems":
+  - img
+  - text: ""
+  - img
+- button "file1.txt file1.txt Edit":
+  - img
+  - text: ""
+  - button "Edit":
+    - img
+    - text: ""
+  - img
 - paragraph: More EOM
 - paragraph: "[[dyad-dump-path=*]]"
+- button "Copy":
+  - img
+- img
+- text: test-model
+- img
+- text: less than a minute ago
+- button "Undo":
+  - img
+  - text: ""
 - button "Retry":
-  - img
+  - img
\ No newline at end of file
+  - text: ""
\ No newline at end of file

e2e-tests/snapshots/problems.spec.ts_problems---select-specific-problems-and-fix-1.aria.yml

 - paragraph: "Fix these 2 TypeScript compile-time errors:"
 - list:
   - listitem: src/bad-file.tsx:2:1 - Cannot find name 'nonExistentFunction1'. (TS2304)
+- text: plaintext
 - code: const App = () => <div>Minimal imported app</div>; nonExistentFunction1(); // <-- TypeScript compiler error here nonExistentFunction2();
 - list:
   - listitem: src/bad-file.tsx:4:1 - Cannot find name 'nonExistentFunction3'. (TS2304)
+- text: plaintext
 - code: nonExistentFunction2(); nonExistentFunction3(); // <-- TypeScript compiler error here
 - paragraph: Please fix all errors in a concise way.
-- img
-- text: bad-file.ts
-- button "Edit":
+- 'button "bad-file.ts src/bad-file.ts Edit Summary: Fix 2 errors and introduce a new error."':
   - img
-- img
-- text: "src/bad-file.ts Summary: Fix 2 errors and introduce a new error."
+  - text: ""
+  - button "Edit":
+    - img
+    - text: ""
+  - img
+  - text: ""
 - paragraph: "[[dyad-dump-path=*]]"
-- button:
+- button "Copy":
   - img
 - img
+- text: test-model
+- img
 - text: less than a minute ago
+- button "Undo":
+  - img
+  - text: ""
 - button "Retry":
-  - img
+  - img
\ No newline at end of file
+  - text: ""
\ No newline at end of file

e2e-tests/snapshots/problems.spec.ts_problems-auto-fix---complex-delete-rename-write-1.aria.yml

@@ -4,26 +4,50 @@
 - text: main.tsx Delete src/main.tsx
 - img
 - text: "App.tsx → main.tsx Rename From: src/App.tsx To: src/main.tsx"
-- img
-- text: main.tsx
-- img
-- text: "src/main.tsx Summary: final main.tsx file."
+- 'button "main.tsx src/main.tsx Edit Summary: final main.tsx file."':
+  - img
+  - text: ""
+  - button "Edit":
+    - img
+    - text: ""
+  - img
+  - text: ""
 - paragraph: EOM
-- img
-- text: Auto-fix1 problems
-- img
-- img
-- text: bad-file.ts
-- img
-- text: "src/bad-file.ts Summary: Fix remaining error."
+- button "Auto-fix 1 problems":
+  - img
+  - text: ""
+  - img
+- 'button "bad-file.ts src/bad-file.ts Edit Summary: Fix remaining error."':
+  - img
+  - text: ""
+  - button "Edit":
+    - img
+    - text: ""
+  - img
+  - text: ""
 - paragraph: "[[dyad-dump-path=*]]"
+- button "Auto-fix 1 problems":
+  - img
+  - text: ""
+  - img
+- 'button "bad-file.ts src/bad-file.ts Edit Summary: Fix remaining error."':
+  - img
+  - text: ""
+  - button "Edit":
+    - img
+    - text: ""
+  - img
+  - text: ""
+- paragraph: "[[dyad-dump-path=*]]"
+- button "Copy":
+  - img
 - img
-- text: Auto-fix1 problems
-- img
-- img
-- text: bad-file.ts
+- text: test-model
 - img
-- text: "src/bad-file.ts Summary: Fix remaining error."
-- paragraph: "[[dyad-dump-path=*]]"
+- text: less than a minute ago
+- button "Undo":
+  - img
+  - text: ""
 - button "Retry":
-  - img
+  - img
\ No newline at end of file
+  - text: ""
\ No newline at end of file

e2e-tests/snapshots/problems.spec.ts_problems-auto-fix---disabled-1.aria.yml

 - paragraph: tc=create-ts-errors
 - paragraph: This will get a TypeScript error.
+- 'button "bad-file.ts src/bad-file.ts Edit Summary: This will get a TypeScript error."':
+  - img
+  - text: ""
+  - button "Edit":
+    - img
+    - text: ""
+  - img
+  - text: ""
+- paragraph: EOM
+- button "Copy":
+  - img
 - img
-- text: bad-file.ts
+- text: test-model
 - img
-- text: "src/bad-file.ts Summary: This will get a TypeScript error."
-- paragraph: EOM
+- text: less than a minute ago
+- button "Undo":
+  - img
+  - text: ""
 - button "Retry":
-  - img
+  - img
\ No newline at end of file
+  - text: ""
\ No newline at end of file

e2e-tests/snapshots/problems.spec.ts_problems-auto-fix---enabled-1.aria.yml

 - paragraph: tc=create-ts-errors
 - paragraph: This will get a TypeScript error.
-- img
-- text: bad-file.ts
-- img
-- text: "src/bad-file.ts Summary: This will get a TypeScript error."
+- 'button "bad-file.ts src/bad-file.ts Edit Summary: This will get a TypeScript error."':
+  - img
+  - text: ""
+  - button "Edit":
+    - img
+    - text: ""
+  - img
+  - text: ""
 - paragraph: EOM
-- img
-- text: Auto-fix2 problems
-- img
-- img
-- text: bad-file.ts
-- img
-- text: "src/bad-file.ts Summary: Fix 2 errors and introduce a new error."
+- button "Auto-fix 2 problems":
+  - img
+  - text: ""
+  - img
+- 'button "bad-file.ts src/bad-file.ts Edit Summary: Fix 2 errors and introduce a new error."':
+  - img
+  - text: ""
+  - button "Edit":
+    - img
+    - text: ""
+  - img
+  - text: ""
 - paragraph: "[[dyad-dump-path=*]]"
+- button "Auto-fix 1 problems":
+  - img
+  - text: ""
+  - img
+- 'button "bad-file.ts src/bad-file.ts Edit Summary: Fix remaining error."':
+  - img
+  - text: ""
+  - button "Edit":
+    - img
+    - text: ""
+  - img
+  - text: ""
+- paragraph: "[[dyad-dump-path=*]]"
+- button "Copy":
+  - img
 - img
-- text: Auto-fix1 problems
-- img
-- img
-- text: bad-file.ts
+- text: test-model
 - img
-- text: "src/bad-file.ts Summary: Fix remaining error."
-- paragraph: "[[dyad-dump-path=*]]"
+- text: less than a minute ago
+- button "Undo":
+  - img
+  - text: ""
 - button "Retry":
-  - img
+  - img
\ No newline at end of file
+  - text: ""
\ No newline at end of file

e2e-tests/snapshots/problems.spec.ts_problems-auto-fix---gives-up-after-2-attempts-1.aria.yml

-- img
-- text: Auto-fix5 problems
-- img
-- text: "1"
-- img
-- text: /src\/bad-file\.ts 1:\d+ TS2307/
-- paragraph: Cannot find module 'non-existent-class' or its corresponding type declarations.
-- text: "2"
-- img
-- text: /src\/bad-file\.ts 2:\d+ TS2307/
-- paragraph: Cannot find module 'non-existent-class' or its corresponding type declarations.
-- text: "3"
-- img
-- text: /src\/bad-file\.ts 3:\d+ TS2307/
-- paragraph: Cannot find module 'non-existent-class' or its corresponding type declarations.
-- text: "4"
-- img
-- text: /src\/bad-file\.ts 4:\d+ TS2307/
-- paragraph: Cannot find module 'non-existent-class' or its corresponding type declarations.
-- text: "5"
-- img
-- text: /src\/bad-file\.ts 5:\d+ TS2307/
-- paragraph: Cannot find module 'non-existent-class' or its corresponding type declarations.
+- button /Auto-fix 5 problems 1 src\/bad-file\.ts 1:\d+ TS2307 Cannot find module 'non-existent-class' or its corresponding type declarations\. 2 src\/bad-file\.ts 2:\d+ TS2307 Cannot find module 'non-existent-class' or its corresponding type declarations\. 3 src\/bad-file\.ts 3:\d+ TS2307 Cannot find module 'non-existent-class' or its corresponding type declarations\. 4 src\/bad-file\.ts 4:\d+ TS2307 Cannot find module 'non-existent-class' or its corresponding type declarations\. 5 src\/bad-file\.ts 5:\d+ TS2307 Cannot find module 'non-existent-class' or its corresponding type declarations\./ [expanded]:
+  - img
+  - text: ""
+  - img
+  - text: ""
+  - img
+  - text: ""
+  - paragraph: Cannot find module 'non-existent-class' or its corresponding type declarations.
+  - text: ""
+  - img
+  - text: ""
+  - paragraph: Cannot find module 'non-existent-class' or its corresponding type declarations.
+  - text: ""
+  - img
+  - text: ""
+  - paragraph: Cannot find module 'non-existent-class' or its corresponding type declarations.
+  - text: ""
+  - img
+  - text: ""
+  - paragraph: Cannot find module 'non-existent-class' or its corresponding type declarations.
+  - text: ""
+  - img
+  - text: ""
\ No newline at end of file
+  - paragraph: Cannot find module 'non-existent-class' or its corresponding type declarations.
\ No newline at end of file

e2e-tests/snapshots/problems.spec.ts_problems-auto-fix---gives-up-after-2-attempts-2.aria.yml

 - paragraph: tc=create-unfixable-ts-errors
 - paragraph: This should not get fixed
-- img
-- text: bad-file.ts
-- img
-- text: "src/bad-file.ts Summary: This will produce 5 TypeScript errors."
+- 'button "bad-file.ts src/bad-file.ts Edit Summary: This will produce 5 TypeScript errors."':
+  - img
+  - text: ""
+  - button "Edit":
+    - img
+    - text: ""
+  - img
+  - text: ""
 - paragraph: EOM
-- img
-- text: Auto-fix5 problems
-- img
-- img
-- text: file1.txt
-- img
-- text: file1.txt
+- button "Auto-fix 5 problems":
+  - img
+  - text: ""
+  - img
+- button "file1.txt file1.txt Edit":
+  - img
+  - text: ""
+  - button "Edit":
+    - img
+    - text: ""
+  - img
 - paragraph: More EOM
 - paragraph: "[[dyad-dump-path=*]]"
-- img
-- text: Auto-fix5 problems
-- img
-- text: "1"
-- img
-- text: /src\/bad-file\.ts 1:\d+ TS2307/
-- paragraph: Cannot find module 'non-existent-class' or its corresponding type declarations.
-- text: "2"
-- img
-- text: /src\/bad-file\.ts 2:\d+ TS2307/
-- paragraph: Cannot find module 'non-existent-class' or its corresponding type declarations.
-- text: "3"
-- img
-- text: /src\/bad-file\.ts 3:\d+ TS2307/
-- paragraph: Cannot find module 'non-existent-class' or its corresponding type declarations.
-- text: "4"
-- img
-- text: /src\/bad-file\.ts 4:\d+ TS2307/
-- paragraph: Cannot find module 'non-existent-class' or its corresponding type declarations.
-- text: "5"
-- img
-- text: /src\/bad-file\.ts 5:\d+ TS2307/
-- paragraph: Cannot find module 'non-existent-class' or its corresponding type declarations.
-- img
-- text: file1.txt
-- img
-- text: file1.txt
+- button /Auto-fix 5 problems 1 src\/bad-file\.ts 1:\d+ TS2307 Cannot find module 'non-existent-class' or its corresponding type declarations\. 2 src\/bad-file\.ts 2:\d+ TS2307 Cannot find module 'non-existent-class' or its corresponding type declarations\. 3 src\/bad-file\.ts 3:\d+ TS2307 Cannot find module 'non-existent-class' or its corresponding type declarations\. 4 src\/bad-file\.ts 4:\d+ TS2307 Cannot find module 'non-existent-class' or its corresponding type declarations\. 5 src\/bad-file\.ts 5:\d+ TS2307 Cannot find module 'non-existent-class' or its corresponding type declarations\./ [expanded]:
+  - img
+  - text: ""
+  - img
+  - text: ""
+  - img
+  - text: ""
+  - paragraph: Cannot find module 'non-existent-class' or its corresponding type declarations.
+  - text: ""
+  - img
+  - text: ""
+  - paragraph: Cannot find module 'non-existent-class' or its corresponding type declarations.
+  - text: ""
+  - img
+  - text: ""
+  - paragraph: Cannot find module 'non-existent-class' or its corresponding type declarations.
+  - text: ""
+  - img
+  - text: ""
+  - paragraph: Cannot find module 'non-existent-class' or its corresponding type declarations.
+  - text: ""
+  - img
+  - text: ""
+  - paragraph: Cannot find module 'non-existent-class' or its corresponding type declarations.
+- button "file1.txt file1.txt Edit":
+  - img
+  - text: ""
+  - button "Edit":
+    - img
+    - text: ""
+  - img
 - paragraph: More EOM
 - paragraph: "[[dyad-dump-path=*]]"
+- button "Copy":
+  - img
+- img
+- text: test-model
+- img
+- text: less than a minute ago
+- button "Undo":
+  - img
+  - text: ""
 - button "Retry":
-  - img
+  - img
\ No newline at end of file
+  - text: ""
\ No newline at end of file

e2e-tests/snapshots/reject.spec.ts_reject-1.aria.yml

 - paragraph: tc=write-index
 - paragraph: OK, I'm going to do some writing now...
+- 'button "Index.tsx src/pages/Index.tsx Edit Summary: write-description"':
+  - img
+  - text: ""
+  - button "Edit":
+    - img
+    - text: ""
+  - img
+  - text: ""
+- paragraph: And it's done!
+- button "Copy":
+  - img
 - img
-- text: Index.tsx
+- text: test-model
 - img
-- text: "src/pages/Index.tsx Summary: write-description"
-- paragraph: And it's done!
+- text: less than a minute ago
+- button "Undo":
+  - img
+  - text: ""
 - button "Retry":
-  - img
+  - img
\ No newline at end of file
+  - text: ""
\ No newline at end of file

e2e-tests/snapshots/reject.spec.ts_reject-2.aria.yml

 - paragraph: tc=write-index
 - paragraph: OK, I'm going to do some writing now...
-- img
-- text: Index.tsx
-- img
-- text: "src/pages/Index.tsx Summary: write-description"
+- 'button "Index.tsx src/pages/Index.tsx Edit Summary: write-description"':
+  - img
+  - text: ""
+  - button "Edit":
+    - img
+    - text: ""
+  - img
+  - text: ""
 - paragraph: And it's done!
+- button "Copy":
+  - img
 - img
 - text: Rejected
+- img
+- text: test-model
+- img
+- text: less than a minute ago
+- button "Undo":
+  - img
+  - text: ""
 - button "Retry":
-  - img
+  - img
\ No newline at end of file
+  - text: ""
\ No newline at end of file

e2e-tests/snapshots/security_review.spec.ts_security-review---multi-select-and-fix-issues-1.aria.yml

@@ -53,12 +53,7 @@
   - code: "`src/config/aws.ts`"
   - text: ","
   - code: "`src/services/s3-uploader.ts`"
-- img
-- text: file1.txt
-- button "Edit":
-  - img
-- img
-- text: file1.txt
+- button "file1.txt file1.txt Edit"
 - paragraph: More EOM
 - button:
   - img
@@ -73,4 +68,4 @@
 - button "Undo":
   - img
 - button "Retry":
-  - img
+  - img
\ No newline at end of file

e2e-tests/snapshots/security_review.spec.ts_security-review-1.aria.yml

 - table:
   - rowgroup:
     - row "Select all issues Level Issue Action":
-      - cell "Select all issues":
+      - columnheader "Select all issues":
         - checkbox "Select all issues"
-      - cell "Level"
-      - cell "Issue"
-      - cell "Action"
+      - columnheader "Level"
+      - columnheader "Issue"
+      - columnheader "Action"
   - rowgroup:
     - 'row "Select SQL Injection in User Lookup critical SQL Injection in User Lookup What: User input flows directly into database queries without validation, allowing attackers to execute arbitrary SQL commands Risk: An attac... Show more Fix Issue"':
       - cell "Select SQL Injection in User Lookup":
         - checkbox "Select SQL Injection in User Lookup"
       - cell "critical":
         - img
+        - text: ""
       - 'cell "SQL Injection in User Lookup What: User input flows directly into database queries without validation, allowing attackers to execute arbitrary SQL commands Risk: An attac... Show more"':
         - 'button "SQL Injection in User Lookup What: User input flows directly into database queries without validation, allowing attackers to execute arbitrary SQL commands Risk: An attac... Show more"':
+          - text: ""
           - paragraph:
             - strong: What
             - text: ": User input flows directly into database queries without validation, allowing attackers to execute arbitrary SQL commands"
@@ -22,6 +24,7 @@
             - text: ": An attac..."
           - button "Show more":
             - img
+            - text: ""
       - cell "Fix Issue":
         - button "Fix Issue"
     - 'row "Select Hardcoded AWS Credentials in Source Code critical Hardcoded AWS Credentials in Source Code What: AWS access keys are stored directly in the codebase and committed to version control, exposing full cloud infrastructure access Risk: A... Show more Fix Issue"':
@@ -29,8 +32,10 @@
         - checkbox "Select Hardcoded AWS Credentials in Source Code"
       - cell "critical":
         - img
+        - text: ""
       - 'cell "Hardcoded AWS Credentials in Source Code What: AWS access keys are stored directly in the codebase and committed to version control, exposing full cloud infrastructure access Risk: A... Show more"':
         - 'button "Hardcoded AWS Credentials in Source Code What: AWS access keys are stored directly in the codebase and committed to version control, exposing full cloud infrastructure access Risk: A... Show more"':
+          - text: ""
           - paragraph:
             - strong: What
             - text: ": AWS access keys are stored directly in the codebase and committed to version control, exposing full cloud infrastructure access"
@@ -39,6 +44,7 @@
             - text: ": A..."
           - button "Show more":
             - img
+            - text: ""
       - cell "Fix Issue":
         - button "Fix Issue"
     - 'row "Select Missing Authentication on Admin Endpoints high Missing Authentication on Admin Endpoints What: Administrative API endpoints can be accessed without authentication, relying only on URL obscurity Risk: An attacker who discovers thes... Show more Fix Issue"':
@@ -46,8 +52,10 @@
         - checkbox "Select Missing Authentication on Admin Endpoints"
       - cell "high":
         - img
+        - text: ""
       - 'cell "Missing Authentication on Admin Endpoints What: Administrative API endpoints can be accessed without authentication, relying only on URL obscurity Risk: An attacker who discovers thes... Show more"':
         - 'button "Missing Authentication on Admin Endpoints What: Administrative API endpoints can be accessed without authentication, relying only on URL obscurity Risk: An attacker who discovers thes... Show more"':
+          - text: ""
           - paragraph:
             - strong: What
             - text: ": Administrative API endpoints can be accessed without authentication, relying only on URL obscurity"
@@ -56,6 +64,7 @@
             - text: ": An attacker who discovers thes..."
           - button "Show more":
             - img
+            - text: ""
       - cell "Fix Issue":
         - button "Fix Issue"
     - 'row "Select JWT Secret Using Default Value high JWT Secret Using Default Value What: The application uses a hardcoded default JWT secret (\"your-secret-key\") for signing authentication tokens Risk: Attackers can forge val... Show more Fix Issue"':
@@ -63,8 +72,10 @@
         - checkbox "Select JWT Secret Using Default Value"
       - cell "high":
         - img
+        - text: ""
       - 'cell "JWT Secret Using Default Value What: The application uses a hardcoded default JWT secret (\"your-secret-key\") for signing authentication tokens Risk: Attackers can forge val... Show more"':
         - 'button "JWT Secret Using Default Value What: The application uses a hardcoded default JWT secret (\"your-secret-key\") for signing authentication tokens Risk: Attackers can forge val... Show more"':
+          - text: ""
           - paragraph:
             - strong: What
             - text: ": The application uses a hardcoded default JWT secret (\"your-secret-key\") for signing authentication tokens"
@@ -73,6 +84,7 @@
             - text: ": Attackers can forge val..."
           - button "Show more":
             - img
+            - text: ""
       - cell "Fix Issue":
         - button "Fix Issue"
     - 'row "Select Unvalidated File Upload Extensions medium Unvalidated File Upload Extensions What: The file upload endpoint accepts any file type without validating extensions or content, only checking file size Risk: An attacker coul... Show more Fix Issue"':
@@ -80,8 +92,10 @@
         - checkbox "Select Unvalidated File Upload Extensions"
       - cell "medium":
         - img
+        - text: ""
       - 'cell "Unvalidated File Upload Extensions What: The file upload endpoint accepts any file type without validating extensions or content, only checking file size Risk: An attacker coul... Show more"':
         - 'button "Unvalidated File Upload Extensions What: The file upload endpoint accepts any file type without validating extensions or content, only checking file size Risk: An attacker coul... Show more"':
+          - text: ""
           - paragraph:
             - strong: What
             - text: ": The file upload endpoint accepts any file type without validating extensions or content, only checking file size"
@@ -90,6 +104,7 @@
             - text: ": An attacker coul..."
           - button "Show more":
             - img
+            - text: ""
       - cell "Fix Issue":
         - button "Fix Issue"
     - 'row "Select Missing CSRF Protection on State-Changing Operations medium Missing CSRF Protection on State-Changing Operations What: POST, PUT, and DELETE endpoints don''t implement CSRF tokens, making them vulnerable to cross-site request forgery attacks Risk: An atta... Show more Fix Issue"':
@@ -97,8 +112,10 @@
         - checkbox "Select Missing CSRF Protection on State-Changing Operations"
       - cell "medium":
         - img
+        - text: ""
       - 'cell "Missing CSRF Protection on State-Changing Operations What: POST, PUT, and DELETE endpoints don''t implement CSRF tokens, making them vulnerable to cross-site request forgery attacks Risk: An atta... Show more"':
         - 'button "Missing CSRF Protection on State-Changing Operations What: POST, PUT, and DELETE endpoints don''t implement CSRF tokens, making them vulnerable to cross-site request forgery attacks Risk: An atta... Show more"':
+          - text: ""
           - paragraph:
             - strong: What
             - text: ": POST, PUT, and DELETE endpoints don't implement CSRF tokens, making them vulnerable to cross-site request forgery attacks"
@@ -107,6 +124,7 @@
             - text: ": An atta..."
           - button "Show more":
             - img
+            - text: ""
       - cell "Fix Issue":
         - button "Fix Issue"
     - 'row "Select Verbose Error Messages Expose Stack Traces low Verbose Error Messages Expose Stack Traces What: Production error responses include full stack traces and internal file paths that are sent to end users Risk: Attackers can use this in... Show more Fix Issue"':
@@ -114,8 +132,10 @@
         - checkbox "Select Verbose Error Messages Expose Stack Traces"
       - cell "low":
         - img
+        - text: ""
       - 'cell "Verbose Error Messages Expose Stack Traces What: Production error responses include full stack traces and internal file paths that are sent to end users Risk: Attackers can use this in... Show more"':
         - 'button "Verbose Error Messages Expose Stack Traces What: Production error responses include full stack traces and internal file paths that are sent to end users Risk: Attackers can use this in... Show more"':
+          - text: ""
           - paragraph:
             - strong: What
             - text: ": Production error responses include full stack traces and internal file paths that are sent to end users"
@@ -124,6 +144,7 @@
             - text: ": Attackers can use this in..."
           - button "Show more":
             - img
+            - text: ""
       - cell "Fix Issue":
         - button "Fix Issue"
     - 'row "Select Missing Security Headers low Missing Security Headers What: The application doesn''t set recommended security headers like `X-Frame-Options`, `X-Content-Type-Options`, and `Strict-Transport-Security` ... Show more Fix Issue"':
@@ -131,8 +152,10 @@
         - checkbox "Select Missing Security Headers"
       - cell "low":
         - img
+        - text: ""
       - 'cell "Missing Security Headers What: The application doesn''t set recommended security headers like `X-Frame-Options`, `X-Content-Type-Options`, and `Strict-Transport-Security` ... Show more"':
         - 'button "Missing Security Headers What: The application doesn''t set recommended security headers like `X-Frame-Options`, `X-Content-Type-Options`, and `Strict-Transport-Security` ... Show more"':
+          - text: ""
           - paragraph:
             - strong: What
             - text: ": The application doesn't set recommended security headers like"
@@ -144,5 +167,6 @@
           - paragraph: ...
           - button "Show more":
             - img
+            - text: ""
       - cell "Fix Issue":
         - button "Fix Issue"
\ No newline at end of file

e2e-tests/snapshots/security_review.spec.ts_security-review-2.aria.yml

@@ -24,12 +24,7 @@
   - strong: Relevant Files
   - text: ":"
   - code: "`src/api/users.ts`"
-- img
-- text: file1.txt
-- button "Edit":
-  - img
-- img
-- text: file1.txt
+- button "file1.txt file1.txt Edit"
 - paragraph: More EOM
 - button:
   - img
@@ -44,4 +39,4 @@
 - button "Undo":
   - img
 - button "Retry":
-  - img
+  - img
\ No newline at end of file

e2e-tests/snapshots/smart_context_deep.spec.ts_smart-context-deep---read-write-read-1.aria.yml

 - paragraph: tc=read-index
 - paragraph: "Read the index page:"
 - img
-- text: Index.tsx Read src/pages/Index.tsx
+- text: Read src/pages/Index.tsx
 - paragraph: Done.
 - button "Copy":
   - img
@@ -13,14 +13,17 @@
 - text: less than a minute ago
 - button "Copy Request ID":
   - img
+  - text: ""
 - paragraph: tc=update-index-1
 - paragraph: First read
-- img
-- text: Index.tsx
-- button "Edit":
+- 'button "Index.tsx src/pages/Index.tsx Edit Summary: replace file"':
   - img
-- img
-- text: "src/pages/Index.tsx Summary: replace file"
+  - text: ""
+  - button "Edit":
+    - img
+    - text: ""
+  - img
+  - text: ""
 - button "Copy":
   - img
 - img
@@ -33,10 +36,11 @@
 - text: wrote 1 file(s)
 - button "Copy Request ID":
   - img
+  - text: ""
 - paragraph: tc=read-index
 - paragraph: "Read the index page:"
 - img
-- text: Index.tsx Read src/pages/Index.tsx
+- text: Read src/pages/Index.tsx
 - paragraph: Done.
 - button "Copy":
   - img
@@ -48,6 +52,7 @@
 - text: less than a minute ago
 - button "Copy Request ID":
   - img
+  - text: ""
 - paragraph: "[dump]"
 - paragraph: "[[dyad-dump-path=*]]"
 - button "Copy":
@@ -60,7 +65,10 @@
 - text: less than a minute ago
 - button "Copy Request ID":
   - img
+  - text: ""
 - button "Undo":
   - img
+  - text: ""
 - button "Retry":
-  - img
+  - img
\ No newline at end of file
+  - text: ""
\ No newline at end of file

e2e-tests/snapshots/supabase_stale_ui.spec.ts_supabase---stale-ui-1.aria.yml

 - paragraph: tc=add-supabase
 - paragraph: Adding supabase...
-- text: Integrate with supabase?
+- img
+- text: Integration Integrate with supabase?
 - button "Set up supabase"
+- button "Copy":
+  - img
+- img
+- text: test-model
+- img
+- text: less than a minute ago
+- button "Undo":
+  - img
+  - text: ""
 - button "Retry":
-  - img
+  - img
\ No newline at end of file
+  - text: ""
\ No newline at end of file

e2e-tests/snapshots/supabase_stale_ui.spec.ts_supabase---stale-ui-2.aria.yml

 - paragraph: tc=add-supabase
 - paragraph: Adding supabase...
 - img
-- text: Supabase integration complete
+- text: Integration Complete Supabase integration complete
 - paragraph: "This app is connected to Supabase project: Fake Supabase Project"
 - button "Continue"
-- button:
+- button "Copy":
   - img
 - img
 - text: test-model
@@ -12,5 +12,7 @@
 - text: less than a minute ago
 - button "Undo":
   - img
+  - text: ""
 - button "Retry":
-  - img
+  - img
\ No newline at end of file
+  - text: ""
\ No newline at end of file

e2e-tests/snapshots/supabase_stale_ui.spec.ts_supabase---stale-ui-3.aria.yml

 - paragraph: tc=add-supabase
 - paragraph: Adding supabase...
-- text: Integrate with supabase?
+- img
+- text: Integration Integrate with supabase?
 - button "Set up supabase"
+- button "Copy":
+  - img
+- img
+- text: test-model
+- img
+- text: less than a minute ago
+- button "Undo":
+  - img
+  - text: ""
 - button "Retry":
-  - img
+  - img
\ No newline at end of file
+  - text: ""
\ No newline at end of file

e2e-tests/snapshots/turbo_edits_v2.spec.ts_turbo-edits-v2---search-replace-approve-1.aria.yml

 - paragraph: tc=turbo-edits-v2
 - paragraph: Example with turbo edit v2
-- img
-- text: Search & Replace Index.tsx
-- img
-- text: src/pages/Index.tsx
+- button "Search & Replace Index.tsx src/pages/Index.tsx"
 - paragraph: End of turbo edit
 - button "Copy":
   - img
@@ -16,4 +13,4 @@
 - button "Undo":
   - img
 - button "Retry":
-  - img
+  - img
\ No newline at end of file

e2e-tests/snapshots/turbo_edits_v2.spec.ts_turbo-edits-v2---search-replace-fallback-1.aria.yml

 - paragraph: tc=turbo-edits-v2-trigger-fallback
 - paragraph: Example with turbo edit v2
-- img
-- text: Search & Replace Index.tsx
-- img
-- text: src/pages/Index.tsx
+- button "Search & Replace Index.tsx src/pages/Index.tsx":
+  - img
+  - text: ""
+  - img
+  - text: ""
 - paragraph: End of turbo edit
+- button "Warning Could not apply Turbo Edits properly for some of the files; re-generating code...":
+  - img
+  - text: ""
+  - img
 - img
-- text: Warning Could not apply Turbo Edits properly for some of the files; re-generating code......
-- img
-- img
-- text: Index.tsx Read src/pages/Index.tsx
-- img
-- text: Search & Replace Index.tsx
-- img
-- text: src/pages/Index.tsx
+- text: Read src/pages/Index.tsx
+- button "Search & Replace Index.tsx src/pages/Index.tsx":
+  - img
+  - text: ""
+  - img
+  - text: ""
 - paragraph: "[[dyad-dump-path=*]]"
-- img
-- text: Warning Could not apply Turbo Edits properly for some of the files; re-generating code......
-- img
-- img
-- text: Index.tsx
-- button "Edit":
+- button "Warning Could not apply Turbo Edits properly for some of the files; re-generating code...":
   - img
-- img
-- text: "src/pages/Index.tsx Summary: Rewrite file."
+  - text: ""
+  - img
+- 'button "Index.tsx src/pages/Index.tsx Edit Summary: Rewrite file."':
+  - img
+  - text: ""
+  - button "Edit":
+    - img
+    - text: ""
+  - img
+  - text: ""
 - paragraph: "[[dyad-dump-path=*]]"
 - button "Copy":
   - img
@@ -33,7 +39,10 @@
 - text: less than a minute ago
 - button "Copy Request ID":
   - img
+  - text: ""
 - button "Undo":
   - img
+  - text: ""
 - button "Retry":
-  - img
+  - img
\ No newline at end of file
+  - text: ""
\ No newline at end of file

lint-staged.config.js

 module.exports = {
   "**/*.{ts,tsx}": () => "npm run ts",
   "**/*.{js,mjs,cjs,jsx,ts,mts,cts,tsx,vue,astro,svelte}": "oxlint",
-  "**/*.{js,css,md,ts,tsx,jsx}": "oxfmt",
+  "**/*.{js,css,md,ts,tsx,jsx,json}": "oxfmt",
 };

package-lock.json

@@ -100,7 +100,7 @@
         "@electron-forge/plugin-vite": "^7.11.1",
         "@electron-forge/publisher-github": "^7.11.1",
         "@electron/fuses": "^1.8.0",
-        "@playwright/test": "^1.52.0",
+        "@playwright/test": "^1.58.2",
         "@storybook/addon-essentials": "^8.6.14",
         "@storybook/blocks": "^8.6.14",
         "@storybook/react": "^8.6.15",
@@ -5428,13 +5428,13 @@
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.55.0",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.55.0.tgz",
-      "integrity": "sha512-04IXzPwHrW69XusN/SIdDdKZBzMfOT9UNT/YiJit/xpy2VuAoB8NHc8Aplb96zsWDddLnbkPL3TsmrS04ZU2xQ==",
+      "version": "1.58.2",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.58.2.tgz",
+      "integrity": "sha512-akea+6bHYBBfA9uQqSYmlJXn61cTa+jbO87xVLCWbTqbWadRVmhxlXATaOjOgcBaWU4ePo0wB41KMFv3o35IXA==",
       "devOptional": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "playwright": "1.55.0"
+        "playwright": "1.58.2"
       },
       "bin": {
         "playwright": "cli.js"
@@ -19109,13 +19109,13 @@
       }
     },
     "node_modules/playwright": {
-      "version": "1.55.0",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.55.0.tgz",
-      "integrity": "sha512-sdCWStblvV1YU909Xqx0DhOjPZE4/5lJsIS84IfN9dAZfcl/CIZ5O8l3o0j7hPMjDvqoTF8ZUcc+i/GL5erstA==",
+      "version": "1.58.2",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.58.2.tgz",
+      "integrity": "sha512-vA30H8Nvkq/cPBnNw4Q8TWz1EJyqgpuinBcHET0YVJVFldr8JDNiU9LaWAE1KqSkRYazuaBhTpB5ZzShOezQ6A==",
       "devOptional": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "playwright-core": "1.55.0"
+        "playwright-core": "1.58.2"
       },
       "bin": {
         "playwright": "cli.js"
@@ -19128,9 +19128,9 @@
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.55.0",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.55.0.tgz",
-      "integrity": "sha512-GvZs4vU3U5ro2nZpeiwyb0zuFaqb9sUiAJuyrWpcGouD8y9/HLgGbNRjIph7zU9D3hnPaisMl9zG9CgFi/biIg==",
+      "version": "1.58.2",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.58.2.tgz",
+      "integrity": "sha512-yZkEtftgwS8CsfYo7nm0KE8jsvm6i/PTgVtB8DL726wNf6H2IMsDuxCpJj59KDaxCtSnrWan2AeDqM7JBaultg==",
       "devOptional": true,
       "license": "Apache-2.0",
       "bin": {

package.json

@@ -137,7 +137,7 @@
     "@electron-forge/plugin-vite": "^7.11.1",
     "@electron-forge/publisher-github": "^7.11.1",
     "@electron/fuses": "^1.8.0",
-    "@playwright/test": "^1.52.0",
+    "@playwright/test": "^1.58.2",
     "@storybook/addon-essentials": "^8.6.14",
     "@storybook/blocks": "^8.6.14",
     "@storybook/react": "^8.6.15",

src/components/chat/ChatMessage.tsx

@@ -100,7 +100,7 @@ const ChatMessage = ({ message, isLastMessage }: ChatMessageProps) => {
             <StreamingLoadingAnimation variant="initial" />
           ) : (
             <div
-              className="prose dark:prose-invert prose-headings:mb-2 prose-p:my-1 prose-pre:my-0 max-w-none break-words"
+              className="prose dark:prose-invert prose-headings:mb-2 prose-p:my-1 prose-pre:my-0 max-w-none break-words text-[15px]"
               suppressHydrationWarning
             >
               {message.role === "assistant" ? (

src/components/chat/DyadAddDependency.tsx

@@ -4,8 +4,15 @@ import { useState } from "react";
 
 import { ipc } from "@/ipc/types";
 
-import { Package, ChevronsUpDown, ChevronsDownUp } from "lucide-react";
+import { Package } from "lucide-react";
 import { CodeHighlight } from "./CodeHighlight";
+import {
+  DyadCard,
+  DyadCardHeader,
+  DyadBadge,
+  DyadExpandIcon,
+  DyadCardContent,
+} from "./DyadCardPrimitives";
 
 interface DyadAddDependencyProps {
   children?: ReactNode;
@@ -17,77 +24,61 @@ export const DyadAddDependency: React.FC<DyadAddDependencyProps> = ({
   children,
   node,
 }) => {
-  // Extract package attribute from the node if available
-  const packages = node?.properties?.packages?.split(" ") || "";
+  const packages = node?.properties?.packages
+    ? node.properties.packages.split(" ").filter(Boolean)
+    : [];
   const [isContentVisible, setIsContentVisible] = useState(false);
   const hasChildren = !!children;
 
   return (
-    <div
-      className={`bg-(--background-lightest) dark:bg-gray-900 hover:bg-(--background-lighter) rounded-lg px-4 py-3 border my-2 border-border ${
-        hasChildren ? "cursor-pointer" : ""
-      }`}
+    <DyadCard
+      accentColor="blue"
+      isExpanded={isContentVisible}
       onClick={
         hasChildren ? () => setIsContentVisible(!isContentVisible) : undefined
       }
     >
-      <div className="flex items-center justify-between mb-2">
-        <div className="flex items-center gap-2">
-          <Package size={18} className="text-gray-600 dark:text-gray-400" />
-          {packages.length > 0 && (
-            <div className="text-gray-800 dark:text-gray-200 font-semibold text-base">
-              <div className="font-normal">
-                Do you want to install these packages?
-              </div>{" "}
-              <div className="flex flex-wrap gap-2 mt-2">
-                {packages.map((p: string) => (
-                  <span
-                    className="cursor-pointer text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
-                    key={p}
-                    onClick={() => {
-                      ipc.system.openExternalUrl(
-                        `https://www.npmjs.com/package/${p}`,
-                      );
-                    }}
-                  >
-                    {p}
-                  </span>
-                ))}
-              </div>
-            </div>
-          )}
-        </div>
+      <DyadCardHeader icon={<Package size={15} />} accentColor="blue">
+        <DyadBadge color="blue">Add Packages</DyadBadge>
         {hasChildren && (
-          <div className="flex items-center">
-            {isContentVisible ? (
-              <ChevronsDownUp
-                size={20}
-                className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
-              />
-            ) : (
-              <ChevronsUpDown
-                size={20}
-                className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
-              />
-            )}
+          <div className="ml-auto">
+            <DyadExpandIcon isExpanded={isContentVisible} />
           </div>
         )}
-      </div>
-
+      </DyadCardHeader>
       {packages.length > 0 && (
-        <div className="text-sm text-gray-600 dark:text-gray-400 mb-1">
-          Make sure these packages are what you want.{" "}
+        <div className="px-3 pb-2">
+          <div className="text-sm text-foreground mb-1">
+            Do you want to install these packages?
+          </div>
+          <div className="flex flex-wrap gap-1.5 mt-1.5">
+            {packages.map((p: string) => (
+              <span
+                className="cursor-pointer text-sm px-2 py-0.5 rounded-md bg-blue-50 dark:bg-blue-950/40 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-900/60 ring-1 ring-inset ring-blue-200 dark:ring-blue-800 transition-colors"
+                key={p}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  ipc.system.openExternalUrl(
+                    `https://www.npmjs.com/package/${p}`,
+                  );
+                }}
+              >
+                {p}
+              </span>
+            ))}
+          </div>
+          <div className="text-xs text-muted-foreground mt-2">
+            Make sure these packages are what you want.
+          </div>
         </div>
       )}
-
-      {/* Show content if it's visible and has children */}
-      {isContentVisible && hasChildren && (
-        <div className="mt-2">
+      <DyadCardContent isExpanded={isContentVisible}>
+        {hasChildren && (
           <div className="text-xs">
             <CodeHighlight className="language-shell">{children}</CodeHighlight>
           </div>
-        </div>
-      )}
-    </div>
+        )}
+      </DyadCardContent>
+    </DyadCard>
   );
 };

src/components/chat/DyadAddIntegration.tsx

@@ -7,6 +7,8 @@ import { useAtomValue } from "jotai";
 import { showError } from "@/lib/toast";
 import { useLoadApp } from "@/hooks/useLoadApp";
 import { useStreamChat } from "@/hooks/useStreamChat";
+import { CheckCircle2, Plug } from "lucide-react";
+import { DyadCard, DyadCardHeader, DyadBadge } from "./DyadCardPrimitives";
 
 interface DyadAddIntegrationProps {
   node: {
@@ -50,65 +52,47 @@ export const DyadAddIntegration: React.FC<DyadAddIntegrationProps> = ({
 
   if (app?.supabaseProjectName) {
     return (
-      <div className="flex flex-col my-2 p-3 border border-green-300 dark:border-green-800/50 rounded-lg bg-green-50 dark:bg-green-900/20 shadow-sm">
-        <div className="flex items-center space-x-2">
-          <svg
-            className="w-5 h-5 text-green-600 dark:text-green-400"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth={2}
-            viewBox="0 0 24 24"
-          >
-            <circle
-              cx="12"
-              cy="12"
-              r="10"
-              stroke="currentColor"
-              strokeWidth="2"
-              fill="currentColor"
-              className="opacity-20"
-            />
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              d="M9 12l2 2 4-4"
-            />
-          </svg>
-          <span className="font-semibold text-green-800 dark:text-green-300">
+      <DyadCard accentColor="green" state="finished">
+        <DyadCardHeader icon={<CheckCircle2 size={15} />} accentColor="green">
+          <DyadBadge color="green">Integration Complete</DyadBadge>
+          <span className="text-sm font-medium text-foreground">
             Supabase integration complete
           </span>
-        </div>
-        <div className="text-sm text-green-900 dark:text-green-100">
-          <p>
+        </DyadCardHeader>
+        <div className="px-3 pb-3">
+          <p className="text-sm text-muted-foreground mb-2">
             This app is connected to Supabase project:{" "}
-            <span className="font-mono font-medium bg-green-100 dark:bg-green-900/40 px-1 py-0.5 rounded">
+            <span className="font-mono font-medium px-1.5 py-0.5 rounded bg-green-100 dark:bg-green-900/40 text-green-800 dark:text-green-200">
               {app.supabaseProjectName}
             </span>
           </p>
+          <Button
+            onClick={handleKeepGoingClick}
+            variant="default"
+            disabled={isStreaming}
+            size="sm"
+          >
+            Continue
+          </Button>
         </div>
-        <Button
-          onClick={handleKeepGoingClick}
-          className="self-start mt-2"
-          variant="default"
-          disabled={isStreaming}
-        >
-          Continue
-        </Button>
-      </div>
+      </DyadCard>
     );
   }
 
   return (
-    <div className="flex flex-col gap-2 my-2 p-3 border rounded-md bg-secondary/10 dark:bg-secondary/20">
-      <div className="text-sm">
-        <div className="font-medium text-foreground">
+    <DyadCard accentColor="blue">
+      <DyadCardHeader icon={<Plug size={15} />} accentColor="blue">
+        <DyadBadge color="blue">Integration</DyadBadge>
+        <span className="text-sm font-medium text-foreground">
           Integrate with {provider}?
-        </div>
-        <div className="text-muted-foreground text-xs">{children}</div>
+        </span>
+      </DyadCardHeader>
+      <div className="px-3 pb-3">
+        <div className="text-xs text-muted-foreground mb-3">{children}</div>
+        <Button onClick={handleSetupClick} className="w-full" size="sm">
+          Set up {provider}
+        </Button>
       </div>
-      <Button onClick={handleSetupClick} className="self-start w-full">
-        Set up {provider}
-      </Button>
-    </div>
+    </DyadCard>
   );
 };

src/components/chat/DyadCardPrimitives.tsx

+import React, { useEffect, useState } from "react";
+import { ChevronRight, Loader2, CircleX, CheckCircle2 } from "lucide-react";
+import { CustomTagState } from "./stateTypes";
+
+/**
+ * Accent color configuration for DyadCard components.
+ * Maps to Tailwind color classes for border, background, and text.
+ */
+export type DyadAccentColor =
+  | "blue"
+  | "purple"
+  | "violet"
+  | "red"
+  | "amber"
+  | "green"
+  | "emerald"
+  | "teal"
+  | "sky"
+  | "indigo"
+  | "slate";
+
+const ACCENT_BORDER: Record<DyadAccentColor, string> = {
+  blue: "border-l-blue-500",
+  purple: "border-l-purple-500",
+  violet: "border-l-violet-500",
+  red: "border-l-red-500",
+  amber: "border-l-amber-500",
+  green: "border-l-green-500",
+  emerald: "border-l-emerald-500",
+  teal: "border-l-teal-500",
+  sky: "border-l-sky-500",
+  indigo: "border-l-indigo-500",
+  slate: "border-l-slate-400",
+};
+
+const ACCENT_ICON_BG: Record<DyadAccentColor, string> = {
+  blue: "bg-blue-100 dark:bg-blue-950 text-blue-600 dark:text-blue-400",
+  purple:
+    "bg-purple-100 dark:bg-purple-950 text-purple-600 dark:text-purple-400",
+  violet:
+    "bg-violet-100 dark:bg-violet-950 text-violet-600 dark:text-violet-400",
+  red: "bg-red-100 dark:bg-red-950 text-red-600 dark:text-red-400",
+  amber: "bg-amber-100 dark:bg-amber-950 text-amber-600 dark:text-amber-400",
+  green: "bg-green-100 dark:bg-green-950 text-green-600 dark:text-green-400",
+  emerald:
+    "bg-emerald-100 dark:bg-emerald-950 text-emerald-600 dark:text-emerald-400",
+  teal: "bg-teal-100 dark:bg-teal-950 text-teal-600 dark:text-teal-400",
+  sky: "bg-sky-100 dark:bg-sky-950 text-sky-600 dark:text-sky-400",
+  indigo:
+    "bg-indigo-100 dark:bg-indigo-950 text-indigo-600 dark:text-indigo-400",
+  slate: "bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400",
+};
+
+const ACCENT_BADGE: Record<DyadAccentColor, string> = {
+  blue: "bg-blue-50 dark:bg-blue-950/60 text-blue-700 dark:text-blue-300 ring-blue-200 dark:ring-blue-800",
+  purple:
+    "bg-purple-50 dark:bg-purple-950/60 text-purple-700 dark:text-purple-300 ring-purple-200 dark:ring-purple-800",
+  violet:
+    "bg-violet-50 dark:bg-violet-950/60 text-violet-700 dark:text-violet-300 ring-violet-200 dark:ring-violet-800",
+  red: "bg-red-50 dark:bg-red-950/60 text-red-700 dark:text-red-300 ring-red-200 dark:ring-red-800",
+  amber:
+    "bg-amber-50 dark:bg-amber-950/60 text-amber-700 dark:text-amber-300 ring-amber-200 dark:ring-amber-800",
+  green:
+    "bg-green-50 dark:bg-green-950/60 text-green-700 dark:text-green-300 ring-green-200 dark:ring-green-800",
+  emerald:
+    "bg-emerald-50 dark:bg-emerald-950/60 text-emerald-700 dark:text-emerald-300 ring-emerald-200 dark:ring-emerald-800",
+  teal: "bg-teal-50 dark:bg-teal-950/60 text-teal-700 dark:text-teal-300 ring-teal-200 dark:ring-teal-800",
+  sky: "bg-sky-50 dark:bg-sky-950/60 text-sky-700 dark:text-sky-300 ring-sky-200 dark:ring-sky-800",
+  indigo:
+    "bg-indigo-50 dark:bg-indigo-950/60 text-indigo-700 dark:text-indigo-300 ring-indigo-200 dark:ring-indigo-800",
+  slate:
+    "bg-slate-50 dark:bg-slate-900/60 text-slate-700 dark:text-slate-300 ring-slate-200 dark:ring-slate-700",
+};
+
+// -- DyadCard --
+
+interface DyadCardProps {
+  children: React.ReactNode;
+  state?: CustomTagState;
+  accentColor?: DyadAccentColor;
+  showAccent?: boolean;
+  variant?: "default" | "ghost";
+  onClick?: () => void;
+  isExpanded?: boolean;
+  className?: string;
+  "data-testid"?: string;
+}
+
+/**
+ * Premium container for all Dyad markdown action cards.
+ * Provides consistent borders, backgrounds, hover states, and a colored
+ * left-accent border when the action is pending or aborted (or when
+ * `showAccent` is explicitly set).
+ *
+ * When `onClick` is provided, the card behaves as an interactive button
+ * with keyboard support (Enter/Space) and appropriate ARIA attributes.
+ */
+export function DyadCard({
+  children,
+  state,
+  accentColor = "blue",
+  showAccent,
+  variant = "default",
+  onClick,
+  isExpanded,
+  className = "",
+  ...props
+}: DyadCardProps) {
+  const isPending = state === "pending";
+  const isAborted = state === "aborted";
+
+  const shouldShowAccent = showAccent ?? (isPending || isAborted);
+  const leftBorder = shouldShowAccent
+    ? `border-l-[3px] ${isAborted ? "border-l-red-500" : ACCENT_BORDER[accentColor]}`
+    : "";
+
+  const variantClasses =
+    variant === "ghost"
+      ? "hover:bg-(--background-lightest) rounded-lg"
+      : `bg-(--background-lightest) hover:bg-(--background-lighter) rounded-xl border border-border/60 ${leftBorder}`;
+
+  return (
+    <div
+      className={`
+        group/card
+        ${variantClasses}
+        my-1.5 transition-colors duration-150
+        ${onClick ? "cursor-pointer" : ""}
+        ${className}
+      `}
+      onClick={onClick}
+      role={onClick ? "button" : undefined}
+      tabIndex={onClick ? 0 : undefined}
+      aria-expanded={
+        onClick && isExpanded !== undefined ? isExpanded : undefined
+      }
+      onKeyDown={
+        onClick
+          ? (e) => {
+              if (
+                (e.key === "Enter" || e.key === " ") &&
+                e.target === e.currentTarget
+              ) {
+                e.preventDefault();
+                onClick();
+              }
+            }
+          : undefined
+      }
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+// -- DyadCardHeader --
+
+interface DyadCardHeaderProps {
+  icon: React.ReactNode;
+  accentColor?: DyadAccentColor;
+  children?: React.ReactNode;
+}
+
+/**
+ * Header row for DyadCard. Contains a tinted icon circle and flexible content area.
+ */
+export function DyadCardHeader({
+  icon,
+  accentColor = "blue",
+  children,
+}: DyadCardHeaderProps) {
+  return (
+    <div className="flex items-center gap-2.5 px-3 py-2">
+      <div
+        className={`flex items-center justify-center size-7 rounded-lg shrink-0 ${ACCENT_ICON_BG[accentColor]}`}
+      >
+        {icon}
+      </div>
+      <div className="flex-1 min-w-0 flex items-center gap-2">{children}</div>
+    </div>
+  );
+}
+
+// -- DyadBadge --
+
+interface DyadBadgeProps {
+  children: React.ReactNode;
+  color?: DyadAccentColor;
+}
+
+/**
+ * Small pill badge for labeling card types (e.g. "GREP", "Turbo Edit", "SQL").
+ */
+export function DyadBadge({ children, color = "blue" }: DyadBadgeProps) {
+  return (
+    <span
+      className={`inline-flex items-center text-[11px] font-semibold px-1.5 py-0.5 rounded-md ring-1 ring-inset ${ACCENT_BADGE[color]}`}
+    >
+      {children}
+    </span>
+  );
+}
+
+// -- DyadExpandIcon --
+
+interface DyadExpandIconProps {
+  isExpanded: boolean;
+}
+
+/**
+ * Animated chevron icon for expand/collapse. Rotates 90 degrees when expanded.
+ */
+export function DyadExpandIcon({ isExpanded }: DyadExpandIconProps) {
+  return (
+    <ChevronRight
+      size={16}
+      className={`shrink-0 text-muted-foreground transition-transform duration-200 ${
+        isExpanded ? "rotate-90" : ""
+      }`}
+    />
+  );
+}
+
+// -- DyadStateIndicator --
+
+interface DyadStateIndicatorProps {
+  state: CustomTagState;
+  pendingLabel?: string;
+  abortedLabel?: string;
+  finishedLabel?: string;
+}
+
+/**
+ * Renders a spinner (pending), X icon (aborted), or checkmark (finished).
+ * Includes an optional text label for each state.
+ */
+export function DyadStateIndicator({
+  state,
+  pendingLabel,
+  abortedLabel,
+  finishedLabel,
+}: DyadStateIndicatorProps) {
+  if (state === "pending") {
+    return (
+      <span className="inline-flex items-center gap-1 text-amber-600 dark:text-amber-400 text-xs shrink-0">
+        <Loader2 size={14} className="animate-spin" />
+        {pendingLabel && <span>{pendingLabel}</span>}
+      </span>
+    );
+  }
+
+  if (state === "aborted") {
+    return (
+      <span className="inline-flex items-center gap-1 text-red-500 dark:text-red-400 text-xs shrink-0">
+        <CircleX size={14} />
+        {abortedLabel && <span>{abortedLabel}</span>}
+      </span>
+    );
+  }
+
+  if (state === "finished") {
+    return (
+      <span className="inline-flex items-center gap-1 text-green-600 dark:text-green-500 text-xs shrink-0">
+        <CheckCircle2 size={14} />
+        {finishedLabel && <span>{finishedLabel}</span>}
+      </span>
+    );
+  }
+
+  return null;
+}
+
+// -- DyadFinishedIcon --
+
+/**
+ * Small green checkmark for completed state, useful for status-type cards.
+ */
+export function DyadFinishedIcon() {
+  return (
+    <CheckCircle2 className="size-4 text-green-600 dark:text-green-500 shrink-0" />
+  );
+}
+
+// -- DyadCardContent --
+
+interface DyadCardContentProps {
+  isExpanded: boolean;
+  children: React.ReactNode;
+  className?: string;
+}
+
+/**
+ * Expandable content area using CSS grid for smooth height animation.
+ * Uses lazy mounting: children are only rendered after the first expansion,
+ * preventing heavy components from initializing when collapsed.
+ */
+export function DyadCardContent({
+  isExpanded,
+  children,
+  className = "",
+}: DyadCardContentProps) {
+  const [hasExpanded, setHasExpanded] = useState(false);
+
+  useEffect(() => {
+    if (isExpanded && !hasExpanded) {
+      setHasExpanded(true);
+    }
+  }, [isExpanded]);
+
+  return (
+    <div
+      className={`grid transition-all duration-200 ease-in-out ${
+        isExpanded
+          ? "grid-rows-[1fr] opacity-100"
+          : "grid-rows-[0fr] opacity-0 pointer-events-none"
+      } ${className}`}
+    >
+      <div className="overflow-hidden">
+        <div className="px-3 pb-3">{hasExpanded ? children : null}</div>
+      </div>
+    </div>
+  );
+}
+
+// -- DyadFilePath --
+
+interface DyadFilePathProps {
+  path: string;
+}
+
+/**
+ * Styled file path display with monospace font and muted color.
+ */
+export function DyadFilePath({ path }: DyadFilePathProps) {
+  if (!path) return null;
+  return (
+    <div className="px-3 pb-1">
+      <span className="text-[11px] text-muted-foreground font-mono truncate block">
+        {path}
+      </span>
+    </div>
+  );
+}
+
+// -- DyadDescription --
+
+interface DyadDescriptionProps {
+  children: React.ReactNode;
+}
+
+/**
+ * Description/summary text below the header.
+ */
+export function DyadDescription({ children }: DyadDescriptionProps) {
+  return (
+    <div className="px-3 pb-2 text-xs text-muted-foreground">{children}</div>
+  );
+}

src/components/chat/DyadCodeSearch.tsx

 import type React from "react";
 import { useState, type ReactNode } from "react";
-import { ChevronDown, ChevronUp, FileCode, Loader } from "lucide-react";
+import { FileCode } from "lucide-react";
 import { CustomTagState } from "./stateTypes";
+import {
+  DyadCard,
+  DyadCardHeader,
+  DyadBadge,
+  DyadExpandIcon,
+  DyadStateIndicator,
+  DyadCardContent,
+} from "./DyadCardPrimitives";
 
 interface DyadCodeSearchProps {
   children?: ReactNode;
@@ -19,78 +27,48 @@ export const DyadCodeSearch: React.FC<DyadCodeSearchProps> = ({
   const inProgress = state === "pending";
 
   return (
-    <div
-      className={`bg-(--background-lightest) dark:bg-zinc-900 hover:bg-(--background-lighter) rounded-lg px-4 py-2 border my-2 cursor-pointer ${
-        inProgress ? "border-purple-500" : "border-border"
-      }`}
+    <DyadCard
+      state={state}
+      accentColor="indigo"
       onClick={() => setIsExpanded(!isExpanded)}
-      role="button"
-      aria-expanded={isExpanded}
-      tabIndex={0}
-      onKeyDown={(e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          setIsExpanded(!isExpanded);
-        }
-      }}
+      isExpanded={isExpanded}
     >
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <FileCode size={16} className="text-purple-600" />
-          <div className="text-xs text-purple-600 font-medium">Code Search</div>
-          {inProgress && (
-            <div className="flex items-center text-purple-600 text-xs">
-              <Loader size={14} className="mr-1 animate-spin" />
-              <span>Searching...</span>
-            </div>
-          )}
-        </div>
-        <div className="p-1 text-gray-500">
-          {isExpanded ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
+      <DyadCardHeader icon={<FileCode size={15} />} accentColor="indigo">
+        <DyadBadge color="indigo">Code Search</DyadBadge>
+        {!isExpanded && query && (
+          <span className="text-sm text-muted-foreground italic truncate">
+            {query}
+          </span>
+        )}
+        {inProgress && (
+          <DyadStateIndicator state="pending" pendingLabel="Searching..." />
+        )}
+        <div className="ml-auto">
+          <DyadExpandIcon isExpanded={isExpanded} />
         </div>
-      </div>
-
-      {/* Collapsed preview - show query */}
-      <div
-        className="text-sm italic text-gray-600 dark:text-gray-300 mt-2 overflow-hidden transition-all duration-300 ease-in-out"
-        style={{
-          maxHeight: isExpanded ? "0px" : "3em",
-          opacity: isExpanded ? 0 : 1,
-        }}
-      >
-        {query}
-      </div>
-
-      {/* Expanded content */}
-      <div
-        className="overflow-hidden transition-all duration-300 ease-in-out"
-        style={{
-          maxHeight: isExpanded ? "none" : "0px",
-          opacity: isExpanded ? 1 : 0,
-          marginTop: isExpanded ? "0.5rem" : "0",
-        }}
-      >
-        <div className="text-sm text-gray-600 dark:text-gray-300 space-y-2">
+      </DyadCardHeader>
+      <DyadCardContent isExpanded={isExpanded}>
+        <div className="text-sm text-muted-foreground space-y-2">
           {query && (
             <div>
-              <span className="text-xs font-medium text-gray-500 dark:text-gray-400">
+              <span className="text-xs font-medium text-muted-foreground">
                 Query:
               </span>
-              <div className="italic mt-0.5">{query}</div>
+              <div className="italic mt-0.5 text-foreground">{query}</div>
             </div>
           )}
           {children && (
             <div>
-              <span className="text-xs font-medium text-gray-500 dark:text-gray-400">
+              <span className="text-xs font-medium text-muted-foreground">
                 Results:
               </span>
-              <div className="mt-0.5 whitespace-pre-wrap font-mono text-xs">
+              <div className="mt-0.5 whitespace-pre-wrap font-mono text-xs text-foreground">
                 {children}
               </div>
             </div>
           )}
         </div>
-      </div>
-    </div>
+      </DyadCardContent>
+    </DyadCard>
   );
 };

src/components/chat/DyadCodeSearchResult.tsx

 import React, { useState, useMemo } from "react";
-import { ChevronDown, ChevronUp, FileCode, FileText } from "lucide-react";
+import { FileCode, FileText } from "lucide-react";
+import {
+  DyadCard,
+  DyadCardHeader,
+  DyadBadge,
+  DyadExpandIcon,
+  DyadCardContent,
+} from "./DyadCardPrimitives";
 
 interface DyadCodeSearchResultProps {
   node?: any;
@@ -11,7 +18,6 @@ export const DyadCodeSearchResult: React.FC<DyadCodeSearchResultProps> = ({
 }) => {
   const [isExpanded, setIsExpanded] = useState(false);
 
-  // Parse file paths from children content
   const files = useMemo(() => {
     if (typeof children !== "string") {
       return [];
@@ -22,7 +28,6 @@ export const DyadCodeSearchResult: React.FC<DyadCodeSearchResultProps> = ({
 
     for (const line of lines) {
       const trimmedLine = line.trim();
-      // Skip empty lines and lines that look like tags
       if (
         trimmedLine &&
         !trimmedLine.startsWith("<") &&
@@ -36,88 +41,53 @@ export const DyadCodeSearchResult: React.FC<DyadCodeSearchResultProps> = ({
   }, [children]);
 
   return (
-    <div
-      className="relative bg-(--background-lightest) dark:bg-zinc-900 hover:bg-(--background-lighter) rounded-lg px-4 py-2 border border-border my-2 cursor-pointer"
+    <DyadCard
+      accentColor="indigo"
+      isExpanded={isExpanded}
       onClick={() => setIsExpanded(!isExpanded)}
-      role="button"
-      aria-expanded={isExpanded}
-      tabIndex={0}
-      onKeyDown={(e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          setIsExpanded(!isExpanded);
-        }
-      }}
     >
-      {/* Top-left label badge */}
-      <div
-        className="absolute top-2 left-2 flex items-center gap-1 px-2 py-0.5 rounded text-xs font-semibold text-purple-600 bg-white dark:bg-zinc-900"
-        style={{ zIndex: 1 }}
-      >
-        <FileCode size={16} className="text-purple-600" />
-        <span>Code Search Result</span>
-      </div>
-
-      {/* File count when collapsed */}
-      {files.length > 0 && (
-        <div className="absolute top-2 left-44 flex items-center">
-          <span className="px-1.5 py-0.5 bg-gray-100 dark:bg-zinc-800 text-xs rounded text-gray-600 dark:text-gray-300">
+      <DyadCardHeader icon={<FileCode size={15} />} accentColor="indigo">
+        <DyadBadge color="indigo">Code Search Result</DyadBadge>
+        {files.length > 0 && (
+          <span className="text-xs text-muted-foreground">
             Found {files.length} file{files.length !== 1 ? "s" : ""}
           </span>
+        )}
+        <div className="ml-auto">
+          <DyadExpandIcon isExpanded={isExpanded} />
         </div>
-      )}
-
-      {/* Indicator icon */}
-      <div className="absolute top-2 right-2 p-1 text-gray-500">
-        {isExpanded ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
-      </div>
-
-      {/* Main content with smooth transition */}
-      <div
-        className="pt-6 overflow-hidden transition-all duration-300 ease-in-out"
-        style={{
-          maxHeight: isExpanded ? "1000px" : "0px",
-          opacity: isExpanded ? 1 : 0,
-          marginBottom: isExpanded ? "0" : "-6px",
-        }}
-      >
-        {/* File list when expanded */}
+      </DyadCardHeader>
+      <DyadCardContent isExpanded={isExpanded}>
         {files.length > 0 && (
-          <div className="mb-3">
-            <div className="flex flex-wrap gap-2 mt-2">
-              {files.map((file, index) => {
-                const filePath = file.trim();
-                const fileName = filePath.split("/").pop() || filePath;
-                const pathPart =
-                  filePath.substring(0, filePath.length - fileName.length) ||
-                  "";
+          <div className="flex flex-wrap gap-1.5">
+            {files.map((file, index) => {
+              const filePath = file.trim();
+              const fileName = filePath.split("/").pop() || filePath;
+              const pathPart =
+                filePath.substring(0, filePath.length - fileName.length) || "";
 
-                return (
-                  <div
-                    key={index}
-                    className="px-2 py-1 bg-gray-100 dark:bg-zinc-800 rounded-lg"
-                  >
-                    <div className="flex items-center gap-1.5">
-                      <FileText
-                        size={14}
-                        className="text-gray-500 dark:text-gray-400 flex-shrink-0"
-                      />
-                      <div className="text-sm font-medium text-gray-700 dark:text-gray-300">
-                        {fileName}
-                      </div>
-                    </div>
-                    {pathPart && (
-                      <div className="text-xs text-gray-500 dark:text-gray-400 ml-5">
-                        {pathPart}
-                      </div>
-                    )}
+              return (
+                <div key={index} className="px-2 py-1 bg-muted/40 rounded-lg">
+                  <div className="flex items-center gap-1.5">
+                    <FileText
+                      size={13}
+                      className="text-muted-foreground shrink-0"
+                    />
+                    <span className="text-sm font-medium text-foreground">
+                      {fileName}
+                    </span>
                   </div>
-                );
-              })}
-            </div>
+                  {pathPart && (
+                    <div className="text-[11px] text-muted-foreground ml-5 font-mono">
+                      {pathPart}
+                    </div>
+                  )}
+                </div>
+              );
+            })}
           </div>
         )}
-      </div>
-    </div>
+      </DyadCardContent>
+    </DyadCard>
   );
 };

src/components/chat/DyadCodebaseContext.tsx

 import React, { useState, useEffect } from "react";
-import { ChevronUp, ChevronDown, Code2, FileText } from "lucide-react";
+import { Code2, FileText } from "lucide-react";
 import { CustomTagState } from "./stateTypes";
+import {
+  DyadCard,
+  DyadCardHeader,
+  DyadBadge,
+  DyadExpandIcon,
+  DyadStateIndicator,
+  DyadCardContent,
+} from "./DyadCardPrimitives";
 
 interface DyadCodebaseContextProps {
   children: React.ReactNode;
@@ -20,7 +28,6 @@ export const DyadCodebaseContext: React.FC<DyadCodebaseContextProps> = ({
   const [isExpanded, setIsExpanded] = useState(inProgress);
   const files = node?.properties?.files?.split(",") || [];
 
-  // Collapse when transitioning from in-progress to not-in-progress
   useEffect(() => {
     if (!inProgress && isExpanded) {
       setIsExpanded(false);
@@ -28,90 +35,55 @@ export const DyadCodebaseContext: React.FC<DyadCodebaseContextProps> = ({
   }, [inProgress]);
 
   return (
-    <div
-      className={`relative bg-(--background-lightest) dark:bg-zinc-900 hover:bg-(--background-lighter) rounded-lg px-4 py-2 border my-2 cursor-pointer ${
-        inProgress ? "border-blue-500" : "border-border"
-      }`}
+    <DyadCard
+      state={state}
+      accentColor="blue"
       onClick={() => setIsExpanded(!isExpanded)}
-      role="button"
-      aria-expanded={isExpanded}
-      tabIndex={0}
-      onKeyDown={(e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          setIsExpanded(!isExpanded);
-        }
-      }}
+      isExpanded={isExpanded}
     >
-      {/* Top-left label badge */}
-      <div
-        className="absolute top-2 left-2 flex items-center gap-1 px-2 py-0.5 rounded text-xs font-semibold text-blue-500 bg-white dark:bg-zinc-900"
-        style={{ zIndex: 1 }}
-      >
-        <Code2 size={16} className="text-blue-500" />
-        <span>Codebase Context</span>
-      </div>
-
-      {/* File count when collapsed */}
-      {files.length > 0 && (
-        <div className="absolute top-2 left-40 flex items-center">
-          <span className="px-1.5 py-0.5 bg-gray-100 dark:bg-zinc-800 text-xs rounded text-gray-600 dark:text-gray-300">
+      <DyadCardHeader icon={<Code2 size={15} />} accentColor="blue">
+        <DyadBadge color="blue">Codebase Context</DyadBadge>
+        {files.length > 0 && (
+          <span className="text-xs text-muted-foreground">
             Using {files.length} file{files.length !== 1 ? "s" : ""}
           </span>
+        )}
+        {inProgress && <DyadStateIndicator state="pending" />}
+        <div className="ml-auto">
+          <DyadExpandIcon isExpanded={isExpanded} />
         </div>
-      )}
-
-      {/* Indicator icon */}
-      <div className="absolute top-2 right-2 p-1 text-gray-500">
-        {isExpanded ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
-      </div>
-
-      {/* Main content with smooth transition */}
-      <div
-        className="pt-6 overflow-hidden transition-all duration-300 ease-in-out"
-        style={{
-          maxHeight: isExpanded ? "1000px" : "0px",
-          opacity: isExpanded ? 1 : 0,
-          marginBottom: isExpanded ? "0" : "-6px", // Compensate for padding
-        }}
-      >
-        {/* File list when expanded */}
+      </DyadCardHeader>
+      <DyadCardContent isExpanded={isExpanded}>
         {files.length > 0 && (
-          <div className="mb-3">
-            <div className="flex flex-wrap gap-2 mt-2">
-              {files.map((file, index) => {
-                const filePath = file.trim();
-                const fileName = filePath.split("/").pop() || filePath;
-                const pathPart =
-                  filePath.substring(0, filePath.length - fileName.length) ||
-                  "";
+          <div className="flex flex-wrap gap-1.5">
+            {files.map((file, index) => {
+              const filePath = file.trim();
+              const fileName = filePath.split("/").pop() || filePath;
+              const pathPart =
+                filePath.substring(0, filePath.length - fileName.length) || "";
 
-                return (
-                  <div
-                    key={index}
-                    className="px-2 py-1     bg-gray-100 dark:bg-zinc-800 rounded-lg"
-                  >
-                    <div className="flex items-center gap-1.5">
-                      <FileText
-                        size={14}
-                        className="text-gray-500 dark:text-gray-400 flex-shrink-0"
-                      />
-                      <div className="text-sm font-medium text-gray-700 dark:text-gray-300">
-                        {fileName}
-                      </div>
-                    </div>
-                    {pathPart && (
-                      <div className="text-xs text-gray-500 dark:text-gray-400 ml-5">
-                        {pathPart}
-                      </div>
-                    )}
+              return (
+                <div key={index} className="px-2 py-1 bg-muted/40 rounded-lg">
+                  <div className="flex items-center gap-1.5">
+                    <FileText
+                      size={13}
+                      className="text-muted-foreground shrink-0"
+                    />
+                    <span className="text-sm font-medium text-foreground">
+                      {fileName}
+                    </span>
                   </div>
-                );
-              })}
-            </div>
+                  {pathPart && (
+                    <div className="text-[11px] text-muted-foreground ml-5 font-mono">
+                      {pathPart}
+                    </div>
+                  )}
+                </div>
+              );
+            })}
           </div>
         )}
-      </div>
-    </div>
+      </DyadCardContent>
+    </DyadCard>
   );
 };

src/components/chat/DyadDatabaseSchema.tsx

 import React from "react";
 import { CustomTagState } from "./stateTypes";
-import { Database, Loader2 } from "lucide-react";
+import { Database } from "lucide-react";
+import {
+  DyadCard,
+  DyadCardHeader,
+  DyadBadge,
+  DyadStateIndicator,
+} from "./DyadCardPrimitives";
 
 interface DyadDatabaseSchemaProps {
   node: {
@@ -20,20 +26,18 @@ export function DyadDatabaseSchema({
   const content = typeof children === "string" ? children : "";
 
   return (
-    <div className="my-2 border rounded-md overflow-hidden">
-      <div className="flex items-center gap-2 px-3 py-2 bg-muted/50 border-b">
-        {isLoading ? (
-          <Loader2 className="size-4 animate-spin text-muted-foreground" />
-        ) : (
-          <Database className="size-4 text-muted-foreground" />
-        )}
-        <span className="font-medium text-sm">Database Schema</span>
-      </div>
+    <DyadCard state={state} accentColor="teal">
+      <DyadCardHeader icon={<Database size={15} />} accentColor="teal">
+        <DyadBadge color="teal">Database Schema</DyadBadge>
+        {isLoading && <DyadStateIndicator state="pending" />}
+      </DyadCardHeader>
       {content && (
-        <div className="p-3 text-xs font-mono whitespace-pre-wrap max-h-60 overflow-y-auto bg-muted/20">
-          {content}
+        <div className="px-3 pb-3">
+          <div className="p-3 text-xs font-mono whitespace-pre-wrap max-h-60 overflow-y-auto bg-muted/20 rounded-lg">
+            {content}
+          </div>
         </div>
       )}
-    </div>
+    </DyadCard>
   );
 }

src/components/chat/DyadDelete.tsx

 import type React from "react";
 import type { ReactNode } from "react";
 import { Trash2 } from "lucide-react";
+import {
+  DyadCard,
+  DyadCardHeader,
+  DyadBadge,
+  DyadFilePath,
+  DyadDescription,
+} from "./DyadCardPrimitives";
+import { CustomTagState } from "./stateTypes";
 
 interface DyadDeleteProps {
   children?: ReactNode;
@@ -13,33 +21,22 @@ export const DyadDelete: React.FC<DyadDeleteProps> = ({
   node,
   path: pathProp,
 }) => {
-  // Use props directly if provided, otherwise extract from node
   const path = pathProp || node?.properties?.path || "";
-
-  // Extract filename from path
+  const state = node?.properties?.state as CustomTagState;
   const fileName = path ? path.split("/").pop() : "";
 
   return (
-    <div className="bg-(--background-lightest) rounded-lg px-4 py-2 border border-red-500 my-2">
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <Trash2 size={16} className="text-red-500" />
-          {fileName && (
-            <span className="text-gray-700 dark:text-gray-300 font-medium text-sm">
-              {fileName}
-            </span>
-          )}
-          <div className="text-xs text-red-500 font-medium">Delete</div>
-        </div>
-      </div>
-      {path && (
-        <div className="text-xs text-gray-500 dark:text-gray-400 font-medium mb-1">
-          {path}
-        </div>
-      )}
-      <div className="text-sm text-gray-600 dark:text-gray-300 mt-2">
-        {children}
-      </div>
-    </div>
+    <DyadCard accentColor="red" state={state}>
+      <DyadCardHeader icon={<Trash2 size={15} />} accentColor="red">
+        {fileName && (
+          <span className="font-medium text-sm text-foreground truncate">
+            {fileName}
+          </span>
+        )}
+        <DyadBadge color="red">Delete</DyadBadge>
+      </DyadCardHeader>
+      <DyadFilePath path={path} />
+      {children && <DyadDescription>{children}</DyadDescription>}
+    </DyadCard>
   );
 };

src/components/chat/DyadEdit.tsx

 import type React from "react";
 import type { ReactNode } from "react";
 import { useState } from "react";
-import {
-  ChevronsDownUp,
-  ChevronsUpDown,
-  Loader,
-  CircleX,
-  Rabbit,
-} from "lucide-react";
+import { Zap } from "lucide-react";
 import { CodeHighlight } from "./CodeHighlight";
 import { CustomTagState } from "./stateTypes";
+import {
+  DyadCard,
+  DyadCardHeader,
+  DyadBadge,
+  DyadExpandIcon,
+  DyadStateIndicator,
+  DyadDescription,
+  DyadCardContent,
+} from "./DyadCardPrimitives";
 
 interface DyadEditProps {
   children?: ReactNode;
@@ -26,79 +29,54 @@ export const DyadEdit: React.FC<DyadEditProps> = ({
 }) => {
   const [isContentVisible, setIsContentVisible] = useState(false);
 
-  // Use props directly if provided, otherwise extract from node
   const path = pathProp || node?.properties?.path || "";
   const description = descriptionProp || node?.properties?.description || "";
   const state = node?.properties?.state as CustomTagState;
   const inProgress = state === "pending";
   const aborted = state === "aborted";
 
-  // Extract filename from path
   const fileName = path ? path.split("/").pop() : "";
 
   return (
-    <div
-      className={`bg-(--background-lightest) hover:bg-(--background-lighter) rounded-lg px-4 py-2 border my-2 cursor-pointer ${
-        inProgress
-          ? "border-amber-500"
-          : aborted
-            ? "border-red-500"
-            : "border-border"
-      }`}
+    <DyadCard
+      state={state}
+      accentColor="sky"
       onClick={() => setIsContentVisible(!isContentVisible)}
+      isExpanded={isContentVisible}
     >
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <div className="flex items-center">
-            <Rabbit size={16} />
-            <span className="bg-blue-500 text-white text-xs px-1.5 py-0.5 rounded ml-1 font-medium">
-              Turbo Edit
-            </span>
-          </div>
+      <DyadCardHeader icon={<Zap size={15} />} accentColor="sky">
+        <div className="min-w-0 truncate">
           {fileName && (
-            <span className="text-gray-700 dark:text-gray-300 font-medium text-sm">
+            <span className="font-medium text-sm text-foreground truncate block">
               {fileName}
             </span>
           )}
-          {inProgress && (
-            <div className="flex items-center text-amber-600 text-xs">
-              <Loader size={14} className="mr-1 animate-spin" />
-              <span>Editing...</span>
-            </div>
-          )}
-          {aborted && (
-            <div className="flex items-center text-red-600 text-xs">
-              <CircleX size={14} className="mr-1" />
-              <span>Did not finish</span>
-            </div>
-          )}
-        </div>
-        <div className="flex items-center">
-          {isContentVisible ? (
-            <ChevronsDownUp
-              size={20}
-              className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
-            />
-          ) : (
-            <ChevronsUpDown
-              size={20}
-              className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
-            />
+          {path && (
+            <span className="text-[11px] text-muted-foreground truncate block">
+              {path}
+            </span>
           )}
         </div>
-      </div>
-      {path && (
-        <div className="text-xs text-gray-500 dark:text-gray-400 font-medium mb-1">
-          {path}
+        {inProgress && (
+          <DyadStateIndicator state="pending" pendingLabel="Editing..." />
+        )}
+        {aborted && (
+          <DyadStateIndicator state="aborted" abortedLabel="Did not finish" />
+        )}
+        <div className="ml-auto flex items-center gap-1">
+          <DyadBadge color="sky">Turbo Edit</DyadBadge>
+          <DyadExpandIcon isExpanded={isContentVisible} />
         </div>
-      )}
+      </DyadCardHeader>
       {description && (
-        <div className="text-sm text-gray-600 dark:text-gray-300">
-          <span className="font-medium">Summary: </span>
-          {description}
-        </div>
+        <DyadDescription>
+          <span className={!isContentVisible ? "line-clamp-2" : undefined}>
+            <span className="font-medium">Summary: </span>
+            {description}
+          </span>
+        </DyadDescription>
       )}
-      {isContentVisible && (
+      <DyadCardContent isExpanded={isContentVisible}>
         <div
           className="text-xs cursor-text"
           onClick={(e) => e.stopPropagation()}
@@ -107,7 +85,7 @@ export const DyadEdit: React.FC<DyadEditProps> = ({
             {children}
           </CodeHighlight>
         </div>
-      )}
-    </div>
+      </DyadCardContent>
+    </DyadCard>
   );
 };

src/components/chat/DyadExecuteSql.tsx

 import type React from "react";
 import type { ReactNode } from "react";
 import { useState } from "react";
-import {
-  ChevronsDownUp,
-  ChevronsUpDown,
-  Database,
-  Loader,
-  CircleX,
-} from "lucide-react";
+import { Database } from "lucide-react";
 import { CodeHighlight } from "./CodeHighlight";
 import { CustomTagState } from "./stateTypes";
+import {
+  DyadCard,
+  DyadCardHeader,
+  DyadBadge,
+  DyadExpandIcon,
+  DyadStateIndicator,
+  DyadCardContent,
+} from "./DyadCardPrimitives";
 
 interface DyadExecuteSqlProps {
   children?: ReactNode;
@@ -29,57 +31,34 @@ export const DyadExecuteSql: React.FC<DyadExecuteSqlProps> = ({
   const queryDescription = description || node?.properties?.description;
 
   return (
-    <div
-      className={`bg-(--background-lightest) hover:bg-(--background-lighter) rounded-lg px-4 py-2 border my-2 cursor-pointer ${
-        inProgress
-          ? "border-amber-500"
-          : aborted
-            ? "border-red-500"
-            : "border-border"
-      }`}
+    <DyadCard
+      state={state}
+      accentColor="teal"
+      isExpanded={isContentVisible}
       onClick={() => setIsContentVisible(!isContentVisible)}
     >
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <Database size={16} />
-          <span className="text-gray-700 dark:text-gray-300 font-medium text-sm">
-            <span className="font-bold mr-2 outline-2 outline-gray-200 dark:outline-gray-700 bg-gray-100 dark:bg-gray-800 rounded-md px-1">
-              SQL
-            </span>
+      <DyadCardHeader icon={<Database size={15} />} accentColor="teal">
+        <DyadBadge color="teal">SQL</DyadBadge>
+        {queryDescription && (
+          <span className="font-medium text-sm text-foreground truncate">
             {queryDescription}
           </span>
-          {inProgress && (
-            <div className="flex items-center text-amber-600 text-xs">
-              <Loader size={14} className="mr-1 animate-spin" />
-              <span>Executing...</span>
-            </div>
-          )}
-          {aborted && (
-            <div className="flex items-center text-red-600 text-xs">
-              <CircleX size={14} className="mr-1" />
-              <span>Did not finish</span>
-            </div>
-          )}
-        </div>
-        <div className="flex items-center">
-          {isContentVisible ? (
-            <ChevronsDownUp
-              size={20}
-              className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
-            />
-          ) : (
-            <ChevronsUpDown
-              size={20}
-              className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
-            />
-          )}
+        )}
+        {inProgress && (
+          <DyadStateIndicator state="pending" pendingLabel="Executing..." />
+        )}
+        {aborted && (
+          <DyadStateIndicator state="aborted" abortedLabel="Did not finish" />
+        )}
+        <div className="ml-auto">
+          <DyadExpandIcon isExpanded={isContentVisible} />
         </div>
-      </div>
-      {isContentVisible && (
+      </DyadCardHeader>
+      <DyadCardContent isExpanded={isContentVisible}>
         <div className="text-xs">
           <CodeHighlight className="language-sql">{children}</CodeHighlight>
         </div>
-      )}
-    </div>
+      </DyadCardContent>
+    </DyadCard>
   );
 };

src/components/chat/DyadGrep.tsx

 import type React from "react";
 import type { ReactNode } from "react";
 import { useState } from "react";
-import {
-  ChevronsDownUp,
-  ChevronsUpDown,
-  Search,
-  Loader,
-  CircleX,
-} from "lucide-react";
+import { Search } from "lucide-react";
 import { CodeHighlight } from "./CodeHighlight";
 import { CustomTagState } from "./stateTypes";
+import {
+  DyadCard,
+  DyadCardHeader,
+  DyadBadge,
+  DyadExpandIcon,
+  DyadStateIndicator,
+  DyadCardContent,
+} from "./DyadCardPrimitives";
 
 interface DyadGrepProps {
   children?: ReactNode;
@@ -30,12 +32,10 @@ interface DyadGrepProps {
 export const DyadGrep: React.FC<DyadGrepProps> = ({ children, node }) => {
   const [isContentVisible, setIsContentVisible] = useState(false);
 
-  // State handling
   const state = node?.properties?.state as CustomTagState;
   const inProgress = state === "pending";
   const aborted = state === "aborted";
 
-  // Get properties from node
   const query = node?.properties?.query || "";
   const includePattern = node?.properties?.include || "";
   const excludePattern = node?.properties?.exclude || "";
@@ -43,9 +43,7 @@ export const DyadGrep: React.FC<DyadGrepProps> = ({ children, node }) => {
   const count = node?.properties?.count || "";
   const total = node?.properties?.total || "";
   const truncated = node?.properties?.truncated === "true";
-  const hasResults = count !== "" && count !== "0";
 
-  // Build description
   let description = `"${query}"`;
   if (includePattern) {
     description += ` in ${includePattern}`;
@@ -57,70 +55,45 @@ export const DyadGrep: React.FC<DyadGrepProps> = ({ children, node }) => {
     description += " (case-sensitive)";
   }
 
-  // Build result summary
   const resultSummary = count
     ? truncated && total
       ? `${count} of ${total} matches`
       : `${count} match${count === "1" ? "" : "es"}`
     : "";
 
-  // Dynamic border styling
-  const borderClass = inProgress
-    ? "border-(--primary)"
-    : aborted
-      ? "border-red-500"
-      : "border-(--primary)/30";
-
   return (
-    <div
-      data-testid="dyad-grep"
-      className={`bg-(--background-lightest) hover:bg-(--background-lighter) rounded-lg px-4 py-2 border my-2 cursor-pointer ${borderClass}`}
+    <DyadCard
+      state={state}
+      accentColor="violet"
       onClick={() => setIsContentVisible(!isContentVisible)}
+      isExpanded={isContentVisible}
+      data-testid="dyad-grep"
     >
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <Search size={16} className="text-(--primary)" />
-          <span className="text-gray-700 dark:text-gray-300 font-medium text-sm">
-            <span className="font-bold mr-2 outline-2 outline-(--primary)/20 bg-(--primary)/10 text-(--primary) rounded-md px-1">
-              GREP
-            </span>
-            {description}
-            {resultSummary && (
-              <span className="ml-2 text-gray-500">({resultSummary})</span>
-            )}
+      <DyadCardHeader icon={<Search size={15} />} accentColor="violet">
+        <DyadBadge color="violet">GREP</DyadBadge>
+        <span className="font-medium text-sm text-foreground truncate">
+          {description}
+        </span>
+        {resultSummary && (
+          <span className="text-xs text-muted-foreground shrink-0">
+            ({resultSummary})
           </span>
-          {inProgress && (
-            <div className="flex items-center text-(--primary) text-xs">
-              <Loader size={14} className="mr-1 animate-spin" />
-              <span>Searching...</span>
-            </div>
-          )}
-          {aborted && (
-            <div className="flex items-center text-red-600 text-xs">
-              <CircleX size={14} className="mr-1" />
-              <span>Did not finish</span>
-            </div>
-          )}
-        </div>
-        <div className="flex items-center">
-          {isContentVisible ? (
-            <ChevronsDownUp
-              size={20}
-              className="text-(--primary)/70 hover:text-(--primary)"
-            />
-          ) : (
-            <ChevronsUpDown
-              size={20}
-              className="text-(--primary)/70 hover:text-(--primary)"
-            />
-          )}
+        )}
+        {inProgress && (
+          <DyadStateIndicator state="pending" pendingLabel="Searching..." />
+        )}
+        {aborted && (
+          <DyadStateIndicator state="aborted" abortedLabel="Did not finish" />
+        )}
+        <div className="ml-auto">
+          <DyadExpandIcon isExpanded={isContentVisible} />
         </div>
-      </div>
-      {isContentVisible && (
-        <div className={`text-xs${hasResults ? " mt-2" : ""}`}>
+      </DyadCardHeader>
+      <DyadCardContent isExpanded={isContentVisible}>
+        <div className="text-xs" onClick={(e) => e.stopPropagation()}>
           <CodeHighlight className="language-log">{children}</CodeHighlight>
         </div>
-      )}
-    </div>
+      </DyadCardContent>
+    </DyadCard>
   );
 };

src/components/chat/DyadListFiles.tsx

 import React, { useState } from "react";
 import { CustomTagState } from "./stateTypes";
-import { ChevronRight, FolderOpen, Loader2 } from "lucide-react";
+import { FolderOpen } from "lucide-react";
+import {
+  DyadCard,
+  DyadCardHeader,
+  DyadBadge,
+  DyadExpandIcon,
+  DyadStateIndicator,
+  DyadCardContent,
+} from "./DyadCardPrimitives";
 
 interface DyadListFilesProps {
   node: {
@@ -22,45 +30,36 @@ export function DyadListFiles({ node, children }: DyadListFilesProps) {
   const content = typeof children === "string" ? children : "";
   const [isExpanded, setIsExpanded] = useState(false);
 
-  const getTitle = () => {
-    const parts: string[] = ["List Files"];
-    if (directory) {
-      parts[0] = `List Files: ${directory}`;
-    }
-    if (isRecursive) {
-      parts.push("(recursive)");
-    }
-    if (isIncludeHidden) {
-      parts.push("(include hidden)");
-    }
-    return parts.join(" ");
-  };
+  const title = directory ? directory : "List Files";
 
   return (
-    <div
+    <DyadCard
+      state={state}
+      accentColor="slate"
+      isExpanded={isExpanded}
+      onClick={() => setIsExpanded(!isExpanded)}
       data-testid="dyad-list-files"
-      className="my-2 border rounded-md overflow-hidden"
     >
-      <button
-        type="button"
-        onClick={() => setIsExpanded(!isExpanded)}
-        className="flex items-center gap-2 px-3 py-2 bg-muted/50 w-full text-left hover:bg-muted/70 transition-colors"
-      >
-        <ChevronRight
-          className={`size-4 text-muted-foreground transition-transform ${isExpanded ? "rotate-90" : ""}`}
-        />
-        {isLoading ? (
-          <Loader2 className="size-4 animate-spin text-muted-foreground" />
-        ) : (
-          <FolderOpen className="size-4 text-muted-foreground" />
+      <DyadCardHeader icon={<FolderOpen size={15} />} accentColor="slate">
+        <span className="font-medium text-sm text-foreground truncate">
+          {title}
+        </span>
+        {isRecursive && <DyadBadge color="slate">recursive</DyadBadge>}
+        {isIncludeHidden && <DyadBadge color="slate">include hidden</DyadBadge>}
+        {isLoading && (
+          <DyadStateIndicator state="pending" pendingLabel="Listing..." />
         )}
-        <span className="font-medium text-sm">{getTitle()}</span>
-      </button>
-      {isExpanded && content && (
-        <div className="p-3 text-xs font-mono whitespace-pre-wrap max-h-60 overflow-y-auto bg-muted/20 border-t">
-          {content}
+        <div className="ml-auto">
+          <DyadExpandIcon isExpanded={isExpanded} />
         </div>
-      )}
-    </div>
+      </DyadCardHeader>
+      <DyadCardContent isExpanded={isExpanded}>
+        {content && (
+          <div className="p-3 text-xs font-mono whitespace-pre-wrap max-h-60 overflow-y-auto bg-muted/20 rounded-lg">
+            {content}
+          </div>
+        )}
+      </DyadCardContent>
+    </DyadCard>
   );
 }

src/components/chat/DyadLogs.tsx

 import type React from "react";
 import type { ReactNode } from "react";
 import { useState } from "react";
-import {
-  ChevronsDownUp,
-  ChevronsUpDown,
-  FileText,
-  Loader,
-  CircleX,
-} from "lucide-react";
+import { FileText } from "lucide-react";
 import { CodeHighlight } from "./CodeHighlight";
 import { CustomTagState } from "./stateTypes";
+import {
+  DyadCard,
+  DyadCardHeader,
+  DyadBadge,
+  DyadExpandIcon,
+  DyadStateIndicator,
+  DyadCardContent,
+} from "./DyadCardPrimitives";
 
 interface DyadLogsProps {
   children?: ReactNode;
@@ -19,16 +21,13 @@ interface DyadLogsProps {
 export const DyadLogs: React.FC<DyadLogsProps> = ({ children, node }) => {
   const [isContentVisible, setIsContentVisible] = useState(false);
 
-  // State handling
   const state = node?.properties?.state as CustomTagState;
   const inProgress = state === "pending";
   const aborted = state === "aborted";
 
-  // Get count from node properties
   const logCount = node?.properties?.count || "";
   const hasResults = !!logCount;
 
-  // Build description based on filters
   const logType = node?.properties?.type || "all";
   const logLevel = node?.properties?.level || "all";
   const filters: string[] = [];
@@ -36,62 +35,35 @@ export const DyadLogs: React.FC<DyadLogsProps> = ({ children, node }) => {
   if (logLevel !== "all") filters.push(`level: ${logLevel}`);
   const filterDesc = filters.length > 0 ? ` (${filters.join(", ")})` : "";
 
-  // Build display text
   const displayText = `Reading ${hasResults ? `${logCount} ` : ""}logs${filterDesc}`;
 
-  // Dynamic border styling
-  const borderClass = inProgress
-    ? "border-(--primary)"
-    : aborted
-      ? "border-red-500"
-      : "border-(--primary)/30";
-
   return (
-    <div
-      className={`bg-(--background-lightest) hover:bg-(--background-lighter) rounded-lg px-4 py-2 border my-2 cursor-pointer ${borderClass}`}
+    <DyadCard
+      state={state}
+      accentColor="slate"
+      isExpanded={isContentVisible}
       onClick={() => setIsContentVisible(!isContentVisible)}
     >
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <FileText size={16} className="text-(--primary)" />
-          <span className="text-gray-700 dark:text-gray-300 font-medium text-sm">
-            <span className="font-bold mr-2 outline-2 outline-(--primary)/20 bg-(--primary)/10 text-(--primary) rounded-md px-1">
-              LOGS
-            </span>
-            {displayText}
-          </span>
-          {inProgress && (
-            <div className="flex items-center text-(--primary) text-xs">
-              <Loader size={14} className="mr-1 animate-spin" />
-              <span>Reading...</span>
-            </div>
-          )}
-          {aborted && (
-            <div className="flex items-center text-red-600 text-xs">
-              <CircleX size={14} className="mr-1" />
-              <span>Did not finish</span>
-            </div>
-          )}
-        </div>
-        <div className="flex items-center">
-          {isContentVisible ? (
-            <ChevronsDownUp
-              size={20}
-              className="text-(--primary)/70 hover:text-(--primary)"
-            />
-          ) : (
-            <ChevronsUpDown
-              size={20}
-              className="text-(--primary)/70 hover:text-(--primary)"
-            />
-          )}
+      <DyadCardHeader icon={<FileText size={15} />} accentColor="slate">
+        <DyadBadge color="slate">LOGS</DyadBadge>
+        <span className="font-medium text-sm text-foreground truncate">
+          {displayText}
+        </span>
+        {inProgress && (
+          <DyadStateIndicator state="pending" pendingLabel="Reading..." />
+        )}
+        {aborted && (
+          <DyadStateIndicator state="aborted" abortedLabel="Did not finish" />
+        )}
+        <div className="ml-auto">
+          <DyadExpandIcon isExpanded={isContentVisible} />
         </div>
-      </div>
-      {isContentVisible && (
-        <div className={`text-xs${hasResults ? " mt-2" : ""}`}>
+      </DyadCardHeader>
+      <DyadCardContent isExpanded={isContentVisible}>
+        <div className="text-xs">
           <CodeHighlight className="language-log">{children}</CodeHighlight>
         </div>
-      )}
-    </div>
+      </DyadCardContent>
+    </DyadCard>
   );
 };

src/components/chat/DyadMcpToolCall.tsx

 import React, { useMemo, useState } from "react";
-import { Wrench, ChevronsUpDown, ChevronsDownUp } from "lucide-react";
+import { Wrench } from "lucide-react";
 import { CodeHighlight } from "./CodeHighlight";
+import {
+  DyadCard,
+  DyadCardHeader,
+  DyadBadge,
+  DyadExpandIcon,
+  DyadCardContent,
+} from "./DyadCardPrimitives";
 
 interface DyadMcpToolCallProps {
   node?: any;
@@ -29,45 +36,30 @@ export const DyadMcpToolCall: React.FC<DyadMcpToolCallProps> = ({
   }, [expanded, raw]);
 
   return (
-    <div
-      className="relative bg-(--background-lightest) hover:bg-(--background-lighter) rounded-lg px-4 py-2 border my-2 cursor-pointer"
+    <DyadCard
+      accentColor="blue"
+      isExpanded={expanded}
       onClick={() => setExpanded((v) => !v)}
     >
-      {/* Top-left label badge */}
-      <div
-        className="absolute top-3 left-2 flex items-center gap-1 px-2 py-0.5 rounded text-xs font-semibold text-blue-600 bg-white dark:bg-zinc-900"
-        style={{ zIndex: 1 }}
-      >
-        <Wrench size={16} className="text-blue-600" />
-        <span>Tool Call</span>
-      </div>
-
-      {/* Right chevron */}
-      <div className="absolute top-2 right-2 p-1 text-gray-500">
-        {expanded ? <ChevronsDownUp size={18} /> : <ChevronsUpDown size={18} />}
-      </div>
-
-      {/* Header content */}
-      <div className="flex items-start gap-2 pl-24 pr-8 py-1">
-        {serverName ? (
-          <span className="text-xs px-2 py-0.5 rounded-full bg-blue-50 dark:bg-zinc-800 text-blue-700 dark:text-blue-300 border border-blue-200 dark:border-zinc-700">
+      <DyadCardHeader icon={<Wrench size={15} />} accentColor="blue">
+        <DyadBadge color="blue">Tool Call</DyadBadge>
+        {serverName && (
+          <span className="text-xs px-2 py-0.5 rounded-full bg-blue-50 dark:bg-blue-950/40 text-blue-700 dark:text-blue-300 ring-1 ring-inset ring-blue-200 dark:ring-blue-800">
             {serverName}
           </span>
-        ) : null}
-        {toolName ? (
-          <span className="text-xs px-2 py-0.5 rounded-full bg-gray-100 dark:bg-zinc-800 text-gray-700 dark:text-gray-200 border border-border">
+        )}
+        {toolName && (
+          <span className="text-xs px-2 py-0.5 rounded-full bg-muted/50 text-muted-foreground ring-1 ring-inset ring-border">
             {toolName}
           </span>
-        ) : null}
-        {/* Intentionally no preview or content when collapsed */}
-      </div>
-
-      {/* JSON content */}
-      {expanded ? (
-        <div className="mt-2 pr-4 pb-2">
-          <CodeHighlight className="language-json">{prettyJson}</CodeHighlight>
+        )}
+        <div className="ml-auto">
+          <DyadExpandIcon isExpanded={expanded} />
         </div>
-      ) : null}
-    </div>
+      </DyadCardHeader>
+      <DyadCardContent isExpanded={expanded}>
+        <CodeHighlight className="language-json">{prettyJson}</CodeHighlight>
+      </DyadCardContent>
+    </DyadCard>
   );
 };

src/components/chat/DyadMcpToolResult.tsx

 import React, { useMemo, useState } from "react";
-import { CheckCircle, ChevronsUpDown, ChevronsDownUp } from "lucide-react";
+import { CheckCircle } from "lucide-react";
 import { CodeHighlight } from "./CodeHighlight";
+import {
+  DyadCard,
+  DyadCardHeader,
+  DyadBadge,
+  DyadExpandIcon,
+  DyadCardContent,
+} from "./DyadCardPrimitives";
 
 interface DyadMcpToolResultProps {
   node?: any;
@@ -29,45 +36,30 @@ export const DyadMcpToolResult: React.FC<DyadMcpToolResultProps> = ({
   }, [expanded, raw]);
 
   return (
-    <div
-      className="relative bg-(--background-lightest) hover:bg-(--background-lighter) rounded-lg px-4 py-2 border my-2 cursor-pointer"
+    <DyadCard
+      accentColor="emerald"
+      isExpanded={expanded}
       onClick={() => setExpanded((v) => !v)}
     >
-      {/* Top-left label badge */}
-      <div
-        className="absolute top-3 left-2 flex items-center gap-1 px-2 py-0.5 rounded text-xs font-semibold text-emerald-600 bg-white dark:bg-zinc-900"
-        style={{ zIndex: 1 }}
-      >
-        <CheckCircle size={16} className="text-emerald-600" />
-        <span>Tool Result</span>
-      </div>
-
-      {/* Right chevron */}
-      <div className="absolute top-2 right-2 p-1 text-gray-500">
-        {expanded ? <ChevronsDownUp size={18} /> : <ChevronsUpDown size={18} />}
-      </div>
-
-      {/* Header content */}
-      <div className="flex items-start gap-2 pl-24 pr-8 py-1">
-        {serverName ? (
-          <span className="text-xs px-2 py-0.5 rounded-full bg-emerald-50 dark:bg-zinc-800 text-emerald-700 dark:text-emerald-300 border border-emerald-200 dark:border-zinc-700">
+      <DyadCardHeader icon={<CheckCircle size={15} />} accentColor="emerald">
+        <DyadBadge color="emerald">Tool Result</DyadBadge>
+        {serverName && (
+          <span className="text-xs px-2 py-0.5 rounded-full bg-emerald-50 dark:bg-emerald-950/40 text-emerald-700 dark:text-emerald-300 ring-1 ring-inset ring-emerald-200 dark:ring-emerald-800">
             {serverName}
           </span>
-        ) : null}
-        {toolName ? (
-          <span className="text-xs px-2 py-0.5 rounded-full bg-gray-100 dark:bg-zinc-800 text-gray-700 dark:text-gray-200 border border-border">
+        )}
+        {toolName && (
+          <span className="text-xs px-2 py-0.5 rounded-full bg-muted/50 text-muted-foreground ring-1 ring-inset ring-border">
             {toolName}
           </span>
-        ) : null}
-        {/* Intentionally no preview or content when collapsed */}
-      </div>
-
-      {/* JSON content */}
-      {expanded ? (
-        <div className="mt-2 pr-4 pb-2">
-          <CodeHighlight className="language-json">{prettyJson}</CodeHighlight>
+        )}
+        <div className="ml-auto">
+          <DyadExpandIcon isExpanded={expanded} />
         </div>
-      ) : null}
-    </div>
+      </DyadCardHeader>
+      <DyadCardContent isExpanded={expanded}>
+        <CodeHighlight className="language-json">{prettyJson}</CodeHighlight>
+      </DyadCardContent>
+    </DyadCard>
   );
 };

src/components/chat/DyadOutput.tsx

 import React, { useState } from "react";
-import {
-  ChevronsDownUp,
-  ChevronsUpDown,
-  AlertTriangle,
-  XCircle,
-  Sparkles,
-} from "lucide-react";
+import { AlertTriangle, XCircle, Sparkles } from "lucide-react";
 import { useAtomValue } from "jotai";
 import { selectedChatIdAtom } from "@/atoms/chatAtoms";
 import { useStreamChat } from "@/hooks/useStreamChat";
 import { CopyErrorMessage } from "@/components/CopyErrorMessage";
+import {
+  DyadCard,
+  DyadCardHeader,
+  DyadBadge,
+  DyadExpandIcon,
+  DyadCardContent,
+} from "./DyadCardPrimitives";
+
 interface DyadOutputProps {
   type: "error" | "warning";
   message?: string;
@@ -27,13 +29,8 @@ export const DyadOutput: React.FC<DyadOutputProps> = ({
 
   // If the type is not warning, it is an error (in case LLM gives a weird "type")
   const isError = type !== "warning";
-  const borderColor = isError ? "border-red-500" : "border-amber-500";
-  const iconColor = isError ? "text-red-500" : "text-amber-500";
-  const icon = isError ? (
-    <XCircle size={16} className={iconColor} />
-  ) : (
-    <AlertTriangle size={16} className={iconColor} />
-  );
+  const accentColor = isError ? "red" : "amber";
+  const icon = isError ? <XCircle size={15} /> : <AlertTriangle size={15} />;
   const label = isError ? "Error" : "Warning";
 
   const handleAIFix = (e: React.MouseEvent) => {
@@ -47,66 +44,47 @@ export const DyadOutput: React.FC<DyadOutputProps> = ({
   };
 
   return (
-    <div
-      className={`relative bg-(--background-lightest) hover:bg-(--background-lighter) rounded-lg px-4 py-2 border my-2 cursor-pointer min-h-18 ${borderColor}`}
+    <DyadCard
+      showAccent
+      accentColor={accentColor}
       onClick={() => setIsContentVisible(!isContentVisible)}
+      isExpanded={isContentVisible}
     >
-      {/* Top-left label badge */}
-      <div
-        className={`absolute top-2 left-2 flex items-center gap-1 px-2 py-0.5 rounded text-xs font-semibold ${iconColor} bg-white dark:bg-gray-900`}
-        style={{ zIndex: 1 }}
-      >
-        {icon}
-        <span>{label}</span>
-      </div>
-
-      {/* Main content, padded to avoid label */}
-      <div className="flex items-center justify-between pl-24 pr-6">
-        <div className="flex items-center gap-2">
-          {message && (
-            <span className="text-gray-700 dark:text-gray-300 font-medium text-sm">
-              {message.slice(0, isContentVisible ? undefined : 100) +
-                (!isContentVisible ? "..." : "")}
-            </span>
-          )}
-        </div>
-        <div className="flex items-center">
-          {isContentVisible ? (
-            <ChevronsDownUp
-              size={20}
-              className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
-            />
-          ) : (
-            <ChevronsUpDown
-              size={20}
-              className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
-            />
-          )}
+      <DyadCardHeader icon={icon} accentColor={accentColor}>
+        <DyadBadge color={accentColor}>{label}</DyadBadge>
+        {message && (
+          <span className="text-sm text-foreground truncate">
+            {message.slice(0, isContentVisible ? undefined : 100) +
+              (!isContentVisible && message.length > 100 ? "..." : "")}
+          </span>
+        )}
+        <div className="ml-auto">
+          <DyadExpandIcon isExpanded={isContentVisible} />
         </div>
-      </div>
+      </DyadCardHeader>
 
       {/* Content area */}
-      {isContentVisible && children && (
-        <div className="mt-4 pl-20 text-sm text-gray-800 dark:text-gray-200">
-          {children}
-        </div>
-      )}
+      <DyadCardContent isExpanded={isContentVisible}>
+        {children && (
+          <div className="text-sm text-muted-foreground mb-3">{children}</div>
+        )}
+      </DyadCardContent>
 
       {/* Action buttons at the bottom - always visible for errors */}
       {isError && message && (
-        <div className="mt-3 px-6 flex justify-end gap-2">
+        <div className="px-3 pb-2 flex justify-end gap-2">
           <CopyErrorMessage
             errorMessage={children ? `${message}\n${children}` : message}
           />
           <button
             onClick={handleAIFix}
-            className="cursor-pointer flex items-center justify-center bg-red-600 hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-800 text-white rounded text-xs px-2 py-1 h-6"
+            className="cursor-pointer flex items-center justify-center bg-red-600 hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-800 text-white rounded-md text-xs px-2.5 py-1 h-6 transition-colors"
           >
-            <Sparkles size={14} className="mr-1" />
+            <Sparkles size={13} className="mr-1" />
             <span>Fix with AI</span>
           </button>
         </div>
       )}
-    </div>
+    </DyadCard>
   );
 };

src/components/chat/DyadProblemSummary.tsx

 import React, { useState } from "react";
-import {
-  ChevronsDownUp,
-  ChevronsUpDown,
-  AlertTriangle,
-  FileText,
-} from "lucide-react";
+import { AlertTriangle, FileText } from "lucide-react";
 import type { Problem } from "@/ipc/types";
+import {
+  DyadCard,
+  DyadCardHeader,
+  DyadBadge,
+  DyadExpandIcon,
+  DyadCardContent,
+} from "./DyadCardPrimitives";
 
 type ProblemWithoutSnippet = Omit<Problem, "snippet">;
 
@@ -21,27 +23,26 @@ interface ProblemItemProps {
 
 const ProblemItem: React.FC<ProblemItemProps> = ({ problem, index }) => {
   return (
-    <div className="flex items-start gap-3 py-2 px-3 border-b border-gray-200 dark:border-gray-700 last:border-b-0">
-      <div className="flex-shrink-0 w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center mt-0.5">
-        <span className="text-xs font-medium text-gray-600 dark:text-gray-400">
+    <div className="flex items-start gap-3 py-2 px-3 border-b border-border/40 last:border-b-0">
+      <div className="flex-shrink-0 size-6 rounded-full bg-muted/60 flex items-center justify-center mt-0.5">
+        <span className="text-[11px] font-semibold text-muted-foreground">
           {index + 1}
         </span>
       </div>
       <div className="flex-1 min-w-0">
-        <div className="flex items-center gap-2 mb-2">
-          <FileText size={14} className="text-gray-500 flex-shrink-0" />
-          <span className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
+        <div className="flex items-center gap-2 mb-1.5">
+          <FileText size={13} className="text-muted-foreground shrink-0" />
+          <span className="text-sm font-medium text-foreground truncate">
             {problem.file}
           </span>
-
-          <span className="text-xs text-gray-500 dark:text-gray-400">
+          <span className="text-[11px] text-muted-foreground font-mono">
             {problem.line}:{problem.column}
           </span>
-          <span className="text-xs bg-gray-100 dark:bg-gray-800 px-2 py-0.5 rounded text-gray-600 dark:text-gray-300">
+          <span className="text-[11px] bg-muted/50 px-1.5 py-0.5 rounded text-muted-foreground font-mono">
             TS{problem.code}
           </span>
         </div>
-        <p className="text-sm text-gray-700 dark:text-gray-300 leading-relaxed">
+        <p className="text-sm text-muted-foreground leading-relaxed">
           {problem.message}
         </p>
       </div>
@@ -59,7 +60,6 @@ export const DyadProblemSummary: React.FC<DyadProblemSummaryProps> = ({
   const problems: ProblemWithoutSnippet[] = React.useMemo(() => {
     if (!children || typeof children !== "string") return [];
 
-    // Parse structured format with <problem> tags
     const problemTagRegex =
       /<problem\s+file="([^"]+)"\s+line="(\d+)"\s+column="(\d+)"\s+code="(\d+)">([^<]+)<\/problem>/g;
     const problems: ProblemWithoutSnippet[] = [];
@@ -95,43 +95,26 @@ export const DyadProblemSummary: React.FC<DyadProblemSummaryProps> = ({
     summary || `${totalProblems} problems found (TypeScript errors)`;
 
   return (
-    <div
-      className="bg-(--background-lightest) hover:bg-(--background-lighter) rounded-lg px-4 py-2 border border-border my-2 cursor-pointer"
+    <DyadCard
+      accentColor="amber"
+      isExpanded={isContentVisible}
       onClick={() => setIsContentVisible(!isContentVisible)}
       data-testid="problem-summary"
     >
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <AlertTriangle
-            size={16}
-            className="text-amber-600 dark:text-amber-500"
-          />
-          <span className="text-gray-700 dark:text-gray-300 font-medium text-sm">
-            <span className="font-bold mr-2 outline-2 outline-amber-200 dark:outline-amber-700 bg-amber-100 dark:bg-amber-900/30 text-amber-800 dark:text-amber-200 rounded-md px-1">
-              Auto-fix
-            </span>
-            {displaySummary}
-          </span>
-        </div>
-        <div className="flex items-center">
-          {isContentVisible ? (
-            <ChevronsDownUp
-              size={20}
-              className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
-            />
-          ) : (
-            <ChevronsUpDown
-              size={20}
-              className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
-            />
-          )}
+      <DyadCardHeader icon={<AlertTriangle size={15} />} accentColor="amber">
+        <DyadBadge color="amber">Auto-fix</DyadBadge>
+        <span className="font-medium text-sm text-foreground truncate">
+          {displaySummary}
+        </span>
+        <div className="ml-auto">
+          <DyadExpandIcon isExpanded={isContentVisible} />
         </div>
-      </div>
+      </DyadCardHeader>
 
       {/* Content area - show individual problems */}
-      {isContentVisible && totalProblems > 0 && (
-        <div className="mt-4">
-          <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+      <DyadCardContent isExpanded={isContentVisible}>
+        {totalProblems > 0 ? (
+          <div className="bg-muted/20 rounded-lg border border-border/40 overflow-hidden">
             {problems.map((problem, index) => (
               <ProblemItem
                 key={`${problem.file}-${problem.line}-${problem.column}-${index}`}
@@ -140,17 +123,14 @@ export const DyadProblemSummary: React.FC<DyadProblemSummaryProps> = ({
               />
             ))}
           </div>
-        </div>
-      )}
-
-      {/* Fallback content area for raw children */}
-      {isContentVisible && totalProblems === 0 && children && (
-        <div className="mt-4 text-sm text-gray-800 dark:text-gray-200">
-          <pre className="whitespace-pre-wrap font-mono text-xs bg-gray-100 dark:bg-gray-800 p-3 rounded">
-            {children}
-          </pre>
-        </div>
-      )}
-    </div>
+        ) : (
+          children && (
+            <pre className="whitespace-pre-wrap font-mono text-xs bg-muted/20 p-3 rounded-lg text-muted-foreground">
+              {children}
+            </pre>
+          )
+        )}
+      </DyadCardContent>
+    </DyadCard>
   );
 };

src/components/chat/DyadRead.tsx

@@ -15,29 +15,26 @@ export const DyadRead: React.FC<DyadReadProps> = ({
 }) => {
   const path = pathProp || node?.properties?.path || "";
   const fileName = path ? path.split("/").pop() : "";
+  const dirPath = path
+    ? path.slice(0, path.length - (fileName?.length || 0))
+    : "";
 
   return (
-    <div className="bg-(--background-lightest) rounded-lg px-4 py-2 border border-border my-2">
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <FileText size={16} className="text-gray-600" />
-          {fileName && (
-            <span className="text-gray-700 dark:text-gray-300 font-medium text-sm">
-              {fileName}
-            </span>
-          )}
-          <div className="text-xs text-gray-600 font-medium">Read</div>
-        </div>
+    <div className="my-1">
+      <div className="flex items-center gap-1 py-1">
+        <FileText size={14} className="shrink-0 text-muted-foreground/50" />
+        <span className="text-[13px] font-medium text-foreground/70">Read</span>
+        {path && (
+          <span className="text-[13px] truncate min-w-0" title={path}>
+            {dirPath && (
+              <span className="text-muted-foreground/85">{dirPath}</span>
+            )}
+            <span className="font-medium text-foreground/70">{fileName}</span>
+          </span>
+        )}
       </div>
-      {path && (
-        <div className="text-xs text-gray-500 dark:text-gray-400 font-medium mb-1">
-          {path}
-        </div>
-      )}
       {children && (
-        <div className="text-sm text-gray-600 dark:text-gray-300 mt-2">
-          {children}
-        </div>
+        <div className="text-xs text-muted-foreground ml-5">{children}</div>
       )}
     </div>
   );

src/components/chat/DyadRename.tsx

 import type React from "react";
 import type { ReactNode } from "react";
 import { FileEdit } from "lucide-react";
+import {
+  DyadCard,
+  DyadCardHeader,
+  DyadBadge,
+  DyadFilePath,
+  DyadDescription,
+} from "./DyadCardPrimitives";
+import { CustomTagState } from "./stateTypes";
 
 interface DyadRenameProps {
   children?: ReactNode;
@@ -15,47 +23,31 @@ export const DyadRename: React.FC<DyadRenameProps> = ({
   from: fromProp,
   to: toProp,
 }) => {
-  // Use props directly if provided, otherwise extract from node
   const from = fromProp || node?.properties?.from || "";
   const to = toProp || node?.properties?.to || "";
+  const state = node?.properties?.state as CustomTagState;
 
-  // Extract filenames from paths
   const fromFileName = from ? from.split("/").pop() : "";
   const toFileName = to ? to.split("/").pop() : "";
 
+  const displayTitle =
+    fromFileName && toFileName
+      ? `${fromFileName} → ${toFileName}`
+      : fromFileName || toFileName || "";
+
   return (
-    <div className="bg-(--background-lightest) rounded-lg px-4 py-2 border border-amber-500 my-2">
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <FileEdit size={16} className="text-amber-500" />
-          {(fromFileName || toFileName) && (
-            <span className="text-gray-700 dark:text-gray-300 font-medium text-sm">
-              {fromFileName && toFileName
-                ? `${fromFileName} → ${toFileName}`
-                : fromFileName || toFileName}
-            </span>
-          )}
-          <div className="text-xs text-amber-500 font-medium">Rename</div>
-        </div>
-      </div>
-      {(from || to) && (
-        <div className="flex flex-col text-xs text-gray-500 dark:text-gray-400 font-medium mb-1">
-          {from && (
-            <div>
-              <span className="text-gray-500 dark:text-gray-400">From:</span>{" "}
-              {from}
-            </div>
-          )}
-          {to && (
-            <div>
-              <span className="text-gray-500 dark:text-gray-400">To:</span> {to}
-            </div>
-          )}
-        </div>
-      )}
-      <div className="text-sm text-gray-600 dark:text-gray-300 mt-2">
-        {children}
-      </div>
-    </div>
+    <DyadCard accentColor="amber" state={state}>
+      <DyadCardHeader icon={<FileEdit size={15} />} accentColor="amber">
+        {displayTitle && (
+          <span className="font-medium text-sm text-foreground truncate">
+            {displayTitle}
+          </span>
+        )}
+        <DyadBadge color="amber">Rename</DyadBadge>
+      </DyadCardHeader>
+      {from && <DyadFilePath path={`From: ${from}`} />}
+      {to && <DyadFilePath path={`To: ${to}`} />}
+      {children && <DyadDescription>{children}</DyadDescription>}
+    </DyadCard>
   );
 };

src/components/chat/DyadSearchReplace.tsx

 import type React from "react";
 import type { ReactNode } from "react";
 import { useMemo, useState } from "react";
-import {
-  ChevronsDownUp,
-  ChevronsUpDown,
-  Loader,
-  CircleX,
-  Search,
-  ArrowLeftRight,
-} from "lucide-react";
+import { Search, ArrowLeftRight } from "lucide-react";
 import { CodeHighlight } from "./CodeHighlight";
 import { CustomTagState } from "./stateTypes";
 import { parseSearchReplaceBlocks } from "@/pro/shared/search_replace_parser";
+import {
+  DyadCard,
+  DyadCardHeader,
+  DyadBadge,
+  DyadExpandIcon,
+  DyadStateIndicator,
+  DyadFilePath,
+  DyadDescription,
+  DyadCardContent,
+} from "./DyadCardPrimitives";
 
 interface DyadSearchReplaceProps {
   children?: ReactNode;
@@ -42,69 +45,41 @@ export const DyadSearchReplace: React.FC<DyadSearchReplaceProps> = ({
   const fileName = path ? path.split("/").pop() : "";
 
   return (
-    <div
-      data-testid="dyad-search-replace"
-      className={`bg-(--background-lightest) hover:bg-(--background-lighter) rounded-lg px-4 py-2 border my-2 cursor-pointer ${
-        inProgress
-          ? "border-amber-500"
-          : aborted
-            ? "border-red-500"
-            : "border-border"
-      }`}
+    <DyadCard
+      state={state}
+      accentColor="violet"
+      isExpanded={isContentVisible}
       onClick={() => setIsContentVisible(!isContentVisible)}
+      data-testid="dyad-search-replace"
     >
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <div className="flex items-center">
-            <Search size={16} />
-            <span className="bg-purple-600 text-white text-xs px-1.5 py-0.5 rounded ml-1 font-medium">
-              Search & Replace
-            </span>
-          </div>
-          {fileName && (
-            <span className="text-gray-700 dark:text-gray-300 font-medium text-sm">
-              {fileName}
-            </span>
-          )}
-          {inProgress && (
-            <div className="flex items-center text-amber-600 text-xs">
-              <Loader size={14} className="mr-1 animate-spin" />
-              <span>Applying changes...</span>
-            </div>
-          )}
-          {aborted && (
-            <div className="flex items-center text-red-600 text-xs">
-              <CircleX size={14} className="mr-1" />
-              <span>Did not finish</span>
-            </div>
-          )}
+      <DyadCardHeader icon={<Search size={15} />} accentColor="violet">
+        <DyadBadge color="violet">Search & Replace</DyadBadge>
+        {fileName && (
+          <span className="font-medium text-sm text-foreground truncate">
+            {fileName}
+          </span>
+        )}
+        {inProgress && (
+          <DyadStateIndicator
+            state="pending"
+            pendingLabel="Applying changes..."
+          />
+        )}
+        {aborted && (
+          <DyadStateIndicator state="aborted" abortedLabel="Did not finish" />
+        )}
+        <div className="ml-auto">
+          <DyadExpandIcon isExpanded={isContentVisible} />
         </div>
-        <div className="flex items-center">
-          {isContentVisible ? (
-            <ChevronsDownUp
-              size={20}
-              className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
-            />
-          ) : (
-            <ChevronsUpDown
-              size={20}
-              className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
-            />
-          )}
-        </div>
-      </div>
-      {path && (
-        <div className="text-xs text-gray-500 dark:text-gray-400 font-medium mb-1">
-          {path}
-        </div>
-      )}
+      </DyadCardHeader>
+      <DyadFilePath path={path} />
       {description && (
-        <div className="text-sm text-gray-600 dark:text-gray-300">
+        <DyadDescription>
           <span className="font-medium">Summary: </span>
           {description}
-        </div>
+        </DyadDescription>
       )}
-      {isContentVisible && (
+      <DyadCardContent isExpanded={isContentVisible}>
         <div
           className="text-xs cursor-text"
           onClick={(e) => e.stopPropagation()}
@@ -114,17 +89,23 @@ export const DyadSearchReplace: React.FC<DyadSearchReplaceProps> = ({
               {children}
             </CodeHighlight>
           ) : (
-            <div className="space-y-3">
+            <div className="space-y-2">
               {blocks.map((b, i) => (
-                <div key={i} className="border rounded-lg">
-                  <div className="flex items-center justify-between px-3 py-2 bg-(--background-lighter) rounded-t-lg text-[11px]">
-                    <div className="flex items-center gap-2">
-                      <ArrowLeftRight size={14} />
-                      <span className="font-medium">Change {i + 1}</span>
-                    </div>
+                <div
+                  key={i}
+                  className="border border-border/60 rounded-lg overflow-hidden"
+                >
+                  <div className="flex items-center gap-2 px-3 py-1.5 bg-muted/30 text-[11px]">
+                    <ArrowLeftRight
+                      size={13}
+                      className="text-muted-foreground"
+                    />
+                    <span className="font-medium text-muted-foreground">
+                      Change {i + 1}
+                    </span>
                   </div>
                   <div className="grid grid-cols-1 md:grid-cols-2 gap-0">
-                    <div className="p-3 border-t md:border-r">
+                    <div className="p-3 border-t border-border/40 md:border-r">
                       <div className="text-[11px] mb-1 text-muted-foreground font-medium">
                         Search
                       </div>
@@ -132,7 +113,7 @@ export const DyadSearchReplace: React.FC<DyadSearchReplaceProps> = ({
                         {b.searchContent}
                       </CodeHighlight>
                     </div>
-                    <div className="p-3 border-t">
+                    <div className="p-3 border-t border-border/40">
                       <div className="text-[11px] mb-1 text-muted-foreground font-medium">
                         Replace
                       </div>
@@ -146,7 +127,7 @@ export const DyadSearchReplace: React.FC<DyadSearchReplaceProps> = ({
             </div>
           )}
         </div>
-      )}
-    </div>
+      </DyadCardContent>
+    </DyadCard>
   );
 };

src/components/chat/DyadStatus.tsx

 import React, { useState } from "react";
 import { CustomTagState } from "./stateTypes";
 import {
-  Loader2,
-  CheckCircle2,
-  XCircle,
-  ChevronsDownUp,
-  ChevronsUpDown,
-} from "lucide-react";
+  DyadCard,
+  DyadCardHeader,
+  DyadExpandIcon,
+  DyadFinishedIcon,
+  DyadCardContent,
+} from "./DyadCardPrimitives";
+import { CircleX, Loader2 } from "lucide-react";
 
 interface DyadStatusProps {
   node: {
@@ -22,61 +23,55 @@ export function DyadStatus({ node, children }: DyadStatusProps) {
   const { title = "Processing...", state } = node.properties;
   const isInProgress = state === "pending";
   const isAborted = state === "aborted";
+  const isFinished = state === "finished";
   const content = typeof children === "string" ? children : "";
   const [isContentVisible, setIsContentVisible] = useState(false);
 
+  // Pick accent color based on state
+  const accentColor = isAborted ? "red" : isInProgress ? "amber" : "green";
+
+  // Pick the left icon based on state
+  const icon = isInProgress ? (
+    <Loader2 size={15} className="animate-spin" />
+  ) : isAborted ? (
+    <CircleX size={15} />
+  ) : (
+    <DyadFinishedIcon />
+  );
+
   return (
-    <div
-      className={`bg-(--background-lightest) hover:bg-(--background-lighter) rounded-lg px-4 py-2 border my-2 cursor-pointer ${
-        isInProgress
-          ? "border-amber-500"
-          : isAborted
-            ? "border-red-500"
-            : "border-border"
-      }`}
+    <DyadCard
+      state={state}
+      accentColor={accentColor}
+      isExpanded={isContentVisible}
       onClick={() => setIsContentVisible(!isContentVisible)}
     >
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          {isInProgress ? (
-            <Loader2 className="size-4 animate-spin text-amber-600" />
-          ) : isAborted ? (
-            <XCircle className="size-4 text-red-600" />
-          ) : (
-            <CheckCircle2 className="size-4 text-green-600 dark:text-green-500" />
-          )}
-          <span
-            className={`font-medium text-sm ${
-              isInProgress
-                ? "bg-gradient-to-r from-foreground via-muted-foreground to-foreground bg-[length:200%_100%] animate-[shimmer_2s_ease-in-out_infinite] bg-clip-text text-transparent"
-                : "text-gray-700 dark:text-gray-300"
-            }`}
-          >
-            {title}
-          </span>
-        </div>
-        <div className="flex items-center">
-          {isContentVisible ? (
-            <ChevronsDownUp
-              size={20}
-              className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
-            />
-          ) : (
-            <ChevronsUpDown
-              size={20}
-              className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
-            />
-          )}
-        </div>
-      </div>
-      {isContentVisible && content && (
-        <div
-          className="mt-2 p-3 text-xs font-mono whitespace-pre-wrap max-h-60 overflow-y-auto bg-muted/20 rounded cursor-text"
-          onClick={(e) => e.stopPropagation()}
+      <DyadCardHeader icon={icon} accentColor={accentColor}>
+        <span
+          className={`font-medium text-sm ${
+            isInProgress
+              ? "bg-gradient-to-r from-foreground via-muted-foreground to-foreground bg-[length:200%_100%] animate-[shimmer_2s_ease-in-out_infinite] bg-clip-text text-transparent"
+              : isFinished
+                ? "text-foreground"
+                : "text-muted-foreground"
+          }`}
         >
-          {content}
+          {title}
+        </span>
+        <div className="ml-auto">
+          <DyadExpandIcon isExpanded={isContentVisible} />
         </div>
-      )}
-    </div>
+      </DyadCardHeader>
+      <DyadCardContent isExpanded={isContentVisible}>
+        {content && (
+          <div
+            className="p-3 text-xs font-mono whitespace-pre-wrap max-h-60 overflow-y-auto bg-muted/20 rounded-lg cursor-text"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {content}
+          </div>
+        )}
+      </DyadCardContent>
+    </DyadCard>
   );
 }

src/components/chat/DyadSupabaseProjectInfo.tsx

 import React, { useState } from "react";
 import { CustomTagState } from "./stateTypes";
+import { Database } from "lucide-react";
 import {
-  Database,
-  Loader2,
-  CircleX,
-  ChevronsDownUp,
-  ChevronsUpDown,
-} from "lucide-react";
+  DyadCard,
+  DyadCardHeader,
+  DyadBadge,
+  DyadExpandIcon,
+  DyadStateIndicator,
+  DyadCardContent,
+} from "./DyadCardPrimitives";
 
 interface DyadSupabaseProjectInfoProps {
   node: {
@@ -28,54 +30,31 @@ export function DyadSupabaseProjectInfo({
   const content = typeof children === "string" ? children : "";
 
   return (
-    <div
-      className={`bg-(--background-lightest) hover:bg-(--background-lighter) rounded-lg px-4 py-2 border my-2 cursor-pointer ${
-        isLoading
-          ? "border-amber-500"
-          : isAborted
-            ? "border-red-500"
-            : "border-border"
-      }`}
+    <DyadCard
+      state={state}
+      accentColor="teal"
+      isExpanded={isContentVisible}
       onClick={() => setIsContentVisible(!isContentVisible)}
     >
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          {isLoading ? (
-            <Loader2 className="size-4 animate-spin text-amber-600" />
-          ) : isAborted ? (
-            <CircleX className="size-4 text-red-500" />
-          ) : (
-            <Database className="size-4 text-muted-foreground" />
-          )}
-          <span className="text-gray-700 dark:text-gray-300 font-medium text-sm">
-            Supabase Project Info
-          </span>
-          {isLoading && (
-            <span className="text-xs text-amber-600">Fetching...</span>
-          )}
-          {isAborted && (
-            <span className="text-xs text-red-500">Did not finish</span>
-          )}
+      <DyadCardHeader icon={<Database size={15} />} accentColor="teal">
+        <DyadBadge color="teal">Supabase Project Info</DyadBadge>
+        {isLoading && (
+          <DyadStateIndicator state="pending" pendingLabel="Fetching..." />
+        )}
+        {isAborted && (
+          <DyadStateIndicator state="aborted" abortedLabel="Did not finish" />
+        )}
+        <div className="ml-auto">
+          <DyadExpandIcon isExpanded={isContentVisible} />
         </div>
-        <div className="flex items-center">
-          {isContentVisible ? (
-            <ChevronsDownUp
-              size={20}
-              className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
-            />
-          ) : (
-            <ChevronsUpDown
-              size={20}
-              className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
-            />
-          )}
-        </div>
-      </div>
-      {isContentVisible && content && (
-        <div className="mt-2 p-3 text-xs font-mono whitespace-pre-wrap max-h-80 overflow-y-auto bg-muted/30 rounded-md">
-          {content}
-        </div>
-      )}
-    </div>
+      </DyadCardHeader>
+      <DyadCardContent isExpanded={isContentVisible}>
+        {content && (
+          <div className="p-3 text-xs font-mono whitespace-pre-wrap max-h-80 overflow-y-auto bg-muted/20 rounded-lg">
+            {content}
+          </div>
+        )}
+      </DyadCardContent>
+    </DyadCard>
   );
 }

src/components/chat/DyadSupabaseTableSchema.tsx

 import React, { useState } from "react";
 import { CustomTagState } from "./stateTypes";
+import { Table2 } from "lucide-react";
 import {
-  Table2,
-  Loader2,
-  CircleX,
-  ChevronsDownUp,
-  ChevronsUpDown,
-} from "lucide-react";
+  DyadCard,
+  DyadCardHeader,
+  DyadBadge,
+  DyadExpandIcon,
+  DyadStateIndicator,
+  DyadCardContent,
+} from "./DyadCardPrimitives";
 
 interface DyadSupabaseTableSchemaProps {
   node: {
@@ -29,54 +31,38 @@ export function DyadSupabaseTableSchema({
   const content = typeof children === "string" ? children : "";
 
   return (
-    <div
-      className={`bg-(--background-lightest) hover:bg-(--background-lighter) rounded-lg px-4 py-2 border my-2 cursor-pointer ${
-        isLoading
-          ? "border-amber-500"
-          : isAborted
-            ? "border-red-500"
-            : "border-border"
-      }`}
+    <DyadCard
+      state={state}
+      accentColor="teal"
       onClick={() => setIsContentVisible(!isContentVisible)}
+      isExpanded={isContentVisible}
     >
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          {isLoading ? (
-            <Loader2 className="size-4 animate-spin text-amber-600" />
-          ) : isAborted ? (
-            <CircleX className="size-4 text-red-500" />
-          ) : (
-            <Table2 className="size-4 text-muted-foreground" />
-          )}
-          <span className="text-gray-700 dark:text-gray-300 font-medium text-sm">
-            {table ? `Table Schema: ${table}` : "Supabase Table Schema"}
+      <DyadCardHeader icon={<Table2 size={15} />} accentColor="teal">
+        <DyadBadge color="teal">
+          {table ? "Table Schema" : "Supabase Table Schema"}
+        </DyadBadge>
+        {table && (
+          <span className="font-medium text-sm text-foreground truncate">
+            {table}
           </span>
-          {isLoading && (
-            <span className="text-xs text-amber-600">Fetching...</span>
-          )}
-          {isAborted && (
-            <span className="text-xs text-red-500">Did not finish</span>
-          )}
+        )}
+        {isLoading && (
+          <DyadStateIndicator state="pending" pendingLabel="Fetching..." />
+        )}
+        {isAborted && (
+          <DyadStateIndicator state="aborted" abortedLabel="Did not finish" />
+        )}
+        <div className="ml-auto">
+          <DyadExpandIcon isExpanded={isContentVisible} />
         </div>
-        <div className="flex items-center">
-          {isContentVisible ? (
-            <ChevronsDownUp
-              size={20}
-              className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
-            />
-          ) : (
-            <ChevronsUpDown
-              size={20}
-              className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
-            />
-          )}
-        </div>
-      </div>
-      {isContentVisible && content && (
-        <div className="mt-2 p-3 text-xs font-mono whitespace-pre-wrap max-h-80 overflow-y-auto bg-muted/30 rounded-md">
-          {content}
-        </div>
-      )}
-    </div>
+      </DyadCardHeader>
+      <DyadCardContent isExpanded={isContentVisible}>
+        {content && (
+          <div className="p-3 text-xs font-mono whitespace-pre-wrap max-h-80 overflow-y-auto bg-muted/20 rounded-lg">
+            {content}
+          </div>
+        )}
+      </DyadCardContent>
+    </DyadCard>
   );
 }

src/components/chat/DyadThink.tsx

 import React, { useState, useEffect } from "react";
-import { Brain, ChevronDown, ChevronUp, Loader } from "lucide-react";
+import { ChevronRight } from "lucide-react";
 import { VanillaMarkdownParser } from "./DyadMarkdownParser";
 import { CustomTagState } from "./stateTypes";
 import { DyadTokenSavings } from "./DyadTokenSavings";
@@ -13,6 +13,13 @@ export const DyadThink: React.FC<DyadThinkProps> = ({ children, node }) => {
   const state = node?.properties?.state as CustomTagState;
   const inProgress = state === "pending";
   const [isExpanded, setIsExpanded] = useState(inProgress);
+  const [hasExpanded, setHasExpanded] = useState(false);
+
+  useEffect(() => {
+    if (isExpanded && !hasExpanded) {
+      setHasExpanded(true);
+    }
+  }, [isExpanded]);
 
   // Check if content matches token savings format
   const tokenSavingsMatch =
@@ -41,54 +48,69 @@ export const DyadThink: React.FC<DyadThinkProps> = ({ children, node }) => {
     );
   }
 
+  // Extract the first line for preview when collapsed
+  const firstLine =
+    typeof children === "string"
+      ? (children
+          .split("\n")
+          .find((line) => line.trim() !== "")
+          ?.trim()
+          .replace(/^\*{1,2}/, "")
+          .replace(/\*{1,2}$/, "") ?? "")
+      : "";
+
   return (
-    <div
-      className={`relative bg-(--background-lightest) dark:bg-zinc-900 hover:bg-(--background-lighter) rounded-lg px-4 py-2 border my-2 cursor-pointer ${
-        inProgress ? "border-purple-500" : "border-border"
-      }`}
-      onClick={() => setIsExpanded(!isExpanded)}
-      role="button"
-      aria-expanded={isExpanded}
-      tabIndex={0}
-      onKeyDown={(e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          setIsExpanded(!isExpanded);
-        }
-      }}
-    >
-      {/* Top-left label badge */}
-      <div
-        className="absolute top-2 left-2 flex items-center gap-1 px-2 py-0.5 rounded text-xs font-semibold text-purple-500 bg-white dark:bg-zinc-900"
-        style={{ zIndex: 1 }}
+    <div className="my-1">
+      {/* Toggle header */}
+      <button
+        type="button"
+        onClick={() => setIsExpanded(!isExpanded)}
+        className="flex items-center gap-1 py-1 group cursor-pointer"
       >
-        <Brain size={16} className="text-purple-500" />
-        <span>Thinking</span>
-        {inProgress && (
-          <Loader size={14} className="ml-1 text-purple-500 animate-spin" />
+        <ChevronRight
+          size={14}
+          className={`shrink-0 text-muted-foreground/50 transition-transform duration-200 ${
+            isExpanded ? "rotate-90" : ""
+          }`}
+        />
+        <span className="text-[13px] font-medium text-foreground/70 group-hover:text-foreground transition-colors">
+          {inProgress ? "Thinking…" : "Thought"}
+        </span>
+        {!isExpanded && firstLine && (
+          <span className="ml-0.5 truncate text-[13px] text-muted-foreground/85 max-w-md">
+            {firstLine}
+          </span>
         )}
-      </div>
-
-      {/* Indicator icon */}
-      <div className="absolute top-2 right-2 p-1 text-gray-500">
-        {isExpanded ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
-      </div>
+      </button>
 
-      {/* Main content with smooth transition */}
+      {/* Expandable content */}
       <div
-        className="pt-6 overflow-hidden transition-all duration-300 ease-in-out"
-        style={{
-          maxHeight: isExpanded ? "none" : "0px",
-          opacity: isExpanded ? 1 : 0,
-          marginBottom: isExpanded ? "0" : "-6px", // Compensate for padding
-        }}
+        className={`grid transition-all duration-200 ease-in-out ${
+          isExpanded
+            ? "grid-rows-[1fr] opacity-100"
+            : "grid-rows-[0fr] opacity-0"
+        }`}
       >
-        <div className="px-0 text-sm text-gray-600 dark:text-gray-300">
-          {typeof children === "string" ? (
-            <VanillaMarkdownParser content={children} />
-          ) : (
-            children
-          )}
+        <div className="overflow-hidden">
+          <div className="flex ml-[7px]">
+            <button
+              type="button"
+              onClick={() => setIsExpanded(false)}
+              className="relative shrink-0 w-6 cursor-pointer group/border"
+              aria-label="Collapse thinking"
+            >
+              <span className="absolute left-0 top-0 bottom-0 w-px bg-border/60 group-hover/border:w-[2px] group-hover/border:bg-foreground/40 transition-all" />
+            </button>
+            <div className="text-sm text-muted-foreground pb-2 pt-1">
+              {hasExpanded ? (
+                typeof children === "string" ? (
+                  <VanillaMarkdownParser content={children} />
+                ) : (
+                  children
+                )
+              ) : null}
+            </div>
+          </div>
         </div>
       </div>
     </div>

src/components/chat/DyadTokenSavings.tsx

 import React from "react";
 import { Zap } from "lucide-react";
 import { Tooltip, TooltipTrigger, TooltipContent } from "../ui/tooltip";
+import { DyadCard, DyadCardHeader } from "./DyadCardPrimitives";
 
 interface DyadTokenSavingsProps {
   originalTokens: number;
@@ -12,19 +13,19 @@ export const DyadTokenSavings: React.FC<DyadTokenSavingsProps> = ({
   smartContextTokens,
 }) => {
   const tokensSaved = originalTokens - smartContextTokens;
-  const percentageSaved = Math.round((tokensSaved / originalTokens) * 100);
+  const percentageSaved =
+    originalTokens > 0 ? Math.round((tokensSaved / originalTokens) * 100) : 0;
 
   return (
     <Tooltip>
       <TooltipTrigger>
-        <div className="bg-green-50 dark:bg-green-950 hover:bg-green-100 dark:hover:bg-green-900 rounded-lg px-4 py-2 border border-green-200 dark:border-green-800 my-2 cursor-pointer">
-          <div className="flex items-center gap-2 text-green-700 dark:text-green-300">
-            <Zap size={16} className="text-green-600 dark:text-green-400" />
-            <span className="text-xs font-medium">
+        <DyadCard accentColor="green">
+          <DyadCardHeader icon={<Zap size={15} />} accentColor="green">
+            <span className="text-xs font-medium text-green-700 dark:text-green-300">
               Saved {percentageSaved}% of codebase tokens with Smart Context
             </span>
-          </div>
-        </div>
+          </DyadCardHeader>
+        </DyadCard>
       </TooltipTrigger>
       <TooltipContent side="top" align="center">
         <div className="text-left">

src/components/chat/DyadWebCrawl.tsx

 import type React from "react";
 import type { ReactNode } from "react";
 import { ScanQrCode } from "lucide-react";
+import { DyadCard, DyadCardHeader, DyadBadge } from "./DyadCardPrimitives";
 
 interface DyadWebCrawlProps {
   children?: ReactNode;
@@ -12,16 +13,15 @@ export const DyadWebCrawl: React.FC<DyadWebCrawlProps> = ({
   node: _node,
 }) => {
   return (
-    <div className="bg-(--background-lightest) rounded-lg px-4 py-2 border my-2">
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <ScanQrCode size={16} className="text-blue-600" />
-          <div className="text-xs text-blue-600 font-medium">Web Crawl</div>
+    <DyadCard accentColor="blue">
+      <DyadCardHeader icon={<ScanQrCode size={15} />} accentColor="blue">
+        <DyadBadge color="blue">Web Crawl</DyadBadge>
+      </DyadCardHeader>
+      {children && (
+        <div className="px-3 pb-2 text-sm italic text-muted-foreground">
+          {children}
         </div>
-      </div>
-      <div className="text-sm italic text-gray-600 dark:text-gray-300 mt-2">
-        {children}
-      </div>
-    </div>
+      )}
+    </DyadCard>
   );
 };

src/components/chat/DyadWebSearch.tsx

 import type React from "react";
 import { useState, type ReactNode } from "react";
-import { ChevronDown, ChevronUp, Globe, Loader } from "lucide-react";
+import { Globe } from "lucide-react";
 import { CustomTagState } from "./stateTypes";
+import {
+  DyadCard,
+  DyadCardHeader,
+  DyadBadge,
+  DyadExpandIcon,
+  DyadStateIndicator,
+  DyadCardContent,
+} from "./DyadCardPrimitives";
 
 interface DyadWebSearchProps {
   children?: ReactNode;
@@ -19,76 +27,46 @@ export const DyadWebSearch: React.FC<DyadWebSearchProps> = ({
   const inProgress = state === "pending";
 
   return (
-    <div
-      className={`bg-(--background-lightest) dark:bg-zinc-900 hover:bg-(--background-lighter) rounded-lg px-4 py-2 border my-2 cursor-pointer ${
-        inProgress ? "border-blue-500" : "border-border"
-      }`}
+    <DyadCard
+      state={state}
+      accentColor="blue"
+      isExpanded={isExpanded}
       onClick={() => setIsExpanded(!isExpanded)}
-      role="button"
-      aria-expanded={isExpanded}
-      tabIndex={0}
-      onKeyDown={(e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          setIsExpanded(!isExpanded);
-        }
-      }}
     >
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <Globe size={16} className="text-blue-600" />
-          <div className="text-xs text-blue-600 font-medium">Web Search</div>
-          {inProgress && (
-            <div className="flex items-center text-blue-600 text-xs">
-              <Loader size={14} className="mr-1 animate-spin" />
-              <span>Searching...</span>
-            </div>
-          )}
-        </div>
-        <div className="p-1 text-gray-500">
-          {isExpanded ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
+      <DyadCardHeader icon={<Globe size={15} />} accentColor="blue">
+        <DyadBadge color="blue">Web Search</DyadBadge>
+        {!isExpanded && query && (
+          <span className="text-sm text-muted-foreground italic truncate">
+            {query}
+          </span>
+        )}
+        {inProgress && (
+          <DyadStateIndicator state="pending" pendingLabel="Searching..." />
+        )}
+        <div className="ml-auto">
+          <DyadExpandIcon isExpanded={isExpanded} />
         </div>
-      </div>
-
-      {/* Collapsed preview - show query */}
-      <div
-        className="text-sm italic text-gray-600 dark:text-gray-300 mt-2 overflow-hidden transition-all duration-300 ease-in-out"
-        style={{
-          maxHeight: isExpanded ? "0px" : "3em",
-          opacity: isExpanded ? 0 : 1,
-        }}
-      >
-        {query}
-      </div>
-
-      {/* Expanded content */}
-      <div
-        className="overflow-hidden transition-all duration-300 ease-in-out"
-        style={{
-          maxHeight: isExpanded ? "none" : "0px",
-          opacity: isExpanded ? 1 : 0,
-          marginTop: isExpanded ? "0.5rem" : "0",
-        }}
-      >
-        <div className="text-sm text-gray-600 dark:text-gray-300 space-y-2">
+      </DyadCardHeader>
+      <DyadCardContent isExpanded={isExpanded}>
+        <div className="text-sm text-muted-foreground space-y-2">
           {query && (
             <div>
-              <span className="text-xs font-medium text-gray-500 dark:text-gray-400">
+              <span className="text-xs font-medium text-muted-foreground">
                 Query:
               </span>
-              <div className="italic mt-0.5">{query}</div>
+              <div className="italic mt-0.5 text-foreground">{query}</div>
             </div>
           )}
           {children && (
             <div>
-              <span className="text-xs font-medium text-gray-500 dark:text-gray-400">
+              <span className="text-xs font-medium text-muted-foreground">
                 Results:
               </span>
-              <div className="mt-0.5">{children}</div>
+              <div className="mt-0.5 text-foreground">{children}</div>
             </div>
           )}
         </div>
-      </div>
-    </div>
+      </DyadCardContent>
+    </DyadCard>
   );
 };

src/components/chat/DyadWebSearchResult.tsx

 import React, { useEffect, useState } from "react";
-import { ChevronDown, ChevronUp, Globe, Loader } from "lucide-react";
+import { Globe } from "lucide-react";
 import { VanillaMarkdownParser } from "./DyadMarkdownParser";
 import { CustomTagState } from "./stateTypes";
+import {
+  DyadCard,
+  DyadCardHeader,
+  DyadBadge,
+  DyadExpandIcon,
+  DyadStateIndicator,
+  DyadCardContent,
+} from "./DyadCardPrimitives";
 
 interface DyadWebSearchResultProps {
   node?: any;
@@ -16,7 +24,6 @@ export const DyadWebSearchResult: React.FC<DyadWebSearchResultProps> = ({
   const inProgress = state === "pending";
   const [isExpanded, setIsExpanded] = useState(inProgress);
 
-  // Collapse when transitioning from in-progress to not-in-progress
   useEffect(() => {
     if (!inProgress && isExpanded) {
       setIsExpanded(false);
@@ -24,55 +31,30 @@ export const DyadWebSearchResult: React.FC<DyadWebSearchResultProps> = ({
   }, [inProgress]);
 
   return (
-    <div
-      className={`relative bg-(--background-lightest) dark:bg-zinc-900 hover:bg-(--background-lighter) rounded-lg px-4 py-2 border my-2 cursor-pointer ${
-        inProgress ? "border-blue-500" : "border-border"
-      }`}
+    <DyadCard
+      state={state}
+      accentColor="blue"
       onClick={() => setIsExpanded(!isExpanded)}
-      role="button"
-      aria-expanded={isExpanded}
-      tabIndex={0}
-      onKeyDown={(e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          setIsExpanded(!isExpanded);
-        }
-      }}
+      isExpanded={isExpanded}
     >
-      {/* Top-left label badge */}
-      <div
-        className="absolute top-2 left-2 flex items-center gap-1 px-2 py-0.5 rounded text-xs font-semibold text-blue-600 bg-white dark:bg-zinc-900"
-        style={{ zIndex: 1 }}
-      >
-        <Globe size={16} className="text-blue-600" />
-        <span>Web Search Result</span>
+      <DyadCardHeader icon={<Globe size={15} />} accentColor="blue">
+        <DyadBadge color="blue">Web Search Result</DyadBadge>
         {inProgress && (
-          <Loader size={14} className="ml-1 text-blue-600 animate-spin" />
+          <DyadStateIndicator state="pending" pendingLabel="Loading..." />
         )}
-      </div>
-
-      {/* Indicator icon */}
-      <div className="absolute top-2 right-2 p-1 text-gray-500">
-        {isExpanded ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
-      </div>
-
-      {/* Main content with smooth transition */}
-      <div
-        className="pt-6 overflow-hidden transition-all duration-300 ease-in-out"
-        style={{
-          maxHeight: isExpanded ? "none" : "0px",
-          opacity: isExpanded ? 1 : 0,
-          marginBottom: isExpanded ? "0" : "-6px",
-        }}
-      >
-        <div className="px-0 text-sm text-gray-600 dark:text-gray-300">
+        <div className="ml-auto">
+          <DyadExpandIcon isExpanded={isExpanded} />
+        </div>
+      </DyadCardHeader>
+      <DyadCardContent isExpanded={isExpanded}>
+        <div className="text-sm text-muted-foreground">
           {typeof children === "string" ? (
             <VanillaMarkdownParser content={children} />
           ) : (
             children
           )}
         </div>
-      </div>
-    </div>
+      </DyadCardContent>
+    </DyadCard>
   );
 };

src/components/chat/DyadWrite.tsx

 import type React from "react";
 import type { ReactNode } from "react";
 import { useState } from "react";
-import {
-  ChevronsDownUp,
-  ChevronsUpDown,
-  Pencil,
-  Loader,
-  CircleX,
-  Edit,
-  X,
-} from "lucide-react";
+import { Pencil, Edit, X } from "lucide-react";
 import { CodeHighlight } from "./CodeHighlight";
 import { CustomTagState } from "./stateTypes";
 import { FileEditor } from "../preview_panel/FileEditor";
 import { useAtomValue } from "jotai";
 import { selectedAppIdAtom } from "@/atoms/appAtoms";
+import {
+  DyadCard,
+  DyadCardHeader,
+  DyadExpandIcon,
+  DyadStateIndicator,
+  DyadDescription,
+  DyadCardContent,
+} from "./DyadCardPrimitives";
 
 interface DyadWriteProps {
   children?: ReactNode;
@@ -31,7 +31,6 @@ export const DyadWrite: React.FC<DyadWriteProps> = ({
 }) => {
   const [isContentVisible, setIsContentVisible] = useState(false);
 
-  // Use props directly if provided, otherwise extract from node
   const path = pathProp || node?.properties?.path || "";
   const description = descriptionProp || node?.properties?.description || "";
   const state = node?.properties?.state as CustomTagState;
@@ -49,64 +48,56 @@ export const DyadWrite: React.FC<DyadWriteProps> = ({
     setIsEditing(true);
     setIsContentVisible(true);
   };
-  // Extract filename from path
+
   const fileName = path ? path.split("/").pop() : "";
 
   return (
-    <div
-      className={`bg-(--background-lightest) hover:bg-(--background-lighter) rounded-lg px-4 py-2 border my-2 cursor-pointer ${
-        inProgress
-          ? "border-amber-500"
-          : aborted
-            ? "border-red-500"
-            : "border-border"
-      }`}
+    <DyadCard
+      state={state}
+      accentColor="blue"
       onClick={() => setIsContentVisible(!isContentVisible)}
+      isExpanded={isContentVisible}
     >
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <Pencil size={16} />
+      <DyadCardHeader icon={<Pencil size={15} />} accentColor="blue">
+        <div className="min-w-0 truncate">
           {fileName && (
-            <span className="text-gray-700 dark:text-gray-300 font-medium text-sm">
+            <span className="font-medium text-sm text-foreground truncate block">
               {fileName}
             </span>
           )}
-          {inProgress && (
-            <div className="flex items-center text-amber-600 text-xs">
-              <Loader size={14} className="mr-1 animate-spin" />
-              <span>Writing...</span>
-            </div>
-          )}
-          {aborted && (
-            <div className="flex items-center text-red-600 text-xs">
-              <CircleX size={14} className="mr-1" />
-              <span>Did not finish</span>
-            </div>
+          {path && (
+            <span className="text-[11px] text-muted-foreground truncate block">
+              {path}
+            </span>
           )}
         </div>
-        <div className="flex items-center">
+        {inProgress && (
+          <DyadStateIndicator state="pending" pendingLabel="Writing..." />
+        )}
+        {aborted && (
+          <DyadStateIndicator state="aborted" abortedLabel="Did not finish" />
+        )}
+        <div className="ml-auto flex items-center gap-1">
           {!inProgress && (
             <>
               {isEditing ? (
-                <>
-                  <button
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      handleCancel();
-                    }}
-                    className="flex items-center gap-1 text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 px-2 py-1 rounded cursor-pointer"
-                  >
-                    <X size={14} />
-                    Cancel
-                  </button>
-                </>
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleCancel();
+                  }}
+                  className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground px-2 py-1 rounded transition-colors cursor-pointer"
+                >
+                  <X size={14} />
+                  Cancel
+                </button>
               ) : (
                 <button
                   onClick={(e) => {
                     e.stopPropagation();
                     handleEdit();
                   }}
-                  className="flex items-center gap-1 text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 px-2 py-1 rounded cursor-pointer"
+                  className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground px-2 py-1 rounded transition-colors cursor-pointer"
                 >
                   <Edit size={14} />
                   Edit
@@ -114,37 +105,24 @@ export const DyadWrite: React.FC<DyadWriteProps> = ({
               )}
             </>
           )}
-          {isContentVisible ? (
-            <ChevronsDownUp
-              size={20}
-              className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
-            />
-          ) : (
-            <ChevronsUpDown
-              size={20}
-              className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
-            />
-          )}
+          <DyadExpandIcon isExpanded={isContentVisible} />
         </div>
-      </div>
-      {path && (
-        <div className="text-xs text-gray-500 dark:text-gray-400 font-medium mb-1">
-          {path}
-        </div>
-      )}
+      </DyadCardHeader>
       {description && (
-        <div className="text-sm text-gray-600 dark:text-gray-300">
-          <span className="font-medium">Summary: </span>
-          {description}
-        </div>
+        <DyadDescription>
+          <span className={!isContentVisible ? "line-clamp-2" : undefined}>
+            <span className="font-medium">Summary: </span>
+            {description}
+          </span>
+        </DyadDescription>
       )}
-      {isContentVisible && (
+      <DyadCardContent isExpanded={isContentVisible}>
         <div
           className="text-xs cursor-text"
           onClick={(e) => e.stopPropagation()}
         >
           {isEditing ? (
-            <div className="h-96 min-h-96 border border-gray-200 dark:border-gray-700 rounded overflow-hidden">
+            <div className="h-96 min-h-96 border border-border rounded-lg overflow-hidden">
               <FileEditor appId={appId ?? null} filePath={path} />
             </div>
           ) : (
@@ -153,7 +131,7 @@ export const DyadWrite: React.FC<DyadWriteProps> = ({
             </CodeHighlight>
           )}
         </div>
-      )}
-    </div>
+      </DyadCardContent>
+    </DyadCard>
   );
 };