fix(web): address review feedback on diagram rendering

- answerCard: correct onVisualize JSDoc to match actual behavior
  (button stays visible and relabels to "New diagram" when answer
  already contains a diagram)
- fullscreenDiagramDialog: reset cached renderedSvg when dialog
  opens or input changes, so downloads triggered before the next
  render completes can't return the previous diagram's SVG
- fullscreenDiagramDialog: add aria-label to icon-only toolbar
  buttons so assistive tech announces the action
- agent: clarify the sequenceDiagram +/- rule - the chars are
  valid as arrow-attached participant activation modifiers
  (->>+B), but should not start the message text itself
- agent: soften "Never use ellipses" to "Avoid ellipses"

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: adam.wilson

packages/web/src/features/chat/agent.ts

@@ -355,8 +355,8 @@ const createPrompt = ({
        - RIGHT: \`A->>B: CreateKernel\`
 
     3. **Universal restrictions** (apply to ALL diagram types):
-       - Never use ellipses (\`...\`). Use the word \`etc\` instead.
-       - Never use the \`+\` or \`-\` characters at the start of a sequenceDiagram message (they activate/deactivate participants).
+       - Avoid ellipses (\`...\`) in labels — they can confuse the tokenizer. Use the word \`etc\` if you need to abbreviate.
+       - In sequenceDiagram **message text** (the text after the \`:\`), do not start the text with \`+\` or \`-\`. These characters are valid when attached to the arrow as participant activation modifiers (e.g. \`A->>+B: msg\`, \`A->>-B: msg\`), but at the start of the message text itself they confuse the parser.
        - Drop generic type parameters: write \`ChatMessageContent stream\` not \`IAsyncEnumerable<ChatMessageContent>\`.
        - Prefer short verb phrases over literal code: \`build kernel and register chat service\` rather than mirroring a code snippet.
 

packages/web/src/features/chat/components/chatThread/answerCard.tsx

@@ -28,10 +28,11 @@ interface AnswerCardProps {
     traceId?: string;
     sources: FileSource[];
     /**
-     * When provided, an "Visualize" button is shown in the answer header. Clicking
+     * When provided, a "Visualize" button is shown in the answer header. Clicking
      * it sends a follow-up message asking the agent to render the answer as a
-     * diagram. The button is hidden when the answer already contains a diagram
-     * block, and disabled while a stream is in flight.
+     * diagram. If the answer already contains a diagram block, the button is
+     * relabeled to "New diagram" rather than hidden. The button is disabled
+     * while a stream is in flight.
      */
     onVisualize?: () => void;
     isVisualizeDisabled?: boolean;

packages/web/src/features/chat/components/chatThread/fullscreenDiagramDialog.tsx

@@ -11,7 +11,7 @@ import {
 import { useToast } from '@/components/hooks/use-toast';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Copy, Download, Maximize, Maximize2, Minimize2, RotateCcw } from 'lucide-react';
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { TransformComponent, TransformWrapper, type ReactZoomPanPinchRef } from 'react-zoom-pan-pinch';
 import { CodeBlock } from './codeBlock';
 import { MermaidDiagram } from './mermaidDiagram';
@@ -38,6 +38,13 @@ export const FullscreenDiagramDialog = ({
     const [renderedSvg, setRenderedSvg] = useState<string | undefined>(undefined);
     const { toast } = useToast();
 
+    // Clear the cached SVG whenever the dialog opens or the input changes, so
+    // a download triggered before the next render completes can't return the
+    // previous diagram's SVG.
+    useEffect(() => {
+        setRenderedSvg(undefined);
+    }, [isOpen, code, language]);
+
     // Auto-fit the diagram to the available space whenever the SVG (re)renders.
     // Mermaid's `useMaxWidth: true` makes the SVG cap at its natural width, which
     // looks tiny inside a 95vw dialog. zoomToElement computes the scale needed
@@ -140,6 +147,7 @@ export const FullscreenDiagramDialog = ({
                                 size="sm"
                                 onClick={onZoomOut}
                                 title="Zoom out"
+                                aria-label="Zoom out"
                             >
                                 <Minimize2 className="h-4 w-4" />
                             </Button>
@@ -148,6 +156,7 @@ export const FullscreenDiagramDialog = ({
                                 size="sm"
                                 onClick={onZoomIn}
                                 title="Zoom in"
+                                aria-label="Zoom in"
                             >
                                 <Maximize2 className="h-4 w-4" />
                             </Button>
@@ -156,6 +165,7 @@ export const FullscreenDiagramDialog = ({
                                 size="sm"
                                 onClick={onFitToView}
                                 title="Fit to view"
+                                aria-label="Fit to view"
                             >
                                 <Maximize className="h-4 w-4" />
                             </Button>
@@ -164,6 +174,7 @@ export const FullscreenDiagramDialog = ({
                                 size="sm"
                                 onClick={onResetView}
                                 title="Reset to 100%"
+                                aria-label="Reset to 100%"
                             >
                                 <RotateCcw className="h-4 w-4" />
                             </Button>
@@ -172,6 +183,7 @@ export const FullscreenDiagramDialog = ({
                                 size="sm"
                                 onClick={onCopySource}
                                 title="Copy source"
+                                aria-label="Copy source"
                             >
                                 <Copy className="h-4 w-4" />
                             </Button>
@@ -180,6 +192,7 @@ export const FullscreenDiagramDialog = ({
                                 size="sm"
                                 onClick={onDownloadSvg}
                                 title="Download SVG"
+                                aria-label="Download SVG"
                                 disabled={!renderedSvg}
                             >
                                 <Download className="h-4 w-4" />