peter/siftlode
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat!: remove direct messaging (chat)

Browse Source 
E2EE direct messages, the chat dock, the Messages module, the message
WebSocket and its realtime registry, and the messages / message_keys
tables (migration 0097; the downgrade restores the empty schema). Prod
held two welcome notes, no message between people and one key — never
used (owner decision, E34). WebSocket now has no owner module: the lint
bans it everywhere. Privacy policy updated: it no longer promises E2EE
for a feature that is gone.
This commit is contained in:
peter
2026-10-05 00:19:38 +02:00
parent 7f08c510bf
commit cca3315836
71 changed files with 122 additions and 3011 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.tsx
-2
View File
@@ -35,7 +35,6 @@ import BackToTop from "./components/ui/BackToTop";
import PageShell from "./components/ui/PageShell";
import { SkipLink } from "./components/ui/SkipLink";
import { pageTitleKey } from "./lib/pageMeta";
import ChatDock from "./components/ChatDock";
import DebugRecorder from "./components/DebugRecorder";
import Toaster from "./components/ui/Toaster";
import KeyboardHelp from "./components/ui/KeyboardHelp";
@@ -459,7 +458,6 @@ export default function App() {
"take me to X" the same way. Their keys are bound by useGlobalKeymap above. */}
<KeyboardHelp />
<AppCommandPalette />
{me && !me.is_demo && <ChatDock meId={me.id} />}
{/* The debug recorder (E16): its start dialog, and its pill docked under the toasts. */}
{me && !me.is_demo && <DebugRecorder />}
<Suspense fallback={null}>
frontend/src/components/ChatDock.tsx
-131
View File
@@ -1,131 +0,0 @@
import { useEffect } from "react";
import { qk } from "../lib/queryKeys";
import { useTranslation } from "react-i18next";
import { useQueryClient } from "@tanstack/react-query";
import { ChevronDown, ChevronUp, X } from "lucide-react";
import {
closeChat,
initDock,
notifyIncoming,
toggleMinimize,
useDockChats,
type DockChat,
} from "../lib/chatDock";
import { onMessage, onUnread } from "../lib/messagesSocket";
import * as e2ee from "../lib/e2ee";
import { errorAttrs, log } from "../lib/log";
import Avatar from "./ui/Avatar";
import ChatThread from "./ChatThread";
import Overlay from "./ui/Overlay";
import { IconButton } from "./ui/IconButton";
import { Pressable } from "./ui/Pressable";
import { SURFACE } from "./ui/surfaces";
// The Messenger-style floating chat dock: open conversations live here, bottom-right, across
// page navigation (state persisted per user). Always mounted (for human users) so it also owns
// the app-wide live-message subscription and restores this device's unlock state on load.
export default function ChatDock({ meId }: { meId: number }) {
const qc = useQueryClient();
const chats = useDockChats();
// Restore the per-device unlocked key and the persisted dock windows once, app-wide.
useEffect(() => {
initDock(meId);
// The device key store can be unopenable (storage disabled, some private windows): messages then
// stay locked behind the passphrase, as on a new device — said in the log, not thrown at nobody.
e2ee
.loadFromDevice(meId)
.catch((err: unknown) =>
log.warn(
"ui.e2ee_device_key_unreadable",
"the device key store could not be read",
errorAttrs(err),
),
);
}, [meId]);
// Live delivery: refresh the conversation list, unread badge, and the affected thread; and
// for an INCOMING message, open or flash that partner's dock window.
useEffect(
() =>
onMessage(({ message: m, from }) => {
qc.invalidateQueries({ queryKey: qk.conversations() });
qc.invalidateQueries({ queryKey: qk.messageUnread() });
const partnerId = m.sender_id === meId ? m.recipient_id : m.sender_id;
qc.invalidateQueries({ queryKey: qk.thread(partnerId) });
// Auto-open/flash only for messages from someone else (not my own echo) and only for
// real user conversations.
if (m.kind === "user" && m.sender_id !== meId && from) {
notifyIncoming({ id: from.id, name: from.name, avatar_url: from.avatar_url });
}
}),
[qc, meId],
);
// Live badge sync: another tab/device read a thread → refresh this tab's unread count + list.
useEffect(
() =>
onUnread(() => {
qc.invalidateQueries({ queryKey: qk.messageUnread() });
qc.invalidateQueries({ queryKey: qk.conversations() });
}),
[qc],
);
if (chats.length === 0) return null;
return (
<Overlay>
<div className="fixed bottom-0 right-0 z-rail flex flex-row-reverse items-end gap-3 p-4 pointer-events-none">
{chats.map((c) => (
<ChatWindow key={c.partnerId} chat={c} meId={meId} />
))}
</div>
</Overlay>
);
}
function ChatWindow({ chat, meId }: { chat: DockChat; meId: number }) {
const { t } = useTranslation();
return (
<div
className={`${SURFACE.panel} pointer-events-auto relative w-80 max-w-[calc(100vw-2rem)] flex flex-col overflow-hidden`}
>
{/* One-shot attention flash on a new message; keyed by the counter so it replays each time. */}
{chat.flash > 0 && (
<div
key={chat.flash}
className="chat-flash pointer-events-none absolute inset-0 rounded-2xl z-base"
/>
)}
<div className="flex items-center gap-2 px-3 py-2 border-b border-border bg-card/50">
<Pressable
selectable
onClick={() => toggleMinimize(chat.partnerId)}
className="flex items-center gap-2 min-w-0 flex-1"
title={chat.minimized ? t("messages.expand") : t("messages.minimize")}
>
<Avatar
src={chat.avatar}
fallback={chat.name}
className="w-7 h-7 rounded-full shrink-0 text-xs"
/>
<span className="font-semibold text-sm truncate">{chat.name}</span>
</Pressable>
<IconButton
onClick={() => toggleMinimize(chat.partnerId)}
label={chat.minimized ? t("messages.expand") : t("messages.minimize")}
>
{chat.minimized ? <ChevronUp /> : <ChevronDown />}
</IconButton>
<IconButton onClick={() => closeChat(chat.partnerId)} label={t("messages.close")}>
<X />
</IconButton>
</div>
{!chat.minimized && (
<div className="flex flex-col h-96">
<ChatThread meId={meId} partnerId={chat.partnerId} isSystem={false} />
</div>
)}
</div>
);
}
frontend/src/components/ChatThread.tsx
-243
View File
@@ -1,243 +0,0 @@
import { useEffect, useEffectEvent, useRef, useState } from "react";
import { qk } from "../lib/queryKeys";
import { useTranslation } from "react-i18next";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { Send } from "lucide-react";
import { api, type Message, type MessageUser } from "../lib/api";
import { useLiveQuery } from "../lib/useLiveQuery";
import { useScrollFade } from "../lib/useScrollFade";
import { IconButton } from "./ui/IconButton";
import { LoadingState, StateMessage } from "./ui/QueryState";
import { notifyActionError } from "../lib/actionErrors";
import { partnerPub, POLL_MS, refreshPartnerPub, useKeyState } from "../lib/messaging";
import * as e2ee from "../lib/e2ee";
import KeyGate from "./KeyGate";
import { Textarea } from "./ui/Input";
import { RelativeTime } from "./ui/RelativeTime";
// The message list + composer for one conversation, shared by the full Messages page and the
// floating dock window. Handles client-side decryption and encrypt-on-send; the surrounding
// chrome (back button / minimize / close) is the caller's. Self-contained key gating: prompts
// setup/unlock (server-truth) for a user conversation until messaging is ready.
export default function ChatThread({
meId,
partnerId,
isSystem,
}: {
meId: number;
partnerId: number;
isSystem: boolean;
}) {
const { t } = useTranslation();
const qc = useQueryClient();
const [draft, setDraft] = useState("");
const [plain, setPlain] = useState<Record<number, string>>({});
const bottomRef = useRef<HTMLDivElement>(null);
const { ref: fadeRef, style: fadeStyle } = useScrollFade();
const ready = useKeyState() === "ready";
const needsKey = !isSystem && !ready;
const q = useLiveQuery<{ partner: MessageUser; items: Message[] }>(
qk.thread(partnerId),
() => api.thread(partnerId),
{ intervalMs: POLL_MS, enabled: !needsKey },
);
const items = q.data?.items ?? [];
// The two effects below take the FETCH as their trigger and read the payload through this effect
// event, so their dep lists name everything they touch without making the identity of `q.data` a
// trigger.
const latestThread = useEffectEvent(() => q.data);
// Decrypt the thread when fresh server data arrives. Keyed on dataUpdatedAt (not `items`): the
// `?? []` fallback is a new array reference every render, which would otherwise re-run this
// effect (and setPlain a new object) on every render while data is loading — a render storm.
useEffect(() => {
if (isSystem || !ready) return;
let cancelled = false;
const thread = latestThread();
// Every await inside is caught per message (a failure reads "can't decrypt"), so this never rejects.
void (async () => {
const out: Record<number, string> = {};
// Fetch the partner key lazily inside the try (only when there's a ciphertext message) and
// once — so an empty thread never fetches, and a fetch failure (e.g. a partner who reset and
// hasn't re-set-up, so has no key) degrades to "can't decrypt" instead of rejecting the pass.
let pub: string | null = null;
let refreshed = false;
for (const m of thread?.items ?? []) {
if (!m.ciphertext || !m.iv) continue;
try {
if (!pub) pub = await partnerPub(partnerId);
out[m.id] = await e2ee.decryptFrom(partnerId, pub, m.ciphertext, m.iv);
} catch {
// A decrypt failure can mean the partner rotated their keypair (a passphrase reset), so
// this device's cached public key is stale. Refresh it ONCE per pass and retry — that
// also re-derives future sends under the current key. A genuinely bad message still ends
// up "can't decrypt".
if (!refreshed) {
refreshed = true;
try {
pub = await refreshPartnerPub(partnerId);
out[m.id] = await e2ee.decryptFrom(partnerId, pub, m.ciphertext, m.iv);
continue;
} catch {
/* fall through to the error label below */
}
}
out[m.id] = "⚠ " + t("messages.cantDecrypt");
}
}
if (!cancelled) setPlain(out);
})();
return () => {
cancelled = true;
};
// `dataUpdatedAt` is the trigger and the payload is read through the effect event above — see
// Messages, where keying this family on `q.data` itself produced a render loop.
}, [q.dataUpdatedAt, ready, isSystem, partnerId, t]);
// Opening the thread (or a new incoming message arriving) marks messages read server-side, so
// refresh the badges — but ONLY when the incoming-message count actually changed, not on every
// 20s poll (which would needlessly refetch /conversations + /unread_count each tick).
const lastIncoming = useRef(-1);
const lastPartner = useRef(partnerId);
useEffect(() => {
if (!q.dataUpdatedAt) return;
// The Messages page reuses one ChatThread instance across conversation switches (not keyed by
// partnerId), so reset the counter when the partner changes — otherwise switching to a thread
// with the same incoming-count would skip the open-marks-read refresh.
if (lastPartner.current !== partnerId) {
lastPartner.current = partnerId;
lastIncoming.current = -1;
}
const incoming = (latestThread()?.items ?? []).filter((m) => m.recipient_id === meId).length;
if (incoming !== lastIncoming.current) {
lastIncoming.current = incoming;
qc.invalidateQueries({ queryKey: qk.conversations() });
qc.invalidateQueries({ queryKey: qk.messageUnread() });
}
}, [q.dataUpdatedAt, partnerId, meId, qc]);
// Scroll to the newest message when the count changes (open / new message) — NOT on `plain`,
// which gets a fresh object on every poll's decrypt pass and would yank a scrolled-up reader
// back to the bottom even when nothing new arrived.
useEffect(() => {
bottomRef.current?.scrollIntoView({ block: "end" });
}, [items.length]);
const send = useMutation({
mutationFn: async (text: string) => {
const pub = await partnerPub(partnerId);
const { ciphertext, iv } = await e2ee.encryptFor(partnerId, pub, text);
return api.sendMessage(partnerId, ciphertext, iv);
},
onSuccess: () => {
setDraft("");
qc.invalidateQueries({ queryKey: qk.thread(partnerId) });
qc.invalidateQueries({ queryKey: qk.conversations() });
},
onError: (e) => {
// The draft is kept (only cleared on success) so the user can retry. 400/409/422/500 already
// raised the global error dialog; 404 (recipient gone) and 429 (rate-limited) are "caller-
// handled" in api.req (no modal), so surface those here or the send fails silently.
//
// Through the shared helper, which knows both of those rules: it no-ops on anything already
// reported, and it prefers the server's reason only when that reason is a STRUCTURED detail.
// The hand-written copy that used to live here did `e.detail || …`, so a Hungarian reader got
// the route's English sentence — "That member hasn't set up messaging yet." — which is
// exactly what round 5 changed `notifyActionError` to stop doing. A second copy of a contract
// is how the fix misses a caller (round 6).
notifyActionError(e, t("messages.sendFailed"));
},
});
const submit = () => {
const text = draft.trim();
if (text && !send.isPending) send.mutate(text);
};
if (needsKey) {
return (
<div className="flex-1 grid place-items-center p-3 overflow-y-auto">
<div className="w-full max-w-sm">
<KeyGate meId={meId} compact />
</div>
</div>
);
}
return (
<>
<div
ref={fadeRef}
style={fadeStyle}
className="flex-1 overflow-y-auto no-scrollbar p-3 flex flex-col gap-2"
>
{q.isError && !q.data ? (
<div className="m-auto">
<StateMessage tone="error" onRetry={() => q.refetch()}>
{t("common.loadError")}
</StateMessage>
</div>
) : q.isPending ? (
<div className="m-auto">
<LoadingState />
</div>
) : items.length === 0 ? (
<div className="m-auto text-sm text-muted">{t("messages.threadEmpty")}</div>
) : (
items.map((m) => {
const mine = m.sender_id === meId;
const text = m.kind === "system" ? (m.body ?? "") : (plain[m.id] ?? "…");
return (
<div key={m.id} className={`flex ${mine ? "justify-end" : "justify-start"}`}>
<div
className={`max-w-[80%] rounded-2xl px-3 py-2 text-sm whitespace-pre-wrap wrap-break-word ${
mine ? "bg-accent text-accent-fg rounded-br-sm" : "bg-card rounded-bl-sm"
}`}
>
{text}
<RelativeTime
at={m.created_at}
className={`block text-3xs mt-1 ${mine ? "text-accent-fg/70" : "text-muted"}`}
/>
</div>
</div>
);
})
)}
<div ref={bottomRef} />
</div>
{isSystem ? (
<div className="p-2 border-t border-border text-center text-xs text-muted">
{t("messages.systemReadOnly")}
</div>
) : (
<div className="flex items-end gap-2 p-2 border-t border-border">
<Textarea
className="flex-1 resize-none max-h-28"
value={draft}
onChange={(e) => setDraft(e.target.value)}
onKeyDown={(e) => {
if (e.key === "Enter" && !e.shiftKey) {
e.preventDefault();
submit();
}
}}
rows={1}
placeholder={t("messages.writePlaceholder")}
/>
<IconButton
label={t("messages.send")}
size="md"
variant="primary"
onClick={submit}
disabled={!draft.trim() || send.isPending}
>
<Send className="w-4 h-4" />
</IconButton>
</div>
)}
</>
);
}
frontend/src/components/KeyGate.tsx
-185
View File
@@ -1,185 +0,0 @@
import { useState } from "react";
import { qk } from "../lib/queryKeys";
import { useTranslation } from "react-i18next";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { AlertTriangle, Lock, ShieldCheck } from "lucide-react";
import { api, HttpError } from "../lib/api";
import * as e2ee from "../lib/e2ee";
import { Button } from "./ui/Button";
import { Input } from "./ui/Input";
import { SURFACE } from "./ui/surfaces";
// Secure-messaging key gate: first-run setup (choose a passphrase) or unlock on this device.
// Self-contained — on success it updates the shared e2ee unlock state, so any observing view
// (the Messages page, a dock window) swaps out of the gate automatically. In unlock mode it also
// offers a forgotten-passphrase reset (the only escape from the set-once wall).
export default function KeyGate({ meId, compact = false }: { meId: number; compact?: boolean }) {
const { t } = useTranslation();
const qc = useQueryClient();
const keyQ = useQuery({
queryKey: qk.messageKey(),
queryFn: api.messageMyKey,
staleTime: 60_000,
});
const configured = keyQ.data?.configured ?? false;
// Password accounts must re-verify to reset (guards a hijacked session); Google-only accounts
// have no password to check. Passive observer of the qk.me() query BootGate fetches (enabled:false),
// so hasPassword follows the cache when a refetch changes it.
const meQ = useQuery({ queryKey: qk.me(), queryFn: api.me, enabled: false });
const hasPassword = meQ.data?.has_password ?? false;
const [view, setView] = useState<"gate" | "reset">("gate");
const [pass, setPass] = useState("");
const [confirm, setConfirm] = useState("");
const [curPass, setCurPass] = useState("");
const [err, setErr] = useState<string | null>(null);
// Keys the error: failing the same way twice is a new node, so a screen reader announces it again (a clear
// and a set in one handler commit together, leaving the node untouched).
const [attempt, setAttempt] = useState(0);
const [busy, setBusy] = useState(false);
async function submit() {
setAttempt((n) => n + 1);
setErr(null);
if (pass.length < 6) return setErr(t("messages.passTooShort"));
if (!configured && pass !== confirm) return setErr(t("messages.passMismatch"));
setBusy(true);
try {
if (configured) {
await e2ee.unlock(meId, pass, keyQ.data!);
} else {
const payload = await e2ee.setup(meId, pass);
await api.setupMessageKey(payload);
}
qc.invalidateQueries({ queryKey: qk.messageKey() });
} catch {
setErr(configured ? t("messages.wrongPass") : t("messages.setupFailed"));
}
setBusy(false);
}
function toReset() {
setErr(null);
setPass("");
setConfirm("");
setView("reset");
}
function cancelReset() {
setErr(null);
setCurPass("");
setView("gate");
}
async function doReset() {
setAttempt((n) => n + 1);
setErr(null);
if (hasPassword && !curPass) return setErr(t("messages.resetNeedPass"));
setBusy(true);
const confirmPass = hasPassword ? curPass : undefined;
try {
await api.resetMessageKey(confirmPass);
// Server key + dead history are gone; wipe this device's identity too so the gate re-appears
// in setup mode. Invalidate last so the refetch sees configured:false.
await e2ee.resetLocal(meId);
setCurPass("");
setView("gate");
qc.invalidateQueries({ queryKey: qk.messageKey() });
} catch (e) {
setErr(e instanceof HttpError && e.detail ? e.detail : t("messages.resetFailed"));
}
setBusy(false);
}
if (keyQ.isLoading)
return <div className="p-6 text-center text-muted text-sm">{t("common.loading")}</div>;
if (view === "reset")
return (
<div className={`${SURFACE.panel} space-y-3 ${compact ? "p-3" : "p-4"}`}>
<div className="flex items-center gap-2">
<AlertTriangle className="w-5 h-5 text-danger shrink-0" />
<div className="font-semibold text-sm">{t("messages.resetTitle")}</div>
</div>
<p className="text-sm text-muted">{t("messages.resetWarn")}</p>
{hasPassword && (
<Input
className="w-full"
type="password"
autoComplete="current-password"
value={curPass}
onChange={(e) => setCurPass(e.target.value)}
placeholder={t("messages.resetCurrentPass")}
/>
)}
{err && (
<div key={attempt} role="alert" className="text-sm text-danger">
{err}
</div>
)}
<div className="flex gap-2">
<Button variant="outline" onClick={cancelReset} disabled={busy}>
{t("common.cancel")}
</Button>
<Button
variant="danger"
onClick={doReset}
disabled={busy}
icon={<AlertTriangle className="w-4 h-4" />}
>
{t("messages.resetButton")}
</Button>
</div>
</div>
);
return (
<div className={`${SURFACE.panel} space-y-3 ${compact ? "p-3" : "p-4"}`}>
<div className="flex items-center gap-2">
<ShieldCheck className="w-5 h-5 text-accent shrink-0" />
<div className="font-semibold text-sm">
{configured ? t("messages.unlockTitle") : t("messages.setupTitle")}
</div>
</div>
{!compact && (
<p className="text-sm text-muted">
{configured ? t("messages.unlockBody") : t("messages.setupBody")}
</p>
)}
<Input
className="w-full"
type="password"
value={pass}
onChange={(e) => setPass(e.target.value)}
onKeyDown={(e) => e.key === "Enter" && configured && submit()}
placeholder={t("messages.passphrase")}
/>
{!configured && (
<Input
className="w-full"
type="password"
value={confirm}
onChange={(e) => setConfirm(e.target.value)}
placeholder={t("messages.passphraseConfirm")}
/>
)}
{err && (
<div key={attempt} role="alert" className="text-sm text-danger">
{err}
</div>
)}
{/* One row with a gap: as two bare inline buttons the link sat flush against the primary. */}
<div className="flex flex-wrap items-center gap-3">
<Button variant="primary" size="md" onClick={submit} disabled={busy || !pass}>
<Lock className="w-4 h-4" />
{configured ? t("messages.unlock") : t("messages.setUp")}
</Button>
{configured && (
<Button variant="link-muted" onClick={toReset} className="text-xs">
{t("messages.forgotPass")}
</Button>
)}
</div>
{!configured && !compact && <p className="text-xs text-muted">{t("messages.setupWarn")}</p>}
</div>
);
}
frontend/src/components/Messages.keyboard.dom.test.tsx
-70
View File
@@ -1,70 +0,0 @@
// @vitest-environment jsdom
//
// The conversation list as a keyboard list (E11 S5): `j`/`k` walk the conversations and Enter opens
// the one the row's name button opens — not the pop-out button beside it. The live query, the key
// state and the thread are stubbed: the list itself is what is under test.
import { afterEach, describe, expect, it, vi } from "vitest";
import { act, cleanup, render, screen } from "@testing-library/react";
vi.mock("react-i18next", async (importOriginal) => {
const actual = await importOriginal<typeof import("react-i18next")>();
return {
...actual,
useTranslation: () => ({ i18n: { language: "en" }, t: (key: string) => key }),
};
});
const conversation = (id: number, name: string) => ({
partner: { id, name, avatar_url: null },
last_message: { kind: "system", body: `hello from ${name}`, created_at: "2026-09-13T00:00:00Z" },
unread: 0,
});
const items = [conversation(0, "Siftlode"), conversation(7, "Anna"), conversation(9, "Bence")];
vi.mock("../lib/useLiveQuery", () => ({
useLiveQuery: () => ({ data: { items }, isError: false, isLoading: false, refetch: () => {} }),
}));
vi.mock("../lib/messaging", () => ({
SYSTEM_ID: 0,
POLL_MS: 20000,
partnerPub: async () => "",
useKeyState: () => "ready",
}));
const openChat = vi.fn();
vi.mock("../lib/chatDock", () => ({ openChat: (...a: unknown[]) => openChat(...a) }));
vi.mock("./ChatThread", () => ({
default: ({ partnerId }: { partnerId: number }) => <div data-testid="thread">{partnerId}</div>,
}));
import Messages from "./Messages";
afterEach(() => {
cleanup();
history.replaceState(null, "");
});
function press(key: string) {
act(() => {
(document.activeElement ?? document.body).dispatchEvent(
new KeyboardEvent("keydown", { key, bubbles: true, cancelable: true }),
);
});
}
describe("Messages · the conversation list is a keyboard list", () => {
it("walks the conversations with j/k and opens the focused one on Enter", () => {
render(<Messages meId={1} />);
const focusedRow = () => document.activeElement?.getAttribute("data-nav-index");
press("j");
press("j");
press("j");
expect(focusedRow()).toBe("2");
expect(document.activeElement?.textContent).toContain("Bence");
press("k");
expect(focusedRow()).toBe("1");
expect(document.activeElement?.textContent).toContain("Anna");
press("Enter");
expect(screen.getByTestId("thread").textContent).toBe("7");
expect(openChat).not.toHaveBeenCalled();
});
});
frontend/src/components/Messages.tsx
-338
View File
@@ -1,338 +0,0 @@
import { useEffect, useEffectEvent, useState } from "react";
import { qk } from "../lib/queryKeys";
import { useTranslation } from "react-i18next";
import { useQuery } from "@tanstack/react-query";
import { ArrowLeft, ShieldCheck, SquarePen, ExternalLink } from "lucide-react";
import { api, type Conversation, type MessageUser } from "../lib/api";
import { useLiveQuery } from "../lib/useLiveQuery";
import { Button } from "./ui/Button";
import { IconButton } from "./ui/IconButton";
import { LoadingState, StateMessage } from "./ui/QueryState";
import { partnerPub, POLL_MS, SYSTEM_ID, useKeyState } from "../lib/messaging";
import { useHistorySubview } from "../lib/history";
import { openChat } from "../lib/chatDock";
import * as e2ee from "../lib/e2ee";
import Avatar from "./ui/Avatar";
import KeyGate from "./KeyGate";
import ChatThread from "./ChatThread";
import NavGrid from "./ui/NavGrid";
import { navItemAttrs } from "../lib/listNav";
import { Pressable } from "./ui/Pressable";
import { Input } from "./ui/Input";
import { SURFACE } from "./ui/surfaces";
import { SectionLabel } from "./ui/Headings";
import { RelativeTime } from "./ui/RelativeTime";
type View =
| "list"
| "new"
| { partnerId: number; name?: string; avatar?: string | null; system?: boolean };
export default function Messages({ meId }: { meId: number }) {
// Sub-views live in browser history, so Back returns to the conversation list before leaving
// the module (open() pushes an entry; back() = history.back()).
const { view, open, back } = useHistorySubview<View>("list");
// Guard against a stale sub-view whose partnerId is the current user's own id (you can't
// message yourself). This can be inherited across an account switch — fall back to the list.
if (typeof view === "object" && view.partnerId !== meId) {
return (
<PageThread
meId={meId}
partnerId={view.partnerId}
isSystem={!!view.system}
seedName={view.name}
seedAvatar={view.avatar}
onBack={back}
/>
);
}
if (view === "new") {
return (
<Directory
onPick={(u) => open({ partnerId: u.id, name: u.name, avatar: u.avatar_url })}
onBack={back}
/>
);
}
return (
<ConversationList
meId={meId}
onOpen={(c) =>
open({
partnerId: c.partner.id,
name: c.partner.name,
avatar: c.partner.avatar_url,
system: c.partner.id === SYSTEM_ID,
})
}
onNew={() => open("new")}
/>
);
}
function ConversationList({
meId,
onOpen,
onNew,
}: {
meId: number;
onOpen: (c: Conversation) => void;
onNew: () => void;
}) {
const { t } = useTranslation();
const keyState = useKeyState();
const ready = keyState === "ready";
const q = useLiveQuery<{ items: Conversation[] }>(qk.conversations(), api.conversations, {
intervalMs: POLL_MS,
});
const items = q.data?.items ?? [];
const [previews, setPreviews] = useState<Record<number, string>>({});
// Decrypt conversation previews when fresh data arrives. The TRIGGER is `dataUpdatedAt` and the
// payload is read through an effect event, which is what makes the dep list below complete without
// making the identity of `q.data` a trigger. That distinction is load-bearing: the `?? []` fallback is a
// new array every render, and anything handing back a fresh object per render (a stub, a caller
// that rebuilds it) turns "re-run when the data changes" into a render loop through setPreviews.
// Measured the hard way — E27 S2 keyed this on `q.data`, and Messages.keyboard.dom.test hung.
const latestConversations = useEffectEvent(() => q.data);
useEffect(() => {
if (!ready) return;
let cancelled = false;
const conversations = latestConversations();
// Each decrypt is caught (a failure previews as "⚠"), so this never rejects.
void (async () => {
const out: Record<number, string> = {};
for (const c of conversations?.items ?? []) {
const m = c.last_message;
if (m.kind === "user" && m.ciphertext && m.iv) {
try {
const pub = await partnerPub(c.partner.id);
out[c.partner.id] = await e2ee.decryptFrom(c.partner.id, pub, m.ciphertext, m.iv);
} catch {
out[c.partner.id] = "⚠";
}
}
}
if (!cancelled) setPreviews(out);
})();
return () => {
cancelled = true;
};
}, [q.dataUpdatedAt, ready]);
function previewText(c: Conversation): string {
const m = c.last_message;
if (m.kind === "system") return m.body ?? "";
if (!ready) return "🔒 " + t("messages.encrypted");
return previews[c.partner.id] ?? "…";
}
return (
<div className="space-y-3">
<div className="flex items-center justify-between">
<SectionLabel>{t("messages.conversations")}</SectionLabel>
{ready && (
<Button variant="primary" size="xs" onClick={onNew}>
<SquarePen className="w-4 h-4" />
{t("messages.new")}
</Button>
)}
</div>
{(keyState === "setup" || keyState === "unlock") && <KeyGate meId={meId} />}
{q.isError && !q.data ? (
<StateMessage tone="error" onRetry={() => q.refetch()}>
{t("common.loadError")}
</StateMessage>
) : q.isLoading && !q.data ? (
<LoadingState shape="list" />
) : items.length === 0 ? (
<div className={`${SURFACE.panel} p-10 text-center text-muted`}>{t("messages.empty")}</div>
) : (
// A keyboard list (E11): `j`/`k` walk the conversations, Enter opens the one the name button
// opens; the pop-out button beside it keeps its own Enter.
<NavGrid className="flex flex-col gap-1.5">
{items.map((c, i) => {
const isSystem = c.partner.id === SYSTEM_ID;
return (
<div
key={c.partner.id}
{...navItemAttrs(i, c.partner.name)}
className="group flex items-center gap-1 rounded-xl state-layer transition"
>
<Pressable
selectable
data-nav-open=""
onClick={() => onOpen(c)}
className="flex items-center gap-3 p-2.5 min-w-0 flex-1"
>
<Avatar
src={c.partner.avatar_url}
fallback={c.partner.name}
className="w-10 h-10 rounded-full shrink-0 text-sm"
/>
<div className="min-w-0 flex-1">
<div className="flex items-center gap-2">
<span
className={`truncate ${c.unread > 0 ? "font-semibold" : "font-medium"}`}
>
{c.partner.name}
</span>
<RelativeTime
at={c.last_message.created_at}
className="ml-auto text-2xs text-muted shrink-0"
/>
</div>
<div className="flex items-center gap-2">
<span
className={`truncate text-sm ${c.unread > 0 ? "text-fg" : "text-muted"}`}
>
{previewText(c)}
</span>
{c.unread > 0 && (
<span className="ml-auto shrink-0 min-w-5 h-5 px-1.5 grid place-items-center rounded-full bg-accent text-accent-fg text-2xs font-semibold">
{c.unread}
</span>
)}
</div>
</div>
</Pressable>
{!isSystem && ready && (
<IconButton
size="md"
onClick={() => openChat(c.partner)}
label={t("messages.popOut")}
className="mr-1.5 reveal"
>
<ExternalLink />
</IconButton>
)}
</div>
);
})}
</NavGrid>
)}
</div>
);
}
function Directory({ onPick, onBack }: { onPick: (u: MessageUser) => void; onBack: () => void }) {
const { t } = useTranslation();
const [filter, setFilter] = useState("");
const q = useQuery({ queryKey: qk.messageUsers(), queryFn: api.messageUsers });
const users = (q.data ?? []).filter((u) =>
u.name.toLowerCase().includes(filter.trim().toLowerCase()),
);
return (
<div className="space-y-3">
<div className="flex items-center gap-2">
<IconButton
label={t("channel.back")}
size="sm"
variant="ghost"
// An icon-only button needs a name: both of these announced themselves as a bare "button",
// and they are the only way out of the sub-view (E10 review round 1).
onClick={onBack}
>
<ArrowLeft className="w-4 h-4" />
</IconButton>
<SectionLabel>{t("messages.newTitle")}</SectionLabel>
</div>
<Input
className="w-full"
value={filter}
onChange={(e) => setFilter(e.target.value)}
placeholder={t("messages.searchPeople")}
/>
{q.isError && !q.data ? (
<StateMessage tone="error" onRetry={() => q.refetch()}>
{t("common.loadError")}
</StateMessage>
) : q.isLoading ? (
<LoadingState shape="list" />
) : users.length === 0 ? (
<div className={`${SURFACE.panel} p-10 text-center text-muted`}>
{t("messages.noPeople")}
</div>
) : (
<div className="flex flex-col gap-1">
{users.map((u) => (
<Pressable
selectable
key={u.id}
layer
onClick={() => onPick(u)}
className="flex items-center gap-3 p-2.5 rounded-xl"
>
<Avatar
src={u.avatar_url}
fallback={u.name}
className="w-9 h-9 rounded-full shrink-0 text-sm"
/>
<span className="truncate font-medium">{u.name}</span>
</Pressable>
))}
</div>
)}
</div>
);
}
function PageThread({
meId,
partnerId,
isSystem,
seedName,
seedAvatar,
onBack,
}: {
meId: number;
partnerId: number;
isSystem: boolean;
seedName?: string;
seedAvatar?: string | null;
onBack: () => void;
}) {
const { t } = useTranslation();
const ready = useKeyState() === "ready";
const name = seedName ?? "";
return (
<div className="flex flex-col h-[65dvh] min-h-80">
<div className="flex items-center gap-3 pb-3 border-b border-border">
<IconButton
label={t("channel.back")}
size="sm"
variant="ghost"
// An icon-only button needs a name: both of these announced themselves as a bare "button",
// and they are the only way out of the sub-view (E10 review round 1).
onClick={onBack}
>
<ArrowLeft className="w-4 h-4" />
</IconButton>
<Avatar
src={seedAvatar}
fallback={name}
className="w-9 h-9 rounded-full shrink-0 text-sm"
/>
<span className="font-semibold truncate">{name}</span>
{!isSystem && (
<ShieldCheck
className="w-4 h-4 text-muted shrink-0"
aria-label={t("messages.encryptedHint")}
/>
)}
<div className="flex-1" />
{!isSystem && ready && (
<IconButton
size="md"
onClick={() => openChat({ id: partnerId, name, avatar_url: seedAvatar ?? null })}
label={t("messages.popOut")}
>
<ExternalLink />
</IconButton>
)}
</div>
<ChatThread meId={meId} partnerId={partnerId} isSystem={isSystem} />
</div>
);
}
frontend/src/components/NavSidebar.tsx
+1 -18
View File
@@ -7,7 +7,6 @@ import { Info, LogOut, Settings, Shield, UserPlus, type LucideIcon } from "lucid
import { api, type Me } from "../lib/api";
import { displayName, roleKey } from "../lib/api/account";
import { pinOnNextPage } from "../lib/activeAccount";
import * as e2ee from "../lib/e2ee";
import { useLiveQuery } from "../lib/useLiveQuery";
import { getUnreadCount, subscribe } from "../lib/notifications";
import type { Page } from "../lib/urlState";
@@ -84,14 +83,6 @@ export default function NavSidebar({
} catch {
/* clear locally and reload regardless */
}
// Forget this device's E2EE private key on sign-out: it's otherwise persisted in IndexedDB
// and auto-unlocks on the next visit, so on a shared machine the conversations would stay
// decryptable after logout. Re-entering the message passphrase is required next time.
try {
await e2ee.clearDevice(me.id);
} catch {
/* IndexedDB unavailable (e.g. private mode) — never let it block the logout + reload */
}
pinOnNextPage(null);
location.reload();
}
@@ -112,8 +103,7 @@ export default function NavSidebar({
pinOnNextPage(id);
// Drop the previous account's in-module sub-view/overlay before the reload (which would
// otherwise preserve history.state across the swap). Otherwise the new account lands on a
// stale sub-view — e.g. an open chat thread whose partnerId belongs to the OLD identity
// (often the new account's own id → an empty self-thread). Start at the module root instead.
// stale sub-view that belongs to the OLD identity. Start at the module root instead.
const st = { ...(window.history.state || {}) };
delete st._sub;
delete st._ov;
@@ -130,12 +120,6 @@ export default function NavSidebar({
// events (the former separate bell is now folded into the inbox page).
const clientUnread = useSyncExternalStore(subscribe, getUnreadCount, getUnreadCount);
const unread = (unreadQuery.data?.count ?? 0) + clientUnread;
// Direct messages are their own module with their own unread badge (demo can't message).
const msgUnreadQuery = useLiveQuery(qk.messageUnread(), api.messageUnreadCount, {
intervalMs: 30000,
enabled: !me.is_demo,
});
const msgUnread = msgUnreadQuery.data?.count ?? 0;
// Download center badge = items still working (queued/running/paused). Reuses the same
// lightweight per-user index the feed cards poll, so no extra request shape.
const dlIndexQuery = useLiveQuery(qk.downloadIndex(), api.downloadIndex, {
@@ -155,7 +139,6 @@ export default function NavSidebar({
// badge NUMBERS are the only nav-only concern (they need the live polling queries above).
const BADGE: Partial<Record<Page, number>> = {
notifications: unread,
messages: msgUnread,
downloads: dlActive,
};
const META = (p: Page): Omit<NavItem, "page"> => ({
frontend/src/components/PlexPlayer.tsx
+1 -1
View File
@@ -1348,7 +1348,7 @@ export default function PlexPlayer({ itemId, onClose, queue, fromStart = false }
const currentAudio = detail?.audio_streams.find((x) => x.ord === (audioOrd ?? 0));
const currentSub = detail?.subtitle_streams.find((x) => x.ord === subOrd);
// Portaled to <body>, like every other full-screen overlay here (Modal, PlayerModal, ChatDock,
// Portaled to <body>, like every other full-screen overlay here (Modal, PlayerModal,
// BackToTop). A fixed, full-viewport player must not be painted inside the page scroller: the
// moment that scroller gets a mask/filter/transform/contain it becomes a stacking context, and
// this z-overlay is then scoped inside it — the rail, the side panel and the header paint straight
frontend/src/components/UploadDialog.tsx
+1 -1
View File
@@ -46,7 +46,7 @@ export default function UploadDialog({ onClose }: { onClose: () => void }) {
// Every pick gets a new number, so the refusal below REMOUNTS rather than being reconciled. Two
// over-cap picks in a row leave the node and its text identical — the message names the cap, not
// the file — and a live region that is not touched is not announced, so the second refusal was
// silent to a screen reader. `KeyGate`, `SetupWizard` and `Welcome` all key their alerts for the
// silent to a screen reader. `SetupWizard` and `Welcome` both key their alerts for the
// same reason, and `formAlerts.dom.test.tsx` is the test that exists because of it.
const [pickSeq, setPickSeq] = useState(0);
const pick_ = (f: File) => {
frontend/src/components/formAlerts.dom.test.tsx
+1 -19
View File
@@ -4,10 +4,9 @@
// clear and the set of a validation failure commit together, so the alert node used to stay untouched on
// the second attempt and a screen reader said nothing — a press that seemed to do nothing.
//
// i18n is mocked to a key-passthrough; the API and the E2EE module are stubbed so nothing reaches out.
// i18n is mocked to a key-passthrough; the API is stubbed so nothing reaches out.
import { afterEach, describe, expect, it, vi } from "vitest";
import { cleanup, fireEvent, render, screen } from "@testing-library/react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
vi.mock("react-i18next", async (importOriginal) => {
const actual = await importOriginal<typeof import("react-i18next")>();
@@ -24,16 +23,12 @@ vi.mock("../lib/api", async (importOriginal) => {
api: {
...actual.api,
authConfig: () => Promise.resolve({ google_enabled: false }),
messageMyKey: () => Promise.resolve({ configured: true }),
me: () => Promise.resolve({ authenticated: false }),
setupInfo: () => Promise.resolve({ secrets_manageable: false }),
},
};
});
vi.mock("../lib/e2ee", () => ({ unlock: vi.fn(), setup: vi.fn(), clearDevice: vi.fn() }));
import KeyGate from "./KeyGate";
import SetupWizard from "./SetupWizard";
import Welcome from "./Welcome";
@@ -54,19 +49,6 @@ async function failTwice(fail: () => void, message: string) {
}
describe("a form failing the same way twice announces it twice", () => {
it("the message passphrase gate", async () => {
render(
<QueryClientProvider client={new QueryClient()}>
<KeyGate meId={1} />
</QueryClientProvider>,
);
const unlock = await screen.findByText("messages.unlock");
fireEvent.change(screen.getByPlaceholderText("messages.passphrase"), {
target: { value: "abc" },
});
await failTwice(() => fireEvent.click(unlock), "messages.passTooShort");
});
it("the sign-in card", async () => {
render(
<Welcome verify={{ outcome: null, email: null, resetPending: false, dismiss: () => {} }} />,
frontend/src/components/legal/LegalLayout.tsx
+1 -1
View File
@@ -16,7 +16,7 @@ import LanguageSwitcher from "../LanguageSwitcher";
import { SURFACE } from "../ui/surfaces";
// The day the text last changed materially — bump it with every edit of either body.
const LAST_UPDATED = "2026-09-17";
const LAST_UPDATED = "2026-10-04";
// Contact shown on the legal pages: the instance operator's configured admin email, from the
// public /auth/config. One shared fetch across the page; null when the operator set none.
frontend/src/components/legal/PrivacyPolicy.tsx
+8 -14
View File
@@ -87,10 +87,7 @@ export function PrivacyEn() {
that log is sent to the server and stored with your account alongside the server's more
detailed record of your requests, for the same retention period as the server logs;
</li>
<li>
passwords, tokens, email addresses and the content of your messages are never included, at
any level.
</li>
<li>passwords, tokens and email addresses are never included, at any level.</li>
</ul>
<p>
After 24 hours the level returns to the default by itself, and you can return to it earlier
@@ -112,10 +109,9 @@ export function PrivacyEn() {
<H2 id="storage">Storage &amp; security</H2>
<p>
Data is stored in a private PostgreSQL database on a server we control, accessible only to
the operator. Google OAuth refresh tokens are encrypted at rest. Private messages between
users are end-to-end encrypted in the browser: the server stores only the encrypted text and
cannot read it. Access is restricted to the email addresses admitted to the app. No system
is perfectly secure, but we take reasonable measures to protect your data.
the operator. Google OAuth refresh tokens are encrypted at rest. Access is restricted to the
email addresses admitted to the app. No system is perfectly secure, but we take reasonable
measures to protect your data.
</p>
<H2 id="retention">Retention &amp; deletion</H2>
@@ -230,7 +226,7 @@ export function PrivacyHu() {
ezt a naplót elküldi a szervernek, amely a fiókodhoz tárolja, a kéréseid részletesebb
szerveroldali naplójával együtt, a szervernapló megőrzési idejéig;
</li>
<li>jelszó, token, e-mail-cím és az üzeneteid tartalma egyik szinten sem kerül bele.</li>
<li>jelszó, token és e-mail-cím egyik szinten sem kerül bele.</li>
</ul>
<p>
24 óra múlva a szint magától visszaáll az alapra, és bármikor korábban is visszaállíthatod.
@@ -252,11 +248,9 @@ export function PrivacyHu() {
<H2 id="storage">Tárolás és biztonság</H2>
<p>
Az adatokat egy általunk kezelt szerveren, privát PostgreSQL-adatbázisban tároljuk, amelyhez
csak az üzemeltető fér hozzá. A Google OAuth frissítő tokeneket titkosítva tároljuk. A
felhasználók közötti privát üzenetek végponttól végpontig titkosítottak a böngészőben: a
szerver csak a titkosított szöveget tárolja, és nem tudja elolvasni. Csak az alkalmazásba
beengedett e-mail-címek férnek hozzá. Egyetlen rendszer sem tökéletesen biztonságos, de
észszerű intézkedésekkel védjük az adataidat.
csak az üzemeltető fér hozzá. A Google OAuth frissítő tokeneket titkosítva tároljuk. Csak az
alkalmazásba beengedett e-mail-címek férnek hozzá. Egyetlen rendszer sem tökéletesen
biztonságos, de észszerű intézkedésekkel védjük az adataidat.
</p>
<H2 id="retention">Megőrzés és törlés</H2>
frontend/src/components/modulePages.tsx
-10
View File
@@ -10,7 +10,6 @@ import { useSavedViews } from "./savedViewsContext";
// that file exports only data and this one only components (Fast Refresh). Their lazy chunks are
// exported alongside so the registry can attach each chunk's preload to the wrapper that renders it.
export const Feed = lazyWithPreload(() => import("./Feed"));
export const Messages = lazyWithPreload(() => import("./Messages"));
// The GLOBAL feed page: wires <Feed> to the app-wide feed filters / view / live-search. (The channel
// page renders <Feed> itself with its own channel-scoped filters, so those two never share state.)
@@ -43,12 +42,3 @@ export function FeedPage() {
</>
);
}
export function MessagesPage() {
const me = useMe();
return (
<div className="p-4 max-w-3xl w-full mx-auto">
<Messages meId={me.id} />
</div>
);
}
frontend/src/components/moduleRegistry.tsx
+1 -2
View File
@@ -4,7 +4,7 @@ import type { Page } from "../lib/urlState";
import type { PanelId, PanelLayout } from "../lib/panelLayout";
import Sidebar from "./Sidebar";
import PlaylistsRail from "./PlaylistsRail";
import { Feed, FeedPage, Messages, MessagesPage } from "./modulePages";
import { Feed, FeedPage } from "./modulePages";
// The RENDER half of the module registry: which component (and side rail) each page renders. The
// metadata half — nav order, label, icon, gate — lives in lib/modules.ts (imported by NavSidebar /
@@ -54,7 +54,6 @@ export const PAGE_CONTENT: Record<Page, PageDef> = {
playlists: { Component: Playlists, maxWidth: "64rem" },
plex: { Component: PlexBrowse, maxWidth: "100rem" },
notifications: { Component: NotificationsPanel, maxWidth: "48rem" },
messages: { Component: Object.assign(MessagesPage, { preload: Messages.preload }) },
downloads: { Component: DownloadCenter, maxWidth: "56rem" },
stats: { Component: Stats },
scheduler: { Component: Scheduler },
frontend/src/components/ui/Avatar.dom.test.tsx
+2 -2
View File
@@ -60,8 +60,8 @@ describe("Avatar · a failed image must not follow the component to the next ite
});
it("retries a URL it comes back to — a 429 is transient, and so is the memory of it", () => {
// The instance is not remounted here on purpose: the player's channel avatar and the Messages
// thread header both swap `src` on a live instance. A memory that outlived the reason for it
// The instance is not remounted here on purpose: the player's channel avatar swaps `src` on a
// live instance as it steps through a queue. A memory that outlived the reason for it
// would pin a throttled channel to its initial for the rest of the session.
const { rerender } = render(
<Avatar src="https://cdn.test/a.jpg" alt="avatar" fallback="Zed" />,
frontend/src/components/ui/Avatar.tsx
+1 -1
View File
@@ -29,7 +29,7 @@ export default function Avatar({
//
// Forgetting the URL once `src` has moved off it is the other half, and it is what keeps the 429
// TRANSIENT: without it the memory outlives the reason for it, and a mounted instance whose `src`
// swaps — the player's channel avatar stepping through a queue, the Messages thread header — would
// swaps — the player's channel avatar stepping through a queue — would
// show the initial for a throttled channel forever, never re-requesting even after the CDN
// relented. Written in render because it is convergent (the write falsifies its own condition) and
// because an effect would leave one committed frame in which the memory is stale, which is the
frontend/src/components/ui/NavRail.tsx
+1 -1
View File
@@ -112,7 +112,7 @@ export function NavRailItem({
}}
// With the label visible the row's name starts with that text (WCAG 2.5.3: the spoken name
// contains the visible one); the full name stays in the tooltip. Icon-only, the full name is the
// name. The exact count rides in the name either way, so "Messages (3)" is heard and not only
// name. The exact count rides in the name either way, so "Alerts (3)" is heard and not only
// seen; the drawn badge is hidden (labelled, it was read first and capped: "9+Alerts").
aria-label={`${showLabel ? shortLabel : label}${shown ? ` (${badge})` : ""}`}
aria-current={active ? "page" : undefined}
frontend/src/components/ui/README.md
+2 -3
View File
@@ -30,9 +30,8 @@ The direction is one-way from below, too: `lib/` may not import from `components
included, not even a type (same lint file). A contract both layers need lives in `lib/`: the `Column`
/ `FilterMap` shape and `filterRows` are `lib/tableColumns`, which `tableHeader` and `DataTable` import.
Counter-examples, deliberately NOT here: `PosterTile` (knows about Plex montage posters), `KeyGate`
(secure-messaging key setup), `plexCards`, `downloadRow`, `channelColumns` — all shared, none
domain-free.
Counter-examples, deliberately NOT here: `PosterTile` (knows about Plex montage posters),
`plexCards`, `downloadRow`, `channelColumns` — all shared, none domain-free.
## What lives here
frontend/src/design-lab/batchB.tsx
-2
View File
@@ -9,7 +9,6 @@ import {
Home,
ListVideo,
Lock,
MessageSquare,
PlayCircle,
Repeat,
Settings,
@@ -290,7 +289,6 @@ const NAV: NavDef[] = [
{ icon: ListVideo, en: "Playlists", hu: "Listák" },
{ icon: Clapperboard, en: "Plex", hu: "Plex" },
{ icon: Bell, en: "Alerts", hu: "Értesítés" },
{ icon: MessageSquare, en: "Messages", hu: "Üzenetek" },
{ icon: Download, en: "Downloads", hu: "Letöltések" },
];
const SYSTEM: NavDef[] = [
frontend/src/i18n/locales/en/errors.json
-6
View File
@@ -155,14 +155,8 @@
"link_gone": "This link is no longer available",
"link_required": "A video link or id is required",
"media_missing": "The media file isn't on disk",
"message_empty": "The message is empty",
"message_rate": "Too many messages — slow down a moment",
"message_self": "You can't message yourself",
"message_too_long": "The message is too long",
"messaging_set_up": "Secure messaging is already set up",
"name_required": "A name is required",
"no_encryption_key": "Set TOKEN_ENCRYPTION_KEY to store secrets in the database",
"no_messaging": "That member hasn't set up messaging yet",
"no_profile": "There's no download profile to use",
"no_subscription_id": "There's no YouTube subscription on record yet — sync your subscriptions first",
"not_authenticated": "You're not signed in",
frontend/src/i18n/locales/en/keys.json
-1
View File
@@ -27,7 +27,6 @@
"goPlaylists": "Go to Playlists",
"goPlex": "Go to Plex",
"goNotifications": "Go to Notifications",
"goMessages": "Go to Messages",
"goDownloads": "Go to Downloads",
"goStats": "Go to Stats",
"goSettings": "Go to Settings",
frontend/src/i18n/locales/en/messages.json
-41
View File
@@ -1,41 +0,0 @@
{
"navLabel": "Messages",
"popOut": "Open in pop-out",
"expand": "Expand",
"minimize": "Minimize",
"close": "Close",
"conversations": "Conversations",
"new": "New message…",
"newTitle": "New message",
"empty": "No conversations yet. Start one with the New message button.",
"searchPeople": "Search people…",
"noPeople": "No one to message yet.",
"threadEmpty": "No messages yet — say hello.",
"writePlaceholder": "Write a message…",
"send": "Send",
"encrypted": "Encrypted message",
"encryptedHint": "End-to-end encrypted",
"cantDecrypt": "Can't decrypt",
"sendFailed": "Couldn't send your message. Try again.",
"systemReadOnly": "This is an automated message.",
"setupTitle": "Set up secure messaging",
"setupBody": "Messages are end-to-end encrypted. Choose a passphrase to protect your key — it never leaves your device, so no one (not even an admin) can read your conversations.",
"setupWarn": "If you forget this passphrase, your message history can't be recovered.",
"setUp": "Set up",
"unlockTitle": "Unlock messaging",
"unlockBody": "Enter your message passphrase to unlock your conversations on this device.",
"unlock": "Unlock",
"passphrase": "Passphrase",
"passphraseConfirm": "Confirm passphrase",
"passTooShort": "Use at least 6 characters",
"passMismatch": "The passphrases don't match",
"wrongPass": "Wrong passphrase",
"setupFailed": "Couldn't set up secure messaging. Please try again.",
"forgotPass": "Forgot your passphrase?",
"resetTitle": "Reset secure messaging",
"resetWarn": "This permanently erases your entire message history — every conversation, for you and the people you messaged — because it can no longer be decrypted. Then you can set a new passphrase and start fresh. This can't be undone.",
"resetCurrentPass": "Current account password",
"resetNeedPass": "Enter your current account password to confirm.",
"resetButton": "Reset & erase history",
"resetFailed": "Couldn't reset secure messaging. Please try again."
}
frontend/src/i18n/locales/en/nav.json
-1
View File
@@ -14,7 +14,6 @@
"playlists": "Playlists",
"plex": "Plex",
"notifications": "Notifications",
"messages": "Messages",
"downloads": "Downloads",
"stats": "Stats",
"scheduler": "Scheduler",
frontend/src/i18n/locales/en/settings.json
+1 -1
View File
@@ -220,7 +220,7 @@
},
"server_one": "The Siftlode server receives this too and keeps it for {{count}} day, so the problem can be tracked down.",
"server_other": "The Siftlode server receives this too and keeps it for {{count}} days, so the problem can be tracked down.",
"never": "Passwords, tokens, email addresses and the content of your messages are never included.",
"never": "Passwords, tokens and email addresses are never included.",
"lapse": "After 24 hours it goes back to “Basic” by itself.",
"policy": "Privacy policy",
"cancel": "Cancel",
frontend/src/i18n/locales/hu/errors.json
-6
View File
@@ -155,14 +155,8 @@
"link_gone": "Ez a link már nem érhető el",
"link_required": "Adj meg egy videólinket vagy -azonosítót",
"media_missing": "A médiafájl nincs a lemezen",
"message_empty": "Az üzenet üres",
"message_rate": "Túl sok üzenet — várj egy kicsit",
"message_self": "Magadnak nem küldhetsz üzenetet",
"message_too_long": "Az üzenet túl hosszú",
"messaging_set_up": "A biztonságos üzenetküldés már be van állítva",
"name_required": "Adj meg egy nevet",
"no_encryption_key": "Titkos értékek tárolásához állítsd be a TOKEN_ENCRYPTION_KEY-t",
"no_messaging": "Ez a tag még nem állította be az üzenetküldést",
"no_profile": "Nincs használható letöltési profil",
"no_subscription_id": "Még nincs rögzített YouTube-feliratkozás — előbb szinkronizáld a feliratkozásaidat",
"not_authenticated": "Nem vagy bejelentkezve",
frontend/src/i18n/locales/hu/keys.json
-1
View File
@@ -27,7 +27,6 @@
"goPlaylists": "Ugrás: Lejátszási listák",
"goPlex": "Ugrás: Plex",
"goNotifications": "Ugrás: Értesítések",
"goMessages": "Ugrás: Üzenetek",
"goDownloads": "Ugrás: Letöltések",
"goStats": "Ugrás: Statisztika",
"goSettings": "Ugrás: Beállítások",
frontend/src/i18n/locales/hu/messages.json
-41
View File
@@ -1,41 +0,0 @@
{
"navLabel": "Üzenetek",
"popOut": "Megnyitás felugró ablakban",
"expand": "Kinyitás",
"minimize": "Összecsukás",
"close": "Bezárás",
"conversations": "Beszélgetések",
"new": "Új üzenet…",
"newTitle": "Új üzenet",
"empty": "Még nincs beszélgetés. Indíts egyet az Új üzenet gombbal.",
"searchPeople": "Emberek keresése…",
"noPeople": "Még nincs kinek üzenni.",
"threadEmpty": "Még nincs üzenet — köszönj be.",
"writePlaceholder": "Írj egy üzenetet…",
"send": "Küldés",
"encrypted": "Titkosított üzenet",
"encryptedHint": "Végpontig titkosítva",
"cantDecrypt": "Nem fejthető vissza",
"sendFailed": "Nem sikerült elküldeni az üzenetet. Próbáld újra.",
"systemReadOnly": "Ez egy automatikus üzenet.",
"setupTitle": "Biztonságos üzenetküldés beállítása",
"setupBody": "Az üzenetek végpontig titkosítottak. Válassz egy jelszót a kulcsod védelméhez — sosem hagyja el az eszközödet, így senki (még az admin sem) olvashatja a beszélgetéseidet.",
"setupWarn": "Ha elfelejted ezt a jelszót, az üzenet-előzményeid nem állíthatók helyre.",
"setUp": "Beállítás",
"unlockTitle": "Üzenetküldés feloldása",
"unlockBody": "Add meg az üzenet-jelszavadat a beszélgetéseid feloldásához ezen az eszközön.",
"unlock": "Feloldás",
"passphrase": "Jelszó",
"passphraseConfirm": "Jelszó megerősítése",
"passTooShort": "Legalább 6 karakter legyen",
"passMismatch": "A jelszavak nem egyeznek",
"wrongPass": "Hibás jelszó",
"setupFailed": "Nem sikerült beállítani a biztonságos üzenetküldést. Próbáld újra.",
"forgotPass": "Elfelejtetted a jelszavad?",
"resetTitle": "Biztonságos üzenetküldés visszaállítása",
"resetWarn": "Ez véglegesen törli a teljes üzenet-előzményedet — minden beszélgetést, nálad és a partnereidnél is —, mert az többé nem visszafejthető. Utána új jelszót állíthatsz be és tiszta lappal indulhatsz. Ez nem visszavonható.",
"resetCurrentPass": "Jelenlegi fiók-jelszó",
"resetNeedPass": "Add meg a jelenlegi fiók-jelszavad a megerősítéshez.",
"resetButton": "Visszaállítás és előzmény törlése",
"resetFailed": "Nem sikerült visszaállítani a biztonságos üzenetküldést. Próbáld újra."
}
frontend/src/i18n/locales/hu/nav.json
-1
View File
@@ -14,7 +14,6 @@
"playlists": "Listák",
"plex": "Plex",
"notifications": "Értesítések",
"messages": "Üzenetek",
"downloads": "Letöltések",
"stats": "Statisztika",
"scheduler": "Ütemező",
frontend/src/i18n/locales/hu/settings.json
+1 -1
View File
@@ -220,7 +220,7 @@
},
"server_one": "Ezt a Siftlode szervere is megkapja, és {{count}} napig őrzi, hogy a hibát ki lehessen nyomozni.",
"server_other": "Ezt a Siftlode szervere is megkapja, és {{count}} napig őrzi, hogy a hibát ki lehessen nyomozni.",
"never": "Jelszó, token, e-mail-cím és az üzeneteid tartalma soha nem kerül bele.",
"never": "Jelszó, token és e-mail-cím soha nem kerül bele.",
"lapse": "24 óra múlva magától visszaáll „Alap” szintre.",
"policy": "Adatvédelmi irányelvek",
"cancel": "Mégse",
frontend/src/index.css
-26
View File
@@ -972,32 +972,6 @@ html[data-perf="1"] .overlay-backdrop {
transform: none;
}
}
/* One-shot attention flash for a chat dock window on a new message. Inset glow so the
window's own overflow-hidden doesn't clip it; pulses twice then fades. */
@keyframes chatFlash {
0% {
box-shadow: inset 0 0 0 0 transparent;
}
18% {
box-shadow:
inset 0 0 0 3px var(--accent),
inset 0 0 22px 0 color-mix(in srgb, var(--accent) 55%, transparent);
}
40% {
box-shadow: inset 0 0 0 1px transparent;
}
62% {
box-shadow:
inset 0 0 0 3px var(--accent),
inset 0 0 22px 0 color-mix(in srgb, var(--accent) 55%, transparent);
}
100% {
box-shadow: inset 0 0 0 0 transparent;
}
}
.chat-flash {
animation: chatFlash 1.1s ease-out;
}
/* ===== Color schemes (accent + neutrals), each with dark + light ===== */
frontend/src/lib/api.ts
-3
View File
@@ -58,8 +58,6 @@ export {
parsePlexFilters,
isIntrinsicReadOnly,
} from "./api/plex";
import { messagingApi } from "./api/messaging";
export type * from "./api/messaging";
import { downloadsApi } from "./api/downloads";
export type * from "./api/downloads";
import { debugSessionsApi, diagnosticsApi } from "./api/diagnostics";
@@ -81,7 +79,6 @@ export const api = {
...quotaApi,
...adminApi,
...plexApi,
...messagingApi,
...downloadsApi,
...diagnosticsApi,
...debugSessionsApi,
frontend/src/lib/api/facade.test.ts
-1
View File
@@ -30,7 +30,6 @@ const SLICE_MODULES = [
["quotaApi", () => import("./quota")],
["adminApi", () => import("./admin")],
["plexApi", () => import("./plex")],
["messagingApi", () => import("./messaging")],
["downloadsApi", () => import("./downloads")],
["diagnosticsApi", () => import("./diagnostics")],
["debugSessionsApi", () => import("./diagnostics")],
frontend/src/lib/api/messaging.ts
-72
View File
@@ -1,72 +0,0 @@
// Direct-messaging domain: the E2EE key bundle setup/reset, the conversation list, threads, and
// send/unread. Self-contained — types reference only each other, methods only touch core's req.
// (The WebCrypto layer that encrypts/decrypts message bodies lives in e2ee.ts, not here.)
import { req } from "./core";
export interface MessageUser {
id: number;
name: string;
avatar_url: string | null;
}
export interface Message {
id: number;
kind: "user" | "system";
sender_id: number | null;
recipient_id: number;
body: string | null; // plaintext, system messages only
ciphertext: string | null; // base64, E2EE user messages only
iv: string | null;
read_at: string | null;
created_at: string | null;
}
export interface Conversation {
partner: MessageUser;
last_message: Message;
unread: number;
}
// My own E2EE key bundle. When configured, the wrapped blob + params let a device unlock.
export interface MyKeyBundle {
configured: boolean;
public_key?: string;
wrapped_private_key?: string;
salt?: string;
wrap_iv?: string;
key_check?: string;
}
export interface KeySetup {
public_key: string;
wrapped_private_key: string;
salt: string;
wrap_iv: string;
key_check: string;
}
export const messagingApi = {
messageMyKey: (): Promise<MyKeyBundle> => req("/api/messages/keys/me"),
setupMessageKey: (k: KeySetup): Promise<{ configured: boolean }> =>
req("/api/messages/keys", { method: "POST", body: JSON.stringify(k) }),
// Forgotten-passphrase reset: drops the server key (and the now-undecryptable history) so a new
// passphrase can be set. Password accounts must pass their current password; errors shown inline.
resetMessageKey: (currentPassword?: string): Promise<{ configured: boolean }> =>
req(
"/api/messages/keys/reset",
{ method: "POST", body: JSON.stringify({ current_password: currentPassword ?? null }) },
{ quiet: true },
),
messagePublicKey: (userId: number): Promise<{ user_id: number; public_key: string }> =>
req(`/api/messages/keys/${userId}`),
messageUsers: (): Promise<MessageUser[]> => req("/api/messages/users"),
conversations: (): Promise<{ items: Conversation[] }> => req("/api/messages/conversations"),
thread: (partnerId: number): Promise<{ partner: MessageUser; items: Message[] }> =>
req(`/api/messages/conversations/${partnerId}`),
sendMessage: (recipientId: number, ciphertext: string, iv: string): Promise<Message> =>
req("/api/messages", {
method: "POST",
body: JSON.stringify({ recipient_id: recipientId, ciphertext, iv }),
}),
messageUnreadCount: (): Promise<{ count: number }> => req("/api/messages/unread_count"),
};
frontend/src/lib/chatDock.dom.test.ts
-52
View File
@@ -1,52 +0,0 @@
// @vitest-environment jsdom
//
// The floating chat dock's store (E32 review: moved onto lib/store's createStore). It restores the
// signed-in user's windows, keeps at most three, flashes a window a message arrives for, and
// persists everything but the transient flash counter.
import { describe, expect, it } from "vitest";
import { act, renderHook } from "@testing-library/react";
import {
closeChat,
initDock,
notifyIncoming,
openChat,
toggleMinimize,
useDockChats,
} from "./chatDock";
import { LS } from "./storage";
const partner = (id: number) => ({ id, name: `P${id}`, avatar_url: null });
describe("the chat dock", () => {
it("restores, caps, flashes and persists the user's windows", () => {
localStorage.setItem(
LS.chatDock(7),
JSON.stringify([{ partnerId: 1, name: "P1", avatar: null, minimized: true }]),
);
const { result } = renderHook(() => useDockChats());
act(() => initDock(7));
expect(result.current).toEqual([
{ partnerId: 1, name: "P1", avatar: null, minimized: true, flash: 0 },
]);
act(() => notifyIncoming(partner(1))); // already open: flash it, keep it minimised
expect(result.current[0]).toMatchObject({ partnerId: 1, minimized: true, flash: 1 });
act(() => {
for (const id of [2, 3, 4]) openChat(partner(id));
});
expect(result.current.map((c) => c.partnerId)).toEqual([4, 3, 2]); // newest first, three at most
act(() => toggleMinimize(3));
act(() => closeChat(2));
expect(result.current.map((c) => [c.partnerId, c.minimized])).toEqual([
[4, false],
[3, true],
]);
const stored = JSON.parse(localStorage.getItem(LS.chatDock(7))!) as object[];
expect(stored).toEqual([
{ partnerId: 4, name: "P4", avatar: null, minimized: false },
{ partnerId: 3, name: "P3", avatar: null, minimized: true },
]);
});
});
frontend/src/lib/chatDock.ts
-113
View File
@@ -1,113 +0,0 @@
// App-wide store of open floating chat windows (the Messenger-style dock, bottom-right).
// A window can be opened from anywhere (a conversation's "pop out" button, or automatically
// when a message arrives) and stays open across page navigation. The dock state (which chats
// are open + their minimised state) is persisted per user so it survives a reload.
import { LS } from "./storage";
import { createStore } from "./store";
export interface DockChat {
partnerId: number;
name: string;
avatar: string | null;
minimized: boolean;
flash: number; // bumped to trigger a one-shot attention flash on the window
}
type PartnerLike = { id: number; name: string; avatar_url: string | null };
const MAX_OPEN = 3; // keep the dock from overflowing the corner
const dock = createStore<DockChat[]>([]);
let userId: number | null = null;
function storageKey(): string | null {
return userId != null ? LS.chatDock(userId) : null;
}
function persist(): void {
const k = storageKey();
if (!k) return;
try {
// Don't persist the transient flash counter.
localStorage.setItem(k, JSON.stringify(dock.get().map(({ flash, ...c }) => c)));
} catch {
/* ignore quota/serialization errors */
}
}
function emit(next: DockChat[]): void {
dock.set(next);
persist();
}
// Bind the dock to the signed-in user and restore their persisted windows (once per user).
export function initDock(uid: number): void {
if (userId === uid) return;
userId = uid;
let restored: DockChat[] = [];
try {
const raw = localStorage.getItem(storageKey()!);
if (raw)
restored = (JSON.parse(raw) as Omit<DockChat, "flash">[]).map((c) => ({ ...c, flash: 0 }));
} catch {
restored = [];
}
dock.set(restored.slice(0, MAX_OPEN));
}
export function openChat(partner: PartnerLike): void {
const existing = dock.get().find((c) => c.partnerId === partner.id);
if (existing) {
// Re-opening focuses it: ensure expanded and move to the front.
emit([
{ ...existing, minimized: false },
...dock.get().filter((c) => c.partnerId !== partner.id),
]);
return;
}
emit(
[
{
partnerId: partner.id,
name: partner.name,
avatar: partner.avatar_url,
minimized: false,
flash: 0,
},
...dock.get(),
].slice(0, MAX_OPEN),
);
}
// An incoming message arrived from `partner`: open the window if it's closed, otherwise just
// flash it (whether expanded or minimised — don't disturb the minimised state).
export function notifyIncoming(partner: PartnerLike): void {
const existing = dock.get().find((c) => c.partnerId === partner.id);
if (!existing) {
emit(
[
{
partnerId: partner.id,
name: partner.name,
avatar: partner.avatar_url,
minimized: false,
flash: 1,
},
...dock.get(),
].slice(0, MAX_OPEN),
);
return;
}
emit(dock.get().map((c) => (c.partnerId === partner.id ? { ...c, flash: c.flash + 1 } : c)));
}
export function closeChat(partnerId: number): void {
emit(dock.get().filter((c) => c.partnerId !== partnerId));
}
export function toggleMinimize(partnerId: number): void {
emit(dock.get().map((c) => (c.partnerId === partnerId ? { ...c, minimized: !c.minimized } : c)));
}
export function useDockChats(): DockChat[] {
return dock.useValue();
}
frontend/src/lib/e2ee.test.ts
-180
View File
@@ -1,180 +0,0 @@
// E32 S2: lib/e2ee was 14% covered, and every way it can break is silent — a message that will not
// decrypt, a passphrase that unlocks nothing, a key that does not survive a reload. Real WebCrypto
// (Node's), a minimal in-memory IndexedDB (the module uses open / one store / get / put / delete),
// and a fresh module per "device", because the unlocked key is module state.
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
import type { MyKeyBundle } from "./api";
type E2ee = typeof import("./e2ee");
function memoryIndexedDb() {
const stores = new Map<string, Map<unknown, unknown>>();
const later = (fn: () => void) => setTimeout(fn, 0);
const request = <T>(run: () => T) => {
const r: { result?: T; onsuccess?: () => void; onerror?: () => void } = {};
later(() => {
r.result = run();
r.onsuccess?.();
});
return r;
};
const db = {
createObjectStore: (name: string) => stores.set(name, new Map()),
transaction: (name: string) => {
const tx: { oncomplete?: () => void; onerror?: () => void; objectStore: () => unknown } = {
objectStore: () => {
const s = stores.get(name)!;
const done = <T>(v: T) => (later(() => tx.oncomplete?.()), v);
return {
get: (k: unknown) => request(() => s.get(k)),
put: (v: unknown, k: unknown) => done(s.set(k, v)),
delete: (k: unknown) => done(s.delete(k)),
};
},
};
return tx;
},
};
return {
open: () => {
const r: { result?: unknown; onupgradeneeded?: () => void; onsuccess?: () => void } = {};
later(() => {
r.result = db;
if (stores.size === 0) r.onupgradeneeded?.();
r.onsuccess?.();
});
return r;
},
};
}
async function freshDevice(): Promise<E2ee> {
vi.resetModules();
return import("./e2ee");
}
const bundleOf = (k: Awaited<ReturnType<E2ee["setup"]>>): MyKeyBundle =>
({ ...k, has_key: true }) as unknown as MyKeyBundle;
beforeEach(() => {
vi.stubGlobal("indexedDB", memoryIndexedDb());
});
afterEach(() => {
vi.unstubAllGlobals();
});
describe("e2ee", () => {
it("a message one user encrypts, the other decrypts — and nobody else", async () => {
const alice = await freshDevice();
const aliceKey = await alice.setup(1, "alice passphrase");
const bob = await freshDevice();
const bobKey = await bob.setup(2, "bob passphrase");
const msg = await alice.encryptFor(2, bobKey.public_key, "szia, Bob — ő 🎬");
expect(msg.ciphertext).not.toContain("Bob");
expect(await bob.decryptFrom(1, aliceKey.public_key, msg.ciphertext, msg.iv)).toBe(
"szia, Bob — ő 🎬",
);
const eve = await freshDevice();
await eve.setup(3, "eve passphrase");
await expect(eve.decryptFrom(1, aliceKey.public_key, msg.ciphertext, msg.iv)).rejects.toThrow();
}, 30_000);
it("each message gets its own IV", async () => {
const alice = await freshDevice();
await alice.setup(1, "p");
const bob = await freshDevice();
const bobKey = await bob.setup(2, "q");
const a = await alice.encryptFor(2, bobKey.public_key, "same");
const b = await alice.encryptFor(2, bobKey.public_key, "same");
expect(a.iv).not.toBe(b.iv);
expect(a.ciphertext).not.toBe(b.ciphertext);
}, 30_000);
it("a new device unlocks with the passphrase and refuses a wrong one", async () => {
const first = await freshDevice();
const bundle = bundleOf(await first.setup(1, "the right one"));
vi.stubGlobal("indexedDB", memoryIndexedDb()); // another browser: nothing stored
const second = await freshDevice();
expect(await second.loadFromDevice(1)).toBe(false);
await expect(second.unlock(1, "a wrong one", bundle)).rejects.toThrow();
expect(second.isUnlocked()).toBe(false);
await second.unlock(1, "the right one", bundle);
expect(second.isUnlocked()).toBe(true);
}, 30_000);
it("the unlocked key survives a reload on the same device, until it is reset", async () => {
const before = await freshDevice();
await before.setup(7, "p");
const after = await freshDevice(); // a reload: module state gone, IndexedDB kept
expect(after.isUnlocked()).toBe(false);
const seen = vi.fn();
after.subscribeUnlock(seen);
expect(await after.loadFromDevice(7)).toBe(true);
expect(after.isUnlocked()).toBe(true);
expect(seen).toHaveBeenCalled();
await after.resetLocal(7);
expect(after.isUnlocked()).toBe(false);
const again = await freshDevice();
expect(await again.loadFromDevice(7)).toBe(false);
}, 30_000);
it("an incomplete bundle and a locked device are refused, not guessed around", async () => {
const e = await freshDevice();
await expect(e.unlock(1, "p", { has_key: true } as unknown as MyKeyBundle)).rejects.toThrow(
"incomplete key bundle",
);
await expect(e.encryptFor(2, "AAAA", "x")).rejects.toThrow("locked");
});
it("the key check uses its own nonce, never the wrap IV (GCM nonce reuse)", async () => {
const e = await freshDevice();
const k = await e.setup(1, "p");
// Re-derive the wrap key the way the module does; then the key check must NOT open under the
// wrap IV (it would, were the nonce reused), while the wrapped key does.
const raw = (s: string) => Uint8Array.from(atob(s), (c) => c.charCodeAt(0));
const base = await crypto.subtle.importKey(
"raw",
new TextEncoder().encode("p"),
"PBKDF2",
false,
["deriveKey"],
);
const wrapKey = await crypto.subtle.deriveKey(
{ name: "PBKDF2", salt: raw(k.salt), iterations: 600_000, hash: "SHA-256" },
base,
{ name: "AES-GCM", length: 256 },
false,
["decrypt"],
);
const open = (ct: string) =>
crypto.subtle.decrypt({ name: "AES-GCM", iv: raw(k.wrap_iv) }, wrapKey, raw(ct));
await expect(open(k.wrapped_private_key)).resolves.toBeDefined();
await expect(open(k.key_check)).rejects.toThrow();
}, 30_000);
it("a partner's rotated key is used only after forgetConv", async () => {
const alice = await freshDevice();
const aliceKey = await alice.setup(1, "p");
const bobOld = await freshDevice();
const oldKey = await bobOld.setup(2, "q");
await alice.encryptFor(2, oldKey.public_key, "warm the cache");
const bobNew = await freshDevice(); // Bob reset his passphrase: a new keypair
const newKey = await bobNew.setup(2, "r");
// Cached by partner id alone: without forgetConv the OLD conversation key is still used…
const stale = await alice.encryptFor(2, newKey.public_key, "after the reset");
await expect(
bobNew.decryptFrom(1, aliceKey.public_key, stale.ciphertext, stale.iv),
).rejects.toThrow();
// …and after it, the new one.
alice.forgetConv(2);
const fresh = await alice.encryptFor(2, newKey.public_key, "after the reset");
expect(await bobNew.decryptFrom(1, aliceKey.public_key, fresh.ciphertext, fresh.iv)).toBe(
"after the reset",
);
}, 60_000);
});
frontend/src/lib/e2ee.ts
-253
View File
@@ -1,253 +0,0 @@
// End-to-end encryption for direct messages (notification module phase 2).
//
// Contract (validated against the backend): each user has an ECDH P-256 keypair. The private
// key is wrapped in the browser with an AES-GCM key derived (PBKDF2) from a message passphrase
// the server never sees; only the wrapped blob is uploaded. A conversation key is derived from
// ECDH(my private, partner public) → HKDF → AES-GCM, and each message is AES-GCM encrypted with
// a random IV. The server stores only ciphertext, so not even an admin can read a conversation.
//
// The unlocked private key is persisted per-device as a NON-EXTRACTABLE CryptoKey in IndexedDB,
// so the passphrase is needed once per device, then survives reloads (cleared with browser data).
import type { KeySetup, MyKeyBundle } from "./api";
const subtle = crypto.subtle;
const enc = new TextEncoder();
const dec = new TextDecoder();
const PBKDF2_ITERS = 600_000;
const HKDF_INFO = "siftlode-dm-v1";
const b64 = (buf: ArrayBuffer | Uint8Array): string => {
const bytes = buf instanceof Uint8Array ? buf : new Uint8Array(buf);
let s = "";
for (const b of bytes) s += String.fromCharCode(b);
return btoa(s);
};
const ub64 = (s: string): Uint8Array => Uint8Array.from(atob(s), (c) => c.charCodeAt(0));
// WebCrypto byte inputs: the DOM lib types want BufferSource backed by a plain ArrayBuffer;
// our Uint8Arrays/ArrayBuffers are functionally that, so coerce at the call sites.
const bsrc = (x: Uint8Array | ArrayBuffer): BufferSource => x as BufferSource;
// --- module state ---
let privKey: CryptoKey | null = null; // current unlocked (non-extractable) private key
const convKeys = new Map<number, CryptoKey>(); // partnerId → derived AES key
// Unlock state is shared app-wide (the Messages page and the floating chat dock both observe
// it), so expose a subscription for useSyncExternalStore.
const unlockSubs = new Set<() => void>();
function emitUnlock(): void {
for (const cb of unlockSubs) cb();
}
export function subscribeUnlock(cb: () => void): () => void {
unlockSubs.add(cb);
return () => unlockSubs.delete(cb);
}
export function isUnlocked(): boolean {
return !!privKey;
}
// --- IndexedDB (per-device persistence of the unlocked private key) ---
const DB_NAME = "siftlode-e2ee";
const STORE = "privkeys";
function idb(): Promise<IDBDatabase> {
return new Promise((resolve, reject) => {
const req = indexedDB.open(DB_NAME, 1);
req.onupgradeneeded = () => req.result.createObjectStore(STORE);
req.onsuccess = () => resolve(req.result);
req.onerror = () => reject(req.error);
});
}
async function idbGet(userId: number): Promise<CryptoKey | null> {
const db = await idb();
return new Promise((resolve) => {
const r = db.transaction(STORE, "readonly").objectStore(STORE).get(userId);
r.onsuccess = () => resolve((r.result as CryptoKey) ?? null);
r.onerror = () => resolve(null);
});
}
async function idbPut(userId: number, key: CryptoKey): Promise<void> {
const db = await idb();
await new Promise<void>((resolve) => {
const tx = db.transaction(STORE, "readwrite");
tx.objectStore(STORE).put(key, userId);
tx.oncomplete = () => resolve();
tx.onerror = () => resolve();
});
}
export async function clearDevice(userId: number): Promise<void> {
const db = await idb();
await new Promise<void>((resolve) => {
const tx = db.transaction(STORE, "readwrite");
tx.objectStore(STORE).delete(userId);
tx.oncomplete = () => resolve();
tx.onerror = () => resolve();
});
}
// Wipe this device's E2EE identity: forget the unlocked key + every derived conversation key,
// delete the persisted copy, and notify observers so the gate re-appears. Used by the passphrase
// reset, which also drops the server key so the next screen is a fresh setup.
export async function resetLocal(userId: number): Promise<void> {
privKey = null;
convKeys.clear();
await clearDevice(userId);
emitUnlock();
}
// --- key derivation ---
async function wrapKeyFrom(passphrase: string, salt: Uint8Array): Promise<CryptoKey> {
const base = await subtle.importKey("raw", bsrc(enc.encode(passphrase)), "PBKDF2", false, [
"deriveKey",
]);
return subtle.deriveKey(
{ name: "PBKDF2", salt: bsrc(salt), iterations: PBKDF2_ITERS, hash: "SHA-256" },
base,
{ name: "AES-GCM", length: 256 },
false,
["encrypt", "decrypt"],
);
}
async function importPrivate(pkcs8: ArrayBuffer): Promise<CryptoKey> {
// Non-extractable: usable for deriveBits but can never be exported again.
return subtle.importKey("pkcs8", bsrc(pkcs8), { name: "ECDH", namedCurve: "P-256" }, false, [
"deriveBits",
]);
}
// Try to restore the unlocked key from this device's storage. Returns true if unlocked.
export async function loadFromDevice(userId: number): Promise<boolean> {
const stored = await idbGet(userId);
if (stored) {
privKey = stored;
emitUnlock();
return true;
}
return false;
}
// Install a freshly-imported private key as the current identity: drop any derived conversation
// keys, persist it to this device, and notify unlock subscribers. Shared by setup() and unlock().
async function installKey(userId: number, key: CryptoKey): Promise<void> {
privKey = key;
convKeys.clear();
await idbPut(userId, key);
emitUnlock();
}
// First-run setup: generate a keypair, wrap the private key with the passphrase, persist a
// non-extractable copy locally, and return the bundle to upload to the server.
export async function setup(userId: number, passphrase: string): Promise<KeySetup> {
const kp = await subtle.generateKey({ name: "ECDH", namedCurve: "P-256" }, true, ["deriveBits"]);
const salt = crypto.getRandomValues(new Uint8Array(16));
const wrapIv = crypto.getRandomValues(new Uint8Array(12));
const wrapKey = await wrapKeyFrom(passphrase, salt);
const pkcs8 = await subtle.exportKey("pkcs8", kp.privateKey);
const wrapped = await subtle.encrypt({ name: "AES-GCM", iv: bsrc(wrapIv) }, wrapKey, bsrc(pkcs8));
// key_check is retained for the upload schema but MUST use its own nonce: reusing wrapIv under
// wrapKey would be GCM nonce-reuse (leaks keystream + enables GHASH forgery). It is no longer a
// verification oracle either — unlock() authenticates the passphrase via the wrapped-key GCM tag.
const checkIv = crypto.getRandomValues(new Uint8Array(12));
const keyCheck = await subtle.encrypt(
{ name: "AES-GCM", iv: bsrc(checkIv) },
wrapKey,
bsrc(enc.encode("ok")),
);
const spki = await subtle.exportKey("spki", kp.publicKey);
await installKey(userId, await importPrivate(pkcs8));
return {
public_key: b64(spki),
wrapped_private_key: b64(wrapped),
salt: b64(salt),
wrap_iv: b64(wrapIv),
key_check: b64(keyCheck),
};
}
// Unlock on a device from the server blob; throws if the passphrase is wrong.
export async function unlock(
userId: number,
passphrase: string,
bundle: MyKeyBundle,
): Promise<void> {
if (!bundle.wrapped_private_key || !bundle.salt || !bundle.wrap_iv || !bundle.key_check) {
throw new Error("incomplete key bundle");
}
const wrapKey = await wrapKeyFrom(passphrase, ub64(bundle.salt));
// Wrong passphrase → the AES-GCM auth tag fails on this decrypt. (No separate key_check oracle:
// that was redundant with this tag and formerly shared wrapIv — see setup().)
const pkcs8 = await subtle.decrypt(
{ name: "AES-GCM", iv: bsrc(ub64(bundle.wrap_iv)) },
wrapKey,
bsrc(ub64(bundle.wrapped_private_key)),
);
await installKey(userId, await importPrivate(pkcs8));
}
// Drop the cached derived conversation key for a partner. convKeyFor caches by partnerId alone, so
// after a partner rotates their public key (a passphrase reset) the caller must call this before
// re-deriving with the fresh key — otherwise the stale key would be returned.
export function forgetConv(partnerId: number): void {
convKeys.delete(partnerId);
}
// --- per-conversation encryption ---
async function convKeyFor(partnerId: number, partnerPubB64: string): Promise<CryptoKey> {
const cached = convKeys.get(partnerId);
if (cached) return cached;
if (!privKey) throw new Error("locked");
const pub = await subtle.importKey(
"spki",
bsrc(ub64(partnerPubB64)),
{ name: "ECDH", namedCurve: "P-256" },
false,
[],
);
const bits = await subtle.deriveBits({ name: "ECDH", public: pub }, privKey, 256);
const hk = await subtle.importKey("raw", bits, "HKDF", false, ["deriveKey"]);
const key = await subtle.deriveKey(
{
name: "HKDF",
hash: "SHA-256",
salt: bsrc(new Uint8Array(0)),
info: bsrc(enc.encode(HKDF_INFO)),
},
hk,
{ name: "AES-GCM", length: 256 },
false,
["encrypt", "decrypt"],
);
convKeys.set(partnerId, key);
return key;
}
export async function encryptFor(
partnerId: number,
partnerPubB64: string,
plaintext: string,
): Promise<{ ciphertext: string; iv: string }> {
const key = await convKeyFor(partnerId, partnerPubB64);
const iv = crypto.getRandomValues(new Uint8Array(12));
const ct = await subtle.encrypt(
{ name: "AES-GCM", iv: bsrc(iv) },
key,
bsrc(enc.encode(plaintext)),
);
return { ciphertext: b64(ct), iv: b64(iv) };
}
export async function decryptFrom(
partnerId: number,
partnerPubB64: string,
ciphertext: string,
iv: string,
): Promise<string> {
const key = await convKeyFor(partnerId, partnerPubB64);
const pt = await subtle.decrypt(
{ name: "AES-GCM", iv: bsrc(ub64(iv)) },
key,
bsrc(ub64(ciphertext)),
);
return dec.decode(pt);
}
frontend/src/lib/gates.snapshot.json
+6 -67
View File
@@ -270,7 +270,7 @@
"name": "XMLHttpRequest"
},
{
"message": "Use the logged request layer: `WebSocket` belongs to src/lib/messagesSocket.ts only (E22 S4 — a request outside it never reaches the client log).",
"message": "No `WebSocket` without a logged owner module (E22 S4).",
"name": "WebSocket"
},
{
@@ -338,7 +338,7 @@
"name": "fetch"
},
{
"message": "Use the logged request layer: `WebSocket` belongs to src/lib/messagesSocket.ts only (E22 S4 — a request outside it never reaches the client log).",
"message": "No `WebSocket` without a logged owner module (E22 S4).",
"name": "WebSocket"
},
{
@@ -386,7 +386,7 @@
"name": "XMLHttpRequest"
},
{
"message": "Use the logged request layer: `WebSocket` belongs to src/lib/messagesSocket.ts only (E22 S4 — a request outside it never reaches the client log).",
"message": "No `WebSocket` without a logged owner module (E22 S4).",
"name": "WebSocket"
},
{
@@ -408,54 +408,6 @@
},
"settings": null
},
"lib/messagesSocket.ts": {
"languageOptions": {
"ecmaVersion": 2022,
"globals": "1169 names, sha1 aee621727a03",
"parser": "typescript-eslint/parser",
"parserOptions": { "projectService": true, "tsconfigRootDir": "." },
"sourceType": "module"
},
"linterOptions": { "reportUnusedDisableDirectives": 2 },
"notApplied": [],
"plugins": [
"@",
"@eslint-community/eslint-comments",
"@typescript-eslint",
"local",
"react-hooks",
"react-refresh"
],
"rules": {
"no-restricted-globals": [
2,
{
"message": "Use the logged request layer: `fetch` belongs to src/lib/http.ts only (E22 S4 — a request outside it never reaches the client log).",
"name": "fetch"
},
{
"message": "Use the logged request layer: `XMLHttpRequest` belongs to src/lib/api/core.ts only (E22 S4 — a request outside it never reaches the client log).",
"name": "XMLHttpRequest"
},
{
"message": "No `EventSource` without a logged owner module (E22 S4).",
"name": "EventSource"
}
],
"no-restricted-imports": [
2,
{
"patterns": [
{
"message": "lib/ sits below components/: it may not import from components/, not even a type. Move the shared piece down into lib/.",
"regex": "^(\\.\\./)+components(/|$)"
}
]
}
]
},
"settings": null
},
"src": {
"languageOptions": {
"ecmaVersion": 2022,
@@ -852,7 +804,7 @@
"name": "XMLHttpRequest"
},
{
"message": "Use the logged request layer: `WebSocket` belongs to src/lib/messagesSocket.ts only (E22 S4 — a request outside it never reaches the client log).",
"message": "No `WebSocket` without a logged owner module (E22 S4).",
"name": "WebSocket"
},
{
@@ -1159,7 +1111,7 @@
"name": "XMLHttpRequest"
},
{
"message": "Use the logged request layer: `WebSocket` belongs to src/lib/messagesSocket.ts only (E22 S4 — a request outside it never reaches the client log).",
"message": "No `WebSocket` without a logged owner module (E22 S4).",
"name": "WebSocket"
},
{
@@ -1362,7 +1314,7 @@
"name": "XMLHttpRequest"
},
{
"message": "Use the logged request layer: `WebSocket` belongs to src/lib/messagesSocket.ts only (E22 S4 — a request outside it never reaches the client log).",
"message": "No `WebSocket` without a logged owner module (E22 S4).",
"name": "WebSocket"
},
{
@@ -1465,7 +1417,6 @@
"src/lib/channelOrder.dom.test.ts",
"src/lib/channelWriteFailures.dom.test.tsx",
"src/lib/channelsUrlState.dom.test.ts",
"src/lib/chatDock.dom.test.ts",
"src/lib/chipLane.contract.test.ts",
"src/lib/chipOverflow.test.ts",
"src/lib/columnSort.test.ts",
@@ -1478,7 +1429,6 @@
"src/lib/downloadActions.test.ts",
"src/lib/downloadFailure.test.ts",
"src/lib/downloads.test.ts",
"src/lib/e2ee.test.ts",
"src/lib/fadeEdge.contract.test.ts",
"src/lib/feedSort.yt.test.ts",
"src/lib/focusSafe.contract.test.ts",
@@ -1512,7 +1462,6 @@
"src/lib/log.test.ts",
"src/lib/logHooks.dom.test.ts",
"src/lib/logsUrlState.test.ts",
"src/lib/messagesSocket.test.ts",
"src/lib/moveInList.test.ts",
"src/lib/mutationFailures.contract.test.ts",
"src/lib/navPosition.wiring.contract.test.ts",
@@ -1588,7 +1537,6 @@
],
"lib/api/core.ts": ["src/lib/api/core.ts"],
"lib/http.ts": ["src/lib/http.ts"],
"lib/messagesSocket.ts": ["src/lib/messagesSocket.ts"],
"src": [
"src/App.tsx",
"src/components/About.tsx",
@@ -1613,8 +1561,6 @@
"src/components/ChannelTags.tsx",
"src/components/Channels.tsx",
"src/components/ChannelsProvider.tsx",
"src/components/ChatDock.tsx",
"src/components/ChatThread.tsx",
"src/components/ConfigPanel.tsx",
"src/components/ConfirmProvider.tsx",
"src/components/DateFilterSelect.tsx",
@@ -1635,12 +1581,10 @@
"src/components/Header.tsx",
"src/components/Home.tsx",
"src/components/IssueComposer.tsx",
"src/components/KeyGate.tsx",
"src/components/LanguageSwitcher.tsx",
"src/components/LibraryPlayer.tsx",
"src/components/LogLine.tsx",
"src/components/MediaResumeButtons.tsx",
"src/components/Messages.tsx",
"src/components/MyLogViewer.tsx",
"src/components/NavSidebar.tsx",
"src/components/NavigationProvider.tsx",
@@ -1800,7 +1744,6 @@
"src/components/Home.pin.dom.test.tsx",
"src/components/IssueComposer.dom.test.tsx",
"src/components/LibraryPlayer.dom.test.tsx",
"src/components/Messages.keyboard.dom.test.tsx",
"src/components/MyLogViewer.dom.test.tsx",
"src/components/NavigationProvider.dom.test.tsx",
"src/components/NotificationsPanel.menu.dom.test.tsx",
@@ -1914,7 +1857,6 @@
"src/lib/api/discover.ts",
"src/lib/api/downloads.ts",
"src/lib/api/feed.ts",
"src/lib/api/messaging.ts",
"src/lib/api/notifications.ts",
"src/lib/api/playlists.ts",
"src/lib/api/plex.ts",
@@ -1933,7 +1875,6 @@
"src/lib/channelLayout.ts",
"src/lib/channelOrder.ts",
"src/lib/channelsUrlState.ts",
"src/lib/chatDock.ts",
"src/lib/chipOverflow.ts",
"src/lib/clipboard.ts",
"src/lib/collate.ts",
@@ -1947,7 +1888,6 @@
"src/lib/downloadActions.ts",
"src/lib/downloadFailure.ts",
"src/lib/downloads.ts",
"src/lib/e2ee.ts",
"src/lib/entryUrl.ts",
"src/lib/errorDialog.ts",
"src/lib/feedSort.ts",
@@ -1973,7 +1913,6 @@
"src/lib/logsUrlState.ts",
"src/lib/mediaLog.ts",
"src/lib/mediaSource.ts",
"src/lib/messaging.ts",
"src/lib/modules.ts",
"src/lib/moveInList.ts",
"src/lib/nav.ts",
frontend/src/lib/history.ts
+1 -1
View File
@@ -3,7 +3,7 @@
//
// Two primitives share the existing page-history (App stamps `sfPage` in history.state):
// - useHistorySubview: a module's active sub-view rides in history.state._sub, so Back inside
// a module (e.g. Messages thread → list) returns to the parent view first.
// a module (e.g. the sign-in card's "forgot password" → sign-in) returns to the parent view first.
// - useBackToClose: while an overlay/modal is mounted it occupies one history entry; Back
// closes the topmost one. A module-level stack keeps nesting correct — closing one modal by
// its own button pops exactly its entry without tripping the modals underneath.
frontend/src/lib/keymap.ts
-1
View File
@@ -116,7 +116,6 @@ export const SHORTCUTS = [
labelKey: "keys.goNotifications",
page: "notifications",
},
{ id: "goMessages", scope: "page", keys: ["g m"], labelKey: "keys.goMessages", page: "messages" },
{
id: "goDownloads",
scope: "page",
frontend/src/lib/log.ts
+1 -1
View File
@@ -11,7 +11,7 @@
// REDACTION HAPPENS HERE, at capture, not at the call site — the same rules as the server's handler,
// held to them by a fixture both test suites run (`backend/tests/fixtures/log_redaction_cases.json`).
// A secret cannot leak by forgetting to scrub it at one call site, and a new call site is safe by
// default. Never kept, at any level: passwords, tokens, cookies, secret config, E2EE material, email
// default. Never kept, at any level: passwords, tokens, cookies, secret config, ciphertext, email
// addresses. What a level ADDS (filter values at DEBUG, search strings at TRACE) is decided by the
// call site asking `enabled(level)` before it builds the attribute.
//
frontend/src/lib/messagesSocket.test.ts
-74
View File
@@ -1,74 +0,0 @@
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
vi.mock("./api", () => ({ getActiveAccount: () => 7 }));
// A WebSocket double the test drives: each instance is recorded, and its events are fired by hand.
class FakeSocket {
static all: FakeSocket[] = [];
url: string;
onopen: (() => void) | null = null;
onmessage: ((ev: { data: string }) => void) | null = null;
onclose: ((ev: { code: number; wasClean: boolean }) => void) | null = null;
onerror: (() => void) | null = null;
closed = false;
constructor(url: string) {
this.url = url;
FakeSocket.all.push(this);
}
close() {
this.closed = true; // the real close event arrives later, on its own task — fired by the test
}
}
beforeEach(() => {
vi.useFakeTimers();
vi.resetModules();
FakeSocket.all = [];
vi.stubGlobal("WebSocket", FakeSocket);
vi.stubGlobal("location", { protocol: "https:", host: "app.example" });
});
afterEach(() => {
vi.useRealTimers();
vi.unstubAllGlobals();
});
const frame = (sock: FakeSocket) =>
sock.onmessage?.({ data: JSON.stringify({ type: "message", message: { id: 1 } }) });
describe("messagesSocket", () => {
it("a socket closed on unsubscribe cannot take over from the one a re-subscribe opened", async () => {
const { onMessage } = await import("./messagesSocket");
const first = vi.fn();
onMessage(first)(); // subscribe, then leave (a remount / StrictMode's double effect)
const got = vi.fn();
onMessage(got);
const [old, current] = FakeSocket.all;
expect(old!.closed).toBe(true);
old!.onclose?.({ code: 1000, wasClean: true }); // the OLD socket's close lands late
vi.advanceTimersByTime(60_000);
expect(FakeSocket.all).toHaveLength(2); // no third socket
frame(current!);
expect(got).toHaveBeenCalledOnce();
});
it("reconnects when the current socket drops, and logs it without the account query", async () => {
// Imported after resetModules, like the socket module: the ring it writes to is this instance.
const { onMessage } = await import("./messagesSocket");
const { events } = await import("./log");
onMessage(() => {});
const [sock] = FakeSocket.all;
expect(sock!.url).toBe("wss://app.example/api/messages/ws?account=7");
sock!.onopen?.();
sock!.onclose?.({ code: 1006, wasClean: false });
vi.advanceTimersByTime(1000);
expect(FakeSocket.all).toHaveLength(2);
const logged = events().map((e) => [e.event, e.level, e.attrs?.path]);
expect(logged).toEqual([
["ws.open", "INFO", "/api/messages/ws"],
["ws.close", "WARNING", "/api/messages/ws"],
]);
expect(JSON.stringify(events())).not.toContain("account");
});
});
frontend/src/lib/messagesSocket.ts
-137
View File
@@ -1,137 +0,0 @@
// Live message delivery over a WebSocket. The server pushes a {type:"message", message} frame
// to all of a user's open tabs when a message is stored; subscribers react (e.g. refetch the
// thread + conversations). Auto-reconnects with backoff; a low-frequency poll elsewhere is the
// safety net if the socket is down.
import { getActiveAccount, type Message, type MessageUser } from "./api";
import { log } from "./log";
// What the client log records of the socket: its lifecycle, and at DEBUG each frame's TYPE. Never a
// frame's content — chat plaintext stays out of every log structurally, not by redaction. The path
// is fixed, without the `?account=` query.
const WS_PATH = "/api/messages/ws";
// A pushed message plus both parties, so the dock can open/flash the right window.
interface IncomingMessage {
message: Message;
from?: MessageUser;
to?: MessageUser;
}
type Handler = (e: IncomingMessage) => void;
type UnreadHandler = () => void;
const handlers = new Set<Handler>();
const unreadHandlers = new Set<UnreadHandler>();
let ws: WebSocket | null = null;
let started = false;
let backoff = 1000;
let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
function url(): string {
const proto = location.protocol === "https:" ? "wss" : "ws";
// A WebSocket can't carry the X-Siftlode-Account header, so the per-tab account rides in the
// query string (validated against the browser wallet server-side). The account is read once
// here: switching accounts always goes through location.reload() (NavSidebar), which rebuilds
// this module and reopens the socket, so it's intentionally fixed for the socket's lifetime.
const account = getActiveAccount();
const qs = account != null ? `?account=${account}` : "";
return `${proto}://${location.host}${WS_PATH}${qs}`;
}
function open() {
let sock: WebSocket;
try {
sock = new WebSocket(url());
} catch (e) {
log.warn("ws.failed", "could not open the socket", { path: WS_PATH, message: String(e) });
schedule();
return;
}
ws = sock;
// Every handler checks it still belongs to the CURRENT socket. A socket closed by the last
// subscriber leaving closes asynchronously: when a subscriber came back in between (a remount,
// StrictMode's double effect) a newer socket is already open, and the old one's close used to
// clear that newer reference and schedule a THIRD — two live sockets, every message delivered twice.
sock.onopen = () => {
if (ws !== sock) return;
log.info("ws.open", "socket open", { path: WS_PATH });
backoff = 1000;
};
sock.onmessage = (ev) => {
if (ws !== sock) return;
try {
const data = JSON.parse(ev.data);
log.debug("ws.frame", "socket frame", { path: WS_PATH, type: String(data?.type) });
if (data?.type === "message" && data.message) {
const e: IncomingMessage = {
message: data.message as Message,
from: data.from,
to: data.to,
};
for (const h of handlers) h(e);
} else if (data?.type === "unread") {
// Sent to a user's OTHER tabs when they read a thread elsewhere, so the badge updates live.
for (const h of unreadHandlers) h();
}
} catch {
/* ignore malformed frames */
}
};
sock.onclose = (ev) => {
const current = ws === sock;
// A socket we let go of (the last subscriber left) closing is routine; the current one closing
// is the server or the network going away, and the reconnect that follows is worth seeing.
(current ? log.warn : log.info)("ws.close", "socket closed", {
path: WS_PATH,
code: ev.code,
clean: ev.wasClean,
reconnect_ms: current && started ? backoff : null,
});
if (!current) return;
ws = null;
if (started) schedule();
};
sock.onerror = () => {
sock.close();
};
}
function schedule() {
if (reconnectTimer) return;
reconnectTimer = setTimeout(() => {
reconnectTimer = null;
if (started) open();
}, backoff);
backoff = Math.min(backoff * 2, 30000);
}
// Subscribe to live messages. Opens the socket on the first subscriber and closes it when the
// last one leaves.
export function onMessage(h: Handler): () => void {
handlers.add(h);
if (!started) {
started = true;
open();
}
return () => {
handlers.delete(h);
if (handlers.size === 0) {
started = false;
if (reconnectTimer) {
clearTimeout(reconnectTimer);
reconnectTimer = null;
}
ws?.close();
ws = null;
}
};
}
// Subscribe to "your unread changed elsewhere" pings (a read on another tab/device). The socket is
// already opened/closed by onMessage subscribers (the app-wide ChatDock keeps one), so this only
// registers a callback — it does not open the socket on its own.
export function onUnread(h: UnreadHandler): () => void {
unreadHandlers.add(h);
return () => {
unreadHandlers.delete(h);
};
}
frontend/src/lib/messaging.ts
-66
View File
@@ -1,66 +0,0 @@
// Shared messaging helpers used by both the Messages page and the floating chat dock.
import { useSyncExternalStore } from "react";
import { qk } from "./queryKeys";
import { useQuery } from "@tanstack/react-query";
import { api } from "./api";
import { forgetConv, isUnlocked, subscribeUnlock } from "./e2ee";
export const SYSTEM_ID = 0; // synthetic "Siftlode" system conversation partner id
// Safety-net poll interval for message queries; live updates arrive over the WebSocket.
export const POLL_MS = 20000;
// Cache of partner public keys (the server is the directory). Keys are stable in normal use, but a
// partner can rotate theirs via a passphrase reset — refreshPartnerPub() evicts a stale entry (and
// its derived conversation key) so the next fetch picks up the new key.
const pubCache = new Map<number, string>();
export async function partnerPub(partnerId: number): Promise<string> {
const cached = pubCache.get(partnerId);
if (cached) return cached;
const r = await api.messagePublicKey(partnerId);
pubCache.set(partnerId, r.public_key);
return r.public_key;
}
// Drop a partner's cached public key + derived conversation key and refetch. Called after a decrypt
// fails, which can mean the partner reset their passphrase and published a NEW keypair; refetching
// lets this device both read their new messages and encrypt future ones under the current key.
//
// KNOWN LIMITATION: this refresh is wired only to the DECRYPT path. If you send a partner a message
// AFTER they rotated their key but BEFORE any of their messages arrived to trigger a refresh, that
// one send is encrypted under the stale cached key and is undecryptable for them (subsequent sends
// self-heal once an incoming message refreshes the cache). Accepted for now — same cross-user
// staleness envelope as the multi-device note in useKeyState; a fuller fix needs a key TTL / a
// send-time freshness check, which is out of the current no-forward-secrecy scope.
export async function refreshPartnerPub(partnerId: number): Promise<string> {
pubCache.delete(partnerId);
forgetConv(partnerId);
return partnerPub(partnerId);
}
// Live "is secure messaging unlocked on this device" — shared so the page and the dock agree.
function useUnlocked(): boolean {
return useSyncExternalStore(subscribeUnlock, isUnlocked, isUnlocked);
}
// The SERVER is the source of truth for whether messaging is set up. Combining it with the
// local unlock state gives the real gate: "setup" if the server has no key (even if a stale
// private key lingers in this browser — setup overwrites it), "unlock" if the server has a key
// but this device hasn't unlocked it, else "ready".
//
// KNOWN LIMITATION (multi-device, passphrase reset): this doesn't compare the locally-unlocked
// key's public half against the server's current public_key, so if the user resets their passphrase
// on ANOTHER device (new keypair), this already-unlocked device stays "ready" with the now-dead old
// key and silently fails to decrypt new messages until it's manually re-unlocked. Accepted for now:
// it fits the E2EE scope (static pairwise key, no forward secrecy) and self-heals once the device is
// re-unlocked with the new passphrase. Incoming-message decrypt failures on the CURRENT device DO
// self-heal via refreshPartnerPub() (a partner's rotation), which covers the common single-device case.
export type KeyState = "loading" | "setup" | "unlock" | "ready";
export function useKeyState(): KeyState {
const unlocked = useUnlocked();
const q = useQuery({ queryKey: qk.messageKey(), queryFn: api.messageMyKey, staleTime: 60_000 });
if (q.isLoading && !q.data) return "loading";
if (!(q.data?.configured ?? false)) return "setup";
if (!unlocked) return "unlock";
return "ready";
}
frontend/src/lib/modules.ts
-9
View File
@@ -6,7 +6,6 @@ import {
Download,
Home,
ListVideo,
MessageSquare,
ScrollText,
FileSearch,
Settings,
@@ -90,14 +89,6 @@ const MODULES: readonly ModuleDef[] = [
icon: Bell,
hasBadge: true,
},
{
id: "messages",
labelKey: "messages.navLabel",
railKey: "nav.rail.messages",
icon: MessageSquare,
hasBadge: true,
gate: notDemo,
},
{
id: "downloads",
labelKey: "downloads.navLabel",
frontend/src/lib/networkBoundary.contract.test.ts
-1
View File
@@ -34,7 +34,6 @@ describe("network and console boundary", () => {
it.each([
["src/lib/http.ts", "fetch"],
["src/lib/api/core.ts", "XMLHttpRequest"],
["src/lib/messagesSocket.ts", "WebSocket"],
])("%s may use %s — and nothing else", async (owner, own) => {
const found = await flagged(ALL, owner);
// Its own global goes quiet; the other two globals, the two properties and console still fire.
frontend/src/lib/pageMeta.test.ts
-1
View File
@@ -11,7 +11,6 @@ const EXPECTED: Record<Page, string> = {
channels: "header.channelManager",
playlists: "header.account.playlists",
notifications: "inbox.navLabel",
messages: "messages.navLabel",
downloads: "downloads.navLabel",
stats: "header.usageStats",
plex: "plex.navLabel",
frontend/src/lib/queryKeys.test.ts
-3
View File
@@ -26,8 +26,6 @@ describe("qk — bare vs parameterized branch", () => {
expect(qk.playlist(7)).toEqual(["playlist", 7]);
expect(qk.ytSearch(null, 3)).toEqual(["yt-search", null, 3]);
expect(qk.ytSearch("cats", 3)).toEqual(["yt-search", "cats", 3]);
expect(qk.thread(null)).toEqual(["thread", null]);
expect(qk.thread(42)).toEqual(["thread", 42]);
});
});
@@ -50,7 +48,6 @@ describe("qk — single-id and scalar keys", () => {
expect(qk.myStatus()).toEqual(["my-status"]);
expect(qk.channels()).toEqual(["channels"]);
expect(qk.playlists()).toEqual(["playlists"]);
expect(qk.conversations()).toEqual(["conversations"]);
expect(qk.downloads()).toEqual(["downloads"]);
expect(qk.adminUsers()).toEqual(["admin-users"]);
expect(qk.plex()).toEqual(["plex"]);
frontend/src/lib/queryKeys.ts
+1 -7
View File
@@ -62,12 +62,7 @@ export const qk = {
notifications: () => ["notifications"] as const,
notifUnread: () => ["notif-unread"] as const,
// --- messaging ---
conversations: () => ["conversations"] as const,
thread: (partnerId: number | null) => ["thread", partnerId] as const,
messageKey: () => ["message-key"] as const,
messageUnread: () => ["message-unread"] as const,
messageUsers: () => ["message-users"] as const,
// --- sharing ---
shareRecipients: () => ["share-recipients"] as const,
// --- downloads ---
@@ -168,6 +163,5 @@ export const LANGUAGE_ORDERED = [
qk.discoveredChannels(),
qk.blockedChannels(),
qk.shareRecipients(),
qk.messageUsers(),
qk.plexCollections(),
] as const;
frontend/src/lib/sourceSize.contract.test.ts
-1
View File
@@ -52,7 +52,6 @@ const COMPLEX: Record<string, number> = {
"components/Home.tsx::Home": 34,
"components/Home.tsx::useHomeCardMenu": 21,
"components/IssueComposer.tsx::ComposerBody": 34,
"components/KeyGate.tsx::KeyGate": 22,
"components/NotificationsPanel.tsx::NotificationRow": 28,
"components/OnboardingWizard.tsx::OnboardingWizard": 21,
"components/PersonalViewsModal.tsx::PersonalViewsModal": 22,
frontend/src/lib/storage.ts
-1
View File
@@ -74,7 +74,6 @@ export const LS = {
// The public /watch page's repeat toggle (JSON boolean; on by default). Browser-wide, NOT per account:
// that page runs outside the app, with no account at all.
watchRepeat: "siftlode.watchRepeat",
chatDock: (userId: number) => `siftlode.chatDock.${userId}`,
} as const;
// --- per-account scoping -----------------------------------------------------------------
frontend/src/lib/urlState.ts
-1
View File
@@ -131,7 +131,6 @@ const PAGES = [
"audit",
"logs",
"notifications",
"messages",
"downloads",
"plex",
] as const;