Nests: team rooms with core crows and borrowing
- Server: nests API, persistence, core-first picking, borrowed flag (built by the backend agent against EVENTS.md; tests pass with -race) - UI: nests in the sidebar, one feed per nest, header shows the core team, New nest dialog, borrowed crows labeled, per-nest waiting count - start.command: one-click local server in controlled mode (mock crows, localhost only, state in .crows/) Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01UQnSw4RRWp8uqpj3nsnnXF
This commit is contained in:
14 files changed
+782
-62
No files matched your search
+22
-3
@@ -17,6 +17,9 @@
|
||||
</nav>
|
||||
<aside class="side" aria-label="The flock">
|
||||
<div class="brand">So Many Crows</div>
|
||||
<h2>Nests</h2>
|
||||
<nav class="nests" id="nests" aria-label="Nests"></nav>
|
||||
<button class="new-nest" id="new-nest" type="button">+ New nest</button>
|
||||
<h2>The flock</h2>
|
||||
<div class="roster" id="roster"></div>
|
||||
<label class="who">You are <input id="requester" maxlength="40" autocomplete="off" /></label>
|
||||
@@ -24,11 +27,11 @@
|
||||
|
||||
<section class="room">
|
||||
<header class="room-head">
|
||||
<h1># todo</h1>
|
||||
<p class="room-sub">Hand the flock a list. The Sentry sorts it, crows fly, you judge.</p>
|
||||
<h1 id="room-title"># todo</h1>
|
||||
<p class="room-sub" id="room-sub">The whole flock roosts here. Hand it a list: the Sentry sorts it, crows fly, you judge.</p>
|
||||
</header>
|
||||
|
||||
<ol class="feed" id="feed" aria-live="polite"></ol>
|
||||
<div class="feeds" id="feeds"></div>
|
||||
<p class="typing" id="typing" aria-live="polite"></p>
|
||||
|
||||
<form class="composer" id="composer">
|
||||
@@ -39,6 +42,22 @@
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
<dialog class="nest-dialog inked" id="nest-dialog">
|
||||
<form method="dialog" id="nest-form">
|
||||
<h2>New nest</h2>
|
||||
<p class="dialog-sub">A room where a team of crows works together. The Sentry can borrow other crows when a job needs more hands.</p>
|
||||
<label class="dialog-field">Name <input id="nest-name" maxlength="40" required autocomplete="off" placeholder="Launch copy" /></label>
|
||||
<fieldset class="pick">
|
||||
<legend>Core crows</legend>
|
||||
<div class="pick-grid" id="nest-crows"></div>
|
||||
</fieldset>
|
||||
<p class="err" id="nest-err"></p>
|
||||
<div class="dialog-actions">
|
||||
<button class="btn btn-no inked" value="cancel" formnovalidate>Cancel</button>
|
||||
<button class="btn btn-go inked" id="nest-create" value="create">Build the nest</button>
|
||||
</div>
|
||||
</form>
|
||||
</dialog>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
+34
-2
@@ -5,11 +5,11 @@ export type PostListResult =
|
||||
| { ok: false; pranked: true; message: string; cooldownS: number }
|
||||
| { ok: false; pranked: false; message: string };
|
||||
|
||||
export async function postList(text: string, requester: string): Promise<PostListResult> {
|
||||
export async function postList(text: string, requester: string, nestId: string): Promise<PostListResult> {
|
||||
const res = await fetch("/api/lists", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ text, requester }),
|
||||
body: JSON.stringify({ text, requester, nest_id: nestId }),
|
||||
});
|
||||
const body = await res.json().catch(() => ({}));
|
||||
if (res.ok) return { ok: true, listId: String(body.list_id) };
|
||||
@@ -43,3 +43,35 @@ export async function getTrust(): Promise<TrustLevels> {
|
||||
export function listEvents(listId: string): EventSource {
|
||||
return new EventSource(`/api/events?list_id=${encodeURIComponent(listId)}`);
|
||||
}
|
||||
|
||||
// ---------- nests ----------
|
||||
export type Nest = { nestId: string; name: string; crows: string[] };
|
||||
export type Nests = { roster: string[]; nests: Nest[] };
|
||||
|
||||
const DEFAULT_ROSTER = ["Hugin", "Munin", "Corvina", "Soot", "Pepper", "Inky", "Edgar", "Jet"];
|
||||
|
||||
export async function getNests(): Promise<Nests> {
|
||||
try {
|
||||
const res = await fetch("/api/nests");
|
||||
if (!res.ok) throw new Error(String(res.status));
|
||||
const body = await res.json();
|
||||
return {
|
||||
roster: (body.roster ?? DEFAULT_ROSTER).map(String),
|
||||
nests: (body.nests ?? []).map((n: any) => ({ nestId: String(n.nest_id), name: String(n.name), crows: (n.crows ?? []).map(String) })),
|
||||
};
|
||||
} catch {
|
||||
// A server without nests still has the default room.
|
||||
return { roster: DEFAULT_ROSTER, nests: [{ nestId: "todo", name: "todo", crows: [] }] };
|
||||
}
|
||||
}
|
||||
|
||||
export async function createNest(name: string, crows: string[]): Promise<Nest> {
|
||||
const res = await fetch("/api/nests", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ name, crows }),
|
||||
});
|
||||
const body = await res.json().catch(() => ({}));
|
||||
if (!res.ok) throw new Error(String(body.message ?? `Couldn't build that nest (${res.status}).`));
|
||||
return { nestId: String(body.nest_id), name: String(body.name), crows: (body.crows ?? []).map(String) };
|
||||
}
|
||||
+151
-32
@@ -1,11 +1,12 @@
|
||||
import "./style.css";
|
||||
import { getTrust, listEvents, postList, postVerdict, type TrustLevels } from "./api";
|
||||
import { createNest, getNests, getTrust, listEvents, postList, postVerdict, type Nest, type TrustLevels } from "./api";
|
||||
import { crowAvatar, svgCrow, type CrowView, type Role } from "./crow";
|
||||
|
||||
// ---------- page ----------
|
||||
const $ = <T extends HTMLElement>(id: string) => document.getElementById(id) as T;
|
||||
const roster = $<HTMLDivElement>("roster");
|
||||
const feed = $<HTMLOListElement>("feed");
|
||||
const feedsBox = $<HTMLDivElement>("feeds");
|
||||
const nestNav = $<HTMLElement>("nests");
|
||||
const typing = $<HTMLParagraphElement>("typing");
|
||||
const form = $<HTMLFormElement>("composer");
|
||||
const listInput = $<HTMLTextAreaElement>("list");
|
||||
@@ -110,16 +111,70 @@ function fmtTime(ts?: string) {
|
||||
return isNaN(+d) ? "" : d.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
|
||||
}
|
||||
|
||||
function append(li: HTMLLIElement) {
|
||||
// ---------- nests: one room (and one feed) per team ----------
|
||||
type NestRoom = Nest & { feed: HTMLOListElement; link: HTMLButtonElement; count: HTMLSpanElement };
|
||||
const nests = new Map<string, NestRoom>();
|
||||
let flockNames: string[] = [];
|
||||
let current = "todo";
|
||||
const roomTitle = $<HTMLHeadingElement>("room-title");
|
||||
const roomSub = $<HTMLParagraphElement>("room-sub");
|
||||
const roomTab = $<HTMLButtonElement>("tab-room");
|
||||
|
||||
function addNest(n: Nest): NestRoom {
|
||||
const feed = el("ol", "feed");
|
||||
feed.setAttribute("aria-live", "polite");
|
||||
feed.hidden = true;
|
||||
feedsBox.append(feed);
|
||||
const link = el("button", "nest-link");
|
||||
link.type = "button";
|
||||
const count = el("span", "nest-count");
|
||||
link.append(el("span", "nest-name", `# ${n.name}`), count);
|
||||
link.addEventListener("click", () => { selectNest(n.nestId); showView("room"); });
|
||||
nestNav.append(link);
|
||||
const room = { ...n, feed, link, count };
|
||||
nests.set(n.nestId, room);
|
||||
return room;
|
||||
}
|
||||
|
||||
function nest(id: string): NestRoom {
|
||||
return nests.get(id) ?? nests.get("todo")!;
|
||||
}
|
||||
|
||||
function selectNest(id: string) {
|
||||
current = nest(id).nestId;
|
||||
for (const r of nests.values()) {
|
||||
r.feed.hidden = r.nestId !== current;
|
||||
r.link.setAttribute("aria-current", String(r.nestId === current));
|
||||
}
|
||||
const r = nest(current);
|
||||
roomTitle.textContent = `# ${r.name}`;
|
||||
roomSub.textContent = r.crows.length
|
||||
? `Core crows: ${r.crows.join(", ")}. The Sentry borrows others when a job needs more hands.`
|
||||
: "The whole flock roosts here. Hand it a list: the Sentry sorts it, crows fly, you judge.";
|
||||
roomTab.textContent = `# ${r.name}`;
|
||||
r.feed.scrollTop = r.feed.scrollHeight;
|
||||
renderTyping();
|
||||
}
|
||||
|
||||
// Red count on each nest: questions waiting on you in that room.
|
||||
function renderNestCounts() {
|
||||
for (const r of nests.values()) {
|
||||
const n = r.feed.querySelectorAll(".msg.asking").length;
|
||||
r.count.textContent = n ? String(n) : "";
|
||||
}
|
||||
}
|
||||
|
||||
function append(li: HTMLLIElement, nestId: string) {
|
||||
const feed = nest(nestId).feed;
|
||||
const stick = feed.scrollHeight - feed.scrollTop - feed.clientHeight < 120;
|
||||
feed.append(li);
|
||||
if (stick) feed.scrollTop = feed.scrollHeight;
|
||||
}
|
||||
|
||||
function post(author: string, parts: Node[], ts?: string): Msg {
|
||||
function post(author: string, parts: Node[], ts: string | undefined, nestId: string): Msg {
|
||||
const li = el("li", "msg");
|
||||
li.dataset.author = author;
|
||||
const last = feed.lastElementChild as HTMLElement | null;
|
||||
const last = nest(nestId).feed.lastElementChild as HTMLElement | null;
|
||||
if (last?.dataset.author === author) li.classList.add("cont");
|
||||
let avatar: Element;
|
||||
if (author === "you") {
|
||||
@@ -141,14 +196,14 @@ function post(author: string, parts: Node[], ts?: string): Msg {
|
||||
const main = el("div", "msg-main");
|
||||
main.append(head, body, actions, reactions);
|
||||
li.append(avatar, main);
|
||||
append(li);
|
||||
append(li, nestId);
|
||||
return { li, body, actions, reactions };
|
||||
}
|
||||
|
||||
function note(text: string, kind = "") {
|
||||
function note(text: string, nestId: string, kind = "") {
|
||||
const li = el("li", `msg system ${kind}`.trim());
|
||||
li.append(el("p", "", text));
|
||||
append(li);
|
||||
append(li, nestId);
|
||||
}
|
||||
|
||||
function re(text: string) {
|
||||
@@ -160,7 +215,7 @@ function react(m: Msg, text: string, kind: string) {
|
||||
}
|
||||
|
||||
// ---------- per-item state ----------
|
||||
type Item = { text: string; crows: string[]; taskType: string; triage?: Msg; answer?: Msg };
|
||||
type Item = { text: string; nest: string; crows: string[]; borrowed: Set<string>; taskType: string; triage?: Msg; answer?: Msg };
|
||||
const items = new Map<string, Item>();
|
||||
|
||||
function ask(m: Msg, itemId: string, target: "triage" | "output") {
|
||||
@@ -183,12 +238,14 @@ function ask(m: Msg, itemId: string, target: "triage" | "output") {
|
||||
});
|
||||
}
|
||||
m.actions.append(yes, no, err);
|
||||
renderNestCounts();
|
||||
}
|
||||
|
||||
// ---------- who's flying ----------
|
||||
const flying = new Set<string>();
|
||||
let flyingNest = "";
|
||||
function renderTyping() {
|
||||
const names = [...flying];
|
||||
const names = flyingNest === current ? [...flying] : [];
|
||||
if (names.length === 0) { typing.textContent = ""; return; }
|
||||
const who = names.length === 1 ? names[0]
|
||||
: names.length === 2 ? `${names[0]} and ${names[1]}`
|
||||
@@ -203,12 +260,14 @@ const LEVELS = ["stranger", "regular", "trusted"];
|
||||
|
||||
const handlers: Record<string, (d: Payload) => void> = {
|
||||
"list.started": (d) => {
|
||||
const nestId = nests.has(d.nest_id) ? d.nest_id : sendingNest;
|
||||
flyingNest = nestId;
|
||||
const ol = el("ol", "list");
|
||||
for (const it of d.items ?? []) {
|
||||
items.set(it.item_id, { text: it.text, crows: [], taskType: "other" });
|
||||
items.set(it.item_id, { text: it.text, nest: nestId, crows: [], borrowed: new Set(), taskType: "other" });
|
||||
ol.append(el("li", "", it.text));
|
||||
}
|
||||
post("you", [ol], d.ts);
|
||||
post("you", [ol], d.ts, nestId);
|
||||
crow("Sentry").setPose("perched");
|
||||
const n = (d.items ?? []).length;
|
||||
update("Sentry", `Got a list of ${n} item${n === 1 ? "" : "s"}`, d.ts);
|
||||
@@ -225,7 +284,7 @@ const handlers: Record<string, (d: Payload) => void> = {
|
||||
for (const s of d.subtasks) ul.append(el("li", "", s));
|
||||
parts.push(ul);
|
||||
}
|
||||
it.triage = post("Sentry", parts, d.ts);
|
||||
it.triage = post("Sentry", parts, d.ts, it.nest);
|
||||
showTrust("Sentry", d.task_type);
|
||||
if (d.needs_approval) {
|
||||
crow("Sentry").setPose("waiting");
|
||||
@@ -242,8 +301,10 @@ const handlers: Record<string, (d: Payload) => void> = {
|
||||
if (it && d.crow !== "Sentry") showTrust(d.crow, it.taskType);
|
||||
crow(d.crow).setPose("flying");
|
||||
if (it) {
|
||||
if (d.borrowed) it.borrowed.add(d.crow);
|
||||
const doing = d.crow === "Sentry" ? "Sorting" : d.crow === "Elder" ? "Merging reports on" : "Flying";
|
||||
update(d.crow, `${doing}${doing === "Flying" ? ":" : ""} ${q(it.text)}`, d.ts);
|
||||
const where = d.borrowed ? ` (borrowed for # ${nest(it.nest).name})` : "";
|
||||
update(d.crow, `${doing}${where}${doing === "Flying" ? ":" : ""} ${q(it.text)}`, d.ts);
|
||||
}
|
||||
flying.add(d.crow);
|
||||
renderTyping();
|
||||
@@ -265,8 +326,9 @@ const handlers: Record<string, (d: Payload) => void> = {
|
||||
const author = it.crows.includes("Elder") ? "Elder" : it.crows[0] ?? "Elder";
|
||||
const parts: Node[] = [re(it.text), el("p", "answer", d.answer)];
|
||||
const helpers = it.crows.filter((n) => n !== "Elder");
|
||||
if (author === "Elder" && helpers.length) parts.push(el("p", "with", `from ${helpers.join(", ")}`));
|
||||
it.answer = post(author, parts, d.ts);
|
||||
const named = helpers.map((n) => (it.borrowed.has(n) ? `${n} (borrowed)` : n));
|
||||
if (author === "Elder" && helpers.length) parts.push(el("p", "with", `from ${named.join(", ")}`));
|
||||
it.answer = post(author, parts, d.ts, it.nest);
|
||||
if (d.needs_approval) {
|
||||
for (const n of it.crows) {
|
||||
crow(n).setPose("waiting");
|
||||
@@ -292,6 +354,7 @@ const handlers: Record<string, (d: Payload) => void> = {
|
||||
};
|
||||
const [text, kind] = label[d.verdict] ?? [d.verdict, ""];
|
||||
react(m, text, kind);
|
||||
renderNestCounts();
|
||||
}
|
||||
if (d.target === "triage" && d.verdict === "auto") return; // a trusted Sentry just keeps going
|
||||
const word: Record<string, string> = { approved: "Approved", rejected: "Rejected", auto: "Accepted (trusted)", timeout: "Timed out" };
|
||||
@@ -308,19 +371,20 @@ const handlers: Record<string, (d: Payload) => void> = {
|
||||
const what = String(d.task_type).replace("triage/", "sorting ");
|
||||
const up = d.to > d.from;
|
||||
if (d.holder === "flock") {
|
||||
note(`The flock ${up ? "earned" : "dropped to"} “${LEVELS[d.to]}” on ${what}.`, up ? "sparkle" : "");
|
||||
note(`The flock ${up ? "earned" : "dropped to"} “${LEVELS[d.to]}” on ${what}.`, flyingNest || current, up ? "sparkle" : "");
|
||||
return;
|
||||
}
|
||||
const c = crow(d.holder);
|
||||
c.setTrust(d.to);
|
||||
c.fire(up ? "levelUp" : "levelDown");
|
||||
update(d.holder, `${up ? "Leveled up to" : "Dropped to"} ${LEVELS[d.to]} on ${what}`, d.ts, up ? "good" : "bad");
|
||||
note(`${d.holder} ${up ? "leveled up to" : "dropped to"} “${LEVELS[d.to]}” on ${what}.`, up ? "sparkle" : "");
|
||||
note(`${d.holder} ${up ? "leveled up to" : "dropped to"} “${LEVELS[d.to]}” on ${what}.`, flyingNest || current, up ? "sparkle" : "");
|
||||
},
|
||||
|
||||
"item.skipped": (d) => {
|
||||
const it = items.get(d.item_id);
|
||||
note(`Skipped “${it?.text ?? d.item_id}”: ${d.reason}.`);
|
||||
note(`Skipped “${it?.text ?? d.item_id}”: ${d.reason}.`, it?.nest ?? flyingNest ?? current);
|
||||
renderNestCounts();
|
||||
for (const n of it?.crows ?? []) crow(n).setPose("perched");
|
||||
update("Sentry", `Skipped ${q(it?.text ?? d.item_id)}`, d.ts, "bad");
|
||||
},
|
||||
@@ -331,7 +395,8 @@ const handlers: Record<string, (d: Payload) => void> = {
|
||||
for (const t of tiles.values()) { t.view.setPose("perched"); t.view.fire("cheer"); }
|
||||
flying.clear();
|
||||
renderTyping();
|
||||
note(`List done. The flock used ${Number(d.tokens_used).toLocaleString()} of ${Number(d.token_budget).toLocaleString()} tokens.`);
|
||||
note(`List done. The flock used ${Number(d.tokens_used).toLocaleString()} of ${Number(d.token_budget).toLocaleString()} tokens.`, flyingNest || current);
|
||||
flyingNest = "";
|
||||
source?.close();
|
||||
source = null;
|
||||
sendBtn.disabled = false;
|
||||
@@ -343,7 +408,7 @@ let cooldownTimer = 0;
|
||||
const sendLabel = sendBtn.textContent ?? "Send";
|
||||
function prank(message: string, cooldownS: number) {
|
||||
crow("Sentry").fire("prank");
|
||||
post("Sentry", [el("p", "", message)]);
|
||||
post("Sentry", [el("p", "", message)], undefined, current);
|
||||
update("Sentry", "Left a gift on someone's windshield", undefined, "bad");
|
||||
let left = Math.max(0, Math.round(cooldownS));
|
||||
clearInterval(cooldownTimer);
|
||||
@@ -362,6 +427,7 @@ function prank(message: string, cooldownS: number) {
|
||||
}
|
||||
|
||||
// ---------- send a list ----------
|
||||
let sendingNest = "todo";
|
||||
form.addEventListener("submit", async (e) => {
|
||||
e.preventDefault();
|
||||
const text = listInput.value.trim();
|
||||
@@ -369,13 +435,14 @@ form.addEventListener("submit", async (e) => {
|
||||
const requester = requesterInput.value.trim() || "anonymous";
|
||||
store.set("requester", requester);
|
||||
sendBtn.disabled = true;
|
||||
sendingNest = current;
|
||||
|
||||
const res = await postList(text, requester).catch(() => ({ ok: false as const, pranked: false as const, message: "Can't reach the flock. Is `crows serve` running?" }));
|
||||
const res = await postList(text, requester, current).catch(() => ({ ok: false as const, pranked: false as const, message: "Can't reach the flock. Is `crows serve` running?" }));
|
||||
if (!res.ok) {
|
||||
if (res.pranked) {
|
||||
prank(res.message, res.cooldownS); // re-enables the button when the cooldown ends
|
||||
} else {
|
||||
note(res.message);
|
||||
note(res.message, current);
|
||||
sendBtn.disabled = false;
|
||||
}
|
||||
return;
|
||||
@@ -392,16 +459,68 @@ form.addEventListener("submit", async (e) => {
|
||||
}
|
||||
});
|
||||
|
||||
// Phone tabs: the channel or the flock.
|
||||
// ---------- phone tabs: the room or the roost (nests + flock) ----------
|
||||
const app = document.getElementById("app")!;
|
||||
for (const [id, view] of [["tab-room", "room"], ["tab-flock", "flock"]] as const) {
|
||||
document.getElementById(id)!.addEventListener("click", () => {
|
||||
app.dataset.view = view;
|
||||
for (const t of document.querySelectorAll<HTMLButtonElement>(".tab")) t.setAttribute("aria-pressed", String(t.id === id));
|
||||
if (view === "room") feed.scrollTop = feed.scrollHeight;
|
||||
});
|
||||
function showView(view: "room" | "flock") {
|
||||
app.dataset.view = view;
|
||||
for (const t of document.querySelectorAll<HTMLButtonElement>(".tab")) {
|
||||
t.setAttribute("aria-pressed", String(t.id === (view === "room" ? "tab-room" : "tab-flock")));
|
||||
}
|
||||
if (view === "room") nest(current).feed.scrollTop = nest(current).feed.scrollHeight;
|
||||
}
|
||||
roomTab.addEventListener("click", () => showView("room"));
|
||||
$<HTMLButtonElement>("tab-flock").addEventListener("click", () => showView("flock"));
|
||||
|
||||
// The Sentry is always on watch, and says hello.
|
||||
// ---------- new nest dialog ----------
|
||||
const dialog = $<HTMLDialogElement>("nest-dialog");
|
||||
const nestForm = $<HTMLFormElement>("nest-form");
|
||||
const nestName = $<HTMLInputElement>("nest-name");
|
||||
const nestCrows = $<HTMLDivElement>("nest-crows");
|
||||
const nestErr = $<HTMLParagraphElement>("nest-err");
|
||||
|
||||
$<HTMLButtonElement>("new-nest").addEventListener("click", () => {
|
||||
nestErr.textContent = "";
|
||||
nestName.value = "";
|
||||
nestCrows.replaceChildren();
|
||||
for (const name of flockNames) {
|
||||
const label = el("label", "pick-crow");
|
||||
const box = el("input");
|
||||
box.type = "checkbox";
|
||||
box.value = name;
|
||||
label.append(box, crowAvatar("crow"), el("span", "", name));
|
||||
nestCrows.append(label);
|
||||
}
|
||||
dialog.showModal();
|
||||
nestName.focus();
|
||||
});
|
||||
|
||||
nestForm.addEventListener("submit", async (e) => {
|
||||
const submitter = (e as SubmitEvent).submitter as HTMLButtonElement | null;
|
||||
if (submitter?.value !== "create") return; // Cancel closes the dialog
|
||||
e.preventDefault();
|
||||
const name = nestName.value.trim();
|
||||
const crows = [...nestCrows.querySelectorAll<HTMLInputElement>("input:checked")].map((b) => b.value);
|
||||
if (!name) { nestErr.textContent = "Give the nest a name."; return; }
|
||||
if (!crows.length) { nestErr.textContent = "Pick at least one crow for the core team."; return; }
|
||||
try {
|
||||
const n = await createNest(name, crows);
|
||||
addNest(n);
|
||||
dialog.close();
|
||||
selectNest(n.nestId);
|
||||
showView("room");
|
||||
post("Sentry", [el("p", "", `New nest. Core crows: ${n.crows.join(", ")}. I'll borrow others when a job needs more hands.`)], undefined, n.nestId);
|
||||
} catch (err) {
|
||||
nestErr.textContent = (err as Error).message;
|
||||
}
|
||||
});
|
||||
|
||||
// ---------- start: load the nests, open # todo, the Sentry says hello ----------
|
||||
crow("Sentry");
|
||||
post("Sentry", [el("p", "", "Caw. Send me a todo list, one item per line. I'll sort it, the flock will fly it, and you judge the results.")]);
|
||||
(async () => {
|
||||
const data = await getNests();
|
||||
flockNames = data.roster;
|
||||
if (!data.nests.some((n) => n.nestId === "todo")) data.nests.unshift({ nestId: "todo", name: "todo", crows: [] });
|
||||
for (const n of data.nests) addNest(n);
|
||||
selectNest("todo");
|
||||
post("Sentry", [el("p", "", "Caw. Send me a todo list, one item per line. I'll sort it, the flock will fly it, and you judge the results.")], undefined, "todo");
|
||||
})();
|
||||
@@ -73,6 +73,47 @@ body { margin: 0; background: var(--paper); color: var(--ink); font: 500 17px/1.
|
||||
}
|
||||
.who input:focus { outline: none; border-bottom-width: 3px; }
|
||||
|
||||
/* ---------- nests: rooms, like channels ---------- */
|
||||
.nests { display: flex; flex-direction: column; gap: 2px; }
|
||||
.nest-link {
|
||||
display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
|
||||
padding: 8px 10px; border: 0; border-radius: var(--corner); background: none; cursor: pointer;
|
||||
font: 400 17px/1.2 var(--display); color: var(--muted); text-align: left;
|
||||
}
|
||||
.nest-link[aria-current="true"] { color: var(--ink); background: rgb(28 25 21 / 0.06); }
|
||||
.nest-link:focus-visible { outline: none; text-decoration: underline 2px; text-underline-offset: 4px; }
|
||||
.nest-count:not(:empty) {
|
||||
padding: 0 7px; border-radius: 999px; background: var(--red); color: var(--paper); font: 700 12px/1.4 var(--body);
|
||||
}
|
||||
.new-nest {
|
||||
align-self: flex-start; margin: 2px 4px 6px; padding: 4px 6px; border: 0; background: none; cursor: pointer;
|
||||
font: italic 500 15px/1.2 var(--body); color: var(--muted);
|
||||
}
|
||||
.new-nest:hover { color: var(--ink); }
|
||||
.new-nest:focus-visible { outline: none; text-decoration: underline 2px; text-underline-offset: 4px; }
|
||||
|
||||
/* ---------- new nest dialog: a card on the page, no outline ---------- */
|
||||
.nest-dialog { width: min(440px, calc(100vw - 32px)); padding: 0; color: var(--ink); overflow: visible; }
|
||||
.nest-dialog::backdrop { background: rgb(28 25 21 / 0.25); }
|
||||
.nest-dialog form { padding: 22px 22px 18px; }
|
||||
.nest-dialog h2 { margin: 0; font: 400 24px/1.1 var(--display); }
|
||||
.dialog-sub { margin: 6px 0 16px; color: var(--muted); font-style: italic; font-size: 15px; }
|
||||
.dialog-field { display: block; color: var(--muted); font-style: italic; font-size: 15px; }
|
||||
.dialog-field input {
|
||||
display: block; width: 100%; margin-top: 4px; padding: 2px 0; font: 500 18px var(--body); color: var(--ink);
|
||||
background: transparent; border: 0; border-bottom: 2px solid var(--ink);
|
||||
}
|
||||
.dialog-field input:focus { outline: none; border-bottom-width: 3px; }
|
||||
.pick { margin: 18px 0 0; padding: 0; border: 0; }
|
||||
.pick legend { padding: 0; color: var(--muted); font-style: italic; font-size: 15px; }
|
||||
.pick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin-top: 8px; }
|
||||
.pick-crow { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--corner); cursor: pointer; font: 400 16px var(--display); }
|
||||
.pick-crow:has(input:checked) { background: rgb(28 25 21 / 0.07); }
|
||||
.pick-crow input { accent-color: var(--ink); width: 16px; height: 16px; margin: 0; }
|
||||
.pick-crow .avatar { width: 30px; height: 28px; margin: 0; }
|
||||
.dialog-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 18px; }
|
||||
.nest-dialog .err { margin: 10px 0 0; }
|
||||
|
||||
/* ---------- roster: one list tile per crow, newest update on top ---------- */
|
||||
.roster { display: flex; flex-direction: column; gap: 6px; }
|
||||
.tile {
|
||||
@@ -146,7 +187,9 @@ body { margin: 0; background: var(--paper); color: var(--ink); font: 500 17px/1.
|
||||
-webkit-mask-image: linear-gradient(rgb(0 0 0 / 0.55), transparent); mask-image: linear-gradient(rgb(0 0 0 / 0.55), transparent);
|
||||
}
|
||||
|
||||
.feeds { display: grid; min-height: 0; }
|
||||
.feed { list-style: none; margin: 0; padding: 20px 0 10px; overflow-y: auto; min-height: 0; }
|
||||
.feed[hidden] { display: none; }
|
||||
.msg { display: grid; grid-template-columns: 40px 1fr; gap: 0 14px; padding: 14px 28px; }
|
||||
@media (hover: hover) { .msg:hover { background: rgb(28 25 21 / 0.03); } }
|
||||
/* Consecutive messages from one author group under a single name, Slack style. */
|
||||
|
||||
Reference in new issue
Block a user