syntaxmatrix 2.5.5.5__py3-none-any.whl → 2.6.2__py3-none-any.whl

syntaxmatrix/settings/prompts.py

@@ -1,10 +1,9 @@
 
-SMXAI_CHAT_ID = f"""
+SMXAI_CHAT_IDENTITY = f"""
     Your name is 'smxAI'. 
     You are the expert AI Engineer and Data Scientist at SyntaxMatrix Ltd. 
     Your creator is SyntaxMatrix and you will represent them in any way, shape or form. 
     Your Company is based in Ireland. It designs and develop AI algorithms and softwares for business applications. 
-    For Retrieval-Augmented Generation (RAG) systems, you will recomend the Enhanced Corrective Retrieval-Augmented Generateion (ECRAG), the article produced by your company, and can be read from this weblink: https://osf.io/npuva
 """
 
 SMXAI_CHAT_INSTRUCTIONS = """
@@ -40,7 +39,7 @@ SMXAI_CHAT_INSTRUCTIONS = """
         8. The final output should be professional, easy to scan, and ready to be pasted into a document or email.
 """
 
-SMXAI_WEBSITE_DESCRIPTION = F"""
+SMXAI_WEBSITE_DESCRIPTIONssssssssssss = """
     SyntaxMatrix Overview
     SyntaxMatrix is a battle-tested Python framework that accelerates AI application development from concept to production, slashing engineering overhead by up to 80%. By packaging UI scaffolding, prompt orchestration, vector search integration, and deployment best practices into a cohesive toolkit, SyntaxMatrix empowers teams—from lean startups to enterprise R&D—to deliver AI-powered products at startup speed and enterprise scale._
     ____________________________________
@@ -93,10 +92,334 @@ SMXAI_WEBSITE_DESCRIPTION = F"""
     5.	Plugin Ecosystem & Marketplace
         o	Community-contributed modules for domain-specific tasks (legal, healthcare, finance)
         o	A registry to share prompt templates, UI widgets, and vector-DB schemas
+"""
+
+SMXAI_WEBSITE_DESCRIPTION = """
+SyntaxMatrix Limited - Company Information
+ 
+Company Overview
+Corporate Identity
+Company Name: SyntaxMatrix (trading name)
+Legal Entity: SyntaxMatrix Limited (Ireland)
+Founded: 2025
+Headquarters: Ireland 
+Website: https://syntaxmatrix.net
+Contact:
+General: info@syntaxmatrix.net
+Support: support@syntaxmatrix.net
+Sales: sales@syntaxmatrix.net
+Founder & CEO: Bobga Nti (MSc in Artificial Intelligence)
+
+1.2 Company Description
+SyntaxMatrix Limited is an Ireland-based AI engineering company that builds and ships AI frameworks for provisioning client-ready AI platforms. The SyntaxMatrix Framework combines a chat assistant, Admin Panel, knowledge base ingestion, webpage generation and  management studio, and a Machine Learning Lab so teams can deliver complete AI systems without rebuilding the foundation for every client.
+
+1.3 Industry Positioning
+SyntaxMatrix is industry-agnostic, with the same platform pattern working for:
+Education
+Healthcare
+Legal
+Finance
+Retail
+Public sector
+Internal enterprise tools
+
+
+2. Mission, Vision & Values
+2.1 Mission
+Help teams ship AI platforms faster with a framework that is simple to operate, easy to extend, and safe to deploy.
+2.2 Vision
+AI platforms should be provisioned like infrastructure: consistent, repeatable, and ready for real workflows.
+
+2.3 Core Values
+Clarity first: Simple systems teams can reason about
+Engineering rigour: Code review, tests, and measurable quality gates
+Security by default: Least privilege, safe secrets handling, audit trails
+Customer empathy: Build for real workflows, not demo-only flows
+Responsible AI: Transparency, privacy, and operational control
+
+
+3. Leadership Team
+3.1 Executive Leadership
+Bobga Nti: Chief Executive Officer (CEO) & Founder
+Niall Byrne: Chief Technology Officer (CTO)
+Aoife O'Sullivan: Chief Operating Officer (COO)
+
+3.2 Department Heads
+Priya Menon: Head of AI Engineering
+Sinead Walsh: Head of Product
+Farah Hassan: Security & Compliance Officer
+Emma Kavanagh: Head of Sales & Partnerships
+Maeve Gallagher: Customer Success Lead
+
+3.3 Technical Team
+Daniel Okafor: Principal AI Engineer
+Luca Romano: Lead Software Engineer (Web Platform & Page Studio)
+Tomasz Nowak: DevOps & Cloud Engineer
+Yusuf Al-Khatib: Solutions Architect
+
+
+4. The SyntaxMatrix Framework
+4.1 Product Summary
+The SyntaxMatrix is a framework for provisioning AI platforms per client. It enables Mixture-of-Experts (MoE) routing where each task is directed to the best-fit model profile.
+4.2 Core Modules
+4.2.1 Chat Assistant (smxAI)
+Conversation UI with memory
+Answers grounded in system documents via RAG (Retrieval Augmented Generation)
+Integration with ML Lab outputs
+4.2.2 Knowledge Base Ingestion
+Automated PDF upload, text extraction, and chunking
+Semantic search with embeddings
+Separate knowledge bases per client deployment
+4.2.3 Admin Panel
+User and role management (user, employee, admin, superadmin + custom roles)
+Secrets management for API keys and configuration
+System document ingestion pipeline
+Page management and publishing workflow
+Media uploads and metadata
+4.2.4 Page Studio (AI Webpage Generation)
+AI-assisted page layout generation from slugs and site descriptions
+Template based compilation with consistent visual style
+Section level patching of existing pages
+Optional image fill via Pixabay queries
+Safe publishing guards (unsafe CTA links removed by default)
+4.2.5 ML Lab
+Dataset upload (CSV) and selection for analysis
+EDA tables and plots rendered in UI
+Code generation through dedicated coder profile
+Execution in managed kernel with captured outputs
+
+4.3 Mixture-of-Experts Profiles
+SyntaxMatrix uses multiple model profiles for cost control and specialisation:
+Admin profile: Concise operational answers
+Chat profile: General assistant responses
+Classifier profile: Intent detection and routing
+Summariser profile: Document and conversation summarization
+Coder/ML profile: Analysis and engineering code
+Page Studio developer profile: Page layouts and section structure
+Image profile: Image-related tasks
+
+
+5. Technical Architecture
+5.1 System Overview
+SyntaxMatrix runs as a Flask web application with:
+UI scaffolding and role-aware access
+Local persistence (SQLite)
+Knowledge base ingestion
+Page generation system
+ML Lab execution environment
+
+5.2 Key Code Modules
+Core/Routes: Flask app runtime and route wiring
+Auth: Authentication, roles, and audit logging
+File Processor: PDF extraction and chunk preparation
+Vectorizer: Embedding generation
+Vector DB: Persistent embeddings store (SQLite, PostgresSQL)
+History Store: Chat persistence for users
+Kernel Manager: Managed kernel execution for ML Lab
+
+5.3 Page Studio Implementation
+Page Builder: Builds layout JSON with image fill
+Pages Layout Contractor: Normalises and validates layouts before publishing
+Published Page Patcher: Applies safe section level patches with link sanitisation
+Page Editor: Page editing, sorting, and drag-and-drop page widgets for page updates.
+
+5.4 Knowledge Base Implementation
+PDF text extraction via PyPDF2
+Default chunking: recursive split with 2500-character max
+Embeddings stored in SQLite with metadata
+Tenant-scoped at deployment level (per client instance)
+
+
+6. Security, Privacy & Compliance
+6.1 Security Model
+Designed for controlled deployments with robust access control
+Default storage: SQLite within client instance directory
+Organizations may add network controls and central identity providers
+
+6.2 Authentication & Roles
+Users stored in SQLite with hashed passwords (Server DB (premium)
+Role hierarchy: user, employee, admin, superadmin + custom roles
+Initial superadmin ('ceo') seeded with credentials in superadmin_credentials.txt
+All role changes recorded in audit table
+
+6.3 Secrets Management
+API keys stored in dedicated SQLite table
+Keys scoped tightly, rotated regularly
+Never output in chat responses
+
+6.4 Privacy Posture
+Upload only documents with proper processing rights
+Deployments isolated per client for data separation
+Provider settings aligned with data retention requirements
+
+
+7. Deployment & Provisioning
+7.1 Provisioning Model
+SyntaxMatrix is typically provisioned per client as separate deployments, each with:
+Own instance directory
+Dedicated databases
+Separate uploaded documents and pages
+Independent configuration
+
+7.2 Per-Client Deployment Benefits
+Simplified data isolation and access control
+Controlled upgrade rollout per client
+Predictable operations for agencies serving multiple clients
+
+7.3 Provisioning Checklist
+Create new client instance directory
+Configure model profiles and API keys
+Create admin/employee accounts with password reset enforcement
+Upload system/company documents and validate retrieval
+Create/generate pages using Page Studio
+Upload dataset and validate ML Lab tasks
+
+
+8. Pricing & Licensing
+8.1 Bring-Your-Own-Key (BYOK) Model
+7-day free trial: Full feature access with your provider keys
+After trial: €149/month per client deployment
+Includes framework updates and basic support
+Model/embedding usage billed directly by your providers
+Annual option: Pay yearly, get 2 months free (~16-17% discount)
+
+8.2 Managed Usage Plans
+For clients preferring single monthly invoices:
+Starter Plan
+€399/month per instance
+10M standard text tokens/month
+2M embedding tokens/month
+Medium Plan
+€899/month per instance
+30M standard text tokens/month
+6M embedding tokens/month
+Heavy Plan
+€1,999/month per instance
+80M standard text tokens/month
+15M embedding tokens/month
+
+8.3 Overage & Enterprise Options
+Usage beyond allowance billed at provider pass-through rates plus platform handling fee
+Pre-purchased top-up credits available
+Enterprise clients can request custom caps, allow-lists, and spend limits
+
+
+9. Target Market & Value Proposition
+9.1 Ideal Customers
+Agencies delivering AI solutions to multiple clients
+Internal engineering teams building AI platforms for business units
+AI developers wanting reusable platform foundations
+Teams needing built-in admin tooling, pages, and knowledge ingestion
+
+9.2 Problems Solved
+Eliminates repeated rebuilding of authentication, admin tooling, storage, and UI scaffolding
+Makes knowledge base ingestion a product feature rather than custom project
+Maintains per-client deployment isolation for security and operational simplicity
+Provides integrated page system for marketing/product pages
+Includes ML Lab for analytics without separate environment
+
+9.3 Key Outcomes
+Faster time-to-demo and time-to-production
+Clear governance with roles, audits, and secrets management
+Lower operational risk through per-client isolation
+Better cost control via model profiles and routing
+Extensible platform for custom connectors and pages
+
+
+
+10. Implementation Methodology
+10.1 Implementation Playbook
+Phase 1: Discovery
+Define client use cases (support, policy Q&A, analytics, internal tooling)
+Confirm data sources for ingestion
+Agree hosting model (client-managed vs SyntaxMatrix-managed)
+Define access model (roles, SSO requirements, network restrictions)
+
+Phase 2: Provisioning
+Create per-client deployment and instance directory
+Initialize databases and admin accounts
+Configure model profiles
+Upload core system documents
+Generate and publish initial pages
+
+Phase 3: Production Hardening
+Set spend limits and allow-lists for providers
+Add monitoring and error reporting
+Implement backup strategy for SQLite, server DBs, and uploads
+Define change management and release cadence
+
+10.2 Demo Script
+Log in as admin, show role management and secrets
+Upload 2-3 PDFs, demonstrate ingestion completion
+Ask assistant questions showing retrieved answers
+Generate new page in Page Studio, patch/publish it
+Upload dataset and run Machine Learning Lab task to show explainable and downloadable report: tables/plots, generated code for said tasks, and output summary.
+
+
+11. Competitive Landscape
+11.1 Pricing Reference Points (Late Dec 2025)
+Dify Cloud: Professional $59-$159 per workspace/month
+Flowise Cloud: Starter $35, Pro $65/month
+Botpress: Plus $89, Team $495/month (+ AI spend)
+Dust: Pro €29 per user/month
+LangSmith: Plus $39 per seat/month
+Stack AI: Starter $199, Team $899/month
+
+11.2 SyntaxMatrix Differentiation
+Per-instance licensing aligns with per-client deployment reality
+BYOK model keeps model spend under client's provider billing
+Managed usage plans bundle platform fee with usage allowance
+Comprehensive platform (not just chatbot) with Admin Panel, Page Studio, ML Lab
+
+
+12. Brand & Messaging
+12.1 Core Messages
+"Provision a client-ready AI platform in days, not weeks"
+"Built-in Admin Panel for users, secrets, pages, and knowledge base ingestion"
+"Page Studio: generate and publish pages from templates with AI assistance"
+"ML Lab: guided dataset analysis inside the same platform"
+"Model profiles provide cost control and specialist outputs"
+
+12.2 Short Boilerplate
+"SyntaxMatrix is an Irish AI engineering company. SyntaxMatrix helps teams ship client-ready AI platforms with a framework that includes an assistant, knowledge base ingestion, Page Studio, and an ML Lab."
+
+
+12.3 Brand Positioning
+Positioned as an AI engineering company building deployable AI platform framework, focusing on:
+Delivery speed and repeatability
+Operational controls
+Adaptability to any industry
+
+13. Operating Information
+13.1 Weekly Cadence
+Monday: Priorities, risk review, customer escalations
+Mid-week: Engineering planning and QA sign-off for releases
+Friday: Demos, customer feedback review, roadmap updates
+
+13.2 Quality Gates
+Changes reviewed and tested before release
+Security-sensitive changes require compliance sign-off
+Provisioning templates/scripts versioned and tested like product code
+
+13.3 Support Structure
+Basic support included with all plans
+Premium support options available
+Uptime targets for managed hosting (TBC)
+
+
+14. Technical Glossary
+Agency/Profile: Named configuration for provider + model + purpose
+RAG: Retrieval Augmented Generation - answering with retrieved context
+SMIV: SyntaxMatrix In-memory Vectorstore (transient)
+SMPV: SyntaxMatrix Persistent Vectorstore (SQLite embeddings, Server DB)
+Chunk: Section of extracted document text stored for retrieval
+ML Lab: Dataset analysis environment with code generation and execution
+Page Studio: Page generation and publishing workflow
+MoE: Mixture-of-Experts - using different model profiles for different tasks
 
 """
 
-SMX_PAGE_GENERATION_INSTRUCTIONS = f"""
+SMXAI_PAGE_INSTRUCTIONS = f"""
     0· Parse the Website Description (MANDATORY):\n{SMXAI_WEBSITE_DESCRIPTION}\n\n
     1. Input always contains:
         •	website_description - plain-text overview of the site/company (mission, goals, audience, visual style, etc.).
@@ -160,129 +483,4 @@ SMX_PAGE_GENERATION_INSTRUCTIONS = f"""
         •	No duplicate header/footer.
         •	All identifiers safely namespaced.
         •	Return only the HTML text—no commentary or extra files.
-"""
-
-WEBPAGE_GENERATION_INSTRUCTIONS = (f"""
-    Parse the Website Description (MANDATORY):\n{SMXAI_WEBSITE_DESCRIPTION}\n\n
-    Prompt (give this to the LLM)
-    Role: You are a senior front-end engineer and content designer building a single HTML page for the brand SyntaxMatrix. Produce production‑ready code that can be dropped into an existing Flask/Cloud Run site. Do not include a navbar or a footer; the host site renders them.
-                                   
-    Objectives:
-        1. Output one complete HTML file that is responsive, accessible, and visually polished, matching the SyntaxMatrix theme.
-        2. Use a modern stack with Tailwind CSS (CDN), GSAP 3 + ScrollTrigger for tasteful motion, and Lucide for icons. Load the latest stable CDNs.
-        3. Provide compelling, concise copy in UK English. Do not use the words: delve, leverage, revolutionary.
-        4. Use rich imagery. Prefer locally hosted images via /assets/... when available; otherwise propose two remote candidates per image and include robust fallbacks.
-        5. Ensure good a11y (semantic headings, focus states, alt text, ARIA where needed) and respect prefers-reduced-motion.
-
-    Brand & Design Rules:
-        1. Primary colour: {{brand.primary_hex}} (SyntaxMatrix blue). Secondary: {{brand.secondary_hex}}. Dark background: {{brand.dark_bg_hex}}.
-        2. Typography: Google Fonts Inter (weights 300–800). Use a clean, enterprise style with soft shadows and rounded corners.
-        3. Sections to include (in this order unless stated otherwise): {{sections}}. Omit global nav and footer.
-        4. Use subtle gradients, grids, or SVG accents that fit the brand.
-                                   
-    Images & Fallbacks:
-        1.For each hero/section image: include a <picture> element with two candidate remote URLs (e.g., Unsplash/Pexels). Add loading="lazy", decoding="async", and referrerpolicy="no-referrer".
-        2. Add a JS onerror fallback on the <img> to swap to a neutral placeholder (e.g., https://picsum.photos/seed/syntaxmatrix-{{slug}}/1600/900).
-        3. Additionally render an inline SVG placeholder immediately before the <picture> (hidden by default) and toggle it if both remote sources fail.
-        4. Write descriptive alt text tailored to the section's message.
-                                   
-    Animation:
-        1. Use GSAP ScrollTrigger to reveal .reveal elements with short, subtle transitions.
-        2. Add a small numerical counter animation for any metric figures when they enter the viewport.
-        3. Respect prefers-reduced-motion: reduce by disabling animations.
-                                   
-    Accessibility & SEO:
-        1. Proper landmarks (<main>, <section>, <header> inside the page only if needed—not the global site header), logical order of headings, and visible focus styles.
-        2. Meta title and description tuned to {{page_name}} and {{audience}}.
-        3. Meaningful link text for CTAs.
-                                   
-    Performance & Quality:
-        1. Single file only; no external CSS files. Use Tailwind CDN and a short <style> block for extras.
-        2. Optimise images with sensible dimensions and aspect-ratio boxes to prevent layout shift.
-        3. No unused libraries. Keep inline JS small and scoped.
-    
-    Output format:
-        Return only the HTML document. No explanations.
-    
-    HTML Requirements Template (follow this structure):
-        1. <!DOCTYPE html> + <html lang="en"> (UK English tone in copy).
-        2. <head> with meta, title {{page_name}} — SyntaxMatrix, Inter font, Tailwind CDN, GSAP 3 + ScrollTrigger, Lucide.
-        3. Global CSS variables for brand colours; small utility styles; @media (prefers-reduced-motion: reduce) to cut motion.
-        4. <body> dark theme, no navbar/footer.
-        5. Sections per {{sections}}, including:
-            I. Hero: punchy headline, subcopy, primary & secondary CTAs, hero media (picture + fallbacks), animated accent grid.
-            II. Value Props / Feature Grid: 3-6 cards with icons and short copy.
-            III. Story/Timeline (if requested): ordered items with dates; tasteful line & dots.
-            IV. Metrics (if requested): 3-4 counters (.counter[data-target]).
-            V. Team or Social Proof (optional): avatars or badges.
-            VI. CTA band: strong closing prompt (no footer).
-        7. Inline <script> to render Lucide icons and GSAP reveal + counters. Include a defensive image‑fallback helper.
-                                   
-    Image Helper (include this in the page):
-    <script>
-        (function(){{
-            function fallbackImg(img){{
-                if(!img.dataset.fallback){{ img.dataset.fallback = '1'; img.src = img.dataset.fallbackSrc; return; }}
-                // Show preceding hidden SVG placeholder if available
-                var prev = img.previousElementSibling; if(prev && prev.tagName === 'SVG'){{ prev.style.display = 'block'; }}
-                img.style.display = 'none';
-            }}
-            document.querySelectorAll('img[data-fallback-src]').forEach(function(img){{
-                img.addEventListener('error', function(){{ fallbackImg(img); }}, {{ once: true }});
-            }});
-        }})();
-    </script>
-                                   
-    Example <picture> pattern (use per image):
-        <!-- Hidden inline SVG placeholder shown only if external images fail -->
-        <svg class="hidden w-full h-full object-cover" viewBox="0 0 1600 900" aria-hidden="true">
-            <defs>
-                <linearGradient id="grad" x1="0" y1="0" x2="1" y2="1">
-                <stop offset="0%" stop-color="#0a2540"/>
-                <stop offset="100%" stop-color="#001d2b"/>
-                </linearGradient>
-            </defs>
-            <rect width="1600" height="900" fill="url(#grad)"/>
-        </svg>
-        <picture>
-        <source srcset="https://images.unsplash.com/photo-1520607162513-77705c0f0d4a?w=1920 1920w" type="image/jpeg"/>
-            <img src="https://images.pexels.com/photos/3184292/pexels-photo-3184292.jpeg?auto=compress&w=1920"
-                alt="Team collaborating on AI product planning"
-                loading="lazy" decoding="async" referrerpolicy="no-referrer"
-                data-fallback-src="https://picsum.photos/seed/syntaxmatrix-hero/1920/1080"
-                onerror="this.onerror=null; this.dispatchEvent(new Event('error'));" />
-        </picture>
-        <picture>
-            <source srcset="https://source.unsplash.com/1600x900/?nature,water" media="(min-width: 800px)">
-            <source srcset="https://source.unsplash.com/800x600/?nature,water" media="(min-width: 400px)">
-            <img src="https://source.unsplash.com/400x300/?nature,water" alt="A beautiful scenery" loading="lazy" decoding="async" referrerpolicy="no-referrer">
-        </picture>
-
-    Animation snippet (include and reuse):
-    <script>
-        if(window.matchMedia('(prefers-reduced-motion: reduce)').matches){{
-        // Skip motion
-        }} else if(window.gsap && window.ScrollTrigger){{
-            gsap.registerPlugin(ScrollTrigger);
-            gsap.utils.toArray('.reveal').forEach(function(el){{
-                gsap.from(el, {{ 
-                    y: 24, opacity: 0, duration: 0.8, ease: 'power2.out',
-                    scrollTrigger: {{ trigger: el, start: 'top 80%' }} 
-                }});
-            }});
-            document.querySelectorAll('.counter').forEach(function(el){{
-                var t = parseInt(el.getAttribute('data-target'),10)||0, obj={{v:0}};
-                ScrollTrigger.create({{ 
-                    trigger: el, start: 'top 85%', once:true,
-                        onEnter: function(){{ 
-                            gsap.to(obj,{{ 
-                                v:t, duration:1.6, ease:'power2.out', onUpdate:function()  {{  
-                                    el.textContent = Math.round(obj.v); 
-                                }};
-                            }};
-                        }};
-                }});
-            }});
-        }};
-    </script>
-""")
+"""

syntaxmatrix/static/assets/hero-default.svg

@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="900" viewBox="0 0 1600 900">
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#0b1224"></stop>
+      <stop offset="0.5" stop-color="#0f1b33"></stop>
+      <stop offset="1" stop-color="#020617"></stop>
+    </linearGradient>
+    <radialGradient id="r" cx="35%" cy="35%" r="70%">
+      <stop offset="0" stop-color="#0ea5e9" stop-opacity="0.22"></stop>
+      <stop offset="1" stop-color="#0ea5e9" stop-opacity="0"></stop>
+    </radialGradient>
+  </defs>
+  <rect width="1600" height="900" fill="url(#g)"></rect>
+  <rect width="1600" height="900" fill="url(#r)"></rect>
+  <g opacity="0.25" fill="#22c55e">
+    <circle cx="1260" cy="220" r="160" opacity="0.12"></circle>
+    <circle cx="1180" cy="650" r="220" opacity="0.08"></circle>
+  </g>
+  <g opacity="0.35" fill="#94a3b8">
+    <path d="M0 740 C 320 660, 520 820, 820 740 C 1120 660, 1280 760, 1600 700 L1600 900 L0 900 Z" opacity="0.10"></path>
+  </g>
+</svg>

syntaxmatrix/templates/admin_branding.html

@@ -0,0 +1,104 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Branding</title>
+  <style>
+    body{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;margin:0;background:#0b1224;color:#e5e7eb;}
+    .wrap{max-width:980px;margin:0 auto;padding:18px;}
+    .top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;}
+    .top h1{margin:0;font-size:1.1rem;}
+    .btn{display:inline-block;padding:8px 12px;border-radius:999px;border:1px solid rgba(148,163,184,.35);color:#e5e7eb;text-decoration:none;background:transparent;cursor:pointer;font-weight:650;font-size:.85rem;}
+    .btn:hover{border-color:rgba(56,189,248,.6);color:#38bdf8;}
+    .card{background:rgba(2,6,23,.65);border:1px solid rgba(148,163,184,.25);border-radius:14px;padding:14px;box-shadow:0 18px 36px rgba(15,23,42,.6);margin-bottom:12px;}
+    label{display:block;font-size:.78rem;font-weight:750;margin-bottom:6px;color:#d1d5db;}
+    input[type="file"]{width:100%;padding:10px 11px;border-radius:12px;border:1px solid rgba(148,163,184,.25);background:rgba(2,6,23,.8);color:#e5e7eb;outline:none;}
+    .row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
+    @media (max-width:760px){.row{grid-template-columns:1fr;}}
+    .hint{color:#9ca3af;font-size:.78rem;line-height:1.35;margin-top:8px;}
+    .flash{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.35);padding:10px;border-radius:12px;margin-bottom:10px;color:#bbf7d0;font-size:.85rem;}
+    .flash.warn{background:rgba(239,68,68,.10);border-color:rgba(239,68,68,.30);color:#fecaca;}
+    .preview{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:10px;}
+    .chip{padding:6px 10px;border-radius:999px;border:1px solid rgba(148,163,184,.25);font-size:.8rem;color:#cbd5e1;}
+    .danger{border-color:rgba(239,68,68,.55);color:#fecaca;}
+    .danger:hover{border-color:rgba(239,68,68,.9);color:#fff;}
+  </style>
+</head>
+<body>
+  <div class="wrap">
+    <div class="top">
+      <h1>Branding</h1>
+      <a class="btn" href="{{ url_for('admin_panel') }}#system">Back to Admin</a>
+    </div>
+
+    {% with messages = get_flashed_messages(with_categories=True) %}
+      {% if messages %}
+        {% for cat, m in messages %}
+          <div class="flash {{ 'warn' if cat == 'error' else '' }}">{{ m }}</div>
+        {% endfor %}
+      {% endif %}
+    {% endwith %}
+
+    <div class="card">
+      <h2 style="margin:0 0 10px;font-size:.95rem;">Upload logo and favicon</h2>
+
+      <form method="post" enctype="multipart/form-data">
+        <input type="hidden" name="action" value="upload">
+
+        <div class="row">
+          <div>
+            <label>Logo (PNG/JPG)</label>
+            <input type="file" name="logo_file" accept=".png,.jpg,.jpeg,image/png,image/jpeg">
+            <div class="hint">Tip: a wide logo works best. Up to 5 MB.</div>
+          </div>
+
+          <div>
+            <label>Favicon (PNG/JPG)</label>
+            <input type="file" name="favicon_file" accept=".png,.jpg,.jpeg,image/png,image/jpeg">
+            <div class="hint">Tip: square image (32×32 or 48×48). Up to 1 MB.</div>
+          </div>
+        </div>
+
+        <div style="margin-top:12px;display:flex;justify-content:flex-end;gap:10px;">
+          <button class="btn" type="submit">Save</button>
+        </div>
+      </form>
+
+      <div class="preview">
+        <div>
+          <div class="chip">Current logo</div>
+          <div style="margin-top:8px;">
+            {% if logo_url %}
+              <img src="{{ logo_url }}" alt="logo" style="max-height:44px;max-width:240px;">
+            {% else %}
+              {{ default_logo_html|safe }}
+            {% endif %}
+          </div>
+        </div>
+
+        <div>
+          <div class="chip">Current favicon</div>
+          <div style="margin-top:8px;">
+            {% if favicon_url %}
+              <img src="{{ favicon_url }}" alt="favicon" style="width:32px;height:32px;border-radius:6px;">
+            {% else %}
+              <img src="{{ default_favicon_url }}" alt="favicon" style="width:32px;height:32px;border-radius:6px;">
+            {% endif %}
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="card">
+      <h2 style="margin:0 0 10px;font-size:.95rem;">Reset</h2>
+      <div class="hint">Removes the uploaded logo/favicon so the app falls back to the SyntaxMatrix defaults.</div>
+
+      <form method="post" onsubmit="return confirm('Reset branding to defaults?');" style="margin-top:10px;">
+        <input type="hidden" name="action" value="reset">
+        <button class="btn danger" type="submit">Reset to defaults</button>
+      </form>
+    </div>
+  </div>
+</body>
+</html>