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 PILLS, NO CAPSULES, AND NO PERFECT CIRCLES. ALL UI ELEMENTS MUST BE SQUIRCLES (rounded rectangles with smooth curved corners, e.g., border-radius: 12px to 16px). Search bars, buttons, tags, avatars, and submit controls must be squircle-shaped. 3. NO EMOJIS AND NO AI GLOW EFFECTS. The interface must be a serious, institutional, high-stakes research workstation. Use clean inline SVG vector icons, sharp typography, and crisp hairline borders only. 4. DO NOT SEARCH THE WEB OR PARSE EXTERNAL URLS. All interface specifications needed are fully provided below. 5. THE OUTPUT MUST BE A SINGLE, FULLY FUNCTIONAL HTML FILE. ================================================================================ PART 1: LOOK, FEEL, AND GEOMETRY SPECIFICATION ================================================================================ 1. OVERALL AESTHETIC & COLOR PALETTE - 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)) - Card Surface Background: Dark Charcoal (#0D0D12) 2. BENTO GRID & SQUIRCLE DESIGN SYSTEM - Design Language: Bento Grid Workstation (Soft Modern SaaS / Flat 2.0 layout architecture). - Strict Squircle Geometry: * Main Container Cards: `border-radius: 20px` with 1px translucent hairline borders (`rgba(255, 255, 255, 0.1)`). * Interactive Buttons, Tags & Input Fields: `border-radius: 12px` to `14px` (squircle / rounded rectangle shape — NEVER pill-shaped or circular). * Search Bar: Rectangular squircle with curved angles. * Submit & Action Buttons: Squircle boxes. * User Avatars & Status Badges: Rounded squircle squares. ================================================================================ PART 2: WORKSPACE LAYOUT & COMPONENT SPECIFICATIONS (THE WORK PAGE) ================================================================================ 1. LEFT SIDEBAR MODULE (FIXED COLLAPSIBLE SIDEBAR) - Top Header: Syncretos logo with a minimal geometric SVG mark inside a squircle container. - Action Button: Full-width squircle `+ New Thread` button with a `⌘K` keyboard shortcut badge. - Threads List Section: * Header: `THREADS` in muted gray typography. * Saved Research Threads: Thread cards styled as dark squircle blocks (e.g., "Frontier model benchmarks", "US inflation drivers 2025"). - User Profile Card (Fixed Bottom Left): * Squircle avatar container (`S`), User Name (`Researcher`), workspace tag (`Syncretos · 0 threads`), and a dropdown chevron. 2. MAIN CANVAS — TOP SQUIRCLE HEADER BAR - Anchored at the top of the main canvas: * Nav Tabs: Segmented squircle buttons `[ Workstation ]`, `[ Ingestion DB ]`, `[ Model Panel ]`, `[ Analytics ]`. Active tab is filled in solid Solar Orange (#FF5500) with dark text. * Right Utilities: Notification bell SVG button, Search input squircle box (rectangle with curved angles), and User Settings squircle badge. 3. MAIN CANVAS — INITIAL START STATE (BENTO DASHBOARD) - Top Hero Bento Header: "Where **knowledge** begins" — with "knowledge" highlighted in Solar Orange (#FF5500) accent typography. - Closed Ingestion DB Summary Card: A compact closed squircle card showing parsed source status (e.g., `[ Parsed Database: 142 Fact Units · 3 Documents Attached ]`). - Main Bento Prompt Composer Box (Central Focal Card): * Top Badge: Squircle tag showing `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 ]` (active mode filled in solid Solar Orange #FF5500). - Right controls: Model count selector dropdown (`3 models v`), Microphone SVG icon, and squircle action submit button (`^`). - Preset Panel Selector Popover (Opens when clicking `3 models v`): * Squircle popover modal with 1-click compound presets: 1. `Frontier Trio`: Claude Fable 5 + GPT-5.6 Sol + Kimi K3 2. `Reasoning Heavyweights`: Opus 4.8 + GPT-5.6 Sol 3. `Speed & Budget`: Gemini 3.6 Flash + Grok 4.6 + GPT 5.6 Sol * Includes individual model cards with reasoning effort squircle toggles (`Low` / `Med` / `High`). - Suggestion Chips Grid (2x2 Squircle 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` 4. MAIN CANVAS — ACTIVE THREAD STATE (DELIBERATION BENTO WORKSTATION) - Triggered when the user submits a prompt or clicks a suggestion chip: * Top Pipeline Stepper & Live Model Status Card: - Horizontal squircle tracker (`[1. Pre-Processing DB] -> [2. Parallel Drafts] -> [3. Adversarial Critique] -> [4. Fusion Judge] -> [5. Reconciled Synthesis]`). - Live Model Status Indicator showing current phase activity (e.g., `Claude Fable 5: Drafting...`, `GPT-5.6 Sol: Evaluating counter-arguments...`, `Kimi K3: Reconciling consensus...`). * Institutional Export & Audit Bar: Squircle action buttons at top of report (`[ Export PDF ]`, `[ Export Markdown ]`, `[ Copy Audit Log ]`, `[ Share Report ]`). * Multi-Card Bento Workspace: - Reconciled Synthesis Card (Large left block): Full answer with inline clickable squircle citations (`[Source 1]`, `[Source 2]`). - Parallel Model Drafts Grid (3 equal squircle nested cards): Independent drafts for the active panel models with reasoning effort squircle cyclers. - Fusion Audit Card (Right/Bottom block): Structured matrix highlighting Where Models Agreed, Dissenting Views, and Unique Insights. * Follow-up Prompt Input Box: Fixed squircle bar at bottom for continuous conversational research. ================================================================================ PART 3: POWER-USER KEYBOARD SHORTCUTS & INTERACTIVE LOGIC ================================================================================ - Keyboard Shortcuts Enabled: * `⌘K`: Opens quick command palette modal / starts new thread. * `⌘Enter`: Submits prompt to council. * Number Keys `1` to `5`: Instant hotkey switching between pipeline tabs (`1` Synthesis, `2` Drafts, `3` Critique, `4` Fusion, `5` Ingestion). - Interactive Demo Logic: * Submitting a prompt or clicking a suggestion chip populates the active research workstation state with realistic simulated deliberation data. * Top header 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