sonance-brand-mcp 1.3.110 → 1.3.111

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 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/InlineDiffPreview.tsx

@@ -0,0 +1,204 @@
+"use client";
+
+import React, { useState } from "react";
+import {
+  ChevronDown,
+  ChevronRight,
+  Check,
+  RotateCcw,
+  FileCode,
+  Clock,
+  CheckCircle,
+  XCircle,
+} from "lucide-react";
+import { cn } from "../../../lib/utils";
+import { ChatMessageAction, ChatFileChange } from "../types";
+
+export interface InlineDiffPreviewProps {
+  action: ChatMessageAction;
+  onAccept?: () => void;
+  onRevert?: () => void;
+}
+
+export function InlineDiffPreview({
+  action,
+  onAccept,
+  onRevert,
+}: InlineDiffPreviewProps) {
+  const [expandedFiles, setExpandedFiles] = useState<Set<string>>(
+    // Expand first file by default
+    new Set(action.files?.slice(0, 1).map((f) => f.path) || [])
+  );
+
+  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 getStatusColor = () => {
+    switch (action.status) {
+      case "pending":
+        return "border-amber-300 dark:border-amber-600 bg-amber-50 dark:bg-amber-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 = () => {
+    switch (action.status) {
+      case "pending":
+        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">
+            <Clock className="h-3 w-3" />
+            Pending Review
+          </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 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>
+
+        {/* Action Buttons - only show for pending */}
+        {action.status === "pending" && (
+          <div className="flex items-center gap-2">
+            <button
+              onClick={onRevert}
+              className="inline-flex items-center gap-1 px-2.5 py-1 text-[11px] font-medium text-foreground-secondary bg-background border border-border rounded-md hover:bg-secondary transition-colors"
+            >
+              <RotateCcw className="h-3 w-3" />
+              Revert
+            </button>
+            <button
+              onClick={onAccept}
+              className="inline-flex items-center gap-1 px-2.5 py-1 text-[11px] font-medium text-white bg-green-600 dark:bg-green-700 rounded-md hover:bg-green-700 dark:hover:bg-green-600 transition-colors"
+            >
+              <Check className="h-3 w-3" />
+              Accept
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* File List */}
+      <div className="divide-y divide-inherit">
+        {action.files?.map((file) => {
+          const isExpanded = expandedFiles.has(file.path);
+          const fileName = file.path.split("/").pop() || 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">
+                  {file.path}
+                </span>
+              </button>
+
+              {/* Diff Content */}
+              {isExpanded && file.diff && (
+                <div className="bg-background border-t border-inherit max-h-[200px] overflow-y-auto">
+                  {renderDiff(file.diff)}
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Explanation */}
+      {action.explanation && (
+        <div className="px-3 py-2 border-t border-inherit bg-background/30">
+          <p className="text-[11px] text-foreground-secondary italic">{action.explanation}</p>
+        </div>
+      )}
+    </div>
+  );
+}
+

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

@@ -34,11 +34,11 @@ export interface InspectorOverlayProps {
   changedElements?: VisionFocusedElement[];
 }
 
-// Color config for different element types
+// Color config for different element types - color-coded for unified view
 const inspectorColors: Record<DetectedElementType, { border: string; bg: string; selectedBorder: string; selectedBg: string }> = {
-  component: { border: "#00A3E1", bg: "#00A3E1", selectedBorder: "#00A3E1", selectedBg: "#00A3E1" }, // Sonance blue
-  logo: { border: "#FC4C02", bg: "#FC4C02", selectedBorder: "#C02B0A", selectedBg: "#C02B0A" },       // IPORT orange / Blaze red for selected
-  text: { border: "#8B5CF6", bg: "#8B5CF6", selectedBorder: "#7C3AED", selectedBg: "#7C3AED" },       // Purple for text
+  component: { border: "#8B5CF6", bg: "#8B5CF6", selectedBorder: "#7C3AED", selectedBg: "#7C3AED" }, // Purple for components
+  logo: { border: "#3B82F6", bg: "#3B82F6", selectedBorder: "#2563EB", selectedBg: "#2563EB" },       // Blue for images/logos
+  text: { border: "#F59E0B", bg: "#F59E0B", selectedBorder: "#D97706", selectedBg: "#D97706" },       // Amber for text
 };
 
 // Preview mode colors - green to indicate pending changes
@@ -198,15 +198,18 @@ export function InspectorOverlay({
         // Use appropriate colors based on mode:
         // - Changed elements (green) - highest priority (Apply-First mode)
         // - Preview mode (green) takes priority
-        // - Vision mode (purple) for vision-focused elements
+        // - Vision mode uses element-type colors (color-coded: purple/blue/amber)
         // - Otherwise use type-based colors
+        const typeColors = inspectorColors[el.type];
         const colors = isChangedElement
           ? previewColors // Green for changed elements
           : previewMode
             ? previewColors
             : visionMode
-              ? (isVisionFocused ? visionColors : { ...visionColors, border: "#8B5CF680", bg: "#8B5CF680" })
-              : inspectorColors[el.type];
+              ? (isVisionFocused 
+                  ? { ...typeColors, selectedBorder: typeColors.selectedBorder, selectedBg: typeColors.selectedBg }
+                  : { ...typeColors, border: typeColors.border + "80", bg: typeColors.bg + "80" })
+              : typeColors;
 
         // Check if this element matches the currently selected component type
         const elementType = el.name?.toLowerCase() || "";
@@ -276,13 +279,13 @@ export function InspectorOverlay({
                 borderColor: (previewMode && isMatchingType) || isChangedElement ? "transparent" : borderColor,
                 borderWidth: (previewMode && isMatchingType) || isChangedElement ? 0 : undefined,
                 // Preview mode / Changed elements: outer glow only, no border overlay
-                // Vision mode: show glow for focused elements
+                // Vision mode: show glow for focused elements with type-specific colors
                 boxShadow: isChangedElement
                   ? `0 0 0 3px ${previewColors.border}, 0 0 20px 8px ${previewColors.border}80`
                   : previewMode && isMatchingType
                     ? `0 0 0 3px ${previewColors.border}, 0 0 20px 8px ${previewColors.border}80`
                     : visionMode && isVisionFocused
-                      ? `0 0 0 3px ${visionColors.border}, 0 0 15px 5px ${visionColors.border}60`
+                      ? `0 0 0 3px ${typeColors.border}, 0 0 15px 5px ${typeColors.border}60`
                       : isSelected
                         ? `0 0 0 2px ${borderColor}40`
                         : undefined,