npm - fluxy-bot - Versions diffs - 0.8.9 → 0.9.0 - Mend

fluxy-bot 0.8.9 → 0.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (106) hide show

package/README.md +53 -84
package/bin/cli.js +1717 -6
package/components.json +18 -18
package/package.json +98 -109
package/postcss.config.js +3 -3
package/scripts/install.ps1 +1 -1
package/scripts/install.sh +1 -1
package/scripts/postinstall.js +47 -58
package/shared/ai.ts +118 -202
package/shared/config.ts +37 -39
package/shared/logger.ts +6 -14
package/shared/paths.ts +10 -16
package/shared/relay.ts +89 -98
package/supervisor/backend.ts +77 -89
package/supervisor/chat/ARCHITECTURE.md +13 -14
package/supervisor/chat/OnboardWizard.tsx +2194 -3419
package/supervisor/chat/fluxy-main.tsx +495 -633
package/supervisor/chat/fluxy.html +24 -36
package/supervisor/chat/onboard-main.tsx +8 -8
package/supervisor/chat/onboard.html +10 -13
package/supervisor/chat/src/components/Chat/AudioBubble.tsx +94 -108
package/supervisor/chat/src/components/Chat/ChatView.tsx +14 -36
package/supervisor/chat/src/components/Chat/ImageLightbox.tsx +71 -89
package/supervisor/chat/src/components/Chat/InputBar.tsx +498 -728
package/supervisor/chat/src/components/Chat/MessageBubble.tsx +154 -246
package/supervisor/chat/src/components/Chat/MessageList.tsx +114 -138
package/supervisor/chat/src/components/Chat/TypingIndicator.tsx +38 -50
package/supervisor/chat/src/components/LoginScreen.tsx +245 -296
package/supervisor/chat/src/hooks/useChat.ts +210 -259
package/supervisor/chat/src/hooks/useFluxyChat.ts +232 -322
package/supervisor/chat/src/hooks/useSpeechRecognition.ts +126 -148
package/supervisor/chat/src/lib/auth.ts +20 -23
package/supervisor/chat/src/lib/ws-client.ts +113 -125
package/supervisor/chat/src/styles/globals.css +76 -85
package/supervisor/file-saver.ts +39 -52
package/supervisor/fluxy-agent.ts +213 -292
package/supervisor/index.ts +895 -1263
package/supervisor/scheduler.ts +237 -299
package/supervisor/tunnel.ts +113 -167
package/supervisor/vite-dev.ts +51 -61
package/supervisor/widget.js +135 -147
package/supervisor/worker.ts +45 -49
package/tsconfig.json +18 -24
package/vite.config.ts +48 -55
package/vite.fluxy.config.ts +34 -34
package/worker/claude-auth.ts +202 -265
package/worker/codex-auth.ts +144 -181
package/worker/db.ts +63 -191
package/worker/index.ts +601 -842
package/workspace/MYSELF.md +1 -1
package/workspace/PULSE.json +6 -6
package/workspace/backend/index.ts +16 -19
package/workspace/client/index.html +47 -60
package/workspace/client/public/manifest.json +21 -21
package/workspace/client/public/sw.js +29 -31
package/workspace/client/src/App.tsx +91 -136
package/workspace/client/src/components/Dashboard/DashboardPage.tsx +68 -72
package/workspace/client/src/components/ErrorBoundary.tsx +11 -11
package/workspace/client/src/components/Layout/DashboardLayout.tsx +35 -35
package/workspace/client/src/components/Layout/Footer.tsx +12 -12
package/workspace/client/src/components/Layout/MobileNav.tsx +23 -23
package/workspace/client/src/components/Layout/Sidebar.tsx +81 -81
package/workspace/client/src/components/ui/avatar.tsx +85 -85
package/workspace/client/src/components/ui/badge.tsx +40 -41
package/workspace/client/src/components/ui/button.tsx +56 -57
package/workspace/client/src/components/ui/card.tsx +75 -75
package/workspace/client/src/components/ui/dialog.tsx +114 -117
package/workspace/client/src/components/ui/dropdown-menu.tsx +191 -199
package/workspace/client/src/components/ui/input.tsx +17 -17
package/workspace/client/src/components/ui/scroll-area.tsx +47 -47
package/workspace/client/src/components/ui/select.tsx +145 -151
package/workspace/client/src/components/ui/separator.tsx +21 -21
package/workspace/client/src/components/ui/sheet.tsx +102 -102
package/workspace/client/src/components/ui/skeleton.tsx +10 -10
package/workspace/client/src/components/ui/switch.tsx +26 -26
package/workspace/client/src/components/ui/tabs.tsx +69 -69
package/workspace/client/src/components/ui/textarea.tsx +14 -14
package/workspace/client/src/components/ui/tooltip.tsx +37 -37
package/workspace/client/src/lib/utils.ts +1 -1
package/workspace/client/src/main.tsx +3 -3
package/workspace/client/src/styles/globals.css +76 -85
package/workspace/skills/code-reviewer/.claude-plugin/plugin.json +3 -3
package/workspace/skills/code-reviewer/skills/code-reviewer/SKILL.md +0 -6
package/workspace/skills/daily-standup/.claude-plugin/plugin.json +3 -3
package/workspace/skills/daily-standup/skills/daily-standup/SKILL.md +0 -7
package/workspace/skills/workspace-helper/.claude-plugin/plugin.json +3 -3
package/workspace/skills/workspace-helper/skills/workspace-helper/SKILL.md +0 -2
package/bin/cli.backup.js +0 -2138
package/cli/commands/daemon.ts +0 -42
package/cli/commands/init.ts +0 -32
package/cli/commands/start.ts +0 -113
package/cli/commands/tunnel.temp.ts +0 -206
package/cli/commands/tunnel.ts +0 -227
package/cli/commands/update.ts +0 -163
package/cli/core/base-adapter.ts +0 -156
package/cli/core/cloudflared.ts +0 -113
package/cli/core/config.ts +0 -73
package/cli/core/os-detector.ts +0 -43
package/cli/core/server.ts +0 -109
package/cli/core/types.ts +0 -15
package/cli/index.ts +0 -72
package/cli/platforms/darwin.ts +0 -146
package/cli/platforms/index.ts +0 -21
package/cli/platforms/linux.ts +0 -156
package/cli/platforms/win32.ts +0 -34
package/cli/utils/ui.ts +0 -37

package/supervisor/chat/fluxy.html CHANGED Viewed

@@ -1,38 +1,26 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <meta
-            name="viewport"
-            content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, interactive-widget=resizes-content"
-        />
-        <title>Fluxy Chat</title>
-    </head>
-    <body class="bg-background text-foreground">
-        <div id="root"></div>
-        <script type="module" src="/fluxy-main.tsx"></script>
-        <script>
-            if ('serviceWorker' in navigator) {
-                navigator.serviceWorker
-                    .register('/fluxy/sw.js')
-                    .then(function (r) {
-                        r.update();
-                        if (r.waiting) {
-                            r.waiting.postMessage({ type: 'SKIP_WAITING' });
-                        }
-                        r.addEventListener('updatefound', function () {
-                            var w = r.installing;
-                            if (w)
-                                w.addEventListener('statechange', function () {
-                                    if (
-                                        w.state === 'installed' &&
-                                        navigator.serviceWorker.controller
-                                    )
-                                        w.postMessage({ type: 'SKIP_WAITING' });
-                                });
-                        });
-                    });
-            }
-        </script>
-    </body>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, interactive-widget=resizes-content" />
+    <title>Fluxy Chat</title>
+  </head>
+  <body class="bg-background text-foreground">
+    <div id="root"></div>
+    <script type="module" src="/fluxy-main.tsx"></script>
+    <script>
+    if('serviceWorker' in navigator){
+      navigator.serviceWorker.register('/fluxy/sw.js').then(function(r){
+        r.update();
+        if(r.waiting){r.waiting.postMessage({type:'SKIP_WAITING'})}
+        r.addEventListener('updatefound',function(){
+          var w=r.installing;
+          if(w)w.addEventListener('statechange',function(){
+            if(w.state==='installed'&&navigator.serviceWorker.controller)w.postMessage({type:'SKIP_WAITING'});
+          });
+        });
+      });
+    }
+    </script>
+  </body>
 </html>

package/supervisor/chat/onboard-main.tsx CHANGED Viewed

@@ -4,16 +4,16 @@ import OnboardWizard from './OnboardWizard';
 import './src/styles/globals.css';
 function App() {
-    const handleComplete = () => {
-        // Notify the parent (dashboard) that onboarding is done
-        window.parent?.postMessage({ type: 'fluxy:onboard-complete' }, '*');
-    };
+  const handleComplete = () => {
+    // Notify the parent (dashboard) that onboarding is done
+    window.parent?.postMessage({ type: 'fluxy:onboard-complete' }, '*');
+  };
-    return <OnboardWizard onComplete={handleComplete} isInitialSetup />;
+  return <OnboardWizard onComplete={handleComplete} isInitialSetup />;
 }
 ReactDOM.createRoot(document.getElementById('root')!).render(
-    <React.StrictMode>
-        <App />
-    </React.StrictMode>
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
 );

package/supervisor/chat/onboard.html CHANGED Viewed

@@ -1,15 +1,12 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <meta
-            name="viewport"
-            content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, interactive-widget=resizes-content"
-        />
-        <title>Fluxy Setup</title>
-    </head>
-    <body class="bg-background text-foreground">
-        <div id="root"></div>
-        <script type="module" src="/onboard-main.tsx"></script>
-    </body>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, interactive-widget=resizes-content" />
+    <title>Fluxy Setup</title>
+  </head>
+  <body class="bg-background text-foreground">
+    <div id="root"></div>
+    <script type="module" src="/onboard-main.tsx"></script>
+  </body>
 </html>

package/supervisor/chat/src/components/Chat/AudioBubble.tsx CHANGED Viewed

@@ -2,130 +2,116 @@ import { useState, useRef, useCallback, useEffect } from 'react';
 import { Play, Pause } from 'lucide-react';
 interface Props {
-    audioData: string; // base64 data URL (data:audio/webm;base64,...)
+  audioData: string; // base64 data URL (data:audio/webm;base64,...)
 }
 function formatDuration(s: number): string {
-    if (!isFinite(s) || isNaN(s)) return '0:00';
-    const mins = Math.floor(s / 60);
-    const secs = Math.floor(s % 60);
-    return `${mins}:${secs.toString().padStart(2, '0')}`;
+  if (!isFinite(s) || isNaN(s)) return '0:00';
+  const mins = Math.floor(s / 60);
+  const secs = Math.floor(s % 60);
+  return `${mins}:${secs.toString().padStart(2, '0')}`;
 }
 export default function AudioBubble({ audioData }: Props) {
-    const [playing, setPlaying] = useState(false);
-    const [progress, setProgress] = useState(0);
-    const [duration, setDuration] = useState(0);
-    const audioRef = useRef<HTMLAudioElement | null>(null);
-    const barRef = useRef<HTMLDivElement>(null);
+  const [playing, setPlaying] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [duration, setDuration] = useState(0);
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+  const barRef = useRef<HTMLDivElement>(null);
-    // Create Audio element once
-    useEffect(() => {
-        const audio = new Audio(audioData);
+  // Create Audio element once
+  useEffect(() => {
+    const audio = new Audio(audioData);
-        audio.addEventListener('durationchange', () => {
-            // webm often reports Infinity initially — skip until real
-            if (isFinite(audio.duration)) setDuration(audio.duration);
-        });
+    audio.addEventListener('durationchange', () => {
+      // webm often reports Infinity initially — skip until real
+      if (isFinite(audio.duration)) setDuration(audio.duration);
+    });
-        audio.addEventListener('timeupdate', () => {
-            if (isFinite(audio.duration) && audio.duration > 0) {
-                setProgress(audio.currentTime / audio.duration);
-                // Update duration if we didn't get it from durationchange
-                if (duration === 0) setDuration(audio.duration);
-            }
-        });
+    audio.addEventListener('timeupdate', () => {
+      if (isFinite(audio.duration) && audio.duration > 0) {
+        setProgress(audio.currentTime / audio.duration);
+        // Update duration if we didn't get it from durationchange
+        if (duration === 0) setDuration(audio.duration);
+      }
+    });
-        audio.addEventListener('ended', () => {
-            setPlaying(false);
-            setProgress(0);
-        });
+    audio.addEventListener('ended', () => {
+      setPlaying(false);
+      setProgress(0);
+    });
-        // Workaround for webm duration=Infinity: seek to large value to force browser to calculate duration
-        audio.addEventListener('loadedmetadata', () => {
-            if (!isFinite(audio.duration)) {
-                audio.currentTime = 1e10;
-                audio.addEventListener('timeupdate', function seekBack() {
-                    if (isFinite(audio.duration)) {
-                        setDuration(audio.duration);
-                        audio.currentTime = 0;
-                        audio.removeEventListener('timeupdate', seekBack);
-                    }
-                });
-            }
+    // Workaround for webm duration=Infinity: seek to large value to force browser to calculate duration
+    audio.addEventListener('loadedmetadata', () => {
+      if (!isFinite(audio.duration)) {
+        audio.currentTime = 1e10;
+        audio.addEventListener('timeupdate', function seekBack() {
+          if (isFinite(audio.duration)) {
+            setDuration(audio.duration);
+            audio.currentTime = 0;
+            audio.removeEventListener('timeupdate', seekBack);
+          }
         });
+      }
+    });
-        audioRef.current = audio;
+    audioRef.current = audio;
-        return () => {
-            audio.pause();
-            audio.src = '';
-        };
-    }, [audioData]);
+    return () => {
+      audio.pause();
+      audio.src = '';
+    };
+  }, [audioData]);
-    const togglePlay = useCallback(() => {
-        const audio = audioRef.current;
-        if (!audio) return;
-        if (playing) {
-            audio.pause();
-            setPlaying(false);
-        } else {
-            audio.play();
-            setPlaying(true);
-        }
-    }, [playing]);
+  const togglePlay = useCallback(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    if (playing) {
+      audio.pause();
+      setPlaying(false);
+    } else {
+      audio.play();
+      setPlaying(true);
+    }
+  }, [playing]);
-    const handleSeek = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
-        const audio = audioRef.current;
-        const bar = barRef.current;
-        if (!audio || !bar || !isFinite(audio.duration)) return;
-        const rect = bar.getBoundingClientRect();
-        const ratio = Math.max(
-            0,
-            Math.min(1, (e.clientX - rect.left) / rect.width)
-        );
-        audio.currentTime = ratio * audio.duration;
-        setProgress(ratio);
-    }, []);
+  const handleSeek = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+    const audio = audioRef.current;
+    const bar = barRef.current;
+    if (!audio || !bar || !isFinite(audio.duration)) return;
+    const rect = bar.getBoundingClientRect();
+    const ratio = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+    audio.currentTime = ratio * audio.duration;
+    setProgress(ratio);
+  }, []);
-    return (
-        <div className="flex items-center gap-2.5 min-w-[180px]">
-            <button
-                onClick={togglePlay}
-                className="flex items-center justify-center h-8 w-8 shrink-0 rounded-full bg-white/20 hover:bg-white/30 transition-colors"
-            >
-                {playing ? (
-                    <Pause className="h-3.5 w-3.5 fill-current" />
-                ) : (
-                    <Play className="h-3.5 w-3.5 fill-current ml-0.5" />
-                )}
-            </button>
-            <div className="flex-1 flex flex-col gap-1">
-                <div
-                    ref={barRef}
-                    onClick={handleSeek}
-                    onKeyDown={e => {
-                        if (e.key === 'Enter' || e.key === ' ') {
-                            handleSeek(e as any);
-                            e.preventDefault();
-                        }
-                    }}
-                    role="slider"
-                    aria-valuenow={currentTime}
-                    aria-valuemax={duration}
-                    aria-valuemin={0}
-                    tabIndex={0}
-                    className="h-1 bg-white/20 rounded-full cursor-pointer relative"
-                >
-                    <div
-                        className="absolute inset-y-0 left-0 bg-white/70 rounded-full transition-[width] duration-100"
-                        style={{ width: `${progress * 100}%` }}
-                    />
-                </div>
-                <span className="text-[10px] opacity-60 tabular-nums">
-                    {formatDuration(playing ? progress * duration : duration)}
-                </span>
-            </div>
+  return (
+    <div className="flex items-center gap-2.5 min-w-[180px]">
+      <button
+        onClick={togglePlay}
+        className="flex items-center justify-center h-8 w-8 shrink-0 rounded-full bg-white/20 hover:bg-white/30 transition-colors"
+      >
+        {playing ? (
+          <Pause className="h-3.5 w-3.5 fill-current" />
+        ) : (
+          <Play className="h-3.5 w-3.5 fill-current ml-0.5" />
+        )}
+      </button>
+      <div className="flex-1 flex flex-col gap-1">
+        <div
+          ref={barRef}
+          onClick={handleSeek}
+          className="h-1 bg-white/20 rounded-full cursor-pointer relative"
+        >
+          <div
+            className="absolute inset-y-0 left-0 bg-white/70 rounded-full transition-[width] duration-100"
+            style={{ width: `${progress * 100}%` }}
+          />
         </div>
-    );
+        <span className="text-[10px] opacity-60 tabular-nums">
+          {formatDuration(playing ? progress * duration : duration)}
+        </span>
+      </div>
+    </div>
+  );
 }

package/supervisor/chat/src/components/Chat/ChatView.tsx CHANGED Viewed

@@ -4,44 +4,22 @@ import MessageList from './MessageList';
 import InputBar from './InputBar';
 interface Props {
-    ws: WsClient | null;
-    onClearContext?: () => void;
-    clearContextRef?: React.MutableRefObject<(() => void) | null>;
-    whisperEnabled?: boolean;
+  ws: WsClient | null;
+  onClearContext?: () => void;
+  clearContextRef?: React.MutableRefObject<(() => void) | null>;
+  whisperEnabled?: boolean;
 }
-export default function ChatView({
-    ws,
-    clearContextRef,
-    whisperEnabled
-}: Props) {
-    const {
-        messages,
-        streaming,
-        streamBuffer,
-        tools,
-        sendMessage,
-        stopStreaming,
-        clearContext
-    } = useChat(ws);
+export default function ChatView({ ws, clearContextRef, whisperEnabled }: Props) {
+  const { messages, streaming, streamBuffer, tools, sendMessage, stopStreaming, clearContext } = useChat(ws);
-    // Expose clearContext to parent via ref
-    if (clearContextRef) clearContextRef.current = clearContext;
+  // Expose clearContext to parent via ref
+  if (clearContextRef) clearContextRef.current = clearContext;
-    return (
-        <div className="flex flex-col h-full overflow-hidden">
-            <MessageList
-                messages={messages}
-                streaming={streaming}
-                streamBuffer={streamBuffer}
-                tools={tools}
-            />
-            <InputBar
-                onSend={sendMessage}
-                onStop={stopStreaming}
-                streaming={streaming}
-                whisperEnabled={whisperEnabled}
-            />
-        </div>
-    );
+  return (
+    <div className="flex flex-col h-full overflow-hidden">
+      <MessageList messages={messages} streaming={streaming} streamBuffer={streamBuffer} tools={tools} />
+      <InputBar onSend={sendMessage} onStop={stopStreaming} streaming={streaming} whisperEnabled={whisperEnabled} />
+    </div>
+  );
 }

package/supervisor/chat/src/components/Chat/ImageLightbox.tsx CHANGED Viewed

@@ -3,102 +3,84 @@ import { motion, AnimatePresence } from 'framer-motion';
 import { ChevronLeft, ChevronRight, X } from 'lucide-react';
 interface Props {
-    images: string[];
-    index: number;
-    onClose: () => void;
-    onNavigate: (index: number) => void;
+  images: string[];
+  index: number;
+  onClose: () => void;
+  onNavigate: (index: number) => void;
 }
-export default function ImageLightbox({
-    images,
-    index,
-    onClose,
-    onNavigate
-}: Props) {
-    const goPrev = useCallback(() => {
-        if (index > 0) onNavigate(index - 1);
-    }, [index, onNavigate]);
+export default function ImageLightbox({ images, index, onClose, onNavigate }: Props) {
+  const goPrev = useCallback(() => {
+    if (index > 0) onNavigate(index - 1);
+  }, [index, onNavigate]);
-    const goNext = useCallback(() => {
-        if (index < images.length - 1) onNavigate(index + 1);
-    }, [index, images.length, onNavigate]);
+  const goNext = useCallback(() => {
+    if (index < images.length - 1) onNavigate(index + 1);
+  }, [index, images.length, onNavigate]);
-    useEffect(() => {
-        const handleKey = (e: KeyboardEvent) => {
-            if (e.key === 'Escape') onClose();
-            if (e.key === 'ArrowLeft') goPrev();
-            if (e.key === 'ArrowRight') goNext();
-        };
-        window.addEventListener('keydown', handleKey);
-        return () => window.removeEventListener('keydown', handleKey);
-    }, [onClose, goPrev, goNext]);
+  useEffect(() => {
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+      if (e.key === 'ArrowLeft') goPrev();
+      if (e.key === 'ArrowRight') goNext();
+    };
+    window.addEventListener('keydown', handleKey);
+    return () => window.removeEventListener('keydown', handleKey);
+  }, [onClose, goPrev, goNext]);
-    return (
-        <AnimatePresence>
-            <motion.div
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
-                exit={{ opacity: 0 }}
-                transition={{ duration: 0.15 }}
-                className="fixed inset-0 z-50 flex items-center justify-center bg-black/90"
-                onClick={onClose}
-            >
-                {/* Close button */}
-                <button
-                    onClick={onClose}
-                    className="absolute top-4 right-4 z-10 p-2 rounded-full bg-white/10 hover:bg-white/20 transition-colors text-white"
-                >
-                    <X className="h-5 w-5" />
-                </button>
+  return (
+    <AnimatePresence>
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+        transition={{ duration: 0.15 }}
+        className="fixed inset-0 z-50 flex items-center justify-center bg-black/90"
+        onClick={onClose}
+      >
+        {/* Close button */}
+        <button
+          onClick={onClose}
+          className="absolute top-4 right-4 z-10 p-2 rounded-full bg-white/10 hover:bg-white/20 transition-colors text-white"
+        >
+          <X className="h-5 w-5" />
+        </button>
-                {/* Image counter */}
-                {images.length > 1 && (
-                    <div className="absolute top-4 left-1/2 -translate-x-1/2 text-white/70 text-sm tabular-nums">
-                        {index + 1} / {images.length}
-                    </div>
-                )}
+        {/* Image counter */}
+        {images.length > 1 && (
+          <div className="absolute top-4 left-1/2 -translate-x-1/2 text-white/70 text-sm tabular-nums">
+            {index + 1} / {images.length}
+          </div>
+        )}
-                {/* Left arrow */}
-                {index > 0 && (
-                    <button
-                        onClick={e => {
-                            e.stopPropagation();
-                            goPrev();
-                        }}
-                        className="absolute left-3 top-1/2 -translate-y-1/2 z-10 p-2 rounded-full bg-white/10 hover:bg-white/20 transition-colors text-white"
-                    >
-                        <ChevronLeft className="h-6 w-6" />
-                    </button>
-                )}
+        {/* Left arrow */}
+        {index > 0 && (
+          <button
+            onClick={(e) => { e.stopPropagation(); goPrev(); }}
+            className="absolute left-3 top-1/2 -translate-y-1/2 z-10 p-2 rounded-full bg-white/10 hover:bg-white/20 transition-colors text-white"
+          >
+            <ChevronLeft className="h-6 w-6" />
+          </button>
+        )}
-                {/* Right arrow */}
-                {index < images.length - 1 && (
-                    <button
-                        onClick={e => {
-                            e.stopPropagation();
-                            goNext();
-                        }}
-                        className="absolute right-3 top-1/2 -translate-y-1/2 z-10 p-2 rounded-full bg-white/10 hover:bg-white/20 transition-colors text-white"
-                    >
-                        <ChevronRight className="h-6 w-6" />
-                    </button>
-                )}
+        {/* Right arrow */}
+        {index < images.length - 1 && (
+          <button
+            onClick={(e) => { e.stopPropagation(); goNext(); }}
+            className="absolute right-3 top-1/2 -translate-y-1/2 z-10 p-2 rounded-full bg-white/10 hover:bg-white/20 transition-colors text-white"
+          >
+            <ChevronRight className="h-6 w-6" />
+          </button>
+        )}
-                {/* Image */}
-                <img
-                    src={images[index]}
-                    alt=""
-                    className="max-h-[85vh] max-w-[90vw] object-contain rounded-lg"
-                    role="presentation"
-                    tabIndex={-1}
-                    onKeyDown={e => {
-                        if (e.key === 'Enter') {
-                            e.stopPropagation();
-                        }
-                    }}
-                    onClick={e => e.stopPropagation()}
-                />
-            </motion.div>
-        </AnimatePresence>
-    );
+        {/* Image */}
+        <img
+          src={images[index]}
+          alt=""
+          className="max-h-[85vh] max-w-[90vw] object-contain rounded-lg"
+          onClick={(e) => e.stopPropagation()}
+        />
+      </motion.div>
+    </AnimatePresence>
+  );
 }