This is page 33 of 45. Use http://codebase.md/dicklesworthstone/llm_gateway_mcp_server?lines=true&page={x} to view the full context.
# Directory Structure
```
├── .cursorignore
├── .env.example
├── .envrc
├── .gitignore
├── additional_features.md
├── check_api_keys.py
├── completion_support.py
├── comprehensive_test.py
├── docker-compose.yml
├── Dockerfile
├── empirically_measured_model_speeds.json
├── error_handling.py
├── example_structured_tool.py
├── examples
│ ├── __init__.py
│ ├── advanced_agent_flows_using_unified_memory_system_demo.py
│ ├── advanced_extraction_demo.py
│ ├── advanced_unified_memory_system_demo.py
│ ├── advanced_vector_search_demo.py
│ ├── analytics_reporting_demo.py
│ ├── audio_transcription_demo.py
│ ├── basic_completion_demo.py
│ ├── cache_demo.py
│ ├── claude_integration_demo.py
│ ├── compare_synthesize_demo.py
│ ├── cost_optimization.py
│ ├── data
│ │ ├── sample_event.txt
│ │ ├── Steve_Jobs_Introducing_The_iPhone_compressed.md
│ │ └── Steve_Jobs_Introducing_The_iPhone_compressed.mp3
│ ├── docstring_refiner_demo.py
│ ├── document_conversion_and_processing_demo.py
│ ├── entity_relation_graph_demo.py
│ ├── filesystem_operations_demo.py
│ ├── grok_integration_demo.py
│ ├── local_text_tools_demo.py
│ ├── marqo_fused_search_demo.py
│ ├── measure_model_speeds.py
│ ├── meta_api_demo.py
│ ├── multi_provider_demo.py
│ ├── ollama_integration_demo.py
│ ├── prompt_templates_demo.py
│ ├── python_sandbox_demo.py
│ ├── rag_example.py
│ ├── research_workflow_demo.py
│ ├── sample
│ │ ├── article.txt
│ │ ├── backprop_paper.pdf
│ │ ├── buffett.pdf
│ │ ├── contract_link.txt
│ │ ├── legal_contract.txt
│ │ ├── medical_case.txt
│ │ ├── northwind.db
│ │ ├── research_paper.txt
│ │ ├── sample_data.json
│ │ └── text_classification_samples
│ │ ├── email_classification.txt
│ │ ├── news_samples.txt
│ │ ├── product_reviews.txt
│ │ └── support_tickets.txt
│ ├── sample_docs
│ │ └── downloaded
│ │ └── attention_is_all_you_need.pdf
│ ├── sentiment_analysis_demo.py
│ ├── simple_completion_demo.py
│ ├── single_shot_synthesis_demo.py
│ ├── smart_browser_demo.py
│ ├── sql_database_demo.py
│ ├── sse_client_demo.py
│ ├── test_code_extraction.py
│ ├── test_content_detection.py
│ ├── test_ollama.py
│ ├── text_classification_demo.py
│ ├── text_redline_demo.py
│ ├── tool_composition_examples.py
│ ├── tournament_code_demo.py
│ ├── tournament_text_demo.py
│ ├── unified_memory_system_demo.py
│ ├── vector_search_demo.py
│ ├── web_automation_instruction_packs.py
│ └── workflow_delegation_demo.py
├── LICENSE
├── list_models.py
├── marqo_index_config.json.example
├── mcp_protocol_schema_2025-03-25_version.json
├── mcp_python_lib_docs.md
├── mcp_tool_context_estimator.py
├── model_preferences.py
├── pyproject.toml
├── quick_test.py
├── README.md
├── resource_annotations.py
├── run_all_demo_scripts_and_check_for_errors.py
├── storage
│ └── smart_browser_internal
│ ├── locator_cache.db
│ ├── readability.js
│ └── storage_state.enc
├── test_client.py
├── test_connection.py
├── TEST_README.md
├── test_sse_client.py
├── test_stdio_client.py
├── tests
│ ├── __init__.py
│ ├── conftest.py
│ ├── integration
│ │ ├── __init__.py
│ │ └── test_server.py
│ ├── manual
│ │ ├── test_extraction_advanced.py
│ │ └── test_extraction.py
│ └── unit
│ ├── __init__.py
│ ├── test_cache.py
│ ├── test_providers.py
│ └── test_tools.py
├── TODO.md
├── tool_annotations.py
├── tools_list.json
├── ultimate_mcp_banner.webp
├── ultimate_mcp_logo.webp
├── ultimate_mcp_server
│ ├── __init__.py
│ ├── __main__.py
│ ├── cli
│ │ ├── __init__.py
│ │ ├── __main__.py
│ │ ├── commands.py
│ │ ├── helpers.py
│ │ └── typer_cli.py
│ ├── clients
│ │ ├── __init__.py
│ │ ├── completion_client.py
│ │ └── rag_client.py
│ ├── config
│ │ └── examples
│ │ └── filesystem_config.yaml
│ ├── config.py
│ ├── constants.py
│ ├── core
│ │ ├── __init__.py
│ │ ├── evaluation
│ │ │ ├── base.py
│ │ │ └── evaluators.py
│ │ ├── providers
│ │ │ ├── __init__.py
│ │ │ ├── anthropic.py
│ │ │ ├── base.py
│ │ │ ├── deepseek.py
│ │ │ ├── gemini.py
│ │ │ ├── grok.py
│ │ │ ├── ollama.py
│ │ │ ├── openai.py
│ │ │ └── openrouter.py
│ │ ├── server.py
│ │ ├── state_store.py
│ │ ├── tournaments
│ │ │ ├── manager.py
│ │ │ ├── tasks.py
│ │ │ └── utils.py
│ │ └── ums_api
│ │ ├── __init__.py
│ │ ├── ums_database.py
│ │ ├── ums_endpoints.py
│ │ ├── ums_models.py
│ │ └── ums_services.py
│ ├── exceptions.py
│ ├── graceful_shutdown.py
│ ├── services
│ │ ├── __init__.py
│ │ ├── analytics
│ │ │ ├── __init__.py
│ │ │ ├── metrics.py
│ │ │ └── reporting.py
│ │ ├── cache
│ │ │ ├── __init__.py
│ │ │ ├── cache_service.py
│ │ │ ├── persistence.py
│ │ │ ├── strategies.py
│ │ │ └── utils.py
│ │ ├── cache.py
│ │ ├── document.py
│ │ ├── knowledge_base
│ │ │ ├── __init__.py
│ │ │ ├── feedback.py
│ │ │ ├── manager.py
│ │ │ ├── rag_engine.py
│ │ │ ├── retriever.py
│ │ │ └── utils.py
│ │ ├── prompts
│ │ │ ├── __init__.py
│ │ │ ├── repository.py
│ │ │ └── templates.py
│ │ ├── prompts.py
│ │ └── vector
│ │ ├── __init__.py
│ │ ├── embeddings.py
│ │ └── vector_service.py
│ ├── tool_token_counter.py
│ ├── tools
│ │ ├── __init__.py
│ │ ├── audio_transcription.py
│ │ ├── base.py
│ │ ├── completion.py
│ │ ├── docstring_refiner.py
│ │ ├── document_conversion_and_processing.py
│ │ ├── enhanced-ums-lookbook.html
│ │ ├── entity_relation_graph.py
│ │ ├── excel_spreadsheet_automation.py
│ │ ├── extraction.py
│ │ ├── filesystem.py
│ │ ├── html_to_markdown.py
│ │ ├── local_text_tools.py
│ │ ├── marqo_fused_search.py
│ │ ├── meta_api_tool.py
│ │ ├── ocr_tools.py
│ │ ├── optimization.py
│ │ ├── provider.py
│ │ ├── pyodide_boot_template.html
│ │ ├── python_sandbox.py
│ │ ├── rag.py
│ │ ├── redline-compiled.css
│ │ ├── sentiment_analysis.py
│ │ ├── single_shot_synthesis.py
│ │ ├── smart_browser.py
│ │ ├── sql_databases.py
│ │ ├── text_classification.py
│ │ ├── text_redline_tools.py
│ │ ├── tournament.py
│ │ ├── ums_explorer.html
│ │ └── unified_memory_system.py
│ ├── utils
│ │ ├── __init__.py
│ │ ├── async_utils.py
│ │ ├── display.py
│ │ ├── logging
│ │ │ ├── __init__.py
│ │ │ ├── console.py
│ │ │ ├── emojis.py
│ │ │ ├── formatter.py
│ │ │ ├── logger.py
│ │ │ ├── panels.py
│ │ │ ├── progress.py
│ │ │ └── themes.py
│ │ ├── parse_yaml.py
│ │ ├── parsing.py
│ │ ├── security.py
│ │ └── text.py
│ └── working_memory_api.py
├── unified_memory_system_technical_analysis.md
└── uv.lock
```
# Files
--------------------------------------------------------------------------------
/ultimate_mcp_server/tools/enhanced-ums-lookbook.html:
--------------------------------------------------------------------------------
```html
1 | <!DOCTYPE html>
2 | <html lang="en" data-theme="dark">
3 |
4 | <head>
5 | <meta charset="UTF-8">
6 | <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 | <!-- Preconnect to external hosts for faster TCP/TLS handshakes -->
8 | <link rel="preconnect" href="https://fonts.googleapis.com">
9 | <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10 | <link rel="preconnect" href="https://unpkg.com">
11 | <link rel="preconnect" href="https://cdn.jsdelivr.net">
12 | <link rel="preconnect" href="https://cdnjs.cloudflare.com">
13 | <title>UI/UX Look Book: UMS Explorer</title>
14 | <!-- Low-priority favicon -->
15 | <link rel="icon" fetchpriority="low"
16 | href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z'/><path d='M5 10a7 7 0 1 0 14 0'/><path d='M15 13a3 3 0 0 0-6 0 v6a3 3 0 0 0 6 0 v-6Z'/></svg>">
17 |
18 | <!-- TailwindCSS (CDN for development) -->
19 | <script src="https://cdn.tailwindcss.com"></script>
20 | <script>
21 | tailwind.config = {
22 | darkMode: 'class',
23 | theme: {
24 | extend: {
25 | colors: {
26 | primary: { 50: '#f0f9ff', 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8', 900: '#1e3a8a' },
27 | secondary: { 500: '#8b5cf6', 600: '#7c3aed' },
28 | accent: { 500: '#ec4899', 600: '#db2777' }
29 | },
30 | animation: {
31 | 'slide-in': 'slideIn 0.5s ease-out',
32 | 'fade-in': 'fadeIn 0.3s ease-out',
33 | 'scale-in': 'scaleIn 0.2s ease-out',
34 | 'pulse-ring': 'pulseRing 2s infinite',
35 | 'shimmer': 'shimmer 2s infinite',
36 | 'bounce-subtle': 'bounceSubtle 1s ease-in-out infinite',
37 | 'float': 'float 6s ease-in-out infinite',
38 | 'glow': 'glow 2s ease-in-out infinite',
39 | 'gradient': 'gradient 15s ease infinite',
40 | 'wave': 'wave 10s ease-in-out infinite',
41 | 'morph': 'morph 8s ease-in-out infinite',
42 | 'rotate-slow': 'rotateSlow 20s linear infinite'
43 | },
44 | backdropBlur: { xs: '2px' }
45 | }
46 | }
47 | }
48 | </script>
49 |
50 | <!-- DaisyUI -->
51 | <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.min.css" rel="stylesheet" type="text/css" />
52 |
53 | <!-- Lucide Icons -->
54 | <script defer src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
55 |
56 | <!-- Tippy.js for tooltips -->
57 | <script defer src="https://unpkg.com/@popperjs/core@2"></script>
58 | <script defer src="https://unpkg.com/tippy.js@6"></script>
59 | <link rel="stylesheet" href="https://unpkg.com/tippy.js@6/animations/scale.css">
60 |
61 | <!-- AOS (Animate On Scroll) -->
62 | <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
63 | <script defer src="https://unpkg.com/[email protected]/dist/aos.js"></script>
64 |
65 | <!-- Particles.js -->
66 | <script defer src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
67 |
68 | <!-- GSAP for advanced animations -->
69 | <script defer src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
70 |
71 | <!-- Rough Notation for annotations -->
72 | <script defer src="https://unpkg.com/rough-notation/lib/rough-notation.iife.js"></script>
73 |
74 | <!-- Vanilla Tilt for 3D hover effects -->
75 | <script defer src="https://unpkg.com/[email protected]/dist/vanilla-tilt.min.js"></script>
76 |
77 | <!-- Non-blocking font loading -->
78 | <link rel="preload"
79 | href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" as="style"
80 | onload="this.rel='stylesheet'">
81 | <link rel="preload" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap"
82 | as="style" onload="this.rel='stylesheet'">
83 | <link rel="preload" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap"
84 | as="style" onload="this.rel='stylesheet'">
85 | <noscript>
86 | <link rel="stylesheet"
87 | href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap">
88 | </noscript>
89 | <style>
90 | /* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); */
91 |
92 | :root {
93 | --color-primary: #3b82f6;
94 | --color-secondary: #8b5cf6;
95 | --color-accent: #ec4899;
96 | --color-success: #10b981;
97 | --color-warning: #f59e0b;
98 | --color-error: #ef4444;
99 | --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
100 | --gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
101 | --gradient-accent: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
102 | --gradient-dark: linear-gradient(135deg, #1a1c2e 0%, #2d1b69 100%);
103 | }
104 |
105 | [data-theme="light"] {
106 | --bg-primary: #ffffff;
107 | --bg-secondary: #f8fafc;
108 | --bg-tertiary: #f1f5f9;
109 | --text-primary: #1e293b;
110 | --text-secondary: #475569;
111 | --text-tertiary: #64748b;
112 | --border-color: #e2e8f0;
113 | --glass-bg: rgba(255, 255, 255, 0.8);
114 | --card-bg: rgba(255, 255, 255, 0.9);
115 | }
116 |
117 | [data-theme="dark"] {
118 | --bg-primary: #0f172a;
119 | --bg-secondary: #1e293b;
120 | --bg-tertiary: #334155;
121 | --text-primary: #f1f5f9;
122 | --text-secondary: #e2e8f0;
123 | --text-tertiary: #cbd5e1;
124 | --border-color: rgba(255, 255, 255, 0.1);
125 | --glass-bg: rgba(15, 23, 42, 0.8);
126 | --card-bg: rgba(15, 23, 42, 0.9);
127 | }
128 |
129 | * {
130 | font-family: 'Inter', sans-serif;
131 | }
132 |
133 | code,
134 | pre {
135 | font-family: 'JetBrains Mono', monospace;
136 | }
137 |
138 | h1,
139 | h2,
140 | h3 {
141 | font-family: 'Space Grotesk', sans-serif;
142 | }
143 |
144 | /* Enhanced animations */
145 | @keyframes slideIn {
146 | from {
147 | transform: translateY(30px);
148 | opacity: 0;
149 | }
150 |
151 | to {
152 | transform: translateY(0);
153 | opacity: 1;
154 | }
155 | }
156 |
157 | @keyframes fadeIn {
158 | from {
159 | opacity: 0;
160 | }
161 |
162 | to {
163 | opacity: 1;
164 | }
165 | }
166 |
167 | @keyframes scaleIn {
168 | from {
169 | transform: scale(0.9);
170 | opacity: 0;
171 | }
172 |
173 | to {
174 | transform: scale(1);
175 | opacity: 1;
176 | }
177 | }
178 |
179 | @keyframes pulseRing {
180 | 0% {
181 | transform: scale(0.8);
182 | opacity: 1;
183 | }
184 |
185 | 80%,
186 | 100% {
187 | transform: scale(1.2);
188 | opacity: 0;
189 | }
190 | }
191 |
192 | @keyframes shimmer {
193 | 0% {
194 | background-position: -200px 0;
195 | }
196 |
197 | 100% {
198 | background-position: calc(200px + 100%) 0;
199 | }
200 | }
201 |
202 | @keyframes bounceSubtle {
203 |
204 | 0%,
205 | 100% {
206 | transform: translateY(0);
207 | }
208 |
209 | 50% {
210 | transform: translateY(-4px);
211 | }
212 | }
213 |
214 | @keyframes float {
215 |
216 | 0%,
217 | 100% {
218 | transform: translateY(0px);
219 | }
220 |
221 | 50% {
222 | transform: translateY(-20px);
223 | }
224 | }
225 |
226 | @keyframes glow {
227 |
228 | 0%,
229 | 100% {
230 | opacity: 1;
231 | }
232 |
233 | 50% {
234 | opacity: 0.5;
235 | }
236 | }
237 |
238 | @keyframes gradient {
239 | 0% {
240 | background-position: 0% 50%;
241 | }
242 |
243 | 50% {
244 | background-position: 100% 50%;
245 | }
246 |
247 | 100% {
248 | background-position: 0% 50%;
249 | }
250 | }
251 |
252 | @keyframes wave {
253 |
254 | 0%,
255 | 100% {
256 | transform: rotate(-3deg);
257 | }
258 |
259 | 50% {
260 | transform: rotate(3deg);
261 | }
262 | }
263 |
264 | @keyframes morph {
265 | 0% {
266 | border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
267 | }
268 |
269 | 50% {
270 | border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
271 | }
272 |
273 | 100% {
274 | border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
275 | }
276 | }
277 |
278 | @keyframes rotateSlow {
279 | from {
280 | transform: rotate(0deg);
281 | }
282 |
283 | to {
284 | transform: rotate(360deg);
285 | }
286 | }
287 |
288 | /* Enhanced body background */
289 | body {
290 | position: relative;
291 | overflow-x: hidden;
292 | }
293 |
294 | body::before {
295 | content: '';
296 | position: fixed;
297 | top: 0;
298 | left: 0;
299 | right: 0;
300 | bottom: 0;
301 | background:
302 | radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3), transparent 50%),
303 | radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3), transparent 50%),
304 | radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.2), transparent 50%);
305 | z-index: -2;
306 | }
307 |
308 | /* Particle container */
309 | #particles-js {
310 | position: fixed;
311 | width: 100%;
312 | height: 100%;
313 | top: 0;
314 | left: 0;
315 | z-index: -1;
316 | }
317 |
318 | /* Enhanced glass effects */
319 | [data-theme="dark"] .glass {
320 | background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
321 | backdrop-filter: blur(20px) saturate(200%);
322 | -webkit-backdrop-filter: blur(20px) saturate(200%);
323 | border: 1px solid rgba(255, 255, 255, 0.18);
324 | box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
325 | }
326 |
327 | [data-theme="light"] .glass {
328 | background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
329 | backdrop-filter: blur(20px) saturate(200%);
330 | -webkit-backdrop-filter: blur(20px) saturate(200%);
331 | border: 1px solid rgba(209, 213, 219, 0.3);
332 | box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
333 | }
334 |
335 | [data-theme="dark"] .glass-dark {
336 | background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 100%);
337 | backdrop-filter: blur(30px) saturate(200%);
338 | -webkit-backdrop-filter: blur(30px) saturate(200%);
339 | border: 1px solid rgba(255, 255, 255, 0.1);
340 | box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
341 | }
342 |
343 | [data-theme="light"] .glass-dark {
344 | background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
345 | backdrop-filter: blur(30px) saturate(200%);
346 | -webkit-backdrop-filter: blur(30px) saturate(200%);
347 | border: 1px solid rgba(0, 0, 0, 0.1);
348 | box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
349 | }
350 |
351 | /* Enhanced cards with gradient borders */
352 | [data-theme="dark"] .enhanced-card {
353 | background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
354 | backdrop-filter: blur(20px) saturate(200%);
355 | -webkit-backdrop-filter: blur(20px) saturate(200%);
356 | border: 1px solid transparent;
357 | position: relative;
358 | transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
359 | box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
360 | contain: layout style;
361 | }
362 |
363 | [data-theme="dark"] .enhanced-card::before {
364 | content: '';
365 | position: absolute;
366 | inset: 0;
367 | border-radius: inherit;
368 | padding: 1px;
369 | background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
370 | -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
371 | -webkit-mask-composite: xor;
372 | mask-composite: exclude;
373 | opacity: 0.5;
374 | transition: opacity 0.4s ease;
375 | }
376 |
377 | [data-theme="dark"] .enhanced-card:hover {
378 | transform: translateY(-2px) scale(1.01);
379 | box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
380 | }
381 |
382 | [data-theme="dark"] .enhanced-card:hover::before {
383 | opacity: 1;
384 | }
385 |
386 | [data-theme="light"] .enhanced-card {
387 | background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85));
388 | backdrop-filter: blur(20px) saturate(200%);
389 | -webkit-backdrop-filter: blur(20px) saturate(200%);
390 | border: 1px solid rgba(0, 0, 0, 0.05);
391 | transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
392 | box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
393 | contain: layout style;
394 | }
395 |
396 | [data-theme="light"] .enhanced-card:hover {
397 | transform: translateY(-2px) scale(1.01);
398 | box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
399 | border-color: rgba(59, 130, 246, 0.3);
400 | }
401 |
402 | /* Memory type gradients with glow */
403 | .memory-working {
404 | border-left: 4px solid #f59e0b;
405 | background: linear-gradient(90deg, rgba(245, 158, 11, 0.15), transparent);
406 | box-shadow: inset 0 0 20px rgba(245, 158, 11, 0.1);
407 | }
408 |
409 | .memory-episodic {
410 | border-left: 4px solid #3b82f6;
411 | background: linear-gradient(90deg, rgba(59, 130, 246, 0.15), transparent);
412 | box-shadow: inset 0 0 20px rgba(59, 130, 246, 0.1);
413 | }
414 |
415 | .memory-semantic {
416 | border-left: 4px solid #10b981;
417 | background: linear-gradient(90deg, rgba(16, 185, 129, 0.15), transparent);
418 | box-shadow: inset 0 0 20px rgba(16, 185, 129, 0.1);
419 | }
420 |
421 | .memory-procedural {
422 | border-left: 4px solid #8b5cf6;
423 | background: linear-gradient(90deg, rgba(139, 92, 246, 0.15), transparent);
424 | box-shadow: inset 0 0 20px rgba(139, 92, 246, 0.1);
425 | }
426 |
427 | /* Enhanced skeleton loader */
428 | .skeleton {
429 | background: linear-gradient(90deg,
430 | rgba(255, 255, 255, 0.05) 25%,
431 | rgba(255, 255, 255, 0.1) 50%,
432 | rgba(255, 255, 255, 0.05) 75%);
433 | background-size: 200px 100%;
434 | animation: shimmer 1.5s infinite;
435 | }
436 |
437 | [data-theme="dark"] .skeleton {
438 | background: linear-gradient(90deg,
439 | rgba(255, 255, 255, 0.05) 25%,
440 | rgba(255, 255, 255, 0.1) 50%,
441 | rgba(255, 255, 255, 0.05) 75%);
442 | }
443 |
444 | /* Enhanced scrollbar */
445 | ::-webkit-scrollbar {
446 | width: 10px;
447 | height: 10px;
448 | }
449 |
450 | ::-webkit-scrollbar-track {
451 | background: rgba(0, 0, 0, 0.1);
452 | border-radius: 5px;
453 | }
454 |
455 | ::-webkit-scrollbar-thumb {
456 | background: linear-gradient(135deg, rgba(59, 130, 246, 0.5), rgba(139, 92, 246, 0.5));
457 | border-radius: 5px;
458 | transition: all 0.3s ease;
459 | }
460 |
461 | ::-webkit-scrollbar-thumb:hover {
462 | background: linear-gradient(135deg, rgba(59, 130, 246, 0.8), rgba(139, 92, 246, 0.8));
463 | }
464 |
465 | /* Enhanced status indicators */
466 | .status-indicator {
467 | position: relative;
468 | display: inline-block;
469 | }
470 |
471 | .status-indicator::before {
472 | content: '';
473 | position: absolute;
474 | top: 0;
475 | left: 0;
476 | width: 100%;
477 | height: 100%;
478 | border-radius: inherit;
479 | animation: pulseRing 2s infinite;
480 | }
481 |
482 | .status-active::before {
483 | background: var(--color-success);
484 | box-shadow: 0 0 20px var(--color-success);
485 | }
486 |
487 | .status-completed::before {
488 | background: var(--color-primary);
489 | box-shadow: 0 0 20px var(--color-primary);
490 | }
491 |
492 | .status-failed::before {
493 | background: var(--color-error);
494 | box-shadow: 0 0 20px var(--color-error);
495 | }
496 |
497 | .status-paused::before {
498 | background: var(--color-warning);
499 | box-shadow: 0 0 20px var(--color-warning);
500 | }
501 |
502 | /* Enhanced data table */
503 | .data-table {
504 | background: rgba(255, 255, 255, 0.03);
505 | backdrop-filter: blur(20px) saturate(200%);
506 | -webkit-backdrop-filter: blur(20px) saturate(200%);
507 | border-radius: 20px;
508 | overflow: hidden;
509 | box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
510 | }
511 |
512 | .data-table th {
513 | background: rgba(255, 255, 255, 0.08);
514 | backdrop-filter: blur(20px);
515 | -webkit-backdrop-filter: blur(20px);
516 | position: sticky;
517 | top: 0;
518 | z-index: 10;
519 | font-weight: 600;
520 | text-transform: uppercase;
521 | letter-spacing: 0.05em;
522 | font-size: 0.75rem;
523 | }
524 |
525 | .data-table tr {
526 | transition: all 0.3s ease;
527 | }
528 |
529 | .data-table tr:hover {
530 | background: rgba(59, 130, 246, 0.1);
531 | transform: scale(1.01);
532 | }
533 |
534 | /* Enhanced FAB */
535 | .fab {
536 | position: fixed;
537 | bottom: 2rem;
538 | right: 2rem;
539 | width: 64px;
540 | height: 64px;
541 | border-radius: 50%;
542 | background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
543 | color: white;
544 | border: none;
545 | box-shadow: 0 10px 30px rgba(102, 126, 234, 0.5);
546 | cursor: pointer;
547 | transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
548 | z-index: 100;
549 | display: flex;
550 | align-items: center;
551 | justify-content: center;
552 | overflow: hidden;
553 | will-change: transform;
554 | }
555 |
556 | .fab::before {
557 | content: '';
558 | position: absolute;
559 | inset: 0;
560 | background: radial-gradient(circle at center, transparent 0%, rgba(255, 255, 255, 0.2) 100%);
561 | opacity: 0;
562 | transition: opacity 0.3s ease;
563 | }
564 |
565 | .fab:hover {
566 | transform: scale(1.1) rotate(15deg);
567 | box-shadow: 0 15px 40px rgba(102, 126, 234, 0.7);
568 | }
569 |
570 | .fab:hover::before {
571 | opacity: 1;
572 | }
573 |
574 | .fab:active {
575 | transform: scale(0.95);
576 | }
577 |
578 | /* Enhanced command palette */
579 | .command-palette {
580 | position: fixed;
581 | top: 50%;
582 | left: 50%;
583 | transform: translate(-50%, -50%);
584 | width: 90%;
585 | max-width: 600px;
586 | backdrop-filter: blur(40px) saturate(200%);
587 | -webkit-backdrop-filter: blur(40px) saturate(200%);
588 | border-radius: 24px;
589 | z-index: 1000;
590 | transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
591 | box-shadow: 0 25px 100px rgba(0, 0, 0, 0.5);
592 | }
593 |
594 | [data-theme="dark"] .command-palette {
595 | background: linear-gradient(135deg, rgba(15, 23, 42, 0.98) 0%, rgba(30, 41, 59, 0.98) 100%);
596 | border: 1px solid rgba(255, 255, 255, 0.1);
597 | color: #e5e7eb;
598 | }
599 |
600 | [data-theme="light"] .command-palette {
601 | background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
602 | border: 1px solid rgba(0, 0, 0, 0.1);
603 | color: #1e293b;
604 | }
605 |
606 | /* Enhanced chart containers */
607 | .chart-container {
608 | background: rgba(255, 255, 255, 0.03);
609 | backdrop-filter: blur(20px) saturate(200%);
610 | -webkit-backdrop-filter: blur(20px) saturate(200%);
611 | border-radius: 20px;
612 | padding: 2rem;
613 | box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.05);
614 | position: relative;
615 | overflow: hidden;
616 | }
617 |
618 | .chart-container::before {
619 | content: '';
620 | position: absolute;
621 | top: -50%;
622 | right: -50%;
623 | width: 200%;
624 | height: 200%;
625 | background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
626 | animation: rotate-slow 20s linear infinite;
627 | }
628 |
629 | /* Enhanced markdown content */
630 | .markdown-content {
631 | line-height: 1.8;
632 | word-wrap: break-word;
633 | }
634 |
635 | .markdown-content h1,
636 | .markdown-content h2,
637 | .markdown-content h3 {
638 | margin-top: 2em;
639 | margin-bottom: 0.75em;
640 | font-weight: 700;
641 | line-height: 1.3;
642 | background: linear-gradient(135deg, #e5e7eb 0%, #9ca3af 100%);
643 | -webkit-background-clip: text;
644 | -webkit-text-fill-color: transparent;
645 | background-clip: text;
646 | }
647 |
648 | .markdown-content h1 {
649 | font-size: 2.5em;
650 | border-bottom: 2px solid rgba(255, 255, 255, 0.1);
651 | padding-bottom: 0.3em;
652 | }
653 |
654 | .markdown-content h2 {
655 | font-size: 2em;
656 | border-bottom: 1px solid rgba(255, 255, 255, 0.05);
657 | padding-bottom: 0.3em;
658 | }
659 |
660 | .markdown-content code {
661 | padding: 0.3em 0.6em;
662 | margin: 0 0.2em;
663 | font-size: 85%;
664 | background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(139, 92, 246, 0.15));
665 | border: 1px solid rgba(59, 130, 246, 0.3);
666 | border-radius: 0.375rem;
667 | font-weight: 500;
668 | }
669 |
670 | .markdown-content pre {
671 | padding: 1.5em;
672 | overflow: auto;
673 | font-size: 85%;
674 | line-height: 1.6;
675 | background: linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2));
676 | border: 1px solid rgba(255, 255, 255, 0.1);
677 | border-radius: 0.75rem;
678 | margin: 1.5em 0;
679 | box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.2);
680 | }
681 |
682 | /* Enhanced masonry grid */
683 | .masonry-grid {
684 | display: grid;
685 | grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
686 | gap: 2rem;
687 | align-items: start;
688 | }
689 |
690 | .masonry-item {
691 | break-inside: avoid;
692 | transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
693 | will-change: transform;
694 | }
695 |
696 | .masonry-item:hover {
697 | transform: translateY(-8px) scale(1.02);
698 | box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
699 | }
700 |
701 | /* Type-specific colors with gradients */
702 | .type-image {
703 | background: linear-gradient(135deg, #10b981, #059669);
704 | box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
705 | }
706 |
707 | .type-document {
708 | background: linear-gradient(135deg, #3b82f6, #1d4ed8);
709 | box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
710 | }
711 |
712 | .type-code {
713 | background: linear-gradient(135deg, #10b981, #059669);
714 | box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
715 | }
716 |
717 | .type-data {
718 | background: linear-gradient(135deg, #8b5cf6, #7c3aed);
719 | box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
720 | }
721 |
722 | .type-model {
723 | background: linear-gradient(135deg, #f59e0b, #d97706);
724 | box-shadow: 0 0 20px rgba(245, 158, 11, 0.3);
725 | }
726 |
727 | .type-default {
728 | background: linear-gradient(135deg, #6b7280, #4b5563);
729 | box-shadow: 0 0 20px rgba(107, 114, 128, 0.3);
730 | }
731 |
732 | /* Text truncation */
733 | .line-clamp-2 {
734 | display: -webkit-box;
735 | -webkit-line-clamp: 2;
736 | -webkit-box-orient: vertical;
737 | overflow: hidden;
738 | }
739 |
740 | /* Enhanced thought chain container */
741 | .thought-chain-container {
742 | background: linear-gradient(135deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1));
743 | backdrop-filter: blur(30px) saturate(200%);
744 | -webkit-backdrop-filter: blur(30px) saturate(200%);
745 | border-radius: 24px;
746 | position: relative;
747 | overflow: hidden;
748 | min-height: 70vh;
749 | box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
750 | }
751 |
752 | .mermaid-container {
753 | width: 100%;
754 | height: 100%;
755 | overflow: auto;
756 | padding: 2rem;
757 | position: relative;
758 | }
759 |
760 | /* Enhanced timeline scrubber */
761 | .timeline-scrubber {
762 | position: absolute;
763 | bottom: 0;
764 | left: 0;
765 | right: 0;
766 | background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.95));
767 | backdrop-filter: blur(30px) saturate(200%);
768 | -webkit-backdrop-filter: blur(30px) saturate(200%);
769 | padding: 2rem;
770 | border-top: 1px solid rgba(255, 255, 255, 0.1);
771 | }
772 |
773 | .timeline-slider {
774 | width: 100%;
775 | height: 10px;
776 | border-radius: 5px;
777 | background: linear-gradient(90deg, #1e293b, #475569);
778 | outline: none;
779 | opacity: 0.8;
780 | transition: all 0.3s ease;
781 | cursor: pointer;
782 | -webkit-appearance: none;
783 | appearance: none;
784 | }
785 |
786 | .timeline-slider:hover {
787 | opacity: 1;
788 | height: 12px;
789 | }
790 |
791 | .timeline-slider::-webkit-slider-thumb {
792 | -webkit-appearance: none;
793 | appearance: none;
794 | width: 24px;
795 | height: 24px;
796 | border-radius: 50%;
797 | background: linear-gradient(135deg, #3b82f6, #8b5cf6);
798 | cursor: pointer;
799 | box-shadow: 0 4px 12px rgba(59, 130, 246, 0.6);
800 | transition: all 0.3s ease;
801 | }
802 |
803 | .timeline-slider::-webkit-slider-thumb:hover {
804 | transform: scale(1.2);
805 | box-shadow: 0 6px 20px rgba(59, 130, 246, 0.8);
806 | }
807 |
808 | .timeline-slider::-moz-range-thumb {
809 | width: 24px;
810 | height: 24px;
811 | border-radius: 50%;
812 | background: linear-gradient(135deg, #3b82f6, #8b5cf6);
813 | cursor: pointer;
814 | border: none;
815 | box-shadow: 0 4px 12px rgba(59, 130, 246, 0.6);
816 | transition: all 0.3s ease;
817 | }
818 |
819 | .timeline-slider::-moz-range-thumb:hover {
820 | transform: scale(1.2);
821 | box-shadow: 0 6px 20px rgba(59, 130, 246, 0.8);
822 | }
823 |
824 | /* Enhanced playback controls */
825 | .playback-controls {
826 | display: flex;
827 | align-items: center;
828 | justify-content: center;
829 | gap: 1rem;
830 | margin-bottom: 1.5rem;
831 | }
832 |
833 | .playback-btn {
834 | width: 56px;
835 | height: 56px;
836 | border-radius: 50%;
837 | background: linear-gradient(135deg, #3b82f6, #8b5cf6);
838 | border: none;
839 | color: white;
840 | cursor: pointer;
841 | transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
842 | display: flex;
843 | align-items: center;
844 | justify-content: center;
845 | box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
846 | position: relative;
847 | overflow: hidden;
848 | }
849 |
850 | .playback-btn::before {
851 | content: '';
852 | position: absolute;
853 | inset: 0;
854 | background: radial-gradient(circle at center, transparent 0%, rgba(255, 255, 255, 0.2) 100%);
855 | opacity: 0;
856 | transition: opacity 0.3s ease;
857 | }
858 |
859 | .playback-btn:hover {
860 | transform: scale(1.05);
861 | box-shadow: 0 8px 25px rgba(59, 130, 246, 0.6);
862 | }
863 |
864 | .playback-btn:hover::before {
865 | opacity: 1;
866 | }
867 |
868 | .playback-btn:active {
869 | transform: scale(0.95);
870 | }
871 |
872 | .playback-btn.secondary {
873 | background: linear-gradient(135deg, #6b7280, #4b5563);
874 | box-shadow: 0 6px 20px rgba(107, 114, 128, 0.4);
875 | }
876 |
877 | .speed-control {
878 | display: flex;
879 | align-items: center;
880 | gap: 0.5rem;
881 | margin-left: 2rem;
882 | }
883 |
884 | .speed-btn {
885 | padding: 0.5rem 1rem;
886 | background: rgba(255, 255, 255, 0.1);
887 | border: 1px solid rgba(255, 255, 255, 0.2);
888 | border-radius: 8px;
889 | color: #e5e7eb;
890 | font-size: 0.875rem;
891 | font-weight: 500;
892 | cursor: pointer;
893 | transition: all 0.3s ease;
894 | }
895 |
896 | .speed-btn:hover {
897 | background: rgba(255, 255, 255, 0.15);
898 | border-color: rgba(255, 255, 255, 0.3);
899 | }
900 |
901 | .speed-btn.active {
902 | background: linear-gradient(135deg, #3b82f6, #8b5cf6);
903 | border-color: transparent;
904 | color: white;
905 | box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
906 | }
907 |
908 | /* Enhanced sidebars */
909 | .chain-sidebar,
910 | .graph-sidebar {
911 | background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
912 | backdrop-filter: blur(30px) saturate(200%);
913 | -webkit-backdrop-filter: blur(30px) saturate(200%);
914 | border: 1px solid rgba(255, 255, 255, 0.1);
915 | border-radius: 20px;
916 | padding: 2rem;
917 | height: fit-content;
918 | max-height: calc(100vh - 16rem);
919 | overflow-y: auto;
920 | box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
921 | }
922 |
923 | .chain-metadata,
924 | .thought-details {
925 | background: rgba(255, 255, 255, 0.05);
926 | padding: 1.25rem;
927 | border-radius: 16px;
928 | margin-bottom: 1.25rem;
929 | border: 1px solid rgba(255, 255, 255, 0.05);
930 | }
931 |
932 | .thought-details {
933 | border-left: 4px solid #3b82f6;
934 | background: linear-gradient(90deg, rgba(59, 130, 246, 0.1), transparent);
935 | }
936 |
937 | .chain-stats {
938 | display: grid;
939 | grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
940 | gap: 1.25rem;
941 | margin-bottom: 2rem;
942 | }
943 |
944 | .chain-stat {
945 | text-align: center;
946 | padding: 1.25rem;
947 | background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
948 | border-radius: 16px;
949 | border: 1px solid rgba(255, 255, 255, 0.05);
950 | transition: all 0.3s ease;
951 | }
952 |
953 | .chain-stat:hover {
954 | transform: translateY(-2px);
955 | box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
956 | }
957 |
958 | .chain-stat-value {
959 | font-size: 2rem;
960 | font-weight: 800;
961 | background: linear-gradient(135deg, #3b82f6, #8b5cf6);
962 | -webkit-background-clip: text;
963 | -webkit-text-fill-color: transparent;
964 | background-clip: text;
965 | }
966 |
967 | .chain-stat-label {
968 | font-size: 0.75rem;
969 | color: #9ca3af;
970 | text-transform: uppercase;
971 | letter-spacing: 0.1em;
972 | font-weight: 600;
973 | }
974 |
975 | /* Enhanced graph container */
976 | .graph-container {
977 | background: linear-gradient(135deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1));
978 | backdrop-filter: blur(30px) saturate(200%);
979 | -webkit-backdrop-filter: blur(30px) saturate(200%);
980 | border-radius: 24px;
981 | position: relative;
982 | overflow: hidden;
983 | box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
984 | }
985 |
986 | .graph-svg {
987 | width: 100%;
988 | height: 100%;
989 | cursor: grab;
990 | }
991 |
992 | .graph-svg:active {
993 | cursor: grabbing;
994 | }
995 |
996 | .graph-node {
997 | cursor: pointer;
998 | stroke-width: 3px;
999 | filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
1000 | transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
1001 | }
1002 |
1003 | .graph-node:hover {
1004 | stroke-width: 4px;
1005 | filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.6));
1006 | transform: scale(1.1);
1007 | }
1008 |
1009 | .graph-node.selected {
1010 | stroke-width: 5px;
1011 | filter: drop-shadow(0 12px 24px rgba(59, 130, 246, 0.8));
1012 | animation: pulse 2s infinite;
1013 | }
1014 |
1015 | @keyframes pulse {
1016 | 0% {
1017 | transform: scale(1);
1018 | }
1019 |
1020 | 50% {
1021 | transform: scale(1.05);
1022 | }
1023 |
1024 | 100% {
1025 | transform: scale(1);
1026 | }
1027 | }
1028 |
1029 | .graph-link {
1030 | stroke-opacity: 0.4;
1031 | transition: all 0.3s ease;
1032 | stroke-linecap: round;
1033 | }
1034 |
1035 | .graph-link:hover {
1036 | stroke-opacity: 0.8;
1037 | stroke-width: 3px;
1038 | }
1039 |
1040 | .graph-text {
1041 | font-family: 'Space Grotesk', sans-serif;
1042 | font-size: 12px;
1043 | font-weight: 600;
1044 | fill: #e5e7eb;
1045 | text-anchor: middle;
1046 | pointer-events: none;
1047 | text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
1048 | }
1049 |
1050 | /* Enhanced graph controls */
1051 | .graph-controls {
1052 | position: absolute;
1053 | top: 1.5rem;
1054 | left: 1.5rem;
1055 | z-index: 10;
1056 | display: flex;
1057 | flex-direction: column;
1058 | gap: 0.75rem;
1059 | }
1060 |
1061 | .graph-controls button {
1062 | width: 48px;
1063 | height: 48px;
1064 | border-radius: 12px;
1065 | background: rgba(0, 0, 0, 0.6);
1066 | backdrop-filter: blur(20px);
1067 | -webkit-backdrop-filter: blur(20px);
1068 | border: 1px solid rgba(255, 255, 255, 0.1);
1069 | color: white;
1070 | cursor: pointer;
1071 | transition: all 0.3s ease;
1072 | display: flex;
1073 | align-items: center;
1074 | justify-content: center;
1075 | }
1076 |
1077 | .graph-controls button:hover {
1078 | background: rgba(59, 130, 246, 0.4);
1079 | border-color: rgba(59, 130, 246, 0.6);
1080 | transform: scale(1.05);
1081 | }
1082 |
1083 | /* Enhanced graph legend */
1084 | .graph-legend {
1085 | position: absolute;
1086 | top: 1.5rem;
1087 | right: 1.5rem;
1088 | z-index: 10;
1089 | background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7));
1090 | backdrop-filter: blur(30px) saturate(200%);
1091 | -webkit-backdrop-filter: blur(30px) saturate(200%);
1092 | border-radius: 16px;
1093 | padding: 1.5rem;
1094 | min-width: 220px;
1095 | box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
1096 | border: 1px solid rgba(255, 255, 255, 0.1);
1097 | }
1098 |
1099 | .legend-item {
1100 | display: flex;
1101 | align-items: center;
1102 | margin-bottom: 0.75rem;
1103 | font-size: 0.875rem;
1104 | transition: all 0.3s ease;
1105 | }
1106 |
1107 | .legend-item:hover {
1108 | transform: translateX(4px);
1109 | }
1110 |
1111 | .legend-color {
1112 | width: 20px;
1113 | height: 20px;
1114 | border-radius: 50%;
1115 | margin-right: 0.75rem;
1116 | border: 2px solid rgba(255, 255, 255, 0.3);
1117 | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
1118 | }
1119 |
1120 | /* Enhanced graph tooltip */
1121 | .graph-tooltip {
1122 | position: absolute;
1123 | background: linear-gradient(135deg, rgba(0, 0, 0, 0.95), rgba(15, 23, 42, 0.95));
1124 | backdrop-filter: blur(30px) saturate(200%);
1125 | -webkit-backdrop-filter: blur(30px) saturate(200%);
1126 | color: white;
1127 | padding: 1rem;
1128 | border-radius: 12px;
1129 | font-size: 0.875rem;
1130 | pointer-events: none;
1131 | z-index: 1000;
1132 | max-width: 320px;
1133 | box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
1134 | border: 1px solid rgba(255, 255, 255, 0.1);
1135 | }
1136 |
1137 | /* Enhanced spinner */
1138 | .spinner {
1139 | width: 48px;
1140 | height: 48px;
1141 | border: 3px solid rgba(59, 130, 246, 0.2);
1142 | border-top: 3px solid transparent;
1143 | border-radius: 50%;
1144 | background: linear-gradient(transparent, transparent),
1145 | linear-gradient(90deg, #3b82f6, #8b5cf6);
1146 | background-clip: padding-box, border-box;
1147 | background-origin: padding-box, border-box;
1148 | animation: spin 1s linear infinite;
1149 | }
1150 |
1151 | @keyframes spin {
1152 | 0% {
1153 | transform: rotate(0deg);
1154 | }
1155 |
1156 | 100% {
1157 | transform: rotate(360deg);
1158 | }
1159 | }
1160 |
1161 | /* Enhanced tippy tooltips */
1162 | .tippy-box[data-theme~='custom'] {
1163 | background: linear-gradient(135deg, rgba(30, 30, 46, 0.98) 0%, rgba(49, 46, 129, 0.98) 100%);
1164 | backdrop-filter: blur(30px) saturate(200%);
1165 | -webkit-backdrop-filter: blur(30px) saturate(200%);
1166 | border: 1px solid rgba(255, 255, 255, 0.15);
1167 | border-radius: 20px;
1168 | box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.7);
1169 | font-size: 14px;
1170 | max-width: 380px;
1171 | }
1172 |
1173 | .tippy-box[data-theme~='custom'] .tippy-content {
1174 | padding: 24px;
1175 | color: #ffffff;
1176 | line-height: 1.6;
1177 | }
1178 |
1179 | .tippy-box[data-theme~='custom'] .tippy-arrow {
1180 | color: rgba(30, 30, 46, 0.98);
1181 | }
1182 |
1183 | .tooltip-content h4 {
1184 | font-size: 18px;
1185 | margin-bottom: 12px;
1186 | font-weight: 700;
1187 | background: linear-gradient(135deg, #e5e7eb, #9ca3af);
1188 | -webkit-background-clip: text;
1189 | -webkit-text-fill-color: transparent;
1190 | background-clip: text;
1191 | }
1192 |
1193 | .tooltip-content p {
1194 | margin-bottom: 12px;
1195 | font-size: 14px;
1196 | opacity: 0.95;
1197 | }
1198 |
1199 | .tooltip-content strong {
1200 | color: #f1f5f9;
1201 | font-weight: 600;
1202 | }
1203 |
1204 | /* Enhanced demo sections */
1205 | .demo-section {
1206 | padding: 3rem;
1207 | margin-bottom: 3rem;
1208 | border-radius: 24px;
1209 | border: 1px solid rgba(255, 255, 255, 0.08);
1210 | background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
1211 | backdrop-filter: blur(20px) saturate(150%);
1212 | -webkit-backdrop-filter: blur(20px) saturate(150%);
1213 | box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
1214 | position: relative;
1215 | overflow: hidden;
1216 | content-visibility: auto;
1217 | contain-intrinsic-size: 1000px 800px;
1218 | }
1219 |
1220 | .demo-section::before {
1221 | content: '';
1222 | position: absolute;
1223 | top: 0;
1224 | left: 0;
1225 | right: 0;
1226 | height: 1px;
1227 | background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
1228 | }
1229 |
1230 | .demo-section-title {
1231 | font-size: 2rem;
1232 | font-weight: 800;
1233 | margin-bottom: 0.75rem;
1234 | padding-bottom: 0.75rem;
1235 | background: linear-gradient(135deg, #e5e7eb, #9ca3af);
1236 | -webkit-background-clip: text;
1237 | -webkit-text-fill-color: transparent;
1238 | background-clip: text;
1239 | position: relative;
1240 | }
1241 |
1242 | .demo-section-title::after {
1243 | content: '';
1244 | position: absolute;
1245 | bottom: 0;
1246 | left: 0;
1247 | width: 100px;
1248 | height: 3px;
1249 | background: linear-gradient(90deg, #3b82f6, #8b5cf6);
1250 | border-radius: 2px;
1251 | }
1252 |
1253 | .demo-section-description {
1254 | font-size: 1.125rem;
1255 | color: #cbd5e1;
1256 | margin-bottom: 2rem;
1257 | max-width: 80ch;
1258 | line-height: 1.7;
1259 | }
1260 |
1261 | /* Hover lift effect for interactive elements */
1262 | .interactive {
1263 | transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
1264 | }
1265 |
1266 | .interactive:hover {
1267 | transform: translateY(-2px);
1268 | box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
1269 | }
1270 |
1271 | /* Gradient text effect */
1272 | .gradient-text {
1273 | background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
1274 | -webkit-background-clip: text;
1275 | -webkit-text-fill-color: transparent;
1276 | background-clip: text;
1277 | }
1278 |
1279 | /* Glow effect for important elements */
1280 | .glow {
1281 | box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
1282 | }
1283 |
1284 | /* Noise texture overlay */
1285 | .noise::before {
1286 | content: '';
1287 | position: absolute;
1288 | top: 0;
1289 | left: 0;
1290 | right: 0;
1291 | bottom: 0;
1292 | background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.02'/%3E%3C/svg%3E");
1293 | pointer-events: none;
1294 | opacity: 0.03;
1295 | }
1296 |
1297 | /* Custom focus states */
1298 | *:focus {
1299 | outline: none;
1300 | box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
1301 | }
1302 |
1303 | /* Smooth scroll behavior */
1304 | html {
1305 | scroll-behavior: smooth;
1306 | }
1307 |
1308 | /* Selection color */
1309 | ::selection {
1310 | background: rgba(139, 92, 246, 0.3);
1311 | color: white;
1312 | }
1313 |
1314 | /* Loading states */
1315 | .loading {
1316 | position: relative;
1317 | overflow: hidden;
1318 | }
1319 |
1320 | .loading::after {
1321 | content: '';
1322 | position: absolute;
1323 | top: 0;
1324 | left: -100%;
1325 | width: 100%;
1326 | height: 100%;
1327 | background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
1328 | animation: shimmer 2s infinite;
1329 | }
1330 |
1331 | /* Responsive adjustments */
1332 | @media (max-width: 768px) {
1333 | .demo-section {
1334 | padding: 2rem 1rem;
1335 | }
1336 |
1337 | .masonry-grid {
1338 | grid-template-columns: 1fr;
1339 | }
1340 | }
1341 |
1342 | /* Scrolled header state */
1343 | header.scrolled {
1344 | box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
1345 | }
1346 | </style>
1347 | </head>
1348 |
1349 | <body class="transition-colors duration-300 bg-gradient-to-br from-slate-900 via-blue-900 to-slate-900 text-white noise"
1350 | style="background: linear-gradient(135deg, rgb(15, 23, 42), rgb(30, 58, 138), rgb(15, 23, 42));">
1351 |
1352 | <!-- Particle Background -->
1353 | <div id="particles-js"></div>
1354 |
1355 | <!-- Header (Static) -->
1356 | <header class="glass-dark border-b border-white/10 sticky top-0 z-40">
1357 | <div class="container mx-auto px-4 py-4">
1358 | <div class="flex items-center justify-between">
1359 | <div class="flex items-center space-x-4">
1360 | <div class="flex items-center space-x-3 cursor-pointer group" data-tilt data-tilt-max="10"
1361 | data-tilt-speed="400">
1362 | <div class="relative">
1363 | <div
1364 | class="w-12 h-12 rounded-xl bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center group-hover:scale-110 transition-transform shadow-lg">
1365 | <i data-lucide="brain-circuit" class="w-7 h-7"></i>
1366 | </div>
1367 | <div class="absolute inset-0 rounded-xl border-2 border-blue-400 animate-pulse-ring"></div>
1368 | </div>
1369 | <div>
1370 | <h1
1371 | class="text-2xl font-extrabold bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 bg-clip-text text-transparent group-hover:from-blue-300 group-hover:via-purple-300 group-hover:to-pink-300 transition-all animate-gradient bg-300%">
1372 | UMS Explorer
1373 | </h1>
1374 | <p class="text-xs text-gray-400 group-hover:text-gray-300 transition-colors font-medium">
1375 | UI/UX Look Book</p>
1376 | </div>
1377 | </div>
1378 | <nav class="hidden md:flex">
1379 | <ol class="flex items-center space-x-2 text-sm">
1380 | <li><a href="#" class="text-blue-400 hover:text-blue-300 transition-colors">Dashboard</a>
1381 | </li>
1382 | <li class="text-gray-600">/</li>
1383 | <li class="text-blue-400 capitalize">Components</li>
1384 | </ol>
1385 | </nav>
1386 | </div>
1387 | <div class="flex items-center space-x-4">
1388 | <div class="relative search-container">
1389 | <div class="relative group">
1390 | <input type="text" placeholder="Search everything..."
1391 | class="w-64 pl-12 pr-4 py-2.5 bg-white/10 backdrop-blur-md border border-white/20 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:border-blue-400 focus:bg-white/20 transition-all focus:w-80">
1392 | <i data-lucide="search"
1393 | class="absolute left-3.5 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400 group-focus-within:text-blue-400 transition-colors"></i>
1394 | <div
1395 | class="absolute right-3 top-1/2 transform -translate-y-1/2 text-xs text-gray-500 font-medium">
1396 | ⌘K</div>
1397 | </div>
1398 | </div>
1399 | <div class="hidden md:flex items-center space-x-2">
1400 | <div class="w-2.5 h-2.5 bg-green-400 rounded-full animate-pulse shadow-lg shadow-green-400/50">
1401 | </div>
1402 | <span class="text-sm text-gray-300 font-medium">Connected</span>
1403 | </div>
1404 | <button
1405 | class="p-2.5 rounded-xl bg-white/10 backdrop-blur-md border border-white/20 hover:bg-white/20 hover:scale-105 transition-all interactive">
1406 | <i data-lucide="sun" class="w-5 h-5"></i>
1407 | </button>
1408 | <button
1409 | class="p-2.5 rounded-xl bg-white/10 backdrop-blur-md border border-white/20 hover:bg-white/20 hover:scale-105 transition-all interactive">
1410 | <i data-lucide="command" class="w-5 h-5"></i>
1411 | </button>
1412 | </div>
1413 | </div>
1414 | </div>
1415 | </header>
1416 |
1417 | <!-- Main content area -->
1418 | <main class="container mx-auto px-4 py-8">
1419 | <div class="text-center mb-16" data-aos="fade-up">
1420 | <h1 class="text-5xl lg:text-6xl font-extrabold tracking-tight mb-6 gradient-text animate-gradient bg-300%">
1421 | UI/UX Pattern Library</h1>
1422 | <p class="mt-4 text-xl text-gray-400 max-w-3xl mx-auto leading-relaxed">A visual inventory of all components
1423 | and interaction patterns from the UMS Explorer application.</p>
1424 | </div>
1425 |
1426 | <!-- Core Components -->
1427 | <div class="demo-section" data-aos="fade-up" data-aos-delay="100">
1428 | <h2 class="demo-section-title">Core Components</h2>
1429 | <p class="demo-section-description">Fundamental building blocks of the UI, including interactive elements
1430 | like command palettes, modals, and notifications.</p>
1431 | <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
1432 | <!-- Command Palette -->
1433 | <div data-aos="fade-right" data-aos-delay="200">
1434 | <h3 class="font-semibold text-lg mb-4">Command Palette</h3>
1435 | <div class="relative h-[420px] bg-black/30 rounded-xl flex items-center justify-center p-4 glass">
1436 | <div class="command-palette"
1437 | style="position: relative; transform: none; top: auto; left: auto; width: 100%;">
1438 | <div class="p-6">
1439 | <input type="text" value="view" placeholder="Type a command or search..."
1440 | class="w-full p-4 rounded-xl bg-transparent border border-white/20 text-lg focus:outline-none focus:border-blue-400 transition-all">
1441 | <div class="mt-6 max-h-80 overflow-y-auto space-y-2">
1442 | <div
1443 | class="p-4 rounded-xl bg-gradient-to-r from-blue-500/20 to-purple-500/20 cursor-pointer transition-all hover:from-blue-500/30 hover:to-purple-500/30 border border-white/10">
1444 | <div class="flex items-center">
1445 | <i data-lucide="git-branch" class="w-6 h-6 mr-4 text-purple-400"></i>
1446 | <div class="flex-1">
1447 | <div class="font-semibold text-lg">View Workflows</div>
1448 | <div class="text-sm text-gray-400">Navigate to workflows view</div>
1449 | </div>
1450 | <div class="ml-auto">
1451 | <kbd
1452 | class="px-2 py-1 text-xs bg-white/10 rounded-lg border border-white/20">W</kbd>
1453 | </div>
1454 | </div>
1455 | </div>
1456 | <div
1457 | class="p-4 rounded-xl hover:bg-white/10 cursor-pointer transition-all border border-transparent hover:border-white/10">
1458 | <div class="flex items-center">
1459 | <i data-lucide="brain" class="w-6 h-6 mr-4 text-blue-400"></i>
1460 | <div class="flex-1">
1461 | <div class="font-semibold text-lg">View Memories</div>
1462 | <div class="text-sm text-gray-400">Navigate to memories view</div>
1463 | </div>
1464 | <div class="ml-auto">
1465 | <kbd
1466 | class="px-2 py-1 text-xs bg-white/10 rounded-lg border border-white/20">M</kbd>
1467 | </div>
1468 | </div>
1469 | </div>
1470 | <div
1471 | class="p-4 rounded-xl hover:bg-white/10 cursor-pointer transition-all border border-transparent hover:border-white/10">
1472 | <div class="flex items-center">
1473 | <i data-lucide="bar-chart-3" class="w-6 h-6 mr-4 text-green-400"></i>
1474 | <div class="flex-1">
1475 | <div class="font-semibold text-lg">View Analytics</div>
1476 | <div class="text-sm text-gray-400">Navigate to analytics view</div>
1477 | </div>
1478 | <div class="ml-auto">
1479 | <kbd
1480 | class="px-2 py-1 text-xs bg-white/10 rounded-lg border border-white/20">A</kbd>
1481 | </div>
1482 | </div>
1483 | </div>
1484 | </div>
1485 | </div>
1486 | </div>
1487 | </div>
1488 | </div>
1489 |
1490 | <!-- Modals -->
1491 | <div data-aos="fade-left" data-aos-delay="200">
1492 | <h3 class="font-semibold text-lg mb-4">Modal Dialog</h3>
1493 | <div class="relative h-[420px] bg-black/30 rounded-xl flex items-center justify-center p-4 glass">
1494 | <div class="enhanced-card rounded-2xl max-w-lg w-full" style="position: relative;" data-tilt
1495 | data-tilt-max="5" data-tilt-speed="300">
1496 | <div class="p-8">
1497 | <div class="flex items-center justify-between mb-6">
1498 | <h3 class="text-2xl font-bold gradient-text">Workflow Details</h3>
1499 | <button class="p-2 rounded-lg hover:bg-white/10 transition-colors group">
1500 | <i data-lucide="x"
1501 | class="w-5 h-5 group-hover:rotate-90 transition-transform"></i>
1502 | </button>
1503 | </div>
1504 | <div class="space-y-6">
1505 | <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
1506 | <div>
1507 | <h4 class="font-semibold mb-3 text-gray-300">Basic Information</h4>
1508 | <div class="space-y-3 text-sm">
1509 | <div class="flex justify-between">
1510 | <span class="text-gray-400">Title:</span>
1511 | <span class="font-medium">Analyze Market Trends</span>
1512 | </div>
1513 | <div class="flex justify-between items-center">
1514 | <span class="text-gray-400">Status:</span>
1515 | <span
1516 | class="px-3 py-1 text-xs rounded-full bg-gradient-to-r from-green-500/20 to-emerald-500/20 text-green-400 border border-green-500/20">active</span>
1517 | </div>
1518 | <div class="flex justify-between">
1519 | <span class="text-gray-400">Created:</span>
1520 | <span class="font-medium">1/1/2024</span>
1521 | </div>
1522 | </div>
1523 | </div>
1524 | <div>
1525 | <h4 class="font-semibold mb-3 text-gray-300">Metrics</h4>
1526 | <div class="grid grid-cols-3 gap-4">
1527 | <div
1528 | class="text-center p-3 rounded-xl bg-white/5 border border-white/10">
1529 | <div class="text-2xl font-bold text-blue-400">12</div>
1530 | <div class="text-xs text-gray-400 mt-1">Actions</div>
1531 | </div>
1532 | <div
1533 | class="text-center p-3 rounded-xl bg-white/5 border border-white/10">
1534 | <div class="text-2xl font-bold text-green-400">34</div>
1535 | <div class="text-xs text-gray-400 mt-1">Memories</div>
1536 | </div>
1537 | <div
1538 | class="text-center p-3 rounded-xl bg-white/5 border border-white/10">
1539 | <div class="text-2xl font-bold text-purple-400">5</div>
1540 | <div class="text-xs text-gray-400 mt-1">Artifacts</div>
1541 | </div>
1542 | </div>
1543 | </div>
1544 | </div>
1545 | <div>
1546 | <h4 class="font-semibold mb-3 text-gray-300">Description</h4>
1547 | <p
1548 | class="text-gray-300 bg-gradient-to-br from-white/10 to-white/5 p-4 rounded-xl border border-white/10">
1549 | A multi-step workflow to analyze recent market trends for Q2, generate a
1550 | report, and create a presentation.</p>
1551 | </div>
1552 | </div>
1553 | </div>
1554 | </div>
1555 | </div>
1556 | </div>
1557 |
1558 | <!-- Notifications -->
1559 | <div data-aos="fade-up" data-aos-delay="300">
1560 | <h3 class="font-semibold text-lg mb-4">Toast Notifications</h3>
1561 | <div class="space-y-4">
1562 | <div
1563 | class="p-4 rounded-xl bg-gradient-to-r from-green-500 to-emerald-500 text-white font-medium shadow-xl flex items-center transform hover:scale-105 transition-transform cursor-pointer">
1564 | <i data-lucide="check-circle" class="w-6 h-6 mr-3 animate-bounce-subtle"></i>
1565 | <span class="flex-1">Success! The operation was completed.</span>
1566 | <i data-lucide="x" class="w-4 h-4 opacity-70 hover:opacity-100"></i>
1567 | </div>
1568 | <div
1569 | class="p-4 rounded-xl bg-gradient-to-r from-red-500 to-rose-500 text-white font-medium shadow-xl flex items-center transform hover:scale-105 transition-transform cursor-pointer">
1570 | <i data-lucide="x-circle" class="w-6 h-6 mr-3 animate-pulse"></i>
1571 | <span class="flex-1">Error! Could not load the database.</span>
1572 | <i data-lucide="x" class="w-4 h-4 opacity-70 hover:opacity-100"></i>
1573 | </div>
1574 | <div
1575 | class="p-4 rounded-xl bg-gradient-to-r from-yellow-500 to-amber-500 text-white font-medium shadow-xl flex items-center transform hover:scale-105 transition-transform cursor-pointer">
1576 | <i data-lucide="alert-triangle" class="w-6 h-6 mr-3"></i>
1577 | <span class="flex-1">Warning: Memory usage is high.</span>
1578 | <i data-lucide="x" class="w-4 h-4 opacity-70 hover:opacity-100"></i>
1579 | </div>
1580 | <div
1581 | class="p-4 rounded-xl bg-gradient-to-r from-blue-500 to-indigo-500 text-white font-medium shadow-xl flex items-center transform hover:scale-105 transition-transform cursor-pointer">
1582 | <i data-lucide="info" class="w-6 h-6 mr-3"></i>
1583 | <span class="flex-1">Info: Switched to light theme.</span>
1584 | <i data-lucide="x" class="w-4 h-4 opacity-70 hover:opacity-100"></i>
1585 | </div>
1586 | </div>
1587 | </div>
1588 |
1589 | <!-- Database Drop Zone -->
1590 | <div data-aos="fade-up" data-aos-delay="300">
1591 | <h3 class="font-semibold text-lg mb-4">File Drop Zone</h3>
1592 | <div class="enhanced-card rounded-2xl p-8 max-w-md w-full text-center" data-tilt data-tilt-max="10"
1593 | data-tilt-speed="400">
1594 | <div class="mb-6">
1595 | <div
1596 | class="w-24 h-24 bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl flex items-center justify-center mx-auto mb-4 animate-float shadow-2xl">
1597 | <i data-lucide="database" class="w-12 h-12"></i>
1598 | </div>
1599 | <h2 class="text-2xl font-bold mb-2 gradient-text">Load Your UMS Database</h2>
1600 | <p class="text-gray-400">Drag and drop your database file or click to browse</p>
1601 | </div>
1602 | <div
1603 | class="drop-zone relative rounded-xl border-2 border-dashed border-gray-600 hover:border-blue-400 transition-all p-8 cursor-pointer group bg-gradient-to-br from-blue-400/10 to-purple-400/10 border-blue-400">
1604 | <div class="text-center">
1605 | <i data-lucide="upload-cloud"
1606 | class="w-14 h-14 mx-auto mb-4 text-blue-400 group-hover:animate-bounce"></i>
1607 | <p class="font-medium mb-2 text-lg">Drop your database file here</p>
1608 | <p class="text-sm text-gray-500">Supports .db, .sqlite, .sqlite3 files</p>
1609 | </div>
1610 | </div>
1611 | </div>
1612 | </div>
1613 | </div>
1614 | </div>
1615 |
1616 | <!-- Cards & Grids -->
1617 | <div class="demo-section" data-aos="fade-up" data-aos-delay="100">
1618 | <h2 class="demo-section-title">Cards & Grids</h2>
1619 | <p class="demo-section-description">Various card styles used to display summarized information in grid
1620 | layouts. These include stat cards, navigation cards, and data-specific cards for memories, actions, and
1621 | workflows.</p>
1622 |
1623 | <h3 class="font-semibold text-lg mb-4">Stat & Navigation Cards</h3>
1624 | <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
1625 | <!-- Stat Card -->
1626 | <div class="enhanced-card rounded-2xl p-6 group" data-aos="zoom-in" data-aos-delay="200">
1627 | <div class="flex items-center justify-between mb-4">
1628 | <div
1629 | class="w-14 h-14 bg-gradient-to-br from-blue-500/30 to-blue-600/30 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform shadow-lg">
1630 | <i data-lucide="brain" class="w-7 h-7 text-blue-400"></i>
1631 | </div>
1632 | <div class="text-right">
1633 | <div class="text-3xl font-extrabold gradient-text">1,234</div>
1634 | <div class="text-sm text-gray-400 font-medium">Memories</div>
1635 | </div>
1636 | </div>
1637 | <div class="h-3 bg-gray-700/50 rounded-full overflow-hidden backdrop-blur-sm">
1638 | <div class="h-full bg-gradient-to-r from-blue-500 to-blue-400 rounded-full animate-pulse"
1639 | style="width: 65%;"></div>
1640 | </div>
1641 | </div>
1642 | <!-- Navigation Card with Tooltip -->
1643 | <div class="enhanced-card rounded-2xl p-6 cursor-pointer group dashboard-tooltip"
1644 | data-tippy-content="<div class='tooltip-content'><h4 class='font-bold text-purple-400 mb-2'>🔄 Workflows</h4><p>Explore and analyze AI agent execution workflows - complete journeys from start to finish.</p></div>"
1645 | data-tippy-allowHTML="true" data-tippy-theme="custom" data-aos="zoom-in" data-aos-delay="300">
1646 | <div class="flex items-center mb-4">
1647 | <div
1648 | class="w-14 h-14 bg-gradient-to-br from-purple-500/30 to-purple-600/30 rounded-xl flex items-center justify-center mr-4 group-hover:scale-110 transition-transform shadow-lg">
1649 | <i data-lucide="git-branch" class="w-7 h-7 text-purple-400"></i>
1650 | </div>
1651 | <div>
1652 | <h3 class="text-xl font-semibold">Workflows</h3>
1653 | <p class="text-sm text-gray-400">Explore AI agent workflows</p>
1654 | </div>
1655 | </div>
1656 | <div class="flex items-center justify-between">
1657 | <span class="text-sm text-gray-500">View all workflows</span>
1658 | <i data-lucide="arrow-right"
1659 | class="w-5 h-5 text-gray-400 group-hover:text-purple-400 group-hover:translate-x-2 transition-all"></i>
1660 | </div>
1661 | </div>
1662 | </div>
1663 |
1664 | <h3 class="font-semibold text-lg my-4">Data-Specific Cards</h3>
1665 | <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
1666 | <!-- Memory Card -->
1667 | <div class="enhanced-card rounded-xl p-5 cursor-pointer group memory-episodic" data-aos="fade-up"
1668 | data-aos-delay="200">
1669 | <div class="flex items-start justify-between mb-3">
1670 | <div class="flex items-center space-x-2">
1671 | <span
1672 | class="px-3 py-1 text-xs rounded-full bg-gradient-to-r from-blue-500/20 to-indigo-500/20 text-blue-400 border border-blue-500/20 font-medium">episodic</span>
1673 | <span class="text-xs text-gray-500">observation</span>
1674 | </div>
1675 | <div class="flex items-center space-x-2 text-xs text-gray-500">
1676 | <span class="font-medium">I: 8/10</span>
1677 | <span class="font-medium">C: 95%</span>
1678 | </div>
1679 | </div>
1680 | <p class="text-gray-300 text-sm mb-3 line-clamp-2 group-hover:text-white transition-colors">Observed
1681 | a significant spike in user engagement after the new feature deployment. The API response time
1682 | also improved by 15%.</p>
1683 | <div class="flex items-center justify-between text-sm text-gray-500">
1684 | <span>2h ago</span>
1685 | <div class="flex items-center space-x-2 group-hover:text-blue-400 transition-colors">
1686 | <i data-lucide="eye" class="w-4 h-4"></i>
1687 | <span>15</span>
1688 | </div>
1689 | </div>
1690 | </div>
1691 | <!-- Action Card -->
1692 | <div class="enhanced-card rounded-2xl p-6 cursor-pointer group" data-aos="fade-up" data-aos-delay="300">
1693 | <div class="flex items-start justify-between mb-4">
1694 | <div class="flex items-center space-x-2">
1695 | <span
1696 | class="px-3 py-1 text-xs rounded-full bg-gradient-to-r from-green-500/20 to-emerald-500/20 text-green-400 border border-green-500/20 font-medium">completed</span>
1697 | <span class="text-xs text-gray-500">tool_use</span>
1698 | </div>
1699 | <div class="text-xs text-gray-500 font-medium">1m 15s</div>
1700 | </div>
1701 | <h3 class="font-semibold text-lg mb-2 group-hover:text-orange-400 transition-colors">Run Data
1702 | Analysis Script</h3>
1703 | <p class="text-gray-400 text-sm mb-4 line-clamp-2">Executing the python script `analyze_logs.py` to
1704 | process the latest server logs and extract key performance indicators.</p>
1705 | <div class="flex items-center justify-between text-sm text-gray-500">
1706 | <span>3h ago</span>
1707 | <div class="flex items-center space-x-2 group-hover:text-orange-400 transition-colors">
1708 | <i data-lucide="wrench" class="w-4 h-4"></i>
1709 | <span>Workflow</span>
1710 | </div>
1711 | </div>
1712 | </div>
1713 | <!-- Workflow Card -->
1714 | <div class="enhanced-card rounded-2xl p-6 cursor-pointer group" data-aos="fade-up" data-aos-delay="400">
1715 | <div class="flex items-start justify-between mb-4">
1716 | <h3 class="font-semibold text-lg group-hover:text-blue-400 transition-colors">Generate Q2
1717 | Financial Report</h3>
1718 | <div class="status-indicator">
1719 | <span
1720 | class="px-3 py-1 text-xs rounded-full bg-gradient-to-r from-red-500/20 to-rose-500/20 text-red-400 border border-red-500/20 font-medium status-failed">failed</span>
1721 | </div>
1722 | </div>
1723 | <p class="text-gray-400 text-sm mb-4 line-clamp-2">A workflow to gather financial data, process it,
1724 | and generate a final PDF report. Failed due to an API timeout.</p>
1725 | <div class="flex items-center justify-between text-sm text-gray-500">
1726 | <span>1d ago</span>
1727 | <div class="flex items-center space-x-4">
1728 | <span class="flex items-center space-x-1">
1729 | <i data-lucide="layers" class="w-4 h-4"></i>
1730 | <span>8 actions</span>
1731 | </span>
1732 | <span class="flex items-center space-x-1">
1733 | <i data-lucide="brain" class="w-4 h-4"></i>
1734 | <span>21 memories</span>
1735 | </span>
1736 | </div>
1737 | </div>
1738 | </div>
1739 | </div>
1740 | </div>
1741 |
1742 | <!-- Visualizations -->
1743 | <div class="demo-section" data-aos="fade-up" data-aos-delay="100">
1744 | <h2 class="demo-section-title">Data Visualizations</h2>
1745 | <p class="demo-section-description">Static representations of dynamic, data-driven visualizations like
1746 | charts and graphs. These mockups capture the look and feel without the underlying JavaScript libraries.
1747 | </p>
1748 | <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
1749 | <!-- Charts -->
1750 | <div data-aos="fade-right" data-aos-delay="200">
1751 | <h3 class="font-semibold text-lg mb-4">Charts (Chart.js)</h3>
1752 | <div class="space-y-6">
1753 | <div class="chart-container">
1754 | <h3 class="text-xl font-semibold mb-6 gradient-text">Memory Level Distribution</h3>
1755 | <svg viewBox="0 0 400 200" class="w-full h-auto">
1756 | <defs>
1757 | <filter id="glow">
1758 | <feGaussianBlur stdDeviation="3" result="coloredBlur" />
1759 | <feMerge>
1760 | <feMergeNode in="coloredBlur" />
1761 | <feMergeNode in="SourceGraphic" />
1762 | </feMerge>
1763 | </filter>
1764 | </defs>
1765 | <circle cx="120" cy="100" r="70" fill="none" stroke="#f59e0b" stroke-width="30"
1766 | filter="url(#glow)" opacity="0.9"></circle>
1767 | <path d="M 120 30 A 70 70 0 0 1 185.3 148.5" fill="none" stroke="#3b82f6"
1768 | stroke-width="30" filter="url(#glow)" opacity="0.9"></path>
1769 | <path d="M 185.3 148.5 A 70 70 0 0 1 54.7 148.5" fill="none" stroke="#10b981"
1770 | stroke-width="30" filter="url(#glow)" opacity="0.9"></path>
1771 | <text x="250" y="60" fill="#e5e7eb" font-size="14" font-weight="500">Working</text>
1772 | <circle cx="235" cy="56" r="6" fill="#f59e0b" filter="url(#glow)"></circle>
1773 | <text x="250" y="90" fill="#e5e7eb" font-size="14" font-weight="500">Episodic</text>
1774 | <circle cx="235" cy="86" r="6" fill="#3b82f6" filter="url(#glow)"></circle>
1775 | <text x="250" y="120" fill="#e5e7eb" font-size="14" font-weight="500">Semantic</text>
1776 | <circle cx="235" cy="116" r="6" fill="#10b981" filter="url(#glow)"></circle>
1777 | </svg>
1778 | </div>
1779 | <div class="chart-container">
1780 | <h3 class="text-xl font-semibold mb-6 gradient-text">Activity Timeline</h3>
1781 | <svg viewBox="0 0 400 200" class="w-full h-auto">
1782 | <defs>
1783 | <linearGradient id="lineGradient" x1="0%" y1="0%" x2="100%" y2="0%">
1784 | <stop offset="0%" style="stop-color:#10b981;stop-opacity:0.8" />
1785 | <stop offset="100%" style="stop-color:#3b82f6;stop-opacity:0.8" />
1786 | </linearGradient>
1787 | <linearGradient id="fillGradient" x1="0%" y1="0%" x2="0%" y2="100%">
1788 | <stop offset="0%" style="stop-color:#10b981;stop-opacity:0.3" />
1789 | <stop offset="100%" style="stop-color:#10b981;stop-opacity:0" />
1790 | </linearGradient>
1791 | </defs>
1792 | <path d="M 20 150 C 80 80, 150 180, 220 120 S 350 20, 380 50 L 380 180 L 20 180 Z"
1793 | fill="url(#fillGradient)"></path>
1794 | <path d="M 20 150 C 80 80, 150 180, 220 120 S 350 20, 380 50"
1795 | stroke="url(#lineGradient)" stroke-width="3" fill="none" filter="url(#glow)"></path>
1796 | <circle cx="20" cy="150" r="6" fill="#10b981" filter="url(#glow)">
1797 | <animate attributeName="r" values="6;8;6" dur="2s" repeatCount="indefinite" />
1798 | </circle>
1799 | <circle cx="220" cy="120" r="6" fill="#22d3ee" filter="url(#glow)">
1800 | <animate attributeName="r" values="6;8;6" dur="2s" begin="0.5s"
1801 | repeatCount="indefinite" />
1802 | </circle>
1803 | <circle cx="380" cy="50" r="6" fill="#3b82f6" filter="url(#glow)">
1804 | <animate attributeName="r" values="6;8;6" dur="2s" begin="1s"
1805 | repeatCount="indefinite" />
1806 | </circle>
1807 | <line x1="0" y1="180" x2="400" y2="180" stroke="#4b5563" stroke-width="1"></line>
1808 | <text x="20" y="195" fill="#9ca3af" font-size="12" font-weight="500">Mon</text>
1809 | <text x="120" y="195" fill="#9ca3af" font-size="12" font-weight="500">Tue</text>
1810 | <text x="220" y="195" fill="#9ca3af" font-size="12" font-weight="500">Wed</text>
1811 | <text x="320" y="195" fill="#9ca3af" font-size="12" font-weight="500">Thu</text>
1812 | </svg>
1813 | </div>
1814 | </div>
1815 | </div>
1816 | <!-- Memory Graph -->
1817 | <div data-aos="fade-left" data-aos-delay="200">
1818 | <h3 class="font-semibold text-lg mb-4">Memory Graph (D3.js)</h3>
1819 | <div class="grid grid-cols-12 gap-6">
1820 | <div class="col-span-12 lg:col-span-8">
1821 | <div class="graph-container" style="height: 420px;">
1822 | <svg class="graph-svg">
1823 | <defs>
1824 | <linearGradient id="linkGradient1" x1="0%" y1="0%" x2="100%" y2="0%">
1825 | <stop offset="0%" style="stop-color:#3b82f6;stop-opacity:0.6" />
1826 | <stop offset="100%" style="stop-color:#8b5cf6;stop-opacity:0.6" />
1827 | </linearGradient>
1828 | <filter id="nodeGlow">
1829 | <feGaussianBlur stdDeviation="3" result="coloredBlur" />
1830 | <feMerge>
1831 | <feMergeNode in="coloredBlur" />
1832 | <feMergeNode in="SourceGraphic" />
1833 | </feMerge>
1834 | </filter>
1835 | </defs>
1836 | <line class="graph-link" x1="100" y1="150" x2="200" y2="100"
1837 | stroke="url(#linkGradient1)" stroke-width="3"></line>
1838 | <line class="graph-link" x1="200" y1="100" x2="300" y2="150" stroke="#10b981"
1839 | stroke-width="3" opacity="0.6"></line>
1840 | <line class="graph-link" x1="200" y1="100" x2="250" y2="250" stroke="#8b5cf6"
1841 | stroke-width="3" opacity="0.6"></line>
1842 | <line class="graph-link" x1="100" y1="150" x2="250" y2="250" stroke="#3b82f6"
1843 | stroke-width="3" opacity="0.6"></line>
1844 | <circle class="graph-node selected" cx="200" cy="100" r="18" fill="#f59e0b"
1845 | stroke="#d97706" filter="url(#nodeGlow)"></circle>
1846 | <text class="graph-text" x="200" y="105" font-size="10" font-weight="700">W</text>
1847 | <text class="graph-text" x="200" y="130">Working</text>
1848 | <circle class="graph-node" cx="100" cy="150" r="15" fill="#3b82f6" stroke="#1d4ed8"
1849 | filter="url(#nodeGlow)"></circle>
1850 | <text class="graph-text" x="100" y="155" font-size="10" font-weight="700">E</text>
1851 | <text class="graph-text" x="100" y="180">Episodic</text>
1852 | <circle class="graph-node" cx="300" cy="150" r="13" fill="#10b981" stroke="#059669"
1853 | filter="url(#nodeGlow)"></circle>
1854 | <text class="graph-text" x="300" y="155" font-size="10" font-weight="700">S</text>
1855 | <text class="graph-text" x="300" y="180">Semantic</text>
1856 | <circle class="graph-node" cx="250" cy="250" r="15" fill="#8b5cf6" stroke="#7c3aed"
1857 | filter="url(#nodeGlow)"></circle>
1858 | <text class="graph-text" x="250" y="255" font-size="10" font-weight="700">P</text>
1859 | <text class="graph-text" x="250" y="280">Procedural</text>
1860 | </svg>
1861 | <div class="graph-legend">
1862 | <div class="text-sm font-semibold mb-3 gradient-text">Legend</div>
1863 | <div class="legend-item">
1864 | <div class="legend-color"
1865 | style="background: linear-gradient(135deg, #f59e0b, #d97706);"></div>
1866 | <span>Working</span>
1867 | </div>
1868 | <div class="legend-item">
1869 | <div class="legend-color"
1870 | style="background: linear-gradient(135deg, #3b82f6, #1d4ed8);"></div>
1871 | <span>Episodic</span>
1872 | </div>
1873 | <div class="legend-item">
1874 | <div class="legend-color"
1875 | style="background: linear-gradient(135deg, #10b981, #059669);"></div>
1876 | <span>Semantic</span>
1877 | </div>
1878 | <div class="legend-item">
1879 | <div class="legend-color"
1880 | style="background: linear-gradient(135deg, #8b5cf6, #7c3aed);"></div>
1881 | <span>Procedural</span>
1882 | </div>
1883 | </div>
1884 | </div>
1885 | </div>
1886 | <div class="col-span-12 lg:col-span-4">
1887 | <div class="graph-sidebar h-[420px]">
1888 | <h4 class="font-semibold gradient-text text-lg">Memory Details</h4>
1889 | <div class="space-y-4 mt-6">
1890 | <div>
1891 | <div class="text-xs text-gray-400 mb-2 uppercase tracking-wide">Type & Level
1892 | </div>
1893 | <div class="flex items-center space-x-2">
1894 | <span
1895 | class="px-3 py-1 text-xs rounded-full bg-gradient-to-r from-yellow-500/20 to-amber-500/20 text-yellow-400 border border-yellow-500/20 font-medium">working</span>
1896 | <span class="text-sm text-gray-300">thought</span>
1897 | </div>
1898 | </div>
1899 | <div>
1900 | <div class="text-xs text-gray-400 mb-2 uppercase tracking-wide">Content</div>
1901 | <div
1902 | class="text-sm bg-gradient-to-br from-white/10 to-white/5 p-4 rounded-xl max-h-32 overflow-y-auto border border-white/10">
1903 | <p>Initial thought process for market analysis workflow...</p>
1904 | </div>
1905 | </div>
1906 | <div class="grid grid-cols-2 gap-4">
1907 | <div class="text-center p-3 rounded-xl bg-white/5 border border-white/10">
1908 | <div class="text-xs text-gray-400 mb-1">Importance</div>
1909 | <div class="text-2xl font-bold gradient-text">9/10</div>
1910 | </div>
1911 | <div class="text-center p-3 rounded-xl bg-white/5 border border-white/10">
1912 | <div class="text-xs text-gray-400 mb-1">Confidence</div>
1913 | <div class="text-2xl font-bold gradient-text">98%</div>
1914 | </div>
1915 | </div>
1916 | </div>
1917 | </div>
1918 | </div>
1919 | </div>
1920 | </div>
1921 | <!-- Thought Chains -->
1922 | <div data-aos="fade-up" data-aos-delay="300">
1923 | <h3 class="font-semibold text-lg mb-4">Thought Chains (Mermaid.js)</h3>
1924 | <div class="thought-chain-container" style="min-height: 550px;">
1925 | <div class="mermaid-container">
1926 | <svg width="100%" height="300" viewBox="0 0 500 250" xmlns="http://www.w3.org/2000/svg">
1927 | <defs>
1928 | <linearGradient id="nodeGradient1" x1="0%" y1="0%" x2="100%" y2="100%">
1929 | <stop offset="0%" style="stop-color:#3b82f6;stop-opacity:1" />
1930 | <stop offset="100%" style="stop-color:#1d4ed8;stop-opacity:1" />
1931 | </linearGradient>
1932 | <linearGradient id="nodeGradient2" x1="0%" y1="0%" x2="100%" y2="100%">
1933 | <stop offset="0%" style="stop-color:#8b5cf6;stop-opacity:1" />
1934 | <stop offset="100%" style="stop-color:#6b21a8;stop-opacity:1" />
1935 | </linearGradient>
1936 | <filter id="softGlow">
1937 | <feGaussianBlur stdDeviation="4" result="coloredBlur" />
1938 | <feMerge>
1939 | <feMergeNode in="coloredBlur" />
1940 | <feMergeNode in="SourceGraphic" />
1941 | </feMerge>
1942 | </filter>
1943 | </defs>
1944 | <style>
1945 | .label {
1946 | font-family: 'Space Grotesk', sans-serif;
1947 | color: #e5e7eb
1948 | }
1949 |
1950 | .label text {
1951 | fill: #e5e7eb;
1952 | font-weight: 600
1953 | }
1954 |
1955 | .node rect {
1956 | rx: 12;
1957 | ry: 12;
1958 | filter: url(#softGlow)
1959 | }
1960 |
1961 | .node.active rect {
1962 | fill: url(#nodeGradient1)
1963 | }
1964 |
1965 | .node rect {
1966 | fill: #1f2937;
1967 | stroke: #3b82f6;
1968 | stroke-width: 2px
1969 | }
1970 |
1971 | .flowchart-link {
1972 | stroke: rgba(139, 92, 246, 0.4);
1973 | stroke-width: 3;
1974 | fill: none
1975 | }
1976 | </style>
1977 | <g>
1978 | <g class="node active" transform="translate(75, 50)">
1979 | <rect x="-60" y="-25" width="120" height="50"></rect>
1980 | <text x="0" y="0" dominant-baseline="central" text-anchor="middle"
1981 | font-size="14">
1982 | <tspan>Start Goal</tspan>
1983 | </text>
1984 | </g>
1985 | <g class="node" transform="translate(250, 50)">
1986 | <rect x="-70" y="-25" width="140" height="50"></rect>
1987 | <text x="0" y="0" dominant-baseline="central" text-anchor="middle"
1988 | font-size="14">
1989 | <tspan>Analyze Data</tspan>
1990 | </text>
1991 | </g>
1992 | <g class="node" transform="translate(425, 50)">
1993 | <rect x="-60" y="-25" width="120" height="50"></rect>
1994 | <text x="0" y="0" dominant-baseline="central" text-anchor="middle"
1995 | font-size="14">
1996 | <tspan>Find Insight</tspan>
1997 | </text>
1998 | </g>
1999 | <g class="node" transform="translate(250, 150)">
2000 | <rect x="-80" y="-25" width="160" height="50" fill="url(#nodeGradient2)"></rect>
2001 | <text x="0" y="0" dominant-baseline="central" text-anchor="middle"
2002 | font-size="14">
2003 | <tspan>Branch: Get more data</tspan>
2004 | </text>
2005 | </g>
2006 | <g class="node" transform="translate(425, 200)">
2007 | <rect x="-70" y="-25" width="140" height="50"></rect>
2008 | <text x="0" y="0" dominant-baseline="central" text-anchor="middle"
2009 | font-size="14">
2010 | <tspan>Conclusion</tspan>
2011 | </text>
2012 | </g>
2013 | <path d="M 135 50 L 180 50" class="flowchart-link">
2014 | <animate attributeName="stroke-dasharray" values="0 150;150 0" dur="2s"
2015 | repeatCount="indefinite" />
2016 | </path>
2017 | <path d="M 320 50 L 365 50" class="flowchart-link">
2018 | <animate attributeName="stroke-dasharray" values="0 150;150 0" dur="2s"
2019 | begin="0.5s" repeatCount="indefinite" />
2020 | </path>
2021 | <path d="M 250 75 L 250 125" class="flowchart-link">
2022 | <animate attributeName="stroke-dasharray" values="0 150;150 0" dur="2s"
2023 | begin="1s" repeatCount="indefinite" />
2024 | </path>
2025 | <path d="M 425 75 L 425 175" class="flowchart-link">
2026 | <animate attributeName="stroke-dasharray" values="0 150;150 0" dur="2s"
2027 | begin="1.5s" repeatCount="indefinite" />
2028 | </path>
2029 | </g>
2030 | </svg>
2031 | </div>
2032 | <div class="timeline-scrubber">
2033 | <div class="playback-controls">
2034 | <button class="playback-btn secondary"><i data-lucide="skip-back"
2035 | class="w-6 h-6"></i></button>
2036 | <button class="playback-btn"><i data-lucide="play" class="w-7 h-7"></i></button>
2037 | <button class="playback-btn secondary"><i data-lucide="skip-forward"
2038 | class="w-6 h-6"></i></button>
2039 | <div class="speed-control">
2040 | <span class="text-xs text-gray-400 font-medium">Speed:</span>
2041 | <button class="speed-btn">0.5x</button>
2042 | <button class="speed-btn active">1x</button>
2043 | <button class="speed-btn">2x</button>
2044 | </div>
2045 | </div>
2046 | <input type="range" min="0" max="100" value="30" class="timeline-slider">
2047 | </div>
2048 | </div>
2049 | </div>
2050 | <!-- Artifact Gallery -->
2051 | <div data-aos="fade-up" data-aos-delay="400">
2052 | <h3 class="font-semibold text-lg mb-4">Artifact Gallery (Masonry Grid)</h3>
2053 | <div class="masonry-grid">
2054 | <div class="masonry-item enhanced-card rounded-xl overflow-hidden cursor-pointer group"
2055 | data-tilt data-tilt-max="5" data-tilt-speed="300">
2056 | <div class="relative overflow-hidden bg-gray-800 h-48">
2057 | <img loading="lazy" decoding="async"
2058 | src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=600"
2059 | alt="Abstract render" width="600" height="400"
2060 | class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
2061 | <div
2062 | class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
2063 | </div>
2064 | </div>
2065 | <div class="p-5">
2066 | <h3 class="font-semibold text-white line-clamp-1 text-lg">Abstract Wave Render</h3>
2067 | <p class="text-sm text-gray-400 line-clamp-2 mb-4 mt-2">Generated via a prompt about
2068 | fluid dynamics and color theory.</p>
2069 | <div class="flex flex-wrap gap-2">
2070 | <span
2071 | class="px-3 py-1 bg-gradient-to-r from-pink-500/20 to-rose-500/20 text-pink-300 rounded-full text-xs font-medium border border-pink-500/20">3D-render</span>
2072 | <span
2073 | class="px-3 py-1 bg-gradient-to-r from-pink-500/20 to-rose-500/20 text-pink-300 rounded-full text-xs font-medium border border-pink-500/20">abstract</span>
2074 | </div>
2075 | </div>
2076 | </div>
2077 | <div class="masonry-item enhanced-card rounded-xl overflow-hidden cursor-pointer group"
2078 | data-tilt data-tilt-max="5" data-tilt-speed="300">
2079 | <div class="relative overflow-hidden bg-gradient-to-br from-gray-900 to-gray-800 h-40 p-5">
2080 | <div class="flex items-center mb-3">
2081 | <i data-lucide="code" class="w-5 h-5 mr-2 text-green-400"></i>
2082 | <span class="text-sm text-green-400 font-medium">Python</span>
2083 | </div>
2084 | <pre class="text-xs text-gray-300 overflow-hidden font-mono"><code>def analyze_data(df):
2085 | """Analyzes the dataframe."""
2086 | summary = df.describe()
2087 | corr = df.corr()
2088 | return summary, corr</code></pre>
2089 | </div>
2090 | <div class="p-5">
2091 | <h3 class="font-semibold text-white line-clamp-1 text-lg">Data Analysis Snippet</h3>
2092 | <p class="text-sm text-gray-400 line-clamp-2 mb-3 mt-2">Core function for pandas
2093 | dataframe analysis.</p>
2094 | </div>
2095 | </div>
2096 | <div class="masonry-item enhanced-card rounded-xl overflow-hidden cursor-pointer group"
2097 | data-tilt data-tilt-max="5" data-tilt-speed="300">
2098 | <div
2099 | class="relative overflow-hidden bg-gradient-to-br from-gray-800 to-gray-900 h-32 flex items-center justify-center">
2100 | <div class="text-center group-hover:scale-105 transition-transform">
2101 | <i data-lucide="file-text" class="w-16 h-16 mx-auto mb-3 text-blue-400"></i>
2102 | <div class="text-sm font-semibold text-gray-300">Q2_Report.md</div>
2103 | </div>
2104 | </div>
2105 | <div class="p-5">
2106 | <h3 class="font-semibold text-white line-clamp-1 text-lg">Q2 Report Draft</h3>
2107 | <p class="text-sm text-gray-400 line-clamp-2 mb-3 mt-2">Initial draft of the quarterly
2108 | financial report in Markdown format.</p>
2109 | </div>
2110 | </div>
2111 | </div>
2112 | </div>
2113 | </div>
2114 | </div>
2115 |
2116 | <!-- Forms & Inputs -->
2117 | <div class="demo-section" data-aos="fade-up" data-aos-delay="100">
2118 | <h2 class="demo-section-title">Forms & Inputs</h2>
2119 | <p class="demo-section-description">A collection of input controls, including advanced search, filters, and
2120 | forms used for creating and editing data.</p>
2121 | <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
2122 | <!-- Advanced Search & Filters -->
2123 | <div data-aos="fade-right" data-aos-delay="200">
2124 | <h3 class="font-semibold text-lg mb-4">Search & Filters</h3>
2125 | <div class="space-y-4">
2126 | <!-- Global Search with Suggestions -->
2127 | <div class="relative">
2128 | <input type="text" value="analyze" placeholder="Search everything..."
2129 | class="w-full pl-12 pr-4 py-3 bg-white/10 backdrop-blur-md border border-white/20 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:border-blue-400 focus:bg-white/15 transition-all">
2130 | <i data-lucide="search"
2131 | class="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400"></i>
2132 | <div
2133 | class="absolute top-full mt-2 w-full p-2 rounded-xl bg-gradient-to-br from-slate-800/95 to-slate-900/95 backdrop-blur-xl border border-white/20 z-10 shadow-2xl">
2134 | <div
2135 | class="p-3 hover:bg-gradient-to-r hover:from-blue-500/20 hover:to-purple-500/20 rounded-lg cursor-pointer transition-all group">
2136 | <div class="flex items-center">
2137 | <i data-lucide="git-branch"
2138 | class="w-5 h-5 mr-3 text-gray-400 group-hover:text-purple-400 transition-colors"></i>
2139 | <div>
2140 | <div class="text-sm font-semibold group-hover:text-white transition-colors">
2141 | Analyze Market Trends</div>
2142 | <div class="text-xs text-gray-500">Workflow</div>
2143 | </div>
2144 | </div>
2145 | </div>
2146 | <div
2147 | class="p-3 hover:bg-gradient-to-r hover:from-blue-500/20 hover:to-purple-500/20 rounded-lg cursor-pointer transition-all group">
2148 | <div class="flex items-center">
2149 | <i data-lucide="brain"
2150 | class="w-5 h-5 mr-3 text-gray-400 group-hover:text-blue-400 transition-colors"></i>
2151 | <div>
2152 | <div class="text-sm font-semibold group-hover:text-white transition-colors">
2153 | Analysis of the new user cohort...</div>
2154 | <div class="text-xs text-gray-500">Memory</div>
2155 | </div>
2156 | </div>
2157 | </div>
2158 | </div>
2159 | </div>
2160 | <!-- Filter Controls -->
2161 | <div class="flex items-center space-x-3">
2162 | <select
2163 | class="bg-white/10 border border-white/20 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:border-blue-400 transition-all cursor-pointer">
2164 | <option>All Status</option>
2165 | <option>Active</option>
2166 | <option>Completed</option>
2167 | <option>Failed</option>
2168 | </select>
2169 | <select
2170 | class="bg-white/10 border border-white/20 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:border-blue-400 transition-all cursor-pointer">
2171 | <option>All Types</option>
2172 | <option>Tool Use</option>
2173 | <option>Observation</option>
2174 | <option>Reasoning</option>
2175 | </select>
2176 | <input type="text" placeholder="Search actions..."
2177 | class="bg-white/10 border border-white/20 rounded-lg px-4 py-2.5 text-sm w-64 focus:outline-none focus:border-blue-400 transition-all">
2178 | </div>
2179 | </div>
2180 | </div>
2181 | <!-- Goal Creation Form -->
2182 | <div data-aos="fade-left" data-aos-delay="200">
2183 | <h3 class="font-semibold text-lg mb-4">Creation Form</h3>
2184 | <div class="enhanced-card rounded-2xl p-8">
2185 | <form class="space-y-5">
2186 | <div>
2187 | <label class="block text-sm font-semibold mb-2 text-gray-300">Title *</label>
2188 | <input type="text" required
2189 | class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-xl focus:outline-none focus:border-yellow-400 focus:bg-white/15 transition-all"
2190 | placeholder="Enter goal title">
2191 | </div>
2192 | <div class="grid grid-cols-2 gap-4">
2193 | <div>
2194 | <label class="block text-sm font-semibold mb-2 text-gray-300">Priority</label>
2195 | <select
2196 | class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-xl focus:outline-none focus:border-yellow-400 transition-all cursor-pointer">
2197 | <option>Low</option>
2198 | <option selected>Medium</option>
2199 | <option>High</option>
2200 | <option>Critical</option>
2201 | </select>
2202 | </div>
2203 | <div>
2204 | <label class="block text-sm font-semibold mb-2 text-gray-300">Status</label>
2205 | <select
2206 | class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-xl focus:outline-none focus:border-yellow-400 transition-all cursor-pointer">
2207 | <option>Pending</option>
2208 | <option>In Progress</option>
2209 | <option>Completed</option>
2210 | </select>
2211 | </div>
2212 | </div>
2213 | <div class="flex items-center justify-end space-x-3 pt-6 border-t border-white/10">
2214 | <button type="button"
2215 | class="px-6 py-2.5 text-gray-400 hover:text-white transition-colors font-medium">Cancel</button>
2216 | <button type="submit"
2217 | class="px-8 py-2.5 bg-gradient-to-r from-yellow-500 to-orange-500 hover:from-yellow-400 hover:to-orange-400 rounded-xl font-semibold shadow-lg hover:shadow-xl transform hover:scale-105 transition-all">Create
2218 | Goal</button>
2219 | </div>
2220 | </form>
2221 | </div>
2222 | </div>
2223 | </div>
2224 | </div>
2225 |
2226 | <!-- Markdown Content -->
2227 | <div class="demo-section" data-aos="fade-up" data-aos-delay="100">
2228 | <h2 class="demo-section-title">Styled Content</h2>
2229 | <p class="demo-section-description">How standard content, like Markdown, is styled within the application
2230 | for readability and consistency.</p>
2231 | <div
2232 | class="markdown-content bg-gradient-to-br from-white/10 to-white/5 p-8 rounded-2xl border border-white/10 backdrop-blur-md">
2233 | <h1>This is a H1 Heading</h1>
2234 | <p>This is a paragraph of text. It can contain <strong>bold text</strong>, <em>italic text</em>, and
2235 | <code>inline code snippets</code>. Links are also styled, like this <a href="#"
2236 | class="text-blue-400 hover:text-blue-300 underline decoration-blue-400/30 hover:decoration-blue-300 transition-all">link
2237 | to another page</a>.</p>
2238 | <h2>This is a H2 Heading</h2>
2239 | <ul class="list-disc list-inside space-y-2 my-4 ml-4">
2240 | <li>An item in an unordered list.</li>
2241 | <li>Another item.
2242 | <ol class="list-decimal list-inside space-y-1 mt-2 ml-4">
2243 | <li>A sub-item in an ordered list.</li>
2244 | <li>Another sub-item.</li>
2245 | </ol>
2246 | </li>
2247 | </ul>
2248 | <h3>This is a H3 Heading</h3>
2249 | <pre><code class="language-python"># This is a Python code block
2250 | import numpy as np
2251 |
2252 | def hello_world():
2253 | print("Hello from the UMS Explorer!")
2254 | return np.random.rand(5)
2255 | </code></pre>
2256 | </div>
2257 | </div>
2258 | </main>
2259 |
2260 | <!-- Floating Action Button -->
2261 | <button class="fab" title="Open Command Palette">
2262 | <i data-lucide="command" class="w-7 h-7"></i>
2263 | </button>
2264 | <script>
2265 | // Wait for all deferred scripts to load
2266 | window.addEventListener('load', () => {
2267 | // Initialize Lucide Icons
2268 | if (typeof lucide !== 'undefined') {
2269 | lucide.createIcons();
2270 | }
2271 |
2272 | // Initialize AOS
2273 | if (typeof AOS !== 'undefined') {
2274 | AOS.init({
2275 | duration: 800,
2276 | easing: 'ease-out-cubic',
2277 | once: true,
2278 | offset: 50
2279 | });
2280 | }
2281 |
2282 | // Initialize Tippy
2283 | if (typeof tippy !== 'undefined') {
2284 | tippy('.dashboard-tooltip', {
2285 | theme: 'custom',
2286 | animation: 'scale',
2287 | duration: [300, 200],
2288 | delay: [500, 0],
2289 | interactive: false,
2290 | placement: 'top',
2291 | maxWidth: 380,
2292 | allowHTML: true,
2293 | });
2294 | }
2295 |
2296 | // Initialize VanillaTilt with lazy loading
2297 | if (typeof VanillaTilt !== 'undefined') {
2298 | const lazyTilt = (entries, observer) => {
2299 | entries.forEach(entry => {
2300 | if (entry.isIntersecting) {
2301 | VanillaTilt.init(entry.target, {
2302 | max: 15,
2303 | speed: 400,
2304 | glare: true,
2305 | "max-glare": 0.2,
2306 | });
2307 | observer.unobserve(entry.target);
2308 | }
2309 | });
2310 | };
2311 |
2312 | const tiltObserver = new IntersectionObserver(lazyTilt, { rootMargin: "200px" });
2313 | document.querySelectorAll('[data-tilt]').forEach(el => tiltObserver.observe(el));
2314 | }
2315 |
2316 | // Initialize Particles
2317 | if (typeof particlesJS !== 'undefined') {
2318 | const initParticles = () => particlesJS('particles-js', {
2319 | "particles": {
2320 | "number": {
2321 | "value": 50,
2322 | "density": {
2323 | "enable": true,
2324 | "value_area": 800
2325 | }
2326 | },
2327 | "color": {
2328 | "value": ["#3b82f6", "#8b5cf6", "#ec4899"]
2329 | },
2330 | "shape": {
2331 | "type": "circle"
2332 | },
2333 | "opacity": {
2334 | "value": 0.3,
2335 | "random": true,
2336 | "anim": {
2337 | "enable": true,
2338 | "speed": 1,
2339 | "opacity_min": 0.1,
2340 | "sync": false
2341 | }
2342 | },
2343 | "size": {
2344 | "value": 3,
2345 | "random": true,
2346 | "anim": {
2347 | "enable": true,
2348 | "speed": 2,
2349 | "size_min": 0.1,
2350 | "sync": false
2351 | }
2352 | },
2353 | "line_linked": {
2354 | "enable": true,
2355 | "distance": 150,
2356 | "color": "#8b5cf6",
2357 | "opacity": 0.2,
2358 | "width": 1
2359 | },
2360 | "move": {
2361 | "enable": true,
2362 | "speed": 0.5,
2363 | "direction": "none",
2364 | "random": false,
2365 | "straight": false,
2366 | "out_mode": "out",
2367 | "bounce": false,
2368 | "attract": {
2369 | "enable": false,
2370 | "rotateX": 600,
2371 | "rotateY": 1200
2372 | }
2373 | }
2374 | },
2375 | "interactivity": {
2376 | "detect_on": "canvas",
2377 | "events": {
2378 | "onhover": {
2379 | "enable": true,
2380 | "mode": "grab"
2381 | },
2382 | "onclick": {
2383 | "enable": true,
2384 | "mode": "push"
2385 | },
2386 | "resize": true
2387 | },
2388 | "modes": {
2389 | "grab": {
2390 | "distance": 140,
2391 | "line_linked": {
2392 | "opacity": 0.5
2393 | }
2394 | },
2395 | "push": {
2396 | "particles_nb": 4
2397 | }
2398 | }
2399 | },
2400 | "retina_detect": true
2401 | });
2402 |
2403 | if ('requestIdleCallback' in window) {
2404 | requestIdleCallback(initParticles);
2405 | } else {
2406 | setTimeout(initParticles, 0);
2407 | }
2408 | }
2409 |
2410 | // Initialize GSAP animations
2411 | if (typeof gsap !== 'undefined') {
2412 | gsap.to(".fab", {
2413 | rotation: 360,
2414 | duration: 20,
2415 | repeat: -1,
2416 | ease: "none"
2417 | });
2418 |
2419 | const fab = document.querySelector('.fab');
2420 | if (fab) {
2421 | fab.addEventListener('mouseenter', function () {
2422 | gsap.to(this, {
2423 | scale: 1.2,
2424 | duration: 0.3,
2425 | ease: "power2.out"
2426 | });
2427 | });
2428 |
2429 | fab.addEventListener('mouseleave', function () {
2430 | gsap.to(this, {
2431 | scale: 1,
2432 | duration: 0.3,
2433 | ease: "power2.out"
2434 | });
2435 | });
2436 | }
2437 | }
2438 |
2439 | // Optimized scroll handler
2440 | const headerEl = document.querySelector('header');
2441 | let ticking = false;
2442 | window.addEventListener('scroll', () => {
2443 | if (!ticking) {
2444 | ticking = true;
2445 | requestAnimationFrame(() => {
2446 | headerEl.classList.toggle('scrolled', window.scrollY > 50);
2447 | ticking = false;
2448 | });
2449 | }
2450 | }, { passive: true });
2451 |
2452 | // Add interactive hover effects to cards
2453 | document.querySelectorAll('.enhanced-card').forEach(card => {
2454 | card.addEventListener('mouseenter', function () {
2455 | requestAnimationFrame(() => {
2456 | this.style.transform = 'translate3d(0, -4px, 0) scale(1.02)';
2457 | });
2458 | });
2459 |
2460 | card.addEventListener('mouseleave', function () {
2461 | requestAnimationFrame(() => {
2462 | this.style.transform = 'translate3d(0, 0, 0) scale(1)';
2463 | });
2464 | });
2465 | });
2466 |
2467 | // Add keyboard shortcuts
2468 | document.addEventListener('keydown', (e) => {
2469 | if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
2470 | e.preventDefault();
2471 | const searchInput = document.querySelector('input[type="text"]');
2472 | if (searchInput) searchInput.focus();
2473 | }
2474 | }, { passive: false });
2475 | });
2476 | </script>
2477 | </body>
2478 |
2479 | </html>
```