"<!doctype html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n  <title>Local AI Allure Clone — Demo UI</title>\n  <style>\n    body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin: 0; background: #0b0d12; color: #e8eaf0; }\n    header { padding: 16px 20px; border-bottom: 1px solid #1f2330; background: #0b0d12; position: sticky; top: 0; }\n    .wrap { max-width: 1080px; margin: 0 auto; padding: 18px 20px 40px; }\n    .grid { display: grid; grid-template-columns: 320px 1fr 320px; gap: 16px; }\n    .card { background: #111526; border: 1px solid #1f2330; border-radius: 14px; padding: 14px; }\n    input, textarea, select { width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid #2a2f3f; background: #0c1020; color: #e8eaf0; }\n    textarea { min-height: 84px; resize: vertical; }\n    button { padding: 10px 12px; border-radius: 12px; border: 1px solid #2a2f3f; background: #171d33; color: #e8eaf0; cursor: pointer; }\n    button:hover { filter: brightness(1.1); }\n    .row { display: flex; gap: 10px; align-items: center; }\n    .row > * { flex: 1; }\n    .muted { color: #aab2c5; font-size: 12px; }\n    .messages { display: flex; flex-direction: column; gap: 10px; }\n    .bubble { padding: 10px 12px; border-radius: 14px; border: 1px solid #2a2f3f; max-width: 85%; white-space: pre-wrap; }\n    .me { align-self: flex-end; background: #131a36; }\n    .ai { align-self: flex-start; background: #10162a; }\n    .pill { display:inline-block; padding: 4px 8px; border-radius: 999px; border: 1px solid #2a2f3f; background:#0c1020; font-size: 12px; color:#aab2c5; }\n    .small { font-size: 13px; }\n    @media (max-width: 1100px){ .grid { grid-template-columns: 1fr; } }\n  </style>\n</head>\n<body>\n<header>\n  <div class=\"wrap row\" style=\"justify-content:space-between;\">\n    <div>\n      <div style=\"font-weight: 700;\">Local Demo UI</div>\n      <div class=\"muted\">Runs entirely against your FastAPI server.</div>\n    </div>\n    <div class=\"pill\" id=\"health\">Checking…</div>\n  </div>\n</header>\n\n<div class=\"wrap grid\">\n  <section class=\"card\">\n    <div style=\"font-weight:700; margin-bottom:8px;\">Auth</div>\n    <div class=\"small muted\" style=\"margin-bottom:10px;\">Creates a local user in your DB (SQLite by default).</div>\n    <label class=\"muted\">Email</label>\n    <input id=\"email\" placeholder=\"you@example.com\" />\n    <div style=\"height:8px\"></div>\n    <label class=\"muted\">Password</label>\n    <input id=\"password\" type=\"password\" placeholder=\"••••••••\" />\n    <div style=\"height:10px\"></div>\n    <div class=\"row\">\n      <button id=\"btnRegister\">Register</button>\n      <button id=\"btnLogin\">Login</button>\n    </div>\n    <div style=\"height:10px\"></div>\n    <div class=\"muted\">Token</div>\n    <textarea id=\"token\" readonly placeholder=\"JWT will appear here after login\"></textarea>\n    <div style=\"height:10px\"></div>\n    <button id=\"btnSeed\">Seed demo companion</button>\n    <div style=\"height:10px\"></div>\n    <div class=\"muted\" id=\"authStatus\"></div>\n  </section>\n\n  <section class=\"card\">\n    <div class=\"row\" style=\"align-items:flex-start;\">\n      <div style=\"flex:1.3\">\n        <div style=\"font-weight:700; margin-bottom:8px;\">Chat</div>\n        <div class=\"muted\">Creates a conversation and uses WebSocket streaming.</div>\n      </div>\n      <div style=\"flex:1\">\n        <label class=\"muted\">Companion</label>\n        <select id=\"companionSelect\"></select>\n      </div>\n    </div>\n\n    <div style=\"height:12px\"></div>\n    <div class=\"row\">\n      <button id=\"btnLoadCompanions\">Load companions</button>\n      <button id=\"btnNewConversation\">New conversation</button>\n      <button id=\"btnConnectWs\">Connect WS</button>\n    </div>\n    <div style=\"height:10px\"></div>\n\n    <div class=\"muted\">Conversation ID</div>\n    <input id=\"conversationId\" placeholder=\"(created after New conversation)\" />\n\n    <div style=\"height:14px\"></div>\n    <div class=\"messages\" id=\"messages\"></div>\n\n    <div style=\"height:14px\"></div>\n    <div class=\"row\" style=\"align-items:flex-end;\">\n      <textarea id=\"prompt\" placeholder=\"Type a message…\"></textarea>\n      <button id=\"btnSend\" style=\"flex:0.35\">Send</button>\n    </div>\n    <div class=\"muted\" id=\"wsStatus\" style=\"margin-top:10px;\"></div>\n  </section>\n\n  <section class=\"card\">\n    <div style=\"font-weight:700; margin-bottom:8px;\">Companion & Memories</div>\n    <div class=\"muted\" style=\"margin-bottom:10px;\">Edit the selected companion's system prompt template and manage memories.</div>\n\n    <label class=\"muted\">System prompt template</label>\n    <textarea id=\"systemPrompt\" placeholder=\"You are... (system prompt)\" style=\"min-height:120px\"></textarea>\n    <div style=\"height:10px\"></div>\n    <button id=\"btnSavePrompt\">Save prompt template</button>\n    <div style=\"height:14px\"></div>\n\n    <div class=\"row\" style=\"align-items:flex-end;\">\n      <div>\n        <label class=\"muted\">New memory</label>\n        <textarea id=\"newMemory\" placeholder=\"e.g. User prefers concise answers.\" style=\"min-height:70px\"></textarea>\n      </div>\n    </div>\n    <div style=\"height:10px\"></div>\n    <div class=\"row\">\n      <select id=\"memoryKind\">\n        <option value=\"fact\">fact</option>\n        <option value=\"preference\">preference</option>\n        <option value=\"boundary\">boundary</option>\n      </select>\n      <button id=\"btnAddMemory\">Add memory</button>\n    </div>\n    <div style=\"height:14px\"></div>\n\n    <div class=\"muted\">Memories (selected companion)</div>\n    <div id=\"memories\" style=\"display:flex; flex-direction:column; gap:8px; margin-top:8px;\"></div>\n    <div class=\"muted\" id=\"memoryStatus\" style=\"margin-top:10px;\"></div>\n  </section>\n\n  \n</div>\n\n<script src=\"/static/app.js\"></script>\n</body>\n</html>\n"