diff --git a/app/globals.css b/app/globals.css index 94ad126..69debcc 100644 --- a/app/globals.css +++ b/app/globals.css @@ -129,4 +129,66 @@ html, body { transform: scale(1); opacity: 1; } +} + +/* Modal/Popup animations */ +@keyframes modalFadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +@keyframes modalSlideUp { + from { + opacity: 0; + transform: translateY(20px) scale(0.95); + } + to { + opacity: 1; + transform: translateY(0) scale(1); + } +} + +@keyframes modalFadeOut { + from { + opacity: 1; + } + to { + opacity: 0; + } +} + +/* Modal utility classes */ +.modal-backdrop { + animation: modalFadeIn 0.15s ease-out; +} + +.modal-content { + animation: modalSlideUp 0.2s cubic-bezier(0.4, 0, 0.2, 1); +} + +/* Text truncation utilities */ +.text-truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.text-truncate-2 { + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; +} + +.text-truncate-3 { + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; } \ No newline at end of file diff --git a/src/components/agents/AgentsPanel.tsx b/src/components/agents/AgentsPanel.tsx index 36cda5b..01a34fd 100644 --- a/src/components/agents/AgentsPanel.tsx +++ b/src/components/agents/AgentsPanel.tsx @@ -111,6 +111,7 @@ export default function AgentsPanel({ openTabsData, activeTabId, onNodeClick, on }; }, []); + useEffect(() => { const handleCreated = (event: Event) => { const detail = (event as CustomEvent<{ delegation: AgentDelegation }>).detail; @@ -187,151 +188,132 @@ export default function AgentsPanel({ openTabsData, activeTabId, onNodeClick, on }; return ( -
+
{/* Mode Header */} {mode === 'quickadd' ? (
- {/* Collapse button - top right */} - {onCollapse && ( - - )} - {/* Top spacer */} -
- - {/* Session Section */} -
- 
{`
- ██████╗  █████╗       ██╗  ██╗
- ██╔══██╗██╔══██╗      ██║  ██║
- ██████╔╝███████║█████╗███████║
- ██╔══██╗██╔══██║╚════╝██╔══██║
- ██║  ██║██║  ██║      ██║  ██║
- ╚═╝  ╚═╝╚═╝  ╚═╝      ╚═╝  ╚═╝
-`}
- -
- - {/* Bottom spacer */} -
- - {/* Divider */} + {/* Top Bar - just collapse button */}
-
- or -
+ {onCollapse && ( + + )}
- {/* Quick Add Section */} + {/* Center Section - Start button centered */}
+ +
+ + {/* Quick Add - at bottom, full width with padding */} +
)} - {/* Quick Add button - positioned at far right */} + {/* Capture button - positioned at far right */}
@@ -565,7 +549,7 @@ export default function AgentsPanel({ openTabsData, activeTabId, onNodeClick, on align-items: center; gap: 6px; padding: 8px 12px 0 12px; - background: #0a0a0a; + background: #101010; border-bottom: 1px solid #1a1a1a; overflow-x: auto; overflow-y: hidden; @@ -577,7 +561,7 @@ export default function AgentsPanel({ openTabsData, activeTabId, onNodeClick, on } .agent-tabs::-webkit-scrollbar-track { - background: #0d0d0d; + background: #131313; } .agent-tabs::-webkit-scrollbar-thumb { @@ -598,7 +582,7 @@ export default function AgentsPanel({ openTabsData, activeTabId, onNodeClick, on } .agent-tab-wrapper.active { - background: #141414; + background: #181818; } .agent-tab { diff --git a/src/components/agents/QuickAddInput.tsx b/src/components/agents/QuickAddInput.tsx index 51ba921..dcb4133 100644 --- a/src/components/agents/QuickAddInput.tsx +++ b/src/components/agents/QuickAddInput.tsx @@ -25,9 +25,9 @@ const MODE_CONFIG: Array<{ { key: 'link', label: 'Link', - hint: 'Drop URLs for auto YouTube/PDF/Web extraction', + hint: 'Drop URLs for auto extraction', icon: ( - + @@ -36,26 +36,23 @@ const MODE_CONFIG: Array<{ { key: 'note', label: 'Note', - hint: 'Quick jot — no extraction, no summary', + hint: 'Quick note, no processing', icon: ( - - - - - - + + + + + ) }, { key: 'chat', label: 'Chat', - hint: 'Paste messy transcripts — store raw text + summary', + hint: 'Paste conversations', icon: ( - + - - ) } @@ -67,18 +64,13 @@ export default function QuickAddInput({ activeDelegations, onSubmit }: QuickAddI const [isExpanded, setIsExpanded] = useState(false); const [manualMode, setManualMode] = useState(null); const [autoMode, setAutoMode] = useState('link'); - const [autoReason, setAutoReason] = useState(null); const effectiveMode: QuickAddIntent = manualMode ?? autoMode; const currentPlaceholder = useMemo(() => { - if (effectiveMode === 'note') { - return 'Write a quick note — no extraction, just append to your graph'; - } - if (effectiveMode === 'chat') { - return 'Paste any conversation (ChatGPT, Claude, etc.) and we will store raw text + summary'; - } - return "Drop links, URL's, ideas or notes to add new nodes"; + if (effectiveMode === 'note') return 'Write a quick note...'; + if (effectiveMode === 'chat') return 'Paste conversation...'; + return 'Paste a link or write something...'; }, [effectiveMode]); const maxConcurrent = 5; @@ -89,26 +81,15 @@ export default function QuickAddInput({ activeDelegations, onSubmit }: QuickAddI const inferChatIntent = (value: string) => { const trimmed = value.trim(); - if (!trimmed) { - setAutoMode('link'); - setAutoReason(null); - return; - } - - if (manualMode) return; + if (!trimmed || manualMode) return; const newlineCount = (trimmed.match(/\n/g)?.length ?? 0); const looksLikeTranscript = newlineCount >= 2 || - /You said:|ChatGPT said:|Claude said:|Assistant:|User:/i.test(trimmed) || - /\b\d{1,2}:\d{2}\b/.test(trimmed); + /You said:|ChatGPT said:|Claude said:|Assistant:|User:/i.test(trimmed); if (looksLikeTranscript && trimmed.length > 280) { setAutoMode('chat'); - setAutoReason('Detected chat transcript'); - } else { - setAutoMode('link'); - setAutoReason(null); } }; @@ -120,7 +101,6 @@ export default function QuickAddInput({ activeDelegations, onSubmit }: QuickAddI const handleModeClick = (mode: QuickAddIntent) => { setManualMode(mode); setAutoMode(mode); - setAutoReason(null); }; const handleSubmit = async () => { @@ -132,7 +112,7 @@ export default function QuickAddInput({ activeDelegations, onSubmit }: QuickAddI setInput(''); setManualMode(null); setAutoMode('link'); - setAutoReason(null); + setIsExpanded(false); } catch (error) { console.error('[QuickAddInput] Submit error:', error); } finally { @@ -140,23 +120,155 @@ export default function QuickAddInput({ activeDelegations, onSubmit }: QuickAddI } }; - const handleKeyDown = (e: React.KeyboardEvent) => { - const isLinkMode = effectiveMode === 'link'; - const shouldSubmit = isLinkMode - ? (e.key === 'Enter' && !e.shiftKey) - : (e.key === 'Enter' && (e.metaKey || e.ctrlKey)); - - if (shouldSubmit) { + const handleKeyDown = (e: React.KeyboardEvent) => { + if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) { e.preventDefault(); handleSubmit(); } + if (e.key === 'Escape') { + setIsExpanded(false); + setInput(''); + } }; - const renderInputField = () => { - if (effectiveMode === 'link') { - return ( - + + CAPTURE + + ); + } + + // Expanded state + return ( +
+ {/* Mode tabs */} +
+ {MODE_CONFIG.map((mode) => { + const isActive = effectiveMode === mode.key; + return ( + + ); + })} + + {/* Close button */} + +
+ + {/* Input area - consistent height */} +
+