groove-dev 0.27.73 → 0.27.75

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

@@ -0,0 +1,263 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { Send, Paperclip, MonitorX, Loader2 } 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">
+            <p className="text-sm text-text-3 font-sans text-center">
+              Describe changes and they'll be routed to the team planner
+            </p>
+          </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,203 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { Send, X } 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 }
+  const [comment, setComment] = useState('');
+
+  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;
+    }
+
+    try {
+      const iframe = iframeRef.current;
+      if (!iframe) { setStart(null); setEnd(null); 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);
+
+      // Same-origin proxy iframe — serialize DOM to SVG foreignObject for capture
+      const iframeDoc = iframe.contentDocument || iframe.contentWindow?.document;
+      if (iframeDoc) {
+        const serializer = new XMLSerializer();
+        const html = serializer.serializeToString(iframeDoc.documentElement);
+        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);
+
+        const svgStr = `<svg xmlns="http://www.w3.org/2000/svg" width="${selRect.w}" height="${selRect.h}">
+          <foreignObject x="${-offsetX}" y="${-offsetY}" width="${iframeRect.width}" height="${iframeRect.height}">
+            ${html}
+          </foreignObject>
+        </svg>`;
+        const blob = new Blob([svgStr], { type: 'image/svg+xml;charset=utf-8' });
+        const url = URL.createObjectURL(blob);
+        const img = new Image();
+        img.onload = () => {
+          ctx.drawImage(img, 0, 0, selRect.w, selRect.h);
+          URL.revokeObjectURL(url);
+          setCaptured({ base64: canvas.toDataURL('image/png'), rect: selRect });
+        };
+        img.onerror = () => {
+          URL.revokeObjectURL(url);
+          // Fallback: region placeholder
+          ctx.fillStyle = '#1e2127';
+          ctx.fillRect(0, 0, selRect.w, selRect.h);
+          ctx.fillStyle = '#6e7681';
+          ctx.font = '12px Inter, sans-serif';
+          ctx.textAlign = 'center';
+          ctx.fillText(`Region ${Math.round(selRect.w)}×${Math.round(selRect.h)}`, selRect.w / 2, selRect.h / 2);
+          setCaptured({ base64: canvas.toDataURL('image/png'), rect: selRect });
+        };
+        img.src = url;
+      } else {
+        ctx.fillStyle = '#1e2127';
+        ctx.fillRect(0, 0, selRect.w, selRect.h);
+        ctx.fillStyle = '#6e7681';
+        ctx.font = '12px Inter, sans-serif';
+        ctx.textAlign = 'center';
+        ctx.fillText(`Region ${Math.round(selRect.w)}×${Math.round(selRect.h)}`, selRect.w / 2, selRect.h / 2);
+        setCaptured({ base64: canvas.toDataURL('image/png'), rect: selRect });
+      }
+    } catch {
+      setStart(null);
+      setEnd(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) 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;
+
+  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 popover */}
+      {captured && (
+        <div
+          className="absolute z-40 w-72 bg-surface-2 border border-border rounded-lg shadow-2xl animate-chat-fade-in"
+          style={{
+            left: Math.min(captured.rect.x, overlayRef.current?.clientWidth - 300 || 0),
+            top: captured.rect.y + captured.rect.h + 8,
+          }}
+        >
+          <div className="p-3 border-b border-border-subtle">
+            <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}
+              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"
+            >
+              <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"