feat: 聊天中渲染 mermaid 图表，支持缩放与平移查看

app/globals.css

@@ -422,6 +422,82 @@ pre, code {
   color: var(--text);
 }
 
+/* HTML code block: collapsed height + expand toggle */
+.markdown-code-collapse {
+  position: relative;
+}
+.markdown-code-collapse-body {
+  position: relative;
+}
+.markdown-code-fade {
+  position: absolute;
+  left: 1px;
+  right: 1px;
+  bottom: 0;
+  height: 64px;
+  border-radius: 0 0 7px 7px;
+  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--bg) 88%, transparent));
+  pointer-events: none;
+}
+
+/* Right panel view switcher — icon buttons, active view uses the accent color */
+.right-panel-view-switch {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  border-radius: 5px;
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+}
+.right-panel-view-switch:hover {
+  color: var(--text);
+  background: var(--bg-hover);
+}
+.right-panel-view-switch.is-active {
+  color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 12%, transparent);
+}
+
+/* Right-click context menu (tab bars) — rendered via portal into body */
+.context-menu {
+  position: fixed;
+  z-index: 400;
+  min-width: 160px;
+  padding: 4px;
+  background: var(--bg-panel);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  box-shadow: 0 6px 24px color-mix(in srgb, #000 22%, transparent);
+  font-size: 12px;
+}
+.context-menu button {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 26px;
+  padding: 0 10px;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--text);
+  text-align: left;
+  cursor: pointer;
+  font: inherit;
+  white-space: nowrap;
+}
+.context-menu button:hover:not(:disabled) {
+  background: var(--bg-hover);
+}
+.context-menu button:disabled {
+  color: var(--text-dim);
+  cursor: default;
+}
+
 .mermaid-block {
   padding: 12px;
   overflow-x: auto;
@@ -493,6 +569,14 @@ pre, code {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.mermaid-zoom-hint {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--text-dim);
+  font-size: 11px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .mermaid-zoom-actions {
   display: flex;
   align-items: center;
@@ -548,36 +632,88 @@ pre, code {
   outline: 2px solid var(--accent);
   outline-offset: -2px;
 }
-.mermaid-zoom-value {
+/* Select-text mode toggle: green when active. */
+.mermaid-zoom-select-button.is-active {
+  border-color: color-mix(in srgb, #22c55e 55%, var(--border));
+  background: color-mix(in srgb, #22c55e 16%, transparent);
+  color: #22c55e;
+}
+.mermaid-zoom-select-button.is-active:hover {
+  background: color-mix(in srgb, #22c55e 26%, transparent);
+  color: #4ade80;
+}
+button.mermaid-zoom-value {
+  width: auto;
   min-width: 48px;
   height: 22px;
+  padding: 0 6px;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
   color: var(--text-muted);
   font-family: var(--font-mono);
   font-size: 12px;
   line-height: 22px;
   text-align: center;
+  cursor: pointer;
   user-select: none;
+  touch-action: manipulation;
+}
+button.mermaid-zoom-value:hover {
+  background: var(--bg-hover);
+  color: var(--text);
+}
+button.mermaid-zoom-value:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
 }
 .mermaid-zoom-viewport {
+  position: relative;
   min-width: 0;
   min-height: 0;
-  overflow: auto;
-  padding: 24px;
+  overflow: hidden;
   background: var(--bg);
-  -webkit-overflow-scrolling: touch;
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+  cursor: grab;
+}
+/* Select mode: hand the pointer to the browser so SVG text can be selected. */
+.mermaid-zoom-viewport.is-selecting {
+  cursor: default;
+  user-select: text;
+  -webkit-user-select: text;
+}
+.mermaid-zoom-viewport.is-selecting .mermaid-zoom-canvas,
+.mermaid-zoom-viewport.is-selecting .mermaid-zoom-canvas svg,
+.mermaid-zoom-viewport.is-selecting .mermaid-zoom-canvas svg text {
+  user-select: text;
+  -webkit-user-select: text;
+}
+.mermaid-zoom-viewport.is-dragging {
+  cursor: grabbing;
+}
+.mermaid-zoom-world {
+  position: absolute;
+  /* left/top positioning (not transform) keeps native SVG text selection
+     working — composited transform layers can break it in Chromium. */
+  top: 0;
+  left: 0;
 }
 .mermaid-zoom-canvas {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
   padding: 12px;
   border: 1px solid var(--border);
   border-radius: 7px;
   background: var(--bg-panel);
-  margin: 0 auto;
-  transition: width 0.15s ease;
 }
 .mermaid-zoom-canvas svg {
   display: block;
-  width: 100% !important;
+  width: 100%;
   height: auto;
+  /* viewBox keeps the aspect ratio; re-render at scale keeps vectors crisp. */
   max-width: none !important;
 }
 
@@ -590,8 +726,8 @@ pre, code {
     font-size: 10px;
   }
 
-  .mermaid-zoom-viewport {
-    padding: 12px;
+  .mermaid-zoom-hint {
+    display: none;
   }
 }