sonance-brand-mcp 1.3.110 → 1.3.112

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

@@ -36,14 +36,14 @@ function FileModificationCard({
           <ChevronRight className="h-3.5 w-3.5 text-gray-400 flex-shrink-0" />
         )}
         <FileCode className="h-3.5 w-3.5 text-green-500 flex-shrink-0" />
-        <span className="text-xs font-mono text-gray-700 truncate flex-1">
+        <span id="file-modification-card-span-modificationfilepath" className="text-xs font-mono text-gray-700 truncate flex-1">
           {modification.filePath}
         </span>
       </button>
 
       {/* Explanation */}
       <div className="px-2 pb-2">
-        <p className="text-[10px] text-gray-500">{modification.explanation}</p>
+        <p id="file-modification-card-p-modificationexplanat" className="text-[10px] text-gray-500">{modification.explanation}</p>
       </div>
 
       {/* Expanded Diff */}
@@ -78,7 +78,7 @@ function FileModificationCard({
 function HMRStatusBadge({ status }: { status: ApplyFirstStatus }) {
   if (status === "waiting-hmr") {
     return (
-      <span className="flex items-center gap-1 text-[10px] px-1.5 py-0.5 rounded bg-amber-100 text-amber-700">
+      <span id="h-m-r-status-badge-span" className="flex items-center gap-1 text-[10px] px-1.5 py-0.5 rounded bg-amber-100 text-amber-700">
         <Loader2 className="h-3 w-3 animate-spin" />
         Refreshing...
       </span>
@@ -87,7 +87,7 @@ function HMRStatusBadge({ status }: { status: ApplyFirstStatus }) {
 
   if (status === "reviewing") {
     return (
-      <span className="flex items-center gap-1 text-[10px] px-1.5 py-0.5 rounded bg-green-100 text-green-700">
+      <span id="h-m-r-status-badge-span" className="flex items-center gap-1 text-[10px] px-1.5 py-0.5 rounded bg-green-100 text-green-700">
         <Check className="h-3 w-3" />
         Changes Live
       </span>
@@ -142,10 +142,10 @@ export function ApplyFirstPreview({
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-2">
           <Zap className={cn("h-4 w-4", isPreviewMode ? "text-blue-600" : "text-green-600")} />
-          <span className="text-xs font-semibold text-gray-900">
+          <span id="apply-first-preview-span-ispreviewmode-propos" className="text-xs font-semibold text-gray-900">
             {isPreviewMode ? "Proposed Changes" : "Changes Applied"}
           </span>
-          <span className={cn(
+          <span id="apply-first-preview-span-filecount-filefileco" className={cn(
             "text-[10px] px-1.5 py-0.5 rounded font-medium",
             isPreviewMode 
               ? "bg-blue-200 text-blue-700" 
@@ -163,7 +163,7 @@ export function ApplyFirstPreview({
       {isStaleSession ? (
         <div className="flex items-start gap-2 p-2 rounded bg-amber-50 border border-amber-200">
           <AlertTriangle className="h-3.5 w-3.5 text-amber-600 mt-0.5 flex-shrink-0" />
-          <span className="text-xs text-amber-700">
+          <span id="apply-first-preview-span" className="text-xs text-amber-700">
             <strong>Stale session detected.</strong> The backup files may no longer exist.
             Use &quot;Force Clear&quot; to dismiss this panel.
           </span>
@@ -171,7 +171,7 @@ export function ApplyFirstPreview({
       ) : isPreviewMode ? (
         <div className="flex items-start gap-2 p-2 rounded bg-blue-50 border border-blue-200">
           <Info className="h-3.5 w-3.5 text-blue-600 mt-0.5 flex-shrink-0" />
-          <span className="text-xs text-blue-700">
+          <span id="apply-first-preview-span" className="text-xs text-blue-700">
             <strong>Review the changes below.</strong> Click Accept to apply them to your files,
             or Reject to discard.
           </span>
@@ -179,7 +179,7 @@ export function ApplyFirstPreview({
       ) : (
         <div className="flex items-start gap-2 p-2 rounded bg-blue-50 border border-blue-200">
           <Info className="h-3.5 w-3.5 text-blue-600 mt-0.5 flex-shrink-0" />
-          <span className="text-xs text-blue-700">
+          <span id="apply-first-preview-span" className="text-xs text-blue-700">
             <strong>Changes are live!</strong> Scroll around to see the actual result.
             Your original files are safely backed up.
           </span>
@@ -202,7 +202,7 @@ export function ApplyFirstPreview({
       {!isPreviewMode && (
         <div className="flex items-start gap-2 p-2 rounded bg-amber-50 border border-amber-200">
           <AlertTriangle className="h-3.5 w-3.5 text-amber-600 mt-0.5 flex-shrink-0" />
-          <span className="text-xs text-amber-700">
+          <span id="apply-first-preview-span-navigating-away-will" className="text-xs text-amber-700">
             Navigating away will automatically revert changes. Make sure to accept or revert first.
           </span>
         </div>

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

@@ -0,0 +1,145 @@
+"use client";
+
+import React, { useRef, useEffect } from "react";
+import { User, Bot, AlertCircle, CheckCircle, RotateCcw } from "lucide-react";
+import { cn } from "../../../lib/utils";
+import { ChatMessage, ApplyFirstStatus } from "../types";
+import { InlineDiffPreview } from "./InlineDiffPreview";
+
+export interface ChatHistoryProps {
+  messages: ChatMessage[];
+  onAcceptChanges?: (messageId: string) => void;
+  onRevertChanges?: (messageId: string) => void;
+  visionMode?: boolean;
+  // Live status for the most recent action
+  liveStatus?: ApplyFirstStatus;
+}
+
+export function ChatHistory({
+  messages,
+  onAcceptChanges,
+  onRevertChanges,
+  visionMode = false,
+  liveStatus,
+}: ChatHistoryProps) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const bottomRef = useRef<HTMLDivElement>(null);
+
+  // Auto-scroll to bottom when new messages arrive
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+
+  // Format timestamp
+  const formatTime = (date: Date) => {
+    return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+  };
+
+  if (messages.length === 0) {
+    return null; // Empty state is handled by parent
+  }
+
+  return (
+    <div
+      ref={scrollRef}
+      className="flex-1 overflow-y-auto px-3 py-4 space-y-4 bg-background"
+      style={{ overscrollBehavior: "contain" }}
+    >
+      {messages.map((message, index) => (
+        <div
+          key={message.id}
+          className={cn(
+            "flex gap-3 animate-in fade-in-0 slide-in-from-bottom-2",
+            message.role === "system" && "justify-center"
+          )}
+          style={{ animationDelay: `${Math.min(index * 30, 150)}ms` }}
+        >
+          {/* Avatar */}
+          {message.role !== "system" && (
+            <div
+              className={cn(
+                "flex-shrink-0 w-7 h-7 rounded-full flex items-center justify-center",
+                message.role === "user"
+                  ? "bg-gradient-to-br from-[#00A3E1] to-[#0090c8]"
+                  : "bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-600 dark:to-gray-700"
+              )}
+            >
+              {message.role === "user" ? (
+                <User className="h-3.5 w-3.5 text-white" />
+              ) : (
+                <Bot className="h-3.5 w-3.5 text-gray-600 dark:text-gray-300" />
+              )}
+            </div>
+          )}
+
+          {/* Message Content */}
+          <div className={cn("flex-1 min-w-0", message.role === "system" && "text-center")}>
+            {/* Role Label + Timestamp */}
+            {message.role !== "system" && (
+              <div className="flex items-center gap-2 mb-1">
+                <span id="span-messagerole-user-you" className="text-[11px] font-semibold text-foreground">
+                  {message.role === "user" ? "You" : "AI Assistant"}
+                </span>
+                <span id="span-formattimemessagetim" className="text-[10px] text-foreground-muted">
+                  {formatTime(message.timestamp)}
+                </span>
+              </div>
+            )}
+
+            {/* Message Text */}
+            <div
+              className={cn(
+                "text-sm leading-relaxed",
+                message.role === "user" && "text-foreground",
+                message.role === "assistant" && "text-foreground-secondary",
+                message.role === "system" && "text-xs text-foreground-muted italic"
+              )}
+            >
+              <p id="p-messagecontent" className="whitespace-pre-wrap">{message.content}</p>
+            </div>
+
+            {/* Inline Diff Preview for actions */}
+            {message.action && message.action.files && message.action.files.length > 0 && (
+              <div className="mt-3">
+                <InlineDiffPreview
+                  action={message.action}
+                  onAccept={() => onAcceptChanges?.(message.id)}
+                  onRevert={() => onRevertChanges?.(message.id)}
+                  liveStatus={message.action.status === "pending" ? liveStatus : undefined}
+                />
+              </div>
+            )}
+
+            {/* Status badge for actions without files */}
+            {message.action && (!message.action.files || message.action.files.length === 0) && (
+              <div className="mt-2">
+                {message.action.status === "accepted" && (
+                  <div className="inline-flex items-center gap-1.5 px-2 py-1 bg-green-50 dark:bg-green-900/30 text-green-700 dark:text-green-400 text-xs rounded-md">
+                    <CheckCircle className="h-3 w-3" />
+                    <span id="span-changes-accepted">Changes accepted</span>
+                  </div>
+                )}
+                {message.action.status === "reverted" && (
+                  <div className="inline-flex items-center gap-1.5 px-2 py-1 bg-amber-50 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 text-xs rounded-md">
+                    <RotateCcw className="h-3 w-3" />
+                    <span id="span-changes-reverted">Changes reverted</span>
+                  </div>
+                )}
+                {message.action.status === "error" && (
+                  <div className="inline-flex items-center gap-1.5 px-2 py-1 bg-red-50 dark:bg-red-900/30 text-red-700 dark:text-red-400 text-xs rounded-md">
+                    <AlertCircle className="h-3 w-3" />
+                    <span id="span-error-occurred">Error occurred</span>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      ))}
+
+      {/* Scroll anchor */}
+      <div ref={bottomRef} />
+    </div>
+  );
+}
+