From 74d07a359d9d3832b95febf1612e4bd17f18eef9 Mon Sep 17 00:00:00 2001 From: Urjit Chakraborty <135136842+urjitc@users.noreply.github.com> Date: Fri, 6 Mar 2026 15:51:17 -0500 Subject: [PATCH 01/10] chore: remove HeroAnimation, update .gitignore Made-with: Cursor --- .gitignore | 1 - src/components/landing/HeroAnimation.tsx | 1009 ---------------------- 2 files changed, 1010 deletions(-) delete mode 100644 src/components/landing/HeroAnimation.tsx diff --git a/.gitignore b/.gitignore index 7e9e6324..81dc4e73 100644 --- a/.gitignore +++ b/.gitignore @@ -25,7 +25,6 @@ .DS_Store tmp/ assistant-ui-main/ -assistant-ui-audit/ *.pem # debug diff --git a/src/components/landing/HeroAnimation.tsx b/src/components/landing/HeroAnimation.tsx deleted file mode 100644 index 0e754c0a..00000000 --- a/src/components/landing/HeroAnimation.tsx +++ /dev/null @@ -1,1009 +0,0 @@ -"use client"; - -import { motion, AnimatePresence } from "motion/react"; -import { useState, useEffect, useRef } from "react"; -import { User, Bot, FileText, Plus, Quote, FileIcon, Move, Hand, MessageSquarePlus, X } from "lucide-react"; -import { RiChatHistoryFill } from "react-icons/ri"; -import { LuMaximize } from "react-icons/lu"; -import { FaArrowsAltV } from "react-icons/fa"; - -// Card colors from Hero.tsx -const cardColors = [ - "#8B5CF6", "#3B82F6", "#10B981", "#F59E0B", "#EF4444", - "#EC4899", "#06B6D4", "#84CC16", "#F97316", "#6366F1", -]; - -const HIGHLIGHT_1_TEXT = "utilizes quantum mechanics to solve complex problems faster"; -const HIGHLIGHT_2_TEXT = "includes hardware research and application development"; - -const CARD_1_CONTENT = { - title: "Quantum Speedup", - body: "Quantum computers leverage superposition and entanglement to perform calculations exponentially faster than classical supercomputers for specific problem domains like cryptography, optimization, drug discovery, and machine learning. Current quantum processors from IBM, Google, and others demonstrate quantum advantage in specialized algorithms, with error rates improving through advanced quantum error correction techniques and topological qubits." -}; - -const CARD_2_CONTENT = { - title: "R&D Scope", - body: "The field encompasses both the physical engineering of qubits (superconducting circuits operating at millikelvin temperatures, trapped ions with 99.9% fidelity gates, photonic systems for distributed quantum networks, silicon spin qubits for CMOS integration, and topological qubits for inherent error protection) and the sophisticated software layer for developing quantum algorithms, quantum compilers with circuit optimization, and advanced quantum error correction protocols including surface codes and color codes. Research spans from fundamental quantum mechanics and exotic materials science (Majorana fermions, anyons) to practical applications in portfolio optimization, supply chain logistics, drug molecular simulation, cryptographic security, artificial intelligence acceleration, and climate modeling. Current initiatives involve over $25 billion in global investment from tech giants like IBM, Google, Microsoft, Amazon, and national governments pursuing quantum advantage in the NISQ era while building toward fault-tolerant quantum computing with millions of physical qubits by 2030." -}; - -const CARD_PDF_CONTENT = { - title: "Quantum_Basics.pdf", - body: "Comprehensive research document covering quantum computing fundamentals, including quantum mechanics principles, qubit technologies, gate operations, quantum algorithms (Shor's, Grover's, VQE), error correction codes, and current hardware implementations. Contains detailed analysis of quantum supremacy experiments, NISQ-era applications, and future roadmaps for fault-tolerant quantum computing. • 2.4 MB • 127 pages" -}; - -function MobilePlaceholder() { - return ( -
-
-
- -
-

- Interactive Demo -

-

- Experience our AI-powered workspace on desktop for the full interactive demonstration -

-
-
- Best viewed on larger screens -
-
- - {/* Decorative elements */} -
-
-
-
-
- ); -} - -export function HeroAnimation() { - const [step, setStep] = useState<"idle" | "typing" | "tooltip" | "spawning" | "extracting" | "resizing" | "swapping" | "expanding" | "expanded">("idle"); - const [progress, setProgress] = useState(0); - const [isInView, setIsInView] = useState(false); - const [greenCursorFinished, setGreenCursorFinished] = useState(false); - const [orangeCursorClicking, setOrangeCursorClicking] = useState(false); - const [isMobile, setIsMobile] = useState(false); - const containerRef = useRef(null); - - useEffect(() => { - // Check if device is mobile - const checkMobile = () => { - setIsMobile(window.innerWidth < 768); // md breakpoint - }; - - checkMobile(); - window.addEventListener('resize', checkMobile); - - const observer = new IntersectionObserver( - ([entry]) => { - if (entry.intersectionRatio >= 0.75) { - setIsInView(true); - } else { - setIsInView(false); - } - }, - { - threshold: 0.75 - } - ); - - if (containerRef.current) { - observer.observe(containerRef.current); - } - - return () => { - observer.disconnect(); - window.removeEventListener('resize', checkMobile); - }; - }, []); - - useEffect(() => { - if (!isInView || isMobile) { - // Reset animation state when not in view - setStep("idle"); - setProgress(0); - setGreenCursorFinished(false); - setOrangeCursorClicking(false); - return; - } - let timeout: NodeJS.Timeout; - - const runSequence = () => { - // Reset - setStep("idle"); - setProgress(0); - setGreenCursorFinished(false); - - // Start typing immediately - setStep("typing"); - setProgress(15); - - // Finish typing and start highlighting with tooltip - timeout = setTimeout(() => { - setStep("tooltip"); - setProgress(45); - - // Start spawning cards from chat UI - timeout = setTimeout(() => { - setStep("spawning"); - setProgress(55); - - // Start extracting (simulate click) - timeout = setTimeout(() => { - setStep("extracting"); - setProgress(65); - - // Resize R&D card after extraction (blue cursor) - timeout = setTimeout(() => { - setStep("resizing"); - setProgress(75); - - // Start swapping cards (green cursor) after blue cursor finishes - timeout = setTimeout(() => { - setStep("swapping"); - setProgress(85); - - // Mark green cursor as finished after its movement - setTimeout(() => { - setGreenCursorFinished(true); - }, 1500); - - // Card expansion after swapping - timeout = setTimeout(() => { - setStep("expanding"); - setProgress(95); - - // Show expanded view with chat - timeout = setTimeout(() => { - setStep("expanded"); - setProgress(100); - - // Restart loop - timeout = setTimeout(() => { - runSequence(); - }, 4000); - }, 1000); - }, 2000); - }, 2000); // Wait for blue cursor to finish (increased from 1500 to 2000) - }, 2500); - }, 1500); // Spawning duration - }, 2500); - }, 1500); // Reduced from 2500ms to 1500ms - }; - - runSequence(); - - return () => clearTimeout(timeout); - }, [isInView, isMobile]); - - const showChat = step === "idle" || step === "typing" || step === "tooltip" || step === "spawning"; - - // Hide animation on mobile devices - if (isMobile) { - return null; - } - - return ( -
- - {showChat && ( - - {/* Header */} -
-
Quantum Computing Research
-
- {/* Chat History Button */} - - - {/* Maximize Button */} - - - {/* Close Button */} - -
-
- - {/* Chat Area */} -
- {/* User Message with PDF */} - -
-
- What is quantum computing? -
- {/* PDF Attachment */} -
-
- -
-
-
Quantum_Basics.pdf
-
2.4 MB
-
-
-
-
- -
- - - {/* AI Message */} - - {step !== "idle" && ( - -
- -
-
-
-

- Quantum computing is a revolutionary multidisciplinary field that comprises aspects of computer science, physics, and mathematics that{" "} - - {" "}than classical computers for certain computational problems. The field of quantum computing{" "} - - . -

-

- Unlike classical bits that exist in definite states of 0 or 1, quantum bits (qubits) can exist in superposition, allowing them to represent both states simultaneously. This fundamental property, combined with quantum entanglement and interference, enables quantum computers to process vast amounts of information in parallel. -

-

- Current applications show promise in cryptography, optimization problems, drug discovery, financial modeling, and artificial intelligence. Major tech companies and research institutions are investing billions in quantum research, with IBM, Google, and others achieving significant milestones in quantum supremacy demonstrations. -

-
- - {/* Tooltip appearing over the first highlight */} - - {step === "tooltip" && ( - - )} - -
- - )} - -
- - {/* Message Input */} -
-
-
- Send a message... -
-
- - - -
-
-
- - )} - - - {/* Cards Layer - Handles both spawning and extracted states */} -
- - {(step === "spawning" || step === "extracting" || step === "resizing" || step === "swapping" || step === "expanding" || step === "expanded") && ( - <> - {/* Card 1 */} - - {/* Card 2 */} - - {/* PDF Card */} - } - /> - - )} - -
- - {/* Animated Cursors */} - - {(step === "tooltip" || step === "spawning" || step === "extracting" || step === "resizing" || step === "swapping") && ( - <> - {/* Tooltip Click Cursor */} - {step === "tooltip" && ( - - { - // Trigger pulse when click animation starts - setTimeout(() => setOrangeCursorClicking(true), 1800); - }} - onAnimationComplete={() => { - // End pulse when click animation completes - setTimeout(() => setOrangeCursorClicking(false), 100); - }} - className="relative" - > - {/* Normal Cursor */} - - - - - - )} - - {/* Resize Cursor - Blue */} - {(step === "extracting" || step === "resizing") && ( - - - {/* Cursor with Task Icon */} -
- {step === "resizing" ? ( - // Resize Icon -
- -
- ) : ( - // Normal Cursor - - - - )} -
- - - )} - - {/* Swap Cursor - Green */} - {step === "swapping" && ( - - - - {/* Cursor with Task Icon */} -
- {step === "swapping" && !greenCursorFinished ? ( - // Grabbing Hand Icon -
- -
- ) : ( - // Normal Cursor - - - - )} -
- - - - )} - - )} - - - {/* AI Chat Sidebar */} - - {(step === "expanding" || step === "expanded") && ( - -
- {/* Chat Header */} -
-
Quantum Computing Research
-
- {/* Chat History Button */} - - - {/* Maximize Button */} - - - {/* Close Button */} - -
-
- - {/* Chat Messages */} -
- -
- -
-
- I can help you understand this quantum computing document. What would you like to know? -
- - - -
- Explain quantum superposition -
-
- -
- - - -
- -
-
- Quantum superposition allows particles to exist in multiple states simultaneously until measured... -
- -
- - {/* Input Area */} -
-
-
- Send a message... -
-
- - - -
-
-
-
- - )} - - - {/* Progress Bar */} -
- - {/* Animated shimmer effect */} - 0 ? "400%" : "-100%" }} - transition={{ - duration: 1.5, - ease: "easeInOut", - repeat: progress > 0 && progress < 100 ? Infinity : 0, - repeatDelay: 2 - }} - /> -
-
- ); -} - -function HighlightableText({ - text, - active, - extracted, - layoutId -}: { - text: string; - active: boolean; - extracted: boolean; - layoutId: string; -}) { - const isFirstHighlight = layoutId === "highlight-1"; - const delay = isFirstHighlight ? 0 : 0.8; - - // Match highlight colors to card colors - const highlightColor = isFirstHighlight ? cardColors[1] : cardColors[3]; // Blue for first, Orange for second - const bgColor = `${highlightColor}33`; // 20% opacity - const borderColor = `${highlightColor}CC`; // 80% opacity - - return ( - - - {text} - - {active && !extracted && ( - - )} - - ); -} - -function MockTooltip({ isPulsing = false }: { isPulsing?: boolean }) { - return ( - - {/* Tooltip Content */} -
- {/* Reply Button */} - - - {/* Create Note Button */} - -
- - {/* Tooltip Arrow */} -
- - ); -} - -function ExtractedCard({ - title, - body, - index, - color, - gridPos, - finalGridPos, - expandedGridPos, - startPos, - spawnPos, - currentStep, - shouldResize, - shouldExpand, - shouldFade, - icon -}: { - title: string; - body: string; - index: number; - color: string; - gridPos: { top: string; left: string; width: string; height: string }; - finalGridPos?: { top: string; left: string; width: string; height: string }; - expandedGridPos?: { top: string; left: string; width: string; height: string }; - startPos: { top: string; left: string }; - spawnPos?: { top: string; left: string }; - currentStep: string; - shouldResize?: boolean; - shouldExpand?: boolean; - shouldFade?: boolean; - icon?: React.ReactNode; -}) { - const currentGridPos = shouldExpand && expandedGridPos ? expandedGridPos : - shouldResize && finalGridPos ? finalGridPos : gridPos; - - // Determine initial position based on current step - const getInitialState = () => { - if (currentStep === "spawning" && spawnPos) { - return { - opacity: 0, - scale: 0.1, - top: spawnPos.top, - left: spawnPos.left, - width: "20px", - height: "20px", - }; - } - return { - opacity: 0, - scale: 0.4, - top: startPos.top, - left: startPos.left, - width: gridPos.width, - height: gridPos.height, - }; - }; - - // Determine animation based on current step - const getAnimateState = () => { - if (currentStep === "spawning") { - return { - opacity: 1, - scale: 1, - top: currentGridPos.top, - left: currentGridPos.left, - width: currentGridPos.width, - height: currentGridPos.height, - rotate: 0, - }; - } - return { - opacity: shouldFade ? 0 : 1, - scale: 1, - top: currentGridPos.top, - left: currentGridPos.left, - width: currentGridPos.width, - height: currentGridPos.height, - rotate: 0, - }; - }; - - // Determine transition based on current step - const getTransition = () => { - if (currentStep === "spawning") { - return { - type: "tween" as const, - duration: 1.5, - delay: index * 0.2, - ease: [0.25, 0.46, 0.45, 0.94] as const - }; - } - return { - type: shouldFade ? ("tween" as const) : ("spring" as const), - stiffness: shouldFade ? undefined : 40, - damping: shouldFade ? undefined : 15, - duration: shouldFade ? 0.3 : undefined, - delay: shouldResize ? 0 : index * 0.1 - }; - }; - - return ( - - {shouldExpand && expandedGridPos ? ( - // Expanded PDF Document View -
- {/* Header */} - -
- {icon || } -
- {title} - - - {/* Document Content */} - -
-
- Quantum Computing Fundamentals -
- -
-
-
-
-
- -
-
-
-
-
-
- -
-
-
-
-
- -
-
-
-
-
-
-
- -
- ) : ( - // Normal Card View -
- -
- {icon || } -
- {title} - - - - {body} - - -
-
-
-
-
-
- )} - - ); -} From 525284c596521602f6f74845648064b41ffe1596 Mon Sep 17 00:00:00 2001 From: Urjit Chakraborty <135136842+urjitc@users.noreply.github.com> Date: Fri, 6 Mar 2026 15:51:18 -0500 Subject: [PATCH 02/10] fix(ui): faster tooltip delay, support per-tooltip delayDuration Made-with: Cursor --- src/components/ui/tooltip.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx index 1675c42f..970ff570 100644 --- a/src/components/ui/tooltip.tsx +++ b/src/components/ui/tooltip.tsx @@ -6,7 +6,7 @@ import * as TooltipPrimitive from "@radix-ui/react-tooltip" import { cn } from "@/lib/utils" function TooltipProvider({ - delayDuration = 500, + delayDuration = 200, ...props }: React.ComponentProps) { return ( @@ -19,10 +19,13 @@ function TooltipProvider({ } function Tooltip({ + delayDuration, ...props -}: React.ComponentProps) { +}: React.ComponentProps & { + delayDuration?: number +}) { return ( - + ) From 856a987a7b7ba4fa9ab75ea1fcc5b3eb784b2ae4 Mon Sep 17 00:00:00 2001 From: Urjit Chakraborty <135136842+urjitc@users.noreply.github.com> Date: Fri, 6 Mar 2026 15:51:20 -0500 Subject: [PATCH 03/10] feat(assistant-ui): add Search action with source selector, Learn dropdown, composer layout fixes - Add Search action to prompt builder (workspace/web/deep research) - Group Flashcards and Quiz under Learn dropdown in composer - Fix chat collapse to unmaximize when maximized - Show collapse button when maximized - Restructure thread composer layout, improve scroll-to-bottom Made-with: Cursor --- .../assistant-ui/AssistantPanel.tsx | 5 +- .../assistant-ui/PromptBuilderDialog.tsx | 97 +++++++++++++++++-- src/components/assistant-ui/thread.tsx | 91 +++++++++++------ src/components/chat/AppChatHeader.tsx | 10 +- 4 files changed, 161 insertions(+), 42 deletions(-) diff --git a/src/components/assistant-ui/AssistantPanel.tsx b/src/components/assistant-ui/AssistantPanel.tsx index 5ba240a3..9986b895 100644 --- a/src/components/assistant-ui/AssistantPanel.tsx +++ b/src/components/assistant-ui/AssistantPanel.tsx @@ -161,7 +161,10 @@ function WorkspaceContextWrapperContent({ > {/* Chat Header */} setIsChatExpanded?.(false)} + onCollapse={() => { + if (isChatMaximized) setIsChatMaximized?.(false); + setIsChatExpanded?.(false); + }} isMaximized={isChatMaximized} onToggleMaximize={handleToggleMaximize} /> diff --git a/src/components/assistant-ui/PromptBuilderDialog.tsx b/src/components/assistant-ui/PromptBuilderDialog.tsx index 78b31812..5c96ad5a 100644 --- a/src/components/assistant-ui/PromptBuilderDialog.tsx +++ b/src/components/assistant-ui/PromptBuilderDialog.tsx @@ -17,6 +17,7 @@ import { PopoverContent, PopoverTrigger, } from "@/components/ui/popover"; +import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"; import { WorkspaceItemPicker, getCardTypeIcon } from "@/components/chat/WorkspaceItemPicker"; import { Checkbox } from "@/components/ui/checkbox"; import { useUIStore, selectReplySelections, selectSelectedCardIdsArray, selectBlockNoteSelection } from "@/lib/stores/ui-store"; @@ -24,7 +25,7 @@ import { useShallow } from "zustand/react/shallow"; import type { Item } from "@/lib/workspace-state/types"; import { useAui } from "@assistant-ui/react"; import { focusComposerInput } from "@/lib/utils/composer-utils"; -import { Brain, Play, ChevronUp, ChevronDown, ChevronRight, X, Circle, CircleDot, ArrowUpIcon, ArrowLeft, CheckCircle2, Folder as FolderIcon } from "lucide-react"; +import { Brain, Play, ChevronUp, ChevronDown, ChevronRight, X, Circle, CircleDot, ArrowUpIcon, ArrowLeft, CheckCircle2, Folder as FolderIcon, Search, FolderSearch, Globe, Sparkles } from "lucide-react"; import { CgNotes } from "react-icons/cg"; import { PiCardsThreeBold } from "react-icons/pi"; import { cn } from "@/lib/utils"; @@ -34,10 +35,25 @@ export type PromptBuilderAction = | "flashcards" | "youtube" | "quiz" - | "note"; + | "note" + | "search"; type NoteTemplate = "detailed" | "cheatsheet" | "short"; +type SearchSource = "workspace" | "web" | "deep_research"; + +const SEARCH_SOURCES: { + id: SearchSource; + label: string; + icon: ComponentType<{ className?: string }>; + iconClassName?: string; + comingSoon?: boolean; +}[] = [ + { id: "workspace", label: "Workspace", icon: FolderSearch, iconClassName: "text-amber-500" }, + { id: "web", label: "Web", icon: Globe, iconClassName: "text-sky-500" }, + { id: "deep_research", label: "Deep research", icon: Sparkles, iconClassName: "text-violet-500", comingSoon: true }, +]; + const NOTE_TEMPLATES: { id: NoteTemplate; label: string; description: string }[] = [ { id: "detailed", label: "Detailed", description: "Comprehensive summary with key points and context." }, { id: "cheatsheet", label: "Cheat Sheet", description: "Concise bullet points for quick reference." }, @@ -59,6 +75,7 @@ const ACTION_CONFIG: Record< countStep?: number; hasTopicSelector?: boolean; hasTemplates?: boolean; + hasSearchSource?: boolean; /** Override for simple input (when !hasTopicSelector) */ inputLabel?: string; inputPlaceholder?: string; @@ -93,7 +110,7 @@ const ACTION_CONFIG: Record< hasTopicSelector: true, }, youtube: { - label: "Add YouTube Video", + label: "Find or Add YouTube Video", prefix: "Find a YouTube video on ", prefixForUrl: "Add this YouTube video to my workspace and summarize it.", icon: Play, @@ -109,6 +126,16 @@ const ACTION_CONFIG: Record< hasTemplates: true, hasTopicSelector: true, }, + search: { + label: "Search", + prefix: "Search for ", + icon: Search, + description: "Search your workspace, the web, or run a deep research.", + hasTopicSelector: false, + hasSearchSource: true, + inputLabel: "What to search for", + inputPlaceholder: "e.g. photosynthesis, key concepts...", + }, }; interface PromptBuilderDialogProps { @@ -161,6 +188,7 @@ export function PromptBuilderDialog({ const [workspaceSearchQuery, setWorkspaceSearchQuery] = useState(""); const [expandedFolders, setExpandedFolders] = useState>(new Set()); const [noteTemplate, setNoteTemplate] = useState(null); + const [searchSource, setSearchSource] = useState("web"); const topicInputRef = useRef(null); @@ -169,6 +197,7 @@ export function PromptBuilderDialog({ if (open) { setCount(config.defaultCount ?? 10); setNoteTemplate(null); + setSearchSource("web"); setTopicInput(""); setWorkspaceSearchQuery(""); setSelectedContextIds(new Set(selectedCardIds)); @@ -240,6 +269,15 @@ export function PromptBuilderDialog({ const url = extractYouTubeUrl(topicInput)!; const prefix = (config as { prefixForUrl?: string }).prefixForUrl ?? "Add this YouTube video to my workspace."; parts.push(`${prefix} ${url}`); + } else if (action === "search") { + const topic = topicInput.trim() || "a topic"; + const sourcePrefix = + searchSource === "workspace" + ? "Search my workspace for " + : searchSource === "web" + ? "Search the web for " + : "Search for "; // deep_research fallback (coming soon) + parts.push(sourcePrefix + topic); } else { const topicSource = topicInput.trim() || @@ -251,7 +289,7 @@ export function PromptBuilderDialog({ if (tpl?.description) parts.push(tpl.description); } return parts.join(". "); - }, [config, action, count, topicInput, selectedContextIds.size, noteTemplate]); + }, [config, action, count, topicInput, selectedContextIds.size, noteTemplate, searchSource]); const hasValidTopic = (config.hasTopicSelector && (topicInput.trim().length > 0 || selectedContextIds.size > 0)) || @@ -269,14 +307,14 @@ export function PromptBuilderDialog({ onBuild(builtPrompt); } else { // Select the chosen items in the workspace (like mention menu does) - if (selectedContextIds.size > 0) { + if (action !== "search" && selectedContextIds.size > 0) { selectMultipleCards(Array.from(selectedContextIds)); } aui?.composer().setText(builtPrompt); focusComposerInput(); } onOpenChange(false); - }, [builtPrompt, hasValidTopic, onBeforeSubmit, onBuild, aui, onOpenChange, selectedContextIds, selectMultipleCards]); + }, [action, builtPrompt, hasValidTopic, onBeforeSubmit, onBuild, aui, onOpenChange, selectedContextIds, selectMultipleCards]); const handleKeyDown = useCallback( (e: React.KeyboardEvent) => { @@ -371,7 +409,8 @@ export function PromptBuilderDialog({ action === "flashcards" && "text-purple-400", action === "youtube" && "text-red-500", action === "quiz" && "text-green-400", - action === "note" && "text-blue-400" + action === "note" && "text-blue-400", + action === "search" && "text-sky-500" )} /> {config.label} @@ -379,6 +418,48 @@ export function PromptBuilderDialog({
+ {/* Search: Source selector - card style like home action buttons */} + {config.hasSearchSource && ( +
+ +
+ {SEARCH_SOURCES.map((src) => { + const SrcIcon = src.icon; + const isSelected = !src.comingSoon && searchSource === src.id; + const card = ( + + ); + return src.comingSoon ? ( + + + {card} + + Coming soon + + ) : ( + card + ); + })} +
+
+ )} + {/* Note: Templates section */} {config.hasTemplates && (
@@ -430,7 +511,7 @@ export function PromptBuilderDialog({ } }} placeholder={config.countPlaceholder} - className="border-0 shadow-none focus-visible:ring-0" + className="border-0 shadow-none focus-visible:ring-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none [appearance:textfield]" />
+ + + {(action.subActions ?? []).map((sub) => { + const SubIcon = sub.icon; + return ( + setDialogAction(sub.action)} + className="flex cursor-pointer items-center gap-2" + > + + {sub.label} + + ); + })} + + + ); + } const Icon = action.icon; return ( @@ -398,8 +398,8 @@ export function AppChatHeader({ )} - {/* Collapse/Close buttons - Hide collapse when maximized */} - {typeof onCollapse === "function" && !isMaximized && ( + {/* Collapse/Close button - collapse chat panel */} + {typeof onCollapse === "function" && ( Maximize diff --git a/src/components/workspace-canvas/ItemPanelContent.tsx b/src/components/workspace-canvas/ItemPanelContent.tsx index c8ad3196..fdccbff2 100644 --- a/src/components/workspace-canvas/ItemPanelContent.tsx +++ b/src/components/workspace-canvas/ItemPanelContent.tsx @@ -1,7 +1,8 @@ "use client"; import { useState } from "react"; -import { X, Maximize, Minimize } from "lucide-react"; +import { X } from "lucide-react"; +import { LuMaximize2, LuMinimize2 } from "react-icons/lu"; import { SidebarTrigger } from "@/components/ui/sidebar"; import ChatFloatingButton from "@/components/chat/ChatFloatingButton"; import { formatKeyboardShortcut } from "@/lib/utils/keyboard-shortcut"; @@ -86,9 +87,9 @@ export function ItemPanelContent({ onClick={onMaximize} > {isMaximized ? ( - + ) : ( - + )} diff --git a/src/components/workspace-canvas/YouTubePlayerControls.tsx b/src/components/workspace-canvas/YouTubePlayerControls.tsx index f9eb1673..2cab0817 100644 --- a/src/components/workspace-canvas/YouTubePlayerControls.tsx +++ b/src/components/workspace-canvas/YouTubePlayerControls.tsx @@ -1,7 +1,8 @@ "use client"; import { useState, useEffect, useRef, useCallback } from "react"; -import { Play, Pause, Volume2, VolumeX, Maximize, Minimize, SkipBack, SkipForward } from "lucide-react"; +import { Play, Pause, Volume2, VolumeX, SkipBack, SkipForward } from "lucide-react"; +import { LuMaximize2, LuMinimize2 } from "react-icons/lu"; import { cn } from "@/lib/utils"; interface YouTubePlayerControlsProps { @@ -429,9 +430,9 @@ export function YouTubePlayerControls({ playerRef, isReady, onAdjust }: YouTubeP aria-label={isFullscreen ? "Exit fullscreen" : "Fullscreen"} > {isFullscreen ? ( - + ) : ( - + )}
From a4a585ba96bf70ce1ff8b2d0765982206db8676d Mon Sep 17 00:00:00 2001 From: Urjit Chakraborty <135136842+urjitc@users.noreply.github.com> Date: Fri, 6 Mar 2026 15:51:24 -0500 Subject: [PATCH 05/10] fix(workspace): clear text selection on click, PDF-only header portals, breadcrumb chevrons Made-with: Cursor --- .../workspace-canvas/MarqueeSelector.tsx | 4 ++++ .../workspace-canvas/WorkspaceHeader.tsx | 21 ++++++++++++------- .../workspace-canvas/WorkspaceSection.tsx | 4 ++++ 3 files changed, 21 insertions(+), 8 deletions(-) diff --git a/src/components/workspace-canvas/MarqueeSelector.tsx b/src/components/workspace-canvas/MarqueeSelector.tsx index e9aadc41..ed27bc08 100644 --- a/src/components/workspace-canvas/MarqueeSelector.tsx +++ b/src/components/workspace-canvas/MarqueeSelector.tsx @@ -124,6 +124,10 @@ export function MarqueeSelector({ // Don't start if clicking on a card or interactive element const target = e.target as HTMLElement; + // Clear native text selection when clicking on workspace background + // (MarqueeSelector captures background clicks before they reach WorkspaceSection) + window.getSelection()?.removeAllRanges(); + // Check if clicking on any interactive or grid element if ( target.closest('article') || // Card itself diff --git a/src/components/workspace-canvas/WorkspaceHeader.tsx b/src/components/workspace-canvas/WorkspaceHeader.tsx index 35601a4d..aa821648 100644 --- a/src/components/workspace-canvas/WorkspaceHeader.tsx +++ b/src/components/workspace-canvas/WorkspaceHeader.tsx @@ -4,7 +4,7 @@ import type React from "react"; import { useState, useRef, useEffect, useCallback } from "react"; import Link from "next/link"; import { usePathname, useRouter } from "next/navigation"; -import { Search, X, ChevronDown, FolderOpen, Plus, Upload, Folder as FolderIcon, Settings, Share2, Play, Brain, File, ImageIcon, Mic, PanelRight } from "lucide-react"; +import { Search, X, ChevronDown, ChevronRight, FolderOpen, Plus, Upload, Folder as FolderIcon, Settings, Share2, Play, Brain, File, ImageIcon, Mic, PanelRight } from "lucide-react"; import { CgNotes } from "react-icons/cg"; import { LuBook, LuCalendar, LuPanelLeftOpen } from "react-icons/lu"; import { PiCardsThreeBold } from "react-icons/pi"; @@ -561,7 +561,7 @@ export function WorkspaceHeader({ {isCompactMode ? ( /* Compact mode: Show dropdown with current folder only, full path in dropdown */ (<> - / + + +// Spacing: gap-*, not space-y-*. +
// correct +
// wrong + +// Equal dimensions: size-*, not w-* h-*. + // correct + // wrong + +// Status colors: Badge variants or semantic tokens, not raw colors. ++20.1% // correct ++20.1% // wrong +``` + +## Component Selection + +| Need | Use | +| -------------------------- | --------------------------------------------------------------------------------------------------- | +| Button/action | `Button` with appropriate variant | +| Form inputs | `Input`, `Select`, `Combobox`, `Switch`, `Checkbox`, `RadioGroup`, `Textarea`, `InputOTP`, `Slider` | +| Toggle between 2–5 options | `ToggleGroup` + `ToggleGroupItem` | +| Data display | `Table`, `Card`, `Badge`, `Avatar` | +| Navigation | `Sidebar`, `NavigationMenu`, `Breadcrumb`, `Tabs`, `Pagination` | +| Overlays | `Dialog` (modal), `Sheet` (side panel), `Drawer` (bottom sheet), `AlertDialog` (confirmation) | +| Feedback | `sonner` (toast), `Alert`, `Progress`, `Skeleton`, `Spinner` | +| Command palette | `Command` inside `Dialog` | +| Charts | `Chart` (wraps Recharts) | +| Layout | `Card`, `Separator`, `Resizable`, `ScrollArea`, `Accordion`, `Collapsible` | +| Empty states | `Empty` | +| Menus | `DropdownMenu`, `ContextMenu`, `Menubar` | +| Tooltips/info | `Tooltip`, `HoverCard`, `Popover` | + +## Key Fields + +The injected project context contains these key fields: + +- **`aliases`** → use the actual alias prefix for imports (e.g. `@/`, `~/`), never hardcode. +- **`isRSC`** → when `true`, components using `useState`, `useEffect`, event handlers, or browser APIs need `"use client"` at the top of the file. Always reference this field when advising on the directive. +- **`tailwindVersion`** → `"v4"` uses `@theme inline` blocks; `"v3"` uses `tailwind.config.js`. +- **`tailwindCssFile`** → the global CSS file where custom CSS variables are defined. Always edit this file, never create a new one. +- **`style`** → component visual treatment (e.g. `nova`, `vega`). +- **`base`** → primitive library (`radix` or `base`). Affects component APIs and available props. +- **`iconLibrary`** → determines icon imports. Use `lucide-react` for `lucide`, `@tabler/icons-react` for `tabler`, etc. Never assume `lucide-react`. +- **`resolvedPaths`** → exact file-system destinations for components, utils, hooks, etc. +- **`framework`** → routing and file conventions (e.g. Next.js App Router vs Vite SPA). +- **`packageManager`** → use this for any non-shadcn dependency installs (e.g. `pnpm add date-fns` vs `npm install date-fns`). + +See [cli.md — `info` command](./cli.md) for the full field reference. + +## Component Docs, Examples, and Usage + +Run `npx shadcn@latest docs ` to get the URLs for a component's documentation, examples, and API reference. Fetch these URLs to get the actual content. + +```bash +npx shadcn@latest docs button dialog select +``` + +**When creating, fixing, debugging, or using a component, always run `npx shadcn@latest docs` and fetch the URLs first.** This ensures you're working with the correct API and usage patterns rather than guessing. + +## Workflow + +1. **Get project context** — already injected above. Run `npx shadcn@latest info` again if you need to refresh. +2. **Check installed components first** — before running `add`, always check the `components` list from project context or list the `resolvedPaths.ui` directory. Don't import components that haven't been added, and don't re-add ones already installed. +3. **Find components** — `npx shadcn@latest search`. +4. **Get docs and examples** — run `npx shadcn@latest docs ` to get URLs, then fetch them. Use `npx shadcn@latest view` to browse registry items you haven't installed. To preview changes to installed components, use `npx shadcn@latest add --diff`. +5. **Install or update** — `npx shadcn@latest add`. When updating existing components, use `--dry-run` and `--diff` to preview changes first (see [Updating Components](#updating-components) below). +6. **Fix imports in third-party components** — After adding components from community registries (e.g. `@bundui`, `@magicui`), check the added non-UI files for hardcoded import paths like `@/components/ui/...`. These won't match the project's actual aliases. Use `npx shadcn@latest info` to get the correct `ui` alias (e.g. `@workspace/ui/components`) and rewrite the imports accordingly. The CLI rewrites imports for its own UI files, but third-party registry components may use default paths that don't match the project. +7. **Review added components** — After adding a component or block from any registry, **always read the added files and verify they are correct**. Check for missing sub-components (e.g. `SelectItem` without `SelectGroup`), missing imports, incorrect composition, or violations of the [Critical Rules](#critical-rules). Also replace any icon imports with the project's `iconLibrary` from the project context (e.g. if the registry item uses `lucide-react` but the project uses `hugeicons`, swap the imports and icon names accordingly). Fix all issues before moving on. +8. **Registry must be explicit** — When the user asks to add a block or component, **do not guess the registry**. If no registry is specified (e.g. user says "add a login block" without specifying `@shadcn`, `@tailark`, etc.), ask which registry to use. Never default to a registry on behalf of the user. +9. **Switching presets** — Ask the user first: **reinstall**, **merge**, or **skip**? + - **Reinstall**: `npx shadcn@latest init --preset --force --reinstall`. Overwrites all components. + - **Merge**: `npx shadcn@latest init --preset --force --no-reinstall`, then run `npx shadcn@latest info` to list installed components, then for each installed component use `--dry-run` and `--diff` to [smart merge](#updating-components) it individually. + - **Skip**: `npx shadcn@latest init --preset --force --no-reinstall`. Only updates config and CSS, leaves components as-is. + +## Updating Components + +When the user asks to update a component from upstream while keeping their local changes, use `--dry-run` and `--diff` to intelligently merge. **NEVER fetch raw files from GitHub manually — always use the CLI.** + +1. Run `npx shadcn@latest add --dry-run` to see all files that would be affected. +2. For each file, run `npx shadcn@latest add --diff ` to see what changed upstream vs local. +3. Decide per file based on the diff: + - No local changes → safe to overwrite. + - Has local changes → read the local file, analyze the diff, and apply upstream updates while preserving local modifications. + - User says "just update everything" → use `--overwrite`, but confirm first. +4. **Never use `--overwrite` without the user's explicit approval.** + +## Quick Reference + +```bash +# Create a new project. +npx shadcn@latest init --name my-app --preset base-nova +npx shadcn@latest init --name my-app --preset a2r6bw --template vite + +# Create a monorepo project. +npx shadcn@latest init --name my-app --preset base-nova --monorepo +npx shadcn@latest init --name my-app --preset base-nova --template next --monorepo + +# Initialize existing project. +npx shadcn@latest init --preset base-nova +npx shadcn@latest init --defaults # shortcut: --template=next --preset=base-nova + +# Add components. +npx shadcn@latest add button card dialog +npx shadcn@latest add @magicui/shimmer-button +npx shadcn@latest add --all + +# Preview changes before adding/updating. +npx shadcn@latest add button --dry-run +npx shadcn@latest add button --diff button.tsx +npx shadcn@latest add @acme/form --view button.tsx + +# Search registries. +npx shadcn@latest search @shadcn -q "sidebar" +npx shadcn@latest search @tailark -q "stats" + +# Get component docs and example URLs. +npx shadcn@latest docs button dialog select + +# View registry item details (for items not yet installed). +npx shadcn@latest view @shadcn/button +``` + +**Named presets:** `base-nova`, `radix-nova` +**Templates:** `next`, `vite`, `start`, `react-router`, `astro` (all support `--monorepo`) and `laravel` (not supported for monorepo) +**Preset codes:** Base62 strings starting with `a` (e.g. `a2r6bw`), from [ui.shadcn.com](https://ui.shadcn.com). + +## Detailed References + +- [rules/forms.md](./rules/forms.md) — FieldGroup, Field, InputGroup, ToggleGroup, FieldSet, validation states +- [rules/composition.md](./rules/composition.md) — Groups, overlays, Card, Tabs, Avatar, Alert, Empty, Toast, Separator, Skeleton, Badge, Button loading +- [rules/icons.md](./rules/icons.md) — data-icon, icon sizing, passing icons as objects +- [rules/styling.md](./rules/styling.md) — Semantic colors, variants, className, spacing, size, truncate, dark mode, cn(), z-index +- [rules/base-vs-radix.md](./rules/base-vs-radix.md) — asChild vs render, Select, ToggleGroup, Slider, Accordion +- [cli.md](./cli.md) — Commands, flags, presets, templates +- [customization.md](./customization.md) — Theming, CSS variables, extending components diff --git a/.agents/skills/shadcn/agents/openai.yml b/.agents/skills/shadcn/agents/openai.yml new file mode 100644 index 00000000..ab636da8 --- /dev/null +++ b/.agents/skills/shadcn/agents/openai.yml @@ -0,0 +1,5 @@ +interface: + display_name: "shadcn/ui" + short_description: "Manages shadcn/ui components — adding, searching, fixing, debugging, styling, and composing UI." + icon_small: "./assets/shadcn-small.png" + icon_large: "./assets/shadcn.png" diff --git a/.agents/skills/shadcn/assets/shadcn-small.png b/.agents/skills/shadcn/assets/shadcn-small.png new file mode 100644 index 0000000000000000000000000000000000000000..547154b97f2298335159c23eec1dac0d147a1246 GIT binary patch literal 1049 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`Ea{HEjtmSN`?>!lvI6-E$sR$z z3=CCj3=9n|3=F@3LJcn%7)lKo7+xhXFj&oCU=S~uvn$XBDAAG{;hE;^%b*2hb1<+n z3NbJPS&Tr)z$nE4G7ZRL@M4sPvx68lplX;H7}_%#SfFa6fHVkr05M1pgl1mAh%j*h z6I`{x0%imor0saV%ts)_S>O>_%)r1c48n{Iv*t(uO^eJ7i71Ki^|4CM&(%vz$xlkv ztH>0+>{umUo3Q%e#RDspr3imfVamB1>jfNYSkzLEl1NlCV?QiN}Sf^&XRs)CuG zfu4bq9hZWFf=y9MnpKdC8&o@xXRDM^Qc_^0uU}qXu2*iXmtT~wZ)j<0sc&GUZ)Btk zRH0j3nOBlnp_^B%3^4>|j!SBBa#3bMNoIbY0?6FNr2NtnTO}osMQ{LdXGvxn!lt}p zsJDO~)CbAv8|oS8!_5Y2wE>A*`4?rT0&NDFZ)a!&R*518wZ}#uWI2*!AU*|)0=;U- zWup%dHajlKxQFb(K%V94;uvBfm>Yb$>yU#$kCbgiC(9RwrlwA(rsW(``(6H=zq@!* zUB_~Trk_lTdxPh$yxDTsVY&L;b+6{tRm^+d+gl^OQcCIBok=%y)Vhx@dR1ceL3r{0 z9=2nMXx8DxEkhL{v?(>~8{qDBkfB!u-iDB`| z-5d%Ae82YI%n8Zg9$mRN?o-|V)V*=5b-R>a>}P2{=pcK^B(&B-W{C#Z!Q%b*ueK>n zK6ymYLRneebCKDSzcqHEHFopo-mkH{zIkt2Z0^086Tko7%N)NxoZYSDM1jSUwPpuS zSeq*wzrC2D(tq4pZ#s9QP@Cd8Q^wW3*2cL_519?*;#4`B;+ei#o;C{Kkamm3Jooa; zE$3K-+c(6ShTjelW_B*W5o zcS6z34IR5C-SIF8m(lui^IOy!-~We?b1?PSGniCYR=ZyR^%<1lJzf1=);T3K0RU@N BSy=!8 literal 0 HcmV?d00001 diff --git a/.agents/skills/shadcn/assets/shadcn.png b/.agents/skills/shadcn/assets/shadcn.png new file mode 100644 index 0000000000000000000000000000000000000000..b7b6814acc25073e5f48099b1fd3f70c47bfb1c3 GIT binary patch literal 3852 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 **IMPORTANT:** Always run commands using the project's package runner: `npx shadcn@latest`, `pnpm dlx shadcn@latest`, or `bunx --bun shadcn@latest`. Check `packageManager` from project context to choose the right one. Examples below use `npx shadcn@latest` but substitute the correct runner for the project. + +> **IMPORTANT:** Only use the flags documented below. Do not invent or guess flags — if a flag isn't listed here, it doesn't exist. The CLI auto-detects the package manager from the project's lockfile; there is no `--package-manager` flag. + +## Contents + +- Commands: init, add (dry-run, smart merge), search, view, docs, info, build +- Templates: next, vite, start, react-router, astro +- Presets: named, code, URL formats and fields +- Switching presets + +--- + +## Commands + +### `init` — Initialize or create a project + +```bash +npx shadcn@latest init [components...] [options] +``` + +Initializes shadcn/ui in an existing project or creates a new project (when `--name` is provided). Optionally installs components in the same step. + +| Flag | Short | Description | Default | +| ----------------------- | ----- | --------------------------------------------------------- | ------- | +| `--template