cabbage/aishare
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add anonymous captures and retention controls

Browse Source
This commit is contained in:
Codex
2026-07-09 03:25:44 +00:00
parent 90cf3d415c
commit 3ed933fb35
6 changed files with 418 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/index.html
+1 -1
View File
@@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="robots" content="noindex" /> <meta name="robots" content="noindex" />
<title>AI Share Admin</title> <title>AI Share</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
client/src/main.ts
+171 -206
View File
@@ -10,35 +10,41 @@ type Capture = {
createdAt: string; createdAt: string;
updatedAt: string; updatedAt: string;
capturedAt: string | null; capturedAt: string | null;
retentionDays: number;
expiresAt: string;
publicUrl: string | null; publicUrl: string | null;
}; };
const tokenKey = "aishare.adminToken"; const tokenKey = "aishare.adminToken";
const themeKey = "aishare.adminTheme"; const themeKey = "aishare.theme";
const legacyThemeKey = "aishare.adminTheme";
const app = document.querySelector<HTMLDivElement>("#app")!; const app = document.querySelector<HTMLDivElement>("#app")!;
let token = localStorage.getItem(tokenKey) || ""; let adminToken = "";
let isAdmin = false;
let page = 1; let page = 1;
let pageSize = 20; let pageSize = 20;
let totalPages = 1; let totalPages = 1;
let polling: number | undefined; let polling: number | undefined;
let toastTimer: number | undefined; let toastTimer: number | undefined;
let keyValidationTimer: number | undefined;
let manualTheme = false; let manualTheme = false;
const icons = { const icons = {
sun: `<svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 3v2m0 14v2M3 12h2m14 0h2M5.6 5.6 7 7m10 10 1.4 1.4M18.4 5.6 17 7M7 17l-1.4 1.4"/></svg>`, sun: `<svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 3v2m0 14v2M3 12h2m14 0h2M5.6 5.6 7 7m10 10 1.4 1.4M18.4 5.6 17 7M7 17l-1.4 1.4"/></svg>`,
moon: `<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 14.6A7.6 7.6 0 0 1 9.4 4 8 8 0 1 0 20 14.6Z"/></svg>` moon: `<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 14.6A7.6 7.6 0 0 1 9.4 4 8 8 0 1 0 20 14.6Z"/></svg>`,
refresh: `<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 11a8 8 0 1 0-2.3 6"/><path d="M20 5v6h-6"/></svg>`
}; };
function preferredTheme() { function preferredTheme(): "light" | "dark" {
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
} }
function savedTheme() { function savedTheme(): "light" | "dark" | null {
const theme = localStorage.getItem(themeKey); const theme = localStorage.getItem(themeKey) || localStorage.getItem(legacyThemeKey);
return theme === "light" || theme === "dark" ? theme : null; return theme === "light" || theme === "dark" ? theme : null;
} }
function applyTheme(theme: "light" | "dark", manual: boolean) { function applyTheme(theme: "light" | "dark", manual: boolean): void {
document.documentElement.dataset.theme = theme; document.documentElement.dataset.theme = theme;
document.documentElement.style.colorScheme = theme; document.documentElement.style.colorScheme = theme;
manualTheme = manual; manualTheme = manual;
@@ -46,60 +52,60 @@ function applyTheme(theme: "light" | "dark", manual: boolean) {
updateThemeToggle(); updateThemeToggle();
} }
function updateThemeToggle() { function updateThemeToggle(): void {
const theme = document.documentElement.dataset.theme === "dark" ? "dark" : "light"; const theme = document.documentElement.dataset.theme === "dark" ? "dark" : "light";
const toggle = document.querySelector<HTMLButtonElement>("[data-theme-toggle]"); const toggle = document.querySelector<HTMLButtonElement>("[data-theme-toggle]");
if (!toggle) return; if (!toggle) return;
toggle.setAttribute("aria-label", theme === "dark" ? "Switch to light theme" : "Switch to dark theme"); const label = theme === "dark" ? "Switch to light theme" : "Switch to dark theme";
toggle.setAttribute("title", theme === "dark" ? "Switch to light theme" : "Switch to dark theme"); toggle.setAttribute("aria-label", label);
toggle.setAttribute("title", label);
} }
function initTheme() { function initTheme(): void {
const theme = savedTheme(); const theme = savedTheme();
applyTheme(theme || preferredTheme(), Boolean(theme)); applyTheme(theme || preferredTheme(), Boolean(theme));
const systemTheme = window.matchMedia("(prefers-color-scheme: dark)"); window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
systemTheme.addEventListener("change", () => {
if (!manualTheme) applyTheme(preferredTheme(), false); if (!manualTheme) applyTheme(preferredTheme(), false);
}); });
} }
function serviceBaseUrl() { function serviceBaseUrl(): URL {
const url = new URL(location.href); const url = new URL(location.href);
url.pathname = url.pathname.replace(/\/admin\/?$/, "/"); url.pathname = url.pathname.replace(/\/admin\/?$/, "/");
if (!url.pathname.endsWith("/")) url.pathname += "/";
url.search = ""; url.search = "";
url.hash = ""; url.hash = "";
return url; return url;
} }
function api(path: string, options: RequestInit = {}) { function api(path: string, options: RequestInit = {}): Promise<Response> {
return fetch(new URL(`api${path}`, serviceBaseUrl()), { return fetch(new URL(`api${path}`, serviceBaseUrl()), {
...options, ...options,
headers: { headers: {
"content-type": "application/json", "content-type": "application/json",
...(token ? { authorization: `Bearer ${token}` } : {}), ...(isAdmin && adminToken ? { authorization: `Bearer ${adminToken}` } : {}),
...(options.headers || {}) ...(options.headers || {})
} }
}); });
} }
function captureUrl(capture: Capture) { function captureUrl(capture: Capture): string {
if (capture.slug) return new URL(`${capture.slug}/`, serviceBaseUrl()).href; if (capture.slug) return new URL(`${capture.slug}/`, serviceBaseUrl()).href;
return capture.publicUrl || ""; return capture.publicUrl || "";
} }
function fmt(value: string | null) { function fmt(value: string | null): string {
if (!value) return ""; if (!value) return "—";
return new Date(value).toLocaleString(); return new Date(value).toLocaleString();
} }
function statusClass(status: Capture["status"]) { function escapeHtml(value: string): string {
return `pill ${status}`; return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
} }
async function copy(text: string) { async function copy(text: string): Promise<void> {
try { try {
await navigator.clipboard.writeText(text); await navigator.clipboard.writeText(text);
return;
} catch { } catch {
const textarea = document.createElement("textarea"); const textarea = document.createElement("textarea");
textarea.value = text; textarea.value = text;
@@ -114,7 +120,7 @@ async function copy(text: string) {
} }
} }
function showToast(message: string) { function showToast(message: string): void {
let toast = document.querySelector<HTMLDivElement>("[data-toast]"); let toast = document.querySelector<HTMLDivElement>("[data-toast]");
if (!toast) { if (!toast) {
toast = document.createElement("div"); toast = document.createElement("div");
@@ -127,130 +133,110 @@ function showToast(message: string) {
toast.textContent = message; toast.textContent = message;
toast.dataset.visible = "true"; toast.dataset.visible = "true";
if (toastTimer) window.clearTimeout(toastTimer); if (toastTimer) window.clearTimeout(toastTimer);
toastTimer = window.setTimeout(() => { toastTimer = window.setTimeout(() => delete toast?.dataset.visible, 1800);
delete toast?.dataset.visible;
}, 1800);
} }
function renderShell() { function renderShell(): void {
app.innerHTML = ` app.innerHTML = `
<nav class="navbar">
<div class="nav-inner">
<a class="brand" href="${escapeHtml(serviceBaseUrl().pathname)}" aria-label="AI Share home"><span class="brand-mark">A</span><span>AI Share</span></a>
<div class="nav-actions">
<label class="admin-key-field">
<span class="sr-only">Admin key</span>
<input id="admin-key" type="password" autocomplete="current-password" placeholder="Admin key" value="${escapeHtml(adminToken)}" aria-label="Admin key" />
<span class="key-state" data-key-state aria-hidden="true"></span>
</label>
<button class="icon-button theme-toggle" type="button" data-theme-toggle aria-label="Switch theme"><span class="sun-icon">${icons.sun}</span><span class="moon-icon">${icons.moon}</span></button>
</div>
</div>
</nav>
<main class="shell"> <main class="shell">
<header class="header"> <section class="intro">
<div> <div>
<h1>AI Share Admin</h1> <p class="eyebrow">Public ChatGPT snapshots</p>
<p>Capture public ChatGPT shares as read-only snapshots.</p> <h1>${isAdmin ? "Capture library" : "Your captures"}</h1>
</div> <p>${isAdmin ? "Manage every submitted snapshot and its retention window." : "Save a public ChatGPT conversation as an immutable page and screenshot."}</p>
<div class="header-actions">
<button class="icon-button theme-toggle" type="button" data-theme-toggle aria-label="Switch theme" title="Switch theme"><span class="sun-icon">${icons.sun}</span><span class="moon-icon">${icons.moon}</span></button>
<button class="icon-button" id="reset-token" title="Reset admin token" aria-label="Reset admin token">Reset</button>
</div>
</header>
<section class="panel token-panel" ${token ? "hidden" : ""}>
<label>Admin token</label>
<div class="row">
<input id="token-input" type="password" autocomplete="current-password" placeholder="AISHARE_ADMIN_TOKEN" />
<button id="save-token">Save</button>
</div> </div>
${isAdmin ? '<span class="admin-badge">Admin view</span>' : ""}
</section> </section>
<section class="panel" ${token ? "" : "hidden"}> <section class="panel capture-panel">
<form id="capture-form" class="capture-form"> <form id="capture-form" class="capture-form">
<label> <label class="url-field">ChatGPT share URL<input name="sourceUrl" required inputmode="url" autocomplete="url" placeholder="https://chatgpt.com/share/…" /></label>
ChatGPT share URL ${isAdmin ? '<label class="slug-field">Custom slug<input name="slug" placeholder="Optional" /></label>' : ""}
<input name="sourceUrl" required inputmode="url" placeholder="https://chatgpt.com/share/..." /> <label class="retention-field">Keep for<select name="retentionDays" aria-label="Retention period"><option value="3" selected>3 days</option><option value="7">7 days</option><option value="10">10 days</option><option value="30">30 days</option></select></label>
</label> <button class="primary" type="submit">Capture</button>
<label>
Slug
<input name="slug" placeholder="Optional" />
</label>
<button type="submit">Capture</button>
</form> </form>
<p id="form-status" class="status-line"></p> <p id="form-status" class="status-line" aria-live="polite"></p>
</section> </section>
<section class="panel table-panel" ${token ? "" : "hidden"}> <section class="panel table-panel">
<div class="table-head"> <div class="table-head">
<h2>Captured Shares</h2> <div><h2>${isAdmin ? "All captures" : "Recent captures"}</h2><p class="table-summary" id="table-summary">Loading…</p></div>
<div class="actions"> <div class="actions">
<button id="refresh">Refresh</button> <button class="icon-button" id="refresh" title="Refresh" aria-label="Refresh">${icons.refresh}</button>
<button id="delete-all" class="danger">Delete all</button> ${isAdmin ? '<button id="delete-all" class="danger">Delete all</button>' : ""}
</div> </div>
</div> </div>
<div class="table-wrap"> <div class="table-wrap">
<table> <table>
<thead> <thead><tr><th>Capture</th><th>Status</th><th>Created</th><th>Expires</th><th><span class="sr-only">Actions</span></th></tr></thead>
<tr> <tbody id="captures-body"><tr><td colspan="5" class="empty-state">Loading captures…</td></tr></tbody>
<th>Title</th>
<th>Status</th>
<th>Created</th>
<th colspan="2">Actions</th>
</tr>
</thead>
<tbody id="captures-body"></tbody>
</table> </table>
</div> </div>
<div class="pager" aria-label="Pagination"> <div class="pager" aria-label="Pagination">
<button class="pager-button" id="prev" aria-label="Previous page">&lt;</button>
<span id="page-label" class="page-label"></span> <span id="page-label" class="page-label"></span>
<select id="page-size" aria-label="Rows per page"> <select id="page-size" aria-label="Rows per page"><option value="10">10 rows</option><option value="20">20 rows</option><option value="50">50 rows</option><option value="100">100 rows</option></select>
<option value="10">10 rows</option> <button class="pager-button" id="prev" aria-label="Previous page">←</button>
<option value="20">20 rows</option> <button class="pager-button" id="next" aria-label="Next page">→</button>
<option value="50">50 rows</option>
<option value="100">100 rows</option>
</select>
<button class="pager-button" id="next" aria-label="Next page">&gt;</button>
</div> </div>
</section> </section>
</main> </main>`;
`;
document.querySelector("#save-token")?.addEventListener("click", () => { bindShellEvents();
const input = document.querySelector<HTMLInputElement>("#token-input"); updateThemeToggle();
token = input?.value.trim() || ""; }
if (token) {
localStorage.setItem(tokenKey, token); function bindShellEvents(): void {
showToast("Admin token saved"); const keyInput = document.querySelector<HTMLInputElement>("#admin-key");
renderShell(); keyInput?.addEventListener("input", () => {
void loadCaptures(); if (keyValidationTimer) window.clearTimeout(keyValidationTimer);
} keyValidationTimer = window.setTimeout(() => void validateAdminKey(keyInput.value.trim()), 350);
}); });
keyInput?.addEventListener("keydown", (event) => {
document.querySelector("#reset-token")?.addEventListener("click", () => { if (event.key === "Enter") {
localStorage.removeItem(tokenKey); event.preventDefault();
token = ""; if (keyValidationTimer) window.clearTimeout(keyValidationTimer);
if (polling) window.clearInterval(polling); void validateAdminKey(keyInput.value.trim());
showToast("Admin token reset"); }
renderShell();
}); });
document.querySelector("[data-theme-toggle]")?.addEventListener("click", () => { document.querySelector("[data-theme-toggle]")?.addEventListener("click", () => {
applyTheme(document.documentElement.dataset.theme === "dark" ? "light" : "dark", true); applyTheme(document.documentElement.dataset.theme === "dark" ? "light" : "dark", true);
}); });
updateThemeToggle();
document.querySelector("#capture-form")?.addEventListener("submit", async (event) => { document.querySelector("#capture-form")?.addEventListener("submit", async (event) => {
event.preventDefault(); event.preventDefault();
const form = event.currentTarget as HTMLFormElement; const form = event.currentTarget as HTMLFormElement;
const data = new FormData(form); const data = new FormData(form);
const status = document.querySelector("#form-status")!; const status = document.querySelector<HTMLElement>("#form-status")!;
status.textContent = "Queued"; status.textContent = "Queueing capture…";
const response = await api("/captures", { const response = await api("/captures", {
method: "POST", method: "POST",
body: JSON.stringify({ body: JSON.stringify({ sourceUrl: data.get("sourceUrl"), slug: isAdmin ? data.get("slug") : null, retentionDays: Number(data.get("retentionDays") || 3) })
sourceUrl: data.get("sourceUrl"),
slug: data.get("slug")
})
}); });
const body = await response.json(); const body = await response.json().catch(() => ({}));
if (!response.ok) { if (!response.ok) {
status.textContent = body.error || "Capture failed to queue"; status.textContent = body.error || "Capture could not be queued.";
showToast(status.textContent); showToast(status.textContent);
return; return;
} }
form.reset(); form.reset();
status.textContent = "Capture queued"; status.textContent = "Capture queued.";
showToast("Capture queued"); showToast("Capture queued");
page = 1;
await loadCaptures(); await loadCaptures();
startPolling(); startPolling();
}); });
@@ -260,26 +246,18 @@ function renderShell() {
showToast("Refreshed"); showToast("Refreshed");
}); });
document.querySelector("#delete-all")?.addEventListener("click", async () => { document.querySelector("#delete-all")?.addEventListener("click", async () => {
if (!confirm("Delete all captures and related files?")) return; if (!confirm("Delete every capture and all related files?")) return;
const response = await api("/captures", { method: "DELETE" }); const response = await api("/captures", { method: "DELETE" });
if (!response.ok) { if (!response.ok) return showToast("Delete all failed");
showToast("Delete all failed");
return;
}
page = 1; page = 1;
await loadCaptures(); await loadCaptures();
showToast("All captures deleted"); showToast("All captures deleted");
}); });
document.querySelector("#prev")?.addEventListener("click", async () => { document.querySelector("#prev")?.addEventListener("click", async () => {
if (page > 1) { if (page > 1) { page -= 1; await loadCaptures(); }
page -= 1;
await loadCaptures();
}
}); });
document.querySelector("#next")?.addEventListener("click", async () => { document.querySelector("#next")?.addEventListener("click", async () => {
if (page >= totalPages) return; if (page < totalPages) { page += 1; await loadCaptures(); }
page += 1;
await loadCaptures();
}); });
const pageSizeSelect = document.querySelector<HTMLSelectElement>("#page-size"); const pageSizeSelect = document.querySelector<HTMLSelectElement>("#page-size");
if (pageSizeSelect) { if (pageSizeSelect) {
@@ -288,119 +266,106 @@ function renderShell() {
pageSize = Number(pageSizeSelect.value); pageSize = Number(pageSizeSelect.value);
page = 1; page = 1;
await loadCaptures(); await loadCaptures();
showToast(`${pageSize} rows per page`);
}); });
} }
} }
async function loadCaptures() { async function validateAdminKey(candidate: string, initial = false): Promise<void> {
if (!token) return; const response = await fetch(new URL("api/session", serviceBaseUrl()), {
const response = await api(`/captures?page=${page}&pageSize=${pageSize}`); headers: candidate ? { authorization: `Bearer ${candidate}` } : {}
if (response.status === 401) { });
const body = await response.json().catch(() => ({ isAdmin: false }));
const valid = Boolean(body.isAdmin);
const changed = valid !== isAdmin || (valid && candidate !== adminToken);
if (valid) {
adminToken = candidate;
isAdmin = true;
localStorage.setItem(tokenKey, candidate);
} else {
adminToken = "";
isAdmin = false;
localStorage.removeItem(tokenKey); localStorage.removeItem(tokenKey);
token = ""; }
if (changed || initial) {
page = 1;
if (polling) { window.clearInterval(polling); polling = undefined; }
renderShell(); renderShell();
await loadCaptures();
if (!initial) showToast(valid ? "Admin view unlocked" : "Showing your captures");
} else if (!valid) {
document.querySelector("[data-key-state]")?.setAttribute("data-invalid", "true");
}
}
async function loadCaptures(): Promise<void> {
const response = await api(`/captures?page=${page}&pageSize=${pageSize}`);
if (!response.ok) {
showToast("Could not load captures");
return; return;
} }
const body = await response.json(); const body = await response.json();
if (Boolean(body.isAdmin) !== isAdmin) {
isAdmin = Boolean(body.isAdmin);
if (!isAdmin) { adminToken = ""; localStorage.removeItem(tokenKey); }
renderShell();
return loadCaptures();
}
const captures = body.captures as Capture[]; const captures = body.captures as Capture[];
const tbody = document.querySelector<HTMLTableSectionElement>("#captures-body")!;
tbody.innerHTML = captures
.map((capture) => {
const title = capture.title || capture.slug || capture.sourceUrl;
const link = captureUrl(capture);
return `
<tr>
<td>
<div class="title-cell">${escapeHtml(title)}</div>
<div class="sub">${escapeHtml(capture.slug || capture.id)}</div>
${capture.errorPublic ? `<div class="error">${escapeHtml(capture.errorPublic)}</div>` : ""}
</td>
<td><span class="${statusClass(capture.status)}">${capture.status}</span></td>
<td>${escapeHtml(fmt(capture.createdAt))}</td>
<td colspan="2">
<div class="row-actions">
${link ? `<button class="small" data-copy="${escapeHtml(link)}">Copy</button><a class="small link" href="${escapeHtml(link)}" target="_blank" rel="noreferrer">Open</a>` : ""}
${capture.status === "failed" ? `<button class="small" data-retry="${capture.id}">Retry</button>` : ""}
<button class="small danger" data-delete="${capture.id}">Delete</button>
</div>
</td>
</tr>`;
})
.join("");
tbody.querySelectorAll<HTMLButtonElement>("[data-copy]").forEach((button) => {
button.addEventListener("click", async () => {
try {
await copy(button.dataset.copy || "");
showToast("Copied");
} catch {
showToast("Copy failed");
}
});
});
tbody.querySelectorAll<HTMLButtonElement>("[data-retry]").forEach((button) => {
button.addEventListener("click", async () => {
const response = await api(`/captures/${button.dataset.retry}/retry`, { method: "POST" });
if (!response.ok) {
const body = await response.json().catch(() => ({}));
showToast(body.error || "Retry failed");
return;
}
await loadCaptures();
startPolling();
showToast("Retry queued");
});
});
tbody.querySelectorAll<HTMLButtonElement>("[data-delete]").forEach((button) => {
button.addEventListener("click", async () => {
if (!confirm("Delete this capture and related files?")) return;
const response = await api(`/captures/${button.dataset.delete}`, { method: "DELETE" });
if (!response.ok) {
showToast("Delete failed");
return;
}
await loadCaptures();
showToast("Capture deleted");
});
});
const total = Number(body.total || 0); const total = Number(body.total || 0);
totalPages = Math.max(1, Math.ceil(total / pageSize)); totalPages = Math.max(1, Math.ceil(total / pageSize));
if (page > totalPages) { if (page > totalPages) { page = totalPages; return loadCaptures(); }
page = totalPages;
await loadCaptures();
return;
}
document.querySelector("#page-label")!.textContent = `${page} / ${totalPages}`;
const pageSizeSelect = document.querySelector<HTMLSelectElement>("#page-size");
if (pageSizeSelect) pageSizeSelect.value = String(pageSize);
(document.querySelector("#prev") as HTMLButtonElement).disabled = page <= 1;
(document.querySelector("#next") as HTMLButtonElement).disabled = page * pageSize >= total;
const tbody = document.querySelector<HTMLTableSectionElement>("#captures-body")!;
tbody.innerHTML = captures.length ? captures.map(captureRow).join("") : `<tr><td colspan="5" class="empty-state"><strong>No captures yet</strong><span>Submit a public ChatGPT share above to get started.</span></td></tr>`;
bindRowEvents(tbody);
document.querySelector("#table-summary")!.textContent = `${total} ${total === 1 ? "capture" : "captures"}${isAdmin ? " across all users" : " in this browser"}`;
document.querySelector("#page-label")!.textContent = `Page ${page} of ${totalPages}`;
const size = document.querySelector<HTMLSelectElement>("#page-size");
if (size) size.value = String(pageSize);
(document.querySelector("#prev") as HTMLButtonElement).disabled = page <= 1;
(document.querySelector("#next") as HTMLButtonElement).disabled = page >= totalPages;
if (captures.some((capture) => ["queued", "capturing", "rendering"].includes(capture.status))) startPolling(); if (captures.some((capture) => ["queued", "capturing", "rendering"].includes(capture.status))) startPolling();
} }
function startPolling() { function captureRow(capture: Capture): string {
const title = capture.title || capture.slug || capture.sourceUrl;
const link = captureUrl(capture);
return `<tr>
<td><div class="title-cell">${escapeHtml(title)}</div><div class="sub">${escapeHtml(capture.slug || capture.id)}</div>${capture.errorPublic ? `<div class="error">${escapeHtml(capture.errorPublic)}</div>` : ""}</td>
<td><span class="pill ${capture.status}">${capture.status}</span></td>
<td class="date-cell">${escapeHtml(fmt(capture.createdAt))}</td>
<td class="date-cell"><strong>${capture.retentionDays} days</strong><span>${escapeHtml(fmt(capture.expiresAt))}</span></td>
<td><div class="row-actions">${link ? `<button class="small" data-copy="${escapeHtml(link)}">Copy</button><a class="small link" href="${escapeHtml(link)}" target="_blank" rel="noreferrer">Open</a>` : ""}${capture.status === "failed" ? `<button class="small" data-retry="${capture.id}">Retry</button>` : ""}<button class="small danger" data-delete="${capture.id}">Delete</button></div></td>
</tr>`;
}
function bindRowEvents(tbody: HTMLTableSectionElement): void {
tbody.querySelectorAll<HTMLButtonElement>("[data-copy]").forEach((button) => button.addEventListener("click", async () => {
try { await copy(button.dataset.copy || ""); showToast("Link copied"); } catch { showToast("Copy failed"); }
}));
tbody.querySelectorAll<HTMLButtonElement>("[data-retry]").forEach((button) => button.addEventListener("click", async () => {
const response = await api(`/captures/${button.dataset.retry}/retry`, { method: "POST" });
if (!response.ok) return showToast("Retry failed");
await loadCaptures(); startPolling(); showToast("Retry queued");
}));
tbody.querySelectorAll<HTMLButtonElement>("[data-delete]").forEach((button) => button.addEventListener("click", async () => {
if (!confirm("Delete this capture and its files?")) return;
const response = await api(`/captures/${button.dataset.delete}`, { method: "DELETE" });
if (!response.ok) return showToast("Delete failed");
await loadCaptures(); showToast("Capture deleted");
}));
}
function startPolling(): void {
if (polling) return; if (polling) return;
polling = window.setInterval(async () => { polling = window.setInterval(async () => {
await loadCaptures(); await loadCaptures();
const active = [...document.querySelectorAll(".pill")].some((pill) => ["queued", "capturing", "rendering"].includes(pill.textContent || "")); const active = [...document.querySelectorAll(".pill")].some((pill) => ["queued", "capturing", "rendering"].includes(pill.textContent || ""));
if (!active && polling) { if (!active && polling) { window.clearInterval(polling); polling = undefined; }
window.clearInterval(polling);
polling = undefined;
}
}, 3000); }, 3000);
} }
function escapeHtml(value: string) {
return value
.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;");
}
initTheme(); initTheme();
renderShell(); renderShell();
void loadCaptures(); void validateAdminKey(localStorage.getItem(tokenKey) || "", true);
client/src/styles.css
+102 -95
View File
@@ -1,120 +1,127 @@
:root { :root {
color-scheme: light dark; color-scheme: light dark;
--bg: #f6f7f9; --bg: #f4f5f7;
--panel: #ffffff; --panel: #ffffff;
--text: #1f2328; --panel-soft: #f8f9fa;
--muted: #6b7280; --text: #17191c;
--border: #d9dee7; --muted: #69717d;
--accent: #0f766e; --border: #dfe3e8;
--accent: #0b7a65;
--accent-hover: #096b59;
--accent-soft: #e5f5f0;
--danger: #b42318; --danger: #b42318;
--toast-bg: #ffffff; --danger-soft: #fff0ee;
--toast-text: #1f2328; --warning: #9a6700;
--shadow: rgb(15 23 42 / 14%); --shadow: rgb(24 29 36 / 8%);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Arial, sans-serif; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Arial, sans-serif;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--bg: #18181b; --bg: #171819; --panel: #222426; --panel-soft: #292c2f; --text: #f0f2f3; --muted: #a5abb3; --border: #3b3f44;
--panel: #242428; --accent: #28b995; --accent-hover: #34caa4; --accent-soft: #173c34; --danger: #ff8177; --danger-soft: #442724; --warning: #e9b949; --shadow: rgb(0 0 0 / 28%);
--text: #f4f4f5;
--muted: #a1a1aa;
--border: #3f3f46;
--accent: #14b8a6;
--danger: #f87171;
--toast-bg: #2f2f33;
--toast-text: #f4f4f5;
--shadow: rgb(0 0 0 / 34%);
} }
} }
html[data-theme="light"] { html[data-theme="light"] { color-scheme: light; --bg: #f4f5f7; --panel: #fff; --panel-soft: #f8f9fa; --text: #17191c; --muted: #69717d; --border: #dfe3e8; --accent: #0b7a65; --accent-hover: #096b59; --accent-soft: #e5f5f0; --danger: #b42318; --danger-soft: #fff0ee; --warning: #9a6700; --shadow: rgb(24 29 36 / 8%); }
color-scheme: light; html[data-theme="dark"] { color-scheme: dark; --bg: #171819; --panel: #222426; --panel-soft: #292c2f; --text: #f0f2f3; --muted: #a5abb3; --border: #3b3f44; --accent: #28b995; --accent-hover: #34caa4; --accent-soft: #173c34; --danger: #ff8177; --danger-soft: #442724; --warning: #e9b949; --shadow: rgb(0 0 0 / 28%); }
--bg: #f6f7f9;
--panel: #ffffff;
--text: #1f2328;
--muted: #6b7280;
--border: #d9dee7;
--accent: #0f766e;
--danger: #b42318;
--toast-bg: #ffffff;
--toast-text: #1f2328;
--shadow: rgb(15 23 42 / 14%);
}
html[data-theme="dark"] {
color-scheme: dark;
--bg: #18181b;
--panel: #242428;
--text: #f4f4f5;
--muted: #a1a1aa;
--border: #3f3f46;
--accent: #14b8a6;
--danger: #f87171;
--toast-bg: #2f2f33;
--toast-text: #f4f4f5;
--shadow: rgb(0 0 0 / 34%);
}
* { box-sizing: border-box; } * { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-size: 15px; } html { min-height: 100%; background: var(--bg); }
body { min-width: 320px; margin: 0; background: var(--bg); color: var(--text); font-size: 15px; }
button, input, select { font: inherit; } button, input, select { font: inherit; }
body, .panel, input, select, button, .small.link, .table-wrap, th, td, .pill { transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease; } body, .navbar, .panel, input, select, button, .small.link, .table-wrap, th, td, .pill, .admin-badge { transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease, box-shadow 220ms ease; }
.shell { max-width: 1120px; margin: 0 auto; padding: 28px 20px 48px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.header { display: flex; justify-content: space-between; gap: 20px; align-items: start; margin-bottom: 22px; }
.header-actions { display: flex; align-items: center; gap: 8px; } .navbar { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter: blur(14px); }
.nav-inner { width: min(1180px, 100%); min-height: 64px; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-size: 17px; font-weight: 720; text-decoration: none; letter-spacing: -.01em; }
.brand-mark { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--text); color: var(--panel); font-size: 15px; }
.nav-actions { display: flex; align-items: center; gap: 9px; }
.admin-key-field { position: relative; display: block; }
.admin-key-field input { width: 184px; height: 38px; padding: 8px 32px 8px 11px; }
.key-state { position: absolute; right: 11px; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); transform: translateY(-50%); opacity: 0; }
.key-state[data-invalid="true"] { background: var(--danger); opacity: 1; }
.shell { width: min(1180px, 100%); margin: 0 auto; padding: 48px 24px 64px; }
.intro { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 24px; }
.eyebrow { margin: 0 0 7px; color: var(--accent); font-size: 12px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
h1, h2, p { margin: 0; } h1, h2, p { margin: 0; }
h1 { font-size: 30px; line-height: 1.15; letter-spacing: 0; } h1 { font-size: clamp(32px, 5vw, 48px); line-height: 1.06; letter-spacing: -.035em; }
h2 { font-size: 18px; } h2 { font-size: 18px; letter-spacing: -.01em; }
.header p, .sub, .status-line { color: var(--muted); margin-top: 6px; } .intro div > p:last-child { max-width: 660px; margin-top: 10px; color: var(--muted); font-size: 16px; line-height: 1.55; }
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 18px; margin-bottom: 18px; } .admin-badge { align-self: center; border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border)); border-radius: 999px; padding: 6px 11px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 700; }
.row, .capture-form, .table-head, .actions, .pager { display: flex; gap: 10px; align-items: end; }
.capture-form { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(160px, 260px) auto; } .panel { margin-bottom: 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); box-shadow: 0 8px 30px var(--shadow); }
label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; } .capture-panel { padding: 18px; }
input, select { min-height: 40px; border: 1px solid var(--border); border-radius: 7px; padding: 8px 10px; background: var(--panel); color: var(--text); } .capture-form { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(150px, 220px) 130px auto; gap: 12px; align-items: end; }
input { width: 100%; } .capture-form:not(:has(.slug-field)) { grid-template-columns: minmax(300px, 1fr) 130px auto; }
button, .small.link { min-height: 38px; border: 1px solid var(--border); border-radius: 7px; padding: 8px 12px; background: var(--panel); color: var(--text); text-decoration: none; cursor: pointer; white-space: nowrap; } label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 650; }
button:disabled { cursor: not-allowed; opacity: 0.42; } input, select { width: 100%; min-height: 42px; border: 1px solid var(--border); border-radius: 8px; padding: 8px 11px; outline: 0; background: var(--panel); color: var(--text); }
button[type="submit"] { background: var(--accent); border-color: var(--accent); color: white; } input::placeholder { color: color-mix(in srgb, var(--muted) 72%, transparent); }
input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
button, .small.link { min-height: 38px; border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; background: var(--panel); color: var(--text); text-decoration: none; cursor: pointer; white-space: nowrap; }
button:hover, .small.link:hover { background: var(--panel-soft); }
button:disabled { cursor: not-allowed; opacity: .42; }
.primary { min-height: 42px; border-color: var(--accent); background: var(--accent); color: #fff; font-weight: 700; }
.primary:hover { border-color: var(--accent-hover); background: var(--accent-hover); }
.danger { color: var(--danger); } .danger { color: var(--danger); }
.icon-button { min-height: 34px; } .status-line { min-height: 18px; margin-top: 10px; color: var(--muted); font-size: 13px; }
.theme-toggle { width: 38px; min-height: 38px; padding: 8px; display: inline-flex; align-items: center; justify-content: center; } .icon-button { width: 38px; min-width: 38px; min-height: 38px; padding: 8px; display: inline-flex; align-items: center; justify-content: center; }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .icon-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .moon-icon { display: none; } .theme-toggle .moon-icon { display: none; }
html[data-theme="dark"] .theme-toggle .sun-icon { display: none; } html[data-theme="dark"] .theme-toggle .sun-icon { display: none; }
html[data-theme="dark"] .theme-toggle .moon-icon { display: block; } html[data-theme="dark"] .theme-toggle .moon-icon { display: block; }
.table-head { justify-content: space-between; align-items: center; margin-bottom: 12px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; } .table-panel { padding: 18px; }
table { width: 100%; border-collapse: collapse; min-width: 760px; } .table-head { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 14px; }
th, td { text-align: left; padding: 12px; border-bottom: 1px solid var(--border); vertical-align: top; } .table-summary { margin-top: 4px; color: var(--muted); font-size: 13px; }
th { font-size: 12px; color: var(--muted); font-weight: 650; } .actions { display: flex; align-items: center; gap: 8px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 9px; }
table { width: 100%; min-width: 900px; border-collapse: collapse; }
th, td { padding: 13px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
th { background: var(--panel-soft); color: var(--muted); font-size: 11px; font-weight: 750; letter-spacing: .045em; text-transform: uppercase; }
tr:last-child td { border-bottom: 0; } tr:last-child td { border-bottom: 0; }
.title-cell { font-weight: 650; max-width: 420px; overflow-wrap: anywhere; } .title-cell { max-width: 390px; font-weight: 680; overflow-wrap: anywhere; }
.error { color: var(--danger); margin-top: 6px; max-width: 520px; } .sub { margin-top: 4px; color: var(--muted); font-size: 12px; }
.pill { display: inline-flex; align-items: center; min-height: 26px; border-radius: 999px; padding: 3px 9px; font-size: 12px; border: 1px solid var(--border); } .error { max-width: 480px; margin-top: 6px; color: var(--danger); font-size: 13px; }
.pill.ready { color: var(--accent); } .date-cell { color: var(--muted); font-size: 13px; white-space: nowrap; }
.pill.failed { color: var(--danger); } .date-cell strong { display: block; color: var(--text); font-weight: 650; }
.pill.queued, .pill.capturing, .pill.rendering { color: #b7791f; } .date-cell span { display: block; margin-top: 3px; font-size: 11px; }
.small { min-height: 32px; padding: 6px 9px; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; } .pill { display: inline-flex; min-height: 25px; align-items: center; border: 1px solid var(--border); border-radius: 999px; padding: 3px 9px; font-size: 11px; font-weight: 700; text-transform: capitalize; }
.row-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; width: 100%; white-space: nowrap; } .pill.ready { border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); background: var(--accent-soft); color: var(--accent); }
.row-actions .small { min-width: 58px; min-height: 32px; padding: 6px 9px; } .pill.failed { background: var(--danger-soft); color: var(--danger); }
.row-actions .danger { min-width: 66px; } .pill.queued, .pill.capturing, .pill.rendering { color: var(--warning); }
.pager { justify-content: flex-end; align-items: center; margin-top: 12px; color: var(--muted); } .small { min-height: 30px; padding: 5px 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.pager-button { width: 38px; min-height: 36px; padding: 6px 10px; } .row-actions { display: flex; justify-content: flex-end; align-items: center; gap: 6px; white-space: nowrap; }
.page-label { display: inline-flex; align-items: center; justify-content: center; min-width: 58px; font-variant-numeric: tabular-nums; color: var(--text); } .empty-state { padding: 42px 20px; color: var(--muted); text-align: center; }
.empty-state strong, .empty-state span { display: block; }
.empty-state strong { margin-bottom: 5px; color: var(--text); font-size: 15px; }
.pager { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 14px; }
.page-label { margin-right: 4px; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.pager select { width: auto; min-height: 36px; padding: 6px 30px 6px 10px; } .pager select { width: auto; min-height: 36px; padding: 6px 30px 6px 10px; }
.toast { position: fixed; left: 50%; bottom: 22px; z-index: 50; transform: translate(-50%, 12px); padding: 9px 13px; border: 1px solid var(--border); border-radius: 8px; background: var(--toast-bg); color: var(--toast-text); box-shadow: 0 10px 28px var(--shadow); opacity: 0; pointer-events: none; transition: opacity 160ms ease, transform 160ms ease; } .pager-button { width: 38px; min-height: 36px; padding: 6px; }
.toast { position: fixed; left: 50%; bottom: 22px; z-index: 50; max-width: calc(100vw - 32px); transform: translate(-50%, 12px); border: 1px solid var(--border); border-radius: 9px; padding: 9px 13px; background: var(--panel); color: var(--text); box-shadow: 0 12px 32px var(--shadow); opacity: 0; pointer-events: none; transition: opacity 160ms ease, transform 160ms ease; }
.toast[data-visible="true"] { opacity: 1; transform: translate(-50%, 0); } .toast[data-visible="true"] { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 760px) { @media (max-width: 820px) {
.shell { padding: 20px 14px 36px; } .nav-inner { padding: 10px 16px; }
.header, .table-head, .actions { align-items: stretch; flex-direction: column; } .brand span:last-child { display: none; }
.header-actions { align-self: flex-end; } .admin-key-field input { width: min(42vw, 184px); }
.capture-form { grid-template-columns: 1fr; } .shell { padding: 34px 16px 48px; }
button { width: 100%; } .intro { align-items: flex-start; }
.theme-toggle { width: 38px; } .capture-form, .capture-form:not(:has(.slug-field)) { grid-template-columns: 1fr 130px; }
.row-actions { justify-content: flex-start; flex-wrap: wrap; } .url-field, .slug-field { grid-column: 1 / -1; }
.row-actions .small, .pager button, .pager select { width: auto; } .primary { width: 100%; }
.pager { flex-direction: row; justify-content: flex-end; align-items: center; } }
.toast { width: max-content; max-width: calc(100vw - 28px); text-align: center; }
@media (max-width: 520px) {
.intro { display: block; }
.admin-badge { display: inline-flex; margin-top: 14px; }
.capture-form, .capture-form:not(:has(.slug-field)) { grid-template-columns: 1fr; }
.url-field, .slug-field { grid-column: auto; }
.table-head { align-items: flex-start; }
.table-panel, .capture-panel { padding: 14px; }
.pager { justify-content: space-between; flex-wrap: wrap; }
.page-label { width: 100%; }
} }
src/db.ts
+48 -7
View File
@@ -7,6 +7,8 @@ export interface CaptureInsert {
id: string; id: string;
sourceUrl: string; sourceUrl: string;
requestedSlug: string | null; requestedSlug: string | null;
ownerToken: string | null;
retentionDays: number;
} }
export class Store { export class Store {
@@ -42,17 +44,43 @@ export class Store {
CREATE INDEX IF NOT EXISTS idx_captures_status ON captures(status); CREATE INDEX IF NOT EXISTS idx_captures_status ON captures(status);
CREATE INDEX IF NOT EXISTS idx_captures_created_at ON captures(created_at); CREATE INDEX IF NOT EXISTS idx_captures_created_at ON captures(created_at);
`); `);
const columns = new Set(
(this.db.prepare("PRAGMA table_info(captures)").all() as Array<{ name: string }>).map((column) => column.name)
);
if (!columns.has("owner_token")) this.db.exec("ALTER TABLE captures ADD COLUMN owner_token TEXT");
if (!columns.has("retention_days")) this.db.exec("ALTER TABLE captures ADD COLUMN retention_days INTEGER NOT NULL DEFAULT 30");
if (!columns.has("expires_at")) this.db.exec("ALTER TABLE captures ADD COLUMN expires_at TEXT");
const missingExpiry = this.db.prepare("SELECT id, created_at, retention_days FROM captures WHERE expires_at IS NULL").all() as Array<{
id: string;
created_at: string;
retention_days: number;
}>;
const setExpiry = this.db.prepare("UPDATE captures SET expires_at = ? WHERE id = ?");
const backfillExpiry = this.db.transaction(() => {
for (const row of missingExpiry) {
const expiresAt = new Date(new Date(row.created_at).getTime() + row.retention_days * 86_400_000).toISOString();
setExpiry.run(expiresAt, row.id);
}
});
backfillExpiry();
this.db.exec(`
CREATE INDEX IF NOT EXISTS idx_captures_owner_created ON captures(owner_token, created_at);
CREATE INDEX IF NOT EXISTS idx_captures_expires_at ON captures(expires_at);
`);
} }
createCapture(input: CaptureInsert): CaptureRow { createCapture(input: CaptureInsert): CaptureRow {
const now = new Date().toISOString(); const now = new Date().toISOString();
const expiresAt = new Date(Date.now() + input.retentionDays * 86_400_000).toISOString();
this.db this.db
.prepare( .prepare(
`INSERT INTO captures `INSERT INTO captures
(id, source_url, provider, requested_slug, status, created_at, updated_at) (id, source_url, provider, requested_slug, status, created_at, updated_at, owner_token, retention_days, expires_at)
VALUES (?, ?, 'chatgpt', ?, 'queued', ?, ?)` VALUES (?, ?, 'chatgpt', ?, 'queued', ?, ?, ?, ?, ?)`
) )
.run(input.id, input.sourceUrl, input.requestedSlug, now, now); .run(input.id, input.sourceUrl, input.requestedSlug, now, now, input.ownerToken, input.retentionDays, expiresAt);
return this.getCapture(input.id)!; return this.getCapture(input.id)!;
} }
@@ -65,15 +93,28 @@ export class Store {
} }
listCaptures(page: number, pageSize: number): { rows: CaptureRow[]; total: number } { listCaptures(page: number, pageSize: number): { rows: CaptureRow[]; total: number } {
return this.listCapturesWhere(page, pageSize);
}
listCapturesForOwner(ownerToken: string, page: number, pageSize: number): { rows: CaptureRow[]; total: number } {
return this.listCapturesWhere(page, pageSize, ownerToken);
}
private listCapturesWhere(page: number, pageSize: number, ownerToken?: string): { rows: CaptureRow[]; total: number } {
const limit = Math.min(Math.max(pageSize, 1), 100); const limit = Math.min(Math.max(pageSize, 1), 100);
const offset = Math.max(page - 1, 0) * limit; const offset = Math.max(page - 1, 0) * limit;
const rows = this.db const where = ownerToken === undefined ? "" : " WHERE owner_token = ?";
.prepare("SELECT * FROM captures ORDER BY created_at DESC LIMIT ? OFFSET ?") const params = ownerToken === undefined ? [limit, offset] : [ownerToken, limit, offset];
.all(limit, offset) as CaptureRow[]; const rows = this.db.prepare(`SELECT * FROM captures${where} ORDER BY created_at DESC LIMIT ? OFFSET ?`).all(...params) as CaptureRow[];
const total = (this.db.prepare("SELECT count(*) as count FROM captures").get() as { count: number }).count; const countParams = ownerToken === undefined ? [] : [ownerToken];
const total = (this.db.prepare(`SELECT count(*) as count FROM captures${where}`).get(...countParams) as { count: number }).count;
return { rows, total }; return { rows, total };
} }
expiredCaptures(now = new Date().toISOString()): CaptureRow[] {
return this.db.prepare("SELECT * FROM captures WHERE expires_at <= ?").all(now) as CaptureRow[];
}
queuedCaptures(): CaptureRow[] { queuedCaptures(): CaptureRow[] {
return this.db return this.db
.prepare("SELECT * FROM captures WHERE status IN ('queued', 'capturing', 'rendering') ORDER BY created_at ASC") .prepare("SELECT * FROM captures WHERE status IN ('queued', 'capturing', 'rendering') ORDER BY created_at ASC")
src/server.ts
+93 -19
View File
@@ -1,4 +1,5 @@
import path from "node:path"; import path from "node:path";
import crypto from "node:crypto";
import express, { type NextFunction, type Request, type Response } from "express"; import express, { type NextFunction, type Request, type Response } from "express";
import fs from "fs-extra"; import fs from "fs-extra";
import { config } from "./config.js"; import { config } from "./config.js";
@@ -19,6 +20,8 @@ import {
} from "./artifacts.js"; } from "./artifacts.js";
const app = express(); const app = express();
const retentionOptions = new Set([3, 7, 10, 30]);
const ownerCookieName = "aishare_owner";
app.disable("x-powered-by"); app.disable("x-powered-by");
app.enable("strict routing"); app.enable("strict routing");
@@ -48,6 +51,45 @@ function requireAdmin(req: Request, res: Response, next: NextFunction): void {
res.status(401).json({ error: "Admin token required." }); res.status(401).json({ error: "Admin token required." });
} }
function isAdminRequest(req: Request): boolean {
const header = req.header("authorization") || "";
const token = header.startsWith("Bearer ") ? header.slice("Bearer ".length) : req.header("x-admin-token");
return Boolean(config.adminToken && token && token === config.adminToken);
}
function cookieValue(req: Request, name: string): string | undefined {
const cookie = req.header("cookie") || "";
for (const part of cookie.split(";")) {
const [key, ...value] = part.trim().split("=");
if (key === name) return decodeURIComponent(value.join("="));
}
return undefined;
}
app.use((req, res, next) => {
let ownerToken = cookieValue(req, ownerCookieName);
if (!ownerToken || !/^[A-Za-z0-9_-]{32,128}$/.test(ownerToken)) {
ownerToken = crypto.randomBytes(32).toString("base64url");
const cookiePath = config.basePath || "/";
const secure = req.secure || req.header("x-forwarded-proto") === "https";
res.cookie(ownerCookieName, ownerToken, {
httpOnly: true,
sameSite: "lax",
secure,
path: cookiePath,
maxAge: 365 * 24 * 60 * 60 * 1000
});
}
(req as Request & { ownerToken?: string }).ownerToken = ownerToken;
res.locals.ownerToken = ownerToken;
next();
});
function canManageCapture(req: Request, row: NonNullable<ReturnType<typeof store.getCapture>>): boolean {
const ownerToken = (req as Request & { ownerToken?: string }).ownerToken;
return isAdminRequest(req) || Boolean(row.owner_token && row.owner_token === ownerToken);
}
function publicCapture(row: ReturnType<typeof store.getCapture>) { function publicCapture(row: ReturnType<typeof store.getCapture>) {
if (!row) return null; if (!row) return null;
return { return {
@@ -61,6 +103,8 @@ function publicCapture(row: ReturnType<typeof store.getCapture>) {
createdAt: row.created_at, createdAt: row.created_at,
updatedAt: row.updated_at, updatedAt: row.updated_at,
capturedAt: row.captured_at, capturedAt: row.captured_at,
retentionDays: row.retention_days,
expiresAt: row.expires_at,
publicUrl: row.slug ? publicPath(row.slug) : null publicUrl: row.slug ? publicPath(row.slug) : null
}; };
} }
@@ -80,18 +124,35 @@ app.use(route("/assets"), express.static(path.resolve("dist-client/assets"), { i
app.use(route("/admin-assets"), express.static(path.resolve("dist-client"), { immutable: true, maxAge: "1y" })); app.use(route("/admin-assets"), express.static(path.resolve("dist-client"), { immutable: true, maxAge: "1y" }));
app.get(route("/admin"), (_req, res) => { app.get(route("/admin"), (_req, res) => {
res.sendFile(path.resolve("dist-client/index.html")); res.redirect(302, route() || "/");
}); });
function sendApp(_req: Request, res: Response): void {
res.sendFile(path.resolve("dist-client/index.html"));
}
app.get(route("/api/health"), (_req, res) => { app.get(route("/api/health"), (_req, res) => {
res.json({ ok: true }); res.json({ ok: true });
}); });
app.post(route("/api/captures"), requireAdmin, (req, res) => { app.get(route("/api/session"), (req, res) => {
res.json({ isAdmin: isAdminRequest(req) });
});
app.post(route("/api/captures"), (req, res) => {
try { try {
const sourceUrl = validateChatGptShareUrl(String(req.body?.sourceUrl || "")); const sourceUrl = validateChatGptShareUrl(String(req.body?.sourceUrl || ""));
const requestedSlug = req.body?.slug ? slugify(String(req.body.slug)) : null; const admin = isAdminRequest(req);
const row = store.createCapture({ id: newCaptureId(), sourceUrl, requestedSlug }); const requestedSlug = admin && req.body?.slug ? slugify(String(req.body.slug)) : null;
const retentionDays = Number(req.body?.retentionDays ?? 3);
if (!retentionOptions.has(retentionDays)) throw new Error("Retention must be 3, 7, 10, or 30 days.");
const row = store.createCapture({
id: newCaptureId(),
sourceUrl,
requestedSlug,
ownerToken: admin ? null : String(res.locals.ownerToken),
retentionDays
});
captureQueue.enqueue(row.id); captureQueue.enqueue(row.id);
res.status(202).json({ capture: publicCapture(row) }); res.status(202).json({ capture: publicCapture(row) });
} catch (error) { } catch (error) {
@@ -99,30 +160,32 @@ app.post(route("/api/captures"), requireAdmin, (req, res) => {
} }
}); });
app.get(route("/api/captures"), requireAdmin, (req, res) => { app.get(route("/api/captures"), (req, res) => {
const page = Number.parseInt(String(req.query.page || "1"), 10); const page = Number.parseInt(String(req.query.page || "1"), 10);
const pageSize = Number.parseInt(String(req.query.pageSize || "20"), 10); const pageSize = Number.parseInt(String(req.query.pageSize || "20"), 10);
const result = store.listCaptures(page, pageSize); const admin = isAdminRequest(req);
const result = admin ? store.listCaptures(page, pageSize) : store.listCapturesForOwner(String(res.locals.ownerToken), page, pageSize);
res.json({ res.json({
page, page,
pageSize, pageSize,
total: result.total, total: result.total,
isAdmin: admin,
captures: result.rows.map(publicCapture) captures: result.rows.map(publicCapture)
}); });
}); });
app.get(route("/api/captures/:id"), requireAdmin, (req, res) => { app.get(route("/api/captures/:id"), (req, res) => {
const row = store.getCapture(req.params.id); const row = store.getCapture(req.params.id);
if (!row) { if (!row || !canManageCapture(req, row)) {
res.status(404).json({ error: "Capture not found." }); res.status(404).json({ error: "Capture not found." });
return; return;
} }
res.json({ capture: publicCapture(row), errorDetail: row.error_detail, metadata: row.metadata_json ? JSON.parse(row.metadata_json) : null }); res.json({ capture: publicCapture(row), errorDetail: row.error_detail, metadata: row.metadata_json ? JSON.parse(row.metadata_json) : null });
}); });
app.post(route("/api/captures/:id/retry"), requireAdmin, (req, res) => { app.post(route("/api/captures/:id/retry"), (req, res) => {
const row = store.getCapture(req.params.id); const row = store.getCapture(req.params.id);
if (!row) { if (!row || !canManageCapture(req, row)) {
res.status(404).json({ error: "Capture not found." }); res.status(404).json({ error: "Capture not found." });
return; return;
} }
@@ -135,12 +198,13 @@ app.post(route("/api/captures/:id/retry"), requireAdmin, (req, res) => {
res.json({ capture: publicCapture(store.getCapture(row.id)) }); res.json({ capture: publicCapture(store.getCapture(row.id)) });
}); });
app.delete(route("/api/captures/:id"), requireAdmin, async (req, res) => { app.delete(route("/api/captures/:id"), async (req, res) => {
const row = store.deleteCapture(req.params.id); const existing = store.getCapture(req.params.id);
if (!row) { if (!existing || !canManageCapture(req, existing)) {
res.status(404).json({ error: "Capture not found." }); res.status(404).json({ error: "Capture not found." });
return; return;
} }
const row = store.deleteCapture(req.params.id)!;
await deleteArtifactsFor(row); await deleteArtifactsFor(row);
res.json({ ok: true }); res.json({ ok: true });
}); });
@@ -232,14 +296,13 @@ app.get(route("/:slug"), (req, res) => {
res.redirect(308, `${req.originalUrl.replace(/[?#].*$/, "")}/`); res.redirect(308, `${req.originalUrl.replace(/[?#].*$/, "")}/`);
}); });
app.get(route(), (_req, res) => {
res.redirect(301, route("/admin"));
});
if (config.basePath) { if (config.basePath) {
app.get(route("/"), (_req, res) => { app.get(route(), (_req, res) => {
res.redirect(301, route("/admin")); res.redirect(308, route("/"));
}); });
app.get(route("/"), sendApp);
} else {
app.get("/", sendApp);
} }
app.use((error: unknown, _req: Request, res: Response, _next: NextFunction) => { app.use((error: unknown, _req: Request, res: Response, _next: NextFunction) => {
@@ -250,7 +313,18 @@ app.use((error: unknown, _req: Request, res: Response, _next: NextFunction) => {
await fs.ensureDir(config.htmlDir); await fs.ensureDir(config.htmlDir);
await fs.ensureDir(config.screenshotDir); await fs.ensureDir(config.screenshotDir);
await fs.ensureDir(config.cacheDir); await fs.ensureDir(config.cacheDir);
async function deleteExpiredCaptures(): Promise<void> {
for (const row of store.expiredCaptures()) {
const deleted = store.deleteCapture(row.id);
if (deleted) await deleteArtifactsFor(deleted);
}
}
await deleteExpiredCaptures();
captureQueue.restorePending(); captureQueue.restorePending();
setInterval(() => {
void deleteExpiredCaptures().catch((error) => console.error("Failed to delete expired captures", error));
}, 60 * 60 * 1000).unref();
app.listen(config.port, "0.0.0.0", () => { app.listen(config.port, "0.0.0.0", () => {
console.log(`aishare listening on 0.0.0.0:${config.port}`); console.log(`aishare listening on 0.0.0.0:${config.port}`);
src/types.ts
+3
View File
@@ -15,6 +15,9 @@ export interface CaptureRow {
created_at: string; created_at: string;
updated_at: string; updated_at: string;
captured_at: string | null; captured_at: string | null;
owner_token: string | null;
retention_days: number;
expires_at: string;
} }
export interface NormalizedConversation { export interface NormalizedConversation {