/* ===========================================================
indie.chat — React app
=========================================================== */
const { useState, useEffect, useRef, useCallback } = React;
const L = window.IndieLib;
/* ---------- icons ---------- */
const SendIcon = () => (
);
const MenuIcon = () => (
);
const ClipIcon = () => (
);
const SearchIcon = () => (
);
const ShieldIcon = () => (
);
const MicIcon = () => (
);
const DownloadIcon = () => (
);
const ToolsIcon = () => (
);
const FileGenIcon = () => (
);
const PlusIcon = () => (
);
const BotIcon = () => (
);
const BellIcon = () => (
);
const ClockIcon = () => (
);
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)};
}
/* ========================================================
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);
/* 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 || "Account created — an administrator must approve it before you can sign in.");
} else {
onLogin(res);
}
}
} catch (err) {
setError(err.message || "Something went wrong");
} finally {
setLoading(false);
}
};
return (
);
}
/* ========================================================
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 "Every minute";
if (m === "0" && h === "*" && dom === "*" && mon === "*" && dow === "*") return "Every hour";
if (/^\*\/\d+$/.test(m) && h === "*") return "Every " + m.slice(2) + " minutes";
if (/^\d+$/.test(m) && /^\d+$/.test(h) && dom === "*" && mon === "*" && dow === "*") return "Every day at " + at(h, m);
if (/^\d+$/.test(m) && /^\d+$/.test(h) && dom === "*" && mon === "*" && dow === "1-5") return "Weekdays at " + 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.
============================================================ */
const ROUTINE_CADENCES = [
{ key: "minute", label: "Every minute (testing)" },
{ key: "30min", label: "Every 30 minutes" },
{ key: "hourly", label: "Every hour" },
{ key: "daily", label: "Every day" },
{ key: "weekdays", label: "Weekdays" },
{ key: "weekly", label: "Weekly" },
{ key: "custom", label: "Custom (cron)" },
];
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,
});
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,
});
setEditId(r.id); setErr(null); setView("editor");
};
const save = async () => {
setErr(null);
if (!f.title.trim() || !f.prompt.trim()) { setErr("Give the routine a title and a prompt."); 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",
};
if (f.mode === "agent") {
if (!f.agentId) { setErr("Pick the agent this routine runs on."); 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("Pick a valid provider."); return; }
if (!f.model) { setErr("Pick the model this routine answers with."); 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 = (
<>
set("title", e.target.value)}
placeholder={f.mode === "agent" ? "Inbox duty" : "Morning crypto-reg digest"} />