toolroll 0.5.0

package/dist/teammate-work.js

@@ -0,0 +1,280 @@
+import { decideFlowCard, draftFor, flowCardHref } from "./flow-engine.js";
+import { keptDraft } from "./flow-draft.js";
+import { notifyPeople } from "./flow-people.js";
+import { claudeTurnRunner, parseSoul, readTurn, teammateActor, teammateLabel, TURN_TIMEOUT_MS, turnPrompt } from "./teammates.js";
+import { callName, callOutcome, callWords, inputProblem, makeCall, offeredTools, refreshGrants, ruleFor } from "./teammate-tools.js";
+import { answerSuggestion, considerSuggestion, memoriesFor, remember } from "./teammate-memory.js";
+import { replyToAsker } from "./teammate-desk.js";
+import { claudeMachineBilling } from "./spend.js";
+/** A question waits for its answer this long before the step is due again on its own: never, in practice. */
+export const ASKED = "9999-12-31T00:00:00.000Z";
+/** What "handle" zones with no answers of their own offer: going on to the next zone. */
+const CARRY_ON = "Carry on";
+/** v94: tool calls one visit of a card may make, and turns one step run may take, before it must decide with what it has. */
+export const CALLS_PER_VISIT = 12;
+const TURNS_PER_RUN = 8;
+/** The two answers an ask-first call offers; words instead tell the teammate what to do. */
+export const APPROVE = "approve", DENY = "deny";
+const startOfDay = (now) => { const day = new Date(now); day.setHours(0, 0, 0, 0); return day.toISOString(); };
+/** The Claude model a teammate's turns run on: its own, or the lead chat's Claude model, or Claude's default. */
+export function teammateModel(store, mate) {
+    const config = store.getChatConfig();
+    return mate.model ?? (config?.provider === "claude-subscription" ? config.model : "default");
+}
+/** Whether a teammate can take a turn now: active, readable, and under its daily limit. */
+export function teammateReady(store, mate, now) {
+    if (mate === null)
+        return { ok: false, why: "gone" };
+    if (mate.state !== "active")
+        return { ok: false, why: "paused" };
+    if (!parseSoul(mate.soul).ok)
+        return { ok: false, why: "its soul file can't be read" };
+    if (store.teammateTurnsSince(mate.id, startOfDay(now)) >= mate.dailyTurns)
+        return { ok: false, why: `it reached today's limit of ${mate.dailyTurns} turns` };
+    // v105: its turns bill as this computer's Claude does with no key from us; billed to a key, a budget holds them.
+    const held = store.budgetGate(now)({ project: mate.repo, person: null, teammate: mate.id, agents: [{ provider: "claude", billing: claudeMachineBilling(store.handle) }] });
+    if (held.over !== null)
+        return { ok: false, why: held.why === "used-up" ? "a monthly budget its work counts toward is used up" : "a monthly budget can't price its work yet" };
+    // Sprint 8: its turns run on Claude, with its own model or the lead chat's: the organisation policy has to allow them.
+    const disallowed = store.agentPolicyRefusal("claude", teammateModel(store, mate));
+    if (disallowed !== null)
+        return { ok: false, why: disallowed };
+    return { ok: true };
+}
+/** The answers a "Teammate handles it" zone offers, each with the zone it leads to. */
+export function handleAnswers(stage) {
+    return stage.routes !== undefined && stage.routes.length > 0 ? stage.routes : [{ answer: CARRY_ON, to: stage.next }];
+}
+/** Everything the turn is told. */
+function contextOf(store, flow, definition, stage, card, mate, tools = [], spent = false) {
+    const soul = parseSoul(mate.soul);
+    if (!soul.ok)
+        throw new Error(soul.problem);
+    const title = (id) => definition.stages.find(one => one.id === id)?.title ?? id;
+    const draft = stage.kind === "approval" ? draftFor(definition, stage) : null;
+    const question = store.teammateQuestionFor(card.id, card.entry);
+    // v95: what its people told it lately, and what it kept that fits this card.
+    const memory = memoriesFor(store, mate, `${card.title}\n${card.description ?? ""}`, new Date());
+    return {
+        soul: mate.soul, name: soul.soul.name, role: soul.soul.role, flow: flow.name, zone: stage.title, kind: stage.kind === "approval" ? "decide" : "handle",
+        instructions: stage.instructions, draft: draft === null ? null : card.outputs[draft.id] ?? null, canSendBack: stage.onFail !== null,
+        person: stage.kind === "approval" ? (stage.toOwner === true ? flow.owner : stage.approver ?? flow.owner) : flow.owner,
+        answers: handleAnswers(stage).map(one => one.answer),
+        card: {
+            title: card.title, description: card.description, source: card.source?.label ?? null,
+            earlier: definition.stages.filter(one => one.id !== stage.id && card.outputs[one.id] !== undefined).map(one => ({ zone: one.title, text: card.outputs[one.id] })),
+            discussion: store.flowComments(card.id).filter(one => one.kind === "comment").slice(-10).map(one => ({ by: one.author.includes("@") ? `${one.author} (by email)` : one.author, text: one.body })),
+            history: store.flowEvents(card.id).slice(-8).map(one => `${one.outcome} → ${title(one.toStage)}${one.note === null ? "" : `: ${one.note}`}`),
+        },
+        asked: question !== null && question.state === "answered" ? [{ question: question.question, answer: [question.choice === null ? null : question.options.find(one => one.id === question.choice)?.label ?? question.choice, question.answer].filter(Boolean).join(" — ") }] : [],
+        notes: memory.told.map(one => ({ by: one.createdBy, text: one.text })),
+        memory: memory.kept.map(one => one.text),
+        tools, toolsSpent: spent,
+        calls: store.teammateCallsOn(card.id, card.entry).map(call => {
+            const question = call.state === "denied" ? store.teammateQuestionForCall(call.id) : null;
+            return { name: callName(call.tool, call.action), input: JSON.stringify(call.input), outcome: callOutcome(call),
+                said: call.state === "denied" ? question?.answer ?? null : call.state === "asked" ? null : call.result };
+        }),
+    };
+}
+/**
+ * Run one teammate turn on a card and carry out what it decided. With tools
+ * (v94) a turn is a short loop: each tool call it asks for is made (or put to
+ * its person, and the turn waits), and it decides again with the answer —
+ * until it decides, or it has used its tools as much as a visit allows.
+ */
+export async function teammateTurn(store, flow, definition, stage, card, mate, now, io) {
+    const model = teammateModel(store, mate);
+    if (store.teammateGrants(mate.id).length > 0) {
+        try {
+            await refreshGrants(store, mate, now, io);
+        }
+        catch { /* the last listing stands */ }
+        // Calls a person approved since the last turn are made first, exactly as they approved them.
+        for (const call of store.teammateCallsOn(card.id, card.entry).filter(one => one.state === "approved" && one.undoOf === null))
+            await makeCall(store, call, flow.repo, io, now);
+    }
+    const log = [];
+    for (let turn = 1;; turn++) {
+        const made = store.teammateCallsOn(card.id, card.entry).length;
+        const spent = made >= CALLS_PER_VISIT || turn > TURNS_PER_RUN;
+        const tools = spent ? [] : offeredTools(store, mate);
+        const context = contextOf(store, flow, definition, stage, card, mate, tools, spent && made > 0);
+        const asked = Date.now();
+        const reply = await (io.turn ?? claudeTurnRunner())({ model, prompt: turnPrompt(context), timeoutMs: TURN_TIMEOUT_MS });
+        // v97: every turn is kept with what it cost, for its weekly report.
+        store.addTeammateTurn({ teammate: mate.id, card: card.id, model, ok: reply.ok, ms: reply.ok ? reply.ms : Date.now() - asked, costUsd: reply.costUsd ?? null, tokensIn: reply.tokensIn ?? null, tokensOut: reply.tokensOut ?? null }, now);
+        if (!reply.ok)
+            return { state: "retry", said: reply.said, ...(log.length === 0 ? {} : { log: log.join("\n\n") }) };
+        const answer = readTurn(reply.value, context);
+        if (answer === null)
+            return { state: "retry", said: `${context.name}'s answer wasn't one this zone allows.`, log: [...log, JSON.stringify(reply.value).slice(0, 4000)].join("\n\n") };
+        const header = `${context.name} (${model}) · ${(reply.ms / 1000).toFixed(1)} s`;
+        if (answer.remember !== "")
+            remember(store, mate, answer.remember, { source: "teammate", card: card.id, by: teammateActor({ name: context.name }) }, now);
+        if (answer.action !== "use_tool") {
+            const outcome = carryOut(store, flow, definition, stage, card, mate, context, answer, now, io, header);
+            return log.length === 0 ? outcome : { ...outcome, log: `${log.join("\n\n")}\n\n${outcome.log ?? ""}`.trim() };
+        }
+        log.push(`${header}\n\n${JSON.stringify(answer)}`);
+        const waiting = await useTool(store, flow, stage, card, mate, context, answer, io, now);
+        if (waiting !== null)
+            return { ...waiting, log: log.join("\n\n") };
+    }
+}
+/**
+ * One tool call a turn asked for, checked against its rules: made now (the
+ * turn goes on: null), refused with the reason (the turn goes on and reads
+ * it), or put to its person — the turn waits for the answer.
+ */
+async function useTool(store, flow, stage, card, mate, context, answer, io, now) {
+    const split = answer.tool.indexOf(".");
+    const tool = split < 0 ? answer.tool : answer.tool.slice(0, split), action = split < 0 ? "" : answer.tool.slice(split + 1);
+    const receipt = { teammate: mate.id, card: card.id, entry: card.entry, tool: tool.slice(0, 40), action: action.slice(0, 64) || "(none)", why: answer.reason };
+    const refuse = (input, said) => { store.addTeammateCall({ ...receipt, input, rule: "never", state: "refused", result: said }, now); return null; };
+    if (!(context.tools ?? []).some(one => one.name === answer.tool))
+        return refuse({}, `There's no ${answer.tool} among the tools you may use.`);
+    let input;
+    try {
+        const parsed = JSON.parse(answer.input === "" ? "{}" : answer.input);
+        if (parsed === null || typeof parsed !== "object" || Array.isArray(parsed))
+            return refuse({}, "Its input wasn't a JSON object.");
+        input = parsed;
+    }
+    catch {
+        return refuse({}, "Its input wasn't a JSON object.");
+    }
+    const grant = store.teammateGrant(mate.id, tool);
+    const info = grant.actions.find(one => one.name === action);
+    const problem = inputProblem(info, input);
+    if (problem !== null)
+        return refuse(input, problem);
+    const rule = ruleFor(grant, action, input);
+    if (rule.use === "never")
+        return refuse(input, rule.why);
+    if (rule.use === "free") {
+        const id = store.addTeammateCall({ ...receipt, input, rule: "free", state: "running" }, now);
+        await makeCall(store, store.teammateCall(id), flow.repo, io, now);
+        return null;
+    }
+    // Ask first: its person approves this exact call, in their chat app or on the card.
+    const soul = { name: context.name, role: context.role };
+    const id = store.addTeammateCall({ ...receipt, input, rule: "ask", state: "asked", result: rule.why }, now);
+    const words = callWords(tool, action, input, 480);
+    const question = store.openTeammateQuestion({ teammate: mate.id, card: card.id, entry: card.entry, question: `Use ${words}?`, options: [{ id: APPROVE, label: "Approve" }, { id: DENY, label: "Deny" }], askedOf: context.person, toolCall: id }, now);
+    if (question === null)
+        return { state: "failed", said: "It asked to make the same call twice." };
+    notifyPeople(store, card, [context.person], null, { key: `teammate-q:${question}`, attention: true, subject: `${teammateLabel(soul)} asks to use ${action} on “${card.title}”`,
+        body: `${words}\n\n${answer.reason === "" ? "" : `Why: ${answer.reason}\n`}(${rule.why})\n\nApprove makes exactly this call. Deny stops it. Or answer in words to tell ${context.name} what to do instead.`,
+    }, now);
+    if (stage.kind !== "approval")
+        store.updateFlowCard(card.id, { waiting: `${context.name} asked ${context.person} to approve: ${words}`.slice(0, 300) }, now);
+    return { state: "waiting", said: `Asked ${context.person} to approve ${action}`, nextAt: ASKED };
+}
+function carryOut(store, flow, definition, stage, card, mate, context, answer, now, io, header) {
+    const soul = { name: context.name, role: context.role };
+    const actor = teammateActor(soul), label = teammateLabel(soul);
+    const decisionJson = JSON.stringify(answer);
+    const log = `${header}\n\n${decisionJson}`;
+    const event = (kind, said) => store.addTeammateEvent({ teammate: mate.id, card: card.id, entry: card.entry, kind, said, detail: { flow: flow.id, zone: stage.id, action: answer.action, reason: answer.reason } }, now);
+    const titleOf = (id) => definition.stages.find(one => one.id === id)?.title ?? "the next zone";
+    const repos = [flow.repo];
+    if (answer.action === "approve" || answer.action === "send_back") {
+        const draft = draftFor(definition, stage);
+        const decided = decideFlowCard(store, {
+            card: card.id, decision: answer.action === "approve" ? "approve" : "send-back", note: answer.action === "approve" ? answer.reason || null : answer.note, actor, repos, teammate: mate.handle, entry: card.entry,
+            ...(answer.action === "approve" && draft !== null && answer.text !== "" ? { draft: keptDraft(answer.text) } : {}),
+            ...(io.evidenceRoot === undefined ? {} : { evidenceRoot: io.evidenceRoot }),
+        }, now);
+        if (!decided.ok)
+            return { state: "failed", said: decided.message, log, decisionJson };
+        const said = answer.action === "approve" ? `Approved “${card.title}”${answer.reason === "" ? "" : `: ${answer.reason}`}` : `Sent “${card.title}” back: ${answer.note}`;
+        event("decided", said);
+        return { state: "passed", said, log, decisionJson };
+    }
+    if (answer.action === "hand_off") {
+        event("handed", `Handed “${card.title}” to ${context.person}${answer.note === "" ? "" : `: ${answer.note}`}`);
+        // The engine sees the hand-off (a passed turn in the same visit) and asks the person, with this note.
+        return { state: "passed", said: `Handed to ${context.person}`, log, decisionJson };
+    }
+    if (answer.action === "ask") {
+        const options = answer.options.map((label, at) => ({ id: `o${at + 1}`, label }));
+        const opened = store.openTeammateQuestion({ teammate: mate.id, card: card.id, entry: card.entry, question: answer.question, options, askedOf: context.person }, now);
+        if (opened === null)
+            return { state: "failed", said: "It asked twice about the same visit.", log, decisionJson };
+        event("asked", `Asked ${context.person} about “${card.title}”: ${answer.question}`);
+        notifyPeople(store, card, [context.person], null, { key: `teammate-q:${opened}`, attention: true, subject: `${label} asks about “${card.title}”`,
+            body: `${answer.question}${options.length === 0 ? "" : `\n\n${options.map(one => `• ${one.label}`).join("\n")}`}${answer.reason === "" ? "" : `\n\n(${answer.reason})`}\n\nAnswer with the buttons in your chat app, or on the card.`,
+        }, now);
+        store.updateFlowCard(card.id, { waiting: `${context.name} asked ${context.person}: ${answer.question}`.slice(0, 300) }, now);
+        return { state: "waiting", said: `Asked ${context.person}`, log, decisionJson, nextAt: ASKED };
+    }
+    if (answer.action === "cant") {
+        event("handled", `Couldn't handle “${card.title}”: ${answer.note}`);
+        if (stage.onFail !== null)
+            store.moveFlowCard(card.id, { to: stage.onFail, outcome: "fail", actor, note: answer.note || null, expectEntry: card.entry }, now);
+        else
+            store.updateFlowCard(card.id, { waiting: `${context.name} couldn't handle it: ${answer.note}`.slice(0, 300) }, now);
+        return { state: "failed", said: answer.note || "It couldn't handle this card.", log, decisionJson };
+    }
+    // route: the answer names where the card goes; its text is what the next zones use.
+    const picked = handleAnswers(stage).find(one => one.answer.toLowerCase() === answer.answer.toLowerCase());
+    if (answer.text !== "")
+        store.updateFlowCard(card.id, { outputs: { ...card.outputs, [stage.id]: keptDraft(answer.text) } }, now);
+    const said = `Sent “${card.title}” to ${titleOf(picked.to)}${picked.answer === CARRY_ON ? "" : ` (${picked.answer})`}${answer.reason === "" ? "" : `: ${answer.reason}`}`;
+    event("handled", said);
+    // v96: a zone that answers whoever asked sends what it wrote back to them, under its name.
+    if (stage.reply === true && answer.text !== "")
+        replyToAsker(store, flow, card, mate, answer.text, now);
+    if (picked.to === null)
+        store.updateFlowCard(card.id, { waiting: "Finished here. Move the card on when you're ready." }, now);
+    else
+        store.moveFlowCard(card.id, { to: picked.to, outcome: "ok", actor, historyNote: `${actor}: ${picked.answer === CARRY_ON ? "" : `${picked.answer}. `}${answer.reason}`.trim(), expectEntry: card.entry }, now);
+    return { state: "passed", said, log, decisionJson };
+}
+/** A person answers a teammate's question: once, by the person it was asked of; the card's turn is due again. */
+export function answerTeammateQuestion(store, id, answer, now) {
+    return store.transact(() => {
+        const question = store.teammateQuestion(id);
+        if (question === null || question.state !== "open")
+            return { ok: false, said: "That question was already answered." };
+        if (question.askedOf !== answer.by)
+            return { ok: false, said: `Only ${question.askedOf} can answer this one.` };
+        const choice = answer.choice === null ? null : question.options.find(one => one.id === answer.choice) ?? null;
+        const text = answer.text?.trim().slice(0, 2000) || null;
+        if (choice === null && text === null)
+            return { ok: false, said: "Pick an answer or write one." };
+        const card = store.getFlowCard(question.card);
+        // v95: a rule change it suggested to its manager. Nothing about the card waits on it.
+        if (question.suggestion !== null) {
+            const mate = store.getTeammate(question.teammate);
+            const decided = mate === null ? { ok: false, said: "That teammate is off the team." } : answerSuggestion(store, mate, question.suggestion, { choice: choice?.id ?? null, text, by: answer.by }, now);
+            store.answerTeammateQuestion(id, { choice: choice?.id ?? null, text, by: answer.by, via: answer.via }, now);
+            store.addTeammateEvent({ teammate: question.teammate, card: question.card, entry: question.entry, kind: "answered", said: `${answer.by}: ${[choice?.label, text].filter(Boolean).join(" — ")}`, by: answer.by }, now);
+            return decided;
+        }
+        // v94: an ask-first tool call. Approve makes exactly that call (on the card's next turn); Deny, or words alone, don't.
+        if (question.toolCall !== null) {
+            if (card === null || card.state !== "active" || card.entry !== question.entry) {
+                store.moveTeammateCall(question.toolCall, ["asked"], { state: "refused", result: "The card moved on before anyone approved it." }, now);
+                store.dropTeammateQuestion(id, now);
+                return { ok: false, said: "That card has moved on, so nothing was done." };
+            }
+            if (!store.moveTeammateCall(question.toolCall, ["asked"], { state: choice?.id === APPROVE ? "approved" : "denied", decidedBy: answer.by }, now))
+                return { ok: false, said: "That call was already decided." };
+            // v95: approving the same action again and again teaches it to suggest a looser rule.
+            const mate = store.getTeammate(question.teammate), call = store.teammateCall(question.toolCall);
+            if (choice?.id === APPROVE && mate !== null && call !== null)
+                considerSuggestion(store, mate, call, now);
+        }
+        store.answerTeammateQuestion(id, { choice: choice?.id ?? null, text, by: answer.by, via: answer.via }, now);
+        store.addTeammateEvent({ teammate: question.teammate, card: question.card, entry: question.entry, kind: "answered", said: `${answer.by}: ${[choice?.label, text].filter(Boolean).join(" — ")}`, by: answer.by }, now);
+        if (card !== null && card.state === "active" && card.entry === question.entry) {
+            store.updateFlowCard(card.id, { waiting: null }, now);
+            store.wakeFlowStep(card.id, card.entry, now);
+        }
+        return { ok: true, said: question.toolCall === null ? "Answered. It picks the card up again now." : choice?.id === APPROVE ? "Approved. The call is made now, exactly as shown." : "It won't make that call. It picks the card up again now." };
+    });
+}
+/** A card's link, for messages about it. */
+export const teammateCardHref = (flow, card) => flowCardHref(flow, card);

package/dist/teammates-ui.d.ts

@@ -0,0 +1,20 @@
+/**
+ * The Teammates pages (v92): who is on the team, and one page per teammate —
+ * what it asks you, its soul file, what it did and why, what you told it,
+ * and its settings. Server-rendered forms, like the other settings pages.
+ */
+import type { Store, TeammateRow } from "./store.js";
+/** v94: the Tools section's rule rows; a limit's fields show only while "Up to a limit" is chosen. */
+export declare const TEAMMATE_CSS = ".teammate-tools .tool-grant{border-top:1px solid var(--so-line);padding-top:12px;margin-top:12px}.teammate-tools .tool-grant:first-of-type{border-top:0;margin-top:0;padding-top:0}.teammate-tools h3{font-size:1rem;margin:0 0 4px}.teammate-tools .tool-rule{display:grid;gap:6px;padding:10px 0;border-bottom:1px solid var(--so-line)}.teammate-tools .tool-rule:last-of-type{border-bottom:0}.teammate-tools .tool-rule .meta{display:block}.teammate-tools select,.teammate-tools input{max-width:100%;box-sizing:border-box}.teammate-tools .tool-limit{display:none;flex-wrap:wrap;align-items:center;gap:6px}.teammate-tools .tool-rule:has(option[value=\"limit\"]:checked) .tool-limit{display:flex}.teammate-tools .tool-rule>select{width:auto;min-width:16em}.teammate-tools .tool-limit select{width:auto}.teammate-tools .tool-limit input{width:7em}.teammate-tools .tool-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.teammate-tools button{min-height:44px}.teammate-activity li{overflow-wrap:anywhere}.teammate-memory .memory-tell,.teammate-memory .memory-search{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin:0 0 12px}.teammate-memory .memory-tell textarea{flex:1 1 280px}.teammate-memory .memory-search input{flex:1 1 220px}.teammate-memory button{min-height:44px}.teammate-memories{list-style:none;padding:0;margin:0}.teammate-memories li{padding:10px 0;border-top:1px solid var(--so-line);overflow-wrap:anywhere}.teammate-memories li:first-child{border-top:0}.teammate-memories .meta{display:block;font-size:.85rem}.teammate-memories details.memory-edit{border:0;padding:0;margin:2px 0 0;background:transparent;box-shadow:none}.memory-edit summary{cursor:pointer;min-height:32px;display:inline-flex;align-items:center;font-size:.85rem;font-weight:400;color:var(--so-muted)}.tool-undo{border:0;padding:0;margin:8px 0;background:transparent;box-shadow:none}.tool-undo summary{cursor:pointer;min-height:36px;display:inline-flex;align-items:center;font-size:.9rem}.tool-undo-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0}.tool-undo-row select{width:auto}.teammate-overrides,.teammate-undo{padding-left:18px}.teammate-undo li{margin:6px 0}.teammate-undo form{display:inline}.teammate-week h3{font-size:1rem;margin:14px 0 4px}.teammate-week button{min-height:44px}.teammate-routines{list-style:none;padding:0;margin:8px 0}.teammate-routines li{display:grid;gap:4px;padding:10px 0;border-top:1px solid var(--so-line)}.teammate-routines li:first-child{border-top:0}.routine-buttons{display:flex;flex-wrap:wrap;gap:8px}.routine-buttons button,.routine-add button{min-height:44px}.routine-add{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin:8px 0}.routine-add label{display:grid;gap:4px;flex:1 1 200px}.routine-add label:first-of-type{flex:0 1 180px}.teammate-actions,.question-options{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}.teammate-actions form,.question-options form{margin:0}.memory-edit form{display:grid;gap:8px;margin-top:6px}.memory-buttons{display:flex;flex-wrap:wrap;gap:8px}@media(max-width:600px){.teammate-tools select,.teammate-tools input{font-size:16px}}";
+/** A blank soul file: the sections a teammate reads, to fill in. */
+export declare const BLANK_SOUL = "---\nname: \nrole: \n---\n\n## Who you are\n\n\n## How you write\n\n\n## What you know\n\n\n## Decide on your own\n- \n\n## Ask first\n- \n\n## Never\n- \n";
+export declare function teammatesListHtml(store: Store, mates: readonly TeammateRow[], projects: readonly string[], projectName: (repo: string) => string, csrf: string, canCreate: boolean, notice: {
+    said?: string | null;
+    problem?: string | null;
+}): string;
+export declare function teammatePageHtml(store: Store, mate: TeammateRow, viewer: string, projectName: (repo: string) => string, csrf: string, canManage: boolean, approvers: readonly string[], notice: {
+    said?: string | null;
+    problem?: string | null;
+    soulDraft?: string | null;
+    query?: string | null;
+}): string;

package/dist/teammates-ui.js

@@ -0,0 +1,166 @@
+import { labelOf, nameOf, summaryOf, TEAMMATE_MODELS, zonesOf } from "./teammate-admin.js";
+import { TEAMMATE_TEMPLATES } from "./teammates.js";
+import { projectToolsOf } from "./project-tools.js";
+import { callWords, defaultRule, numberFields, receiptWords } from "./teammate-tools.js";
+import { MEMORY_CHARS, searchMemories } from "./teammate-memory.js";
+import { deskOf, localZone, routinesOf } from "./teammate-desk.js";
+import { weekOf, weekWords } from "./teammate-week.js";
+import { describeSchedule, parseSchedule } from "./routine.js";
+/** v94: the Tools section's rule rows; a limit's fields show only while "Up to a limit" is chosen. */
+export const TEAMMATE_CSS = `.teammate-tools .tool-grant{border-top:1px solid var(--so-line);padding-top:12px;margin-top:12px}.teammate-tools .tool-grant:first-of-type{border-top:0;margin-top:0;padding-top:0}.teammate-tools h3{font-size:1rem;margin:0 0 4px}.teammate-tools .tool-rule{display:grid;gap:6px;padding:10px 0;border-bottom:1px solid var(--so-line)}.teammate-tools .tool-rule:last-of-type{border-bottom:0}.teammate-tools .tool-rule .meta{display:block}.teammate-tools select,.teammate-tools input{max-width:100%;box-sizing:border-box}.teammate-tools .tool-limit{display:none;flex-wrap:wrap;align-items:center;gap:6px}.teammate-tools .tool-rule:has(option[value="limit"]:checked) .tool-limit{display:flex}.teammate-tools .tool-rule>select{width:auto;min-width:16em}.teammate-tools .tool-limit select{width:auto}.teammate-tools .tool-limit input{width:7em}.teammate-tools .tool-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.teammate-tools button{min-height:44px}.teammate-activity li{overflow-wrap:anywhere}.teammate-memory .memory-tell,.teammate-memory .memory-search{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin:0 0 12px}.teammate-memory .memory-tell textarea{flex:1 1 280px}.teammate-memory .memory-search input{flex:1 1 220px}.teammate-memory button{min-height:44px}.teammate-memories{list-style:none;padding:0;margin:0}.teammate-memories li{padding:10px 0;border-top:1px solid var(--so-line);overflow-wrap:anywhere}.teammate-memories li:first-child{border-top:0}.teammate-memories .meta{display:block;font-size:.85rem}.teammate-memories details.memory-edit{border:0;padding:0;margin:2px 0 0;background:transparent;box-shadow:none}.memory-edit summary{cursor:pointer;min-height:32px;display:inline-flex;align-items:center;font-size:.85rem;font-weight:400;color:var(--so-muted)}.tool-undo{border:0;padding:0;margin:8px 0;background:transparent;box-shadow:none}.tool-undo summary{cursor:pointer;min-height:36px;display:inline-flex;align-items:center;font-size:.9rem}.tool-undo-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0}.tool-undo-row select{width:auto}.teammate-overrides,.teammate-undo{padding-left:18px}.teammate-undo li{margin:6px 0}.teammate-undo form{display:inline}.teammate-week h3{font-size:1rem;margin:14px 0 4px}.teammate-week button{min-height:44px}.teammate-routines{list-style:none;padding:0;margin:8px 0}.teammate-routines li{display:grid;gap:4px;padding:10px 0;border-top:1px solid var(--so-line)}.teammate-routines li:first-child{border-top:0}.routine-buttons{display:flex;flex-wrap:wrap;gap:8px}.routine-buttons button,.routine-add button{min-height:44px}.routine-add{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin:8px 0}.routine-add label{display:grid;gap:4px;flex:1 1 200px}.routine-add label:first-of-type{flex:0 1 180px}.teammate-actions,.question-options{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}.teammate-actions form,.question-options form{margin:0}.memory-edit form{display:grid;gap:8px;margin-top:6px}.memory-buttons{display:flex;flex-wrap:wrap;gap:8px}@media(max-width:600px){.teammate-tools select,.teammate-tools input{font-size:16px}}`;
+const USES = [["free", "Do it"], ["limit", "Do it, up to a limit"], ["ask", "Ask first"], ["never", "Never"]];
+/** v94: which project tools it may use, and its rule for each action. */
+function toolsSection(store, mate, csrf, canManage) {
+    const name = nameOf(mate);
+    const tools = projectToolsOf(store, mate.repo);
+    const grants = store.teammateGrants(mate.id);
+    const toolsPage = `/settings/tools?repo=${encodeURIComponent(mate.repo)}`;
+    const granted = grants.map(grant => {
+        const gone = !tools.some(one => one.name === grant.tool);
+        const rows = grant.actions.map(action => {
+            const rule = grant.rules[action.name] ?? defaultRule(action);
+            const use = rule.use === "free" && rule.limit !== undefined ? "limit" : rule.use;
+            const numbers = numberFields(action);
+            const words = rule.use === "never" ? "Never" : rule.use === "ask" ? "Ask first" : rule.limit === undefined ? "Do it" : `Do it up to ${rule.limit.field} ${rule.limit.over}, ask first above`;
+            if (!canManage)
+                return `<li class="tool-rule"><span><strong>${e(action.name)}</strong> · ${e(words)}</span>${action.about === "" ? "" : `<span class="meta">${e(action.about)}</span>`}</li>`;
+            const field = `${grant.tool}-${action.name}`.replace(/[^A-Za-z0-9_-]/g, "-");
+            return `<div class="tool-rule" data-tool-action="${e(action.name)}"><label for="use-${e(field)}"><strong>${e(action.name)}</strong>${action.about === "" ? "" : `<span class="meta">${e(action.about)}</span>`}</label>` +
+                `<select id="use-${e(field)}" name="use.${e(action.name)}">${USES.filter(([value]) => value !== "limit" || numbers.length > 0).map(([value, label]) => `<option value="${value}"${value === use ? " selected" : ""}>${label}</option>`).join("")}</select>` +
+                (numbers.length === 0 ? "" : `<span class="tool-limit">Ask first when <select name="field.${e(action.name)}" aria-label="The number the limit is on">${numbers.map(one => `<option value="${e(one)}"${rule.limit?.field === one ? " selected" : ""}>${e(one)}</option>`).join("")}</select> is over <input type="number" name="over.${e(action.name)}" min="0" step="any" value="${rule.limit === undefined ? "" : rule.limit.over}" aria-label="The limit"></span>`) +
+                `</div>`;
+        }).join("");
+        const head = `<h3>${e(grant.tool)}</h3>${gone ? `<p class="problem">This project doesn't have ${e(grant.tool)} any more, so ${e(name)} can't use it.</p>` : ""}`;
+        // v97: which action undoes which, for the Undo button on its receipts. Optional, so it's folded away.
+        const undoing = grant.actions.filter(one => !one.readOnly).map(action => {
+            const chosen = grant.rules[action.name]?.undo ?? "";
+            return `<label class="tool-undo-row">${e(action.name)} is undone by<select name="undo.${e(action.name)}"><option value="">nothing</option>${grant.actions.filter(other => other.name !== action.name).map(other => `<option value="${e(other.name)}"${other.name === chosen ? " selected" : ""}>${e(other.name)}</option>`).join("")}</select></label>`;
+        }).join("");
+        const undoBox = undoing === "" ? "" : `<details class="tool-undo"${grant.actions.some(one => grant.rules[one.name]?.undo !== undefined) ? " open" : ""}><summary>Undo</summary><p class="meta">When an action has an opposite, a person can press Undo on its receipts: the opposite is called with the same input.</p>${undoing}</details>`;
+        return canManage
+            ? `<div class="tool-grant" data-tool-grant="${e(grant.tool)}">${head}<form method="post" action="/teammates/${mate.id}/tools">${hidden(csrf)}<input type="hidden" name="tool" value="${e(grant.tool)}">${rows}` +
+                undoBox + `<div class="tool-buttons"><button name="op" value="rules">Save rules</button><button name="op" value="revoke" class="secondary">Stop using ${e(grant.tool)}</button></div></form></div>`
+            : `<div class="tool-grant" data-tool-grant="${e(grant.tool)}">${head}<ul>${rows}</ul></div>`;
+    }).join("");
+    const open = tools.filter(one => !grants.some(grant => grant.tool === one.name));
+    const add = !canManage ? "" : tools.length === 0 ? `<p class="meta">This project has no tools yet. <a href="${e(toolsPage)}">Add one</a>, then let ${e(name)} use it here.</p>`
+        : open.length === 0 ? "" : `<form method="post" action="/teammates/${mate.id}/tools" class="tool-add">${hidden(csrf)}<input type="hidden" name="op" value="grant"><label>Let ${e(name)} use<select name="tool">${open.map(one => `<option value="${e(one.name)}">${e(one.name)}${one.spec.about === "" ? "" : ` — ${e(one.spec.about.slice(0, 80))}`}</option>`).join("")}</select></label><button>Add tool</button></form>`;
+    if (grants.length === 0 && add === "")
+        return "";
+    return `<section class="card teammate-tools" id="tools"><h2>Tools</h2>${grants.length === 0 ? `<p class="meta">${e(name)} doesn't use any tools yet. Reading starts as “Do it”; everything else asks you first.</p>` : ""}${granted}${add}</section>`;
+}
+const e = (text) => text.replace(/[&<>"']/g, one => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[one]);
+const when = (at) => new Date(at).toLocaleString("en", { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" });
+const hidden = (csrf) => `<input type="hidden" name="csrf" value="${e(csrf)}">`;
+const startOfDay = () => { const day = new Date(); day.setHours(0, 0, 0, 0); return day.toISOString(); };
+/** A blank soul file: the sections a teammate reads, to fill in. */
+export const BLANK_SOUL = `---\nname: \nrole: \n---\n\n## Who you are\n\n\n## How you write\n\n\n## What you know\n\n\n## Decide on your own\n- \n\n## Ask first\n- \n\n## Never\n- \n`;
+export function teammatesListHtml(store, mates, projects, projectName, csrf, canCreate, notice) {
+    const rows = mates.map(mate => {
+        const today = store.teammateTurnsSince(mate.id, startOfDay());
+        const open = store.openTeammateQuestions([mate.id]).length;
+        return `<article class="card" data-teammate="${e(mate.handle)}"><div class="flow-row"><h2><a href="/teammates/${mate.id}">${e(labelOf(mate))}</a></h2><span class="flow-counts">${e(projectName(mate.repo))} · ${mate.state === "active" ? "Working" : "Paused"} · ${today} today${open > 0 ? ` · ${open} question${open === 1 ? "" : "s"} for you` : ""}</span></div></article>`;
+    }).join("");
+    const create = canCreate && projects.length > 0
+        ? `<details class="card"${mates.length === 0 ? " open" : ""}><summary>New teammate</summary><form method="post" action="/teammates/new" data-new-teammate>${hidden(csrf)}` +
+            `<label>Start from<select name="template">${TEAMMATE_TEMPLATES.map(one => `<option value="${e(one.id)}">${e(one.label)}: ${e(one.about)}</option>`).join("")}<option value="blank">Blank: write its soul file yourself</option></select></label>` +
+            `<label>Name<input name="name" maxlength="40" placeholder="keep the template's name"></label>` +
+            (projects.length === 1 ? `<input type="hidden" name="repo" value="${e(projects[0])}">` : `<label>Project<select name="repo">${projects.map(repo => `<option value="${e(repo)}">${e(projectName(repo))}</option>`).join("")}</select></label>`) +
+            `<button>Add teammate</button></form></details>`
+        : "";
+    const intro = `<p class="meta">AI teammates work your flows' cards within rules you write: they decide, reply and move cards on, and ask you when their rules say to. The quickest start is a <a href="/kits">starter kit</a>: a teammate and its flow, set up in one click.</p>`;
+    return `<section class="teammates">${notice.problem ? `<p class="problem" role="alert">${e(notice.problem)}</p>` : ""}${notice.said ? `<p class="said" role="status">${e(notice.said)}</p>` : ""}${intro}${rows || '<p class="meta">No teammates yet.</p>'}${create}</section>`;
+}
+/** v97: its week: what it did and cost, what people overrode, and calls that can be undone. */
+function weekSection(store, mate, csrf, canManage) {
+    const week = weekOf(store, mate, new Date());
+    const overrides = week.overrides.length === 0 ? "" : `<h3>What you overrode</h3><ul class="teammate-overrides">${week.overrides.map(one => `<li>${e(one.said)}${one.href === null ? "" : ` · <a href="${e(one.href)}">open</a>`} <span class="meta">${when(one.at)}</span></li>`).join("")}</ul>`;
+    const undo = week.undoable.length === 0 ? "" : `<h3>Undo</h3><ul class="teammate-undo">${week.undoable.map(one => `<li data-undo="${one.call}"><span>${e(one.words)}</span> <span class="meta">${when(one.at)}${one.href === null ? "" : ` · <a href="${e(one.href)}">open</a>`}</span>` +
+        (canManage ? `<form method="post" action="/teammates/${mate.id}/week">${hidden(csrf)}<input type="hidden" name="id" value="${one.call}"><button name="op" value="undo" class="secondary">Undo with ${e(one.undo)}</button></form>` : "") + `</li>`).join("")}</ul>`;
+    const send = canManage ? `<form method="post" action="/teammates/${mate.id}/week">${hidden(csrf)}<button name="op" value="send" class="secondary">Send the week's report</button></form>` : "";
+    return `<details class="card teammate-week" id="week" open><summary>This week</summary><p class="teammate-week-said">${e(weekWords(mate, week)).replace(/\n/g, "<br>")}</p>${overrides}${undo}${send}</details>`;
+}
+/** v96: its desk — where messages to it by name and its routines land — and its routines. */
+function deskSection(store, mate, csrf, canManage) {
+    const name = nameOf(mate);
+    const desk = deskOf(store, mate);
+    const routines = routinesOf(store, mate);
+    const intro = `<p class="meta">Message ${e(name)} by name in your chat app, like “@${e(mate.handle)} where's order 1042?”. It lands on ${desk === null ? "its desk" : `<a href="/flows/${desk.id}">${e(name)}'s desk</a>`}, and the answer comes back to you.</p>`;
+    const list = routines.length === 0 ? "" : `<ul class="teammate-routines">${routines.map(one => `<li data-routine="${one.id}"><span><strong>${e(scheduleWords(one.schedule))}</strong> · ${e(one.text)}</span>` +
+        `<span class="meta">${one.state === "paused" ? "Paused" : one.nextAt === null ? "" : `Next ${when(one.nextAt)}`}${one.lastAt === null ? "" : ` · last ${when(one.lastAt)}${one.lastOutcome === null ? "" : `: ${e(one.lastOutcome)}`}`}</span>` +
+        (canManage ? `<form method="post" action="/teammates/${mate.id}/routines" class="routine-buttons">${hidden(csrf)}<input type="hidden" name="id" value="${one.id}"><button name="op" value="run" class="secondary">Run now</button><button name="op" value="remove" class="secondary">Remove</button></form>` : "") + `</li>`).join("")}</ul>`;
+    const add = canManage ? `<form method="post" action="/teammates/${mate.id}/routines" class="routine-add">${hidden(csrf)}<input type="hidden" name="op" value="add">` +
+        `<label>When<input type="text" name="schedule" maxlength="80" placeholder="weekdays 09:00" required></label><label>What to do<input type="text" name="text" maxlength="200" placeholder="Look up yesterday's refunds and tell me the total." required></label><button>Add routine</button></form>` : "";
+    return `<section class="card teammate-desk" id="desk"><h2>Desk and routines</h2>${intro}${list}${add}${canManage ? `<p class="meta">A routine puts a card on its desk on that schedule (“weekdays 09:00”, “daily 17:00”, “monday 09:00”, “every 2 hours”; times are this computer's, ${e(localZone())}, unless you name one); the answer goes to ${e(mate.manager)}.</p>` : ""}</section>`;
+}
+/** A schedule's stored form ("weekdays:09:00@Europe/London") in words. */
+const scheduleWords = (text) => { const parsed = parseSchedule(text); return parsed === null ? text : describeSchedule(parsed); };
+/** v95: what it remembers — what its people told it, and what it kept from cards — to search, edit and forget. */
+function memorySection(store, mate, csrf, canManage, query) {
+    const name = nameOf(mate);
+    const all = store.teammateMemories(mate.id, { limit: 500 });
+    const shown = query === null || query.trim() === "" ? all.slice(0, 30) : searchMemories(store, mate, query);
+    const tell = canManage ? `<form method="post" action="/teammates/${mate.id}/note" class="memory-tell">${hidden(csrf)}<label class="sr-only" for="teammate-note">Tell ${e(name)} something</label><textarea id="teammate-note" name="note" rows="2" maxlength="${MEMORY_CHARS}" placeholder="For example: this week, offer free shipping instead of a refund when you can."></textarea><button>Tell ${e(name)}</button></form>` : "";
+    const search = all.length > 8 || (query ?? "") !== "" ? `<form method="get" action="/teammates/${mate.id}#memory" class="memory-search" role="search"><label class="sr-only" for="memory-q">Search what ${e(name)} remembers</label><input id="memory-q" type="search" name="q" value="${e(query ?? "")}" placeholder="Search what ${e(name)} remembers"><button class="secondary">Search</button></form>` : "";
+    const items = shown.map(one => {
+        const card = one.card === null ? null : store.getFlowCard(one.card);
+        const whence = one.source === "person" ? `${e(one.createdBy)} told it` : card === null ? "it kept this" : `it kept this from <a href="/flows/${card.flow}?card=${card.id}">${e(card.title.slice(0, 60))}</a>`;
+        const edit = canManage ? `<details class="memory-edit"><summary>Edit</summary><form method="post" action="/teammates/${mate.id}/memory">${hidden(csrf)}<input type="hidden" name="id" value="${one.id}"><label class="sr-only" for="memory-${one.id}">Memory</label><textarea id="memory-${one.id}" name="text" rows="2" maxlength="${MEMORY_CHARS}">${e(one.text)}</textarea><div class="memory-buttons"><button name="op" value="edit">Save</button><button name="op" value="forget" class="secondary">Forget</button></div></form></details>` : "";
+        return `<li data-memory="${one.id}" data-source="${one.source}"><span>${e(one.text)}</span> <span class="meta">${whence} · ${when(one.updatedAt)}</span>${edit}</li>`;
+    }).join("");
+    const empty = (query ?? "") !== "" ? `<p class="meta">Nothing ${e(name)} remembers matches that.</p>` : `<p class="meta">Nothing yet. What you tell ${e(name)} is kept here, and it keeps short facts from the cards it works.</p>`;
+    return `<section class="card teammate-memory" id="memory"><h2>Memory</h2>${tell}${search}${shown.length === 0 ? empty : `<ul class="teammate-memories">${items}</ul>`}${query === null && all.length > shown.length ? `<p class="meta">${all.length - shown.length} older ${all.length - shown.length === 1 ? "memory" : "memories"}: search to find them.</p>` : ""}</section>`;
+}
+export function teammatePageHtml(store, mate, viewer, projectName, csrf, canManage, approvers, notice) {
+    const name = nameOf(mate);
+    const questions = store.openTeammateQuestions([mate.id]);
+    const asked = questions.map(question => {
+        const card = store.getFlowCard(question.card);
+        const flow = card === null ? null : store.getFlow(card.flow);
+        const mine = question.askedOf === viewer;
+        const cardLink = card === null || flow === null ? "a card" : `<a href="/flows/${flow.id}?card=${card.id}">${e(card.title)}</a>`;
+        return `<article class="card teammate-question" data-question="${question.id}"${question.suggestion === null ? "" : " data-suggestion"}><p class="meta">${question.suggestion === null ? `About ${cardLink}` : "Suggests a rule change"} · ${when(question.createdAt)}${mine ? "" : ` · for ${e(question.askedOf)}`}</p><p><strong>${e(question.question)}</strong></p>` +
+            (mine ? `<div class="question-options">${question.options.map(one => `<form method="post" action="/teammates/questions/${question.id}/answer">${hidden(csrf)}<input type="hidden" name="choice" value="${e(one.id)}"><button>${e(one.label)}</button></form>`).join("")}</div>` +
+                `<form method="post" action="/teammates/questions/${question.id}/answer" class="question-reply">${hidden(csrf)}<label>Or answer in your words<textarea name="text" rows="2" maxlength="2000"></textarea></label><button>Answer</button></form>` : "") +
+            `</article>`;
+    }).join("");
+    const zones = zonesOf(store, mate);
+    const where = zones.length === 0
+        ? `<p class="meta">Not on any zone yet. In a flow, choose ${e(name)} under “Who decides” on a “Person decides” zone, or add a “Teammate handles it” zone.</p>`
+        : `<ul>${zones.map(one => `<li><a href="/flows/${one.flow}">${e(one.flowName)}</a> · ${one.kind === "decides" ? "decides" : "handles"} ${e(one.title)}</li>`).join("")}</ul>`;
+    // What it did and why, with every tool call it made or asked to make (v94), newest first.
+    const events = [
+        ...store.teammateEvents(mate.id, 40).filter(one => one.kind !== "note").map(one => ({ kind: one.kind, said: one.said, card: one.card, at: one.at })),
+        ...store.teammateCallsOf(mate.id, 40).map(one => ({ kind: "call", said: `Used ${callWords(one.tool, one.action, one.input, 200)} · ${receiptWords(store, one)}`, card: one.card, at: one.createdAt })),
+    ].sort((a, b) => b.at.localeCompare(a.at)).slice(0, 40);
+    const activity = events.length === 0 ? `<p class="meta">Nothing yet.</p>` : `<ul class="teammate-activity">${events.map(one => {
+        const card = one.card === null ? null : store.getFlowCard(one.card);
+        return `<li data-event="${one.kind}">${e(one.said)}${card === null ? "" : ` · <a href="/flows/${card.flow}?card=${card.id}">open</a>`} <span class="meta">${when(one.at)}</span></li>`;
+    }).join("")}</ul>`;
+    const versions = store.teammateVersions(mate.id);
+    const latest = versions[0];
+    const manage = canManage ? `<div class="teammate-actions">` +
+        `<form method="post" action="/teammates/${mate.id}/state">${hidden(csrf)}<input type="hidden" name="state" value="${mate.state === "active" ? "paused" : "active"}"><button${mate.state === "active" ? ' class="secondary"' : ""}>${mate.state === "active" ? `Pause ${e(name)}` : `Resume ${e(name)}`}</button></form>` +
+        `<form method="post" action="/teammates/${mate.id}/summary">${hidden(csrf)}<button class="secondary">Send today's summary</button></form></div>` : "";
+    return [
+        notice.problem ? `<p class="problem" role="alert">${e(notice.problem)}</p>` : "",
+        notice.said ? `<p class="said" role="status">${e(notice.said)}</p>` : "",
+        `<p class="meta">${e(projectName(mate.repo))} · ${mate.state === "active" ? "Working" : "Paused: its decisions go to people"} · reports to ${e(mate.manager)}</p>`,
+        manage,
+        questions.length === 0 ? "" : `<section><h2>Questions</h2>${asked}</section>`,
+        `<section class="card"><h2>Today</h2><p class="teammate-summary">${e(summaryOf(store, mate, startOfDay()).said).replace(/\n/g, "<br>")}</p></section>`,
+        weekSection(store, mate, csrf, canManage),
+        `<section class="card"><h2>Works on</h2>${where}</section>`,
+        toolsSection(store, mate, csrf, canManage),
+        deskSection(store, mate, csrf, canManage),
+        memorySection(store, mate, csrf, canManage, notice.query ?? null),
+        `<details class="card"${canManage ? " open" : ""}><summary>Soul file</summary><p class="meta">Who ${e(name)} is and its rules, read every turn. Version ${mate.version}${latest === undefined ? "" : ` · saved by ${e(latest.savedBy)}, ${when(latest.savedAt)}`} · <a href="/teammates/${mate.id}/soul.md" download>Download</a></p>` +
+            (canManage ? `<form method="post" action="/teammates/${mate.id}/soul" data-soul-form>${hidden(csrf)}<label class="sr-only" for="teammate-soul">Soul file</label><textarea id="teammate-soul" name="soul" rows="24" class="mono" maxlength="12000" spellcheck="false">${e(notice.soulDraft ?? mate.soul)}</textarea><button>Save</button></form>` : `<pre class="mono">${e(mate.soul)}</pre>`) + `</details>`,
+        `<details class="card"><summary>What ${e(name)} did</summary>${activity}</details>`,
+        canManage ? `<details class="card"><summary>Settings</summary><form method="post" action="/teammates/${mate.id}/settings">${hidden(csrf)}` +
+            `<label>Model<select name="model">${TEAMMATE_MODELS.map(one => `<option value="${one}"${(mate.model ?? "default") === one ? " selected" : ""}>${one === "default" ? "The lead chat's model" : one[0].toUpperCase() + one.slice(1)}</option>`).join("")}</select></label>` +
+            `<label>Turns a day, at most<input type="number" name="dailyTurns" min="1" max="2000" value="${mate.dailyTurns}"></label>` +
+            `<label>Reports to<select name="manager">${[...new Set([mate.manager, ...approvers])].map(one => `<option value="${e(one)}"${one === mate.manager ? " selected" : ""}>${e(one)}</option>`).join("")}</select></label><button>Save settings</button></form>` +
+            `<form method="post" action="/teammates/${mate.id}/state" class="danger-zone">${hidden(csrf)}<input type="hidden" name="state" value="removed"><button class="danger">Remove ${e(name)} from the team</button></form></details>` : "",
+    ].join("");
+}