feat(ui): add dynamic window title and sprite-based project/file icons (#529)

* feat(ui): add dynamic titles and sprite-based project/file icons

* feat(files): add viewer syntax fallback and tab file icons

* fix(files): restore file viewer highlighting and add diff file icons

* feat(git): add file icons and async file-viewer syntax fallback

* fix(files): force codemirror token colors in file viewer

* feat(files): add shiki view mode for file viewer

* fix(files): force codemirror parse after programmatic content updates

* feat(files): support markdown frontmatter preview

* feat(chat): use pierre diffs for tool previews

* feat(chat): add configurable beautiful-mermaid rendering

* feat(perf): virtualize chat rendering and add react-scan toggle

* feat(build): enable React Compiler in Vite React apps

* fix(chat): reduce rerenders from tooltips and streamed activity

* fix(ui): make MessageList React Compiler safe

* chore(ui): batch commit remaining pending ui updates

* fix: polish chat and diff preview rendering

- Keep Mermaid action buttons fixed while diagram content scrolls
- Align Diff All Files headers and match Git-style path truncation
- Default chat tool diffs to unified view with lightweight indicators disabled

* fix: preserve file tree expansion and delay git action label collapse

* fix: refine project icon controls in settings

---------

Co-authored-by: Bohdan Triapitsyn <artmore@protonmail.com>

packages/ui/src/index.css

@@ -664,13 +664,13 @@ html:not(.dark) .chat-scroll {
 }
 
 /* Commit actions: collapse labels when narrow. */
-@container commit-actions (max-width: 28rem) {
+@container commit-actions (max-width: 21rem) {
   .commit-actions__label--long {
     display: none;
   }
 }
 
-@container commit-actions (max-width: 22rem) {
+@container commit-actions (max-width: 19rem) {
   .commit-actions__label {
     display: none;
   }
@@ -875,15 +875,29 @@ html:not(.dark) .chat-scroll {
   padding: 0.5rem;
 }
 
+[data-streamdown="mermaid-block"] [data-streamdown="mermaid-scroll"] {
+  overflow: auto;
+}
+
 [data-streamdown="mermaid-block"] [data-streamdown="mermaid"] {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  width: max-content;
+  min-width: 100%;
+  display: block;
+}
+
+[data-streamdown="mermaid-block"] [data-streamdown="mermaid-ascii"] {
+  margin: 0;
+  white-space: pre;
+  width: max-content;
+  min-width: 100%;
+  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  color: var(--surface-foreground);
+  background: transparent;
 }
 
 [data-streamdown="mermaid-block"] [data-streamdown="mermaid"] svg {
-  width: 100% !important;
+  width: auto !important;
+  min-width: 100%;
   max-width: none !important;
   height: auto !important;
 }
@@ -908,28 +922,42 @@ html:not(.dark) .chat-scroll {
   width: 100%;
   height: 100%;
   min-height: 100%;
-  padding: 0;
+  padding: 0.75rem;
   border: 0;
   border-radius: 0;
   background: var(--surface-elevated);
-  display: flex;
-  align-items: center;
-  justify-content: center;
+}
+
+.streamdown-mermaid-fullscreen [data-streamdown="mermaid-block"] [data-streamdown="mermaid-scroll"] {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
 }
 
 .streamdown-mermaid-fullscreen [data-streamdown="mermaid-block"] [data-streamdown="mermaid"] {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  width: max-content;
+  min-width: 100%;
+  min-height: 100%;
+  display: block;
+}
+
+.streamdown-mermaid-fullscreen [data-streamdown="mermaid-block"] [data-streamdown="mermaid-ascii"] {
+  margin: 0;
+  white-space: pre;
+  width: max-content;
+  min-width: 100%;
+  min-height: 100%;
+  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  color: var(--surface-foreground);
+  background: transparent;
 }
 
 .streamdown-mermaid-fullscreen [data-streamdown="mermaid-block"] svg {
-  width: 100% !important;
-  height: 100% !important;
-  max-width: 100% !important;
-  max-height: 100% !important;
+  width: auto !important;
+  height: auto !important;
+  max-width: none !important;
+  max-height: none !important;
+  min-width: 100%;
   display: block;
   background: transparent;
 }