groove-dev 0.27.74 → 0.27.77

package/node_modules/@groove-dev/gui/src/components/preview/preview-workspace.jsx

@@ -0,0 +1,278 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { Send, Paperclip, MonitorX, Loader2, MessageCircle, Camera, RefreshCw } from 'lucide-react';
+import { useGrooveStore } from '../../stores/groove';
+import { cn } from '../../lib/cn';
+import { timeAgo } from '../../lib/format';
+import { PreviewToolbar } from './preview-toolbar';
+import { ScreenshotOverlay } from './screenshot-overlay';
+
+function RenderedMarkdown({ text }) {
+  if (!text) return null;
+  const parts = text.split(/(```[\s\S]*?```|`[^`]+`|\*\*[^*]+\*\*|\*[^*]+\*)/g);
+  return (
+    <>
+      {parts.map((part, i) => {
+        if (!part) return null;
+        if (part.startsWith('```') && part.endsWith('```')) {
+          const inner = part.slice(3, -3);
+          const nl = inner.indexOf('\n');
+          const code = nl >= 0 ? inner.slice(nl + 1) : inner;
+          return (
+            <pre key={i} className="my-2 px-3 py-2 rounded-lg bg-surface-0 border border-border-subtle overflow-x-auto">
+              <code className="text-xs font-mono text-text-1 whitespace-pre">{code}</code>
+            </pre>
+          );
+        }
+        if (part.startsWith('`') && part.endsWith('`')) {
+          return <code key={i} className="px-1.5 py-0.5 rounded bg-surface-0 text-xs font-mono text-accent">{part.slice(1, -1)}</code>;
+        }
+        if (part.startsWith('**') && part.endsWith('**')) {
+          return <strong key={i} className="font-semibold text-text-0">{part.slice(2, -2)}</strong>;
+        }
+        if (part.startsWith('*') && part.endsWith('*')) {
+          return <em key={i} className="italic">{part.slice(1, -1)}</em>;
+        }
+        return <span key={i}>{part}</span>;
+      })}
+    </>
+  );
+}
+
+function PreviewChatMessage({ msg }) {
+  if (msg.role === 'user') {
+    return (
+      <div className="flex justify-end animate-chat-fade-in">
+        <div className="max-w-[85%]">
+          {msg.screenshot && (
+            <img src={msg.screenshot} alt="Screenshot" className="mb-2 rounded-lg border border-border-subtle max-h-40 object-contain" />
+          )}
+          <div className="px-4 py-3 rounded-2xl rounded-br-md bg-gradient-to-br from-accent/12 to-accent/6 border border-accent/15">
+            <p className="text-sm text-text-0 font-sans whitespace-pre-wrap break-words leading-relaxed">{msg.content}</p>
+          </div>
+          <div className="text-2xs text-text-4 font-sans mt-1 text-right">{timeAgo(msg.timestamp)}</div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-[85%] animate-chat-fade-in">
+      <div className="rounded-2xl rounded-tl-md bg-surface-1/80 border border-border-subtle px-4 py-3">
+        <p className="text-sm text-text-1 font-sans whitespace-pre-wrap break-words leading-relaxed">
+          <RenderedMarkdown text={msg.content} />
+        </p>
+      </div>
+      <div className="text-2xs text-text-4 font-sans mt-1">{timeAgo(msg.timestamp)}</div>
+    </div>
+  );
+}
+
+function PreviewChat() {
+  const previewChat = useGrooveStore((s) => s.previewChat);
+  const previewState = useGrooveStore((s) => s.previewState);
+  const iteratePreview = useGrooveStore((s) => s.iteratePreview);
+  const previewIterating = useGrooveStore((s) => s.previewIterating);
+
+  const [input, setInput] = useState('');
+  const scrollRef = useRef(null);
+  const textareaRef = useRef(null);
+  const isAtBottomRef = useRef(true);
+
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    function handleScroll() {
+      isAtBottomRef.current = el.scrollHeight - el.scrollTop - el.clientHeight < 50;
+    }
+    el.addEventListener('scroll', handleScroll);
+    return () => el.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  useEffect(() => {
+    if (isAtBottomRef.current && scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [previewChat?.length]);
+
+  const adjustHeight = useCallback(() => {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = 'auto';
+    el.style.height = Math.min(el.scrollHeight, 160) + 'px';
+  }, []);
+
+  useEffect(() => { adjustHeight(); }, [input, adjustHeight]);
+
+  function handleSend() {
+    const text = input.trim();
+    if (!text || previewIterating) return;
+    iteratePreview(text);
+    setInput('');
+    if (textareaRef.current) textareaRef.current.style.height = 'auto';
+  }
+
+  function onKeyDown(e) {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  }
+
+  return (
+    <div className="flex flex-col h-full bg-surface-0">
+      {/* Header */}
+      <div className="flex-shrink-0 h-10 flex items-center px-4 border-b border-border bg-surface-3">
+        <span className="text-xs font-semibold text-text-1 font-sans">Iterate</span>
+      </div>
+
+      {/* Info banner */}
+      <div className="flex-shrink-0 px-4 py-2 bg-accent/5 border-b border-accent/10">
+        <p className="text-2xs text-accent font-sans">
+          Iterating on <span className="font-semibold">{previewState.teamId || 'project'}</span> — changes auto-refresh via hot reload
+        </p>
+      </div>
+
+      {/* Messages */}
+      <div ref={scrollRef} className="flex-1 overflow-y-auto px-4 py-4 space-y-4">
+        {previewChat.length === 0 && (
+          <div className="flex items-center justify-center h-full">
+            <div className="max-w-xs w-full px-5 py-5 bg-surface-1 border border-border-subtle rounded-xl text-center">
+              <MessageCircle size={24} className="mx-auto text-accent mb-3" />
+              <h3 className="text-sm font-semibold text-text-0 font-sans mb-3">Preview is live!</h3>
+              <ul className="text-left space-y-2 text-2xs text-text-2 font-sans">
+                <li className="flex gap-2">
+                  <Send size={11} className="text-text-3 mt-0.5 flex-shrink-0" />
+                  <span>Type a message to request changes — your feedback goes to the team planner who routes it to the right agent</span>
+                </li>
+                <li className="flex gap-2">
+                  <Camera size={11} className="text-text-3 mt-0.5 flex-shrink-0" />
+                  <span>Use the camera icon to screenshot a specific area and annotate it</span>
+                </li>
+                <li className="flex gap-2">
+                  <RefreshCw size={11} className="text-text-3 mt-0.5 flex-shrink-0" />
+                  <span>Changes auto-refresh via hot module reload</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        )}
+        {previewChat.map((msg, i) => (
+          <PreviewChatMessage key={i} msg={msg} />
+        ))}
+        {previewIterating && (
+          <div className="max-w-[85%] animate-chat-fade-in">
+            <div className="rounded-2xl rounded-tl-md bg-surface-1/80 border border-border-subtle px-4 py-3">
+              <div className="flex items-center gap-2">
+                <Loader2 size={14} className="text-accent animate-spin" />
+                <span className="text-xs text-text-3 font-sans">Routing to planner...</span>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Input */}
+      <div className="flex-shrink-0 px-3 py-3 border-t border-border">
+        <div className="flex items-end gap-2 rounded-2xl bg-surface-1/80 border border-accent/8 px-3 py-2">
+          <textarea
+            ref={textareaRef}
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={onKeyDown}
+            placeholder="Describe changes..."
+            rows={1}
+            style={{ minHeight: '36px' }}
+            className="flex-1 resize-none bg-transparent text-sm text-text-0 font-sans placeholder:text-text-4 focus:outline-none py-1.5"
+          />
+          <button
+            onClick={handleSend}
+            disabled={!input.trim() || previewIterating}
+            className={cn(
+              'w-9 h-9 flex items-center justify-center rounded-xl transition-all cursor-pointer flex-shrink-0',
+              'disabled:opacity-20 disabled:cursor-not-allowed',
+              input.trim() && !previewIterating
+                ? 'bg-accent/15 text-accent hover:bg-accent/25 border border-accent/25'
+                : 'bg-surface-4 text-text-4',
+            )}
+          >
+            <Send size={16} />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function EmptyPreview() {
+  return (
+    <div className="flex-1 flex items-center justify-center bg-surface-0">
+      <div className="text-center space-y-3">
+        <MonitorX size={40} className="mx-auto text-text-4" />
+        <h2 className="text-lg font-semibold text-text-1 font-sans">No preview active</h2>
+        <p className="text-sm text-text-3 font-sans max-w-xs">
+          Build a project with a planner team to see it here.
+        </p>
+      </div>
+    </div>
+  );
+}
+
+const DEVICE_WIDTHS = {
+  desktop: '100%',
+  tablet: '768px',
+  mobile: '375px',
+};
+
+export function PreviewWorkspace() {
+  const previewState = useGrooveStore((s) => s.previewState);
+  const iframeRef = useRef(null);
+  const [iframeKey, setIframeKey] = useState(0);
+
+  const handleRefresh = useCallback(() => {
+    setIframeKey((k) => k + 1);
+  }, []);
+
+  if (!previewState.url) {
+    return <EmptyPreview />;
+  }
+
+  const iframeSrc = previewState.teamId
+    ? `/api/preview/${previewState.teamId}/proxy/`
+    : previewState.url;
+
+  const deviceWidth = DEVICE_WIDTHS[previewState.deviceSize] || '100%';
+  const isFullWidth = previewState.deviceSize === 'desktop';
+
+  return (
+    <div className="flex flex-col h-full bg-surface-0 md:flex-row">
+      {/* Left pane: iframe */}
+      <div className="flex flex-col flex-[3] min-w-0 min-h-0">
+        <PreviewToolbar onRefresh={handleRefresh} />
+        <div className="flex-1 relative overflow-hidden bg-surface-1">
+          {previewState.screenshotMode && (
+            <ScreenshotOverlay iframeRef={iframeRef} />
+          )}
+          <div className={cn(
+            'h-full transition-all duration-200',
+            isFullWidth ? 'w-full' : 'mx-auto',
+          )} style={isFullWidth ? undefined : { width: deviceWidth, maxWidth: '100%' }}>
+            <iframe
+              ref={iframeRef}
+              key={iframeKey}
+              src={iframeSrc}
+              title="Preview"
+              className="w-full h-full border-0 bg-white"
+              sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Right pane: chat */}
+      <div className="flex-[2] min-w-[280px] max-w-[480px] border-l border-border md:max-w-none md:flex-[2]">
+        <PreviewChat />
+      </div>
+    </div>
+  );
+}

package/node_modules/@groove-dev/gui/src/components/preview/screenshot-overlay.jsx

@@ -0,0 +1,237 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { Send, X, Loader2 } from 'lucide-react';
+import { useGrooveStore } from '../../stores/groove';
+
+export function ScreenshotOverlay({ iframeRef }) {
+  const toggleScreenshotMode = useGrooveStore((s) => s.toggleScreenshotMode);
+  const iteratePreview = useGrooveStore((s) => s.iteratePreview);
+
+  const overlayRef = useRef(null);
+  const [dragging, setDragging] = useState(false);
+  const [start, setStart] = useState(null);
+  const [end, setEnd] = useState(null);
+  const [captured, setCaptured] = useState(null); // { base64, rect, loading }
+  const [comment, setComment] = useState('');
+  const [flashRect, setFlashRect] = useState(null);
+
+  const handleMouseDown = useCallback((e) => {
+    if (captured) return;
+    const rect = overlayRef.current.getBoundingClientRect();
+    setStart({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+    setEnd(null);
+    setDragging(true);
+  }, [captured]);
+
+  const handleMouseMove = useCallback((e) => {
+    if (!dragging || captured) return;
+    const rect = overlayRef.current.getBoundingClientRect();
+    setEnd({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+  }, [dragging, captured]);
+
+  const handleMouseUp = useCallback(() => {
+    if (!dragging || !start || !end) {
+      setDragging(false);
+      return;
+    }
+    setDragging(false);
+
+    const selRect = {
+      x: Math.min(start.x, end.x),
+      y: Math.min(start.y, end.y),
+      w: Math.abs(end.x - start.x),
+      h: Math.abs(end.y - start.y),
+    };
+
+    if (selRect.w < 10 || selRect.h < 10) {
+      setStart(null);
+      setEnd(null);
+      return;
+    }
+
+    setCaptured({ base64: null, rect: selRect, loading: true });
+
+    function finishCapture(base64) {
+      setCaptured({ base64, rect: selRect, loading: false });
+      setFlashRect(selRect);
+      setTimeout(() => setFlashRect(null), 600);
+    }
+
+    function drawPlaceholder() {
+      const canvas = document.createElement('canvas');
+      const dpr = window.devicePixelRatio || 1;
+      canvas.width = selRect.w * dpr;
+      canvas.height = selRect.h * dpr;
+      const ctx = canvas.getContext('2d');
+      ctx.scale(dpr, dpr);
+      ctx.fillStyle = '#1e2127';
+      ctx.fillRect(0, 0, selRect.w, selRect.h);
+      ctx.strokeStyle = '#3e4451';
+      ctx.lineWidth = 1;
+      ctx.strokeRect(4, 4, selRect.w - 8, selRect.h - 8);
+      ctx.fillStyle = '#6e7681';
+      ctx.font = '12px Inter, sans-serif';
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+      ctx.fillText(`${Math.round(selRect.w)} × ${Math.round(selRect.h)}`, selRect.w / 2, selRect.h / 2);
+      return canvas.toDataURL('image/png');
+    }
+
+    try {
+      const iframe = iframeRef.current;
+      if (!iframe) { finishCapture(drawPlaceholder()); return; }
+
+      const canvas = document.createElement('canvas');
+      const dpr = window.devicePixelRatio || 1;
+      canvas.width = selRect.w * dpr;
+      canvas.height = selRect.h * dpr;
+      const ctx = canvas.getContext('2d');
+      ctx.scale(dpr, dpr);
+
+      const iframeRect = iframe.getBoundingClientRect();
+      const overlayRect = overlayRef.current.getBoundingClientRect();
+      const offsetX = selRect.x - (iframeRect.left - overlayRect.left);
+      const offsetY = selRect.y - (iframeRect.top - overlayRect.top);
+
+      try {
+        ctx.drawImage(iframe, -offsetX * dpr, -offsetY * dpr, iframeRect.width * dpr, iframeRect.height * dpr, 0, 0, selRect.w, selRect.h);
+        const testPixel = ctx.getImageData(0, 0, 1, 1).data;
+        if (testPixel[0] === 0 && testPixel[1] === 0 && testPixel[2] === 0 && testPixel[3] === 0) {
+          throw new Error('blank');
+        }
+        finishCapture(canvas.toDataURL('image/png'));
+      } catch {
+        finishCapture(drawPlaceholder());
+      }
+    } catch {
+      setStart(null);
+      setEnd(null);
+      setCaptured(null);
+    }
+  }, [dragging, start, end, iframeRef]);
+
+  useEffect(() => {
+    function onKeyDown(e) {
+      if (e.key === 'Escape') toggleScreenshotMode();
+    }
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [toggleScreenshotMode]);
+
+  function handleSubmit() {
+    if (!captured || captured.loading) return;
+    iteratePreview(comment || 'See screenshot', captured.base64);
+    toggleScreenshotMode();
+  }
+
+  const selBox = start && end ? {
+    left: Math.min(start.x, end.x),
+    top: Math.min(start.y, end.y),
+    width: Math.abs(end.x - start.x),
+    height: Math.abs(end.y - start.y),
+  } : null;
+
+  const popoverPosition = useCallback((rect) => {
+    if (!rect || !overlayRef.current) return {};
+    const overlayH = overlayRef.current.clientHeight;
+    const overlayW = overlayRef.current.clientWidth;
+    const spaceBelow = overlayH - (rect.y + rect.h + 8);
+    const popoverH = 200;
+    const placeAbove = spaceBelow < popoverH && rect.y > popoverH;
+    return {
+      left: Math.max(8, Math.min(rect.x, overlayW - 300)),
+      top: placeAbove ? rect.y - popoverH - 8 : rect.y + rect.h + 8,
+    };
+  }, []);
+
+  return (
+    <div
+      ref={overlayRef}
+      className="absolute inset-0 z-30"
+      style={{ cursor: captured ? 'default' : 'crosshair' }}
+      onMouseDown={handleMouseDown}
+      onMouseMove={handleMouseMove}
+      onMouseUp={handleMouseUp}
+    >
+      {/* Tinted overlay */}
+      <div className="absolute inset-0 bg-info/10 pointer-events-none" />
+
+      {/* Selection rectangle */}
+      {selBox && !captured && (
+        <div
+          className="absolute border-2 border-dashed border-accent bg-accent/5 pointer-events-none"
+          style={selBox}
+        />
+      )}
+
+      {/* Capture flash */}
+      {flashRect && (
+        <div
+          className="absolute pointer-events-none animate-capture-flash rounded"
+          style={{ left: flashRect.x, top: flashRect.y, width: flashRect.w, height: flashRect.h }}
+        />
+      )}
+
+      {/* Captured selection outline */}
+      {captured && (
+        <div
+          className="absolute border-2 border-accent rounded pointer-events-none"
+          style={{ left: captured.rect.x, top: captured.rect.y, width: captured.rect.w, height: captured.rect.h }}
+        />
+      )}
+
+      {/* Capture popover */}
+      {captured && (
+        <div
+          className="absolute z-40 w-72 bg-surface-2 border border-border rounded-lg shadow-2xl animate-chat-fade-in"
+          style={popoverPosition(captured.rect)}
+        >
+          <div className="p-3 border-b border-border-subtle">
+            {captured.loading ? (
+              <div className="w-full h-24 rounded border border-border-subtle bg-surface-0 flex items-center justify-center">
+                <Loader2 size={20} className="text-accent animate-spin" />
+              </div>
+            ) : (
+              <img
+                src={captured.base64}
+                alt="Screenshot"
+                className="w-full h-auto rounded border border-border-subtle max-h-32 object-contain bg-surface-0"
+              />
+            )}
+          </div>
+          <div className="p-3 flex items-center gap-2">
+            <input
+              type="text"
+              value={comment}
+              onChange={(e) => setComment(e.target.value)}
+              onKeyDown={(e) => { if (e.key === 'Enter') handleSubmit(); }}
+              placeholder="Describe what to change..."
+              className="flex-1 h-8 px-3 rounded-md bg-surface-1 border border-border-subtle text-sm text-text-0 font-sans placeholder:text-text-4 focus:outline-none focus:border-accent/40"
+              autoFocus
+            />
+            <button
+              onClick={handleSubmit}
+              disabled={captured.loading}
+              className="w-8 h-8 flex items-center justify-center rounded-md bg-accent/15 text-accent hover:bg-accent/25 transition-colors cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed"
+            >
+              <Send size={14} />
+            </button>
+            <button
+              onClick={() => toggleScreenshotMode()}
+              className="w-8 h-8 flex items-center justify-center rounded-md text-text-3 hover:text-text-1 hover:bg-surface-4 transition-colors cursor-pointer"
+            >
+              <X size={14} />
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Instructions hint */}
+      {!captured && !dragging && (
+        <div className="absolute top-4 left-1/2 -translate-x-1/2 px-3 py-1.5 rounded-full bg-surface-0/90 border border-border-subtle text-2xs text-text-2 font-sans pointer-events-none">
+          Click and drag to select a region &middot; Esc to cancel
+        </div>
+      )}
+    </div>
+  );
+}

package/node_modules/@groove-dev/gui/src/components/ui/toast.jsx

@@ -64,11 +64,15 @@ function ToastItem({ toast }) {
           <p className="text-xs text-text-3 font-sans mt-0.5">{toast.detail}</p>
         )}
       </div>
-      {toast.action?.url && (
+      {(toast.action?.url || toast.action?.onClick) && (
         <button
           onClick={(e) => {
             e.stopPropagation();
-            try { window.open(toast.action.url, '_blank', 'noopener'); } catch {}
+            if (toast.action.onClick) {
+              toast.action.onClick();
+            } else if (toast.action.url) {
+              try { window.open(toast.action.url, '_blank', 'noopener'); } catch {}
+            }
             removeToast(toast.id);
           }}
           className="text-xs font-medium text-accent hover:text-accent-hover bg-surface-5 hover:bg-surface-6 px-3 py-1.5 rounded transition-colors cursor-pointer flex-shrink-0 whitespace-nowrap"