'+(n?i:R(i,!0))+`"+(n?i:R(i,!0))+`+${this.parser.parse(e)}+`}html({text:e}){return e}heading({tokens:e,depth:t}){return`
+`}list(e){let t=e.ordered,n=e.start,s="";for(let o=0;o
${this.parser.parseInline(e)}
+`}table(e){let t="",n="";for(let i=0;i${R(e,!0)}`}br(e){return""}del({tokens:e}){return`
An error occurred:
"+R(n.message+"",!0)+"";return t?Promise.resolve(s):s}if(t)return Promise.reject(n);throw n}}};var M=new E;function k(l,e){return M.parse(l,e)}k.options=k.setOptions=function(l){return M.setOptions(l),k.defaults=M.defaults,N(k.defaults),k};k.getDefaults=z;k.defaults=w;k.use=function(...l){return M.use(...l),k.defaults=M.defaults,N(k.defaults),k};k.walkTokens=function(l,e){return M.walkTokens(l,e)};k.parseInline=M.parseInline;k.Parser=b;k.parser=b.parse;k.Renderer=$;k.TextRenderer=_;k.Lexer=x;k.lexer=x.lex;k.Tokenizer=S;k.Hooks=L;k.parse=k;var it=k.options,ot=k.setOptions,lt=k.use,at=k.walkTokens,ct=k.parseInline,pt=k,ut=b.parse,ht=x.lex; + +if(__exports != exports)module.exports = exports;return module.exports})); diff --git a/public/extension-demo/popup-demo.js b/public/extension-demo/popup-demo.js new file mode 100644 index 0000000..2bcc306 --- /dev/null +++ b/public/extension-demo/popup-demo.js @@ -0,0 +1,495 @@ +/** + * Standalone marketing demo: same markup/CSS as the extension popup, mocked data only. + * Sync with webai-summarizer/popup when the real UI changes (popup.html, popup.css). + */ +(function () { + const THEMES = ["light", "dark", "system"]; + const DEFAULT_SUGGESTION = "Why would this be worth reading?"; + const STATIC_SUGGESTIONS = [ + "What should I skip on this page?", + "Who is this written for?", + ]; + + const SAMPLE_SUMMARY = `## The lede + +This is the **same chrome** as the Lede extension: summarize the active tab, then chat with answers grounded in that text. + +- **Quick Summary** is real in the build you install—here it’s sample copy. +- **Chat** uses placeholder replies so you can try the layout without an API key. +- Use **Regenerate** after a summary to replay the flow.`; + + const ASSISTANT_REPLIES = [ + "In the installed extension I read the tab’s extracted text and answer from that. Here you’re seeing canned replies so the marketing site stays fast and private.", + "After you install, open **Settings** (this demo’s gear only shows a hint) to point at **Ollama** or your own API and model.", + "Try **Regenerate** on the summary card to replay the streamed summary—useful when a page updates underneath you.", + ]; + + let currentTheme = "system"; + let isLoading = false; + let isChatLoading = false; + let chatReplyGeneration = 0; + let assistantTurn = 0; + let demoStreamGen = 0; + let quickSummary = ""; + const chatHistory = []; + /** Pretend page extraction succeeded (real popup gates chat on this). */ + const currentPageContent = "demo"; + + const resultContainer = document.getElementById("result"); + const initialState = document.getElementById("initial-state"); + const summarizeBtn = document.getElementById("summarize-btn"); + const summarizeLabel = document.getElementById("summarize-label"); + const settingsBtn = document.getElementById("settings-btn"); + const themeBtn = document.getElementById("theme-btn"); + const chatContainer = document.getElementById("chat-container"); + const chatInput = document.getElementById("chat-input"); + const chatSendBtn = document.getElementById("chat-send"); + const footer = document.getElementById("footer"); + const contentContainerEl = document.querySelector(".content-container"); + + function escapeHtml(text) { + const div = document.createElement("div"); + div.textContent = text; + return div.innerHTML; + } + + function sanitizeHtml(html) { + const template = document.createElement("template"); + template.innerHTML = html; + + const allowedTags = new Set([ + "P", + "BR", + "HR", + "H1", + "H2", + "H3", + "H4", + "H5", + "H6", + "UL", + "OL", + "LI", + "STRONG", + "EM", + "CODE", + "PRE", + "BLOCKQUOTE", + "A", + "TABLE", + "THEAD", + "TBODY", + "TR", + "TH", + "TD", + ]); + + const walker = document.createTreeWalker( + template.content, + NodeFilter.SHOW_ELEMENT, + ); + const toReplace = []; + const toClean = []; + + while (walker.nextNode()) { + const el = walker.currentNode; + if (!allowedTags.has(el.tagName)) { + toReplace.push(el); + continue; + } + toClean.push(el); + } + + for (const el of toReplace) { + const safeText = document.createTextNode(el.textContent || ""); + el.replaceWith(safeText); + } + + for (const el of toClean) { + const attrs = [...el.attributes]; + for (const attr of attrs) { + const name = attr.name.toLowerCase(); + const value = attr.value || ""; + if (name.startsWith("on")) { + el.removeAttribute(attr.name); + continue; + } + if (el.tagName === "A" && name === "href") { + if (!value.startsWith("http://") && !value.startsWith("https://")) { + el.removeAttribute("href"); + } else { + el.setAttribute("target", "_blank"); + el.setAttribute("rel", "noopener noreferrer"); + } + continue; + } + if (el.tagName === "A" && (name === "target" || name === "rel")) { + continue; + } + el.removeAttribute(attr.name); + } + } + + return template.innerHTML; + } + + function renderMarkdown(text) { + if (typeof marked === "undefined" || !marked.parse) { + return escapeHtml(text).replace(/\n/g, "
"); + } + try { + const html = marked.parse(text, { + breaks: true, + gfm: true, + headerIds: false, + mangle: false, + }); + return sanitizeHtml(html); + } catch { + return escapeHtml(text).replace(/\n/g, "
"); + } + } + + function scrollContentToBottom() { + if (!contentContainerEl) return; + contentContainerEl.scrollTop = contentContainerEl.scrollHeight; + } + + function showToast(message) { + const toast = document.createElement("div"); + toast.className = "toast"; + toast.textContent = message; + document.body.appendChild(toast); + setTimeout(() => toast.remove(), 3200); + } + + function applyTheme(theme) { + const root = document.documentElement; + const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches; + + if (theme === "system") { + root.setAttribute("data-theme", prefersDark ? "dark" : "light"); + } else { + root.setAttribute("data-theme", theme); + } + + document + .getElementById("theme-icon-light") + .classList.toggle("hidden", theme !== "light"); + document + .getElementById("theme-icon-dark") + .classList.toggle("hidden", theme !== "dark"); + document + .getElementById("theme-icon-system") + .classList.toggle("hidden", theme !== "system"); + + const labels = { + light: "Light mode", + dark: "Dark mode", + system: "System theme", + }; + themeBtn.title = labels[theme]; + } + + function normalizeHexColor(value) { + const raw = (value || "").trim().toUpperCase(); + const withHash = raw.startsWith("#") ? raw : `#${raw}`; + return /^#[0-9A-F]{6}$/.test(withHash) ? withHash : null; + } + + function darkenHexColor(hexColor, amount) { + const normalized = normalizeHexColor(hexColor); + if (!normalized) return hexColor; + const r = parseInt(normalized.slice(1, 3), 16); + const g = parseInt(normalized.slice(3, 5), 16); + const b = parseInt(normalized.slice(5, 7), 16); + const factor = 1 - amount; + const toHex = (n) => + Math.round(Math.max(0, Math.min(255, n * factor))) + .toString(16) + .padStart(2, "0") + .toUpperCase(); + return `#${toHex(r)}${toHex(g)}${toHex(b)}`; + } + + function applyAccentColor(color) { + const normalized = normalizeHexColor(color) || "#F15B2F"; + document.documentElement.style.setProperty("--brand", normalized); + document.documentElement.style.setProperty( + "--brand-hover", + darkenHexColor(normalized, 0.1), + ); + document.documentElement.style.setProperty( + "--brand-active", + darkenHexColor(normalized, 0.2), + ); + } + + function setSummarizeLabel(text) { + summarizeLabel.textContent = text; + } + + function setLoading(loading, busyFooterLabel) { + isLoading = loading; + summarizeBtn.disabled = loading; + if (loading) { + setSummarizeLabel(busyFooterLabel || "Summarizing…"); + } else { + setSummarizeLabel(quickSummary ? "Regenerate" : "Quick Summary"); + } + } + + function removeChatSuggestionsUI() { + resultContainer.querySelector(".chat-suggestions")?.remove(); + } + + function ensureChatSection() { + let chatSection = resultContainer.querySelector(".chat-section"); + if (!chatSection) { + chatSection = document.createElement("div"); + chatSection.className = "chat-section"; + const divider = document.createElement("hr"); + divider.className = "chat-divider"; + chatSection.appendChild(divider); + resultContainer.appendChild(chatSection); + } + return chatSection; + } + + function appendUserChatBubble(text) { + const chatSection = ensureChatSection(); + const msgEl = document.createElement("div"); + msgEl.className = "chat-message user"; + msgEl.innerHTML = renderMarkdown(text); + chatSection.appendChild(msgEl); + scrollContentToBottom(); + } + + function renderSuggestions() { + removeChatSuggestionsUI(); + const allSuggestions = [DEFAULT_SUGGESTION, ...STATIC_SUGGESTIONS]; + const suggestionsEl = document.createElement("div"); + suggestionsEl.className = "chat-suggestions"; + suggestionsEl.innerHTML = allSuggestions + .map((s) => ``) + .join(""); + suggestionsEl.querySelectorAll(".suggestion-btn").forEach((btn) => { + btn.addEventListener("click", () => { + removeChatSuggestionsUI(); + chatInput.value = btn.textContent; + sendChatMessage(); + }); + }); + resultContainer.appendChild(suggestionsEl); + scrollContentToBottom(); + } + + function showSummary(content) { + initialState.classList.add("hidden"); + resultContainer.classList.remove("hidden"); + + let htmlContent = ""; + htmlContent += renderMarkdown(content); + resultContainer.innerHTML = htmlContent; + + const buttonContainer = document.createElement("div"); + buttonContainer.className = "summary-actions"; + + const copyBtnEl = document.createElement("button"); + copyBtnEl.type = "button"; + copyBtnEl.className = "copy-summary-btn"; + copyBtnEl.innerHTML = ` + + Copy + `; + copyBtnEl.addEventListener("click", async () => { + if (!quickSummary) return; + try { + await navigator.clipboard.writeText(quickSummary); + copyBtnEl.classList.add("copied"); + copyBtnEl.innerHTML = ` + + Copied + `; + setTimeout(() => { + copyBtnEl.classList.remove("copied"); + copyBtnEl.innerHTML = ` + + Copy + `; + }, 2000); + } catch { + showToast("Could not copy to clipboard."); + } + }); + buttonContainer.appendChild(copyBtnEl); + + const regenerateBtnEl = document.createElement("button"); + regenerateBtnEl.type = "button"; + regenerateBtnEl.className = "copy-summary-btn"; + regenerateBtnEl.innerHTML = ` + + Regenerate + `; + regenerateBtnEl.addEventListener("click", () => { + if (isLoading) return; + chatHistory.length = 0; + assistantTurn = 0; + quickSummary = ""; + chatContainer.classList.add("hidden"); + chatInput.value = ""; + runDemoSummary(); + }); + buttonContainer.appendChild(regenerateBtnEl); + + resultContainer.appendChild(buttonContainer); + + footer.classList.add("hidden"); + chatContainer.classList.remove("hidden"); + renderSuggestions(); + scrollContentToBottom(); + } + + function runDemoSummary() { + if (isLoading) return; + const gen = ++demoStreamGen; + setLoading(true, "Streaming…"); + initialState.classList.add("hidden"); + resultContainer.classList.remove("hidden"); + + if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) { + quickSummary = SAMPLE_SUMMARY; + setLoading(false); + showSummary(quickSummary); + return; + } + + const streamingEl = document.createElement("div"); + streamingEl.className = "streaming-content"; + streamingEl.innerHTML = ` +
+
+
+
+
+ `;
+ resultContainer.replaceChildren(streamingEl);
+ requestAnimationFrame(() => scrollContentToBottom());
+
+ const full = SAMPLE_SUMMARY;
+ let i = 0;
+
+ function tick() {
+ if (gen !== demoStreamGen) return;
+
+ if (i >= full.length) {
+ quickSummary = full;
+ setLoading(false);
+ showSummary(quickSummary);
+ return;
+ }
+
+ const step = 4 + Math.floor(Math.random() * 8);
+ i = Math.min(full.length, i + step);
+ const slice = full.slice(0, i);
+ const placeholder = streamingEl.querySelector(".streaming-placeholder");
+ if (placeholder && slice.trim()) placeholder.remove();
+ streamingEl.innerHTML = renderMarkdown(slice);
+ scrollContentToBottom();
+
+ const delay = 4 + Math.floor(Math.random() * 10);
+ window.setTimeout(tick, delay);
+ }
+
+ window.setTimeout(tick, 50);
+ }
+
+ async function sendChatMessage() {
+ const message = chatInput.value.trim();
+ if (!message || isChatLoading || !currentPageContent) return;
+
+ removeChatSuggestionsUI();
+ const gen = ++chatReplyGeneration;
+
+ chatHistory.push({ role: "user", content: message });
+ chatInput.value = "";
+ appendUserChatBubble(message);
+
+ isChatLoading = true;
+ chatSendBtn.disabled = true;
+
+ const chatSection = ensureChatSection();
+ const loadingEl = document.createElement("div");
+ loadingEl.className = "chat-message assistant loading";
+ loadingEl.dataset.chatPending = "1";
+ loadingEl.innerHTML = '';
+ chatSection.appendChild(loadingEl);
+ scrollContentToBottom();
+
+ const delay = 520 + Math.floor(Math.random() * 480);
+ window.setTimeout(() => {
+ if (gen !== chatReplyGeneration) return;
+
+ const reply =
+ ASSISTANT_REPLIES[assistantTurn % ASSISTANT_REPLIES.length];
+ assistantTurn += 1;
+
+ chatHistory.push({ role: "assistant", content: reply });
+ loadingEl.classList.remove("loading");
+ delete loadingEl.dataset.chatPending;
+ loadingEl.innerHTML = renderMarkdown(reply);
+ scrollContentToBottom();
+
+ isChatLoading = false;
+ chatSendBtn.disabled = false;
+ chatInput.focus();
+ }, delay);
+ }
+
+ summarizeBtn.addEventListener("click", () => {
+ if (isLoading) return;
+ runDemoSummary();
+ });
+
+ settingsBtn.addEventListener("click", () => {
+ showToast("Demo only — open the installed extension for real settings.");
+ });
+
+ themeBtn.addEventListener("click", () => {
+ const idx = THEMES.indexOf(currentTheme);
+ currentTheme = THEMES[(idx + 1) % THEMES.length];
+ applyTheme(currentTheme);
+ });
+
+ window
+ .matchMedia("(prefers-color-scheme: dark)")
+ .addEventListener("change", () => {
+ if (currentTheme === "system") applyTheme("system");
+ });
+
+ chatSendBtn.addEventListener("click", () => {
+ if (isChatLoading) return;
+ sendChatMessage();
+ });
+
+ chatInput.addEventListener("keydown", (e) => {
+ if (e.key === "Enter" && !e.shiftKey) {
+ e.preventDefault();
+ if (!isChatLoading) sendChatMessage();
+ }
+ });
+
+ applyTheme(currentTheme);
+ applyAccentColor("#F15B2F");
+})();
diff --git a/public/extension-demo/popup.css b/public/extension-demo/popup.css
new file mode 100644
index 0000000..ce96b63
--- /dev/null
+++ b/public/extension-demo/popup.css
@@ -0,0 +1,1252 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+/* ── CSS variables – Light (default) ── */
+:root {
+ --bg: #f5f0e8;
+ --bg-subtle: #ede8de;
+ --border: #e0d8cc;
+ --border-hover: #c8c0b4;
+ --text: #1a1a1a;
+ --text-secondary: #2a2a2a;
+ --text-muted: #aaa;
+ --text-faint: #ccc;
+ --text-em: #666;
+ --icon-btn: #aaa;
+ --icon-btn-hover: #555;
+ --primary-bg: #1a1a1a;
+ --primary-bg-hover: #333;
+ --primary-bg-active: #000;
+ --primary-text: #f5f0e8;
+ --secondary-color: #aaa;
+ --scrollbar: #d8d0c4;
+ --spinner-track: #e0d8cc;
+ --spinner-head: #888;
+ --error-bg: #fdf0f0;
+ --error-border: #f0d8d8;
+ --error-text: #c05050;
+ --toast-bg: #1a1a1a;
+ --toast-text: #f5f0e8;
+ --code-bg: #ede8de;
+ --code-text: #555;
+ --pre-text: #444;
+ --table-th: #ede8de;
+ --link: #555;
+ --link-hover: #111;
+ --heading: #111;
+ --strong: #111;
+ --blockquote: #888;
+ --brand: #f15b2f;
+ --brand-hover: #d94e27;
+ --brand-active: #bf4522;
+
+ /* Typography — modular rem scale (~1.25); Sora for chrome/headings, system UI for body */
+ --font-display: "Sora", system-ui, sans-serif;
+ /* System sans for long reading — neutral and legible at small sizes */
+ --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+ --font-mono: ui-monospace, "SF Mono", "Cascadia Code", monospace;
+ --text-xs: 0.6875rem;
+ --text-sm: 0.8125rem;
+ --text-md: 0.875rem;
+ --text-base: 1rem;
+ --text-lg: 1.25rem;
+ --text-xl: 1.5625rem;
+ --lh-heading: 1.25;
+ --lh-ui: 1.35;
+ --lh-prose: 1.62;
+ --lh-prose-dark: 1.7;
+
+ /* Motion — main flow (summarize, stream, chat) */
+ --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
+ --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
+ --motion-enter: 0.32s;
+ --motion-tap: 0.14s;
+ --motion-toast: 0.22s;
+}
+
+/* ── Dark theme ── */
+[data-theme="dark"] {
+ --bg: #1a1a1a;
+ --bg-subtle: #252525;
+ --border: #2e2e2e;
+ --border-hover: #444;
+ --text: #e8e3db;
+ --text-secondary: #d0cbc3;
+ --text-muted: #666;
+ --text-faint: #444;
+ --text-em: #999;
+ --icon-btn: #555;
+ --icon-btn-hover: #bbb;
+ --primary-bg: #e8e3db;
+ --primary-bg-hover: #ccc8c0;
+ --primary-bg-active: #fff;
+ --primary-text: #1a1a1a;
+ --secondary-color: #555;
+ --scrollbar: #333;
+ --spinner-track: #2e2e2e;
+ --spinner-head: #888;
+ --error-bg: #2a1a1a;
+ --error-border: #4a2a2a;
+ --error-text: #e08080;
+ --toast-bg: #e8e3db;
+ --toast-text: #1a1a1a;
+ --code-bg: #252525;
+ --code-text: #aaa;
+ --pre-text: #bbb;
+ --table-th: #252525;
+ --link: #aaa;
+ --link-hover: #e8e3db;
+ --heading: #e8e3db;
+ --strong: #e8e3db;
+ --blockquote: #666;
+ --brand: #f15b2f;
+ --brand-hover: #d94e27;
+ --brand-active: #bf4522;
+}
+
+html {
+ font-size: 100%;
+}
+
+body {
+ font-family: var(--font-body);
+ font-size: var(--text-base);
+ font-kerning: normal;
+ width: 400px;
+ height: 560px;
+ background: var(--bg);
+ color: var(--text);
+ overflow: hidden;
+ transition:
+ background 0.15s,
+ color 0.15s;
+}
+
+[data-theme="dark"] .result,
+[data-theme="dark"] .streaming-content,
+[data-theme="dark"] .chat-message.assistant,
+[data-theme="dark"] .chat-message.user {
+ line-height: 1.75;
+}
+
+[data-theme="dark"] .result p,
+[data-theme="dark"] .streaming-content p,
+[data-theme="dark"] .chat-message.assistant p,
+[data-theme="dark"] .chat-message.user p {
+ line-height: 1.75;
+}
+
+.app {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+/* ── Header ── */
+.header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 13px 18px;
+ border-bottom: 1px solid var(--border);
+ flex-shrink: 0;
+}
+
+.header-left {
+ display: flex;
+ align-items: center;
+ gap: 7px;
+}
+
+.header-right {
+ display: flex;
+ align-items: center;
+ gap: 2px;
+}
+
+.logo-mark {
+ width: 13px;
+ height: 13px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.logo-mark .brand-icon {
+ width: 100%;
+ height: 100%;
+ display: block;
+ background: var(--brand);
+ -webkit-mask: url("lightning.svg") center / contain no-repeat;
+ mask: url("lightning.svg") center / contain no-repeat;
+}
+
+.brand-stack {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+ line-height: var(--lh-heading);
+}
+
+.logo-text {
+ font-family: var(--font-display);
+ font-size: var(--text-sm);
+ font-weight: 600;
+ color: var(--text);
+ letter-spacing: -0.02em;
+}
+
+.icon-btn {
+ background: transparent;
+ border: none;
+ cursor: pointer;
+ color: var(--icon-btn);
+ width: 28px;
+ height: 28px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 6px;
+ transition:
+ color var(--motion-tap) var(--ease-out-quart),
+ transform var(--motion-tap) var(--ease-out-quart);
+ flex-shrink: 0;
+}
+
+.icon-btn:hover {
+ color: var(--icon-btn-hover);
+ transform: scale(1.06);
+}
+
+.icon-btn:active {
+ transform: scale(0.96);
+}
+
+/* ── Content area ── */
+.content-container {
+ flex: 1;
+ min-height: 0;
+ overflow-y: auto;
+ padding: 18px;
+ scrollbar-width: thin;
+ scrollbar-color: var(--scrollbar) transparent;
+ /* Isolate layout inside the transcript pane from the rest of the flex column. */
+ contain: layout;
+}
+
+.content-container::-webkit-scrollbar {
+ width: 3px;
+}
+.content-container::-webkit-scrollbar-track {
+ background: transparent;
+}
+.content-container::-webkit-scrollbar-thumb {
+ background: var(--scrollbar);
+ border-radius: 3px;
+}
+
+/* ── Initial state ── */
+.initial-state {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: flex-end;
+ height: 100%;
+ padding-bottom: 4px;
+ gap: 8px;
+}
+
+.initial-state.hidden {
+ display: none;
+}
+
+.initial-state:not(.hidden) .initial-icon {
+ animation: fadeUp var(--motion-enter) var(--ease-out-quart) 0.04s both;
+}
+
+.initial-state:not(.hidden) .initial-title {
+ animation: fadeUp var(--motion-enter) var(--ease-out-quart) 0.1s both;
+}
+
+.initial-state:not(.hidden) .initial-sub {
+ animation: fadeUp var(--motion-enter) var(--ease-out-quart) 0.16s both;
+}
+
+.initial-icon {
+ width: 18px;
+ height: 18px;
+ margin-bottom: 4px;
+}
+
+.initial-icon .brand-icon {
+ width: 100%;
+ height: 100%;
+ display: block;
+ background: var(--brand);
+ -webkit-mask: url("lightning.svg") center / contain no-repeat;
+ mask: url("lightning.svg") center / contain no-repeat;
+}
+
+.initial-title {
+ font-family: var(--font-display);
+ font-size: var(--text-lg);
+ font-weight: 600;
+ line-height: var(--lh-heading);
+ letter-spacing: -0.02em;
+ color: var(--text);
+}
+
+.initial-sub {
+ font-family: var(--font-body);
+ font-size: var(--text-sm);
+ font-weight: 400;
+ color: var(--text-secondary);
+ line-height: var(--lh-ui);
+ letter-spacing: 0;
+ max-width: 38ch;
+}
+
+/* ── Loading ── */
+.loading-wrap {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ gap: 12px;
+ animation: fadeUp var(--motion-enter) var(--ease-out-quart) both;
+}
+
+.spinner {
+ width: 18px;
+ height: 18px;
+ border: 1.5px solid var(--spinner-track);
+ border-top-color: var(--spinner-head);
+ border-radius: 50%;
+ animation: spin 0.75s linear infinite;
+}
+
+@keyframes spin {
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+.loading-label {
+ font-family: var(--font-display);
+ font-size: var(--text-xs);
+ font-weight: 600;
+ color: var(--text-muted);
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+}
+
+/* ── Result ── */
+.result {
+ /* Summary body — same stack/size as chat Q&A */
+ font-family: var(--font-body);
+ font-size: var(--text-md);
+ line-height: 1.7;
+ color: var(--text-secondary);
+ max-width: 72ch;
+}
+
+.result.hidden {
+ display: none;
+}
+
+/* ── Truncation Warning ── */
+.truncation-warning {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 10px 12px;
+ margin-bottom: 16px;
+ background: var(--bg-subtle);
+ border: 1px solid var(--border);
+ border-radius: 6px;
+ font-family: var(--font-body);
+ font-size: var(--text-sm);
+ font-weight: 400;
+ color: var(--text-secondary);
+ letter-spacing: 0;
+ line-height: var(--lh-ui);
+ animation: fadeUp var(--motion-enter) var(--ease-out-quart) both;
+}
+
+.truncation-warning svg {
+ flex-shrink: 0;
+ color: var(--text-muted);
+}
+
+@keyframes fadeUp {
+ from {
+ opacity: 0;
+ transform: translateY(6px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+/* ── Markdown ── */
+.result > * + * {
+ margin-top: 10px;
+}
+
+.result > *:first-child {
+ margin-top: 0;
+}
+
+.result h1,
+.result h2,
+.result h3,
+.result h4,
+.result h5,
+.result h6 {
+ font-family: var(--font-display);
+ font-weight: 600;
+ color: var(--heading);
+ line-height: var(--lh-heading);
+}
+
+.result h1 {
+ font-size: var(--text-base);
+ margin-top: 1rem;
+}
+.result h2 {
+ font-size: var(--text-md);
+ margin-top: 0.875rem;
+}
+.result h3 {
+ font-size: var(--text-sm);
+ margin-top: 0.75rem;
+}
+.result h4,
+.result h5,
+.result h6 {
+ font-size: var(--text-sm);
+ color: var(--text-muted);
+ margin-top: 0.625rem;
+}
+
+.result p {
+ line-height: inherit;
+}
+.result p + p {
+ margin-top: 6px;
+}
+
+.result ul,
+.result ol {
+ padding-left: 18px;
+}
+
+.result li {
+ line-height: 1.6;
+}
+.result li + li {
+ margin-top: 2px;
+}
+.result li::marker {
+ color: var(--text-faint);
+}
+
+.result strong {
+ font-weight: 600;
+ color: var(--strong);
+}
+.result em {
+ font-style: italic;
+ color: var(--text-em);
+}
+
+.result code {
+ font-family: var(--font-mono);
+ font-size: var(--text-xs);
+ background: var(--code-bg);
+ padding: 1px 5px;
+ border-radius: 3px;
+ color: var(--code-text);
+}
+
+.result pre {
+ background: var(--code-bg);
+ padding: 10px 12px;
+ border-radius: 5px;
+ overflow-x: auto;
+}
+
+.result pre code {
+ background: transparent;
+ padding: 0;
+ color: var(--pre-text);
+}
+
+.result blockquote {
+ margin: 0;
+ padding: 0.5rem 0.75rem;
+ border: 1px solid var(--border);
+ border-radius: 6px;
+ background: var(--bg-subtle);
+ color: var(--blockquote);
+ font-style: italic;
+}
+
+.result blockquote + blockquote {
+ margin-top: 6px;
+}
+
+.result a {
+ color: var(--link);
+ text-decoration: underline;
+}
+.result a:hover {
+ color: var(--brand);
+}
+
+.result hr {
+ border: none;
+ border-top: 1px solid var(--border);
+}
+
+.result table {
+ border-collapse: collapse;
+ width: 100%;
+ font-size: var(--text-sm);
+ font-variant-numeric: tabular-nums;
+}
+
+.result th,
+.result td {
+ border: 1px solid var(--border);
+ padding: 5px 9px;
+ text-align: left;
+}
+
+.result th {
+ background: var(--table-th);
+ font-weight: 600;
+}
+
+/* Streaming content - match .result styling for consistency */
+.streaming-content {
+ font-family: var(--font-body);
+ font-size: var(--text-md);
+ line-height: 1.7;
+ color: var(--text-secondary);
+ max-width: 72ch;
+ animation: fadeUp var(--motion-enter) var(--ease-out-quart) both;
+}
+
+.streaming-content > * + * {
+ margin-top: 10px;
+}
+
+.streaming-content > *:first-child {
+ margin-top: 0;
+}
+
+/* Loading placeholder before first token */
+.streaming-placeholder {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ padding: 4px 0;
+}
+
+.streaming-placeholder .pulse-dot {
+ width: 6px;
+ height: 6px;
+ background: var(--text-muted);
+ border-radius: 50%;
+ animation: pulse-dot 1.4s ease-in-out infinite;
+}
+
+.streaming-placeholder .pulse-dot:nth-child(2) {
+ animation-delay: 0.2s;
+}
+
+.streaming-placeholder .pulse-dot:nth-child(3) {
+ animation-delay: 0.4s;
+}
+
+@keyframes pulse-dot {
+ 0%,
+ 80%,
+ 100% {
+ transform: scale(0.6);
+ opacity: 0.4;
+ }
+ 40% {
+ transform: scale(1);
+ opacity: 1;
+ }
+}
+
+/* ── Footer ── */
+.footer {
+ display: flex;
+ padding: 11px 18px;
+ border-top: 1px solid var(--border);
+ flex-shrink: 0;
+ align-items: center;
+}
+
+.footer-btn {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 9px 16px;
+ border-radius: 8px;
+ font-family: var(--font-display);
+ font-size: var(--text-sm);
+ font-weight: 500;
+ cursor: pointer;
+ transition:
+ background var(--motion-tap) var(--ease-out-quart),
+ color var(--motion-tap) var(--ease-out-quart),
+ border-color var(--motion-tap) var(--ease-out-quart),
+ transform var(--motion-tap) var(--ease-out-quart);
+ border: 1px solid var(--border);
+ flex: 1;
+ background: var(--bg-subtle);
+ color: var(--text-secondary);
+}
+
+.footer-btn:hover:not(:disabled) {
+ background: var(--bg);
+ color: var(--text);
+ border-color: var(--border-hover);
+ transform: translateY(-1px);
+}
+
+.footer-btn:active:not(:disabled) {
+ background: var(--bg-subtle);
+ transform: translateY(0) scale(0.985);
+}
+.footer-btn:disabled {
+ opacity: 0.35;
+ cursor: not-allowed;
+}
+
+.footer-btn.primary {
+ background: transparent;
+ color: var(--brand);
+ border: 1px solid var(--brand);
+ font-weight: 500;
+}
+
+.footer-btn.primary:hover:not(:disabled) {
+ background: var(--brand);
+ color: #fff;
+ border-color: var(--brand);
+}
+
+.footer-btn.primary:active:not(:disabled) {
+ background: var(--brand-active);
+ border-color: var(--brand-active);
+ color: #fff;
+ transform: translateY(0) scale(0.985);
+}
+
+.footer-btn:focus-visible,
+.chat-send-btn:focus-visible,
+.icon-btn:focus-visible,
+.suggestion-btn:focus-visible,
+.copy-summary-btn:focus-visible {
+ outline: 2px solid var(--brand);
+ outline-offset: 2px;
+}
+
+.hidden {
+ display: none !important;
+}
+
+/* ── Error ── */
+.error-message {
+ font-family: var(--font-body);
+ background: var(--error-bg);
+ border: 1px solid var(--error-border);
+ color: var(--error-text);
+ padding: 11px 14px;
+ border-radius: 6px;
+ font-size: var(--text-sm);
+ font-weight: 400;
+ line-height: var(--lh-ui);
+ white-space: pre-wrap;
+ animation: fadeUp var(--motion-enter) var(--ease-out-quart) both;
+}
+
+/* ── PDF Error ── */
+.pdf-error {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ text-align: center;
+ padding: 40px 20px;
+ gap: 12px;
+}
+
+.pdf-error-icon {
+ font-size: 3rem;
+ font-weight: 300;
+ color: var(--text-muted);
+ margin-bottom: 8px;
+ font-family: var(--font-display);
+}
+
+.pdf-error-title {
+ font-family: var(--font-display);
+ font-size: var(--text-base);
+ font-weight: 600;
+ color: var(--text);
+}
+
+.pdf-error-message {
+ font-family: var(--font-body);
+ font-size: var(--text-sm);
+ font-weight: 400;
+ color: var(--text-secondary);
+ line-height: var(--lh-ui);
+ letter-spacing: 0;
+ max-width: 280px;
+}
+
+/* ── Unsupported extraction (YouTube, streaming, Bluesky, email UIs, etc.) ── */
+.youtube-error {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ text-align: center;
+ padding: 40px 20px;
+ gap: 12px;
+}
+
+.youtube-error-icon {
+ font-size: 3rem;
+ font-weight: 300;
+ color: var(--text-muted);
+ margin-bottom: 8px;
+ font-family: var(--font-display);
+}
+
+.youtube-error-title {
+ font-family: var(--font-display);
+ font-size: var(--text-base);
+ font-weight: 600;
+ color: var(--text);
+}
+
+.youtube-error-message {
+ font-family: var(--font-body);
+ font-size: var(--text-sm);
+ font-weight: 400;
+ color: var(--text-secondary);
+ line-height: var(--lh-ui);
+ letter-spacing: 0;
+ max-width: 280px;
+}
+
+/* ── Toast ── */
+.toast {
+ position: fixed;
+ bottom: 68px;
+ left: 50%;
+ transform: translateX(-50%);
+ background: var(--toast-bg);
+ color: var(--toast-text);
+ padding: 6px 14px;
+ border-radius: 20px;
+ font-family: var(--font-body);
+ font-size: var(--text-xs);
+ font-weight: 500;
+ z-index: 100;
+ white-space: nowrap;
+ animation: toast-in var(--motion-toast) var(--ease-out-quart) both;
+}
+
+@keyframes toast-in {
+ from {
+ opacity: 0;
+ transform: translateX(-50%) translateY(6px);
+ }
+ to {
+ opacity: 1;
+ transform: translateX(-50%) translateY(0);
+ }
+}
+
+/* ── Chat ── */
+.chat-container {
+ padding: 12px 18px;
+ border-top: 1px solid var(--border);
+ flex-shrink: 0;
+}
+
+.chat-container:not(.hidden) .chat-input-wrap {
+ animation: barRise var(--motion-enter) var(--ease-out-quart) both;
+}
+
+.chat-container.hidden {
+ display: none;
+}
+
+/* Chat suggestions */
+.chat-suggestions {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 6px;
+ margin-bottom: 10px;
+}
+
+.suggestion-btn {
+ padding: 5px 10px;
+ border-radius: 14px;
+ border: 1px solid var(--border);
+ background: var(--bg-subtle);
+ color: var(--text-muted);
+ font-family: var(--font-body);
+ font-size: var(--text-xs);
+ font-weight: 500;
+ cursor: pointer;
+ transition:
+ border-color var(--motion-tap) var(--ease-out-quart),
+ color var(--motion-tap) var(--ease-out-quart),
+ background var(--motion-tap) var(--ease-out-quart),
+ transform var(--motion-tap) var(--ease-out-quart);
+ white-space: nowrap;
+ animation: chipIn var(--motion-enter) var(--ease-out-quart) both;
+}
+
+.suggestion-btn:nth-child(1) {
+ animation-delay: 0.04s;
+}
+.suggestion-btn:nth-child(2) {
+ animation-delay: 0.1s;
+}
+.suggestion-btn:nth-child(3) {
+ animation-delay: 0.16s;
+}
+.suggestion-btn:nth-child(4) {
+ animation-delay: 0.22s;
+}
+
+.suggestion-btn:hover {
+ border-color: var(--brand);
+ color: var(--brand);
+ background: var(--bg);
+ transform: translateY(-1px);
+}
+
+.suggestion-btn:active {
+ transform: translateY(0) scale(0.97);
+}
+
+@keyframes chipIn {
+ from {
+ opacity: 0;
+ transform: translateY(5px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+@keyframes barRise {
+ from {
+ opacity: 0;
+ transform: translateY(8px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+/* Suggestion skeleton placeholder */
+.suggestion-skeleton {
+ padding: 5px 10px;
+ border-radius: 14px;
+ border: 1px solid var(--border);
+ background: var(--bg-subtle);
+ width: 120px;
+ height: 24px;
+ animation: skeleton-pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes skeleton-pulse {
+ 0%,
+ 100% {
+ opacity: 0.4;
+ }
+ 50% {
+ opacity: 0.7;
+ }
+}
+
+/* Chat messages are rendered inside .result, sharing the same scroll */
+.chat-divider {
+ margin: 20px 0 16px 0;
+ border: none;
+ border-top: 1px solid var(--border);
+ animation: dividerIn var(--motion-enter) var(--ease-out-quart) both;
+}
+
+@keyframes dividerIn {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+/* Entrance only on new user bubbles — assistant streams in place (no post-stream rebuild). */
+.chat-message + .chat-message {
+ margin-top: 14px;
+}
+
+/* User messages — same body type as summary / assistant (Sora only in headings via markdown) */
+.chat-message.user {
+ font-family: var(--font-body);
+ font-size: var(--text-md);
+ line-height: 1.7;
+ background: var(--primary-bg);
+ color: var(--primary-text);
+ padding: 10px 14px;
+ border-radius: 12px;
+ border-bottom-right-radius: 4px;
+ /* Shrink-wrap short questions; cap width when text is long or multi-line. */
+ width: fit-content;
+ max-width: 85%;
+ margin-left: auto;
+ transform-origin: center right;
+ animation: bubbleIn var(--motion-enter) var(--ease-out-quint) both;
+}
+
+@keyframes bubbleIn {
+ from {
+ opacity: 0;
+ transform: translateX(6px) scale(0.98);
+ }
+ to {
+ opacity: 1;
+ transform: translateX(0) scale(1);
+ }
+}
+
+/* Assistant messages — match summary `.result` prose */
+.chat-message.assistant {
+ font-family: var(--font-body);
+ font-size: var(--text-md);
+ line-height: 1.7;
+ color: var(--text-secondary);
+ max-width: 72ch;
+}
+
+.chat-message.assistant.loading {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 20px 0;
+}
+
+.chat-message.assistant.error {
+ background: var(--error-bg);
+ border: 1px solid var(--error-border);
+ color: var(--error-text);
+ padding: 10px 14px;
+ border-radius: 6px;
+ white-space: pre-wrap;
+}
+
+.chat-spinner {
+ width: 18px;
+ height: 18px;
+ border: 1.5px solid var(--spinner-track);
+ border-top-color: var(--spinner-head);
+ border-radius: 50%;
+ animation: spin 0.75s linear infinite;
+}
+
+/* Chat message markdown (assistant uses same styles as .result) */
+.chat-message.assistant > * + * {
+ margin-top: 10px;
+}
+
+.chat-message.assistant h1,
+.chat-message.assistant h2,
+.chat-message.assistant h3,
+.chat-message.assistant h4,
+.chat-message.assistant h5,
+.chat-message.assistant h6 {
+ font-family: var(--font-display);
+ font-weight: 600;
+ color: var(--heading);
+ line-height: var(--lh-heading);
+}
+
+.chat-message.assistant h1 {
+ font-size: var(--text-base);
+ margin-top: 1rem;
+}
+.chat-message.assistant h2 {
+ font-size: var(--text-md);
+ margin-top: 0.875rem;
+}
+.chat-message.assistant h3 {
+ font-size: var(--text-sm);
+ margin-top: 0.75rem;
+}
+
+.chat-message.assistant p {
+ line-height: inherit;
+}
+
+.chat-message.assistant p + p {
+ margin-top: 6px;
+}
+
+.chat-message.assistant ul,
+.chat-message.assistant ol {
+ padding-left: 18px;
+}
+
+.chat-message.assistant li {
+ line-height: 1.6;
+}
+
+.chat-message.assistant li + li {
+ margin-top: 2px;
+}
+
+.chat-message.assistant strong {
+ font-weight: 600;
+ color: var(--strong);
+}
+
+.chat-message.assistant code {
+ font-family: var(--font-mono);
+ font-size: var(--text-xs);
+ background: var(--code-bg);
+ padding: 1px 5px;
+ border-radius: 3px;
+ color: var(--code-text);
+}
+
+.chat-message.assistant pre {
+ background: var(--code-bg);
+ padding: 10px 12px;
+ border-radius: 5px;
+ overflow-x: auto;
+}
+
+.chat-message.assistant pre code {
+ background: transparent;
+ padding: 0;
+ color: var(--pre-text);
+}
+
+.chat-message.assistant blockquote {
+ margin: 0;
+ padding: 0.5rem 0.75rem;
+ border: 1px solid var(--border);
+ border-radius: 6px;
+ background: var(--bg-subtle);
+ color: var(--blockquote);
+ font-style: italic;
+}
+
+.chat-message.assistant a {
+ color: var(--link);
+ text-decoration: underline;
+}
+
+.chat-message.assistant a:hover {
+ color: var(--brand);
+}
+
+/* User message markdown */
+.chat-message.user p {
+ margin: 0;
+}
+
+.chat-message.user p + p {
+ margin-top: 4px;
+}
+
+.chat-message.user strong {
+ font-weight: 600;
+}
+
+.chat-input-wrap {
+ display: flex;
+ gap: 8px;
+ align-items: center;
+}
+
+.chat-input {
+ flex: 1;
+ padding: 8px 12px;
+ border: 1px solid var(--border);
+ border-radius: 6px;
+ background: var(--bg);
+ color: var(--text);
+ /* Match `.result` summary body — same face as the page text above */
+ font-family: var(--font-body);
+ font-size: var(--text-md);
+ outline: none;
+ transition:
+ border-color var(--motion-tap) var(--ease-out-quart),
+ box-shadow var(--motion-tap) var(--ease-out-quart);
+}
+
+.chat-input:focus,
+.chat-input:focus-visible {
+ outline: none;
+ border-color: var(--brand);
+ box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 22%, transparent);
+}
+
+.chat-input::placeholder {
+ color: var(--text-muted);
+}
+
+.chat-send-btn {
+ width: 32px;
+ height: 32px;
+ border-radius: 6px;
+ border: none;
+ background: var(--brand);
+ color: #fff;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition:
+ background var(--motion-tap) var(--ease-out-quart),
+ transform var(--motion-tap) var(--ease-out-quart),
+ opacity var(--motion-tap) var(--ease-out-quart);
+ flex-shrink: 0;
+}
+
+.chat-send-btn:hover:not(:disabled) {
+ background: var(--brand-hover);
+ transform: scale(1.05);
+}
+
+.chat-send-btn:active:not(:disabled) {
+ transform: scale(0.94);
+}
+
+.chat-send-btn:disabled {
+ opacity: 0.35;
+ cursor: not-allowed;
+}
+
+.chat-send-btn.stop-streaming {
+ background: var(--icon-btn-hover);
+}
+
+.chat-send-btn.stop-streaming:hover:not(:disabled) {
+ background: var(--text-em);
+ transform: scale(1.05);
+}
+
+/* Summary action buttons container */
+.summary-actions {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+ margin-top: 16px;
+}
+
+/* Copy/regenerate button under summary */
+.copy-summary-btn {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ padding: 6px 12px;
+ border-radius: 6px;
+ border: 1px solid var(--border);
+ background: transparent;
+ color: var(--text-muted);
+ font-family: var(--font-body);
+ font-size: var(--text-sm);
+ font-weight: 500;
+ cursor: pointer;
+ transition:
+ border-color var(--motion-tap) var(--ease-out-quart),
+ color var(--motion-tap) var(--ease-out-quart),
+ background var(--motion-tap) var(--ease-out-quart),
+ transform var(--motion-tap) var(--ease-out-quart);
+ animation: fadeUp var(--motion-enter) var(--ease-out-quart) both;
+}
+
+.summary-actions .copy-summary-btn:nth-child(2) {
+ animation-delay: 0.06s;
+}
+
+.copy-summary-btn:hover {
+ border-color: var(--border-hover);
+ color: var(--text);
+ transform: translateY(-1px);
+}
+
+.copy-summary-btn:active {
+ transform: translateY(0) scale(0.98);
+}
+
+.copy-summary-btn.copied {
+ color: var(--text);
+ border-color: var(--border-hover);
+}
+
+/* ── Reduced motion: keep feedback, drop travel / spin ── */
+@media (prefers-reduced-motion: reduce) {
+ :root {
+ --motion-enter: 0.01ms;
+ --motion-tap: 0.01ms;
+ --motion-toast: 0.01ms;
+ }
+
+ .spinner,
+ .chat-spinner {
+ animation: none;
+ border-top-color: var(--spinner-head);
+ opacity: 0.88;
+ }
+
+ .streaming-placeholder .pulse-dot {
+ animation: none;
+ opacity: 0.55;
+ }
+
+ .suggestion-skeleton {
+ animation: none;
+ opacity: 0.55;
+ }
+
+ .footer-btn:hover:not(:disabled),
+ .footer-btn:active:not(:disabled),
+ .suggestion-btn:hover,
+ .suggestion-btn:active,
+ .copy-summary-btn:hover,
+ .copy-summary-btn:active,
+ .icon-btn:hover,
+ .icon-btn:active,
+ .chat-send-btn:hover:not(:disabled),
+ .chat-send-btn:active:not(:disabled) {
+ transform: none;
+ }
+}
diff --git a/public/images/hero.jpeg b/public/images/hero.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..ef1ec1898b559e9a7c2f391d2883c09bfa23f951
GIT binary patch
literal 172633
zcmex=