/* ===========================================================
indie.chat — React app
=========================================================== */
const { useState, useEffect, useRef, useCallback } = React;
const L = window.IndieLib;
/* Translate. An arrow rather than a bound reference, so it always reads the
CURRENT locale — switching languages re-renders the tree and every t() call
picks up the new catalogue without anything being re-imported. */
const t = (k, v) => L.t(k, v);
const tb = (k, v) => L.tb(k, v);
/* ---------- icons ---------- */
const SendIcon = () => (
);
const MenuIcon = () => (
);
const ClipIcon = () => (
);
const SearchIcon = () => (
);
const ShieldIcon = () => (
);
const MicIcon = () => (
);
const DownloadIcon = () => (
);
const BookIcon = () => (
);
const ToolsIcon = () => (
);
const FileGenIcon = () => (
);
const PlusIcon = () => (
);
const BotIcon = () => (
);
const BellIcon = () => (
);
const ClockIcon = () => (
);
const HelpIcon = () => (
);
const GearIcon = () => (
);
const FilesIcon = () => (
);
const RefreshIcon = () => (
);
const LockIcon = ({ open }) => (
);
/* Brand wordmark — reads the (white-labelable) brand name; colors the first dot
with the accent, so "indie.chat" keeps its look and "acme.ai" gets one too. */
function BrandName() {
const n = (L.BRAND && L.BRAND.brandName) || "indie.chat";
/* Accent the separator AND everything after it, and accept ':' as well as
'.', so "indie.chat" keeps its look while "acme:agents" gets the same
treatment instead of rendering flat. (From the crefo deployment.) */
const i = n.search(/[.:]/);
if (i < 0) return n;
return <>{n.slice(0, i)}{n.slice(i)};
}
/* ========================================================
ORIGIN UNREACHABLE
The last resort, NOT the first response. When the origin cannot be reached
the app first asks for an uncached navigation (see `forceNetworkReload`), so
the browser makes a real request and shows its own certificate or connection
dialog — which explains the problem, and offers the way through it, far
better than anything we could write here.
This screen is what is left when that cannot help: the reload has already
been used this tab, or the browser says it has no network at all (in which
case the cached app is the point and is left alone). One sentence and a
button; the detail belongs in the operator's README.
======================================================== */
function UnreachableScreen({ offline, onRetry, retrying }) {
return (
);
}
/* Shown for the moment between deciding to reload and the reload happening.
Deliberately says nothing about why: the browser is about to. */
function ReloadingScreen() {
return (
{t("offline.reloading")}
);
}
/* ========================================================
LOGIN SCREEN
======================================================== */
function LoginScreen({ onLogin }) {
const [tab, setTab] = useState("login");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [name, setName] = useState("");
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const [notice, setNotice] = useState(null);
const [reloading, setReloading] = useState(false);
/* Explicitly hand the credential to the browser's password manager. The form
submits via fetch (no navigation), so Chrome/Edge's save heuristic doesn't
fire on its own; the Credential Management API triggers the save prompt.
Safari/Firefox fall back to the autocomplete attributes on submit. */
const saveCredential = async (id, pass, nm) => {
try {
if (window.PasswordCredential && window.isSecureContext) {
await navigator.credentials.store(new window.PasswordCredential({ id, password: pass, name: nm || id }));
}
} catch { /* user dismissed, or unsupported — harmless */ }
};
const submit = async e => {
e.preventDefault();
setLoading(true);
setError(null);
setNotice(null);
try {
if (tab === "login") {
const u = await L.Auth.login(email.trim(), password);
await saveCredential(email.trim(), password, u && u.name);
onLogin(u);
} else {
const res = await L.Auth.register(email.trim(), name.trim(), password);
/* Save the new credential now (works whether or not approval is pending). */
await saveCredential(email.trim(), password, name.trim());
if (res && res.pending) {
/* Awaiting admin approval — don't log in; send them back to sign-in. */
setTab("login");
setName(""); setPassword("");
setNotice(res.message || t("auth.pendingApproval"));
} else {
onLogin(res);
}
}
} catch (err) {
/* A request that never reached the server is not a rejected credential —
reporting it as one is what sent people off to reset a working
password. It cannot succeed on a retry either, so hand the problem to
the browser: drop the cached app and reload, and let it show its own
certificate dialog. Only if that is not available do we say anything. */
if (L.isTransportFailure(err) && L.canForceNetworkReload()) {
setReloading(true);
L.forceNetworkReload();
return; /* the page is going away; leave it loading */
}
setError(err.message || t("err.generic"));
} finally {
setLoading(false);
}
};
if (reloading) return ;
return (
{L.BRAND.tagline}
);
}
/* ========================================================
ROUTINES — scheduled prompts (cron) that run on the server
======================================================== */
const DOW = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
function cronToText(cron) {
const f = String(cron || "").trim().split(/\s+/);
if (f.length !== 5) return cron;
const [m, h, dom, mon, dow] = f;
const at = (hh, mm) => (((+hh % 12) || 12) + ":" + String(+mm).padStart(2, "0") + (+hh < 12 ? " AM" : " PM"));
if (cron === "* * * * *") return t("cadence.minute");
if (m === "0" && h === "*" && dom === "*" && mon === "*" && dow === "*") return t("cadence.hourly");
if (/^\*\/\d+$/.test(m) && h === "*") return "Every " + m.slice(2) + " minutes";
if (/^\d+$/.test(m) && /^\d+$/.test(h) && dom === "*" && mon === "*" && dow === "*") return t("cadence.dailyAt") + " " + at(h, m);
if (/^\d+$/.test(m) && /^\d+$/.test(h) && dom === "*" && mon === "*" && dow === "1-5") return t("cadence.weekdaysAt") + " " + at(h, m);
if (/^\d+$/.test(m) && /^\d+$/.test(h) && dom === "*" && mon === "*" && /^\d+$/.test(dow)) return "Every " + DOW[+dow % 7] + " at " + at(h, m);
return cron;
}
/* The inverse: recover the preset + its inputs from a stored cron, so EDITING a
routine opens the same controls that created it instead of dropping the user
into raw cron. Anything we can't recognise stays custom, which is lossless. */
function cronToParts(cron) {
const f = String(cron || "").trim().split(/\s+/);
const out = { kind: "custom", time: "09:00", dow: 1, cron: String(cron || "0 9 * * *") };
if (f.length !== 5) return out;
const [m, h, dom, mon, dw] = f;
const hhmm = () => String(+h).padStart(2, "0") + ":" + String(+m).padStart(2, "0");
if (cron.trim() === "* * * * *") return { ...out, kind: "minute" };
if (m === "0" && h === "*" && dom === "*" && mon === "*" && dw === "*") return { ...out, kind: "hourly" };
if (/^\*\/30$/.test(m) && h === "*" && dom === "*" && mon === "*" && dw === "*") return { ...out, kind: "30min" };
if (/^\d+$/.test(m) && /^\d+$/.test(h) && dom === "*" && mon === "*") {
if (dw === "*") return { ...out, kind: "daily", time: hhmm() };
if (dw === "1-5") return { ...out, kind: "weekdays", time: hhmm() };
if (/^\d+$/.test(dw)) return { ...out, kind: "weekly", time: hhmm(), dow: +dw % 7 };
}
return out;
}
/* ============================================================
ROUTINES — the ONE place scheduled work lives.
A routine is a prompt plus a cadence. It runs in one of two modes:
chat — answers into its own conversation, on a provider + model you pick
agent — runs a full turn on an agent (its workspace, files and tools),
landing in that agent's transcript as a ⏰ turn. An enabled agent
routine is what the sidebar calls a LOOP, and it's what promotes
an agent into the Background tab.
The mode is a field on the routine, not a different feature, so the same
list, the same editor and the same controls cover both — and a routine can
be moved between them without being recreated.
============================================================ */
/* Built per render, not once at load: a const would freeze these labels in
whatever language the page happened to start in. Same for the other
translated lists below. */
const routineCadences = () => [
{ key: "minute", label: t("cadence.minuteTest") },
{ key: "30min", label: t("cadence.halfHour") },
{ key: "hourly", label: t("cadence.hourly") },
{ key: "daily", label: t("cadence.daily") },
{ key: "weekdays", label: t("cadence.weekdays") },
{ key: "weekly", label: t("cadence.weekly") },
{ key: "custom", label: t("cadence.custom") },
];
function RoutinesPanel({ onClose, model, onOpenConv, onOpenAgent, agents, focusAgentId, onChanged }) {
const [routines, setRoutines] = useState(null);
const [err, setErr] = useState(null);
const [busy, setBusy] = useState(false);
const [view, setView] = useState("list"); /* list | editor */
const [editId, setEditId] = useState(null); /* null = creating */
const [filter, setFilter] = useState(focusAgentId ? "agent" : "all");
const [confirmDel, setConfirmDel] = useState(null);
const mcpAvail = L.toolEnabled("mcp");
const skillsAvail = L.enabledSkills().length > 0;
const searchAvail = L.toolEnabled("search");
const provs = L.providersList();
const agentList = agents || [];
/* ---- the editor's form ---- */
const blank = () => ({
title: "", prompt: "",
mode: focusAgentId ? "agent" : "chat",
agentId: focusAgentId || (agentList[0] && agentList[0].id) || "",
provider: L.getProvider() || (provs[0] && provs[0].name),
model: model || "",
kind: "daily", time: "09:00", dow: 1, cron: "0 9 * * *",
tools: false, search: false, notify: true, quiet: "",
});
const [f, setF] = useState(blank);
const set = (k, v) => setF(prev => ({ ...prev, [k]: v }));
const fModels = L.modelsFor(f.provider);
/* Keep the model valid for the chosen provider — and for the chosen MODE.
An agent routine carries no model, so converting one to chat arrives here
with model:"" and must be defaulted, or it would save a chat routine with
no model to answer from. */
useEffect(() => {
if (f.mode !== "chat") return;
const m = L.modelsFor(f.provider);
if (!m.some(x => x.id === f.model)) set("model", (m[0] && m[0].id) || "");
}, [f.provider, f.mode]);
/* ---- push notifications (shared by every routine on this device) ---- */
const [pushState, setPushState] = useState({ supported: false, permission: "default", subscribed: false });
const [pushBusy, setPushBusy] = useState(false);
const refreshPush = () => L.Push.status().then(setPushState).catch(() => {});
useEffect(() => { refreshPush(); }, []);
const enableNotifications = async () => {
setPushBusy(true); setErr(null);
try { await L.Push.enable(); await L.Push.test(); await refreshPush(); }
catch (e) { setErr(String(e.message || e)); }
finally { setPushBusy(false); }
};
const load = () => L.RoutinesAPI.list().then(setRoutines).catch(e => setErr(String(e.message || e)));
useEffect(() => { load(); }, []);
const changed = () => { load(); onChanged && onChanged(); };
const buildCron = () => {
const [hh, mm] = String(f.time || "09:00").split(":");
if (f.kind === "minute") return "* * * * *";
if (f.kind === "30min") return "*/30 * * * *";
if (f.kind === "hourly") return "0 * * * *";
if (f.kind === "daily") return `${+mm} ${+hh} * * *`;
if (f.kind === "weekdays") return `${+mm} ${+hh} * * 1-5`;
if (f.kind === "weekly") return `${+mm} ${+hh} * * ${f.dow}`;
return String(f.cron || "").trim();
};
const openNew = () => { setF(blank()); setEditId(null); setErr(null); setView("editor"); };
const openEdit = r => {
const parts = cronToParts(r.cron);
const ep = provs.find(p => p.name === r.endpoint);
setF({
title: r.title || "", prompt: r.prompt || "",
mode: r.mode || (r.agentId ? "agent" : "chat"),
agentId: r.agentId || focusAgentId || (agentList[0] && agentList[0].id) || "",
provider: (ep && ep.name) || L.getProvider() || (provs[0] && provs[0].name),
model: r.model || "",
kind: parts.kind, time: parts.time, dow: parts.dow, cron: parts.cron,
tools: !!r.mcp, search: !!r.search, notify: r.notify !== false, quiet: r.quiet || "",
});
setEditId(r.id); setErr(null); setView("editor");
};
const save = async () => {
setErr(null);
if (!f.title.trim() || !f.prompt.trim()) { setErr(t("routine.errNeedTitle")); return; }
const cron = buildCron();
if (cron.trim().split(/\s+/).length !== 5) { setErr("A cron expression needs 5 fields: min hour dom mon dow."); return; }
let body = {
title: f.title.trim(), prompt: f.prompt.trim(), cron,
tzOffset: new Date().getTimezoneOffset(), notify: f.notify, redact: "off",
quiet: f.quiet.trim(),
};
if (f.mode === "agent") {
if (!f.agentId) { setErr(t("routine.errNeedAgent")); return; }
/* The agent brings its own model, tools and workspace, so none of the
chat-side config applies — send null to clear it on a converted row. */
body = { ...body, agentId: f.agentId };
} else {
const ep = provs.find(e => e.name === f.provider);
if (!ep || !ep.base) { setErr(t("routine.errNeedProvider")); return; }
if (!f.model) { setErr(t("routine.errNeedModel")); return; }
body = {
...body, agentId: null,
url: ep.base + ep.path, model: f.model, endpoint: ep.name,
mcp: f.tools && mcpAvail, servers: f.tools ? L.enabledMcpServers() : [],
skills: f.tools ? L.enabledSkills() : [],
search: f.search && searchAvail,
};
}
setBusy(true);
try {
if (editId) await L.RoutinesAPI.update(editId, body);
else await L.RoutinesAPI.create({ ...body, enabled: true });
setView("list"); setEditId(null);
changed();
} catch (e) { setErr(String(e.message || e)); }
finally { setBusy(false); }
};
const toggle = async r => { try { await L.RoutinesAPI.update(r.id, { enabled: !r.enabled }); } catch (e) { setErr(String(e.message || e)); } changed(); };
const runNow = async r => { try { await L.RoutinesAPI.runNow(r.id); } catch (e) { setErr(String(e.message || e)); } setTimeout(changed, 1200); };
const del = async r => { try { await L.RoutinesAPI.remove(r.id); } catch (e) { setErr(String(e.message || e)); } setConfirmDel(null); changed(); };
const fmt = ms => ms ? new Date(ms).toLocaleString([], { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" }) : "—";
const agentName = id => { const a = agentList.find(x => x.id === id); return a ? (a.name || "Agent") : "deleted agent"; };
const isAgent = r => (r.mode || (r.agentId ? "agent" : "chat")) === "agent";
const all = routines || [];
const shown = all.filter(r => {
if (focusAgentId && filter === "agent") return r.agentId === focusAgentId;
if (filter === "chat") return !isAgent(r);
if (filter === "agent") return isAgent(r);
return true;
});
const counts = { all: all.length, chat: all.filter(r => !isAgent(r)).length, agent: all.filter(isAgent).length };
/* ---------------- editor ---------------- */
const editor = (
<>