webui/src/web-components/sketch-timeline-message.ts

import { html, render } from "lit";
import { unsafeHTML } from "lit/directives/unsafe-html.js";
import { customElement, property, state } from "lit/decorators.js";
import { AgentMessage, State } from "../types";
import { marked, MarkedOptions, Renderer, Tokens } from "marked";
import type mermaid from "mermaid";
import DOMPurify from "dompurify";

// Mermaid is loaded dynamically - see loadMermaid() function
declare global {
  interface Window {
    mermaid?: typeof mermaid;
  }
}

// Mermaid hash will be injected at build time
declare const __MERMAID_HASH__: string;

// Load Mermaid dynamically
let mermaidLoadPromise: Promise<any> | null = null;

function loadMermaid(): Promise<typeof mermaid> {
  if (mermaidLoadPromise) {
    return mermaidLoadPromise;
  }

  if (window.mermaid) {
    return Promise.resolve(window.mermaid);
  }

  mermaidLoadPromise = new Promise((resolve, reject) => {
    // Get the Mermaid hash from build-time constant
    const mermaidHash = __MERMAID_HASH__;

    // Try to load the external Mermaid bundle
    const script = document.createElement("script");
    script.onload = () => {
      // The Mermaid bundle should set window.mermaid
      if (window.mermaid) {
        resolve(window.mermaid);
      } else {
        reject(new Error("Mermaid not loaded from external bundle"));
      }
    };
    script.onerror = (error) => {
      console.warn("Failed to load external Mermaid bundle:", error);
      reject(new Error("Mermaid external bundle failed to load"));
    };

    // Don't set type="module" since we're using IIFE format
    script.src = `./static/mermaid-standalone-${mermaidHash}.js`;
    document.head.appendChild(script);
  });

  return mermaidLoadPromise;
}
import "./sketch-tool-calls";
import { SketchTailwindElement } from "./sketch-tailwind-element";

@customElement("sketch-timeline-message")
export class SketchTimelineMessage extends SketchTailwindElement {
  @property()
  message: AgentMessage;

  @property()
  state: State;

  @property()
  previousMessage: AgentMessage;

  @property()
  open: boolean = false;

  @property()
  firstMessageIndex: number = 0;

  @property({ type: Boolean, reflect: true, attribute: "compactpadding" })
  compactPadding: boolean = false;

  @state()
  showInfo: boolean = false;

  // Styles have been converted to Tailwind classes applied directly to HTML elements
  // since this component now extends SketchTailwindElement which disables shadow DOM

  // Track mermaid diagrams that need rendering
  private mermaidDiagrams = new Map();

  constructor() {
    super();
    // Mermaid will be initialized lazily when first needed
  }

  // See https://lit.dev/docs/components/lifecycle/
  connectedCallback() {
    super.connectedCallback();
    this.ensureGlobalStyles();
  }

  // Ensure global styles are injected when component is used
  private ensureGlobalStyles() {
    if (!document.querySelector("#sketch-timeline-message-styles")) {
      const floatingMessageStyles = document.createElement("style");
      floatingMessageStyles.id = "sketch-timeline-message-styles";
      floatingMessageStyles.textContent = this.getGlobalStylesContent();
      document.head.appendChild(floatingMessageStyles);
    }
  }

  // Get the global styles content
  private getGlobalStylesContent(): string {
    return `
  .floating-message {
    background-color: rgba(31, 41, 55, 1);
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-family: system-ui, sans-serif;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    pointer-events: none;
    transition: all 0.3s ease;
  }

  .floating-message.success {
    background-color: rgba(34, 197, 94, 0.9);
  }

  .floating-message.error {
    background-color: rgba(239, 68, 68, 0.9);
  }

  /* Comprehensive markdown content styling */
  .markdown-content h1 {
    font-size: 1.875rem;
    font-weight: 700;
    margin: 1rem 0 0.5rem 0;
    line-height: 1.25;
  }

  .markdown-content h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0.875rem 0 0.5rem 0;
    line-height: 1.25;
  }

  .markdown-content h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0.75rem 0 0.375rem 0;
    line-height: 1.375;
  }

  .markdown-content h4 {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0.625rem 0 0.375rem 0;
    line-height: 1.375;
  }

  .markdown-content h5 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0.5rem 0 0.25rem 0;
    line-height: 1.5;
  }

  .markdown-content h6 {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0.5rem 0 0.25rem 0;
    line-height: 1.5;
  }

  .markdown-content h1:first-child,
  .markdown-content h2:first-child,
  .markdown-content h3:first-child,
  .markdown-content h4:first-child,
  .markdown-content h5:first-child,
  .markdown-content h6:first-child {
    margin-top: 0;
  }

  .markdown-content p {
    margin: 0.25rem 0;
  }

  .markdown-content p:first-child {
    margin-top: 0;
  }

  .markdown-content p:last-child {
    margin-bottom: 0;
  }

  .markdown-content a {
    color: inherit;
    text-decoration: underline;
  }

  .markdown-content ul,
  .markdown-content ol {
    padding-left: 1.5rem;
    margin: 0.5rem 0;
  }

  .markdown-content ul {
    list-style-type: disc;
  }

  .markdown-content ol {
    list-style-type: decimal;
  }

  .markdown-content li {
    margin: 0.25rem 0;
  }

  .markdown-content blockquote {
    border-left: 3px solid rgba(0, 0, 0, 0.2);
    padding-left: 1rem;
    margin-left: 0.5rem;
    font-style: italic;
    color: rgba(0, 0, 0, 0.7);
  }

  .markdown-content strong {
    font-weight: 700;
  }

  .markdown-content em {
    font-style: italic;
  }

  .markdown-content hr {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    margin: 1rem 0;
  }

  /* User message specific markdown styling */
  sketch-timeline-message .bg-blue-500 .markdown-content a {
    color: #fff;
    text-decoration: underline;
  }

  sketch-timeline-message .bg-blue-500 .markdown-content blockquote {
    border-left: 3px solid rgba(255, 255, 255, 0.4);
    color: rgba(255, 255, 255, 0.9);
  }

  sketch-timeline-message .bg-blue-500 .markdown-content hr {
    border-top: 1px solid rgba(255, 255, 255, 0.3);
  }

  /* Code block styling within markdown */
  .markdown-content pre,
  .markdown-content code {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    padding: 2px 4px;
    overflow-x: auto;
    max-width: 100%;
    box-sizing: border-box;
    /* Reset word breaking for code blocks - they should not wrap */
    word-break: normal;
    overflow-wrap: normal;
    white-space: nowrap;
  }

  /* Ensure proper word breaking for all markdown content EXCEPT code blocks */
  .markdown-content {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    max-width: 100%;
  }

  /* Handle long URLs and unbreakable strings in text content */
  .markdown-content a,
  .markdown-content span:not(.code-language),
  .markdown-content p {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
  }

  .markdown-content pre {
    padding: 8px 12px;
    margin: 0.5rem 0;
    line-height: 1.4;
    /* Ensure code blocks don't inherit word breaking */
    word-break: normal;
    overflow-wrap: normal;
    white-space: nowrap;
  }

  .markdown-content pre code {
    background: transparent;
    padding: 0;
    /* Ensure inline code in pre blocks doesn't inherit word breaking */
    word-break: normal;
    overflow-wrap: normal;
    white-space: pre;
  }

  /* User message code styling */
  sketch-timeline-message .bg-blue-500 .markdown-content pre,
  sketch-timeline-message .bg-blue-500 .markdown-content code {
    background: rgba(255, 255, 255, 0.2);
    color: white;
  }

  sketch-timeline-message .bg-blue-500 .markdown-content pre code {
    background: transparent;
  }

  /* Code block containers */
  .code-block-container {
    position: relative;
    margin: 8px 0;
    border-radius: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    background: rgba(0, 0, 0, 0.05);
    max-width: 100%;
    width: 100%;
  }

  sketch-timeline-message .bg-blue-500 .code-block-container {
    background: rgba(255, 255, 255, 0.2);
  }

  .code-block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.1);
    font-size: 12px;
  }

  sketch-timeline-message .bg-blue-500 .code-block-header {
    background: rgba(255, 255, 255, 0.2);
    color: white;
  }

  .code-language {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 11px;
    font-weight: 500;
  }

  .code-copy-button {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 2px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: all 0.15s ease;
  }

  .code-copy-button:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.1);
  }

  sketch-timeline-message .bg-blue-500 .code-copy-button:hover {
    background: rgba(255, 255, 255, 0.2);
  }

  .code-block-container pre {
    margin: 0;
    padding: 8px;
    background: transparent;
  }

  .code-block-container code {
    background: transparent;
    padding: 0;
    display: block;
    width: 100%;
  }

  /* Mermaid diagram styling */
  .mermaid-container {
    margin: 1rem 0;
    padding: 0.5rem;
    background-color: #f8f8f8;
    border-radius: 4px;
    overflow-x: auto;
  }

  .mermaid {
    text-align: center;
  }

  /* Dark mode styles */
  .dark .markdown-content pre,
  .dark .markdown-content code {
    background: rgba(255, 255, 255, 0.1);
    color: #e5e7eb;
  }

  .dark .markdown-content blockquote {
    border-left: 3px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
  }

  .dark .markdown-content hr {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }

  .dark .code-block-container {
    background: rgba(255, 255, 255, 0.1);
  }

  .dark .code-block-header {
    background: rgba(255, 255, 255, 0.15);
    color: #e5e7eb;
  }

  .dark .code-copy-button:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  .dark .mermaid-container {
    background-color: #374151;
    border: 1px solid #4b5563;
  }

  /* Print styles */
  @media print {
    .floating-message,
    .commit-diff-button,
    button[title="Copy to clipboard"],
    button[title="Show message details"] {
      display: none !important;
    }
  }
`;
  }

  // After the component is updated and rendered, render any mermaid diagrams
  updated(changedProperties: Map<string, unknown>) {
    super.updated(changedProperties);
    this.renderMermaidDiagrams();
  }

  // Render mermaid diagrams after the component is updated
  renderMermaidDiagrams() {
    // Add a small delay to ensure the DOM is fully rendered
    setTimeout(async () => {
      // Find all mermaid containers in our shadow root
      const containers = this.querySelectorAll(".mermaid");
      if (!containers || containers.length === 0) return;

      try {
        // Load mermaid dynamically
        const mermaidLib = await loadMermaid();

        // Initialize mermaid with specific config (only once per load)
        mermaidLib.initialize({
          startOnLoad: false,
          suppressErrorRendering: true,
          theme: "default",
          securityLevel: "loose", // Allows more flexibility but be careful with user-generated content
          fontFamily: "monospace",
        });

        // Process each mermaid diagram
        containers.forEach((container) => {
          const id = container.id;
          const code = container.textContent || "";
          if (!code || !id) return; // Use return for forEach instead of continue

          try {
            // Clear any previous content
            container.innerHTML = code;

            // Render the mermaid diagram using promise
            mermaidLib
              .render(`${id}-svg`, code)
              .then(({ svg }) => {
                container.innerHTML = svg;
              })
              .catch((err) => {
                console.error("Error rendering mermaid diagram:", err);
                // Show the original code as fallback
                container.innerHTML = `<pre>${code}</pre>`;
              });
          } catch (err) {
            console.error("Error processing mermaid diagram:", err);
            // Show the original code as fallback
            container.innerHTML = `<pre>${code}</pre>`;
          }
        });
      } catch (err) {
        console.error("Error loading mermaid:", err);
        // Show the original code as fallback for all diagrams
        containers.forEach((container) => {
          const code = container.textContent || "";
          container.innerHTML = `<pre>${code}</pre>`;
        });
      }
    }, 100); // Small delay to ensure DOM is ready
  }

  // See https://lit.dev/docs/components/lifecycle/
  disconnectedCallback() {
    super.disconnectedCallback();
  }

  // Add post-sanitization button replacement
  private addCopyButtons(html: string): string {
    return html.replace(
      /<span class="copy-button-placeholder"><\/span>/g,
      `<button class="code-copy-button" title="Copy code">
         <svg class="code-copy-button" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
           <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
         </svg>
       </button>`,
    );
  }

  // Event delegation handler for code copy functionality
  private handleCodeCopy(event: Event) {
    const button = event.target as HTMLElement;
    if (!button.classList.contains("code-copy-button")) return;

    event.stopPropagation();

    // Find the code element using DOM traversal
    const header = button.closest(".code-block-header");
    const codeElement = header?.nextElementSibling?.querySelector("code");
    if (!codeElement) return;

    // Read the text directly from DOM (automatically unescapes HTML)
    const codeText = codeElement.textContent || "";

    // Copy to clipboard with visual feedback
    navigator.clipboard
      .writeText(codeText)
      .then(() => {
        // Show success feedback (icon change + floating message)
        const originalHTML = button.innerHTML;
        button.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M20 6L9 17l-5-5"></path>
        </svg>`;
        this.showFloatingMessage(
          "Copied!",
          button.getBoundingClientRect(),
          "success",
        );
        setTimeout(() => (button.innerHTML = originalHTML), 2000);
      })
      .catch((err) => {
        console.error("Failed to copy code:", err);
        this.showFloatingMessage(
          "Failed to copy!",
          button.getBoundingClientRect(),
          "error",
        );
      });
  }

  renderMarkdown(markdownContent: string): string {
    try {
      // Create a custom renderer
      const renderer = new Renderer();
      const originalCodeRenderer = renderer.code.bind(renderer);

      // Override the code renderer to handle mermaid diagrams and add copy buttons
      renderer.code = function ({ text, lang, escaped }: Tokens.Code): string {
        if (lang === "mermaid") {
          // Generate a unique ID for this diagram
          const id = `mermaid-diagram-${Math.random().toString(36).substring(2, 10)}`;

          // Just create the container and mermaid div - we'll render it in the updated() lifecycle method
          return `<div class="mermaid-container">
                   <div class="mermaid" id="${id}">${text}</div>
                 </div>`;
        }

        // For regular code blocks, call the original renderer to get properly escaped HTML
        const originalCodeHtml = originalCodeRenderer({ text, lang, escaped });

        // Extract the code content from the original HTML to add our custom wrapper
        // The original renderer returns: <pre><code class="language-x">escapedText</code></pre>
        const codeMatch = originalCodeHtml.match(
          /<pre><code[^>]*>([\s\S]*?)<\/code><\/pre>/,
        );
        if (!codeMatch) {
          // Fallback to original if we can't parse it
          return originalCodeHtml;
        }

        const escapedText = codeMatch[1];
        const langClass = lang ? ` class="language-${lang}"` : "";

        // Use placeholder instead of actual button - will be replaced after sanitization
        return `<div class="code-block-container">
                 <div class="code-block-header">
                   ${lang ? `<span class="code-language">${lang}</span>` : ""}
                   <span class="copy-button-placeholder"></span>
                 </div>
                 <pre><code${langClass}>${escapedText}</code></pre>
               </div>`;
      };

      // Set markdown options for proper code block highlighting
      const markedOptions: MarkedOptions = {
        gfm: true, // GitHub Flavored Markdown
        breaks: true, // Convert newlines to <br>
        async: false,
        renderer: renderer,
      };

      // Parse markdown and sanitize the output HTML with DOMPurify
      const htmlOutput = marked.parse(markdownContent, markedOptions) as string;
      const sanitizedOutput = DOMPurify.sanitize(htmlOutput, {
        // Allow common HTML elements that are safe
        ALLOWED_TAGS: [
          "p",
          "br",
          "strong",
          "em",
          "b",
          "i",
          "u",
          "s",
          "code",
          "pre",
          "h1",
          "h2",
          "h3",
          "h4",
          "h5",
          "h6",
          "ul",
          "ol",
          "li",
          "blockquote",
          "a",
          "div",
          "span", // For mermaid diagrams and code blocks
          "svg",
          "g",
          "path",
          "rect",
          "circle",
          "text",
          "line",
          "polygon", // For mermaid SVG
          "button", // For code copy buttons
        ],
        ALLOWED_ATTR: [
          "href",
          "title",
          "target",
          "rel", // For links
          "class",
          "id", // For styling and functionality
          "data-*", // For code copy buttons
          // SVG attributes for mermaid diagrams
          "viewBox",
          "width",
          "height",
          "xmlns",
          "fill",
          "stroke",
          "stroke-width",
          "d",
          "x",
          "y",
          "x1",
          "y1",
          "x2",
          "y2",
          "cx",
          "cy",
          "r",
          "rx",
          "ry",
          "points",
          "transform",
          "text-anchor",
          "font-size",
          "font-family",
        ],
        // Allow data attributes for functionality
        ALLOW_DATA_ATTR: true,
        // Keep whitespace for code formatting
        KEEP_CONTENT: true,
      });

      // Add copy buttons after sanitization
      return this.addCopyButtons(sanitizedOutput);
    } catch (error) {
      console.error("Error rendering markdown:", error);
      // Fallback to sanitized plain text if markdown parsing fails
      return DOMPurify.sanitize(markdownContent);
    }
  }

  /**
   * Format timestamp for display
   */
  formatTimestamp(
    timestamp: string | number | Date | null | undefined,
    defaultValue: string = "",
  ): string {
    if (!timestamp) return defaultValue;
    try {
      const date = new Date(timestamp);
      if (isNaN(date.getTime())) return defaultValue;

      // Format: Mar 13, 2025 09:53:25 AM
      return date.toLocaleString("en-US", {
        month: "short",
        day: "numeric",
        year: "numeric",
        hour: "numeric",
        minute: "2-digit",
        second: "2-digit",
        hour12: true,
      });
    } catch {
      return defaultValue;
    }
  }

  formatNumber(
    num: number | null | undefined,
    defaultValue: string = "0",
  ): string {
    if (num === undefined || num === null) return defaultValue;
    try {
      return num.toLocaleString();
    } catch {
      return String(num);
    }
  }
  formatCurrency(
    num: number | string | null | undefined,
    defaultValue: string = "$0.00",
    isMessageLevel: boolean = false,
  ): string {
    if (num === undefined || num === null) return defaultValue;
    try {
      // Use 4 decimal places for message-level costs, 2 for totals
      const decimalPlaces = isMessageLevel ? 4 : 2;
      return `$${parseFloat(String(num)).toFixed(decimalPlaces)}`;
    } catch {
      return defaultValue;
    }
  }

  // Format duration from nanoseconds to a human-readable string
  _formatDuration(nanoseconds: number | null | undefined): string {
    if (!nanoseconds) return "0s";

    const seconds = nanoseconds / 1e9;

    if (seconds < 60) {
      return `${seconds.toFixed(1)}s`;
    } else if (seconds < 3600) {
      const minutes = Math.floor(seconds / 60);
      const remainingSeconds = seconds % 60;
      return `${minutes}min ${remainingSeconds.toFixed(0)}s`;
    } else {
      const hours = Math.floor(seconds / 3600);
      const remainingSeconds = seconds % 3600;
      const minutes = Math.floor(remainingSeconds / 60);
      return `${hours}h ${minutes}min`;
    }
  }

  showCommit(commitHash: string) {
    this.dispatchEvent(
      new CustomEvent("show-commit-diff", {
        bubbles: true,
        composed: true,
        detail: { commitHash },
      }),
    );
  }

  _toggleInfo(e: Event) {
    e.stopPropagation();
    this.showInfo = !this.showInfo;
  }

  copyToClipboard(text: string, event: Event) {
    const element = event.currentTarget as HTMLElement;
    const rect = element.getBoundingClientRect();

    navigator.clipboard
      .writeText(text)
      .then(() => {
        this.showFloatingMessage("Copied!", rect, "success");
      })
      .catch((err) => {
        console.error("Failed to copy text: ", err);
        this.showFloatingMessage("Failed to copy!", rect, "error");
      });
  }

  showFloatingMessage(
    message: string,
    targetRect: DOMRect,
    type: "success" | "error",
  ) {
    // Create floating message element
    const floatingMsg = document.createElement("div");
    floatingMsg.textContent = message;
    floatingMsg.className = `floating-message ${type}`;

    // Position it near the clicked element
    // Position just above the element
    const top = targetRect.top - 30;
    const left = targetRect.left + targetRect.width / 2 - 40;

    floatingMsg.style.position = "fixed";
    floatingMsg.style.top = `${top}px`;
    floatingMsg.style.left = `${left}px`;
    floatingMsg.style.zIndex = "9999";

    // Add to document body
    document.body.appendChild(floatingMsg);

    // Animate in
    floatingMsg.style.opacity = "0";
    floatingMsg.style.transform = "translateY(10px)";

    setTimeout(() => {
      floatingMsg.style.opacity = "1";
      floatingMsg.style.transform = "translateY(0)";
    }, 10);

    // Remove after animation
    setTimeout(() => {
      floatingMsg.style.opacity = "0";
      floatingMsg.style.transform = "translateY(-10px)";

      setTimeout(() => {
        document.body.removeChild(floatingMsg);
      }, 300);
    }, 1500);
  }

  // Format GitHub repository URL to org/repo format
  formatGitHubRepo(url) {
    if (!url) return null;

    // Common GitHub URL patterns
    const patterns = [
      // HTTPS URLs
      /https:\/\/github\.com\/([^/]+)\/([^/\s.]+)(?:\.git)?/,
      // SSH URLs
      /git@github\.com:([^/]+)\/([^/\s.]+)(?:\.git)?/,
      // Git protocol
      /git:\/\/github\.com\/([^/]+)\/([^/\s.]+)(?:\.git)?/,
    ];

    for (const pattern of patterns) {
      const match = url.match(pattern);
      if (match) {
        return {
          formatted: `${match[1]}/${match[2]}`,
          url: `https://github.com/${match[1]}/${match[2]}`,
          owner: match[1],
          repo: match[2],
        };
      }
    }

    return null;
  }

  // Generate GitHub branch URL if linking is enabled
  getGitHubBranchLink(branchName) {
    if (!this.state?.link_to_github || !branchName) {
      return null;
    }

    const github = this.formatGitHubRepo(this.state?.git_origin);
    if (!github) {
      return null;
    }

    return `https://github.com/${github.owner}/${github.repo}/tree/${branchName}`;
  }

  render() {
    // Calculate if this is an end of turn message with no parent conversation ID
    const isEndOfTurn =
      this.message?.end_of_turn && !this.message?.parent_conversation_id;

    const isPreCompaction =
      this.message?.idx !== undefined &&
      this.message.idx < this.firstMessageIndex;

    // Dynamic classes based on message type and state
    const messageClasses = [
      "relative mb-1.5 flex flex-col w-full", // base message styles
      isEndOfTurn ? "mb-4" : "", // end-of-turn spacing
      isPreCompaction ? "opacity-85 border-l-2 border-gray-300" : "", // pre-compaction styling
    ]
      .filter(Boolean)
      .join(" ");

    const bubbleContainerClasses = [
      "flex-1 flex text-ellipsis",
      this.compactPadding ? "max-w-full" : "max-w-[calc(100%-160px)]",
      this.message?.type === "user" ? "justify-end" : "justify-start",
    ]
      .filter(Boolean)
      .join(" ");

    const messageContentClasses = [
      "relative px-2.5 py-1.5 rounded-xl shadow-sm min-w-min",
      // User message styling
      this.message?.type === "user"
        ? "bg-blue-500 text-white rounded-br-sm"
        : // Agent/tool/error message styling
          "bg-gray-100 dark:bg-gray-800 text-black dark:text-gray-100 rounded-bl-sm",
    ]
      .filter(Boolean)
      .join(" ");

    return html`
      <div class="${messageClasses}">
        <div class="flex relative w-full">
          <!-- Left metadata area -->
          <div
            class="${this.compactPadding
              ? "hidden"
              : "flex-none w-20 px-1 py-0.5 text-right text-xs text-gray-500 dark:text-gray-400 self-start"}"
          ></div>

          <!-- Message bubble -->
          <div
            class="${bubbleContainerClasses}"
            style="${this.compactPadding
              ? ""
              : "max-width: calc(100% - 160px);"}"
          >
            <div
              class="${messageContentClasses}"
              style="max-width: 100%; overflow: hidden; width: fit-content; min-width: 200px;"
              @click=${this.handleCodeCopy}
            >
              <div class="relative">
                <div
                  class="absolute top-1 right-1 z-10 opacity-0 hover:opacity-100 transition-opacity duration-200 flex gap-1.5"
                >
                  ${copyButton(this.message?.content)}
                  <button
                    class="bg-transparent border-none ${this.message?.type ===
                    "user"
                      ? "text-white/80 hover:bg-white/15"
                      : "text-black/60 dark:text-gray-400 hover:bg-black/8 dark:hover:bg-white/10"} cursor-pointer p-0.5 rounded-full flex items-center justify-center w-6 h-6 transition-all duration-150"
                    title="Show message details"
                    @click=${this._toggleInfo}
                  >
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    >
                      <circle cx="12" cy="12" r="10"></circle>
                      <line x1="12" y1="16" x2="12" y2="12"></line>
                      <line x1="12" y1="8" x2="12.01" y2="8"></line>
                    </svg>
                  </button>
                </div>
                ${this.message?.content
                  ? html`
                      <div
                        class="mb-0 font-sans py-0.5 select-text cursor-text text-sm leading-relaxed text-left box-border markdown-content"
                        style="max-width: 100%; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; hyphens: auto;"
                        @click=${this.handleCodeCopy}
                        class="overflow-x-auto mb-0 font-sans py-0.5 select-text cursor-text text-sm leading-relaxed text-left min-w-[200px] box-border mx-auto markdown-content"
                      >
                        ${unsafeHTML(
                          this.renderMarkdown(this.message?.content),
                        )}
                      </div>
                    `
                  : ""}

                <!-- End of turn indicator inside the bubble -->
                ${isEndOfTurn && this.message?.elapsed
                  ? html`
                      <div
                        class="block text-xs ${this.message?.type === "user"
                          ? "text-white/70"
                          : "text-gray-500 dark:text-gray-400"} py-0.5 mt-2 text-right italic"
                      >
                        end of turn
                        (${this._formatDuration(this.message?.elapsed)})
                      </div>
                    `
                  : ""}

                <!-- Info panel that can be toggled -->
                ${this.showInfo
                  ? html`
                      <div
                        class="mt-2 p-2 ${this.message?.type === "user"
                          ? "bg-white/15 border-l-2 border-white/20"
                          : "bg-black/5 dark:bg-white/5 border-l-2 border-black/10 dark:border-white/20"} rounded-md text-xs transition-all duration-200"
                      >
                        <div class="mb-1 flex">
                          <span class="font-bold mr-1 min-w-[60px]">Type:</span>
                          <span class="flex-1">${this.message?.type}</span>
                        </div>
                        <div class="mb-1 flex">
                          <span class="font-bold mr-1 min-w-[60px]">Time:</span>
                          <span class="flex-1">
                            ${this.formatTimestamp(this.message?.timestamp, "")}
                          </span>
                        </div>
                        ${this.message?.elapsed
                          ? html`
                              <div class="mb-1 flex">
                                <span class="font-bold mr-1 min-w-[60px]"
                                  >Duration:</span
                                >
                                <span class="flex-1">
                                  ${this._formatDuration(this.message?.elapsed)}
                                </span>
                              </div>
                            `
                          : ""}
                        ${this.message?.usage
                          ? html`
                              <div class="mb-1 flex">
                                <span class="font-bold mr-1 min-w-[60px]"
                                  >Tokens:</span
                                >
                                <span class="flex-1">
                                  ${this.message?.usage
                                    ? html`
                                        <div>
                                          Input:
                                          ${this.formatNumber(
                                            this.message?.usage?.input_tokens ||
                                              0,
                                          )}
                                        </div>
                                        ${this.message?.usage
                                          ?.cache_creation_input_tokens
                                          ? html`
                                              <div>
                                                Cache creation:
                                                ${this.formatNumber(
                                                  this.message?.usage
                                                    ?.cache_creation_input_tokens,
                                                )}
                                              </div>
                                            `
                                          : ""}
                                        ${this.message?.usage
                                          ?.cache_read_input_tokens
                                          ? html`
                                              <div>
                                                Cache read:
                                                ${this.formatNumber(
                                                  this.message?.usage
                                                    ?.cache_read_input_tokens,
                                                )}
                                              </div>
                                            `
                                          : ""}
                                        <div>
                                          Output:
                                          ${this.formatNumber(
                                            this.message?.usage?.output_tokens,
                                          )}
                                        </div>
                                        <div>
                                          Cost:
                                          ${this.formatCurrency(
                                            this.message?.usage?.cost_usd,
                                          )}
                                        </div>
                                      `
                                    : "N/A"}
                                </span>
                              </div>
                            `
                          : ""}
                        ${this.message?.conversation_id
                          ? html`
                              <div class="mb-1 flex">
                                <span class="font-bold mr-1 min-w-[60px]"
                                  >Conversation ID:</span
                                >
                                <span
                                  class="flex-1 font-mono text-xs break-all"
                                >
                                  ${this.message?.conversation_id}
                                </span>
                              </div>
                            `
                          : ""}
                      </div>
                    `
                  : ""}
              </div>

              <!-- Tool calls - only shown for agent messages -->
              ${this.message?.type === "agent"
                ? html`
                    <sketch-tool-calls
                      .toolCalls=${this.message?.tool_calls}
                      .open=${this.open}
                    ></sketch-tool-calls>
                  `
                : ""}

              <!-- Commits section -->
              ${this.message?.commits
                ? html`
                    <div class="mt-2.5">
                      <div
                        class="bg-green-100 text-green-800 font-medium text-xs py-1.5 px-2.5 rounded-2xl mb-2 text-center shadow-sm"
                      >
                        ${this.message.commits.length} new
                        commit${this.message.commits.length > 1 ? "s" : ""}
                        detected
                      </div>
                      ${this.message.commits.map((commit) => {
                        return html`
                          <div
                            class="text-sm bg-gray-100 dark:bg-gray-800 rounded-lg overflow-hidden mb-1.5 shadow-sm p-1.5 px-2 flex items-center gap-2"
                          >
                            <span
                              class="text-blue-600 font-bold font-mono cursor-pointer no-underline bg-blue-600/10 py-0.5 px-1 rounded hover:bg-blue-600/20"
                              title="Click to copy: ${commit.hash}"
                              @click=${(e) =>
                                this.copyToClipboard(
                                  commit.hash.substring(0, 8),
                                  e,
                                )}
                            >
                              ${commit.hash.substring(0, 8)}
                            </span>
                            ${commit.pushed_branch
                              ? (() => {
                                  const githubLink = this.getGitHubBranchLink(
                                    commit.pushed_branch,
                                  );
                                  return html`
                                    <div class="flex items-center gap-1.5">
                                      <span
                                        class="text-green-600 font-medium cursor-pointer font-mono bg-green-600/10 py-0.5 px-1 rounded hover:bg-green-600/20"
                                        title="Click to copy: ${commit.pushed_branch}"
                                        @click=${(e) =>
                                          this.copyToClipboard(
                                            commit.pushed_branch,
                                            e,
                                          )}
                                        >${commit.pushed_branch}</span
                                      >
                                      <span
                                        class="opacity-70 flex items-center hover:opacity-100"
                                        @click=${(e) => {
                                          e.stopPropagation();
                                          this.copyToClipboard(
                                            commit.pushed_branch,
                                            e,
                                          );
                                        }}
                                      >
                                        <svg
                                          xmlns="http://www.w3.org/2000/svg"
                                          width="14"
                                          height="14"
                                          viewBox="0 0 24 24"
                                          fill="none"
                                          stroke="currentColor"
                                          stroke-width="2"
                                          stroke-linecap="round"
                                          stroke-linejoin="round"
                                          class="align-middle"
                                        >
                                          <rect
                                            x="9"
                                            y="9"
                                            width="13"
                                            height="13"
                                            rx="2"
                                            ry="2"
                                          ></rect>
                                          <path
                                            d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
                                          ></path>
                                        </svg>
                                      </span>
                                      ${githubLink
                                        ? html`
                                            <a
                                              href="${githubLink}"
                                              target="_blank"
                                              rel="noopener noreferrer"
                                              class="text-gray-600 dark:text-gray-400 no-underline flex items-center transition-colors duration-200 hover:text-blue-600 dark:hover:text-blue-400"
                                              title="Open ${commit.pushed_branch} on GitHub"
                                              @click=${(e) =>
                                                e.stopPropagation()}
                                            >
                                              <svg
                                                class="w-3.5 h-3.5"
                                                viewBox="0 0 16 16"
                                                width="14"
                                                height="14"
                                              >
                                                <path
                                                  fill="currentColor"
                                                  d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
                                                />
                                              </svg>
                                            </a>
                                          `
                                        : ""}
                                    </div>
                                  `;
                                })()
                              : ``}
                            <span
                              class="text-sm text-gray-700 dark:text-gray-300 flex-grow truncate"
                            >
                              ${commit.subject}
                            </span>
                            <button
                              class="py-0.5 px-2 border-0 rounded bg-blue-600 text-white text-xs cursor-pointer transition-all duration-200 block ml-auto hover:bg-blue-700"
                              @click=${() => this.showCommit(commit.hash)}
                            >
                              View Diff
                            </button>
                          </div>
                        `;
                      })}
                    </div>
                  `
                : ""}
            </div>
          </div>

          <!-- Right metadata area -->
          <div
            class="${this.compactPadding
              ? "hidden"
              : "flex-none w-20 px-1 py-0.5 text-left text-xs text-gray-500 dark:text-gray-400 self-start"}"
          ></div>
        </div>

        <!-- User name for user messages - positioned outside and below the bubble -->
        ${this.message?.type === "user" && this.state?.git_username
          ? html`
              <div
                class="flex justify-end mt-1 ${this.compactPadding
                  ? ""
                  : "pr-20"}"
              >
                <div
                  class="text-xs text-gray-600 dark:text-gray-400 italic text-right"
                >
                  ${this.state?.link_to_github
                    ? html`@<a
                          class="no-underline hover:underline"
                          href="${this.state.link_to_github}"
                          title="${this.state.git_username} on GitHub"
                          >${this.state.git_username}</a
                        >`
                    : ""}
                </div>
              </div>
            `
          : ""}
      </div>
    `;
  }
}

function copyButton(textToCopy: string) {
  // SVG for copy icon (two overlapping rectangles)
  const copyIcon = html`<svg
    xmlns="http://www.w3.org/2000/svg"
    width="16"
    height="16"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
  >
    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
  </svg>`;

  // SVG for success check mark
  const successIcon = html`<svg
    xmlns="http://www.w3.org/2000/svg"
    width="16"
    height="16"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
  >
    <path d="M20 6L9 17l-5-5"></path>
  </svg>`;

  const ret = html`<button
    class="bg-transparent border-none cursor-pointer p-0.5 rounded-full flex items-center justify-center w-6 h-6 transition-all duration-150"
    title="Copy to clipboard"
    @click=${(e: Event) => {
      e.stopPropagation();
      const copyButton = e.currentTarget as HTMLButtonElement;
      const originalInnerHTML = copyButton.innerHTML;
      navigator.clipboard
        .writeText(textToCopy)
        .then(() => {
          copyButton.innerHTML = "";
          const successElement = document.createElement("div");
          copyButton.appendChild(successElement);
          render(successIcon, successElement);
          setTimeout(() => {
            copyButton.innerHTML = originalInnerHTML;
          }, 2000);
        })
        .catch((err) => {
          console.error("Failed to copy text: ", err);
          setTimeout(() => {
            copyButton.innerHTML = originalInnerHTML;
          }, 2000);
        });
    }}
  >
    ${copyIcon}
  </button>`;

  return ret;
}

// Global styles are now injected in the component's connectedCallback() method
// to ensure they are added when the component is actually used, not at module load time

declare global {
  interface HTMLElementTagNameMap {
    "sketch-timeline-message": SketchTimelineMessage;
  }
}