YOU ARE AN EXPERT FRONTEND WEB DEVELOPER AND UI DESIGNER. YO...

Prompt

YOU ARE AN EXPERT FRONTEND WEB DEVELOPER AND UI DESIGNER. YOUR TASK: Build a complete, standalone, single-file HTML web application (containing all HTML structure, CSS styling, and JavaScript logic inside one single file) for the main application workspace / "Work Page" of "Syncretos", a multi-model AI research platform. CRITICAL CONSTRAINTS: 1. THIS IS STRICTLY THE APP WORKSPACE / WORK PAGE WHERE USERS ENTER PROMPTS AND RUN RESEARCH. Do not include marketing sections, feature pitches, pricing tables, or security documentation. 2. NO EMOJIS AND NO AI GLOW EFFECTS. The interface must be a serious, institutional, high-stakes research workstation. Use clean SVG vector icons, sharp typography, and crisp hairline borders only. 3. DO NOT SEARCH THE WEB OR PARSE EXTERNAL URLS. All interface specifications needed are fully provided below. 4. THE OUTPUT MUST BE A SINGLE, FULLY FUNCTIONAL HTML FILE. ================================================================================ PART 1: LOOK, FEEL, AND INTERACTION SPECIFICATION ================================================================================ 1. OVERALL AESTHETIC & DESIGN SYSTEM (BENTO GRID + SOFT MODERN SAAS) - Primary Accent Color: Solar Orange (#FF5500) - Background Color: Pitch-Black (#050507) - Primary Text Color: Warm Off-White (#F5F5F0) - Secondary Text Color: Muted Gray (#888890) - Borders & Line Dividers: Translucent Hairline White (rgba(255, 255, 255, 0.1)) - Design Language: High-density Bento Grid Layout with Soft Modern SaaS / Flat 2.0 aesthetics (inspired by modern dashboard architecture). * Rounded Container Cards (`border-radius: 20px` with subtle `#0D0D12` card surfaces resting on the `#050507` background). * Nested Card Modules (sub-cards inside main grid modules with translucent hairline borders `rgba(255, 255, 255, 0.1)`). * Pill Badges & Capsule Buttons (fully rounded tabs, status indicators, and prompt chips). * Prominent Numeric Metrics (large display typography for research statistics, model counts, and citation scores). * Absolutely zero emojis and zero sci-fi glows. 2. WORKSPACE LAYOUT ARCHITECTURE (THE WORK PAGE) A. TOP FLOATING CAPSULE NAVIGATION BAR - Floating Centered Pill Container: Top-anchored capsule navbar containing: * Brand Identity: `SYNCRETOS` logo with minimal geometric SVG mark. * Nav Tabs: Pill segment buttons `[ Workstation ]`, `[ Ingestion DB ]`, `[ Model Panel ]`, `[ Analytics ]`. Active tab is filled in solid Solar Orange (#FF5500) with dark text. * Right Utilities: Notification bell SVG with status dot, Search input capsule, and User Profile Pill (`Researcher`, initials avatar `S`, and dropdown caret). B. LEFT SIDEBAR MODULE (COLLAPSIBLE WORKSPACE THREADS BENTO) - Full-width `+ New Thread` action pill with a `⌘K` keyboard shortcut badge. - `THREADS` Section: List of recent research sessions (e.g., "Frontier model benchmarks", "US inflation drivers 2025") inside rounded card containers. C. MAIN CENTER CANVAS — INITIAL START STATE (BENTO DASHBOARD) - Top Hero Bento Header: "Where **knowledge** begins" — with "knowledge" highlighted in Solar Orange (#FF5500) accent typography, flanked by quick research status metric blocks (e.g., `142 Fact Units Parsed`, `3 Active Models`, `100% Citation Grounding`). - Main Bento Prompt Composer Box (Central Focal Card): * Top Header Pill: `Syncretos Panel · 3 Models`. * Textarea Input: Clean expandable text area with placeholder `Ask anything or attach documents...` * Bottom Control Bar: - Left controls: Attachment button (`+`), Mode Switcher `[ Search ]` vs `[ Council ]`. - Right controls: Model count dropdown (`3 models v`), Microphone SVG icon, and circular action submit button (`^`). - Suggestion Chips Grid (2x2 Pill Matrix below composer, NO emojis): * `Compare frontier model benchmarks` * `Drivers of US inflation in 2025` * `Risks of agentic AI in production` * `Best practices for RAG at scale` D. MAIN CENTER CANVAS — ACTIVE THREAD STATE (DELIBERATION BENTO WORKSTATION) - Triggered when the user submits a prompt or clicks a suggestion chip: * Top Pipeline Stepper Card: Horizontal pill progress container tracking `1. Pre-Processing DB` -> `2. Parallel Drafts` -> `3. Adversarial Critique` -> `4. Fusion Judge` -> `5. Reconciled Synthesis`. * Multi-Card Bento Workspace: - Main Reconciled Synthesis Bento Card (Large left block): Full answer with inline clickable citation pills (`[Source 1]`, `[Source 2]`). - Parallel Model Drafts Grid (3 equal nested cards): Independent drafts for Claude Fable 5, GPT-5.5, and Gemini 3.1 Pro with reasoning effort pill cyclers (`Low` / `Med` / `High`). - Fusion Audit & Consensus Card (Right/Bottom block): Structured matrix highlighting Where Models Agreed, Dissenting Views, and Unique Insights. * Follow-up Prompt Input Capsule: Fixed at bottom for continuous conversational research. ================================================================================ PART 2: MOCK DATA & INTERACTIVE LOGIC FOR DEMO WORKSPACE ================================================================================ - Include built-in mock research thread data so the UI is 100% interactive upon launch: * Clicking `+ New Thread` clears the screen and returns to "Where knowledge begins". * Submitting a prompt or clicking any suggestion chip transitions the Bento layout into a simulated 5-stage deliberation workspace with interactive tabs for Synthesis, Drafts, Critique, and Fusion Audit. * Top capsule tabs (`Workstation`, `Ingestion DB`, `Model Panel`) toggle between mock workspace views. BUILD THE COMPLETE SINGLE-FILE HTML APPLICATION WORKSPACE PAGE NOW.

A system prompt was added to support web rendering