sonance-brand-mcp 1.3.110 → 1.3.112

package/dist/assets/dev-tools/components/ChatTabBar.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import React from "react";
+import { Plus, X, MessageSquare } from "lucide-react";
+import { cn } from "../../../lib/utils";
+import { ChatSession } from "../types";
+
+export interface ChatTabBarProps {
+  sessions: ChatSession[];
+  activeSessionId: string | null;
+  onSelectSession: (sessionId: string) => void;
+  onCreateSession: () => void;
+  onCloseSession: (sessionId: string) => void;
+}
+
+export function ChatTabBar({
+  sessions,
+  activeSessionId,
+  onSelectSession,
+  onCreateSession,
+  onCloseSession,
+}: ChatTabBarProps) {
+  // Generate a short name for the session
+  const getSessionName = (session: ChatSession, index: number) => {
+    if (session.name && session.name !== "New Chat") {
+      return session.name.length > 12 ? session.name.slice(0, 12) + "..." : session.name;
+    }
+    return `Chat ${index + 1}`;
+  };
+
+  return (
+    <div className="flex items-center gap-0.5 px-3 py-1 bg-transparent border-b border-white/10 overflow-x-auto scrollbar-hide">
+      {/* Session Tabs - Cursor-style underline (always on dark bg) */}
+      {sessions.map((session, index) => {
+        const isActive = session.id === activeSessionId;
+        return (
+          <div
+            key={session.id}
+            className={cn(
+              "group relative flex items-center gap-1 px-2 py-1 text-[11px] cursor-pointer transition-all duration-150 bg-transparent",
+              isActive
+                ? "font-medium text-white after:absolute after:bottom-0 after:left-0.5 after:right-0.5 after:h-[2px] after:bg-[#00A3E1] after:rounded-full"
+                : "text-gray-400 hover:text-white"
+            )}
+            onClick={() => onSelectSession(session.id)}
+          >
+            <MessageSquare className="h-3 w-3 flex-shrink-0" />
+            <span id="chat-tab-bar-span-getsessionnamesessio" className="truncate max-w-[72px]">
+              {getSessionName(session, index)}
+            </span>
+            {/* Close button - only show if more than 1 session */}
+            {sessions.length > 1 && (
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onCloseSession(session.id);
+                }}
+                className={cn(
+                  "p-0.5 rounded-sm hover:bg-white/10 transition-colors",
+                  "opacity-0 group-hover:opacity-100",
+                  isActive && "opacity-60 group-hover:opacity-100"
+                )}
+              >
+                <X className="h-2.5 w-2.5" />
+              </button>
+            )}
+          </div>
+        );
+      })}
+
+      {/* New Chat Button - minimal icon */}
+      <button
+        onClick={onCreateSession}
+        className="flex items-center justify-center p-1 text-gray-400 hover:text-white hover:bg-white/10 transition-colors ml-0.5"
+        title="New chat"
+      >
+        <Plus className="h-3 w-3" />
+      </button>
+    </div>
+  );
+}
+

package/dist/assets/dev-tools/components/DiffPreview.tsx

@@ -118,7 +118,7 @@ export function DiffPreview({
       {/* Live Preview Indicator */}
       <div className="flex items-center gap-2 p-2 rounded bg-[#00A3E1]/10 border border-[#00A3E1]/30">
         <Eye className="h-3.5 w-3.5 text-[#00A3E1]" />
-        <span className="text-xs text-[#00A3E1]">
+        <span id="span-live-preview-active-" className="text-xs text-[#00A3E1]">
           Live preview active - scroll to see changes on the page
         </span>
       </div>

package/dist/assets/dev-tools/components/InlineDiffPreview.tsx

@@ -0,0 +1,528 @@
+"use client";
+
+import React, { useState, useMemo } from "react";
+import {
+  ChevronDown,
+  ChevronRight,
+  Check,
+  RotateCcw,
+  FileCode,
+  CheckCircle,
+  XCircle,
+  Loader2,
+  AlertTriangle,
+  Info,
+  RefreshCw,
+  Plus,
+  Minus,
+  Code,
+} from "lucide-react";
+import { cn } from "../../../lib/utils";
+import { ChatMessageAction, ApplyFirstStatus } from "../types";
+
+export interface InlineDiffPreviewProps {
+  action: ChatMessageAction;
+  onAccept?: () => void;
+  onRevert?: () => void;
+  // Live status from parent (for HMR indicator, loading states)
+  liveStatus?: ApplyFirstStatus;
+  isProcessing?: boolean;
+}
+
+// Helper to refresh the page to see component changes
+function handleRefreshPage() {
+  // Session is already persisted to localStorage, so it will survive the reload
+  window.location.reload();
+}
+
+/**
+ * Extract meaningful changes from a diff string
+ * Instead of showing full lines, extract what was actually modified
+ */
+interface ChangeSummary {
+  type: 'added' | 'removed' | 'modified';
+  element?: string;  // e.g., "Card", "Button"
+  change: string;    // e.g., "rounded-none", "bg-blue-500"
+  fullLine?: string; // Original full line for tooltip
+}
+
+function extractChangeSummary(diff: string): ChangeSummary[] {
+  const lines = diff.split('\n');
+  const changes: ChangeSummary[] = [];
+  
+  // Group consecutive - and + lines for comparison
+  const removedLines: string[] = [];
+  const addedLines: string[] = [];
+  
+  for (const line of lines) {
+    if (line.startsWith('-') && !line.startsWith('---')) {
+      removedLines.push(line.substring(1).trim());
+    } else if (line.startsWith('+') && !line.startsWith('+++')) {
+      addedLines.push(line.substring(1).trim());
+    }
+  }
+  
+  // If we have both removed and added lines, find the differences
+  if (removedLines.length > 0 && addedLines.length > 0) {
+    for (let i = 0; i < Math.max(removedLines.length, addedLines.length); i++) {
+      const removed = removedLines[i] || '';
+      const added = addedLines[i] || '';
+      
+      if (removed && added) {
+        // Find what changed between the lines
+        const diff = findLineDifference(removed, added);
+        if (diff) {
+          changes.push({
+            type: 'modified',
+            element: diff.element,
+            change: diff.change,
+            fullLine: added
+          });
+        }
+      } else if (added && !removed) {
+        changes.push({
+          type: 'added',
+          change: truncateChange(added),
+          fullLine: added
+        });
+      } else if (removed && !added) {
+        changes.push({
+          type: 'removed',
+          change: truncateChange(removed),
+          fullLine: removed
+        });
+      }
+    }
+  } else if (addedLines.length > 0) {
+    // Only additions
+    for (const line of addedLines) {
+      changes.push({
+        type: 'added',
+        change: truncateChange(line),
+        fullLine: line
+      });
+    }
+  } else if (removedLines.length > 0) {
+    // Only removals
+    for (const line of removedLines) {
+      changes.push({
+        type: 'removed',
+        change: truncateChange(line),
+        fullLine: line
+      });
+    }
+  }
+  
+  return changes;
+}
+
+/**
+ * Find the actual difference between two similar lines
+ */
+function findLineDifference(removed: string, added: string): { element?: string; change: string } | null {
+  // Try to find className differences
+  const classNameRegex = /className=["']([^"']+)["']/;
+  const removedClass = removed.match(classNameRegex);
+  const addedClass = added.match(classNameRegex);
+  
+  if (removedClass && addedClass) {
+    const removedClasses = new Set(removedClass[1].split(/\s+/));
+    const addedClasses = new Set(addedClass[1].split(/\s+/));
+    
+    // Find added classes
+    const newClasses = [...addedClasses].filter(c => !removedClasses.has(c));
+    // Find removed classes
+    const deletedClasses = [...removedClasses].filter(c => !addedClasses.has(c));
+    
+    if (newClasses.length > 0 || deletedClasses.length > 0) {
+      // Try to extract element name (e.g., <Card, <Button)
+      const elementMatch = added.match(/<(\w+)/);
+      const element = elementMatch ? elementMatch[1] : undefined;
+      
+      const changes: string[] = [];
+      if (newClasses.length > 0) {
+        changes.push(`+${newClasses.join(' ')}`);
+      }
+      if (deletedClasses.length > 0) {
+        changes.push(`-${deletedClasses.join(' ')}`);
+      }
+      
+      return { element, change: changes.join(', ') };
+    }
+  }
+  
+  // Try to find text content differences
+  const textRegex = />([^<]+)</;
+  const removedText = removed.match(textRegex);
+  const addedText = added.match(textRegex);
+  
+  if (removedText && addedText && removedText[1] !== addedText[1]) {
+    const elementMatch = added.match(/<(\w+)/);
+    return {
+      element: elementMatch ? elementMatch[1] : undefined,
+      change: `"${addedText[1].substring(0, 30)}${addedText[1].length > 30 ? '...' : ''}"`
+    };
+  }
+  
+  // Generic difference - show a summary
+  if (removed !== added) {
+    const elementMatch = added.match(/<(\w+)/);
+    return {
+      element: elementMatch ? elementMatch[1] : undefined,
+      change: 'modified'
+    };
+  }
+  
+  return null;
+}
+
+/**
+ * Truncate a change for display
+ */
+function truncateChange(line: string): string {
+  // Try to extract just the meaningful part
+  const elementMatch = line.match(/<(\w+)/);
+  if (elementMatch) {
+    return `<${elementMatch[1]}...>`;
+  }
+  return line.length > 40 ? line.substring(0, 40) + '...' : line;
+}
+
+export function InlineDiffPreview({
+  action,
+  onAccept,
+  onRevert,
+  liveStatus,
+  isProcessing = false,
+}: InlineDiffPreviewProps) {
+  const [expandedFiles, setExpandedFiles] = useState<Set<string>>(
+    // Expand first file by default
+    new Set(action.files?.slice(0, 1).map((f) => f.path) || [])
+  );
+  // Track which files show full diff vs summary
+  const [showFullDiff, setShowFullDiff] = useState<Set<string>>(new Set());
+
+  const toggleFile = (path: string) => {
+    setExpandedFiles((prev) => {
+      const next = new Set(prev);
+      if (next.has(path)) {
+        next.delete(path);
+      } else {
+        next.add(path);
+      }
+      return next;
+    });
+  };
+
+  const toggleFullDiff = (path: string) => {
+    setShowFullDiff((prev) => {
+      const next = new Set(prev);
+      if (next.has(path)) {
+        next.delete(path);
+      } else {
+        next.add(path);
+      }
+      return next;
+    });
+  };
+
+  // Pre-compute change summaries for all files
+  const fileSummaries = useMemo(() => {
+    const summaries: Record<string, ChangeSummary[]> = {};
+    for (const file of action.files || []) {
+      if (file.diff) {
+        summaries[file.path] = extractChangeSummary(file.diff);
+      }
+    }
+    return summaries;
+  }, [action.files]);
+
+  // Derive loading state from liveStatus or isProcessing
+  const isLoading = isProcessing || liveStatus === "accepting" || liveStatus === "reverting";
+  const isWaitingHMR = liveStatus === "waiting-hmr";
+  const isLive = liveStatus === "reviewing" || action.status === "pending";
+
+  const getStatusColor = () => {
+    switch (action.status) {
+      case "pending":
+        return "border-green-300 dark:border-green-600 bg-green-50 dark:bg-green-900/20";
+      case "accepted":
+        return "border-green-300 dark:border-green-600 bg-green-50 dark:bg-green-900/20";
+      case "reverted":
+        return "border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800/50";
+      case "error":
+        return "border-red-300 dark:border-red-600 bg-red-50 dark:bg-red-900/20";
+      default:
+        return "border-border bg-background";
+    }
+  };
+
+  const getStatusBadge = () => {
+    // Show HMR status first if applicable
+    if (isWaitingHMR) {
+      return (
+        <span className="inline-flex items-center gap-1 px-2 py-0.5 text-[10px] font-medium bg-amber-100 dark:bg-amber-900/40 text-amber-700 dark:text-amber-400 rounded-full">
+          <Loader2 className="h-3 w-3 animate-spin" />
+          Refreshing...
+        </span>
+      );
+    }
+
+    switch (action.status) {
+      case "pending":
+        return (
+          <span className="inline-flex items-center gap-1 px-2 py-0.5 text-[10px] font-medium bg-green-100 dark:bg-green-900/40 text-green-700 dark:text-green-400 rounded-full">
+            <Check className="h-3 w-3" />
+            Changes Live
+          </span>
+        );
+      case "accepted":
+        return (
+          <span className="inline-flex items-center gap-1 px-2 py-0.5 text-[10px] font-medium bg-green-100 dark:bg-green-900/40 text-green-700 dark:text-green-400 rounded-full">
+            <CheckCircle className="h-3 w-3" />
+            Accepted
+          </span>
+        );
+      case "reverted":
+        return (
+          <span className="inline-flex items-center gap-1 px-2 py-0.5 text-[10px] font-medium bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 rounded-full">
+            <XCircle className="h-3 w-3" />
+            Reverted
+          </span>
+        );
+      case "error":
+        return (
+          <span className="inline-flex items-center gap-1 px-2 py-0.5 text-[10px] font-medium bg-red-100 dark:bg-red-900/40 text-red-700 dark:text-red-400 rounded-full">
+            <XCircle className="h-3 w-3" />
+            Error
+          </span>
+        );
+      default:
+        return null;
+    }
+  };
+
+  // Parse diff into lines with proper styling
+  const renderDiff = (diff: string) => {
+    const lines = diff.split("\n");
+    return (
+      <pre className="text-[11px] font-mono leading-relaxed overflow-x-auto">
+        {lines.map((line, i) => {
+          let lineClass = "text-foreground-secondary";
+          let bgClass = "";
+
+          if (line.startsWith("+") && !line.startsWith("+++")) {
+            lineClass = "text-green-700 dark:text-green-400";
+            bgClass = "bg-green-50 dark:bg-green-900/30";
+          } else if (line.startsWith("-") && !line.startsWith("---")) {
+            lineClass = "text-red-700 dark:text-red-400";
+            bgClass = "bg-red-50 dark:bg-red-900/30";
+          } else if (line.startsWith("@@")) {
+            lineClass = "text-blue-600 dark:text-blue-400";
+            bgClass = "bg-blue-50 dark:bg-blue-900/30";
+          }
+
+          return (
+            <div key={i} className={cn("px-2 py-0.5", bgClass)}>
+              <span id="inline-diff-preview-span-line" className={lineClass}>{line}</span>
+            </div>
+          );
+        })}
+      </pre>
+    );
+  };
+
+  return (
+    <div className={cn("rounded-lg border overflow-hidden", getStatusColor())}>
+      {/* Header */}
+      <div className="flex items-center justify-between px-3 py-2 border-b border-inherit bg-background/50">
+        <div className="flex items-center gap-2">
+          <FileCode className="h-4 w-4 text-foreground-secondary" />
+          <span className="text-xs font-medium text-foreground">
+            {action.files?.length || 0} file{(action.files?.length || 0) !== 1 ? "s" : ""} changed
+          </span>
+          {getStatusBadge()}
+        </div>
+      </div>
+
+      {/* Info Banner - Show when changes are live */}
+      {action.status === "pending" && (
+        <div className="flex items-start justify-between gap-2 px-3 py-2 bg-blue-50 dark:bg-blue-900/20 border-b border-inherit">
+          <div className="flex items-start gap-2">
+            <Info className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0" />
+            <span className="text-[11px] text-blue-700 dark:text-blue-300">
+              <strong>Changes saved!</strong> If you don&apos;t see them, click Refresh.
+            </span>
+          </div>
+          <button
+            onClick={handleRefreshPage}
+            className="flex items-center gap-1 px-2 py-1 text-[10px] font-medium text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-blue-800/50 hover:bg-blue-200 dark:hover:bg-blue-700/50 rounded transition-colors flex-shrink-0"
+          >
+            <RefreshCw className="h-3 w-3" />
+            Refresh
+          </button>
+        </div>
+      )}
+
+      {/* File List */}
+      <div className="divide-y divide-inherit">
+        {action.files?.map((file) => {
+          const isExpanded = expandedFiles.has(file.path);
+          const isShowingFullDiff = showFullDiff.has(file.path);
+          const fileName = file.path.split("/").pop() || file.path;
+          const summary = fileSummaries[file.path] || [];
+
+          return (
+            <div key={file.path}>
+              {/* File Header */}
+              <button
+                onClick={() => toggleFile(file.path)}
+                className="w-full flex items-center gap-2 px-3 py-2 text-left hover:bg-background/50 transition-colors"
+              >
+                {isExpanded ? (
+                  <ChevronDown className="h-3.5 w-3.5 text-foreground-muted" />
+                ) : (
+                  <ChevronRight className="h-3.5 w-3.5 text-foreground-muted" />
+                )}
+                <span className="text-[11px] font-mono text-foreground truncate">
+                  {fileName}
+                </span>
+                <span className="text-[10px] text-foreground-muted truncate flex-1">
+                  {file.path}
+                </span>
+              </button>
+
+              {/* Change Summary (default view) */}
+              {isExpanded && file.diff && !isShowingFullDiff && (
+                <div className="bg-background border-t border-inherit px-3 py-2 space-y-1">
+                  {summary.length > 0 ? (
+                    <>
+                      {summary.map((change, i) => (
+                        <div
+                          key={i}
+                          className="flex items-center gap-2 text-[11px]"
+                          title={change.fullLine}
+                        >
+                          {change.type === 'added' || change.type === 'modified' ? (
+                            <Plus className="h-3 w-3 text-green-600 dark:text-green-400 flex-shrink-0" />
+                          ) : (
+                            <Minus className="h-3 w-3 text-red-600 dark:text-red-400 flex-shrink-0" />
+                          )}
+                          {change.element && (
+                            <span className="font-mono text-blue-600 dark:text-blue-400 flex-shrink-0">
+                              {change.element}:
+                            </span>
+                          )}
+                          <span className={cn(
+                            "font-mono",
+                            change.type === 'removed' 
+                              ? "text-red-600 dark:text-red-400" 
+                              : "text-green-600 dark:text-green-400"
+                          )}>
+                            {change.change}
+                          </span>
+                        </div>
+                      ))}
+                      {/* Toggle to show full diff */}
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          toggleFullDiff(file.path);
+                        }}
+                        className="flex items-center gap-1 mt-2 text-[10px] text-foreground-muted hover:text-foreground transition-colors"
+                      >
+                        <Code className="h-3 w-3" />
+                        Show full diff
+                      </button>
+                    </>
+                  ) : (
+                    <span className="text-[11px] text-foreground-muted">No significant changes detected</span>
+                  )}
+                </div>
+              )}
+
+              {/* Full Diff Content (toggle view) */}
+              {isExpanded && file.diff && isShowingFullDiff && (
+                <div className="bg-background border-t border-inherit">
+                  <div className="overflow-x-auto">
+                    {renderDiff(file.diff)}
+                  </div>
+                  {/* Toggle back to summary */}
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      toggleFullDiff(file.path);
+                    }}
+                    className="flex items-center gap-1 px-3 py-2 text-[10px] text-foreground-muted hover:text-foreground transition-colors border-t border-inherit w-full"
+                  >
+                    <ChevronRight className="h-3 w-3" />
+                    Show summary
+                  </button>
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Warning about navigation - only show for pending */}
+      {action.status === "pending" && (
+        <div className="flex items-start gap-2 px-3 py-2 bg-amber-50 dark:bg-amber-900/20 border-t border-inherit">
+          <AlertTriangle className="h-3.5 w-3.5 text-amber-600 dark:text-amber-400 mt-0.5 flex-shrink-0" />
+          <span className="text-[11px] text-amber-700 dark:text-amber-300">
+            Navigating away will automatically revert changes. Make sure to accept or revert first.
+          </span>
+        </div>
+      )}
+
+      {/* Action Buttons - only show for pending */}
+      {action.status === "pending" && (
+        <div className="flex gap-2 px-3 py-2 border-t border-inherit bg-background/50">
+          <button
+            onClick={onAccept}
+            disabled={isLoading}
+            className={cn(
+              "flex-1 inline-flex items-center justify-center gap-1.5 px-3 py-2 text-[11px] font-medium rounded-md transition-colors",
+              "bg-green-600 dark:bg-green-700 text-white hover:bg-green-700 dark:hover:bg-green-600",
+              "disabled:opacity-50 disabled:cursor-not-allowed"
+            )}
+          >
+            {liveStatus === "accepting" ? (
+              <>
+                <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                Accepting...
+              </>
+            ) : (
+              <>
+                <Check className="h-3.5 w-3.5" />
+                Keep Changes
+              </>
+            )}
+          </button>
+          <button
+            onClick={onRevert}
+            disabled={isLoading}
+            className={cn(
+              "flex-1 inline-flex items-center justify-center gap-1.5 px-3 py-2 text-[11px] font-medium rounded-md transition-colors",
+              "bg-background border border-border text-foreground-secondary hover:bg-secondary",
+              "disabled:opacity-50 disabled:cursor-not-allowed"
+            )}
+          >
+            {liveStatus === "reverting" ? (
+              <>
+                <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                Reverting...
+              </>
+            ) : (
+              <>
+                <RotateCcw className="h-3.5 w-3.5" />
+                Revert
+              </>
+            )}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+