@benzsiangco/jarvis 1.0.0 → 1.1.0

package/src/web/ui/src/components/Modules/Chat/MessageItem.tsx

@@ -0,0 +1,446 @@
+import React, { useState } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { User, Bot, Copy, Check, Zap, ChevronDown, ChevronUp, Terminal as LucideTerminal, Code, Activity, Link, Sliders, FileText, Play, AlertCircle } from 'lucide-react';
+import type { Message, ToolCall } from '../../../types';
+
+const cn = (...classes: any[]) => classes.filter(Boolean).join(' ');
+
+// Helper to get language from file extension
+const getLanguageFromFilePath = (filePath: string): string => {
+  if (!filePath) return 'text';
+  const ext = filePath.split('.').pop()?.toLowerCase();
+  const langMap: Record<string, string> = {
+    'js': 'javascript',
+    'jsx': 'jsx',
+    'ts': 'typescript',
+    'tsx': 'tsx',
+    'py': 'python',
+    'html': 'html',
+    'css': 'css',
+    'json': 'json',
+    'md': 'markdown',
+    'sh': 'bash',
+    'yml': 'yaml',
+    'yaml': 'yaml',
+  };
+  return langMap[ext || ''] || 'text';
+};
+
+// Helper to format tool args in a readable way
+const formatToolArgs = (tool: ToolCall) => {
+  if (tool.name === 'bash') {
+    // Always show the actual command
+    return tool.args.command || tool.args.description || '';
+  }
+  
+  if (tool.name === 'read') {
+    return `File: ${tool.args.filePath || 'unknown'}`;
+  }
+  
+  if (tool.name === 'write') {
+    const lines = tool.args.content ? tool.args.content.split('\n').length : 0;
+    return `File: ${tool.args.filePath || 'unknown'}\nLines: ${lines}`;
+  }
+  
+  if (tool.name === 'edit') {
+    // For edit, we'll show a custom diff view
+    return null; // Special case handled in display
+  }
+  
+  return JSON.stringify(tool.args, null, 2);
+};
+
+// Helper to format tool result in a readable way
+const formatToolResult = (tool: ToolCall) => {
+  const result = tool.result;
+  
+  // Handle bash/shell output specially
+  if (tool.name === 'bash') {
+    if (typeof result === 'string') {
+      return result.trim();
+    }
+    
+    if (result && typeof result === 'object') {
+      // Extract actual shell output from response object
+      if (result.error) {
+        return result.error;
+      }
+      if (result.content) {
+        return result.content;
+      }
+      // If there's stdout/stderr
+      if (result.stdout) {
+        return result.stderr ? `${result.stdout}\n${result.stderr}` : result.stdout;
+      }
+    }
+  }
+  
+  // For other tools
+  if (typeof result === 'string') {
+    return result.trim();
+  }
+  
+  if (result && typeof result === 'object') {
+    // Check if it's a response object with content
+    if (result.content && typeof result.content === 'string') {
+      return result.content;
+    }
+    // Check for error field
+    if (result.error && typeof result.error === 'string') {
+      return result.error;
+    }
+    return JSON.stringify(result, null, 2);
+  }
+  
+  return String(result);
+};
+
+const markdownComponents = {
+  code({ node, inline, className, children, ...props }: any) {
+    const match = /language-(\w+)/.exec(className || '');
+    const codeString = String(children).replace(/\n$/, '');
+    const [copied, setCopied] = useState(false);
+
+    const handleCopy = () => {
+      navigator.clipboard.writeText(codeString);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    };
+    
+    return !inline && match ? (
+      <div className="my-6 rounded-xl overflow-hidden border border-zinc-800 bg-zinc-950 shadow-sm text-left group">
+        <div className="bg-zinc-900 px-4 py-2.5 border-b border-zinc-800 flex justify-between items-center">
+          <span className="text-[10px] font-black uppercase tracking-widest text-zinc-500">{match[1]}</span>
+          <button onClick={handleCopy} className="p-1.5 hover:bg-zinc-800 rounded-md text-zinc-500 hover:text-zinc-200 transition-all active:scale-90">
+            {copied ? <Check size={14} className="text-emerald-500" /> : <Copy size={14} />}
+          </button>
+        </div>
+        <SyntaxHighlighter 
+          style={vscDarkPlus} 
+          language={match[1]} 
+          PreTag="div" 
+          customStyle={{
+            margin: 0,
+            padding: '1.25rem',
+            background: 'transparent',
+            fontSize: '0.875rem',
+            lineHeight: '1.6'
+          }}
+        >
+          {codeString}
+        </SyntaxHighlighter>
+      </div>
+    ) : (
+      <code className="bg-zinc-800/80 text-zinc-200 px-1.5 py-0.5 rounded font-mono text-sm border border-zinc-700/30" {...props}>
+        {children}
+      </code>
+    );
+  }
+};
+
+function ToolSteps({ tools }: { tools: ToolCall[] }) {
+  const [isExpanded, setIsExpanded] = useState(true);
+  
+  // Mock duration for now as backend doesn't provide tool-level timing yet
+  const duration = "2s"; 
+  
+  return (
+    <div className="mb-4">
+      <button 
+        type="button"
+        onClick={() => setIsExpanded(!isExpanded)}
+        className="flex items-center gap-1.5 text-xs font-medium text-zinc-500 hover:text-zinc-200 transition-colors select-none group"
+      >
+        <span>{isExpanded ? 'Hide steps' : 'Show steps'}</span>
+        <span className="opacity-50">·</span>
+        <span className="font-mono opacity-80">{tools.length} items</span>
+        <div className="flex items-center justify-center w-4 h-4 opacity-70 group-hover:opacity-100 transition-opacity ml-0.5">
+           <svg 
+             fill="none" 
+             viewBox="0 0 20 20" 
+             aria-hidden="true" 
+             className={cn("w-4 h-4 transition-transform duration-200", isExpanded && "rotate-180")}
+           >
+             <path d="M6.66675 12.4998L10.0001 15.8332L13.3334 12.4998M6.66675 7.49984L10.0001 4.1665L13.3334 7.49984" stroke="currentColor" strokeLinecap="square"></path>
+           </svg>
+        </div>
+      </button>
+      
+      {isExpanded && (
+        <div className="mt-2 space-y-2 pl-1 border-l-2 border-zinc-800/50 ml-1">
+           {tools.map((t, i) => <ToolCallRow key={i} tool={t} />)}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function ToolCallRow({ tool }: { tool: ToolCall }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const isDangerous = ['bash', 'edit'].includes(tool.name);
+  const isError = tool.result && (
+    (typeof tool.result === 'string' && (tool.result.startsWith('Error') || tool.result.includes('not found') || tool.result.includes('failed')))
+  );
+
+  // Icon Mapping
+  const Icon = tool.name === 'bash' ? LucideTerminal : 
+               tool.name === 'read' ? Link : 
+               tool.name === 'edit' ? Sliders :
+               tool.name === 'write' ? FileText : Play;
+
+  // Header Text
+  const summary = tool.name === 'bash' ? (tool.args.description || tool.args.command) : 
+                  tool.name === 'read' ? (tool.args.filePath?.split(/[/\\]/).pop() || 'file') :
+                  tool.name === 'write' ? (tool.args.filePath?.split(/[/\\]/).pop() || 'file') :
+                  tool.name === 'edit' ? (tool.args.filePath?.split(/[/\\]/).pop() || 'file') :
+                  JSON.stringify(tool.args).slice(0, 50);
+
+  // Diff Stats for Edit
+  let diffStats = null;
+  if (tool.name === 'edit' && tool.args.newString && tool.args.oldString) {
+     const added = tool.args.newString.split('\n').length;
+     const removed = tool.args.oldString.split('\n').length;
+     diffStats = (
+       <div className="flex items-center gap-3 text-[10px] font-mono ml-auto mr-4">
+          <span className="text-emerald-500">+{added}</span>
+          <span className="text-red-500">-{removed}</span>
+       </div>
+     );
+  }
+
+  // Special rendering for Edit tool
+  const isEdit = tool.name === 'edit';
+
+  return (
+    <div className="rounded-lg overflow-hidden transition-all duration-200">
+      <button 
+        onClick={() => setIsOpen(!isOpen)}
+        className={cn(
+          "w-full flex items-center gap-4 px-4 py-3 text-left border rounded-xl transition-all group select-none",
+          isError 
+            ? "bg-red-500/10 border-red-500/20 hover:bg-red-500/15" 
+            : isOpen 
+              ? "bg-zinc-800/40 border-zinc-700" 
+              : "bg-zinc-900/40 border-zinc-800/60 hover:bg-zinc-800/40 hover:border-zinc-700/60"
+        )}
+      >
+        {/* Status / Icon */}
+        <div className={cn(
+          "shrink-0 flex items-center justify-center w-5 h-5", 
+          isError ? "text-red-500" : "text-zinc-500"
+        )}>
+           {isError ? <AlertCircle size={16} /> : <Icon size={16} />}
+        </div>
+        
+        {/* Label */}
+        <span className={cn(
+           "text-sm font-bold shrink-0 capitalize",
+           isError ? "text-red-400" : "text-zinc-200"
+        )}>
+          {tool.name === 'bash' ? 'Shell' : tool.name}
+        </span>
+
+        {/* Content Summary */}
+        <span className={cn(
+          "text-sm font-medium truncate flex-1",
+          isError ? "text-red-400/70" : "text-zinc-500"
+        )}>
+          {isError && typeof tool.result === 'string' ? tool.result.slice(0, 60) + '...' : summary}
+        </span>
+
+        {/* Diff Stats (if edit) */}
+        {diffStats}
+
+        {/* Chevron */}
+        <div className={cn("shrink-0 transition-transform duration-200 text-zinc-600", isOpen && "rotate-180")}>
+           <ChevronDown size={14} />
+        </div>
+      </button>
+
+      {isOpen && (
+        <div className="px-4 pb-3 pt-2 ml-4 border-l-2 border-zinc-800 space-y-3 mt-1">
+           {isEdit ? (
+             // Special Edit Display with Syntax Highlighting
+             <>
+               <div className="space-y-1">
+                 <div className="text-[10px] font-black uppercase text-zinc-600 tracking-wider">File</div>
+                 <div className="font-mono text-xs text-zinc-400 bg-zinc-950/50 p-2 rounded-lg border border-zinc-900">
+                    {tool.args.filePath}
+                 </div>
+               </div>
+               
+               <div className="space-y-1">
+                 <div className="text-[10px] font-black uppercase text-red-400 tracking-wider flex items-center gap-2">
+                   <span>Removed</span>
+                   <span className="font-mono text-[9px]">{tool.args.oldString?.split('\n').length || 0} lines</span>
+                 </div>
+                 <div className="rounded-lg overflow-hidden border border-red-900/30 bg-red-950/10">
+                   <SyntaxHighlighter
+                     language={getLanguageFromFilePath(tool.args.filePath)}
+                     style={vscDarkPlus}
+                     showLineNumbers={true}
+                     customStyle={{
+                       margin: 0,
+                       padding: '1rem',
+                       background: 'rgba(127, 29, 29, 0.1)',
+                       fontSize: '0.75rem',
+                       maxHeight: '300px',
+                     }}
+                     lineNumberStyle={{
+                       minWidth: '2.5em',
+                       paddingRight: '1em',
+                       color: '#ef4444',
+                       opacity: 0.5
+                     }}
+                   >
+                     {tool.args.oldString || ''}
+                   </SyntaxHighlighter>
+                 </div>
+               </div>
+               
+               <div className="space-y-1">
+                 <div className="text-[10px] font-black uppercase text-emerald-400 tracking-wider flex items-center gap-2">
+                   <span>Added</span>
+                   <span className="font-mono text-[9px]">{tool.args.newString?.split('\n').length || 0} lines</span>
+                 </div>
+                 <div className="rounded-lg overflow-hidden border border-emerald-900/30 bg-emerald-950/10">
+                   <SyntaxHighlighter
+                     language={getLanguageFromFilePath(tool.args.filePath)}
+                     style={vscDarkPlus}
+                     showLineNumbers={true}
+                     customStyle={{
+                       margin: 0,
+                       padding: '1rem',
+                       background: 'rgba(6, 78, 59, 0.1)',
+                       fontSize: '0.75rem',
+                       maxHeight: '300px',
+                     }}
+                     lineNumberStyle={{
+                       minWidth: '2.5em',
+                       paddingRight: '1em',
+                       color: '#10b981',
+                       opacity: 0.5
+                     }}
+                   >
+                     {tool.args.newString || ''}
+                   </SyntaxHighlighter>
+                 </div>
+               </div>
+             </>
+           ) : (
+             // Standard Tool Display
+             <>
+               <div className="space-y-1">
+                 <div className="text-[10px] font-black uppercase text-zinc-600 tracking-wider">
+                   {tool.name === 'bash' ? 'Command' : 'Input'}
+                 </div>
+                 <div className={cn(
+                   "font-mono text-xs p-3 rounded-lg border overflow-x-auto whitespace-pre-wrap break-words",
+                   tool.name === 'bash' 
+                     ? "bg-zinc-950 border-zinc-800 text-emerald-400" 
+                     : "bg-zinc-950/50 border-zinc-900 text-zinc-400"
+                 )}>
+                    {formatToolArgs(tool)}
+                 </div>
+               </div>
+               
+               {/* Output Result */}
+               {tool.result && (
+                 <div className="space-y-1">
+                   <div className="text-[10px] font-black uppercase text-zinc-600 tracking-wider">Output</div>
+                   <div className={cn(
+                     "font-mono text-xs p-3 rounded-lg border overflow-x-auto whitespace-pre-wrap break-words max-h-96 overflow-y-auto",
+                     isError 
+                       ? "bg-zinc-950 border-red-900/30 text-red-400" 
+                       : tool.name === 'bash'
+                       ? "bg-zinc-950 border-zinc-800 text-zinc-300"
+                       : "bg-zinc-950/50 border-zinc-900 text-emerald-500/80"
+                   )}>
+                      {formatToolResult(tool)}
+                   </div>
+                 </div>
+               )}
+             </>
+           )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function MessageItem({ message }: { message: Message }) {
+  const [isThinkingExpanded, setIsThinkingExpanded] = useState(true);
+  const isUser = message.role === 'user';
+  
+  // Format timestamp
+  const formatTime = (timestamp: string | Date) => {
+    const date = new Date(timestamp);
+    const now = new Date();
+    const diff = now.getTime() - date.getTime();
+    const seconds = Math.floor(diff / 1000);
+    const minutes = Math.floor(seconds / 60);
+    const hours = Math.floor(minutes / 60);
+    const days = Math.floor(hours / 24);
+    
+    if (days > 0) return `${days}d ago`;
+    if (hours > 0) return `${hours}h ago`;
+    if (minutes > 0) return `${minutes}m ago`;
+    if (seconds > 30) return `${seconds}s ago`;
+    return 'just now';
+  };
+
+  return (
+    <div className={cn("w-full py-6 border-b border-zinc-900/30 transition-colors", !isUser ? "bg-zinc-900/5" : "bg-transparent")}>
+      <div className="max-w-4xl mx-auto flex gap-6 px-6 md:px-12">
+        <div className={cn("w-8 h-8 rounded shrink-0 flex items-center justify-center shadow-lg transition-transform", isUser ? "bg-zinc-800 text-zinc-300" : "bg-cyan-900/20 text-cyan-500")}>
+          {isUser ? <User size={16} /> : <Bot size={16} />}
+        </div>
+
+        <div className="flex-1 min-w-0 space-y-4">
+          {message.thinking && (
+            <div className="mb-4">
+              <button 
+                type="button"
+                onClick={() => setIsThinkingExpanded(!isThinkingExpanded)}
+                className="flex items-center gap-1.5 text-xs font-medium text-zinc-500 hover:text-zinc-200 transition-colors select-none group"
+              >
+                <span>{isThinkingExpanded ? 'Hide thought' : 'Show thought'}</span>
+                <span className="opacity-50">·</span>
+                <span className="font-mono text-[10px] opacity-60">{formatTime(message.timestamp)}</span>
+                <div className="flex items-center justify-center w-4 h-4 opacity-70 group-hover:opacity-100 transition-opacity ml-0.5">
+                   <svg 
+                     fill="none" 
+                     viewBox="0 0 20 20" 
+                     aria-hidden="true" 
+                     className={cn("w-4 h-4 transition-transform duration-200", isThinkingExpanded && "rotate-180")}
+                   >
+                     <path d="M6.66675 12.4998L10.0001 15.8332L13.3334 12.4998M6.66675 7.49984L10.0001 4.1665L13.3334 7.49984" stroke="currentColor" strokeLinecap="square"></path>
+                   </svg>
+                </div>
+              </button>
+              
+              {isThinkingExpanded && (
+                <div className="mt-2 pl-3 border-l-2 border-amber-500/20 ml-1 text-sm text-zinc-500 font-mono leading-relaxed animate-in fade-in slide-in-from-top-1 duration-200">
+                  {message.thinking}
+                </div>
+              )}
+            </div>
+          )}
+
+          {message.toolCalls && message.toolCalls.length > 0 && (
+            <ToolSteps tools={message.toolCalls} />
+          )}
+
+          <div className="prose prose-invert prose-zinc max-w-none text-base leading-relaxed prose-headings:font-bold prose-p:text-zinc-300 prose-pre:bg-transparent prose-pre:p-0 prose-pre:m-0">
+            <ReactMarkdown remarkPlugins={[remarkGfm]} components={markdownComponents}>
+              {message.content}
+            </ReactMarkdown>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/web/ui/src/components/Modules/Editor/CommandInspector.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { Terminal as LucideTerminal, Clock, Trash2, Zap, MoreHorizontal, Activity } from 'lucide-react';
+
+interface CommandLogEntry {
+  id: string;
+  command: string;
+  timestamp: string;
+  status: 'running' | 'completed' | 'failed';
+  output?: string;
+}
+
+interface CommandInspectorProps {
+  entries: CommandLogEntry[];
+  isVisible: boolean;
+  onClose: () => void;
+}
+
+export function CommandInspector({ entries, isVisible, onClose }: CommandInspectorProps) {
+  if (!isVisible) return null;
+
+  return (
+    <div className="absolute inset-0 bg-zinc-950 z-50 flex flex-col overflow-hidden animate-in fade-in duration-300">
+      <div className="h-16 bg-zinc-900 border-b border-zinc-800 flex items-center justify-between px-8 shrink-0">
+        <div className="flex items-center gap-4">
+           <div className="w-10 h-10 rounded-xl bg-amber-600/10 flex items-center justify-center text-amber-500 shadow-inner border border-amber-500/20">
+              <LucideTerminal size={20} />
+           </div>
+           <div>
+              <p className="text-[10px] font-black uppercase tracking-[0.2em] text-zinc-500">Terminal Command Logs</p>
+              <h3 className="text-sm font-bold text-white italic">Execution Pipeline</h3>
+           </div>
+        </div>
+        <button onClick={onClose} className="p-2 hover:bg-zinc-800 rounded-xl text-zinc-500 hover:text-white transition-all">
+           <MoreHorizontal size={20} />
+        </button>
+      </div>
+
+      <div className="flex-1 overflow-y-auto custom-scrollbar bg-black/50 p-6 md:p-10 space-y-4">
+         {entries.map(entry => (
+           <div key={entry.id} className="bg-zinc-900/30 border border-zinc-900 rounded-2xl p-6 space-y-4 group hover:border-zinc-800 transition-all">
+              <div className="flex items-center justify-between">
+                 <div className="flex items-center gap-4">
+                    <div className={`w-8 h-8 rounded-lg flex items-center justify-center ${
+                      entry.status === 'completed' ? 'bg-emerald-600/10 text-emerald-500' : 
+                      entry.status === 'failed' ? 'bg-rose-600/10 text-rose-500' : 'bg-amber-600/10 text-amber-500'
+                    }`}>
+                       <Activity size={14} className={entry.status === 'running' ? 'animate-spin' : ''} />
+                    </div>
+                    <code className="text-xs font-bold text-zinc-200 uppercase tracking-widest">{entry.command}</code>
+                 </div>
+                 <div className="flex items-center gap-3">
+                    <span className="text-[9px] font-black text-zinc-700 uppercase tracking-widest">{new Date(entry.timestamp).toLocaleTimeString()}</span>
+                 </div>
+              </div>
+              {entry.output && (
+                <div className="bg-zinc-950 p-6 rounded-xl border border-zinc-900 font-mono text-[11px] text-zinc-500 overflow-x-auto whitespace-pre-wrap shadow-inner leading-relaxed opacity-60 group-hover:opacity-100 transition-opacity">
+                   {entry.output}
+                </div>
+              )}
+           </div>
+         ))}
+         {entries.length === 0 && (
+           <div className="h-full flex flex-col items-center justify-center opacity-10 space-y-4 py-20 uppercase tracking-[0.5em] text-zinc-500">
+              <LucideTerminal size={64} />
+              <p className="text-[10px] font-black">No system commands logged</p>
+           </div>
+         )}
+      </div>
+    </div>
+  );
+}

package/src/web/ui/src/components/Modules/Editor/DiffViewer.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { FileCode, Trash2, Check, ArrowRight, Zap, Code } from 'lucide-react';
+
+interface DiffViewerProps {
+  filename: string;
+  before: string;
+  after: string;
+  isVisible: boolean;
+  onClose: () => void;
+}
+
+export function DiffViewer({ filename, before, after, isVisible, onClose }: DiffViewerProps) {
+  if (!isVisible) return null;
+
+  return (
+    <div className="absolute inset-0 bg-zinc-950 z-50 flex flex-col overflow-hidden animate-in fade-in duration-300">
+      <div className="h-16 bg-zinc-900 border-b border-zinc-800 flex items-center justify-between px-8 shrink-0">
+        <div className="flex items-center gap-4">
+           <div className="w-10 h-10 rounded-xl bg-cyan-600/10 flex items-center justify-center text-cyan-500 shadow-inner">
+              <FileCode size={20} />
+           </div>
+           <div>
+              <p className="text-[10px] font-black uppercase tracking-[0.2em] text-zinc-500">Live Stage Edit</p>
+              <h3 className="text-sm font-bold text-white font-mono italic">{filename}</h3>
+           </div>
+        </div>
+        <div className="flex items-center gap-4">
+           <div className="flex items-center gap-2 px-4 py-1.5 bg-zinc-950 border border-zinc-800 rounded-lg text-[9px] font-black uppercase tracking-widest text-zinc-600">
+              <span className="text-emerald-500">+ {after.split('\n').length} lines</span>
+              <span className="opacity-20">/</span>
+              <span className="text-rose-500">- {before.split('\n').length} lines</span>
+           </div>
+           <button onClick={onClose} className="p-2 hover:bg-zinc-800 rounded-xl text-zinc-500 hover:text-white transition-all">
+              <Check size={20} />
+           </button>
+        </div>
+      </div>
+
+      <div className="flex-1 flex overflow-hidden">
+        <div className="flex-1 border-r border-zinc-900 overflow-hidden flex flex-col relative">
+           <div className="absolute top-4 right-6 z-10 px-3 py-1 bg-zinc-950/80 backdrop-blur rounded text-[9px] font-black uppercase text-zinc-700 tracking-widest border border-white/5">Original Segment</div>
+           <div className="flex-1 overflow-auto custom-scrollbar p-6 bg-zinc-950/50">
+             <SyntaxHighlighter 
+                language="typescript" 
+                style={vscDarkPlus} 
+                customStyle={{ background: 'transparent', fontSize: '0.8rem', margin: 0 }}
+             >
+                {before}
+             </SyntaxHighlighter>
+           </div>
+        </div>
+
+        <div className="flex-1 overflow-hidden flex flex-col relative bg-zinc-900/10">
+           <div className="absolute top-4 right-6 z-10 px-3 py-1 bg-cyan-900/20 backdrop-blur rounded text-[9px] font-black uppercase text-cyan-500 tracking-widest border border-cyan-500/20 shadow-[0_0_15px_rgba(6,182,212,0.1)]">Target Output</div>
+           <div className="flex-1 overflow-auto custom-scrollbar p-6 bg-zinc-950/30">
+             <SyntaxHighlighter 
+                language="typescript" 
+                style={vscDarkPlus} 
+                customStyle={{ background: 'transparent', fontSize: '0.8rem', margin: 0 }}
+             >
+                {after}
+             </SyntaxHighlighter>
+           </div>
+        </div>
+      </div>
+
+      <div className="h-12 bg-zinc-900 border-t border-zinc-800 px-8 flex items-center justify-between shrink-0">
+         <div className="flex items-center gap-6">
+            <div className="flex items-center gap-2">
+               <div className="w-1.5 h-1.5 rounded-full bg-cyan-500 animate-pulse" />
+               <span className="text-[9px] font-black uppercase text-zinc-700 tracking-widest italic">Stream writing payload...</span>
+            </div>
+         </div>
+         <div className="flex items-center gap-2 text-[9px] font-black uppercase text-zinc-700">
+            <Zap size={10} className="text-amber-600" />
+            <span>Real-time integrity check: OK</span>
+         </div>
+      </div>
+    </div>
+  );
+}