sonance-brand-mcp 1.3.109 → 1.3.111

package/dist/assets/dev-tools/panels/ComponentsPanel.tsx

@@ -1,15 +1,17 @@
 "use client";
 
 import React, { useState, useMemo, useCallback, useEffect } from "react";
-import { Box, X, RotateCcw } from "lucide-react";
+import { Box, X, RotateCcw, MousePointer, Sparkles, Info, MessageCircle } from "lucide-react";
 import { cn } from "../../../lib/utils";
-import { DetectedElement, AnalysisResult, ComponentStyle, PendingEdit, AIEditResult, ComponentStyleOverride, VisionFocusedElement, VisionPendingEdit, ApplyFirstSession, ApplyFirstStatus } from "../types";
+import { DetectedElement, AnalysisResult, ComponentStyle, PendingEdit, AIEditResult, ComponentStyleOverride, VisionFocusedElement, VisionPendingEdit, ApplyFirstSession, ApplyFirstStatus, ElementFilters } from "../types";
 import { COMPONENT_CONFIG_MAP, getVisibleSections } from "../constants";
 import { componentSnippets, ThemeConfig } from "../../../lib/brand-system";
 import { ChatInterface } from "../components/ChatInterface";
 import { DiffPreview } from "../components/DiffPreview";
 import { VisionDiffPreview } from "../components/VisionDiffPreview";
 import { ApplyFirstPreview } from "../components/ApplyFirstPreview";
+import { PropertiesPanel, PropertyEdits } from "../components/PropertiesPanel";
+import { useElementFromCoordinates } from "../hooks/useComputedStyles";
 
 type ComponentsViewMode = "visual" | "inspector";
 
@@ -58,6 +60,12 @@ export interface ComponentsPanelProps {
   onApplyFirstRevert?: () => void;
   onApplyFirstForceClear?: () => void;
   onApplyPreview?: () => void; // Apply previewed modifications to files
+  // Unified element filters (new)
+  elementFilters?: ElementFilters;
+  selectedLogoId?: string | null;
+  onSelectLogo?: (logoId: string | null) => void;
+  selectedTextId?: string | null;
+  onSelectText?: (textId: string | null) => void;
 }
 
 export function ComponentsPanel({ 
@@ -99,6 +107,12 @@ export function ComponentsPanel({
   onApplyFirstRevert,
   onApplyFirstForceClear,
   onApplyPreview,
+  // Unified element filters
+  elementFilters,
+  selectedLogoId,
+  onSelectLogo,
+  selectedTextId,
+  onSelectText,
 }: ComponentsPanelProps) {
   // Auto-activate inspector when entering this tab
   useEffect(() => {
@@ -404,45 +418,191 @@ export function ComponentsPanel({
     }
   };
 
+  // Handle property changes from PropertiesPanel (AI-assisted save)
+  const handlePropertySave = useCallback(async (edits: PropertyEdits, element: VisionFocusedElement) => {
+    // Build a natural language description of the changes
+    const changeDescriptions: string[] = [];
+
+    if (edits.width) changeDescriptions.push(`width to ${edits.width}`);
+    if (edits.height) changeDescriptions.push(`height to ${edits.height}`);
+    if (edits.opacity) changeDescriptions.push(`opacity to ${edits.opacity}%`);
+    if (edits.borderRadius) changeDescriptions.push(`border-radius to ${edits.borderRadius}`);
+    if (edits.fontSize) changeDescriptions.push(`font-size to ${edits.fontSize}`);
+    if (edits.fontWeight) changeDescriptions.push(`font-weight to ${edits.fontWeight}`);
+    if (edits.lineHeight) changeDescriptions.push(`line-height to ${edits.lineHeight}`);
+    if (edits.letterSpacing) changeDescriptions.push(`letter-spacing to ${edits.letterSpacing}`);
+    if (edits.color) changeDescriptions.push(`text color to ${edits.color}`);
+    if (edits.backgroundColor) changeDescriptions.push(`background color to ${edits.backgroundColor}`);
+    if (edits.padding) changeDescriptions.push(`padding to ${edits.padding}`);
+    if (edits.margin) changeDescriptions.push(`margin to ${edits.margin}`);
+    if (edits.gap) changeDescriptions.push(`gap to ${edits.gap}`);
+
+    if (changeDescriptions.length === 0) return;
+
+    const prompt = `Change the ${changeDescriptions.join(", ")} for this ${element.name} element.`;
+
+    try {
+      const response = await fetch("/api/sonance-vision-apply", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          action: "preview",
+          focusedElements: [element],
+          userPrompt: prompt,
+          propertyEdits: edits,
+        }),
+      });
+
+      const result = await response.json();
+
+      if (result.success && onApplyFirstComplete) {
+        // Trigger the apply-first preview flow
+        onApplyFirstComplete({
+          id: `property-edit-${Date.now()}`,
+          userPrompt: prompt,
+          focusedElements: [element],
+          originalCode: result.originalCode || "",
+          modifiedCode: result.modifiedCode || "",
+          filePath: result.filePath || "",
+          diff: result.diff || "",
+          backupId: result.backupId,
+          createdAt: new Date(),
+        });
+      }
+    } catch (error) {
+      console.error("Failed to save property changes:", error);
+    }
+  }, [onApplyFirstComplete]);
+
+  // Get the first focused element for properties panel
+  const primaryFocusedElement = visionFocusedElements.length > 0 ? visionFocusedElements[0] : null;
+  const focusedCoords = primaryFocusedElement?.coordinates || null;
+  const computedStyles = useElementFromCoordinates(focusedCoords);
+
+  // Determine if we should show the properties panel (Vision mode with focused elements)
+  const showPropertiesPanel = visionMode && visionFocusedElements.length > 0;
+
+  // Panel tab state - "details" or "chat"
+  type PanelTab = "details" | "chat";
+  const [panelTab, setPanelTab] = useState<PanelTab>("details");
+
+  // Auto-switch to details when an element is focused
+  useEffect(() => {
+    if (showPropertiesPanel) {
+      setPanelTab("details");
+    }
+  }, [showPropertiesPanel]);
+
   return (
-    <div className="space-y-4">
-      {/* Selected Component State */}
-      {selectedComponentType !== "all" && (
-        <>
-          {/* Selected Component Header */}
-          <div className="p-3 rounded border border-[#00A3E1] bg-[#00A3E1]/5">
+    <div className="flex flex-col h-full">
+      {/* ===== TAB BAR - Cursor-style underline tabs ===== */}
+      <div className="flex items-center gap-1 px-3 py-1.5 bg-transparent border-b border-gray-200/50 dark:border-white/10 flex-shrink-0">
+        <button
+          onClick={() => setPanelTab("details")}
+          className={cn(
+            "relative flex items-center gap-1.5 px-2.5 py-1.5 text-[11px] font-medium transition-all duration-150 bg-transparent",
+            panelTab === "details"
+              ? "text-gray-900 dark:text-white after:absolute after:bottom-0 after:left-1 after:right-1 after:h-[2px] after:bg-[#00A3E1] after:rounded-full"
+              : "text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100/30 dark:hover:bg-white/10"
+          )}
+        >
+          <Info className="h-3 w-3" />
+          <span>Details</span>
+        </button>
+        <button
+          onClick={() => setPanelTab("chat")}
+          className={cn(
+            "relative flex items-center gap-1.5 px-2.5 py-1.5 text-[11px] font-medium transition-all duration-150 bg-transparent",
+            panelTab === "chat"
+              ? "text-gray-900 dark:text-white after:absolute after:bottom-0 after:left-1 after:right-1 after:h-[2px] after:bg-[#00A3E1] after:rounded-full"
+              : "text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100/30 dark:hover:bg-white/10"
+          )}
+        >
+          <MessageCircle className="h-3 w-3" />
+          <span>AI Chat</span>
+          {visionMode && visionFocusedElements.length > 0 && (
+            <span className="ml-0.5 min-w-[16px] h-4 px-1 flex items-center justify-center text-[9px] font-semibold bg-purple-500/20 text-purple-600 dark:text-purple-400 rounded-full">
+              {visionFocusedElements.length}
+            </span>
+          )}
+        </button>
+      </div>
+
+      {/* ===== TAB CONTENT ===== */}
+      <div className="flex-1 overflow-y-auto min-h-0 bg-background">
+        {/* DETAILS TAB */}
+        {panelTab === "details" && (
+          <>
+            {/* Vision Mode: Properties Inspector */}
+            {showPropertiesPanel && (
+              <div className="border-b border-border">
+                <PropertiesPanel
+                  element={primaryFocusedElement}
+                  styles={computedStyles}
+                  onSaveChanges={handlePropertySave}
+                />
+                {/* Multiple Selections Indicator */}
+                {visionFocusedElements.length > 1 && (
+                  <div className="px-2 py-1.5 bg-purple-50 dark:bg-purple-900/30 border-t border-purple-100 dark:border-purple-800">
+                    <p className="text-[10px] text-purple-600 dark:text-purple-400 font-medium">
+                      +{visionFocusedElements.length - 1} more selected
+                    </p>
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* Empty State for Vision Mode */}
+            {visionMode && visionFocusedElements.length === 0 && (
+              <div className="flex flex-col items-center justify-center py-6 text-center px-3">
+                <div className="w-10 h-10 rounded-full bg-purple-100 dark:bg-purple-900/40 flex items-center justify-center mb-2">
+                  <MousePointer className="h-5 w-5 text-purple-500 dark:text-purple-400" />
+                </div>
+                <p className="text-[11px] font-medium text-foreground mb-1">
+                  Vision Mode Active
+                </p>
+                <p className="text-[10px] text-foreground-secondary">
+                  Click elements on the page to inspect and select them for AI-powered editing.
+                </p>
+              </div>
+            )}
+
+        {/* Non-Vision Mode: Component Selection Interface */}
+        {!visionMode && selectedComponentType !== "all" && (
+          <div className="space-y-3 p-2">
+            {/* Selected Component Header - Compact */}
+            <div className="p-2 rounded border border-[#00A3E1] bg-[#00A3E1]/5">
             <div className="flex items-center justify-between">
-              <div className="flex items-center gap-2">
-                <Box className="h-4 w-4 text-[#00A3E1]" />
+                <div className="flex items-center gap-1.5">
+                  <Box className="h-3.5 w-3.5 text-[#00A3E1]" />
                 <div className="flex flex-col">
-                  <span id="brand-panel-span-selectedcomponentnam" className="text-sm font-semibold text-gray-900">{selectedComponentName}</span>
+                    <span id="brand-panel-span-selectedcomponentnam" className="text-[11px] font-semibold text-foreground">{selectedComponentName}</span>
                   {selectedVariantId && (
-                    <span id="brand-panel-span-variant-selectedvari" className="text-[10px] text-gray-500 font-mono">
-                      Variant: {selectedVariantId.substring(0, 6)}
+                      <span id="brand-panel-span-variant-selectedvari" className="text-[9px] text-foreground-secondary font-mono">
+                        #{selectedVariantId.substring(0, 6)}
                     </span>
                   )}
                 </div>
               </div>
               <button
                 onClick={() => onSelectComponentType("all")}
-                className="text-xs text-gray-400 hover:text-gray-600"
+                  className="p-1 text-foreground-muted hover:text-foreground hover:bg-secondary rounded"
               >
-                <X className="h-4 w-4" />
+                  <X className="h-3.5 w-3.5" />
               </button>
             </div>
             
-            {/* Stats */}
-            <div className="flex items-center gap-4 mt-2 text-xs text-gray-500">
-              <span id="brand-panel-span"><strong className="text-gray-700">{pageCount}</strong> on this page</span>
+              {/* Stats - Compact */}
+              <div className="flex items-center gap-3 mt-1.5 text-[10px] text-foreground-secondary">
+                <span id="brand-panel-span"><strong className="text-foreground">{pageCount}</strong> on page</span>
               {appCount > 0 && (
-                <span id="brand-panel-span"><strong className="text-gray-700">{appCount}</strong> in entire app</span>
+                  <span id="brand-panel-span"><strong className="text-foreground">{appCount}</strong> in app</span>
               )}
             </div>
           </div>
 
-          {/* Variants List - show all unique variants */}
+            {/* Variants Grid - Compact */}
           {(() => {
-            // Get unique variants for this component type
             const variantMap = new Map<string, { count: number; variantId: string }>();
             pageInstances.forEach((el) => {
               if (el.variantId) {
@@ -459,32 +619,32 @@ export function ComponentsPanel({
             
             if (variants.length > 1) {
               return (
-                <div className="space-y-2">
+                  <div className="space-y-1.5">
                   <div className="flex items-center justify-between">
-                    <span className="text-xs font-medium text-gray-600">Variants ({variants.length})</span>
+                      <span className="text-[10px] font-medium text-foreground-secondary">Variants</span>
                     {selectedVariantId && (
                       <button
                         onClick={() => onSelectVariant(null)}
-                        className="text-xs text-[#00A3E1] hover:underline"
+                          className="text-[10px] text-[#00A3E1] hover:underline"
                       >
-                        Clear selection
+                          Clear
                       </button>
                     )}
                   </div>
-                  <div className="grid grid-cols-2 gap-2">
+                    <div className="flex flex-wrap gap-1">
                     {variants.map(({ variantId, count }) => (
                       <button
                         key={variantId}
                         onClick={() => onSelectVariant(selectedVariantId === variantId ? null : variantId)}
                         className={cn(
-                          "p-2 rounded border text-left transition-colors",
+                            "px-1.5 py-1 rounded text-[9px] font-mono transition-colors",
                           selectedVariantId === variantId
-                            ? "border-[#00A3E1] bg-[#00A3E1]/10"
-                            : "border-gray-200 hover:border-gray-300 bg-white"
+                              ? "bg-[#00A3E1] text-white"
+                              : "bg-secondary text-foreground-secondary hover:bg-secondary-hover"
                         )}
                       >
-                        <span className="text-xs font-mono text-gray-700">#{variantId.substring(0, 6)}</span>
-                        <span className="text-[10px] text-gray-400 ml-1">({count})</span>
+                          #{variantId.substring(0, 4)}
+                          <span className="opacity-60 ml-0.5">({count})</span>
                       </button>
                     ))}
                   </div>
@@ -495,137 +655,127 @@ export function ComponentsPanel({
             return null;
           })()}
 
-          {/* No instances on page */}
+            {/* No instances warning */}
           {pageInstances.length === 0 && (
-            <div className="p-2 rounded border border-amber-200 bg-amber-50 text-center">
-              <span id="brand-panel-span-no-instances-on-this" className="text-xs text-amber-700">
-                No instances on this page. Navigate to a page with this component.
+              <div className="p-1.5 rounded border border-amber-200 bg-amber-50 text-center">
+                <span id="brand-panel-span-no-instances-on-this" className="text-[10px] text-amber-700">
+                  No instances on this page
               </span>
             </div>
           )}
 
-          {/* Edit Scope Toggle - only show when a variant is selected */}
+            {/* Edit Scope Toggle - Compact */}
           {selectedVariantId && (
-            <div className="flex items-center gap-2 p-2 bg-gray-50 rounded border border-gray-200">
-              <span className="text-xs text-gray-500">Apply changes to:</span>
-              <div className="flex gap-1 flex-1">
+              <div className="flex items-center gap-1 p-1.5 bg-secondary/50 rounded border border-border">
+                <span className="text-[9px] text-foreground-secondary">Scope:</span>
+                <div className="flex gap-0.5 flex-1">
                 <button
                   onClick={() => setEditScope("component")}
                   className={cn(
-                    "flex-1 px-2 py-1.5 text-xs font-medium rounded transition-colors",
+                      "flex-1 px-1.5 py-1 text-[9px] font-medium rounded transition-colors",
                     editScope === "component"
                       ? "bg-[#00A3E1] text-white"
-                      : "bg-white text-gray-600 border border-gray-200 hover:bg-gray-100"
+                        : "text-foreground-secondary hover:bg-secondary"
                   )}
                 >
-                  All {selectedComponentName}s
+                    All
                 </button>
                 <button
                   onClick={() => setEditScope("variant")}
                   className={cn(
-                    "flex-1 px-2 py-1.5 text-xs font-medium rounded transition-colors",
+                      "flex-1 px-1.5 py-1 text-[9px] font-medium rounded transition-colors",
                     editScope === "variant"
                       ? "bg-[#00A3E1] text-white"
-                      : "bg-white text-gray-600 border border-gray-200 hover:bg-gray-100"
+                        : "text-foreground-secondary hover:bg-secondary"
                   )}
                 >
-                  This Variant
+                    Variant
                 </button>
               </div>
             </div>
           )}
+          </div>
+        )}
 
-        </>
-      )}
-
-      {/* How it works - only when no component selected */}
-      {selectedComponentType === "all" && (
-        <div className="bg-blue-50/50 rounded-lg p-3 border border-blue-100">
-          <h4 id="h4-how-it-works" className="text-xs font-semibold text-blue-900 mb-2 uppercase tracking-wide">How it works</h4>
-          <ol className="text-xs text-blue-800 space-y-1 list-decimal list-inside">
-            <li>Hover & click any element on the page to select it</li>
-            <li>Describe how you want to change it below</li>
-          </ol>
-        </div>
-      )}
-
-      {/* AI Component Editor */}
-      <div className="space-y-4 pt-2">
-            {/* Pending Edit Preview (single-file component edit) */}
+        {/* Non-Vision Mode: Empty State */}
+        {!visionMode && selectedComponentType === "all" && (
+          <div className="flex flex-col items-center justify-center py-6 text-center px-3">
+            <div className="w-10 h-10 rounded-full bg-secondary flex items-center justify-center mb-2">
+              <Box className="h-5 w-5 text-foreground-muted" />
+            </div>
+            <p className="text-[11px] font-medium text-foreground mb-1">
+              Select a Component
+            </p>
+            <p className="text-[10px] text-foreground-secondary">
+              Click a component on the page or enable Vision Mode for AI-powered editing.
+            </p>
+          </div>
+        )}
+          </>
+        )}
+
+        {/* AI CHAT TAB - Full Height Cursor-Style Interface */}
+        {panelTab === "chat" && (
+          <div className="flex flex-col h-full bg-background">
+            {/* Chat Interface - Always visible with inline diffs */}
+            <ChatInterface
+              componentType={selectedComponentType}
+              componentName={selectedComponentName || selectedComponentType}
+              onEditComplete={handleAIEditComplete}
+              onSaveRequest={setPendingEdit}
+              pendingEdit={pendingEdit}
+              onClearPending={handleClearPendingEdit}
+              editScope={editScope}
+              variantId={selectedVariantId}
+              variantStyles={variantStyles}
+              visionMode={visionMode}
+              visionFocusedElements={visionFocusedElements}
+              onVisionEditComplete={onVisionEditComplete}
+              onApplyFirstComplete={onApplyFirstComplete}
+            />
+
+            {/* Legacy Diff Previews (fallback for non-inline mode) */}
             {pendingEdit && (
-              <DiffPreview
-                pendingEdit={pendingEdit}
-                componentType={selectedComponentType}
-                onSave={handleSaveAIEdit}
-                onCancel={handleClearPendingEdit}
-                onPreviewToggle={handlePreviewToggle}
-                isPreviewActive={isPreviewActive}
-                saveStatus={aiSaveStatus}
-                saveMessage={aiSaveMessage}
-                variantId={selectedVariantId}
-              />
+              <div className="border-t border-border p-2">
+                <DiffPreview
+                  pendingEdit={pendingEdit}
+                  componentType={selectedComponentType}
+                  onSave={handleSaveAIEdit}
+                  onCancel={handleClearPendingEdit}
+                  onPreviewToggle={handlePreviewToggle}
+                  isPreviewActive={isPreviewActive}
+                  saveStatus={aiSaveStatus}
+                  saveMessage={aiSaveMessage}
+                  variantId={selectedVariantId}
+                />
+              </div>
             )}
 
-            {/* Vision Mode Pending Edit Preview (multi-file) - OLD: CSS preview */}
             {visionPendingEdit && onSaveVisionEdit && onClearVisionPendingEdit && !applyFirstSession && (
-              <VisionDiffPreview
-                pendingEdit={visionPendingEdit}
-                onSave={onSaveVisionEdit}
-                onCancel={onClearVisionPendingEdit}
-              />
+              <div className="border-t border-border p-2">
+                <VisionDiffPreview
+                  pendingEdit={visionPendingEdit}
+                  onSave={onSaveVisionEdit}
+                  onCancel={onClearVisionPendingEdit}
+                />
+              </div>
             )}
 
-            {/* Preview-First Mode - Shows diff, user accepts/rejects before applying */}
             {applyFirstSession && onApplyFirstAccept && onApplyFirstRevert && (
-              <ApplyFirstPreview
-                session={applyFirstSession}
-                status={applyFirstStatus}
-                onAccept={onApplyFirstAccept}
-                onRevert={onApplyFirstRevert}
-                onForceClear={onApplyFirstForceClear}
-                onApplyPreview={onApplyPreview}
-              />
-            )}
-
-            {/* AI Chat Interface - hide when any pending edit is present */}
-            {/* Apply-First mode: Files written immediately with backups for instant HMR preview
-                User sees structural + CSS changes live, then clicks Accept or Revert
-                Original files are always backed up and can be restored */}
-            {!pendingEdit && !visionPendingEdit && !applyFirstSession && (
-              <ChatInterface
-                componentType={selectedComponentType}
-                componentName={selectedComponentName || selectedComponentType}
-                onEditComplete={handleAIEditComplete}
-                onSaveRequest={setPendingEdit}
-                pendingEdit={pendingEdit}
-                onClearPending={handleClearPendingEdit}
-                editScope={editScope}
-                variantId={selectedVariantId}
-                variantStyles={variantStyles}
-                visionMode={visionMode}
-                visionFocusedElements={visionFocusedElements}
-                onVisionEditComplete={onVisionEditComplete}
-                onApplyFirstComplete={onApplyFirstComplete}
-              />
+              <div className="border-t border-border p-2">
+                <ApplyFirstPreview
+                  session={applyFirstSession}
+                  status={applyFirstStatus}
+                  onAccept={onApplyFirstAccept}
+                  onRevert={onApplyFirstRevert}
+                  onForceClear={onApplyFirstForceClear}
+                  onApplyPreview={onApplyPreview}
+                />
+              </div>
             )}
-
-            {/* Reset Button */}
-            <button
-              onClick={() => {
-                onReset();
-                onResetComponentOverrides();
-                handleClearPendingEdit();
-              }}
-              className={cn(
-                "w-full flex items-center justify-center gap-2 py-2.5",
-                "text-xs font-medium text-gray-500 hover:text-gray-700",
-                "border border-gray-200 rounded hover:bg-gray-50 transition-colors"
-              )}
-            >
-              <RotateCcw className="h-3.5 w-3.5" />
-              Reset
-            </button>
           </div>
+        )}
+      </div>
     </div>
   );
 }

package/dist/assets/dev-tools/types.ts

@@ -1,7 +1,17 @@
 
 import React from "react";
 
-export type TabId = "analysis" | "components" | "logos" | "text";
+export type TabId = "analysis" | "elements";
+
+// Element type filters for the unified element view
+export interface ElementFilters {
+  components: boolean;
+  images: boolean;
+  text: boolean;
+}
+
+// Type for the currently selected element in the unified view
+export type SelectedElementType = "component" | "logo" | "text" | null;
 
 export interface TabDefinition {
   id: TabId;
@@ -108,12 +118,51 @@ export type ComponentStyleOverride = Record<string, ComponentStyle>;
 
 // ---- AI Chat Interfaces ----
 
+/** Action status for inline diff display */
+export type ChatActionStatus = "pending" | "accepted" | "reverted" | "error";
+
+/** Action type for inline display in chat messages */
+export type ChatActionType = "diff" | "applied" | "reverted" | "error";
+
+/** File change info for inline diff display */
+export interface ChatFileChange {
+  path: string;
+  diff: string;
+  originalContent?: string;
+  modifiedContent?: string;
+}
+
+/** Inline action display attached to assistant messages */
+export interface ChatMessageAction {
+  type: ChatActionType;
+  files?: ChatFileChange[];
+  status: ChatActionStatus;
+  sessionId?: string;
+  explanation?: string;
+}
+
 export interface ChatMessage {
   id: string;
-  role: "user" | "assistant";
+  role: "user" | "assistant" | "system";
   content: string;
   timestamp: Date;
   editResult?: AIEditResult;
+  /** Inline action display for diffs/changes */
+  action?: ChatMessageAction;
+}
+
+/** Chat session for multi-conversation support */
+export interface ChatSession {
+  id: string;
+  name: string;
+  messages: ChatMessage[];
+  createdAt: Date;
+  updatedAt: Date;
+  /** Context for the session (component type, vision mode, etc.) */
+  context?: {
+    componentType?: string;
+    visionMode?: boolean;
+  };
 }
 
 export interface AIEditResult {

package/dist/index.js

@@ -7,6 +7,7 @@ import * as path from "path";
 import * as os from "os";
 import { fileURLToPath } from "url";
 import { execSync } from "child_process";
+import sharp from "sharp";
 // ============================================
 // INSTALLER (--init flag)
 // ============================================
@@ -1486,10 +1487,28 @@ async function embedLogo(logoPath) {
         };
     }
     try {
-        // Read file as base64
-        const fileBuffer = fs.readFileSync(resolvedPath);
-        const base64Data = fileBuffer.toString('base64');
+        const MAX_DIMENSION = 7500; // Leave margin below Claude's 8000px limit
+        // Read the image file
+        let imageBuffer = fs.readFileSync(resolvedPath);
         const mimeType = getImageMimeType(resolvedPath);
+        // Only process raster images (not SVG)
+        if (mimeType !== 'image/svg+xml') {
+            const image = sharp(imageBuffer);
+            const metadata = await image.metadata();
+            // Check if resizing is needed
+            if (metadata.width && metadata.height) {
+                if (metadata.width > MAX_DIMENSION || metadata.height > MAX_DIMENSION) {
+                    // Resize maintaining aspect ratio
+                    imageBuffer = await image
+                        .resize(MAX_DIMENSION, MAX_DIMENSION, {
+                        fit: 'inside',
+                        withoutEnlargement: true,
+                    })
+                        .toBuffer();
+                }
+            }
+        }
+        const base64Data = imageBuffer.toString('base64');
         return {
             success: true,
             type: "image",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sonance-brand-mcp",
-  "version": "1.3.109",
+  "version": "1.3.111",
   "description": "MCP Server for Sonance Brand Guidelines and Component Library - gives Claude instant access to brand colors, typography, and UI components.",
   "main": "dist/index.js",
   "type": "module",
@@ -39,6 +39,7 @@
   },
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.0.0",
+    "sharp": "^0.33.5",
     "zod": "^3.23.8"
   },
   "devDependencies": {