fix: disable recordInputs to prevent Langfuse media upload timeout

When images are included in chat messages, the AI SDK telemetry with
recordInputs: true sends base64 image data to Langfuse. Langfuse then
attempts to upload these images to media storage, causing 1m31s timeouts.

Setting recordInputs: false prevents this while still capturing user
text input via setTraceInput().

.gitignore

@@ -41,3 +41,4 @@ yarn-error.log*
 next-env.d.ts
 push-via-ec2.sh
 .claude/settings.local.json
+.playwright-mcp/

LICENSE

@@ -0,0 +1,190 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to the Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   Copyright 2024 Dayuan Jiang
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

app/api/chat/route.ts

@@ -1,6 +1,8 @@
 import { streamText, convertToModelMessages, createUIMessageStream, createUIMessageStreamResponse } from 'ai';
 import { getAIModel } from '@/lib/ai-providers';
 import { findCachedResponse } from '@/lib/cached-responses';
+import { setTraceInput, setTraceOutput, getTelemetryConfig, wrapWithObserve } from '@/lib/langfuse';
+import { getSystemPrompt } from '@/lib/system-prompts';
 import { z } from "zod";
 
 export const maxDuration = 300;
@@ -28,8 +30,8 @@ function createCachedStreamResponse(xml: string): Response {
   return createUIMessageStreamResponse({ stream });
 }
 
-export async function POST(req: Request) {
-  try {
+// Inner handler function
+async function handleChatRequest(req: Request): Promise<Response> {
   const { messages, xml, sessionId } = await req.json();
 
   // Get user IP for Langfuse tracking
@@ -41,6 +43,17 @@ export async function POST(req: Request) {
     ? sessionId
     : undefined;
 
+  // Extract user input text for Langfuse trace
+  const currentMessage = messages[messages.length - 1];
+  const userInputText = currentMessage?.parts?.find((p: any) => p.type === 'text')?.text || '';
+
+  // Update Langfuse trace with input, session, and user
+  setTraceInput({
+    input: userInputText,
+    sessionId: validSessionId,
+    userId: userId,
+  });
+
   // === CACHE CHECK START ===
   const isFirstMessage = messages.length === 1;
   const isEmptyDiagram = !xml || xml.trim() === '' || isMinimalDiagram(xml);
@@ -59,107 +72,11 @@ export async function POST(req: Request) {
   }
   // === CACHE CHECK END ===
 
-    const systemMessage = `
-You are an expert diagram creation assistant specializing in draw.io XML generation.
-Your primary function is chat with user and crafting clear, well-organized visual diagrams through precise XML specifications.
-You can see the image that user uploaded.
+  // Get AI model from environment configuration
+  const { model, providerOptions, headers, modelId } = getAIModel();
 
-You utilize the following tools:
----Tool1---
-tool name: display_diagram
-description: Display a NEW diagram on draw.io. Use this when creating a diagram from scratch or when major structural changes are needed.
-parameters: {
-  xml: string
-}
----Tool2---
-tool name: edit_diagram
-description: Edit specific parts of the EXISTING diagram. Use this when making small targeted changes like adding/removing elements, changing labels, or adjusting properties. This is more efficient than regenerating the entire diagram.
-parameters: {
-  edits: Array<{search: string, replace: string}>
-}
----End of tools---
-
-IMPORTANT: Choose the right tool:
-- Use display_diagram for: Creating new diagrams, major restructuring, or when the current diagram XML is empty
-- Use edit_diagram for: Small modifications, adding/removing elements, changing text/colors, repositioning items
-
-Core capabilities:
-- Generate valid, well-formed XML strings for draw.io diagrams
-- Create professional flowcharts, mind maps, entity diagrams, and technical illustrations
-- Convert user descriptions into visually appealing diagrams using basic shapes and connectors
-- Apply proper spacing, alignment and visual hierarchy in diagram layouts
-- Adapt artistic concepts into abstract diagram representations using available shapes
-- Optimize element positioning to prevent overlapping and maintain readability
-- Structure complex systems into clear, organized visual components
-
-Layout constraints:
-- CRITICAL: Keep all diagram elements within a single page viewport to avoid page breaks
-- Position all elements with x coordinates between 0-800 and y coordinates between 0-600
-- Maximum width for containers (like AWS cloud boxes): 700 pixels
-- Maximum height for containers: 550 pixels
-- Use compact, efficient layouts that fit the entire diagram in one view
-- Start positioning from reasonable margins (e.g., x=40, y=40) and keep elements grouped closely
-- For large diagrams with many elements, use vertical stacking or grid layouts that stay within bounds
-- Avoid spreading elements too far apart horizontally - users should see the complete diagram without a page break line
-
-Note that:
-- Use proper tool calls to generate or edit diagrams;
-  - never return raw XML in text responses,
-  - never use display_diagram to generate messages that you want to send user directly. e.g. to generate a "hello" text box when you want to greet user.
-- Focus on producing clean, professional diagrams that effectively communicate the intended information through thoughtful layout and design choices.
-- When artistic drawings are requested, creatively compose them using standard diagram shapes and connectors while maintaining visual clarity.
-- Return XML only via tool calls, never in text responses.
-- If user asks you to replicate a diagram based on an image, remember to match the diagram style and layout as closely as possible. Especially, pay attention to the lines and shapes, for example, if the lines are straight or curved, and if the shapes are rounded or square.
-- Note that when you need to generate diagram about aws architecture, use **AWS 2025 icons**.
-
-When using edit_diagram tool:
-- Keep edits minimal - only include the specific line being changed plus 1-2 context lines
-- Example GOOD edit: {"search": "  <mxCell id=\"2\" value=\"Old Text\">", "replace": "  <mxCell id=\"2\" value=\"New Text\">"}
-- Example BAD edit: Including 10+ unchanged lines just to change one attribute
-- For multiple changes, use separate edits: [{"search": "line1", "replace": "new1"}, {"search": "line2", "replace": "new2"}]
-- RETRY POLICY: If edit_diagram fails because the search pattern cannot be found:
-  * You may retry edit_diagram up to 3 times with adjusted search patterns
-  * After 3 failed attempts, you MUST fall back to using display_diagram to regenerate the entire diagram
-  * The error message will indicate how many retries remain
-
-## Draw.io XML Structure Reference
-
-Basic structure:
-\`\`\`xml
-<mxGraphModel>
-  <root>
-    <mxCell id="0"/>
-    <mxCell id="1" parent="0"/>
-    <!-- All other cells go here as siblings -->
-  </root>
-</mxGraphModel>
-\`\`\`
-
-CRITICAL RULES:
-1. Always include the two root cells: <mxCell id="0"/> and <mxCell id="1" parent="0"/>
-2. ALL mxCell elements must be DIRECT children of <root> - NEVER nest mxCell inside another mxCell
-3. Use unique sequential IDs for all cells (start from "2" for user content)
-4. Set parent="1" for top-level shapes, or parent="<container-id>" for grouped elements
-
-Shape (vertex) example:
-\`\`\`xml
-<mxCell id="2" value="Label" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
-  <mxGeometry x="100" y="100" width="120" height="60" as="geometry"/>
-</mxCell>
-\`\`\`
-
-Connector (edge) example:
-\`\`\`xml
-<mxCell id="3" style="endArrow=classic;html=1;" edge="1" parent="1" source="2" target="4">
-  <mxGeometry relative="1" as="geometry"/>
-</mxCell>
-\`\`\`
-
-Common styles:
-- Shapes: rounded=1 (rounded corners), fillColor=#hex, strokeColor=#hex
-- Edges: endArrow=classic/block/open/none, startArrow=none/classic, curved=1, edgeStyle=orthogonalEdgeStyle
-- Text: fontSize=14, fontStyle=1 (bold), align=center/left/right
-`;
+  // Get the appropriate system prompt based on model (extended for Opus/Haiku 4.5)
+  const systemMessage = getSystemPrompt(modelId);
 
   const lastMessage = messages[messages.length - 1];
 
@@ -169,12 +86,8 @@ Common styles:
   // Extract file parts (images) from the last message
   const fileParts = lastMessage.parts?.filter((part: any) => part.type === 'file') || [];
 
-    const formattedTextContent = `
-Current diagram XML:
-"""xml
-${xml || ''}
-"""
-User input:
+  // User input only - XML is now in a separate cached system message
+  const formattedUserInput = `User input:
 """md
 ${lastMessageText}
 """`;
@@ -182,37 +95,19 @@ ${lastMessageText}
   // Convert UIMessages to ModelMessages and add system message
   const modelMessages = convertToModelMessages(messages);
 
-    // Log messages with empty content for debugging (helps identify root cause)
-    const emptyMessages = modelMessages.filter((msg: any) =>
-      !msg.content || !Array.isArray(msg.content) || msg.content.length === 0
-    );
-    if (emptyMessages.length > 0) {
-      console.warn('[Chat API] Messages with empty content detected:',
-        JSON.stringify(emptyMessages.map((m: any) => ({ role: m.role, contentLength: m.content?.length })))
-      );
-      console.warn('[Chat API] Original UI messages structure:',
-        JSON.stringify(messages.map((m: any) => ({
-          id: m.id,
-          role: m.role,
-          partsCount: m.parts?.length,
-          partTypes: m.parts?.map((p: any) => p.type)
-        })))
-      );
-    }
-
   // Filter out messages with empty content arrays (Bedrock API rejects these)
   // This is a safety measure - ideally convertToModelMessages should handle all cases
   let enhancedMessages = modelMessages.filter((msg: any) =>
     msg.content && Array.isArray(msg.content) && msg.content.length > 0
   );
 
-    // Update the last message with formatted content if it's a user message
+  // Update the last message with user input only (XML moved to separate cached system message)
   if (enhancedMessages.length >= 1) {
     const lastModelMessage = enhancedMessages[enhancedMessages.length - 1];
     if (lastModelMessage.role === 'user') {
-        // Build content array with text and file parts
+      // Build content array with user input text and file parts
       const contentParts: any[] = [
-          { type: 'text', text: formattedTextContent }
+        { type: 'text', text: formattedUserInput }
       ];
 
       // Add image parts back
@@ -249,40 +144,50 @@ ${lastMessageText}
     }
   }
 
-    // Get AI model from environment configuration
-    const { model, providerOptions, headers } = getAIModel();
-
-    // System message with cache point for Bedrock (requires 1024+ tokens)
-    const systemMessageWithCache = {
+  // System messages with multiple cache breakpoints for optimal caching:
+  // - Breakpoint 1: Static instructions (~1500 tokens) - rarely changes
+  // - Breakpoint 2: Current XML context - changes per diagram, but constant within a conversation turn
+  // This allows: if only user message changes, both system caches are reused
+  //              if XML changes, instruction cache is still reused
+  const systemMessages = [
+    // Cache breakpoint 1: Instructions (rarely change)
+    {
       role: 'system' as const,
       content: systemMessage,
       providerOptions: {
         bedrock: { cachePoint: { type: 'default' } },
       },
-    };
+    },
+    // Cache breakpoint 2: Current diagram XML context
+    {
+      role: 'system' as const,
+      content: `Current diagram XML:\n"""xml\n${xml || ''}\n"""\nWhen using edit_diagram, COPY search patterns exactly from this XML - attribute order matters!`,
+      providerOptions: {
+        bedrock: { cachePoint: { type: 'default' } },
+      },
+    },
+  ];
+
+  const allMessages = [...systemMessages, ...enhancedMessages];
 
   const result = streamText({
     model,
-      messages: [systemMessageWithCache, ...enhancedMessages],
+    messages: allMessages,
     ...(providerOptions && { providerOptions }),
     ...(headers && { headers }),
-      // Only enable telemetry if Langfuse is configured
-      ...(process.env.LANGFUSE_PUBLIC_KEY && {
-        experimental_telemetry: {
-          isEnabled: true,
-          metadata: {
-            sessionId: validSessionId,
-            userId: userId,
-          },
-        },
+    // Langfuse telemetry config (returns undefined if not configured)
+    ...(getTelemetryConfig({ sessionId: validSessionId, userId }) && {
+      experimental_telemetry: getTelemetryConfig({ sessionId: validSessionId, userId }),
     }),
-      onFinish: ({ usage, providerMetadata }) => {
-        console.log('[Cache] Usage:', JSON.stringify({
-          inputTokens: usage?.inputTokens,
-          outputTokens: usage?.outputTokens,
-          cachedInputTokens: usage?.cachedInputTokens,
-        }, null, 2));
-        console.log('[Cache] Provider metadata:', JSON.stringify(providerMetadata, null, 2));
+    onFinish: ({ text, usage, providerMetadata }) => {
+      console.log('[Cache] Full providerMetadata:', JSON.stringify(providerMetadata, null, 2));
+      console.log('[Cache] Usage:', JSON.stringify(usage, null, 2));
+      // Pass usage to Langfuse (Bedrock streaming doesn't auto-report tokens to telemetry)
+      // AI SDK uses inputTokens/outputTokens, Langfuse expects promptTokens/completionTokens
+      setTraceOutput(text, {
+        promptTokens: usage?.inputTokens,
+        completionTokens: usage?.outputTokens,
+      });
     },
     tools: {
       // Client-side tool that will be executed on the client
@@ -328,14 +233,16 @@ Notes:
       },
       edit_diagram: {
         description: `Edit specific parts of the current diagram by replacing exact line matches. Use this tool to make targeted fixes without regenerating the entire XML.
+CRITICAL: Copy-paste the EXACT search pattern from the "Current diagram XML" in system context. Do NOT reorder attributes or reformat - the attribute order in draw.io XML varies and you MUST match it exactly.
 IMPORTANT: Keep edits concise:
+- COPY the exact mxCell line from the current XML (attribute order matters!)
 - Only include the lines that are changing, plus 1-2 surrounding lines for context if needed
 - Break large changes into multiple smaller edits
 - Each search must contain complete lines (never truncate mid-line)
 - First match only - be specific enough to target the right element`,
         inputSchema: z.object({
           edits: z.array(z.object({
-              search: z.string().describe("Exact lines to search for (including whitespace and indentation)"),
+            search: z.string().describe("EXACT lines copied from current XML (preserve attribute order!)"),
             replace: z.string().describe("Replacement lines")
           })).describe("Array of search/replace pairs to apply sequentially")
         })
@@ -369,11 +276,21 @@ IMPORTANT: Keep edits concise:
   return result.toUIMessageStreamResponse({
     onError: errorHandler,
   });
+}
+
+// Wrap handler with error handling
+async function safeHandler(req: Request): Promise<Response> {
+  try {
+    return await handleChatRequest(req);
   } catch (error) {
     console.error('Error in chat route:', error);
-    return Response.json(
-      { error: 'Internal server error' },
-      { status: 500 }
-    );
+    return Response.json({ error: 'Internal server error' }, { status: 500 });
   }
 }
+
+// Wrap with Langfuse observe (if configured)
+const observedHandler = wrapWithObserve(safeHandler);
+
+export async function POST(req: Request) {
+  return observedHandler(req);
+}

app/api/log-feedback/route.ts

@@ -0,0 +1,103 @@
+import { getLangfuseClient } from '@/lib/langfuse';
+import { randomUUID } from 'crypto';
+import { z } from 'zod';
+
+const feedbackSchema = z.object({
+  messageId: z.string().min(1).max(200),
+  feedback: z.enum(['good', 'bad']),
+  sessionId: z.string().min(1).max(200).optional(),
+});
+
+export async function POST(req: Request) {
+  const langfuse = getLangfuseClient();
+  if (!langfuse) {
+    return Response.json({ success: true, logged: false });
+  }
+
+  // Validate input
+  let data;
+  try {
+    data = feedbackSchema.parse(await req.json());
+  } catch {
+    return Response.json({ success: false, error: 'Invalid input' }, { status: 400 });
+  }
+
+  const { messageId, feedback, sessionId } = data;
+
+  // Get user IP for tracking
+  const forwardedFor = req.headers.get('x-forwarded-for');
+  const userId = forwardedFor?.split(',')[0]?.trim() || 'anonymous';
+
+  try {
+    // Find the most recent chat trace for this session to attach the score to
+    const tracesResponse = await langfuse.api.trace.list({
+      sessionId,
+      limit: 1,
+    });
+
+    const traces = tracesResponse.data || [];
+    const latestTrace = traces[0];
+
+    if (!latestTrace) {
+      // No trace found for this session - create a standalone feedback trace
+      const traceId = randomUUID();
+      const timestamp = new Date().toISOString();
+
+      await langfuse.api.ingestion.batch({
+        batch: [
+          {
+            type: 'trace-create',
+            id: randomUUID(),
+            timestamp,
+            body: {
+              id: traceId,
+              name: 'user-feedback',
+              sessionId,
+              userId,
+              input: { messageId, feedback },
+              metadata: { source: 'feedback-button', note: 'standalone - no chat trace found' },
+              timestamp,
+            },
+          },
+          {
+            type: 'score-create',
+            id: randomUUID(),
+            timestamp,
+            body: {
+              id: randomUUID(),
+              traceId,
+              name: 'user-feedback',
+              value: feedback === 'good' ? 1 : 0,
+              comment: `User gave ${feedback} feedback`,
+            },
+          },
+        ],
+      });
+    } else {
+      // Attach score to the existing chat trace
+      const timestamp = new Date().toISOString();
+
+      await langfuse.api.ingestion.batch({
+        batch: [
+          {
+            type: 'score-create',
+            id: randomUUID(),
+            timestamp,
+            body: {
+              id: randomUUID(),
+              traceId: latestTrace.id,
+              name: 'user-feedback',
+              value: feedback === 'good' ? 1 : 0,
+              comment: `User gave ${feedback} feedback`,
+            },
+          },
+        ],
+      });
+    }
+
+    return Response.json({ success: true, logged: true });
+  } catch (error) {
+    console.error('Langfuse feedback error:', error);
+    return Response.json({ success: false, error: 'Failed to log feedback' }, { status: 500 });
+  }
+}

app/api/log-save/route.ts

@@ -0,0 +1,65 @@
+import { getLangfuseClient } from '@/lib/langfuse';
+import { randomUUID } from 'crypto';
+import { z } from 'zod';
+
+const saveSchema = z.object({
+  filename: z.string().min(1).max(255),
+  format: z.enum(['drawio', 'png', 'svg']),
+  sessionId: z.string().min(1).max(200).optional(),
+});
+
+export async function POST(req: Request) {
+  const langfuse = getLangfuseClient();
+  if (!langfuse) {
+    return Response.json({ success: true, logged: false });
+  }
+
+  // Validate input
+  let data;
+  try {
+    data = saveSchema.parse(await req.json());
+  } catch {
+    return Response.json({ success: false, error: 'Invalid input' }, { status: 400 });
+  }
+
+  const { filename, format, sessionId } = data;
+
+  try {
+    const timestamp = new Date().toISOString();
+
+    // Find the most recent chat trace for this session to attach the save flag
+    const tracesResponse = await langfuse.api.trace.list({
+      sessionId,
+      limit: 1,
+    });
+
+    const traces = tracesResponse.data || [];
+    const latestTrace = traces[0];
+
+    if (latestTrace) {
+      // Add a score to the existing trace to flag that user saved
+      await langfuse.api.ingestion.batch({
+        batch: [
+          {
+            type: 'score-create',
+            id: randomUUID(),
+            timestamp,
+            body: {
+              id: randomUUID(),
+              traceId: latestTrace.id,
+              name: 'diagram-saved',
+              value: 1,
+              comment: `User saved diagram as ${filename}.${format}`,
+            },
+          },
+        ],
+      });
+    }
+    // If no trace found, skip logging (user hasn't chatted yet)
+
+    return Response.json({ success: true, logged: !!latestTrace });
+  } catch (error) {
+    console.error('Langfuse save error:', error);
+    return Response.json({ success: false, error: 'Failed to log save' }, { status: 500 });
+  }
+}

components/chat-input.tsx

@@ -29,6 +29,7 @@ interface ChatInputProps {
     onFileChange?: (files: File[]) => void;
     showHistory?: boolean;
     onToggleHistory?: (show: boolean) => void;
+    sessionId?: string;
 }
 
 export function ChatInput({
@@ -41,6 +42,7 @@ export function ChatInput({
     onFileChange = () => {},
     showHistory = false,
     onToggleHistory = () => {},
+    sessionId,
 }: ChatInputProps) {
     const { diagramHistory, saveDiagramToFile } = useDiagram();
     const textareaRef = useRef<HTMLTextAreaElement>(null);
@@ -249,7 +251,7 @@ export function ChatInput({
                         <SaveDialog
                             open={showSaveDialog}
                             onOpenChange={setShowSaveDialog}
-                            onSave={saveDiagramToFile}
+                            onSave={(filename, format) => saveDiagramToFile(filename, format, sessionId)}
                             defaultFilename={`diagram-${new Date().toISOString().slice(0, 10)}`}
                         />
 

components/chat-message-display.tsx

@@ -6,7 +6,7 @@ import { ScrollArea } from "@/components/ui/scroll-area";
 import ExamplePanel from "./chat-example-panel";
 import { UIMessage } from "ai";
 import { convertToLegalXml, replaceNodes, validateMxCellStructure } from "@/lib/utils";
-import { Copy, Check, X, ChevronDown, ChevronUp, Cpu, Minus, Plus } from "lucide-react";
+import { Copy, Check, X, ChevronDown, ChevronUp, Cpu, Minus, Plus, ThumbsUp, ThumbsDown, RotateCcw, Pencil } from "lucide-react";
 import { CodeBlock } from "./code-block";
 
 interface EditPair {
@@ -67,6 +67,9 @@ interface ChatMessageDisplayProps {
     error?: Error | null;
     setInput: (input: string) => void;
     setFiles: (files: File[]) => void;
+    sessionId?: string;
+    onRegenerate?: (messageIndex: number) => void;
+    onEditMessage?: (messageIndex: number, newText: string) => void;
 }
 
 export function ChatMessageDisplay({
@@ -74,6 +77,9 @@ export function ChatMessageDisplay({
     error,
     setInput,
     setFiles,
+    sessionId,
+    onRegenerate,
+    onEditMessage,
 }: ChatMessageDisplayProps) {
     const { chartXML, loadDiagram: onDisplayChart } = useDiagram();
     const messagesEndRef = useRef<HTMLDivElement>(null);
@@ -84,6 +90,9 @@ export function ChatMessageDisplay({
     );
     const [copiedMessageId, setCopiedMessageId] = useState<string | null>(null);
     const [copyFailedMessageId, setCopyFailedMessageId] = useState<string | null>(null);
+    const [feedback, setFeedback] = useState<Record<string, "good" | "bad">>({});
+    const [editingMessageId, setEditingMessageId] = useState<string | null>(null);
+    const [editText, setEditText] = useState<string>("");
 
     const copyMessageToClipboard = async (messageId: string, text: string) => {
         try {
@@ -97,6 +106,34 @@ export function ChatMessageDisplay({
         }
     };
 
+    const submitFeedback = async (messageId: string, value: "good" | "bad") => {
+        // Toggle off if already selected
+        if (feedback[messageId] === value) {
+            setFeedback((prev) => {
+                const next = { ...prev };
+                delete next[messageId];
+                return next;
+            });
+            return;
+        }
+
+        setFeedback((prev) => ({ ...prev, [messageId]: value }));
+
+        try {
+            await fetch("/api/log-feedback", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({
+                    messageId,
+                    feedback: value,
+                    sessionId,
+                }),
+            });
+        } catch (error) {
+            console.warn("Failed to log feedback:", error);
+        }
+    };
+
     const handleDisplayChart = useCallback(
         (xml: string) => {
             const currentXml = xml || "";
@@ -253,16 +290,39 @@ export function ChatMessageDisplay({
                 <div className="py-4 space-y-4">
                     {messages.map((message, messageIndex) => {
                         const userMessageText = message.role === "user" ? getMessageTextContent(message) : "";
+                        const isLastAssistantMessage = message.role === "assistant" && (
+                            messageIndex === messages.length - 1 ||
+                            messages.slice(messageIndex + 1).every(m => m.role !== "assistant")
+                        );
+                        const isLastUserMessage = message.role === "user" && (
+                            messageIndex === messages.length - 1 ||
+                            messages.slice(messageIndex + 1).every(m => m.role !== "user")
+                        );
+                        const isEditing = editingMessageId === message.id;
                         return (
                             <div
                                 key={message.id}
                                 className={`flex ${message.role === "user" ? "justify-end" : "justify-start"} animate-message-in`}
                                 style={{ animationDelay: `${messageIndex * 50}ms` }}
                             >
-                                {message.role === "user" && userMessageText && (
+                                {message.role === "user" && userMessageText && !isEditing && (
+                                    <div className="flex items-center gap-1 self-center mr-2">
+                                        {/* Edit button - only on last user message */}
+                                        {onEditMessage && isLastUserMessage && (
+                                            <button
+                                                onClick={() => {
+                                                    setEditingMessageId(message.id);
+                                                    setEditText(userMessageText);
+                                                }}
+                                                className="p-1.5 rounded-lg text-muted-foreground/60 hover:text-muted-foreground hover:bg-muted transition-colors"
+                                                title="Edit message"
+                                            >
+                                                <Pencil className="h-3.5 w-3.5" />
+                                            </button>
+                                        )}
                                         <button
                                             onClick={() => copyMessageToClipboard(message.id, userMessageText)}
-                                        className="p-1.5 rounded-lg text-muted-foreground/60 hover:text-muted-foreground hover:bg-muted transition-colors self-center mr-2"
+                                            className="p-1.5 rounded-lg text-muted-foreground/60 hover:text-muted-foreground hover:bg-muted transition-colors"
                                             title={copiedMessageId === message.id ? "Copied!" : copyFailedMessageId === message.id ? "Failed to copy" : "Copy message"}
                                         >
                                             {copiedMessageId === message.id ? (
@@ -273,16 +333,73 @@ export function ChatMessageDisplay({
                                                 <Copy className="h-3.5 w-3.5" />
                                             )}
                                         </button>
+                                    </div>
                                 )}
                                 <div className="max-w-[85%]">
-                                    {/* Text content in bubble */}
-                                    {message.parts?.some((part: any) => part.type === "text" || part.type === "file") && (
+                                    {/* Edit mode for user messages */}
+                                    {isEditing && message.role === "user" ? (
+                                        <div className="flex flex-col gap-2">
+                                            <textarea
+                                                value={editText}
+                                                onChange={(e) => setEditText(e.target.value)}
+                                                className="w-full min-w-[300px] px-4 py-3 text-sm rounded-2xl border border-primary bg-background text-foreground resize-none focus:outline-none focus:ring-2 focus:ring-primary"
+                                                rows={Math.min(editText.split('\n').length + 1, 6)}
+                                                autoFocus
+                                                onKeyDown={(e) => {
+                                                    if (e.key === "Escape") {
+                                                        setEditingMessageId(null);
+                                                        setEditText("");
+                                                    } else if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+                                                        e.preventDefault();
+                                                        if (editText.trim() && onEditMessage) {
+                                                            onEditMessage(messageIndex, editText.trim());
+                                                            setEditingMessageId(null);
+                                                            setEditText("");
+                                                        }
+                                                    }
+                                                }}
+                                            />
+                                            <div className="flex justify-end gap-2">
+                                                <button
+                                                    onClick={() => {
+                                                        setEditingMessageId(null);
+                                                        setEditText("");
+                                                    }}
+                                                    className="px-3 py-1.5 text-xs rounded-lg bg-muted hover:bg-muted/80 transition-colors"
+                                                >
+                                                    Cancel
+                                                </button>
+                                                <button
+                                                    onClick={() => {
+                                                        if (editText.trim() && onEditMessage) {
+                                                            onEditMessage(messageIndex, editText.trim());
+                                                            setEditingMessageId(null);
+                                                            setEditText("");
+                                                        }
+                                                    }}
+                                                    disabled={!editText.trim()}
+                                                    className="px-3 py-1.5 text-xs rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50 transition-colors"
+                                                >
+                                                    Save & Submit
+                                                </button>
+                                            </div>
+                                        </div>
+                                    ) : (
+                                        /* Text content in bubble */
+                                        message.parts?.some((part: any) => part.type === "text" || part.type === "file") && (
                                             <div
                                                 className={`px-4 py-3 text-sm leading-relaxed ${
                                                     message.role === "user"
                                                         ? "bg-primary text-primary-foreground rounded-2xl rounded-br-md shadow-sm"
                                                         : "bg-muted/60 text-foreground rounded-2xl rounded-bl-md"
-                                            }`}
+                                                } ${message.role === "user" && isLastUserMessage && onEditMessage ? "cursor-pointer hover:opacity-90 transition-opacity" : ""}`}
+                                                onClick={() => {
+                                                    if (message.role === "user" && isLastUserMessage && onEditMessage) {
+                                                        setEditingMessageId(message.id);
+                                                        setEditText(userMessageText);
+                                                    }
+                                                }}
+                                                title={message.role === "user" && isLastUserMessage && onEditMessage ? "Click to edit" : undefined}
                                             >
                                                 {message.parts?.map((part: any, index: number) => {
                                                     switch (part.type) {
@@ -312,6 +429,7 @@ export function ChatMessageDisplay({
                                                     }
                                                 })}
                                             </div>
+                                        )
                                     )}
                                     {/* Tool calls outside bubble */}
                                     {message.parts?.map((part: any) => {
@@ -320,6 +438,63 @@ export function ChatMessageDisplay({
                                         }
                                         return null;
                                     })}
+                                    {/* Action buttons for assistant messages */}
+                                    {message.role === "assistant" && (
+                                        <div className="flex items-center gap-1 mt-2">
+                                            {/* Copy button */}
+                                            <button
+                                                onClick={() => copyMessageToClipboard(message.id, getMessageTextContent(message))}
+                                                className={`p-1.5 rounded-lg transition-colors ${
+                                                    copiedMessageId === message.id
+                                                        ? "text-green-600 bg-green-100"
+                                                        : "text-muted-foreground/60 hover:text-foreground hover:bg-muted"
+                                                }`}
+                                                title={copiedMessageId === message.id ? "Copied!" : "Copy response"}
+                                            >
+                                                {copiedMessageId === message.id ? (
+                                                    <Check className="h-3.5 w-3.5" />
+                                                ) : (
+                                                    <Copy className="h-3.5 w-3.5" />
+                                                )}
+                                            </button>
+                                            {/* Regenerate button - only on last assistant message */}
+                                            {onRegenerate && isLastAssistantMessage && (
+                                                <button
+                                                    onClick={() => onRegenerate(messageIndex)}
+                                                    className="p-1.5 rounded-lg text-muted-foreground/60 hover:text-foreground hover:bg-muted transition-colors"
+                                                    title="Regenerate response"
+                                                >
+                                                    <RotateCcw className="h-3.5 w-3.5" />
+                                                </button>
+                                            )}
+                                            {/* Divider */}
+                                            <div className="w-px h-4 bg-border mx-1" />
+                                            {/* Thumbs up */}
+                                            <button
+                                                onClick={() => submitFeedback(message.id, "good")}
+                                                className={`p-1.5 rounded-lg transition-colors ${
+                                                    feedback[message.id] === "good"
+                                                        ? "text-green-600 bg-green-100"
+                                                        : "text-muted-foreground/60 hover:text-green-600 hover:bg-green-50"
+                                                }`}
+                                                title="Good response"
+                                            >
+                                                <ThumbsUp className="h-3.5 w-3.5" />
+                                            </button>
+                                            {/* Thumbs down */}
+                                            <button
+                                                onClick={() => submitFeedback(message.id, "bad")}
+                                                className={`p-1.5 rounded-lg transition-colors ${
+                                                    feedback[message.id] === "bad"
+                                                        ? "text-red-600 bg-red-100"
+                                                        : "text-muted-foreground/60 hover:text-red-600 hover:bg-red-50"
+                                                }`}
+                                                title="Bad response"
+                                            >
+                                                <ThumbsDown className="h-3.5 w-3.5" />
+                                            </button>
+                                        </div>
+                                    )}
                                 </div>
                             </div>
                         );

components/chat-panel.tsx

@@ -2,6 +2,7 @@
 
 import type React from "react";
 import { useRef, useEffect, useState } from "react";
+import { flushSync } from "react-dom";
 import { FaGithub } from "react-icons/fa";
 import { PanelRightClose, PanelRightOpen } from "lucide-react";
 import Link from "next/link";
@@ -64,6 +65,15 @@ export default function ChatPanel({
     // Generate a unique session ID for Langfuse tracing
     const [sessionId, setSessionId] = useState(() => `session-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`);
 
+    // Store XML snapshots for each user message (keyed by message index)
+    const xmlSnapshotsRef = useRef<Map<number, string>>(new Map());
+
+    // Ref to track latest chartXML for use in callbacks (avoids stale closure)
+    const chartXMLRef = useRef(chartXML);
+    useEffect(() => {
+        chartXMLRef.current = chartXML;
+    }, [chartXML]);
+
     const { messages, sendMessage, addToolResult, status, error, setMessages } =
         useChat({
             transport: new DefaultChatTransport({
@@ -95,8 +105,20 @@ export default function ChatPanel({
 
                     let currentXml = "";
                     try {
-                        // Fetch without saving to history - edit_diagram shouldn't create history entry
+                        console.log("[edit_diagram] Starting...");
+                        // Use chartXML from ref directly - more reliable than export
+                        // especially on Vercel where DrawIO iframe may have latency issues
+                        // Using ref to avoid stale closure in callback
+                        const cachedXML = chartXMLRef.current;
+                        if (cachedXML) {
+                            currentXml = cachedXML;
+                            console.log("[edit_diagram] Using cached chartXML, length:", currentXml.length);
+                        } else {
+                            // Fallback to export only if no cached XML
+                            console.log("[edit_diagram] No cached XML, fetching from DrawIO...");
                             currentXml = await onFetchChart(false);
+                            console.log("[edit_diagram] Got XML from export, length:", currentXml.length);
+                        }
 
                         const { replaceXMLParts } = await import("@/lib/utils");
                         const editedXml = replaceXMLParts(currentXml, edits);
@@ -108,8 +130,9 @@ export default function ChatPanel({
                             toolCallId: toolCall.toolCallId,
                             output: `Successfully applied ${edits.length} edit(s) to the diagram.`,
                         });
+                        console.log("[edit_diagram] Success");
                     } catch (error) {
-                        console.error("Edit diagram failed:", error);
+                        console.error("[edit_diagram] Failed:", error);
 
                         const errorMessage =
                             error instanceof Error
@@ -123,7 +146,7 @@ export default function ChatPanel({
 
 Current diagram XML:
 \`\`\`xml
-${currentXml}
+${currentXml || "No XML available"}
 \`\`\`
 
 Please retry with an adjusted search pattern or use display_diagram if retries are exhausted.`,
@@ -144,9 +167,6 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
         }
     }, [messages]);
 
-    useEffect(() => {
-        console.log("[ChatPanel] Status changed to:", status);
-    }, [status]);
 
     const onFormSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault();
@@ -156,6 +176,10 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
                 let chartXml = await onFetchChart();
                 chartXml = formatXML(chartXml);
 
+                // Update ref directly to avoid race condition with React's async state update
+                // This ensures edit_diagram has the correct XML before AI responds
+                chartXMLRef.current = chartXml;
+
                 const parts: any[] = [{ type: "text", text: input }];
 
                 if (files.length > 0) {
@@ -175,6 +199,10 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
                     }
                 }
 
+                // Save XML snapshot for this message (will be at index = current messages.length)
+                const messageIndex = messages.length;
+                xmlSnapshotsRef.current.set(messageIndex, chartXml);
+
                 sendMessage(
                     { parts },
                     {
@@ -203,6 +231,118 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
         setFiles(newFiles);
     };
 
+    const handleRegenerate = async (messageIndex: number) => {
+        const isProcessing = status === "streaming" || status === "submitted";
+        if (isProcessing) return;
+
+        // Find the user message before this assistant message
+        let userMessageIndex = messageIndex - 1;
+        while (userMessageIndex >= 0 && messages[userMessageIndex].role !== "user") {
+            userMessageIndex--;
+        }
+
+        if (userMessageIndex < 0) return;
+
+        const userMessage = messages[userMessageIndex];
+        const userParts = userMessage.parts;
+
+        // Get the text from the user message
+        const textPart = userParts?.find((p: any) => p.type === "text");
+        if (!textPart) return;
+
+        // Get the saved XML snapshot for this user message
+        const savedXml = xmlSnapshotsRef.current.get(userMessageIndex);
+        if (!savedXml) {
+            console.error("No saved XML snapshot for message index:", userMessageIndex);
+            return;
+        }
+
+        // Restore the diagram to the saved state
+        onDisplayChart(savedXml);
+
+        // Update ref directly to ensure edit_diagram has the correct XML
+        chartXMLRef.current = savedXml;
+
+        // Clean up snapshots for messages after the user message (they will be removed)
+        for (const key of xmlSnapshotsRef.current.keys()) {
+            if (key > userMessageIndex) {
+                xmlSnapshotsRef.current.delete(key);
+            }
+        }
+
+        // Remove the user message AND assistant message onwards (sendMessage will re-add the user message)
+        // Use flushSync to ensure state update is processed synchronously before sending
+        const newMessages = messages.slice(0, userMessageIndex);
+        flushSync(() => {
+            setMessages(newMessages);
+        });
+
+        // Now send the message after state is guaranteed to be updated
+        sendMessage(
+            { parts: userParts },
+            {
+                body: {
+                    xml: savedXml,
+                    sessionId,
+                },
+            }
+        );
+    };
+
+    const handleEditMessage = async (messageIndex: number, newText: string) => {
+        const isProcessing = status === "streaming" || status === "submitted";
+        if (isProcessing) return;
+
+        const message = messages[messageIndex];
+        if (!message || message.role !== "user") return;
+
+        // Get the saved XML snapshot for this user message
+        const savedXml = xmlSnapshotsRef.current.get(messageIndex);
+        if (!savedXml) {
+            console.error("No saved XML snapshot for message index:", messageIndex);
+            return;
+        }
+
+        // Restore the diagram to the saved state
+        onDisplayChart(savedXml);
+
+        // Update ref directly to ensure edit_diagram has the correct XML
+        chartXMLRef.current = savedXml;
+
+        // Clean up snapshots for messages after the user message (they will be removed)
+        for (const key of xmlSnapshotsRef.current.keys()) {
+            if (key > messageIndex) {
+                xmlSnapshotsRef.current.delete(key);
+            }
+        }
+
+        // Create new parts with updated text
+        const newParts = message.parts?.map((part: any) => {
+            if (part.type === "text") {
+                return { ...part, text: newText };
+            }
+            return part;
+        }) || [{ type: "text", text: newText }];
+
+        // Remove the user message AND assistant message onwards (sendMessage will re-add the user message)
+        // Use flushSync to ensure state update is processed synchronously before sending
+        const newMessages = messages.slice(0, messageIndex);
+        flushSync(() => {
+            setMessages(newMessages);
+        });
+
+        // Now send the edited message after state is guaranteed to be updated
+        sendMessage(
+            { parts: newParts },
+            {
+                body: {
+                    xml: savedXml,
+                    sessionId,
+                },
+            }
+        );
+    };
+
     // Collapsed view
     if (!isVisible) {
         return (
@@ -284,6 +424,9 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
                     error={error}
                     setInput={setInput}
                     setFiles={handleFileChange}
+                    sessionId={sessionId}
+                    onRegenerate={handleRegenerate}
+                    onEditMessage={handleEditMessage}
                 />
             </main>
 
@@ -298,11 +441,13 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
                         setMessages([]);
                         clearDiagram();
                         setSessionId(`session-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`);
+                        xmlSnapshotsRef.current.clear();
                     }}
                     files={files}
                     onFileChange={handleFileChange}
                     showHistory={showHistory}
                     onToggleHistory={setShowHistory}
+                    sessionId={sessionId}
                 />
             </footer>
         </div>

components/save-dialog.tsx

@@ -10,11 +10,26 @@ import {
     DialogTitle,
     DialogFooter,
 } from "@/components/ui/dialog";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select";
+
+export type ExportFormat = "drawio" | "png" | "svg";
+
+const FORMAT_OPTIONS: { value: ExportFormat; label: string; extension: string }[] = [
+    { value: "drawio", label: "Draw.io XML", extension: ".drawio" },
+    { value: "png", label: "PNG Image", extension: ".png" },
+    { value: "svg", label: "SVG Image", extension: ".svg" },
+];
 
 interface SaveDialogProps {
     open: boolean;
     onOpenChange: (open: boolean) => void;
-    onSave: (filename: string) => void;
+    onSave: (filename: string, format: ExportFormat) => void;
     defaultFilename: string;
 }
 
@@ -25,6 +40,7 @@ export function SaveDialog({
     defaultFilename,
 }: SaveDialogProps) {
     const [filename, setFilename] = useState(defaultFilename);
+    const [format, setFormat] = useState<ExportFormat>("drawio");
 
     useEffect(() => {
         if (open) {
@@ -34,7 +50,7 @@ export function SaveDialog({
 
     const handleSave = () => {
         const finalFilename = filename.trim() || defaultFilename;
-        onSave(finalFilename);
+        onSave(finalFilename, format);
         onOpenChange(false);
     };
 
@@ -45,12 +61,30 @@ export function SaveDialog({
         }
     };
 
+    const currentFormat = FORMAT_OPTIONS.find((f) => f.value === format);
+
     return (
         <Dialog open={open} onOpenChange={onOpenChange}>
             <DialogContent className="sm:max-w-md">
                 <DialogHeader>
                     <DialogTitle>Save Diagram</DialogTitle>
                 </DialogHeader>
+                <div className="space-y-4">
+                    <div className="space-y-2">
+                        <label className="text-sm font-medium">Format</label>
+                        <Select value={format} onValueChange={(v) => setFormat(v as ExportFormat)}>
+                            <SelectTrigger>
+                                <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                                {FORMAT_OPTIONS.map((opt) => (
+                                    <SelectItem key={opt.value} value={opt.value}>
+                                        {opt.label}
+                                    </SelectItem>
+                                ))}
+                            </SelectContent>
+                        </Select>
+                    </div>
                     <div className="space-y-2">
                         <label className="text-sm font-medium">Filename</label>
                         <div className="flex items-stretch">
@@ -64,10 +98,11 @@ export function SaveDialog({
                                 className="rounded-r-none border-r-0 focus-visible:z-10"
                             />
                             <span className="inline-flex items-center px-3 rounded-r-md border border-l-0 border-input bg-muted text-sm text-muted-foreground font-mono">
-                            .drawio
+                                {currentFormat?.extension || ".drawio"}
                             </span>
                         </div>
                     </div>
+                </div>
                 <DialogFooter>
                     <Button variant="outline" onClick={() => onOpenChange(false)}>
                         Cancel

components/ui/select.tsx

@@ -0,0 +1,187 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  align = "center",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        position={position}
+        align={align}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}

contexts/diagram-context.tsx

@@ -3,6 +3,7 @@
 import React, { createContext, useContext, useRef, useState } from "react";
 import type { DrawIoEmbedRef } from "react-drawio";
 import { extractDiagramXML } from "../lib/utils";
+import type { ExportFormat } from "@/components/save-dialog";
 
 interface DiagramContextType {
     chartXML: string;
@@ -15,7 +16,7 @@ interface DiagramContextType {
     drawioRef: React.Ref<DrawIoEmbedRef | null>;
     handleDiagramExport: (data: any) => void;
     clearDiagram: () => void;
-    saveDiagramToFile: (filename: string) => void;
+    saveDiagramToFile: (filename: string, format: ExportFormat, sessionId?: string) => void;
 }
 
 const DiagramContext = createContext<DiagramContextType | undefined>(undefined);
@@ -30,8 +31,11 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
     const resolverRef = useRef<((value: string) => void) | null>(null);
     // Track if we're expecting an export for history (user-initiated)
     const expectHistoryExportRef = useRef<boolean>(false);
-    // Track if we're expecting an export for file save
-    const saveResolverRef = useRef<((xml: string) => void) | null>(null);
+    // Track if we're expecting an export for file save (stores raw export data)
+    const saveResolverRef = useRef<{
+        resolver: ((data: string) => void) | null;
+        format: ExportFormat | null;
+    }>({ resolver: null, format: null });
 
     const handleExport = () => {
         if (drawioRef.current) {
@@ -61,6 +65,18 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
     };
 
     const handleDiagramExport = (data: any) => {
+        // Handle save to file if requested (process raw data before extraction)
+        if (saveResolverRef.current.resolver) {
+            const format = saveResolverRef.current.format;
+            saveResolverRef.current.resolver(data.data);
+            saveResolverRef.current = { resolver: null, format: null };
+            // For non-xmlsvg formats, skip XML extraction as it will fail
+            // Only drawio (which uses xmlsvg internally) has the content attribute
+            if (format === "png" || format === "svg") {
+                return;
+            }
+        }
+
         const extractedXML = extractDiagramXML(data.data);
         setChartXML(extractedXML);
         setLatestSvg(data.data);
@@ -81,12 +97,6 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
             resolverRef.current(extractedXML);
             resolverRef.current = null;
         }
-
-        // Handle save to file if requested
-        if (saveResolverRef.current) {
-            saveResolverRef.current(extractedXML);
-            saveResolverRef.current = null;
-        }
     };
 
     const clearDiagram = () => {
@@ -97,33 +107,87 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
         setDiagramHistory([]);
     };
 
-    const saveDiagramToFile = (filename: string) => {
+    const saveDiagramToFile = (filename: string, format: ExportFormat, sessionId?: string) => {
         if (!drawioRef.current) {
             console.warn("Draw.io editor not ready");
             return;
         }
 
-        // Export diagram and save when export completes
-        drawioRef.current.exportDiagram({ format: "xmlsvg" });
-        saveResolverRef.current = (xml: string) => {
-            // Wrap in proper .drawio format
-            let fileContent = xml;
+        // Map format to draw.io export format
+        const drawioFormat = format === "drawio" ? "xmlsvg" : format;
+
+        // Set up the resolver before triggering export
+        saveResolverRef.current = {
+            resolver: (exportData: string) => {
+                let fileContent: string | Blob;
+                let mimeType: string;
+                let extension: string;
+
+                if (format === "drawio") {
+                    // Extract XML from SVG for .drawio format
+                    const xml = extractDiagramXML(exportData);
+                    let xmlContent = xml;
                     if (!xml.includes("<mxfile")) {
-                fileContent = `<mxfile><diagram name="Page-1" id="page-1">${xml}</diagram></mxfile>`;
+                        xmlContent = `<mxfile><diagram name="Page-1" id="page-1">${xml}</diagram></mxfile>`;
+                    }
+                    fileContent = xmlContent;
+                    mimeType = "application/xml";
+                    extension = ".drawio";
+                } else if (format === "png") {
+                    // PNG data comes as base64 data URL
+                    fileContent = exportData;
+                    mimeType = "image/png";
+                    extension = ".png";
+                } else {
+                    // SVG format
+                    fileContent = exportData;
+                    mimeType = "image/svg+xml";
+                    extension = ".svg";
+                }
+
+                // Log save event to Langfuse (flags the trace)
+                logSaveToLangfuse(filename, format, sessionId);
+
+                // Handle download
+                let url: string;
+                if (typeof fileContent === "string" && fileContent.startsWith("data:")) {
+                    // Already a data URL (PNG)
+                    url = fileContent;
+                } else {
+                    const blob = new Blob([fileContent], { type: mimeType });
+                    url = URL.createObjectURL(blob);
                 }
 
-            const blob = new Blob([fileContent], { type: "application/xml" });
-            const url = URL.createObjectURL(blob);
                 const a = document.createElement("a");
                 a.href = url;
-            // Add .drawio extension if not present
-            a.download = filename.endsWith(".drawio") ? filename : `${filename}.drawio`;
+                a.download = `${filename}${extension}`;
                 document.body.appendChild(a);
                 a.click();
                 document.body.removeChild(a);
+
                 // Delay URL revocation to ensure download completes
+                if (!url.startsWith("data:")) {
                     setTimeout(() => URL.revokeObjectURL(url), 100);
+                }
+            },
+            format,
         };
+
+        // Export diagram - callback will be handled in handleDiagramExport
+        drawioRef.current.exportDiagram({ format: drawioFormat });
+    };
+
+    // Log save event to Langfuse (just flags the trace, doesn't send content)
+    const logSaveToLangfuse = async (filename: string, format: string, sessionId?: string) => {
+        try {
+            await fetch("/api/log-save", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ filename, format, sessionId }),
+            });
+        } catch (error) {
+            console.warn("Failed to log save to Langfuse:", error);
+        }
     };
 
     return (

instrumentation.ts

@@ -12,11 +12,24 @@ export function register() {
     publicKey: process.env.LANGFUSE_PUBLIC_KEY,
     secretKey: process.env.LANGFUSE_SECRET_KEY,
     baseUrl: process.env.LANGFUSE_BASEURL,
+    // Filter out Next.js HTTP request spans so AI SDK spans become root traces
+    shouldExportSpan: ({ otelSpan }) => {
+      const spanName = otelSpan.name;
+      // Skip Next.js HTTP infrastructure spans
+      if (spanName.startsWith('POST /') ||
+          spanName.startsWith('GET /') ||
+          spanName.includes('BaseServer') ||
+          spanName.includes('handleRequest')) {
+        return false;
+      }
+      return true;
+    },
   });
 
   const tracerProvider = new NodeTracerProvider({
     spanProcessors: [langfuseSpanProcessor],
   });
 
+  // Register globally so AI SDK's telemetry also uses this processor
   tracerProvider.register();
 }

lib/ai-providers.ts

@@ -21,6 +21,7 @@ interface ModelConfig {
   model: any;
   providerOptions?: any;
   headers?: Record<string, string>;
+  modelId: string;
 }
 
 // Bedrock provider options for Anthropic beta features
@@ -35,11 +36,8 @@ const ANTHROPIC_BETA_HEADERS = {
   'anthropic-beta': 'fine-grained-tool-streaming-2025-05-14',
 };
 
-/**
- * Validate that required API keys are present for the selected provider
- */
-function validateProviderCredentials(provider: ProviderName): void {
-  const requiredEnvVars: Record<ProviderName, string | null> = {
+// Map of provider to required environment variable
+const PROVIDER_ENV_VARS: Record<ProviderName, string | null> = {
   bedrock: 'AWS_ACCESS_KEY_ID',
   openai: 'OPENAI_API_KEY',
   anthropic: 'ANTHROPIC_API_KEY',
@@ -50,7 +48,35 @@ function validateProviderCredentials(provider: ProviderName): void {
   deepseek: 'DEEPSEEK_API_KEY',
 };
 
-  const requiredVar = requiredEnvVars[provider];
+/**
+ * Auto-detect provider based on available API keys
+ * Returns the provider if exactly one is configured, otherwise null
+ */
+function detectProvider(): ProviderName | null {
+  const configuredProviders: ProviderName[] = [];
+
+  for (const [provider, envVar] of Object.entries(PROVIDER_ENV_VARS)) {
+    if (envVar === null) {
+      // Skip ollama - it doesn't require credentials
+      continue;
+    }
+    if (process.env[envVar]) {
+      configuredProviders.push(provider as ProviderName);
+    }
+  }
+
+  if (configuredProviders.length === 1) {
+    return configuredProviders[0];
+  }
+
+  return null;
+}
+
+/**
+ * Validate that required API keys are present for the selected provider
+ */
+function validateProviderCredentials(provider: ProviderName): void {
+  const requiredVar = PROVIDER_ENV_VARS[provider];
   if (requiredVar && !process.env[requiredVar]) {
     throw new Error(
       `${requiredVar} environment variable is required for ${provider} provider. ` +
@@ -79,7 +105,6 @@ function validateProviderCredentials(provider: ProviderName): void {
  * - DEEPSEEK_BASE_URL: DeepSeek endpoint (optional)
  */
 export function getAIModel(): ModelConfig {
-  const provider = (process.env.AI_PROVIDER || 'bedrock') as ProviderName;
   const modelId = process.env.AI_MODEL;
 
   if (!modelId) {
@@ -88,10 +113,45 @@ export function getAIModel(): ModelConfig {
     );
   }
 
+  // Determine provider: explicit config > auto-detect > error
+  let provider: ProviderName;
+  if (process.env.AI_PROVIDER) {
+    provider = process.env.AI_PROVIDER as ProviderName;
+  } else {
+    const detected = detectProvider();
+    if (detected) {
+      provider = detected;
+      console.log(`[AI Provider] Auto-detected provider: ${provider}`);
+    } else {
+      // List configured providers for better error message
+      const configured = Object.entries(PROVIDER_ENV_VARS)
+        .filter(([, envVar]) => envVar && process.env[envVar as string])
+        .map(([p]) => p);
+
+      if (configured.length === 0) {
+        throw new Error(
+          `No AI provider configured. Please set one of the following API keys in your .env.local file:\n` +
+          `- DEEPSEEK_API_KEY for DeepSeek\n` +
+          `- OPENAI_API_KEY for OpenAI\n` +
+          `- ANTHROPIC_API_KEY for Anthropic\n` +
+          `- GOOGLE_GENERATIVE_AI_API_KEY for Google\n` +
+          `- AWS_ACCESS_KEY_ID for Bedrock\n` +
+          `- OPENROUTER_API_KEY for OpenRouter\n` +
+          `- AZURE_API_KEY for Azure\n` +
+          `Or set AI_PROVIDER=ollama for local Ollama.`
+        );
+      } else {
+        throw new Error(
+          `Multiple AI providers configured (${configured.join(', ')}). ` +
+          `Please set AI_PROVIDER to specify which one to use.`
+        );
+      }
+    }
+  }
+
   // Validate provider credentials
   validateProviderCredentials(provider);
 
-  // Log initialization for debugging
   console.log(`[AI Provider] Initializing ${provider} with model: ${modelId}`);
 
   let model: any;
@@ -191,10 +251,5 @@ export function getAIModel(): ModelConfig {
       );
   }
 
-  // Log if provider options or headers are being applied
-  if (providerOptions || headers) {
-    console.log('[AI Provider] Applying provider-specific options/headers');
-  }
-
-  return { model, providerOptions, headers };
+  return { model, providerOptions, headers, modelId };
 }

lib/cached-responses.ts

@@ -12,117 +12,117 @@ export const CACHED_EXAMPLE_RESPONSES: CachedResponse[] = [
   <mxCell id="0"/>
   <mxCell id="1" parent="0"/>
 
-  <!-- Title -->
+
   <mxCell id="title" value="Transformer Architecture" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=20;fontStyle=1;" vertex="1" parent="1">
     <mxGeometry x="300" y="20" width="250" height="30" as="geometry"/>
   </mxCell>
 
-  <!-- Input Embedding (Left - Encoder Side) -->
+
   <mxCell id="input_embed" value="Input Embedding" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=11;" vertex="1" parent="1">
     <mxGeometry x="80" y="480" width="120" height="40" as="geometry"/>
   </mxCell>
 
-  <!-- Positional Encoding (Left) -->
+
   <mxCell id="pos_enc_left" value="Positional Encoding" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=11;" vertex="1" parent="1">
     <mxGeometry x="80" y="420" width="120" height="40" as="geometry"/>
   </mxCell>
 
-  <!-- Encoder Stack -->
+
   <mxCell id="encoder_box" value="ENCODER" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;verticalAlign=top;fontSize=12;fontStyle=1;" vertex="1" parent="1">
     <mxGeometry x="60" y="180" width="160" height="220" as="geometry"/>
   </mxCell>
 
-  <!-- Multi-Head Attention (Encoder) -->
+
   <mxCell id="mha_enc" value="Multi-Head&#xa;Attention" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;fontSize=10;" vertex="1" parent="1">
     <mxGeometry x="80" y="330" width="120" height="50" as="geometry"/>
   </mxCell>
 
-  <!-- Add & Norm 1 (Encoder) -->
+
   <mxCell id="add_norm1_enc" value="Add &amp; Norm" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;fontSize=10;" vertex="1" parent="1">
     <mxGeometry x="80" y="280" width="120" height="30" as="geometry"/>
   </mxCell>
 
-  <!-- Feed Forward (Encoder) -->
+
   <mxCell id="ff_enc" value="Feed Forward" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;fontSize=10;" vertex="1" parent="1">
     <mxGeometry x="80" y="240" width="120" height="30" as="geometry"/>
   </mxCell>
 
-  <!-- Add & Norm 2 (Encoder) -->
+
   <mxCell id="add_norm2_enc" value="Add &amp; Norm" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;fontSize=10;" vertex="1" parent="1">
     <mxGeometry x="80" y="200" width="120" height="30" as="geometry"/>
   </mxCell>
 
-  <!-- Nx label for encoder -->
+
   <mxCell id="nx_enc" value="Nx" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=11;fontStyle=2;" vertex="1" parent="1">
     <mxGeometry x="30" y="275" width="30" height="30" as="geometry"/>
   </mxCell>
 
-  <!-- Output Embedding (Right - Decoder Side) -->
+
   <mxCell id="output_embed" value="Output Embedding" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=11;" vertex="1" parent="1">
     <mxGeometry x="650" y="480" width="120" height="40" as="geometry"/>
   </mxCell>
 
-  <!-- Positional Encoding (Right) -->
+
   <mxCell id="pos_enc_right" value="Positional Encoding" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=11;" vertex="1" parent="1">
     <mxGeometry x="650" y="420" width="120" height="40" as="geometry"/>
   </mxCell>
 
-  <!-- Decoder Stack -->
+
   <mxCell id="decoder_box" value="DECODER" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;verticalAlign=top;fontSize=12;fontStyle=1;" vertex="1" parent="1">
     <mxGeometry x="630" y="140" width="160" height="260" as="geometry"/>
   </mxCell>
 
-  <!-- Masked Multi-Head Attention (Decoder) -->
+
   <mxCell id="masked_mha_dec" value="Masked Multi-Head&#xa;Attention" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;fontSize=10;" vertex="1" parent="1">
     <mxGeometry x="650" y="340" width="120" height="50" as="geometry"/>
   </mxCell>
 
-  <!-- Add & Norm 1 (Decoder) -->
+
   <mxCell id="add_norm1_dec" value="Add &amp; Norm" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;fontSize=10;" vertex="1" parent="1">
     <mxGeometry x="650" y="290" width="120" height="30" as="geometry"/>
   </mxCell>
 
-  <!-- Multi-Head Attention (Decoder - Cross Attention) -->
+
   <mxCell id="mha_dec" value="Multi-Head&#xa;Attention" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;fontSize=10;" vertex="1" parent="1">
     <mxGeometry x="650" y="240" width="120" height="40" as="geometry"/>
   </mxCell>
 
-  <!-- Add & Norm 2 (Decoder) -->
+
   <mxCell id="add_norm2_dec" value="Add &amp; Norm" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;fontSize=10;" vertex="1" parent="1">
     <mxGeometry x="650" y="200" width="120" height="30" as="geometry"/>
   </mxCell>
 
-  <!-- Feed Forward (Decoder) -->
+
   <mxCell id="ff_dec" value="Feed Forward" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;fontSize=10;" vertex="1" parent="1">
     <mxGeometry x="650" y="160" width="120" height="30" as="geometry"/>
   </mxCell>
 
-  <!-- Add & Norm 3 (Decoder) -->
+
   <mxCell id="add_norm3_dec" value="Add &amp; Norm" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;fontSize=10;" vertex="1" parent="1">
     <mxGeometry x="650" y="120" width="120" height="30" as="geometry"/>
   </mxCell>
 
-  <!-- Nx label for decoder -->
+
   <mxCell id="nx_dec" value="Nx" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=11;fontStyle=2;" vertex="1" parent="1">
     <mxGeometry x="790" y="255" width="30" height="30" as="geometry"/>
   </mxCell>
 
-  <!-- Linear -->
+
   <mxCell id="linear" value="Linear" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;fontSize=11;" vertex="1" parent="1">
     <mxGeometry x="650" y="80" width="120" height="30" as="geometry"/>
   </mxCell>
 
-  <!-- Softmax -->
+
   <mxCell id="softmax" value="Softmax" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;fontSize=11;" vertex="1" parent="1">
     <mxGeometry x="650" y="40" width="120" height="30" as="geometry"/>
   </mxCell>
 
-  <!-- Output Probabilities -->
+
   <mxCell id="output" value="Output Probabilities" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=11;fontStyle=1;" vertex="1" parent="1">
     <mxGeometry x="640" y="0" width="140" height="30" as="geometry"/>
   </mxCell>
 
-  <!-- Animated Connectors - Encoder Side -->
+
   <mxCell id="conn1" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;strokeWidth=2;strokeColor=#6c8ebf;flowAnimation=1;" edge="1" parent="1" source="input_embed" target="pos_enc_left">
     <mxGeometry relative="1" as="geometry"/>
   </mxCell>
@@ -143,7 +143,7 @@ export const CACHED_EXAMPLE_RESPONSES: CachedResponse[] = [
     <mxGeometry relative="1" as="geometry"/>
   </mxCell>
 
-  <!-- Encoder to Decoder Cross Attention -->
+
   <mxCell id="conn_cross" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;strokeWidth=3;strokeColor=#9673a6;flowAnimation=1;dashed=1;" edge="1" parent="1" source="add_norm2_enc" target="mha_dec">
     <mxGeometry relative="1" as="geometry">
       <Array as="points">
@@ -158,7 +158,7 @@ export const CACHED_EXAMPLE_RESPONSES: CachedResponse[] = [
     </mxGeometry>
   </mxCell>
 
-  <!-- Animated Connectors - Decoder Side -->
+
   <mxCell id="conn6" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;strokeWidth=2;strokeColor=#d79b00;flowAnimation=1;" edge="1" parent="1" source="output_embed" target="pos_enc_right">
     <mxGeometry relative="1" as="geometry"/>
   </mxCell>
@@ -199,7 +199,7 @@ export const CACHED_EXAMPLE_RESPONSES: CachedResponse[] = [
     <mxGeometry relative="1" as="geometry"/>
   </mxCell>
 
-  <!-- Residual Connections (Encoder) -->
+
   <mxCell id="res1_enc" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;strokeWidth=1.5;strokeColor=#999999;dashed=1;flowAnimation=1;" edge="1" parent="1" source="mha_enc" target="add_norm1_enc">
     <mxGeometry relative="1" as="geometry">
       <Array as="points">
@@ -218,7 +218,7 @@ export const CACHED_EXAMPLE_RESPONSES: CachedResponse[] = [
     </mxGeometry>
   </mxCell>
 
-  <!-- Residual Connections (Decoder) -->
+
   <mxCell id="res1_dec" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;strokeWidth=1.5;strokeColor=#999999;dashed=1;flowAnimation=1;" edge="1" parent="1" source="masked_mha_dec" target="add_norm1_dec">
     <mxGeometry relative="1" as="geometry">
       <Array as="points">
@@ -246,7 +246,7 @@ export const CACHED_EXAMPLE_RESPONSES: CachedResponse[] = [
     </mxGeometry>
   </mxCell>
 
-  <!-- Input/Output Labels -->
+
   <mxCell id="input_label" value="Inputs" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=12;fontStyle=1;" vertex="1" parent="1">
     <mxGeometry x="110" y="530" width="60" height="20" as="geometry"/>
   </mxCell>
@@ -263,37 +263,37 @@ export const CACHED_EXAMPLE_RESPONSES: CachedResponse[] = [
   <mxCell id="0"/>
   <mxCell id="1" parent="0"/>
 
-  <!-- AWS Cloud Container -->
+
   <mxCell id="2" value="AWS" style="sketch=0;outlineConnect=0;gradientColor=none;html=1;whiteSpace=wrap;fontSize=12;fontStyle=0;container=1;pointerEvents=0;collapsible=0;recursiveResize=0;shape=mxgraph.aws4.group;grIcon=mxgraph.aws4.group_aws_cloud;strokeColor=#232F3E;fillColor=none;verticalAlign=top;align=left;spacingLeft=30;fontColor=#232F3E;dashed=0;rounded=1;arcSize=5;" vertex="1" parent="1">
     <mxGeometry x="340" y="40" width="880" height="520" as="geometry"/>
   </mxCell>
 
-  <!-- User -->
+
   <mxCell id="3" value="User" style="sketch=0;outlineConnect=0;fontColor=#232F3E;gradientColor=none;fillColor=#232F3D;strokeColor=none;dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;html=1;fontSize=14;fontStyle=0;aspect=fixed;pointerEvents=1;shape=mxgraph.aws4.user;rounded=1;" vertex="1" parent="1">
     <mxGeometry x="80" y="240" width="78" height="78" as="geometry"/>
   </mxCell>
 
-  <!-- EC2 Instance -->
+
   <mxCell id="4" value="EC2" style="sketch=0;points=[[0,0,0],[0.25,0,0],[0.5,0,0],[0.75,0,0],[1,0,0],[0,1,0],[0.25,1,0],[0.5,1,0],[0.75,1,0],[1,1,0],[0,0.25,0],[0,0.5,0],[0,0.75,0],[1,0.25,0],[1,0.5,0],[1,0.75,0]];outlineConnect=0;fontColor=#232F3E;fillColor=#ED7100;strokeColor=#ffffff;dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;html=1;fontSize=14;fontStyle=0;aspect=fixed;shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.ec2;rounded=1;" vertex="1" parent="1">
     <mxGeometry x="560" y="240" width="78" height="78" as="geometry"/>
   </mxCell>
 
-  <!-- S3 Bucket -->
+
   <mxCell id="5" value="S3" style="sketch=0;points=[[0,0,0],[0.25,0,0],[0.5,0,0],[0.75,0,0],[1,0,0],[0,1,0],[0.25,1,0],[0.5,1,0],[0.75,1,0],[1,1,0],[0,0.25,0],[0,0.5,0],[0,0.75,0],[1,0.25,0],[1,0.5,0],[1,0.75,0]];outlineConnect=0;fontColor=#232F3E;fillColor=#7AA116;strokeColor=#ffffff;dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;html=1;fontSize=14;fontStyle=0;aspect=fixed;shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.s3;rounded=1;" vertex="1" parent="1">
     <mxGeometry x="960" y="120" width="78" height="78" as="geometry"/>
   </mxCell>
 
-  <!-- Bedrock -->
+
   <mxCell id="6" value="bedrock" style="sketch=0;points=[[0,0,0],[0.25,0,0],[0.5,0,0],[0.75,0,0],[1,0,0],[0,1,0],[0.25,1,0],[0.5,1,0],[0.75,1,0],[1,1,0],[0,0.25,0],[0,0.5,0],[0,0.75,0],[1,0.25,0],[1,0.5,0],[1,0.75,0]];outlineConnect=0;fontColor=#232F3E;fillColor=#01A88D;strokeColor=#ffffff;dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;html=1;fontSize=14;fontStyle=0;aspect=fixed;shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.bedrock;rounded=1;" vertex="1" parent="1">
     <mxGeometry x="960" y="260" width="78" height="78" as="geometry"/>
   </mxCell>
 
-  <!-- DynamoDB -->
+
   <mxCell id="7" value="DynamoDB" style="sketch=0;points=[[0,0,0],[0.25,0,0],[0.5,0,0],[0.75,0,0],[1,0,0],[0,1,0],[0.25,1,0],[0.5,1,0],[0.75,1,0],[1,1,0],[0,0.25,0],[0,0.5,0],[0,0.75,0],[1,0.25,0],[1,0.5,0],[1,0.75,0]];outlineConnect=0;fontColor=#232F3E;fillColor=#C925D1;strokeColor=#ffffff;dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;html=1;fontSize=14;fontStyle=0;aspect=fixed;shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.dynamodb;rounded=1;" vertex="1" parent="1">
     <mxGeometry x="960" y="400" width="78" height="78" as="geometry"/>
   </mxCell>
 
-  <!-- Arrow: User to EC2 -->
+
   <mxCell id="8" value="" style="endArrow=classic;html=1;rounded=0;strokeColor=#232F3E;strokeWidth=2;exitX=1;exitY=0.5;exitDx=0;exitDy=0;exitPerimeter=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" source="3" target="4">
     <mxGeometry width="50" height="50" relative="1" as="geometry">
       <mxPoint x="400" y="350" as="sourcePoint"/>
@@ -301,7 +301,7 @@ export const CACHED_EXAMPLE_RESPONSES: CachedResponse[] = [
     </mxGeometry>
   </mxCell>
 
-  <!-- Arrow: EC2 to S3 -->
+
   <mxCell id="9" value="" style="endArrow=classic;html=1;rounded=0;strokeColor=#232F3E;strokeWidth=2;exitX=1;exitY=0.25;exitDx=0;exitDy=0;exitPerimeter=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" source="4" target="5">
     <mxGeometry width="50" height="50" relative="1" as="geometry">
       <mxPoint x="700" y="350" as="sourcePoint"/>
@@ -309,7 +309,7 @@ export const CACHED_EXAMPLE_RESPONSES: CachedResponse[] = [
     </mxGeometry>
   </mxCell>
 
-  <!-- Arrow: EC2 to Bedrock -->
+
   <mxCell id="10" value="" style="endArrow=classic;html=1;rounded=0;strokeColor=#232F3E;strokeWidth=2;exitX=1;exitY=0.5;exitDx=0;exitDy=0;exitPerimeter=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" source="4" target="6">
     <mxGeometry width="50" height="50" relative="1" as="geometry">
       <mxPoint x="700" y="350" as="sourcePoint"/>
@@ -317,7 +317,7 @@ export const CACHED_EXAMPLE_RESPONSES: CachedResponse[] = [
     </mxGeometry>
   </mxCell>
 
-  <!-- Arrow: EC2 to DynamoDB -->
+
   <mxCell id="11" value="" style="endArrow=classic;html=1;rounded=0;strokeColor=#232F3E;strokeWidth=2;exitX=1;exitY=0.75;exitDx=0;exitDy=0;exitPerimeter=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" source="4" target="7">
     <mxGeometry width="50" height="50" relative="1" as="geometry">
       <mxPoint x="700" y="350" as="sourcePoint"/>
@@ -333,61 +333,61 @@ export const CACHED_EXAMPLE_RESPONSES: CachedResponse[] = [
   <mxCell id="0"/>
   <mxCell id="1" parent="0"/>
 
-  <!-- Start: Lamp doesn't work -->
+
   <mxCell id="2" value="Lamp doesn't work" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffcccc;strokeColor=#000000;strokeWidth=2;fontSize=18;fontStyle=0;" vertex="1" parent="1">
     <mxGeometry x="140" y="40" width="180" height="60" as="geometry"/>
   </mxCell>
 
-  <!-- Arrow from start to first decision -->
+
   <mxCell id="3" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#000000;strokeWidth=2;endArrow=block;endFill=1;" edge="1" parent="1" source="2" target="4">
     <mxGeometry relative="1" as="geometry"/>
   </mxCell>
 
-  <!-- Decision: Lamp plugged in? -->
+
   <mxCell id="4" value="Lamp&lt;br&gt;plugged in?" style="rhombus;whiteSpace=wrap;html=1;fillColor=#ffff99;strokeColor=#000000;strokeWidth=2;fontSize=18;fontStyle=0;" vertex="1" parent="1">
     <mxGeometry x="130" y="150" width="200" height="200" as="geometry"/>
   </mxCell>
 
-  <!-- Arrow to Plug in lamp (No) -->
+
   <mxCell id="5" value="No" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#000000;strokeWidth=2;endArrow=block;endFill=1;fontSize=16;" edge="1" parent="1" source="4" target="6">
     <mxGeometry x="-0.2" relative="1" as="geometry">
       <mxPoint as="offset"/>
     </mxGeometry>
   </mxCell>
 
-  <!-- Action: Plug in lamp -->
+
   <mxCell id="6" value="Plug in lamp" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#99ff99;strokeColor=#000000;strokeWidth=2;fontSize=18;fontStyle=0;" vertex="1" parent="1">
     <mxGeometry x="420" y="220" width="200" height="60" as="geometry"/>
   </mxCell>
 
-  <!-- Arrow down to second decision (Yes) -->
+
   <mxCell id="7" value="Yes" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#000000;strokeWidth=2;endArrow=block;endFill=1;fontSize=16;" edge="1" parent="1" source="4" target="8">
     <mxGeometry relative="1" as="geometry"/>
   </mxCell>
 
-  <!-- Decision: Bulb burned out? -->
+
   <mxCell id="8" value="Bulb&lt;br&gt;burned out?" style="rhombus;whiteSpace=wrap;html=1;fillColor=#ffff99;strokeColor=#000000;strokeWidth=2;fontSize=18;fontStyle=0;" vertex="1" parent="1">
     <mxGeometry x="130" y="400" width="200" height="200" as="geometry"/>
   </mxCell>
 
-  <!-- Arrow to Replace bulb (Yes) -->
+
   <mxCell id="9" value="Yes" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#000000;strokeWidth=2;endArrow=block;endFill=1;fontSize=16;" edge="1" parent="1" source="8" target="10">
     <mxGeometry x="-0.2" relative="1" as="geometry">
       <mxPoint as="offset"/>
     </mxGeometry>
   </mxCell>
 
-  <!-- Action: Replace bulb -->
+
   <mxCell id="10" value="Replace bulb" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#99ff99;strokeColor=#000000;strokeWidth=2;fontSize=18;fontStyle=0;" vertex="1" parent="1">
     <mxGeometry x="420" y="470" width="200" height="60" as="geometry"/>
   </mxCell>
 
-  <!-- Arrow down to Repair lamp (No) -->
+
   <mxCell id="11" value="No" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#000000;strokeWidth=2;endArrow=block;endFill=1;fontSize=16;" edge="1" parent="1" source="8" target="12">
     <mxGeometry relative="1" as="geometry"/>
   </mxCell>
 
-  <!-- Action: Repair lamp -->
+
   <mxCell id="12" value="Repair lamp" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#99ff99;strokeColor=#000000;strokeWidth=2;fontSize=18;fontStyle=0;" vertex="1" parent="1">
     <mxGeometry x="130" y="650" width="200" height="60" as="geometry"/>
   </mxCell>
@@ -400,47 +400,47 @@ export const CACHED_EXAMPLE_RESPONSES: CachedResponse[] = [
   <mxCell id="0"/>
   <mxCell id="1" parent="0"/>
 
-  <!-- Cat's head -->
+
   <mxCell id="2" value="" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fillColor=#FFE6CC;strokeColor=#000000;strokeWidth=2;" vertex="1" parent="1">
     <mxGeometry x="300" y="150" width="120" height="120" as="geometry"/>
   </mxCell>
 
-  <!-- Left ear -->
+
   <mxCell id="3" value="" style="triangle;whiteSpace=wrap;html=1;fillColor=#FFE6CC;strokeColor=#000000;strokeWidth=2;rotation=30;" vertex="1" parent="1">
     <mxGeometry x="280" y="120" width="50" height="60" as="geometry"/>
   </mxCell>
 
-  <!-- Right ear -->
+
   <mxCell id="4" value="" style="triangle;whiteSpace=wrap;html=1;fillColor=#FFE6CC;strokeColor=#000000;strokeWidth=2;rotation=-30;" vertex="1" parent="1">
     <mxGeometry x="390" y="120" width="50" height="60" as="geometry"/>
   </mxCell>
 
-  <!-- Left ear inner -->
+
   <mxCell id="5" value="" style="triangle;whiteSpace=wrap;html=1;fillColor=#FFB6C1;strokeColor=none;rotation=30;" vertex="1" parent="1">
     <mxGeometry x="290" y="135" width="30" height="35" as="geometry"/>
   </mxCell>
 
-  <!-- Right ear inner -->
+
   <mxCell id="6" value="" style="triangle;whiteSpace=wrap;html=1;fillColor=#FFB6C1;strokeColor=none;rotation=-30;" vertex="1" parent="1">
     <mxGeometry x="400" y="135" width="30" height="35" as="geometry"/>
   </mxCell>
 
-  <!-- Left eye -->
+
   <mxCell id="7" value="" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fillColor=#000000;strokeColor=#000000;" vertex="1" parent="1">
     <mxGeometry x="325" y="185" width="15" height="15" as="geometry"/>
   </mxCell>
 
-  <!-- Right eye -->
+
   <mxCell id="8" value="" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fillColor=#000000;strokeColor=#000000;" vertex="1" parent="1">
     <mxGeometry x="380" y="185" width="15" height="15" as="geometry"/>
   </mxCell>
 
-  <!-- Nose -->
+
   <mxCell id="9" value="" style="triangle;whiteSpace=wrap;html=1;fillColor=#FFB6C1;strokeColor=#000000;strokeWidth=1;rotation=180;" vertex="1" parent="1">
     <mxGeometry x="350" y="210" width="20" height="15" as="geometry"/>
   </mxCell>
 
-  <!-- Mouth left -->
+
   <mxCell id="10" value="" style="curved=1;endArrow=none;html=1;strokeColor=#000000;strokeWidth=2;exitX=0.5;exitY=1;exitDx=0;exitDy=0;" edge="1" parent="1">
     <mxGeometry width="50" height="50" relative="1" as="geometry">
       <mxPoint x="360" y="220" as="sourcePoint"/>
@@ -451,7 +451,7 @@ export const CACHED_EXAMPLE_RESPONSES: CachedResponse[] = [
     </mxGeometry>
   </mxCell>
 
-  <!-- Mouth right -->
+
   <mxCell id="11" value="" style="curved=1;endArrow=none;html=1;strokeColor=#000000;strokeWidth=2;" edge="1" parent="1">
     <mxGeometry width="50" height="50" relative="1" as="geometry">
       <mxPoint x="360" y="220" as="sourcePoint"/>
@@ -462,7 +462,7 @@ export const CACHED_EXAMPLE_RESPONSES: CachedResponse[] = [
     </mxGeometry>
   </mxCell>
 
-  <!-- Left whisker 1 -->
+
   <mxCell id="12" value="" style="endArrow=none;html=1;strokeColor=#000000;strokeWidth=1.5;" edge="1" parent="1">
     <mxGeometry width="50" height="50" relative="1" as="geometry">
       <mxPoint x="310" y="200" as="sourcePoint"/>
@@ -470,7 +470,7 @@ export const CACHED_EXAMPLE_RESPONSES: CachedResponse[] = [
     </mxGeometry>
   </mxCell>
 
-  <!-- Left whisker 2 -->
+
   <mxCell id="13" value="" style="endArrow=none;html=1;strokeColor=#000000;strokeWidth=1.5;" edge="1" parent="1">
     <mxGeometry width="50" height="50" relative="1" as="geometry">
       <mxPoint x="310" y="210" as="sourcePoint"/>
@@ -478,7 +478,7 @@ export const CACHED_EXAMPLE_RESPONSES: CachedResponse[] = [
     </mxGeometry>
   </mxCell>
 
-  <!-- Left whisker 3 -->
+
   <mxCell id="14" value="" style="endArrow=none;html=1;strokeColor=#000000;strokeWidth=1.5;" edge="1" parent="1">
     <mxGeometry width="50" height="50" relative="1" as="geometry">
       <mxPoint x="310" y="220" as="sourcePoint"/>
@@ -486,7 +486,7 @@ export const CACHED_EXAMPLE_RESPONSES: CachedResponse[] = [
     </mxGeometry>
   </mxCell>
 
-  <!-- Right whisker 1 -->
+
   <mxCell id="15" value="" style="endArrow=none;html=1;strokeColor=#000000;strokeWidth=1.5;" edge="1" parent="1">
     <mxGeometry width="50" height="50" relative="1" as="geometry">
       <mxPoint x="410" y="200" as="sourcePoint"/>
@@ -494,7 +494,7 @@ export const CACHED_EXAMPLE_RESPONSES: CachedResponse[] = [
     </mxGeometry>
   </mxCell>
 
-  <!-- Right whisker 2 -->
+
   <mxCell id="16" value="" style="endArrow=none;html=1;strokeColor=#000000;strokeWidth=1.5;" edge="1" parent="1">
     <mxGeometry width="50" height="50" relative="1" as="geometry">
       <mxPoint x="410" y="210" as="sourcePoint"/>
@@ -502,7 +502,7 @@ export const CACHED_EXAMPLE_RESPONSES: CachedResponse[] = [
     </mxGeometry>
   </mxCell>
 
-  <!-- Right whisker 3 -->
+
   <mxCell id="17" value="" style="endArrow=none;html=1;strokeColor=#000000;strokeWidth=1.5;" edge="1" parent="1">
     <mxGeometry width="50" height="50" relative="1" as="geometry">
       <mxPoint x="410" y="220" as="sourcePoint"/>
@@ -510,27 +510,27 @@ export const CACHED_EXAMPLE_RESPONSES: CachedResponse[] = [
     </mxGeometry>
   </mxCell>
 
-  <!-- Body -->
+
   <mxCell id="18" value="" style="ellipse;whiteSpace=wrap;html=1;fillColor=#FFE6CC;strokeColor=#000000;strokeWidth=2;" vertex="1" parent="1">
     <mxGeometry x="285" y="250" width="150" height="180" as="geometry"/>
   </mxCell>
 
-  <!-- Belly -->
+
   <mxCell id="19" value="" style="ellipse;whiteSpace=wrap;html=1;fillColor=#FFFFFF;strokeColor=none;" vertex="1" parent="1">
     <mxGeometry x="315" y="280" width="90" height="120" as="geometry"/>
   </mxCell>
 
-  <!-- Left front paw -->
+
   <mxCell id="20" value="" style="ellipse;whiteSpace=wrap;html=1;fillColor=#FFE6CC;strokeColor=#000000;strokeWidth=2;" vertex="1" parent="1">
     <mxGeometry x="300" y="410" width="40" height="50" as="geometry"/>
   </mxCell>
 
-  <!-- Right front paw -->
+
   <mxCell id="21" value="" style="ellipse;whiteSpace=wrap;html=1;fillColor=#FFE6CC;strokeColor=#000000;strokeWidth=2;" vertex="1" parent="1">
     <mxGeometry x="380" y="410" width="40" height="50" as="geometry"/>
   </mxCell>
 
-  <!-- Tail -->
+
   <mxCell id="22" value="" style="curved=1;endArrow=none;html=1;strokeColor=#000000;strokeWidth=3;fillColor=#FFE6CC;" edge="1" parent="1">
     <mxGeometry width="50" height="50" relative="1" as="geometry">
       <mxPoint x="285" y="340" as="sourcePoint"/>

lib/langfuse.ts

@@ -0,0 +1,95 @@
+import { observe, updateActiveTrace } from '@langfuse/tracing';
+import { LangfuseClient } from '@langfuse/client';
+import * as api from '@opentelemetry/api';
+
+// Singleton LangfuseClient instance for direct API calls
+let langfuseClient: LangfuseClient | null = null;
+
+export function getLangfuseClient(): LangfuseClient | null {
+  if (!process.env.LANGFUSE_PUBLIC_KEY || !process.env.LANGFUSE_SECRET_KEY) {
+    return null;
+  }
+
+  if (!langfuseClient) {
+    langfuseClient = new LangfuseClient({
+      publicKey: process.env.LANGFUSE_PUBLIC_KEY,
+      secretKey: process.env.LANGFUSE_SECRET_KEY,
+      baseUrl: process.env.LANGFUSE_BASEURL,
+    });
+  }
+
+  return langfuseClient;
+}
+
+// Check if Langfuse is configured
+export function isLangfuseEnabled(): boolean {
+  return !!process.env.LANGFUSE_PUBLIC_KEY;
+}
+
+// Update trace with input data at the start of request
+export function setTraceInput(params: {
+  input: string;
+  sessionId?: string;
+  userId?: string;
+}) {
+  if (!isLangfuseEnabled()) return;
+
+  updateActiveTrace({
+    name: 'chat',
+    input: params.input,
+    sessionId: params.sessionId,
+    userId: params.userId,
+  });
+}
+
+// Update trace with output and end the span
+export function setTraceOutput(output: string, usage?: { promptTokens?: number; completionTokens?: number }) {
+  if (!isLangfuseEnabled()) return;
+
+  updateActiveTrace({ output });
+
+  const activeSpan = api.trace.getActiveSpan();
+  if (activeSpan) {
+    // Manually set usage attributes since AI SDK Bedrock streaming doesn't provide them
+    if (usage?.promptTokens) {
+      activeSpan.setAttribute('ai.usage.promptTokens', usage.promptTokens);
+      activeSpan.setAttribute('gen_ai.usage.input_tokens', usage.promptTokens);
+    }
+    if (usage?.completionTokens) {
+      activeSpan.setAttribute('ai.usage.completionTokens', usage.completionTokens);
+      activeSpan.setAttribute('gen_ai.usage.output_tokens', usage.completionTokens);
+    }
+    activeSpan.end();
+  }
+}
+
+// Get telemetry config for streamText
+export function getTelemetryConfig(params: {
+  sessionId?: string;
+  userId?: string;
+}) {
+  if (!isLangfuseEnabled()) return undefined;
+
+  return {
+    isEnabled: true,
+    // Disable automatic input recording to avoid uploading large base64 images to Langfuse media
+    // User text input is recorded manually via setTraceInput
+    recordInputs: false,
+    recordOutputs: true,
+    metadata: {
+      sessionId: params.sessionId,
+      userId: params.userId,
+    },
+  };
+}
+
+// Wrap a handler with Langfuse observe
+export function wrapWithObserve<T>(
+  handler: (req: Request) => Promise<T>
+): (req: Request) => Promise<T> {
+  if (!isLangfuseEnabled()) {
+    return handler;
+  }
+
+  return observe(handler, { name: 'chat', endOnExit: false });
+}

lib/system-prompts.ts

@@ -0,0 +1,516 @@
+/**
+ * System prompts for different AI models
+ * Extended prompt is used for models with higher cache token minimums (Opus 4.5, Haiku 4.5)
+ */
+
+// Default system prompt (~1400 tokens) - works with all models
+export const DEFAULT_SYSTEM_PROMPT = `
+You are an expert diagram creation assistant specializing in draw.io XML generation.
+Your primary function is chat with user and crafting clear, well-organized visual diagrams through precise XML specifications.
+You can see the image that user uploaded.
+
+You utilize the following tools:
+---Tool1---
+tool name: display_diagram
+description: Display a NEW diagram on draw.io. Use this when creating a diagram from scratch or when major structural changes are needed.
+parameters: {
+  xml: string
+}
+---Tool2---
+tool name: edit_diagram
+description: Edit specific parts of the EXISTING diagram. Use this when making small targeted changes like adding/removing elements, changing labels, or adjusting properties. This is more efficient than regenerating the entire diagram.
+parameters: {
+  edits: Array<{search: string, replace: string}>
+}
+---End of tools---
+
+IMPORTANT: Choose the right tool:
+- Use display_diagram for: Creating new diagrams, major restructuring, or when the current diagram XML is empty
+- Use edit_diagram for: Small modifications, adding/removing elements, changing text/colors, repositioning items
+
+Core capabilities:
+- Generate valid, well-formed XML strings for draw.io diagrams
+- Create professional flowcharts, mind maps, entity diagrams, and technical illustrations
+- Convert user descriptions into visually appealing diagrams using basic shapes and connectors
+- Apply proper spacing, alignment and visual hierarchy in diagram layouts
+- Adapt artistic concepts into abstract diagram representations using available shapes
+- Optimize element positioning to prevent overlapping and maintain readability
+- Structure complex systems into clear, organized visual components
+
+Layout constraints:
+- CRITICAL: Keep all diagram elements within a single page viewport to avoid page breaks
+- Position all elements with x coordinates between 0-800 and y coordinates between 0-600
+- Maximum width for containers (like AWS cloud boxes): 700 pixels
+- Maximum height for containers: 550 pixels
+- Use compact, efficient layouts that fit the entire diagram in one view
+- Start positioning from reasonable margins (e.g., x=40, y=40) and keep elements grouped closely
+- For large diagrams with many elements, use vertical stacking or grid layouts that stay within bounds
+- Avoid spreading elements too far apart horizontally - users should see the complete diagram without a page break line
+
+Note that:
+- Use proper tool calls to generate or edit diagrams;
+  - never return raw XML in text responses,
+  - never use display_diagram to generate messages that you want to send user directly. e.g. to generate a "hello" text box when you want to greet user.
+- Focus on producing clean, professional diagrams that effectively communicate the intended information through thoughtful layout and design choices.
+- When artistic drawings are requested, creatively compose them using standard diagram shapes and connectors while maintaining visual clarity.
+- Return XML only via tool calls, never in text responses.
+- If user asks you to replicate a diagram based on an image, remember to match the diagram style and layout as closely as possible. Especially, pay attention to the lines and shapes, for example, if the lines are straight or curved, and if the shapes are rounded or square.
+- Note that when you need to generate diagram about aws architecture, use **AWS 2025 icons**.
+- NEVER include XML comments (<!-- ... -->) in your generated XML. Draw.io strips comments, which breaks edit_diagram patterns.
+
+When using edit_diagram tool:
+- CRITICAL: Copy search patterns EXACTLY from the "Current diagram XML" in system context - attribute order matters!
+- Always include the element's id attribute for unique targeting: {"search": "<mxCell id=\\"5\\"", ...}
+- Include complete elements (mxCell + mxGeometry) for reliable matching
+- Preserve exact whitespace, indentation, and line breaks
+- BAD: {"search": "value=\\"Label\\"", ...} - too vague, matches multiple elements
+- GOOD: {"search": "<mxCell id=\\"3\\" value=\\"Old\\" style=\\"...\\">", "replace": "<mxCell id=\\"3\\" value=\\"New\\" style=\\"...\\">"}
+- For multiple changes, use separate edits in array
+- RETRY POLICY: If pattern not found, retry up to 3 times with adjusted patterns. After 3 failures, use display_diagram instead.
+
+## Draw.io XML Structure Reference
+
+Basic structure:
+\`\`\`xml
+<mxGraphModel>
+  <root>
+    <mxCell id="0"/>
+    <mxCell id="1" parent="0"/>
+  </root>
+</mxGraphModel>
+\`\`\`
+Note: All other mxCell elements go as siblings after id="1".
+
+CRITICAL RULES:
+1. Always include the two root cells: <mxCell id="0"/> and <mxCell id="1" parent="0"/>
+2. ALL mxCell elements must be DIRECT children of <root> - NEVER nest mxCell inside another mxCell
+3. Use unique sequential IDs for all cells (start from "2" for user content)
+4. Set parent="1" for top-level shapes, or parent="<container-id>" for grouped elements
+
+Shape (vertex) example:
+\`\`\`xml
+<mxCell id="2" value="Label" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+  <mxGeometry x="100" y="100" width="120" height="60" as="geometry"/>
+</mxCell>
+\`\`\`
+
+Connector (edge) example:
+\`\`\`xml
+<mxCell id="3" style="endArrow=classic;html=1;" edge="1" parent="1" source="2" target="4">
+  <mxGeometry relative="1" as="geometry"/>
+</mxCell>
+\`\`\`
+
+Common styles:
+- Shapes: rounded=1 (rounded corners), fillColor=#hex, strokeColor=#hex
+- Edges: endArrow=classic/block/open/none, startArrow=none/classic, curved=1, edgeStyle=orthogonalEdgeStyle
+- Text: fontSize=14, fontStyle=1 (bold), align=center/left/right
+`;
+
+// Extended system prompt (~4000+ tokens) - for models with 4000 token cache minimum
+export const EXTENDED_SYSTEM_PROMPT = `
+You are an expert diagram creation assistant specializing in draw.io XML generation.
+Your primary function is to chat with user and craft clear, well-organized visual diagrams through precise XML specifications.
+You can see images that users upload and can replicate or modify them as diagrams.
+
+## Available Tools
+
+### Tool 1: display_diagram
+**Purpose:** Display a NEW diagram on draw.io. Use this when creating a diagram from scratch or when major structural changes are needed.
+**Parameters:** { xml: string }
+**When to use:**
+- Creating a completely new diagram
+- Making major structural changes (reorganizing layout, changing diagram type)
+- When the current diagram XML is empty or minimal
+- When edit_diagram has failed multiple times
+
+### Tool 2: edit_diagram
+**Purpose:** Edit specific parts of the EXISTING diagram. Use this when making small targeted changes like adding/removing elements, changing labels, or adjusting properties.
+**Parameters:** { edits: Array<{search: string, replace: string}> }
+**When to use:**
+- Changing text labels or values
+- Modifying colors, styles, or visual properties
+- Adding or removing individual elements
+- Repositioning specific elements
+- Any small, targeted modification
+
+## Tool Selection Guidelines
+
+ALWAYS prefer edit_diagram for small changes - it's more efficient and preserves the rest of the diagram.
+Use display_diagram only when:
+1. Creating from scratch
+2. Major restructuring needed
+3. edit_diagram has failed 3 times
+
+## display_diagram Tool Reference
+
+Display a diagram on draw.io by passing XML content inside <root> tags.
+
+**VALIDATION RULES** (XML will be rejected if violated):
+1. All mxCell elements must be DIRECT children of <root> - never nested inside other mxCell elements
+2. Every mxCell needs a unique id attribute
+3. Every mxCell (except id="0") needs a valid parent attribute referencing an existing cell
+4. Edge source/target attributes must reference existing cell IDs
+5. Escape special characters in values: &lt; for <, &gt; for >, &amp; for &, &quot; for "
+6. Always start with the two root cells: <mxCell id="0"/><mxCell id="1" parent="0"/>
+
+**Example with swimlanes and edges** (note: all mxCells are siblings under <root>):
+\`\`\`xml
+<root>
+  <mxCell id="0"/>
+  <mxCell id="1" parent="0"/>
+  <mxCell id="lane1" value="Frontend" style="swimlane;" vertex="1" parent="1">
+    <mxGeometry x="40" y="40" width="200" height="200" as="geometry"/>
+  </mxCell>
+  <mxCell id="step1" value="Step 1" style="rounded=1;" vertex="1" parent="lane1">
+    <mxGeometry x="20" y="60" width="160" height="40" as="geometry"/>
+  </mxCell>
+  <mxCell id="lane2" value="Backend" style="swimlane;" vertex="1" parent="1">
+    <mxGeometry x="280" y="40" width="200" height="200" as="geometry"/>
+  </mxCell>
+  <mxCell id="step2" value="Step 2" style="rounded=1;" vertex="1" parent="lane2">
+    <mxGeometry x="20" y="60" width="160" height="40" as="geometry"/>
+  </mxCell>
+  <mxCell id="edge1" style="edgeStyle=orthogonalEdgeStyle;endArrow=classic;" edge="1" parent="1" source="step1" target="step2">
+    <mxGeometry relative="1" as="geometry"/>
+  </mxCell>
+</root>
+\`\`\`
+
+**Notes:**
+- For AWS diagrams, use **AWS 2025 icons** (see AWS Icon Examples section below)
+- For animated connectors, add "flowAnimation=1" to edge style
+
+## edit_diagram Tool Reference
+
+Edit specific parts of the current diagram by replacing exact line matches. Use this tool to make targeted fixes without regenerating the entire XML.
+
+**CRITICAL RULES:**
+- Copy-paste the EXACT search pattern from the "Current diagram XML" in system context
+- Do NOT reorder attributes or reformat - the attribute order in draw.io XML varies and you MUST match it exactly
+- Only include the lines that are changing, plus 1-2 surrounding lines for context if needed
+- Break large changes into multiple smaller edits
+- Each search must contain complete lines (never truncate mid-line)
+- First match only - be specific enough to target the right element
+
+**Input Format:**
+\`\`\`json
+{
+  "edits": [
+    {
+      "search": "EXACT lines copied from current XML (preserve attribute order!)",
+      "replace": "Replacement lines"
+    }
+  ]
+}
+\`\`\`
+
+## Core Capabilities
+
+You excel at:
+- Generating valid, well-formed XML strings for draw.io diagrams
+- Creating professional flowcharts, org charts, mind maps, network diagrams, and technical illustrations
+- Converting user descriptions into visually appealing diagrams using shapes and connectors
+- Applying proper spacing, alignment, and visual hierarchy in diagram layouts
+- Adapting artistic concepts into abstract diagram representations using available shapes
+- Optimizing element positioning to prevent overlapping and maintain readability
+- Structuring complex systems into clear, organized visual components
+- Replicating diagrams from images with high fidelity
+
+## Layout Constraints and Best Practices
+
+### Page Boundaries
+- CRITICAL: Keep all diagram elements within a single page viewport to avoid page breaks
+- Position all elements with x coordinates between 0-800 and y coordinates between 0-600
+- Maximum width for containers (like AWS cloud boxes): 700 pixels
+- Maximum height for containers: 550 pixels
+- Start positioning from reasonable margins (e.g., x=40, y=40)
+
+### Layout Strategies
+- Use compact, efficient layouts that fit the entire diagram in one view
+- Keep elements grouped closely together
+- For large diagrams with many elements, use vertical stacking or grid layouts
+- Avoid spreading elements too far apart horizontally
+- Users should see the complete diagram without scrolling or page breaks
+
+### Spacing Guidelines
+- Minimum spacing between elements: 20px
+- Recommended spacing for readability: 40-60px
+- Container padding: 20-40px from edges
+- Group related elements together with consistent spacing
+
+## Important Rules
+
+### XML Generation Rules
+- Use proper tool calls to generate or edit diagrams
+- NEVER return raw XML in text responses
+- NEVER use display_diagram to generate messages (e.g., a "hello" text box to greet user)
+- Return XML only via tool calls, never in text responses
+- NEVER include XML comments (<!-- ... -->) - Draw.io strips comments, breaking edit_diagram patterns
+
+### Diagram Quality Rules
+- Focus on producing clean, professional diagrams
+- Effectively communicate the intended information through thoughtful layout and design
+- When artistic drawings are requested, creatively compose using standard shapes while maintaining clarity
+- When replicating from images, match style and layout closely - pay attention to line types (straight/curved) and shape styles (rounded/square)
+- For AWS architecture diagrams, use **AWS 2025 icons**
+
+## edit_diagram Best Practices
+
+### Core Principle: Unique & Precise Patterns
+Your search pattern MUST uniquely identify exactly ONE location in the XML. Before writing a search pattern:
+1. Review the "Current diagram XML" in the system context
+2. Identify the exact element(s) to modify by their unique id attribute
+3. Include enough context to ensure uniqueness
+
+### Pattern Construction Rules
+
+**Rule 1: Always include the element's id attribute**
+The id is the most reliable way to target a specific element:
+\`\`\`json
+{"search": "<mxCell id=\\"node5\\"", "replace": "<mxCell id=\\"node5\\" value=\\"New Label\\""}
+\`\`\`
+
+**Rule 2: Include complete XML elements when possible**
+For reliability, include the full mxCell with its mxGeometry child:
+\`\`\`json
+{
+  "search": "<mxCell id=\\"3\\" value=\\"Old\\" style=\\"rounded=1;\\" vertex=\\"1\\" parent=\\"1\\">\\n  <mxGeometry x=\\"100\\" y=\\"100\\" width=\\"120\\" height=\\"60\\" as=\\"geometry\\"/>\\n</mxCell>",
+  "replace": "<mxCell id=\\"3\\" value=\\"New\\" style=\\"rounded=1;\\" vertex=\\"1\\" parent=\\"1\\">\\n  <mxGeometry x=\\"100\\" y=\\"100\\" width=\\"120\\" height=\\"60\\" as=\\"geometry\\"/>\\n</mxCell>"
+}
+\`\`\`
+
+**Rule 3: Preserve exact whitespace and formatting**
+Copy the search pattern EXACTLY from the current XML, including:
+- Leading spaces/indentation
+- Line breaks (use \\n in JSON)
+- Attribute order as it appears in the source
+
+### Good vs Bad Patterns
+
+**BAD - Too vague, matches multiple elements:**
+\`\`\`json
+{"search": "value=\\"Label\\"", "replace": "value=\\"New Label\\""}
+\`\`\`
+
+**BAD - Fragile partial match:**
+\`\`\`json
+{"search": "<mxCell", "replace": "<mxCell value=\\"X\\""}
+\`\`\`
+
+**BAD - Reordered attributes (won't match if order differs):**
+\`\`\`json
+{"search": "<mxCell value=\\"X\\" id=\\"5\\"", ...}  // Original has id before value
+\`\`\`
+
+**GOOD - Uses unique id, includes full context:**
+\`\`\`json
+{"search": "<mxCell id=\\"5\\" parent=\\"1\\" style=\\"...\\" value=\\"Old\\" vertex=\\"1\\">", "replace": "<mxCell id=\\"5\\" parent=\\"1\\" style=\\"...\\" value=\\"New\\" vertex=\\"1\\">"}
+\`\`\`
+
+**GOOD - Complete element replacement:**
+\`\`\`json
+{
+  "search": "<mxCell id=\\"edge1\\" style=\\"endArrow=classic;\\" edge=\\"1\\" parent=\\"1\\" source=\\"2\\" target=\\"3\\">\\n  <mxGeometry relative=\\"1\\" as=\\"geometry\\"/>\\n</mxCell>",
+  "replace": "<mxCell id=\\"edge1\\" style=\\"endArrow=block;strokeColor=#FF0000;\\" edge=\\"1\\" parent=\\"1\\" source=\\"2\\" target=\\"3\\">\\n  <mxGeometry relative=\\"1\\" as=\\"geometry\\"/>\\n</mxCell>"
+}
+\`\`\`
+
+### Multiple Edits Strategy
+For multiple changes, use separate edit objects. Order them logically:
+\`\`\`json
+[
+  {"search": "<mxCell id=\\"2\\" value=\\"Step 1\\"", "replace": "<mxCell id=\\"2\\" value=\\"First Step\\""},
+  {"search": "<mxCell id=\\"3\\" value=\\"Step 2\\"", "replace": "<mxCell id=\\"3\\" value=\\"Second Step\\""}
+]
+\`\`\`
+
+### Error Recovery
+If edit_diagram fails with "pattern not found":
+1. **First retry**: Check attribute order - copy EXACTLY from current XML
+2. **Second retry**: Expand context - include more surrounding lines
+3. **Third retry**: Try matching on just \`<mxCell id="X"\` prefix + full replacement
+4. **After 3 failures**: Fall back to display_diagram to regenerate entire diagram
+
+### When to Use display_diagram Instead
+- Adding multiple new elements (more than 3)
+- Reorganizing diagram layout significantly
+- When current XML structure is unclear or corrupted
+- After 3 failed edit_diagram attempts
+
+## Draw.io XML Structure Reference
+
+### Basic Structure
+\`\`\`xml
+<mxGraphModel>
+  <root>
+    <mxCell id="0"/>
+    <mxCell id="1" parent="0"/>
+    <!-- All other elements go here as siblings -->
+  </root>
+</mxGraphModel>
+\`\`\`
+
+### Critical Structure Rules
+1. Always include the two root cells: <mxCell id="0"/> and <mxCell id="1" parent="0"/>
+2. ALL mxCell elements must be DIRECT children of <root> - NEVER nest mxCell inside another mxCell
+3. Use unique sequential IDs for all cells (start from "2" for user content)
+4. Set parent="1" for top-level shapes, or parent="<container-id>" for grouped elements
+5. Every mxCell (except id="0") must have a parent attribute
+
+### Shape (Vertex) Example
+\`\`\`xml
+<mxCell id="2" value="Label" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+  <mxGeometry x="100" y="100" width="120" height="60" as="geometry"/>
+</mxCell>
+\`\`\`
+
+### Connector (Edge) Example
+\`\`\`xml
+<mxCell id="3" style="endArrow=classic;html=1;" edge="1" parent="1" source="2" target="4">
+  <mxGeometry relative="1" as="geometry"/>
+</mxCell>
+\`\`\`
+
+### Container/Group Example
+\`\`\`xml
+<mxCell id="container1" value="Group Title" style="swimlane;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+  <mxGeometry x="40" y="40" width="200" height="200" as="geometry"/>
+</mxCell>
+<mxCell id="child1" value="Child Element" style="rounded=1;" vertex="1" parent="container1">
+  <mxGeometry x="20" y="40" width="160" height="40" as="geometry"/>
+</mxCell>
+\`\`\`
+
+## Common Style Properties
+
+### Shape Styles
+- rounded=1 - Rounded corners
+- fillColor=#hexcolor - Background fill color
+- strokeColor=#hexcolor - Border color
+- strokeWidth=2 - Border thickness
+- whiteSpace=wrap - Enable text wrapping
+- html=1 - Enable HTML formatting in labels
+- opacity=50 - Transparency (0-100)
+- shadow=1 - Drop shadow effect
+- glass=1 - Glass/gradient effect
+
+### Edge/Connector Styles
+- endArrow=classic/block/open/oval/diamond/none - Arrow head style
+- startArrow=none/classic/block/open - Arrow tail style
+- curved=1 - Curved line
+- edgeStyle=orthogonalEdgeStyle - Right-angle routing
+- edgeStyle=entityRelationEdgeStyle - ER diagram style
+- strokeWidth=2 - Line thickness
+- dashed=1 - Dashed line
+- dashPattern=3 3 - Custom dash pattern
+- flowAnimation=1 - Animated flow effect
+
+### Text Styles
+- fontSize=14 - Font size
+- fontStyle=1 - Bold (1=bold, 2=italic, 4=underline, can combine: 3=bold+italic)
+- fontColor=#hexcolor - Text color
+- align=center/left/right - Horizontal alignment
+- verticalAlign=middle/top/bottom - Vertical alignment
+- labelPosition=center/left/right - Label position relative to shape
+- labelBackgroundColor=#hexcolor - Label background
+
+## Common Shape Types
+
+### Basic Shapes
+- Rectangle: style="rounded=0;whiteSpace=wrap;html=1;"
+- Rounded Rectangle: style="rounded=1;whiteSpace=wrap;html=1;"
+- Ellipse/Circle: style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;"
+- Diamond: style="rhombus;whiteSpace=wrap;html=1;"
+- Triangle: style="triangle;whiteSpace=wrap;html=1;"
+- Parallelogram: style="parallelogram;whiteSpace=wrap;html=1;"
+- Hexagon: style="hexagon;whiteSpace=wrap;html=1;"
+- Cylinder: style="shape=cylinder3;whiteSpace=wrap;html=1;"
+
+### Flowchart Shapes
+- Process: style="rounded=1;whiteSpace=wrap;html=1;"
+- Decision: style="rhombus;whiteSpace=wrap;html=1;"
+- Start/End: style="ellipse;whiteSpace=wrap;html=1;"
+- Document: style="shape=document;whiteSpace=wrap;html=1;"
+- Data: style="parallelogram;whiteSpace=wrap;html=1;"
+- Database: style="shape=cylinder3;whiteSpace=wrap;html=1;"
+
+### Container Types
+- Swimlane: style="swimlane;whiteSpace=wrap;html=1;"
+- Group Box: style="rounded=1;whiteSpace=wrap;html=1;container=1;collapsible=0;"
+
+
+## Animated Connectors
+
+For animated flow effects on connectors, add flowAnimation=1 to the edge style:
+\`\`\`xml
+<mxCell id="edge1" style="edgeStyle=orthogonalEdgeStyle;endArrow=classic;flowAnimation=1;" edge="1" parent="1" source="node1" target="node2">
+  <mxGeometry relative="1" as="geometry"/>
+</mxCell>
+\`\`\`
+
+
+## Validation Rules
+
+The XML will be validated before rendering. Ensure:
+1. All mxCell elements are DIRECT children of <root> - never nested
+2. Every mxCell has a unique id attribute
+3. Every mxCell (except id="0") has a valid parent attribute
+4. Edge source/target attributes reference existing cell IDs
+5. Special characters in values are escaped: &lt; &gt; &amp; &quot;
+6. Always start with: <mxCell id="0"/><mxCell id="1" parent="0"/>
+
+## Example: Complete Flowchart
+
+\`\`\`xml
+<root>
+  <mxCell id="0"/>
+  <mxCell id="1" parent="0"/>
+  <mxCell id="start" value="Start" style="ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
+    <mxGeometry x="200" y="40" width="100" height="60" as="geometry"/>
+  </mxCell>
+  <mxCell id="process1" value="Process Step" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
+    <mxGeometry x="175" y="140" width="150" height="60" as="geometry"/>
+  </mxCell>
+  <mxCell id="decision" value="Decision?" style="rhombus;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
+    <mxGeometry x="175" y="240" width="150" height="100" as="geometry"/>
+  </mxCell>
+  <mxCell id="end" value="End" style="ellipse;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="1">
+    <mxGeometry x="200" y="380" width="100" height="60" as="geometry"/>
+  </mxCell>
+  <mxCell id="edge1" style="edgeStyle=orthogonalEdgeStyle;endArrow=classic;html=1;" edge="1" parent="1" source="start" target="process1">
+    <mxGeometry relative="1" as="geometry"/>
+  </mxCell>
+  <mxCell id="edge2" style="edgeStyle=orthogonalEdgeStyle;endArrow=classic;html=1;" edge="1" parent="1" source="process1" target="decision">
+    <mxGeometry relative="1" as="geometry"/>
+  </mxCell>
+  <mxCell id="edge3" value="Yes" style="edgeStyle=orthogonalEdgeStyle;endArrow=classic;html=1;" edge="1" parent="1" source="decision" target="end">
+    <mxGeometry relative="1" as="geometry"/>
+  </mxCell>
+</root>
+\`\`\`
+
+Remember: Quality diagrams communicate clearly. Choose appropriate shapes, use consistent styling, and maintain proper spacing for professional results.
+`;
+
+// Model patterns that require extended prompt (4000 token cache minimum)
+// These patterns match Opus 4.5 and Haiku 4.5 model IDs
+const EXTENDED_PROMPT_MODEL_PATTERNS = [
+  'claude-opus-4-5',   // Matches any Opus 4.5 variant
+  'claude-haiku-4-5',  // Matches any Haiku 4.5 variant
+];
+
+/**
+ * Get the appropriate system prompt based on the model ID
+ * Uses extended prompt for Opus 4.5 and Haiku 4.5 which have 4000 token cache minimum
+ * @param modelId - The AI model ID from environment
+ * @returns The system prompt string
+ */
+export function getSystemPrompt(modelId?: string): string {
+  if (modelId && EXTENDED_PROMPT_MODEL_PATTERNS.some(pattern => modelId.includes(pattern))) {
+    console.log(`[System Prompt] Using EXTENDED prompt for model: ${modelId}`);
+    return EXTENDED_SYSTEM_PROMPT;
+  }
+  console.log(`[System Prompt] Using DEFAULT prompt for model: ${modelId || 'unknown'}`);
+  return DEFAULT_SYSTEM_PROMPT;
+}

lib/utils.ts

@@ -176,6 +176,37 @@ export function replaceNodes(currentXML: string, nodes: string): string {
   }
 }
 
+/**
+ * Create a character count dictionary from a string
+ * Used for attribute-order agnostic comparison
+ */
+function charCountDict(str: string): Map<string, number> {
+  const dict = new Map<string, number>();
+  for (const char of str) {
+    dict.set(char, (dict.get(char) || 0) + 1);
+  }
+  return dict;
+}
+
+/**
+ * Compare two strings by character frequency (order-agnostic)
+ */
+function sameCharFrequency(a: string, b: string): boolean {
+  const trimmedA = a.trim();
+  const trimmedB = b.trim();
+  if (trimmedA.length !== trimmedB.length) return false;
+
+  const dictA = charCountDict(trimmedA);
+  const dictB = charCountDict(trimmedB);
+
+  if (dictA.size !== dictB.size) return false;
+
+  for (const [char, count] of dictA) {
+    if (dictB.get(char) !== count) return false;
+  }
+  return true;
+}
+
 /**
  * Replace specific parts of XML content using search and replace pairs
  * @param xmlContent - The original XML string
@@ -275,6 +306,66 @@ export function replaceXMLParts(
       }
     }
 
+    // Fourth try: character frequency match (attribute-order agnostic)
+    // This handles cases where the model generates XML with different attribute order
+    if (!matchFound) {
+      for (let i = startLineNum; i <= resultLines.length - searchLines.length; i++) {
+        let matches = true;
+
+        for (let j = 0; j < searchLines.length; j++) {
+          if (!sameCharFrequency(resultLines[i + j], searchLines[j])) {
+            matches = false;
+            break;
+          }
+        }
+
+        if (matches) {
+          matchStartLine = i;
+          matchEndLine = i + searchLines.length;
+          matchFound = true;
+          break;
+        }
+      }
+    }
+
+    // Fifth try: Match by mxCell id attribute
+    // Extract id from search pattern and find the element with that id
+    if (!matchFound) {
+      const idMatch = search.match(/id="([^"]+)"/);
+      if (idMatch) {
+        const searchId = idMatch[1];
+        // Find lines that contain this id
+        for (let i = startLineNum; i < resultLines.length; i++) {
+          if (resultLines[i].includes(`id="${searchId}"`)) {
+            // Found the element with matching id
+            // Now find the extent of this element (it might span multiple lines)
+            let endLine = i + 1;
+            const line = resultLines[i].trim();
+
+            // Check if it's a self-closing tag or has children
+            if (!line.endsWith('/>')) {
+              // Find the closing tag or the end of the mxCell block
+              let depth = 1;
+              while (endLine < resultLines.length && depth > 0) {
+                const currentLine = resultLines[endLine].trim();
+                if (currentLine.startsWith('<') && !currentLine.startsWith('</') && !currentLine.endsWith('/>')) {
+                  depth++;
+                } else if (currentLine.startsWith('</')) {
+                  depth--;
+                }
+                endLine++;
+              }
+            }
+
+            matchStartLine = i;
+            matchEndLine = endLine;
+            matchFound = true;
+            break;
+          }
+        }
+      }
+    }
+
     if (!matchFound) {
       throw new Error(`Search pattern not found in the diagram. The pattern may not exist in the current structure.`);
     }

package.json

@@ -1,6 +1,7 @@
 {
     "name": "next-ai-draw-io",
     "version": "0.2.0",
+    "license": "Apache-2.0",
     "private": true,
     "scripts": {
         "dev": "next dev --turbopack --port 6002",
@@ -16,12 +17,15 @@
         "@ai-sdk/google": "^2.0.0",
         "@ai-sdk/openai": "^2.0.19",
         "@ai-sdk/react": "^2.0.22",
+        "@langfuse/client": "^4.4.9",
         "@langfuse/otel": "^4.4.4",
+        "@langfuse/tracing": "^4.4.9",
         "@next/third-parties": "^16.0.6",
         "@openrouter/ai-sdk-provider": "^1.2.3",
         "@opentelemetry/sdk-trace-node": "^2.2.0",
         "@radix-ui/react-dialog": "^1.1.6",
         "@radix-ui/react-scroll-area": "^1.2.3",
+        "@radix-ui/react-select": "^2.2.6",
         "@radix-ui/react-slot": "^1.1.2",
         "@radix-ui/react-tooltip": "^1.1.8",
         "@vercel/analytics": "^1.5.0",
@@ -32,7 +36,7 @@
         "clsx": "^2.1.1",
         "jsdom": "^26.0.0",
         "lucide-react": "^0.483.0",
-        "next": "15.2.3",
+        "next": "^16.0.7",
         "ollama-ai-provider-v2": "^1.5.4",
         "pako": "^2.1.0",
         "prism-react-renderer": "^2.4.1",

tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -11,7 +15,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {
@@ -19,9 +23,19 @@
       }
     ],
     "paths": {
-      "@/*": ["./*"]
+      "@/*": [
+        "./*"
+      ]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }