feat: Add Diff View and File History Tracking

- Implemented a new Diff View in the Workbench to visualize file changes - Added file history tracking with detailed change information - Enhanced FileTree and FileModifiedDropdown to show line additions and deletions - Integrated file history saving and retrieval in ActionRunner - Updated Workbench view types to include 'diff' option - Added support for inline and side-by-side diff view modes
2025-06-26 18:26:38 +00:00 · 2025-02-23 07:55:38 -03:00
parent 8c72ed76b3
commit ab6f5328b4
17 changed files with 1192 additions and 77 deletions
--- a/.github/actions/setup-and-build/action.yaml
+++ b/.github/actions/setup-and-build/action.yaml
@@ -30,3 +30,7 @@ runs:
      run: |
        pnpm install
        pnpm run build
+
+    - name: Create history directory
+      shell: bash
+      run: mkdir -p .history
--- a/.tool-versions
+++ b/.tool-versions
@@ -1,2 +1,2 @@
 nodejs 20.15.1
-pnpm 9.4.0
+pnpm 9.4.0
--- a/README.md
+++ b/README.md
@@ -4,12 +4,10 @@

 Welcome to bolt.diy, the official open source version of Bolt.new (previously known as oTToDev and bolt.new ANY LLM), which allows you to choose the LLM that you use for each prompt! Currently, you can use OpenAI, Anthropic, Ollama, OpenRouter, Gemini, LMStudio, Mistral, xAI, HuggingFace, DeepSeek, or Groq models - and it is easily extended to use any other model supported by the Vercel AI SDK! See the instructions below for running this locally and extending it to include more models.

---
-
+-----
 Check the [bolt.diy Docs](https://stackblitz-labs.github.io/bolt.diy/) for more offical installation instructions and more informations.

---
-
+-----
 Also [this pinned post in our community](https://thinktank.ottomator.ai/t/videos-tutorial-helpful-content/3243) has a bunch of incredible resources for running and deploying bolt.diy yourself!

 We have also launched an experimental agent called the "bolt.diy Expert" that can answer common questions about bolt.diy. Find it here on the [oTTomator Live Agent Studio](https://studio.ottomator.ai/).
@@ -81,6 +79,7 @@ project, please check the [project management guide](./PROJECT.md) to get starte
 - ✅ Add Starter Template Options (@thecodacus)
 - ✅ Perplexity Integration (@meetpateltech)
 - ✅ AWS Bedrock Integration (@kunjabijukchhe)
+- ✅ Add a "Diff View" to see the changes (@toddyclipsgg)
 - ⬜ **HIGH PRIORITY** - Prevent bolt from rewriting files as often (file locking and diffs)
 - ⬜ **HIGH PRIORITY** - Better prompting for smaller LLMs (code window sometimes doesn't start)
 - ⬜ **HIGH PRIORITY** - Run agents in the backend as opposed to a single model call
--- a/app/components/chat/BaseChat.tsx
+++ b/app/components/chat/BaseChat.tsx
@@ -34,6 +34,7 @@ import ChatAlert from './ChatAlert';
 import type { ModelInfo } from '~/lib/modules/llm/types';
 import ProgressCompilation from './ProgressCompilation';
 import type { ProgressAnnotation } from '~/types/context';
+import type { ActionRunner } from '~/lib/runtime/action-runner';
 import { LOCAL_PROVIDERS } from '~/lib/stores/settings';

 const TEXTAREA_MIN_HEIGHT = 76;
@@ -68,6 +69,7 @@ interface BaseChatProps {
  actionAlert?: ActionAlert;
  clearAlert?: () => void;
  data?: JSONValue[] | undefined;
+  actionRunner?: ActionRunner;
 }

 export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
@@ -102,6 +104,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
      actionAlert,
      clearAlert,
      data,
+      actionRunner,
    },
    ref,
  ) => {
@@ -304,7 +307,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
        data-chat-visible={showChat}
      >
        <ClientOnly>{() => <Menu />}</ClientOnly>
-        <div className="flex flex-col lg:flex-row overflow-y-auto w-full h-full">
+        <div ref={scrollRef} className="flex flex-col lg:flex-row overflow-y-auto w-full h-full">
          <div className={classNames(styles.Chat, 'flex flex-col flex-grow lg:min-w-[var(--chat-min-width)] h-full')}>
            {!chatStarted && (
              <div id="intro" className="mt-[16vh] max-w-chat mx-auto text-center px-4 lg:px-0">
@@ -318,40 +321,39 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
            )}
            <div
              className={classNames('pt-6 px-2 sm:px-6', {
-                'h-full flex flex-col pb-4 overflow-y-auto': chatStarted,
+                'h-full flex flex-col': chatStarted,
              })}
              ref={scrollRef}
            >
              <ClientOnly>
                {() => {
                  return chatStarted ? (
-                    <div className="flex-1 w-full max-w-chat pb-6 mx-auto z-1">
-                      <Messages
-                        ref={messageRef}
-                        className="flex flex-col "
-                        messages={messages}
-                        isStreaming={isStreaming}
-                      />
-                    </div>
+                    <Messages
+                      ref={messageRef}
+                      className="flex flex-col w-full flex-1 max-w-chat pb-6 mx-auto z-1"
+                      messages={messages}
+                      isStreaming={isStreaming}
+                    />
                  ) : null;
                }}
              </ClientOnly>
              <div
-                className={classNames('flex flex-col gap-4 w-full max-w-chat mx-auto z-prompt', {
+                className={classNames('flex flex-col gap-4 w-full max-w-chat mx-auto z-prompt mb-6', {
                  'sticky bottom-2': chatStarted,
-                  'position-absolute': chatStarted,
                })}
              >
-                {actionAlert && (
-                  <ChatAlert
-                    alert={actionAlert}
-                    clearAlert={() => clearAlert?.()}
-                    postMessage={(message) => {
-                      sendMessage?.({} as any, message);
-                      clearAlert?.();
-                    }}
-                  />
-                )}
+                <div className="bg-bolt-elements-background-depth-2">
+                  {actionAlert && (
+                    <ChatAlert
+                      alert={actionAlert}
+                      clearAlert={() => clearAlert?.()}
+                      postMessage={(message) => {
+                        sendMessage?.({} as any, message);
+                        clearAlert?.();
+                      }}
+                    />
+                  )}
+                </div>
                {progressAnnotations && <ProgressCompilation data={progressAnnotations} />}
                <div
                  className={classNames(
@@ -585,16 +587,15 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                </div>
              </div>
            </div>
-            {!chatStarted && (
-              <div className="flex flex-col justify-center mt-6 gap-5">
+            <div className="flex flex-col justify-center gap-5">
+              {!chatStarted && (
                <div className="flex justify-center gap-2">
-                  <div className="flex items-center gap-2">
-                    {ImportButtons(importChat)}
-                    <GitCloneButton importChat={importChat} className="min-w-[120px]" />
-                  </div>
+                  {ImportButtons(importChat)}
+                  <GitCloneButton importChat={importChat} />
                </div>
-
-                {ExamplePrompts((event, messageInput) => {
+              )}
+              {!chatStarted &&
+                ExamplePrompts((event, messageInput) => {
                  if (isStreaming) {
                    handleStop?.();
                    return;
@@ -602,11 +603,18 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(

                  handleSendMessage?.(event, messageInput);
                })}
-                <StarterTemplates />
-              </div>
-            )}
+              {!chatStarted && <StarterTemplates />}
+            </div>
          </div>
-          <ClientOnly>{() => <Workbench chatStarted={chatStarted} isStreaming={isStreaming} />}</ClientOnly>
+          <ClientOnly>
+            {() => (
+              <Workbench
+                actionRunner={actionRunner ?? ({} as ActionRunner)}
+                chatStarted={chatStarted}
+                isStreaming={isStreaming}
+              />
+            )}
+          </ClientOnly>
        </div>
      </div>
    );
--- a/app/components/ui/Slider.tsx
+++ b/app/components/ui/Slider.tsx
@@ -9,10 +9,11 @@ interface SliderOption<T> {
  text: string;
 }

-export interface SliderOptions<T> {
-  left: SliderOption<T>;
-  right: SliderOption<T>;
-}
+export type SliderOptions<T> = {
+  left: { value: T; text: string };
+  middle?: { value: T; text: string };
+  right: { value: T; text: string };
+};

 interface SliderProps<T> {
  selected: T;
@@ -21,14 +22,23 @@ interface SliderProps<T> {
 }

 export const Slider = genericMemo(<T,>({ selected, options, setSelected }: SliderProps<T>) => {
-  const isLeftSelected = selected === options.left.value;
+  const hasMiddle = !!options.middle;
+  const isLeftSelected = hasMiddle ? selected === options.left.value : selected === options.left.value;
+  const isMiddleSelected = hasMiddle && options.middle ? selected === options.middle.value : false;

  return (
    <div className="flex items-center flex-wrap shrink-0 gap-1 bg-bolt-elements-background-depth-1 overflow-hidden rounded-full p-1">
      <SliderButton selected={isLeftSelected} setSelected={() => setSelected?.(options.left.value)}>
        {options.left.text}
      </SliderButton>
-      <SliderButton selected={!isLeftSelected} setSelected={() => setSelected?.(options.right.value)}>
+      
+      {options.middle && (
+        <SliderButton selected={isMiddleSelected} setSelected={() => setSelected?.(options.middle!.value)}>
+          {options.middle.text}
+        </SliderButton>
+      )}
+      
+      <SliderButton selected={!isLeftSelected && !isMiddleSelected} setSelected={() => setSelected?.(options.right.value)}>
        {options.right.text}
      </SliderButton>
    </div>
--- a/app/components/workbench/DiffView.tsx
+++ b/app/components/workbench/DiffView.tsx
@@ -0,0 +1,647 @@
+import { memo, useMemo, useState, useEffect, useCallback } from 'react';
+import { useStore } from '@nanostores/react';
+import { workbenchStore } from '~/lib/stores/workbench';
+import type { FileMap } from '~/lib/stores/files';
+import type { EditorDocument } from '~/components/editor/codemirror/CodeMirrorEditor';
+import { diffLines, type Change } from 'diff';
+import { getHighlighter } from 'shiki';
+import '~/styles/diff-view.css';
+import { diffFiles, extractRelativePath } from '~/utils/diff';
+import { ActionRunner } from '~/lib/runtime/action-runner';
+import type { FileHistory } from '~/types/actions';
+import { getLanguageFromExtension } from '~/utils/getLanguageFromExtension';
+
+interface CodeComparisonProps {
+  beforeCode: string;
+  afterCode: string;
+  language: string;
+  filename: string;
+  lightTheme: string;
+  darkTheme: string;
+}
+
+interface DiffBlock {
+  lineNumber: number;
+  content: string;
+  type: 'added' | 'removed' | 'unchanged';
+  correspondingLine?: number;
+}
+
+interface FullscreenButtonProps {
+  onClick: () => void;
+  isFullscreen: boolean;
+}
+
+const FullscreenButton = memo(({ onClick, isFullscreen }: FullscreenButtonProps) => (
+  <button
+    onClick={onClick}
+    className="ml-4 p-1 rounded hover:bg-bolt-elements-background-depth-3 text-bolt-elements-textTertiary hover:text-bolt-elements-textPrimary transition-colors"
+    title={isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen"}
+  >
+    <div className={isFullscreen ? "i-ph:corners-in" : "i-ph:corners-out"} />
+  </button>
+));
+
+const FullscreenOverlay = memo(({ isFullscreen, children }: { isFullscreen: boolean; children: React.ReactNode }) => {
+  if (!isFullscreen) return <>{children}</>;
+  
+  return (
+    <div className="fixed inset-0 z-[9999] bg-black/50 flex items-center justify-center p-6">
+      <div className="w-full h-full max-w-[90vw] max-h-[90vh] bg-bolt-elements-background-depth-2 rounded-lg border border-bolt-elements-borderColor shadow-xl overflow-hidden">
+        {children}
+      </div>
+    </div>
+  );
+});
+
+const MAX_FILE_SIZE = 1024 * 1024; // 1MB
+const BINARY_REGEX = /[\x00-\x08\x0E-\x1F]/;
+
+const isBinaryFile = (content: string) => {
+  return content.length > MAX_FILE_SIZE || BINARY_REGEX.test(content);
+};
+
+const processChanges = (beforeCode: string, afterCode: string) => {
+  try {
+    if (isBinaryFile(beforeCode) || isBinaryFile(afterCode)) {
+      return {
+        beforeLines: [],
+        afterLines: [],
+        hasChanges: false,
+        lineChanges: { before: new Set(), after: new Set() },
+        unifiedBlocks: [],
+        isBinary: true
+      };
+    }
+
+    // Normalizar quebras de linha para evitar falsos positivos
+    const normalizedBefore = beforeCode.replace(/\r\n/g, '\n');
+    const normalizedAfter = afterCode.replace(/\r\n/g, '\n');
+
+    // Dividir em linhas preservando linhas vazias
+    const beforeLines = normalizedBefore.split('\n');
+    const afterLines = normalizedAfter.split('\n');
+
+    // Se os conteúdos são idênticos após normalização, não há mudanças
+    if (normalizedBefore === normalizedAfter) {
+      return {
+        beforeLines,
+        afterLines,
+        hasChanges: false,
+        lineChanges: { before: new Set(), after: new Set() },
+        unifiedBlocks: []
+      };
+    }
+
+    // Processar as diferenças com configurações otimizadas para detecção por linha
+    const changes = diffLines(normalizedBefore, normalizedAfter, {
+      newlineIsToken: false, // Não tratar quebras de linha como tokens separados
+      ignoreWhitespace: true, // Ignorar diferenças de espaços em branco
+      ignoreCase: false // Manter sensibilidade a maiúsculas/minúsculas
+    });
+
+    const lineChanges = {
+      before: new Set<number>(),
+      after: new Set<number>()
+    };
+
+    let beforeLineNumber = 0;
+    let afterLineNumber = 0;
+
+    const unifiedBlocks = changes.reduce((blocks: DiffBlock[], change) => {
+      // Dividir o conteúdo em linhas preservando linhas vazias
+      const lines = change.value.split('\n');
+      
+      if (change.added) {
+        // Processar linhas adicionadas
+        const addedBlocks = lines.map((line, i) => {
+          lineChanges.after.add(afterLineNumber + i);
+          return {
+            lineNumber: afterLineNumber + i,
+            content: line,
+            type: 'added' as const
+          };
+        });
+        afterLineNumber += lines.length;
+        return [...blocks, ...addedBlocks];
+      }
+
+      if (change.removed) {
+        // Processar linhas removidas
+        const removedBlocks = lines.map((line, i) => {
+          lineChanges.before.add(beforeLineNumber + i);
+          return {
+            lineNumber: beforeLineNumber + i,
+            content: line,
+            type: 'removed' as const
+          };
+        });
+        beforeLineNumber += lines.length;
+        return [...blocks, ...removedBlocks];
+      }
+
+      // Processar linhas não modificadas
+      const unchangedBlocks = lines.map((line, i) => {
+        const block = {
+          lineNumber: afterLineNumber + i,
+          content: line,
+          type: 'unchanged' as const,
+          correspondingLine: beforeLineNumber + i
+        };
+        return block;
+      });
+      beforeLineNumber += lines.length;
+      afterLineNumber += lines.length;
+      return [...blocks, ...unchangedBlocks];
+    }, []);
+
+    return {
+      beforeLines,
+      afterLines,
+      hasChanges: lineChanges.before.size > 0 || lineChanges.after.size > 0,
+      lineChanges,
+      unifiedBlocks,
+      isBinary: false
+    };
+  } catch (error) {
+    console.error('Error processing changes:', error);
+    return {
+      beforeLines: [],
+      afterLines: [],
+      hasChanges: false,
+      lineChanges: { before: new Set(), after: new Set() },
+      unifiedBlocks: [],
+      error: true,
+      isBinary: false
+    };
+  }
+};
+
+const lineNumberStyles = "w-12 shrink-0 pl-2 py-0.5 text-left font-mono text-bolt-elements-textTertiary border-r border-bolt-elements-borderColor bg-bolt-elements-background-depth-1";
+const lineContentStyles = "px-4 py-0.5 font-mono whitespace-pre flex-1 group-hover:bg-bolt-elements-background-depth-2 text-bolt-elements-textPrimary";
+
+const renderContentWarning = (type: 'binary' | 'error') => (
+  <div className="h-full flex items-center justify-center p-4">
+    <div className="text-center text-bolt-elements-textTertiary">
+      <div className={`i-ph:${type === 'binary' ? 'file-x' : 'warning-circle'} text-4xl text-red-400 mb-2 mx-auto`} />
+      <p className="font-medium text-bolt-elements-textPrimary">
+        {type === 'binary' ? 'Binary file detected' : 'Error processing file'}
+      </p>
+      <p className="text-sm mt-1">
+        {type === 'binary' 
+          ? 'Diff view is not available for binary files'
+          : 'Could not generate diff preview'}
+      </p>
+    </div>
+  </div>
+);
+
+const NoChangesView = memo(({ beforeCode, language, highlighter }: { 
+  beforeCode: string;
+  language: string;
+  highlighter: any;
+}) => (
+  <div className="h-full flex flex-col items-center justify-center p-4">
+    <div className="text-center text-bolt-elements-textTertiary">
+      <div className="i-ph:files text-4xl text-green-400 mb-2 mx-auto" />
+      <p className="font-medium text-bolt-elements-textPrimary">Files are identical</p>
+      <p className="text-sm mt-1">Both versions match exactly</p>
+    </div>
+    <div className="mt-4 w-full max-w-2xl bg-bolt-elements-background-depth-1 rounded-lg border border-bolt-elements-borderColor overflow-hidden">
+      <div className="p-2 text-xs font-bold text-bolt-elements-textTertiary border-b border-bolt-elements-borderColor">
+        Current Content
+      </div>
+      <div className="overflow-auto max-h-96">
+        {beforeCode.split('\n').map((line, index) => (
+          <div key={index} className="flex group min-w-fit">
+            <div className={lineNumberStyles}>{index + 1}</div>
+            <div className={lineContentStyles}>
+              <span className="mr-2"> </span>
+              <span dangerouslySetInnerHTML={{ 
+                __html: highlighter ? 
+                  highlighter.codeToHtml(line, { lang: language, theme: 'github-dark' })
+                    .replace(/<\/?pre[^>]*>/g, '')
+                    .replace(/<\/?code[^>]*>/g, '') 
+                  : line 
+              }} />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  </div>
+));
+
+// Otimização do processamento de diferenças com memoização
+const useProcessChanges = (beforeCode: string, afterCode: string) => {
+  return useMemo(() => processChanges(beforeCode, afterCode), [beforeCode, afterCode]);
+};
+
+// Componente otimizado para renderização de linhas de código
+const CodeLine = memo(({ 
+  lineNumber, 
+  content, 
+  type, 
+  highlighter, 
+  language 
+}: {
+  lineNumber: number;
+  content: string;
+  type: 'added' | 'removed' | 'unchanged';
+  highlighter: any;
+  language: string;
+}) => {
+  const bgColor = {
+    added: 'bg-green-500/20 border-l-4 border-green-500',
+    removed: 'bg-red-500/20 border-l-4 border-red-500',
+    unchanged: ''
+  }[type];
+
+  const highlightedCode = useMemo(() => {
+    if (!highlighter) return content;
+    return highlighter.codeToHtml(content, { 
+      lang: language, 
+      theme: 'github-dark' 
+    }).replace(/<\/?pre[^>]*>/g, '').replace(/<\/?code[^>]*>/g, '');
+  }, [content, highlighter, language]);
+
+  return (
+    <div className="flex group min-w-fit">
+      <div className={lineNumberStyles}>{lineNumber + 1}</div>
+      <div className={`${lineContentStyles} ${bgColor}`}>
+        <span className="mr-2 text-bolt-elements-textTertiary">
+          {type === 'added' && '+'}
+          {type === 'removed' && '-'}
+          {type === 'unchanged' && ' '}
+        </span>
+        <span dangerouslySetInnerHTML={{ __html: highlightedCode }} />
+      </div>
+    </div>
+  );
+});
+
+// Componente para exibir informações sobre o arquivo
+const FileInfo = memo(({ 
+  filename, 
+  hasChanges, 
+  onToggleFullscreen, 
+  isFullscreen,
+  beforeCode,
+  afterCode
+}: {
+  filename: string;
+  hasChanges: boolean;
+  onToggleFullscreen: () => void;
+  isFullscreen: boolean;
+  beforeCode: string;
+  afterCode: string;
+}) => {
+  // Calculate additions and deletions from the current document
+  const { additions, deletions } = useMemo(() => {
+    if (!hasChanges) return { additions: 0, deletions: 0 };
+
+    const changes = diffLines(beforeCode, afterCode, {
+      newlineIsToken: false,
+      ignoreWhitespace: true,
+      ignoreCase: false
+    });
+
+    return changes.reduce((acc: { additions: number; deletions: number }, change: Change) => {
+      if (change.added) {
+        acc.additions += change.value.split('\n').length;
+      }
+      if (change.removed) {
+        acc.deletions += change.value.split('\n').length;
+      }
+      return acc;
+    }, { additions: 0, deletions: 0 });
+  }, [hasChanges, beforeCode, afterCode]);
+
+  const showStats = additions > 0 || deletions > 0;
+
+  return (
+    <div className="flex items-center bg-bolt-elements-background-depth-1 p-2 text-sm text-bolt-elements-textPrimary shrink-0">
+      <div className="i-ph:file mr-2 h-4 w-4 shrink-0" />
+      <span className="truncate">{filename}</span>
+      <span className="ml-auto shrink-0 flex items-center gap-2">
+        {hasChanges ? (
+          <>
+            {showStats && (
+              <div className="flex items-center gap-1 text-xs">
+                {additions > 0 && (
+                  <span className="text-green-500">+{additions}</span>
+                )}
+                {deletions > 0 && (
+                  <span className="text-red-500">-{deletions}</span>
+                )}
+              </div>
+            )}
+            <span className="text-yellow-400">Modified</span>
+            <span className="text-bolt-elements-textTertiary text-xs">
+              {new Date().toLocaleTimeString()}
+            </span>
+          </>
+        ) : (
+          <span className="text-green-400">No Changes</span>
+        )}
+        <FullscreenButton onClick={onToggleFullscreen} isFullscreen={isFullscreen} />
+      </span>
+    </div>
+  );
+});
+
+const InlineDiffComparison = memo(({ beforeCode, afterCode, filename, language, lightTheme, darkTheme }: CodeComparisonProps) => {
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [highlighter, setHighlighter] = useState<any>(null);
+  
+  const toggleFullscreen = useCallback(() => {
+    setIsFullscreen(prev => !prev);
+  }, []);
+
+  const { unifiedBlocks, hasChanges, isBinary, error } = useProcessChanges(beforeCode, afterCode);
+
+  useEffect(() => {
+    getHighlighter({
+      themes: ['github-dark'],
+      langs: ['typescript', 'javascript', 'json', 'html', 'css', 'jsx', 'tsx']
+    }).then(setHighlighter);
+  }, []);
+
+  if (isBinary || error) return renderContentWarning(isBinary ? 'binary' : 'error');
+
+  return (
+    <FullscreenOverlay isFullscreen={isFullscreen}>
+      <div className="w-full h-full flex flex-col">
+        <FileInfo 
+          filename={filename}
+          hasChanges={hasChanges}
+          onToggleFullscreen={toggleFullscreen}
+          isFullscreen={isFullscreen}
+          beforeCode={beforeCode}
+          afterCode={afterCode}
+        />
+        <div className="flex-1 overflow-auto diff-panel-content">
+          {hasChanges ? (
+            <div className="overflow-x-auto">
+              {unifiedBlocks.map((block, index) => (
+                <CodeLine
+                  key={`${block.lineNumber}-${index}`}
+                  lineNumber={block.lineNumber}
+                  content={block.content}
+                  type={block.type}
+                  highlighter={highlighter}
+                  language={language}
+                />
+              ))}
+            </div>
+          ) : (
+            <NoChangesView 
+              beforeCode={beforeCode}
+              language={language}
+              highlighter={highlighter}
+            />
+          )}
+        </div>
+      </div>
+    </FullscreenOverlay>
+  );
+});
+
+const SideBySideComparison = memo(({
+  beforeCode,
+  afterCode,
+  language,
+  filename,
+  lightTheme,
+  darkTheme,
+}: CodeComparisonProps) => {
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [highlighter, setHighlighter] = useState<any>(null);
+  
+  const toggleFullscreen = useCallback(() => {
+    setIsFullscreen(prev => !prev);
+  }, []);
+
+  const { beforeLines, afterLines, hasChanges, lineChanges, isBinary, error } = useProcessChanges(beforeCode, afterCode);
+
+  useEffect(() => {
+    getHighlighter({
+      themes: ['github-dark'],
+      langs: ['typescript', 'javascript', 'json', 'html', 'css', 'jsx', 'tsx']
+    }).then(setHighlighter);
+  }, []);
+
+  if (isBinary || error) return renderContentWarning(isBinary ? 'binary' : 'error');
+
+  const renderCode = (code: string) => {
+    if (!highlighter) return code;
+    const highlightedCode = highlighter.codeToHtml(code, { 
+      lang: language, 
+      theme: 'github-dark' 
+    });
+    return highlightedCode.replace(/<\/?pre[^>]*>/g, '').replace(/<\/?code[^>]*>/g, '');
+  };
+
+  return (
+    <FullscreenOverlay isFullscreen={isFullscreen}>
+      <div className="w-full h-full flex flex-col">
+        <FileInfo 
+          filename={filename}
+          hasChanges={hasChanges}
+          onToggleFullscreen={toggleFullscreen}
+          isFullscreen={isFullscreen}
+          beforeCode={beforeCode}
+          afterCode={afterCode}
+        />
+        <div className="flex-1 overflow-auto diff-panel-content">
+          {hasChanges ? (
+            <div className="grid md:grid-cols-2 divide-x divide-bolt-elements-borderColor relative h-full">
+              <div className="overflow-auto">
+                {beforeLines.map((line, index) => (
+                  <div key={`before-${index}`} className="flex group min-w-fit">
+                    <div className={lineNumberStyles}>{index + 1}</div>
+                    <div className={`${lineContentStyles} ${lineChanges.before.has(index) ? 'bg-red-500/20 border-l-4 border-red-500' : ''}`}>
+                      <span className="mr-2 text-bolt-elements-textTertiary">
+                        {lineChanges.before.has(index) ? '-' : ' '}
+                      </span>
+                      <span dangerouslySetInnerHTML={{ __html: renderCode(line) }} />
+                    </div>
+                  </div>
+                ))}
+              </div>
+              <div className="overflow-auto">
+                {afterLines.map((line, index) => (
+                  <div key={`after-${index}`} className="flex group min-w-fit">
+                    <div className={lineNumberStyles}>{index + 1}</div>
+                    <div className={`${lineContentStyles} ${lineChanges.after.has(index) ? 'bg-green-500/20 border-l-4 border-green-500' : ''}`}>
+                      <span className="mr-2 text-bolt-elements-textTertiary">
+                        {lineChanges.after.has(index) ? '+' : ' '}
+                      </span>
+                      <span dangerouslySetInnerHTML={{ __html: renderCode(line) }} />
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ) : (
+            <NoChangesView 
+              beforeCode={beforeCode}
+              language={language}
+              highlighter={highlighter}
+            />
+          )}
+        </div>
+      </div>
+    </FullscreenOverlay>
+  );
+});
+
+interface DiffViewProps {
+  fileHistory: Record<string, FileHistory>;
+  setFileHistory: React.Dispatch<React.SetStateAction<Record<string, FileHistory>>>;
+  diffViewMode: 'inline' | 'side';
+  actionRunner: ActionRunner;
+}
+
+export const DiffView = memo(({ fileHistory, setFileHistory, diffViewMode, actionRunner }: DiffViewProps) => {
+  const files = useStore(workbenchStore.files) as FileMap;
+  const selectedFile = useStore(workbenchStore.selectedFile);
+  const currentDocument = useStore(workbenchStore.currentDocument) as EditorDocument;
+  const unsavedFiles = useStore(workbenchStore.unsavedFiles);
+
+  useEffect(() => {
+    if (selectedFile && currentDocument) {
+      const file = files[selectedFile];
+      if (!file || !('content' in file)) return;
+
+      const existingHistory = fileHistory[selectedFile];
+      const currentContent = currentDocument.value;
+      
+      // Normalizar o conteúdo para comparação
+      const normalizedCurrentContent = currentContent.replace(/\r\n/g, '\n').trim();
+      const normalizedOriginalContent = (existingHistory?.originalContent || file.content).replace(/\r\n/g, '\n').trim();
+      
+      // Se não há histórico existente, criar um novo apenas se houver diferenças
+      if (!existingHistory) {
+        if (normalizedCurrentContent !== normalizedOriginalContent) {
+          const newChanges = diffLines(file.content, currentContent);
+          setFileHistory(prev => ({
+            ...prev,
+            [selectedFile]: {
+              originalContent: file.content,
+              lastModified: Date.now(),
+              changes: newChanges,
+              versions: [{
+                timestamp: Date.now(),
+                content: currentContent
+              }],
+              changeSource: 'auto-save'
+            }
+          }));
+        }
+        return;
+      }
+
+      // Se já existe histórico, verificar se há mudanças reais desde a última versão
+      const lastVersion = existingHistory.versions[existingHistory.versions.length - 1];
+      const normalizedLastContent = lastVersion?.content.replace(/\r\n/g, '\n').trim();
+      
+      if (normalizedCurrentContent === normalizedLastContent) {
+        return; // Não criar novo histórico se o conteúdo é o mesmo
+      }
+
+      // Verificar se há mudanças significativas usando diffFiles
+      const relativePath = extractRelativePath(selectedFile);
+      const unifiedDiff = diffFiles(
+        relativePath,
+        existingHistory.originalContent,
+        currentContent
+      );
+
+      if (unifiedDiff) {
+        const newChanges = diffLines(
+          existingHistory.originalContent,
+          currentContent
+        );
+
+        // Verificar se as mudanças são significativas
+        const hasSignificantChanges = newChanges.some(change => 
+          (change.added || change.removed) && change.value.trim().length > 0
+        );
+
+        if (hasSignificantChanges) {
+          const newHistory: FileHistory = {
+            originalContent: existingHistory.originalContent,
+            lastModified: Date.now(),
+            changes: [
+              ...existingHistory.changes,
+              ...newChanges
+            ].slice(-100), // Limitar histórico de mudanças
+            versions: [
+              ...existingHistory.versions,
+              {
+                timestamp: Date.now(),
+                content: currentContent
+              }
+            ].slice(-10), // Manter apenas as 10 últimas versões
+            changeSource: 'auto-save'
+          };
+          
+          setFileHistory(prev => ({ ...prev, [selectedFile]: newHistory }));
+        }
+      }
+    }
+  }, [selectedFile, currentDocument?.value, files, setFileHistory, unsavedFiles]);
+
+  if (!selectedFile || !currentDocument) {
+    return (
+      <div className="flex w-full h-full justify-center items-center bg-bolt-elements-background-depth-1 text-bolt-elements-textPrimary">
+        Select a file to view differences
+      </div>
+    );
+  }
+
+  const file = files[selectedFile];
+  const originalContent = file && 'content' in file ? file.content : '';
+  const currentContent = currentDocument.value;
+
+  const history = fileHistory[selectedFile];
+  const effectiveOriginalContent = history?.originalContent || originalContent;
+  const language = getLanguageFromExtension(selectedFile.split('.').pop() || '');
+
+  try {
+    return (
+      <div className="h-full overflow-hidden">
+        {diffViewMode === 'inline' ? (
+          <InlineDiffComparison
+            beforeCode={effectiveOriginalContent}
+            afterCode={currentContent}
+            language={language}
+            filename={selectedFile}
+            lightTheme="github-light"
+            darkTheme="github-dark"
+          />
+        ) : (
+          <SideBySideComparison
+            beforeCode={effectiveOriginalContent}
+            afterCode={currentContent}
+            language={language}
+            filename={selectedFile}
+            lightTheme="github-light"
+            darkTheme="github-dark"
+          />
+        )}
+      </div>
+    );
+  } catch (error) {
+    console.error('DiffView render error:', error);
+    return (
+      <div className="flex w-full h-full justify-center items-center bg-bolt-elements-background-depth-1 text-red-400">
+        <div className="text-center">
+          <div className="i-ph:warning-circle text-4xl mb-2" />
+          <p>Failed to render diff view</p>
+        </div>
+      </div>
+    );
+  }
+});
--- a/app/components/workbench/EditorPanel.tsx
+++ b/app/components/workbench/EditorPanel.tsx
@@ -12,6 +12,7 @@ import {
 import { PanelHeader } from '~/components/ui/PanelHeader';
 import { PanelHeaderButton } from '~/components/ui/PanelHeaderButton';
 import type { FileMap } from '~/lib/stores/files';
+import type { FileHistory } from '~/types/actions';
 import { themeStore } from '~/lib/stores/theme';
 import { WORK_DIR } from '~/utils/constants';
 import { renderLogger } from '~/utils/logger';
@@ -27,6 +28,7 @@ interface EditorPanelProps {
  editorDocument?: EditorDocument;
  selectedFile?: string | undefined;
  isStreaming?: boolean;
+  fileHistory?: Record<string, FileHistory>;
  onEditorChange?: OnEditorChange;
  onEditorScroll?: OnEditorScroll;
  onFileSelect?: (value?: string) => void;
@@ -45,6 +47,7 @@ export const EditorPanel = memo(
    editorDocument,
    selectedFile,
    isStreaming,
+    fileHistory,
    onFileSelect,
    onEditorChange,
    onEditorScroll,
@@ -83,6 +86,7 @@ export const EditorPanel = memo(
                  files={files}
                  hideRoot
                  unsavedFiles={unsavedFiles}
+                  fileHistory={fileHistory}
                  rootFolder={WORK_DIR}
                  selectedFile={selectedFile}
                  onFileSelect={onFileSelect}
--- a/app/components/workbench/FileTree.tsx
+++ b/app/components/workbench/FileTree.tsx
@@ -3,6 +3,8 @@ import type { FileMap } from '~/lib/stores/files';
 import { classNames } from '~/utils/classNames';
 import { createScopedLogger, renderLogger } from '~/utils/logger';
 import * as ContextMenu from '@radix-ui/react-context-menu';
+import type { FileHistory } from '~/types/actions';
+import { diffLines, type Change } from 'diff';

 const logger = createScopedLogger('FileTree');

@@ -19,6 +21,7 @@ interface Props {
  allowFolderSelection?: boolean;
  hiddenFiles?: Array<string | RegExp>;
  unsavedFiles?: Set<string>;
+  fileHistory?: Record<string, FileHistory>;
  className?: string;
 }

@@ -34,6 +37,7 @@ export const FileTree = memo(
    hiddenFiles,
    className,
    unsavedFiles,
+    fileHistory = {},
  }: Props) => {
    renderLogger.trace('FileTree');

@@ -138,6 +142,7 @@ export const FileTree = memo(
                  selected={selectedFile === fileOrFolder.fullPath}
                  file={fileOrFolder}
                  unsavedChanges={unsavedFiles?.has(fileOrFolder.fullPath)}
+                  fileHistory={fileHistory}
                  onCopyPath={() => {
                    onCopyPath(fileOrFolder);
                  }}
@@ -253,19 +258,55 @@ interface FileProps {
  file: FileNode;
  selected: boolean;
  unsavedChanges?: boolean;
+  fileHistory?: Record<string, FileHistory>;
  onCopyPath: () => void;
  onCopyRelativePath: () => void;
  onClick: () => void;
 }

 function File({
-  file: { depth, name },
+  file: { depth, name, fullPath },
  onClick,
  onCopyPath,
  onCopyRelativePath,
  selected,
  unsavedChanges = false,
+  fileHistory = {},
 }: FileProps) {
+  const fileModifications = fileHistory[fullPath];
+  const hasModifications = fileModifications !== undefined;
+
+  // Calculate added and removed lines from the most recent changes
+  const { additions, deletions } = useMemo(() => {
+    if (!fileModifications?.originalContent) return { additions: 0, deletions: 0 };
+
+    // Usar a mesma lógica do DiffView para processar as mudanças
+    const normalizedOriginal = fileModifications.originalContent.replace(/\r\n/g, '\n');
+    const normalizedCurrent = fileModifications.versions[fileModifications.versions.length - 1]?.content.replace(/\r\n/g, '\n') || '';
+
+    if (normalizedOriginal === normalizedCurrent) {
+      return { additions: 0, deletions: 0 };
+    }
+
+    const changes = diffLines(normalizedOriginal, normalizedCurrent, {
+      newlineIsToken: false,
+      ignoreWhitespace: true,
+      ignoreCase: false
+    });
+
+    return changes.reduce((acc: { additions: number; deletions: number }, change: Change) => {
+      if (change.added) {
+        acc.additions += change.value.split('\n').length;
+      }
+      if (change.removed) {
+        acc.deletions += change.value.split('\n').length;
+      }
+      return acc;
+    }, { additions: 0, deletions: 0 });
+  }, [fileModifications]);
+
+  const showStats = additions > 0 || deletions > 0;
+
  return (
    <FileContextMenu onCopyPath={onCopyPath} onCopyRelativePath={onCopyRelativePath}>
      <NodeButton
@@ -286,7 +327,21 @@ function File({
          })}
        >
          <div className="flex-1 truncate pr-2">{name}</div>
-          {unsavedChanges && <span className="i-ph:circle-fill scale-68 shrink-0 text-orange-500" />}
+          <div className="flex items-center gap-1">
+            {showStats && (
+              <div className="flex items-center gap-1 text-xs">
+                {additions > 0 && (
+                  <span className="text-green-500">+{additions}</span>
+                )}
+                {deletions > 0 && (
+                  <span className="text-red-500">-{deletions}</span>
+                )}
+              </div>
+            )}
+            {unsavedChanges && (
+              <span className="i-ph:circle-fill scale-68 shrink-0 text-orange-500" />
+            )}
+          </div>
        </div>
      </NodeButton>
    </FileContextMenu>
--- a/app/components/workbench/Workbench.client.tsx
+++ b/app/components/workbench/Workbench.client.tsx
@@ -1,8 +1,15 @@
 import { useStore } from '@nanostores/react';
 import { motion, type HTMLMotionProps, type Variants } from 'framer-motion';
 import { computed } from 'nanostores';
-import { memo, useCallback, useEffect, useState } from 'react';
+import { memo, useCallback, useEffect, useState, useMemo } from 'react';
 import { toast } from 'react-toastify';
+import { Popover, Transition } from '@headlessui/react';
+import { diffLines, type Change } from 'diff';
+import { formatDistanceToNow as formatDistance } from 'date-fns';
+import { ActionRunner } from '~/lib/runtime/action-runner';
+import { getLanguageFromExtension } from '~/utils/getLanguageFromExtension';
+import type { FileHistory } from '~/types/actions';
+import { DiffView } from './DiffView';
 import {
  type OnChangeCallback as OnEditorChange,
  type OnScrollCallback as OnEditorScroll,
@@ -18,10 +25,16 @@ import { EditorPanel } from './EditorPanel';
 import { Preview } from './Preview';
 import useViewport from '~/lib/hooks';
 import { PushToGitHubDialog } from '~/components/@settings/tabs/connections/components/PushToGitHubDialog';
+import Cookies from 'js-cookie';

 interface WorkspaceProps {
  chatStarted?: boolean;
  isStreaming?: boolean;
+  actionRunner: ActionRunner;
+  metadata?: {
+    gitUrl?: string;
+  };
+  updateChatMestaData?: (metadata: any) => void;
 }

 const viewTransition = { ease: cubicEasingFn };
@@ -31,6 +44,10 @@ const sliderOptions: SliderOptions<WorkbenchViewType> = {
    value: 'code',
    text: 'Code',
  },
+  middle: {
+    value: 'diff',
+    text: 'Diff',
+  },
  right: {
    value: 'preview',
    text: 'Preview',
@@ -54,11 +71,211 @@ const workbenchVariants = {
  },
 } satisfies Variants;

-export const Workbench = memo(({ chatStarted, isStreaming }: WorkspaceProps) => {
+const FileModifiedDropdown = memo(({
+  fileHistory,
+  onSelectFile,
+  diffViewMode,
+  toggleDiffViewMode,
+}: {
+  fileHistory: Record<string, FileHistory>,
+  onSelectFile: (filePath: string) => void,
+  diffViewMode: 'inline' | 'side',
+  toggleDiffViewMode: () => void,
+}) => {
+  const modifiedFiles = Object.entries(fileHistory);
+  const hasChanges = modifiedFiles.length > 0;
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const filteredFiles = useMemo(() => {
+    return modifiedFiles.filter(([filePath]) =>
+      filePath.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+  }, [modifiedFiles, searchQuery]);
+
+  return (
+    <div className="flex items-center gap-2">
+      <Popover className="relative">
+        {({ open }: { open: boolean }) => (
+          <>
+            <Popover.Button className="flex items-center gap-2 px-3 py-1.5 text-sm rounded-lg bg-bolt-elements-background-depth-2 hover:bg-bolt-elements-background-depth-3 transition-colors text-bolt-elements-textPrimary border border-bolt-elements-borderColor">
+              <span className="font-medium">File Changes</span>
+              {hasChanges && (
+                <span className="w-5 h-5 rounded-full bg-accent-500/20 text-accent-500 text-xs flex items-center justify-center border border-accent-500/30">
+                  {modifiedFiles.length}
+                </span>
+              )}
+            </Popover.Button>
+            <Transition
+              show={open}
+              enter="transition duration-100 ease-out"
+              enterFrom="transform scale-95 opacity-0"
+              enterTo="transform scale-100 opacity-100"
+              leave="transition duration-75 ease-out"
+              leaveFrom="transform scale-100 opacity-100"
+              leaveTo="transform scale-95 opacity-0"
+            >
+              <Popover.Panel className="absolute right-0 z-20 mt-2 w-80 origin-top-right rounded-xl bg-bolt-elements-background-depth-2 shadow-xl border border-bolt-elements-borderColor">
+                <div className="p-2">
+                  <div className="relative mx-2 mb-2">
+                    <input
+                      type="text"
+                      placeholder="Search files..."
+                      value={searchQuery}
+                      onChange={(e) => setSearchQuery(e.target.value)}
+                      className="w-full pl-8 pr-3 py-1.5 text-sm rounded-lg bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor focus:outline-none focus:ring-2 focus:ring-blue-500/50"
+                    />
+                    <div className="absolute left-2 top-1/2 -translate-y-1/2 text-bolt-elements-textTertiary">
+                      <div className="i-ph:magnifying-glass" />
+                    </div>
+                  </div>
+
+                  <div className="max-h-60 overflow-y-auto">
+                    {filteredFiles.length > 0 ? (
+                      filteredFiles.map(([filePath, history]) => {
+                        const extension = filePath.split('.').pop() || '';
+                        const language = getLanguageFromExtension(extension);
+
+                        return (
+                          <button
+                            key={filePath}
+                            onClick={() => onSelectFile(filePath)}
+                            className="w-full px-3 py-2 text-left rounded-md hover:bg-bolt-elements-background-depth-1 transition-colors group bg-transparent"
+                          >
+                            <div className="flex items-center gap-2">
+                              <div className="shrink-0 w-5 h-5 text-bolt-elements-textTertiary">
+                                {['typescript', 'javascript', 'jsx', 'tsx'].includes(language) && <div className="i-ph:file-js" />}
+                                {['css', 'scss', 'less'].includes(language) && <div className="i-ph:paint-brush" />}
+                                {language === 'html' && <div className="i-ph:code" />}
+                                {language === 'json' && <div className="i-ph:brackets-curly" />}
+                                {language === 'python' && <div className="i-ph:file-text" />}
+                                {language === 'markdown' && <div className="i-ph:article" />}
+                                {['yaml', 'yml'].includes(language) && <div className="i-ph:file-text" />}
+                                {language === 'sql' && <div className="i-ph:database" />}
+                                {language === 'dockerfile' && <div className="i-ph:cube" />}
+                                {language === 'shell' && <div className="i-ph:terminal" />}
+                                {!['typescript', 'javascript', 'css', 'html', 'json', 'python', 'markdown', 'yaml', 'yml', 'sql', 'dockerfile', 'shell', 'jsx', 'tsx', 'scss', 'less'].includes(language) && <div className="i-ph:file-text" />}
+                              </div>
+                              <div className="flex-1 min-w-0">
+                                <div className="flex items-center justify-between gap-2">
+                                  <div className="flex flex-col min-w-0">
+                                    <span className="truncate text-sm font-medium text-bolt-elements-textPrimary">
+                                      {filePath.split('/').pop()}
+                                    </span>
+                                    <span className="truncate text-xs text-bolt-elements-textTertiary">
+                                      {filePath}
+                                    </span>
+                                  </div>
+                                  {(() => {
+                                    // Calculate diff stats
+                                    const { additions, deletions } = (() => {
+                                      if (!history.originalContent) return { additions: 0, deletions: 0 };
+
+                                      const normalizedOriginal = history.originalContent.replace(/\r\n/g, '\n');
+                                      const normalizedCurrent = history.versions[history.versions.length - 1]?.content.replace(/\r\n/g, '\n') || '';
+
+                                      if (normalizedOriginal === normalizedCurrent) {
+                                        return { additions: 0, deletions: 0 };
+                                      }
+
+                                      const changes = diffLines(normalizedOriginal, normalizedCurrent, {
+                                        newlineIsToken: false,
+                                        ignoreWhitespace: true,
+                                        ignoreCase: false
+                                      });
+
+                                      return changes.reduce((acc: { additions: number; deletions: number }, change: Change) => {
+                                        if (change.added) {
+                                          acc.additions += change.value.split('\n').length;
+                                        }
+                                        if (change.removed) {
+                                          acc.deletions += change.value.split('\n').length;
+                                        }
+                                        return acc;
+                                      }, { additions: 0, deletions: 0 });
+                                    })();
+
+                                    const showStats = additions > 0 || deletions > 0;
+
+                                    return showStats && (
+                                      <div className="flex items-center gap-1 text-xs shrink-0">
+                                        {additions > 0 && (
+                                          <span className="text-green-500">+{additions}</span>
+                                        )}
+                                        {deletions > 0 && (
+                                          <span className="text-red-500">-{deletions}</span>
+                                        )}
+                                      </div>
+                                    );
+                                  })()}
+                                </div>
+                              </div>
+                            </div>
+                          </button>
+                        );
+                      })
+                    ) : (
+                      <div className="flex flex-col items-center justify-center p-4 text-center">
+                        <div className="w-12 h-12 mb-2 text-bolt-elements-textTertiary">
+                          <div className="i-ph:file-dashed" />
+                        </div>
+                        <p className="text-sm font-medium text-bolt-elements-textPrimary">
+                          {searchQuery ? 'No matching files' : 'No modified files'}
+                        </p>
+                        <p className="text-xs text-bolt-elements-textTertiary mt-1">
+                          {searchQuery ? 'Try another search' : 'Changes will appear here as you edit'}
+                        </p>
+                      </div>
+                    )}
+                  </div>
+                </div>
+
+                {hasChanges && (
+                  <div className="border-t border-bolt-elements-borderColor p-2">
+                    <button
+                      onClick={() => {
+                        navigator.clipboard.writeText(
+                          filteredFiles.map(([filePath]) => filePath).join('\n')
+                        );
+                        toast('File list copied to clipboard', { 
+                          icon: <div className="i-ph:check-circle text-accent-500" /> 
+                        });
+                      }}
+                      className="w-full flex items-center justify-center gap-2 px-3 py-1.5 text-sm rounded-lg bg-bolt-elements-background-depth-1 hover:bg-bolt-elements-background-depth-3 transition-colors text-bolt-elements-textTertiary hover:text-bolt-elements-textPrimary"
+                    >
+                      Copy File List
+                    </button>
+                  </div>
+                )}
+              </Popover.Panel>
+            </Transition>
+          </>
+        )}
+      </Popover>
+      <button
+        onClick={(e) => { e.stopPropagation(); toggleDiffViewMode(); }}
+        className="flex items-center gap-2 px-3 py-1.5 text-sm rounded-lg bg-bolt-elements-background-depth-2 hover:bg-bolt-elements-background-depth-3 transition-colors text-bolt-elements-textPrimary border border-bolt-elements-borderColor"
+      >
+        <span className="font-medium">{diffViewMode === 'inline' ? 'Inline' : 'Side by Side'}</span>
+      </button>
+    </div>
+  );
+});
+
+export const Workbench = memo(({ 
+  chatStarted, 
+  isStreaming,
+  actionRunner,
+  metadata,
+  updateChatMestaData
+}: WorkspaceProps) => {
  renderLogger.trace('Workbench');

  const [isSyncing, setIsSyncing] = useState(false);
  const [isPushDialogOpen, setIsPushDialogOpen] = useState(false);
+  const [diffViewMode, setDiffViewMode] = useState<'inline' | 'side'>('inline');
+  const [fileHistory, setFileHistory] = useState<Record<string, FileHistory>>({});
+
+  const modifiedFiles = Array.from(useStore(workbenchStore.unsavedFiles).keys());

  const hasPreview = useStore(computed(workbenchStore.previews, (previews) => previews.length > 0));
  const showWorkbench = useStore(workbenchStore.showWorkbench);
@@ -121,6 +338,15 @@ export const Workbench = memo(({ chatStarted, isStreaming }: WorkspaceProps) =>
    }
  }, []);

+  const handleSelectFile = useCallback((filePath: string) => {
+    workbenchStore.setSelectedFile(filePath);
+    workbenchStore.currentView.set('diff');
+  }, []);
+
+  const toggleDiffViewMode = useCallback(() => {
+    setDiffViewMode(prev => prev === 'inline' ? 'side' : 'inline');
+  }, []);
+
  return (
    chatStarted && (
      <motion.div
@@ -175,6 +401,14 @@ export const Workbench = memo(({ chatStarted, isStreaming }: WorkspaceProps) =>
                    </PanelHeaderButton>
                  </div>
                )}
+                {selectedView === 'diff' && (
+                  <FileModifiedDropdown
+                    fileHistory={fileHistory}
+                    onSelectFile={handleSelectFile}
+                    diffViewMode={diffViewMode}
+                    toggleDiffViewMode={toggleDiffViewMode}
+                  />
+                )}
                <IconButton
                  icon="i-ph:x-circle"
                  className="-mr-1"
@@ -186,8 +420,8 @@ export const Workbench = memo(({ chatStarted, isStreaming }: WorkspaceProps) =>
              </div>
              <div className="relative flex-1 overflow-hidden">
                <View
-                  initial={{ x: selectedView === 'code' ? 0 : '-100%' }}
-                  animate={{ x: selectedView === 'code' ? 0 : '-100%' }}
+                  initial={{ x: '0%' }}
+                  animate={{ x: selectedView === 'code' ? '0%' : '-100%' }}
                >
                  <EditorPanel
                    editorDocument={currentDocument}
@@ -195,6 +429,7 @@ export const Workbench = memo(({ chatStarted, isStreaming }: WorkspaceProps) =>
                    selectedFile={selectedFile}
                    files={files}
                    unsavedFiles={unsavedFiles}
+                    fileHistory={fileHistory}
                    onFileSelect={onFileSelect}
                    onEditorScroll={onEditorScroll}
                    onEditorChange={onEditorChange}
@@ -203,8 +438,19 @@ export const Workbench = memo(({ chatStarted, isStreaming }: WorkspaceProps) =>
                  />
                </View>
                <View
-                  initial={{ x: selectedView === 'preview' ? 0 : '100%' }}
-                  animate={{ x: selectedView === 'preview' ? 0 : '100%' }}
+                  initial={{ x: '100%' }}
+                  animate={{ x: selectedView === 'diff' ? '0%' : selectedView === 'code' ? '100%' : '-100%' }}
+                >
+                  <DiffView 
+                    fileHistory={fileHistory}
+                    setFileHistory={setFileHistory}
+                    diffViewMode={diffViewMode}
+                    actionRunner={actionRunner}
+                  />
+                </View>
+                <View
+                  initial={{ x: '100%' }}
+                  animate={{ x: selectedView === 'preview' ? '0%' : '100%' }}
                >
                  <Preview />
                </View>
@@ -215,14 +461,24 @@ export const Workbench = memo(({ chatStarted, isStreaming }: WorkspaceProps) =>
        <PushToGitHubDialog
          isOpen={isPushDialogOpen}
          onClose={() => setIsPushDialogOpen(false)}
-          onPush={async (repoName, username, token, isPrivate) => {
+          onPush={async (repoName, username, token) => {
            try {
-              const repoUrl = await workbenchStore.pushToGitHub(repoName, undefined, username, token, isPrivate);
+              const commitMessage = prompt('Please enter a commit message:', 'Initial commit') || 'Initial commit';
+              await workbenchStore.pushToGitHub(repoName, commitMessage, username, token);
+              const repoUrl = `https://github.com/${username}/${repoName}`;
+              
+              if (updateChatMestaData && !metadata?.gitUrl) {
+                updateChatMestaData({
+                  ...(metadata || {}),
+                  gitUrl: repoUrl,
+                });
+              }
+              
              return repoUrl;
            } catch (error) {
              console.error('Error pushing to GitHub:', error);
              toast.error('Failed to push to GitHub');
-              throw error; // Rethrow to let PushToGitHubDialog handle the error state
+              throw error;
            }
          }}
        />
--- a/app/lib/runtime/action-runner.ts
+++ b/app/lib/runtime/action-runner.ts
@@ -1,7 +1,7 @@
 import type { WebContainer } from '@webcontainer/api';
-import { path } from '~/utils/path';
+import { path as nodePath } from '~/utils/path';
 import { atom, map, type MapStore } from 'nanostores';
-import type { ActionAlert, BoltAction } from '~/types/actions';
+import type { ActionAlert, BoltAction, FileHistory } from '~/types/actions';
 import { createScopedLogger } from '~/utils/logger';
 import { unreachable } from '~/utils/unreachable';
 import type { ActionCallbackData } from './message-parser';
@@ -276,9 +276,9 @@ export class ActionRunner {
    }

    const webcontainer = await this.#webcontainer;
-    const relativePath = path.relative(webcontainer.workdir, action.filePath);
+    const relativePath = nodePath.relative(webcontainer.workdir, action.filePath);

-    let folder = path.dirname(relativePath);
+    let folder = nodePath.dirname(relativePath);

    // remove trailing slashes
    folder = folder.replace(/\/+$/g, '');
@@ -304,4 +304,31 @@ export class ActionRunner {

    this.actions.setKey(id, { ...actions[id], ...newState });
  }
+
+  async getFileHistory(filePath: string): Promise<FileHistory | null> {
+    try {
+      const webcontainer = await this.#webcontainer;
+      const historyPath = this.#getHistoryPath(filePath);
+      const content = await webcontainer.fs.readFile(historyPath, 'utf-8');
+      return JSON.parse(content);
+    } catch (error) {
+      return null;
+    }
+  }
+
+  async saveFileHistory(filePath: string, history: FileHistory) {
+    const webcontainer = await this.#webcontainer;
+    const historyPath = this.#getHistoryPath(filePath);
+
+    await this.#runFileAction({
+      type: 'file',
+      filePath: historyPath,
+      content: JSON.stringify(history),
+      changeSource: 'auto-save'
+    } as any);
+  }
+
+  #getHistoryPath(filePath: string) {
+    return nodePath.join('.history', filePath);
+  }
 }
--- a/app/lib/stores/workbench.ts
+++ b/app/lib/stores/workbench.ts
@@ -10,18 +10,16 @@ import { FilesStore, type FileMap } from './files';
 import { PreviewsStore } from './previews';
 import { TerminalStore } from './terminal';
 import JSZip from 'jszip';
-import fileSaver from 'file-saver';
+import pkg from 'file-saver';
+const { saveAs } = pkg;
 import { Octokit, type RestEndpointMethodTypes } from '@octokit/rest';
-import { path } from '~/utils/path';
+import * as nodePath from 'node:path';
 import { extractRelativePath } from '~/utils/diff';
 import { description } from '~/lib/persistence';
 import Cookies from 'js-cookie';
 import { createSampler } from '~/utils/sampler';
 import type { ActionAlert } from '~/types/actions';

-// Destructure saveAs from the CommonJS module
-const { saveAs } = fileSaver;
-
 export interface ArtifactState {
  id: string;
  title: string;
@@ -34,7 +32,7 @@ export type ArtifactUpdateState = Pick<ArtifactState, 'title' | 'closed'>;

 type Artifacts = MapStore<Record<string, ArtifactState>>;

-export type WorkbenchViewType = 'code' | 'preview';
+export type WorkbenchViewType = 'code' | 'diff' | 'preview';

 export class WorkbenchStore {
  #previewsStore = new PreviewsStore(webcontainer);
@@ -332,7 +330,7 @@ export class WorkbenchStore {

    if (data.action.type === 'file') {
      const wc = await webcontainer;
-      const fullPath = path.join(wc.workdir, data.action.filePath);
+      const fullPath = nodePath.join(wc.workdir, data.action.filePath);

      if (this.selectedFile.value !== fullPath) {
        this.setSelectedFile(fullPath);
@@ -437,13 +435,7 @@ export class WorkbenchStore {
    return syncedFiles;
  }

-  async pushToGitHub(
-    repoName: string,
-    commitMessage?: string,
-    githubUsername?: string,
-    ghToken?: string,
-    isPrivate: boolean = false,
-  ) {
+  async pushToGitHub(repoName: string, commitMessage?: string, githubUsername?: string, ghToken?: string) {
    try {
      // Use cookies if username and token are not provided
      const githubToken = ghToken || Cookies.get('githubToken');
@@ -467,7 +459,7 @@ export class WorkbenchStore {
          // Repository doesn't exist, so create a new one
          const { data: newRepo } = await octokit.repos.createForAuthenticatedUser({
            name: repoName,
-            private: isPrivate,
+            private: false,
            auto_init: true,
          });
          repo = newRepo;
@@ -545,7 +537,7 @@ export class WorkbenchStore {
        sha: newCommit.sha,
      });

-      return repo.html_url; // Return the URL instead of showing alert
+      alert(`Repository created and code pushed: ${repo.html_url}`);
    } catch (error) {
      console.error('Error pushing to GitHub:', error);
      throw error; // Rethrow the error for further handling
--- a/app/styles/diff-view.css
+++ b/app/styles/diff-view.css
@@ -0,0 +1,72 @@
+.diff-panel-content {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(155, 155, 155, 0.5) transparent;
+}
+
+.diff-panel-content::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.diff-panel-content::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.diff-panel-content::-webkit-scrollbar-thumb {
+  background-color: rgba(155, 155, 155, 0.5);
+  border-radius: 4px;
+  border: 2px solid transparent;
+}
+
+.diff-panel-content::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(155, 155, 155, 0.7);
+}
+
+/* Hide scrollbar for the left panel when not hovered */
+.diff-panel:not(:hover) .diff-panel-content::-webkit-scrollbar {
+  display: none;
+}
+
+.diff-panel:not(:hover) .diff-panel-content {
+  scrollbar-width: none;
+}
+
+/* Estilos para as linhas de diff */
+.diff-block-added {
+  @apply bg-green-500/20 border-l-4 border-green-500;
+}
+
+.diff-block-removed {
+  @apply bg-red-500/20 border-l-4 border-red-500;
+}
+
+/* Melhorar contraste para mudanças */
+.diff-panel-content .group:hover .diff-block-added {
+  @apply bg-green-500/30;
+}
+
+.diff-panel-content .group:hover .diff-block-removed {
+  @apply bg-red-500/30;
+}
+
+/* Estilos unificados para ambas as visualizações */
+.diff-line {
+  @apply flex group min-w-fit transition-colors duration-150;
+}
+
+.diff-line-number {
+  @apply w-12 shrink-0 pl-2 py-0.5 text-left font-mono text-bolt-elements-textTertiary border-r border-bolt-elements-borderColor bg-bolt-elements-background-depth-1;
+}
+
+.diff-line-content {
+  @apply px-4 py-0.5 font-mono whitespace-pre flex-1 group-hover:bg-bolt-elements-background-depth-2 text-bolt-elements-textPrimary;
+}
+
+/* Cores específicas para adições/remoções */
+.diff-added {
+  @apply bg-green-500/20 border-l-4 border-green-500;
+}
+
+.diff-removed {
+  @apply bg-red-500/20 border-l-4 border-red-500;
+} 
--- a/app/types/actions.ts
+++ b/app/types/actions.ts
@@ -1,3 +1,5 @@
+import type { Change } from 'diff';
+
 export type ActionType = 'file' | 'shell';

 export interface BaseAction {
@@ -28,3 +30,15 @@ export interface ActionAlert {
  content: string;
  source?: 'terminal' | 'preview'; // Add source to differentiate between terminal and preview errors
 }
+
+export interface FileHistory {
+  originalContent: string;
+  lastModified: number;
+  changes: Change[];
+  versions: {
+    timestamp: number;
+    content: string;
+  }[];
+  // Novo campo para rastrear a origem das mudanças
+  changeSource?: 'user' | 'auto-save' | 'external';
+}
--- a/app/utils/getLanguageFromExtension.ts
+++ b/app/utils/getLanguageFromExtension.ts
@@ -0,0 +1,24 @@
+export const getLanguageFromExtension = (ext: string): string => {
+  const map: Record<string, string> = {
+    js: "javascript",
+    jsx: "jsx",
+    ts: "typescript",
+    tsx: "tsx",
+    json: "json",
+    html: "html",
+    css: "css",
+    py: "python",
+    java: "java",
+    rb: "ruby",
+    cpp: "cpp",
+    c: "c",
+    cs: "csharp",
+    go: "go",
+    rs: "rust",
+    php: "php",
+    swift: "swift",
+    md: "plaintext",
+    sh: "bash",
+  };
+  return map[ext] || "typescript";
+}; 
--- a/package.json
+++ b/package.json
@@ -74,6 +74,8 @@
    "@radix-ui/react-switch": "^1.1.1",
    "@radix-ui/react-tabs": "^1.1.2",
    "@radix-ui/react-tooltip": "^1.1.4",
+    "lucide-react": "^0.474.0",
+    "next-themes": "^0.4.4",
    "@remix-run/cloudflare": "^2.15.2",
    "@remix-run/cloudflare-pages": "^2.15.2",
    "@remix-run/node": "^2.15.2",
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -89,6 +89,7 @@ export default defineConfig((config) => {
      __PKG_DEV_DEPENDENCIES: JSON.stringify(pkg.devDependencies),
      __PKG_PEER_DEPENDENCIES: JSON.stringify(pkg.peerDependencies),
      __PKG_OPTIONAL_DEPENDENCIES: JSON.stringify(pkg.optionalDependencies),
+      module: {},
    },
    build: {
      target: 'esnext',
--- a/wrangler.toml
+++ b/wrangler.toml
@@ -3,4 +3,4 @@ name = "bolt"
 compatibility_flags = ["nodejs_compat"]
 compatibility_date = "2024-07-01"
 pages_build_output_dir = "./build/client"
-send_metrics = false
+send_metrics = false