zigmini 1.0.0-beta.3 → 1.1.0-beta.1

package/web/app.js

@@ -1,4 +1,5 @@
 import { ClapDetector } from "./clap.js";
+import { hostFileRequest, mountHostFiles, replaceAttachmentQuery, sentDocumentBlock, validDocument, visibleOwnerText } from "./attachments.js";
 import { renderDiagramMarkdown } from "./diagram.js";
 import { setupMemo } from "./memo.js";
 import { setupAutoCopy } from "./autocopy.js";
@@ -12,6 +13,9 @@ import {
 	isReviewRequired, isSubmitting, isUnresolved, noteConflict, originalActionId, originalChoices, presentation, pruneDetails, questionTitle, reference,
 	sortedDecisions, speechTextForTurn, dismissMode, DISMISS_TEXT,
 	STATUS_LABELS, submitKey, bindingLabel, waitReason, sourceContext,
+	AGENT_TOOL_CLIENT_HEADER, AGENT_TOOL_CLIENT_PATH, candidatesPath, clientExpired, composeToolGrantResponse, designateRequest, featureHeaders, interpretClientIssue,
+	interpretDesignate, isToolGrant, operationLabel, ownerAnswerRequired, ownerHeaders, scopeText, targetCandidates, toolErrorText, toolGrantOutcomeText, toolGrantView, toolName,
+	artifactReviewOutcome, artifactReviewRequest, artifactReviewView, isArtifactReview,
 } from "./decisions.js";
 import { chatTurnEndLine, describeEvent } from "./devlog.js";
 import { applyActivityEvent, applyActivitySnapshot, beginGeneration, createActivity, endGeneration, isBusy, isUnknown } from "./activity.js";
@@ -45,16 +49,22 @@ import { createEnrollment, NO_DEVICES_LINE, REVOKE_ARMED_LABEL, REVOKE_LABEL } f
 import { canUpdate, checkFailedLine, noticeLine, parseNotice, progressLine, questionGate, resultLine, UPDATE_CHECK_PATH, UPDATE_CONSENT_PATH, UPDATE_PATH, UPDATE_STATE_PATH, UPDATE_STATUS_PATH, updateStep, updateView } from "./update.js";
 import { createAppDownload } from "./app-download.js";
 import { setupNotificationSettings } from "./notifications.js";
-import { cleanRequest, cleanResultLine, formatBytes, GC_CLEAN_PATH, GC_PATH, gcView, selectAllState, selectAllTarget } from "./gc.js";
+import { AUDIT_LINES, auditView, cleanRequest, cleanResultLine, formatBytes, gcView, HOUSEKEEPING_AUDIT_PATH, HOUSEKEEPING_CLEAN_PATH, HOUSEKEEPING_PATH, selectAllState, selectAllTarget } from "./gc.js";
 import {
-	applyAgentApplied, applyAgentUpdate, clearField, cloneRequest, DEFAULTS_PATH, DELETE_HINT, deleteEnabled, deleteRequest, editorRows, editorState,
-	EMPTY_FILES_LINE, EMPTY_AGENTS_LINE, EMPTY_TRASH_LINE, errorLine, fileRows, filesPath, headerView, mainConversations, shownConversation, AGENTS_PATH,
-	restoreRequest, saveRequest, setBody, setField, setUnknownRaw, sidebarItems, sourceUploadPath, STALE_TITLE, TRASH_PATH, trashRows, validateEditor, widgetValue,
+	advanceUpload, applyAgentApplied, freshListAnswer, reconcileAgents, applyAgentUpdate, APPLY_WAIT_MS, applyLine, applyNowShown, applyNowTarget, applyWatch, capabilities, clearField, cloneRequest, composeSource, createDraftSaver, createPreviewRequester, DEFAULTS_PATH, DRAFT_REOPEN_WAIT_MS, DELETE_HINT, deletableFile, deleteEnabled, deleteRequest, discardDraftRequest, downloadable, downloadPath, draftLoadRequest,
+	draftFileList, draftRequest, draftRows, DRAFTS_PATH, editorRows, editorState, editorUpdateAction, fileDeleteRequest, fileRestoreRequest, fileTrashLabel, fileTrashPath, fileTrashRows, modifiedLabel, nextUpload, queuedUploadRows, retryUpload, turnEndRefreshes, UPLOAD_MAX_BYTES, uploadRows, uploadsAfterCreate, uploadStateLine,
+	EMPTY_AGENTS_LINE, EMPTY_TRASH_LINE, errorLine, fileAreas, fileRows, filesPath, headerView, lastDailyLine, mainConversations, newDraftId, PREVIEW_DELAY_MS, previewRequest, previewState, shownConversation, AGENTS_PATH,
+	restoreOutcome, restoreRequest, roleGuideItems, rotateRequest, saveErrorLine, saveOutcome, saveRequest, setBody, setField, setUnknownRaw, sidebarItems, skillOptions, sourceUploadPath, speakerView, STALE_TITLE, staleNotice, TRASH_PATH, trashRows,
+	unchangedSource, uploadedLine, validateEditor, widgetValue,
+	accessSummary, applyRevoke, classifyEdit, editLine, editRequest, interpretPermissionResponse, parseScopeText, policyEventStale, revokeAllRequest, revokeLine, revokeRequest,
+	scopeDraft, toolGrantRows, toolPermissionErrorLine, toolPermissionsRequest,
 } from "./agents.js";
+import { applyCollaborationEvent, artifactPath, cancelOutcome, cancelRequest, cardView, downloadOutcome, emptyCards, fileDeleteText, fileOriginLabel, isCollaborationFallback, listingOutcome, listingRequest, mergeRequestListing, targetOptions } from "./collaboration.js";
 import { manualFailureText, manualLinkLang, manualUrl, otherLang } from "./manual.js";
 import { canRestoreHeld, completeDetail, createAllowedValues, createSecurityBaseline, createSecurityInbox, repoAllowed, repoScopeBlock } from "./security-inbox.js";
 import { getLanguage, isUiLanguage, onLanguageChange, registerStrings, setLanguage, t, UI_LANGUAGES } from "./i18n.js";
 import mainStrings from "./i18n/main.js";
+import { autoStartWanted, installTour } from "./tour.js";
 
 installTooltips(document, window);
 registerStrings(mainStrings);
@@ -140,6 +150,11 @@ const state = {
 	sessionTransitions: new Set(),
 	ws: null,
 };
+// The agents the gateway lists (GET /api/agents, agent.updated); the sidebar group, header, profile and bubble speaker read it.
+// `writes` stamps every write to the list (writeAgents); a list answer lands only at the stamp it was sent at (T21W-B2).
+const agentState = { list: [], loaded: false, writes: 0 };
+// Listeners of "지금 적용" requests that wait for their rotation and the new session's agent.applied (agent-ux todo 21).
+const applyWaits = new Set();
 // Work activity the gateway reports per conversation (snapshot + activity.updated). It drives the avatar only;
 // state.running stays the sole input of #interrupt, and history pages never write here.
 const activity = createActivity();
@@ -182,9 +197,20 @@ function bubbleIconUrl() {
 	return agentIconUrl(agentIcon);
 }
 
-/** The reference labels: the agent's references carry the agent's current name. */
+/** Who speaks in the open conversation (bug 284): the agent's name and text icon, or main's name and icon picture. */
+function speaker() {
+	return speakerView(currentConversation(), agentState.list, { name: agentName, iconUrl: bubbleIconUrl() });
+}
+
+/** A bot row of the open conversation, named and pictured after its speaker. */
+function botRow(extra) {
+	const view = speaker();
+	return messageRow({ who: view.name, icon: view.icon, bot: true, ...extra });
+}
+
+/** The reference labels: the speaker's references carry the speaker's current name. */
 function roleLabels() {
-	return { ...ROLE_LABELS, assistant: agentName };
+	return { ...ROLE_LABELS, assistant: speaker().name };
 }
 
 function receiveProfile(data) {
@@ -229,11 +255,13 @@ function applyNickname() {
 
 function applyAgentIcon() {
 	const url = agentIconUrl(agentIcon);
-	for (const img of document.querySelectorAll("#agent-profile .agent-avatar img, #head-avatar, #status-back img")) {
+	for (const img of document.querySelectorAll("#head-avatar, #status-back img")) {
 		img.src = url;
 		img.classList.toggle("custom-icon", Boolean(agentIcon));
 	}
-	iconAgentRows(document.querySelectorAll(".msg:not(.mine)"), bubbleIconUrl());
+	// The rows drawn belong to the open conversation: main's follow main's icon, an agent's keep its own text icon (bug 284).
+	if (!speaker().agent) iconAgentRows(document.querySelectorAll(".msg:not(.mine)"), bubbleIconUrl());
+	renderAgentProfile();
 	hubEffects?.setIcon(url);
 }
 
@@ -249,16 +277,38 @@ async function changeAgentIcon(method, body) {
 }
 
 function applyAgentName() {
-	const nameEl = document.querySelector("#agent-profile .agent-name");
-	if (!nameEl.querySelector("input")) nameEl.textContent = agentName;
-	nameEl.title = agentName;
-	// The agent's bubbles and reference labels already drawn follow the name, like the user's rows in applyNickname.
-	nameAgentRows(document.querySelectorAll(".msg:not(.mine)"), agentName);
-	for (const label of document.querySelectorAll('[data-role="assistant"]')) label.textContent = agentName;
+	// Main's bubbles and reference labels already drawn follow the name, like the user's rows in applyNickname; an
+	// agent conversation's rows keep the agent's own name (bug 284).
+	if (!speaker().agent) {
+		nameAgentRows(document.querySelectorAll(".msg:not(.mine)"), agentName);
+		for (const label of document.querySelectorAll('[data-role="assistant"]')) label.textContent = agentName;
+	}
+	renderAgentProfile();
 	statusParts.agentName = agentName;
 	renderWorkStatusAll();
 }
 
+/**
+ * The sidebar profile (bug 284): main's name, icon picture and "Default agent" in main; the agent's name, text icon
+ * and "Agent" in an agent conversation, where a double-click opens that agent's settings instead of editing main.
+ */
+function renderAgentProfile() {
+	const view = speaker();
+	const profile = document.querySelector("#agent-profile");
+	const nameEl = profile.querySelector(".agent-name");
+	if (!nameEl.querySelector("input")) nameEl.textContent = view.name;
+	nameEl.title = view.name;
+	const avatar = profile.querySelector(".agent-avatar");
+	renderAgentAvatar(avatar, view.iconUrl, view.icon);
+	avatar.querySelector("img")?.classList.toggle("custom-icon", Boolean(agentIcon));
+	const sub = profile.querySelector(".me-sub");
+	sub.dataset.i18n = view.agent ? "profile.agentConversation" : "profile.agent";
+	sub.textContent = t(sub.dataset.i18n);
+	profile.dataset.i18nAttr = `title:${view.agent ? "profile.editAgent.tip" : "profile.editAgentName.tip"}`;
+	avatar.dataset.i18nAttr = `title:${view.agent ? "profile.editAgent.tip" : "profile.editAgentIcon.tip"}`;
+	for (const el of [profile, avatar]) el.title = t(el.dataset.i18nAttr.slice("title:".length));
+}
+
 document.querySelector("#owner-profile").addEventListener("dblclick", () => {
 	editNickname(document.querySelector("#owner-profile .me-name"), nickname, (value) => {
 		nickname = writeNickname(localStorage, value);
@@ -270,6 +320,11 @@ document.querySelector("#owner-profile").addEventListener("dblclick", () => {
 
 document.querySelector("#agent-profile .agent-avatar").addEventListener("dblclick", (event) => {
 	event.stopPropagation();
+	const view = speaker();
+	if (view.agent) {
+		openAgents("editor", view.agentId);
+		return;
+	}
 	editAgentIcon(document.querySelector(".sidebar-foot"), agentIconUrl(agentIcon), {
 		onSave: (png) => changeAgentIcon("PUT", png),
 		onReset: () => changeAgentIcon("DELETE"),
@@ -277,6 +332,11 @@ document.querySelector("#agent-profile .agent-avatar").addEventListener("dblclic
 });
 
 document.querySelector("#agent-profile").addEventListener("dblclick", () => {
+	const view = speaker();
+	if (view.agent) {
+		openAgents("editor", view.agentId);
+		return;
+	}
 	editNickname(document.querySelector("#agent-profile .agent-name"), agentName, (value) => {
 		agentName = writeAgentName(localStorage, value);
 		queueMicrotask(applyAgentName);
@@ -438,6 +498,7 @@ function renderSessionTransition() {
 	for (const id of ["input", "send", "attach", "mic", "rotate-session"]) {
 		$(id).disabled = active;
 	}
+	documents.render();
 }
 
 const els = {
@@ -576,12 +637,13 @@ nav.next.ondblclick = () => {
 	els.messages.scrollTo({ top: els.messages.scrollHeight, behavior: "smooth" });
 };
 
-function messageRow({ who, bot, ts, tag }) {
+/** `icon`: a custom agent's text icon for its bot rows (bug 284); main's rows take the icon picture. */
+function messageRow({ who, bot, ts, tag, icon = null }) {
 	const row = document.createElement("div");
 	row.className = bot ? "msg" : "msg mine";
 	const avatar = document.createElement("div");
 	avatar.className = `avatar ${bot ? "bot-avatar" : "me-avatar"}`;
-	if (bot) renderAgentAvatar(avatar, bubbleIconUrl());
+	if (bot) renderAgentAvatar(avatar, bubbleIconUrl(), icon);
 	else avatar.textContent = nicknameInitial(nickname);
 	const body = document.createElement("div");
 	body.className = "msg-body";
@@ -654,7 +716,7 @@ function ensureLiveItem(itemId, ts, fromThinking = false) {
 		liveOut = true;
 		let body;
 		try {
-			body = messageRow({ who: agentName, bot: true, ts });
+			body = botRow({ ts });
 		} finally {
 			liveOut = false;
 		}
@@ -861,19 +923,21 @@ function renderCardBody(card, decision) {
 	card.dataset.decisionRevision = String(decision.revision);
 	card.classList.toggle("resolved", p.terminal || !isUnresolved(decision));
 	card.setAttribute("aria-busy", String(busy));
-	const nodes = [make("div", "approval-title", payload.title || request?.title || t(decision.permission ? "approval.permissionRequest" : "approval.question"))];
-	if (payload.detail) nodes.push(make("div", "approval-detail", payload.detail));
+	const tool = isToolGrant(decision);
+	const nodes = [make("div", "approval-title", tool ? toolGrantView(decision).title : payload.title || request?.title || t(decision.permission ? "approval.permissionRequest" : "approval.question"))];
+	if (!tool && payload.detail) nodes.push(make("div", "approval-detail", payload.detail));
 	// A question cancelled by deleting it from the inbox stores { cancelled: true }, which is not an answer the user gave.
-	if (decision.answer && decision.reason !== "user_cancelled") nodes.push(make("div", "inbox-note", t("decision.myAnswer", { answer: describeAnswer(decision.answer) })));
-	if (p.form) nodes.push(...renderAnswerFields(decision, form, locked, () => syncDecisionSurfaces(decisionById(inbox.state, decision.id) ?? decision, card)));
+	if (decision.answer && !tool && decision.reason !== "user_cancelled") nodes.push(make("div", "inbox-note", t("decision.myAnswer", { answer: describeAnswer(decision.answer) })));
+	if (tool) nodes.push(...renderToolGrantFields(decision, p, locked));
+	else if (p.form) nodes.push(...renderAnswerFields(decision, form, locked, () => syncDecisionSurfaces(decisionById(inbox.state, decision.id) ?? decision, card)));
 	else {
 		const saved = renderSavedChoices(decision);
 		if (saved) nodes.push(saved);
 	}
 	const lost = renderReference(decision);
 	if (lost) nodes.push(lost);
-	const kind = decision.permission ? t("approval.permission") : decision.method === "question" ? t("approval.question") : decision.method;
-	const binding = p.kind === "live" ? "" : ` · ${bindingLabel(decision)}`;
+	const kind = tool ? toolGrantView(decision).title : decision.permission ? t("approval.permission") : decision.method === "question" ? t("approval.question") : decision.method;
+	const binding = p.kind === "live" || tool ? "" : ` · ${bindingLabel(decision)}`;
 	nodes.push(make("div", "approval-meta", `${deadlineLabel(decision.deadlineAt)} · ${kind}${binding}`));
 	const status = cardStatus(decision, p, busy, review);
 	if (status) {
@@ -900,7 +964,7 @@ function renderApproval(req, resolved, ts) {
 	const explicitId = typeof req.decisionId === "string" ? req.decisionId : null;
 	if (explicitId) card.dataset.decisionId = explicitId;
 	cardRequests.set(card, req);
-	const body = messageRow({ who: agentName, bot: true, ts: req.createdAt ? new Date(req.createdAt).toISOString() : ts, tag: req.permission ? "approval.permissionRequest" : "approval.question" });
+	const body = botRow({ ts: req.createdAt ? new Date(req.createdAt).toISOString() : ts, tag: req.permission ? "approval.permissionRequest" : "approval.question" });
 	body.appendChild(card);
 	const decision = decisionForCard(inbox.state, req);
 	if (decision) {
@@ -1031,6 +1095,249 @@ function markResolved(card, res) {
 	card.appendChild(note);
 }
 
+// ---- 에이전트 협업 카드 (agent-collaboration-292 task 11, C-10). web/collaboration.js decides; this block draws one card per request
+// in the open conversation's transcript (at the event that first named it), keeps it current from later events and the
+// owner listing, and sends the owner actions (cancel, recheck, download) whose refusals are shown as they are.
+const collab = { conv: null, cards: emptyCards(), lines: new Map(), listing: 0 };
+
+function resetCollaboration(conv) {
+	collab.conv = conv;
+	collab.cards = emptyCards();
+	collab.lines = new Map();
+	collab.listing += 1;
+}
+
+function collaborationCardEl(requestId) {
+	const selector = `.collaboration-card[data-request-id="${CSS.escape(requestId)}"]`;
+	return sink?.querySelector(selector) ?? els.messages.querySelector(selector);
+}
+
+function collaborationContext() {
+	return { agents: agentState.list, agentId: currentConversation()?.agentId ?? null, mainName: agentName };
+}
+
+function renderCollaborationEvent(e, fromHistory) {
+	const outcome = applyCollaborationEvent(collab.cards, e);
+	collab.cards = outcome.cards;
+	if (outcome.notice) {
+		systemLine(outcome.notice, e.type === "agent.collaboration.blocked");
+		return;
+	}
+	if (!outcome.requestId || !outcome.change) return;
+	const card = collab.cards.get(outcome.requestId);
+	if (!card || card.seq === null) return;
+	const existing = collaborationCardEl(outcome.requestId);
+	if (existing) fillCollaborationCard(existing, card);
+	else if (outcome.change === "created") out(buildCollaborationCard(card));
+	if (!fromHistory && !existing && card.state === null && collab.conv === state.current) void loadCollaborationListing(collab.conv);
+}
+
+function buildCollaborationCard(card) {
+	const el = make("div", "collaboration-card");
+	el.dataset.requestId = card.requestId;
+	el.setAttribute("role", "group");
+	fillCollaborationCard(el, card);
+	return el;
+}
+
+function collaborationFileList(requestId, files, withSize) {
+	const list = make("ul", "collab-files");
+	for (const file of files) {
+		const li = make("li", "collab-file");
+		li.dataset.artifactId = file.artifactId;
+		li.dataset.name = file.name;
+		if (file.sha256) li.dataset.sha256 = file.sha256;
+		const name = make("span", "collab-file-name", file.name);
+		name.title = file.artifactId;
+		li.append(name);
+		if (withSize && file.size) li.append(make("span", "collab-file-size", file.size));
+		const download = peButton(t("collab.download"), null, null, "text-btn");
+		download.dataset.action = "collaboration-download";
+		download.setAttribute("aria-label", t("collab.download.label", { name: file.name }));
+		li.append(download);
+		list.append(li);
+	}
+	return list;
+}
+
+function fillCollaborationCard(el, card) {
+	const view = cardView(card, collaborationContext());
+	el.dataset.state = view.state ?? "unconfirmed";
+	el.classList.toggle("outgoing", view.outgoing);
+	el.setAttribute("aria-label", `${view.title} · ${view.stateLabel}`);
+	const head = make("div", "collab-head");
+	head.append(make("span", "collab-title", view.title));
+	if (view.kindLabel) head.append(make("span", "collab-kind", view.kindLabel));
+	const stateEl = make("span", `collab-state ${view.tone}`, view.stateLabel);
+	stateEl.dataset.state = view.state ?? "unconfirmed";
+	head.append(stateEl);
+	if (view.ts) head.append(make("span", "collab-time", timeLabel(view.ts)));
+	const parties = make("div", "collab-parties");
+	const from = make("span", "collab-party", `${t("collab.from")} `);
+	from.append(make("b", "", view.from));
+	const to = make("span", "collab-party", `${t("collab.to")} `);
+	to.append(make("b", "", view.to));
+	parties.append(from, make("span", "collab-arrow", "→"), to);
+	const children = [head, parties];
+	if (view.text) children.push(make("div", "collab-text", view.text));
+	if (view.inputs.length) {
+		const section = make("div", "collab-section");
+		section.append(make("div", "collab-section-label", t("collab.inputs")), collaborationFileList(card.requestId, view.inputs, false));
+		children.push(section);
+	}
+	if (view.result) {
+		const section = make("div", "collab-section collab-result");
+		section.append(make("div", "collab-section-label", t("collab.result")));
+		section.append(view.result.text ? make("div", "collab-text", view.result.text) : make("div", "collab-note", t("collab.result.none")));
+		if (view.result.files.length) section.append(make("div", "collab-section-label", t("collab.files")), collaborationFileList(card.requestId, view.result.files, true));
+		children.push(section);
+	}
+	if (view.replied) children.push(make("div", "collab-note", t("collab.replied")));
+	for (const note of view.notes) children.push(make("div", `collab-note${note.error ? " error" : ""}`, note.text));
+	const line = make("div", "collab-line");
+	line.setAttribute("role", "status");
+	const last = collab.lines.get(card.requestId);
+	if (last) {
+		line.textContent = last.text;
+		line.classList.toggle("error", last.error);
+	}
+	children.push(line);
+	const actions = make("div", "collab-actions");
+	if (view.cancellable) {
+		const cancel = peButton(t("collab.cancel"), null, null, "text-btn danger");
+		cancel.dataset.action = "collaboration-cancel";
+		cancel.setAttribute("aria-label", t("collab.cancel.label", { id: card.requestId.slice(0, 8) }));
+		cancel.disabled = cancelRequest(card) === null;
+		actions.append(cancel);
+	}
+	const recheck = peButton(t("collab.recheck"), null, null, "text-btn");
+	recheck.dataset.action = "collaboration-recheck";
+	actions.append(recheck);
+	children.push(actions);
+	el.replaceChildren(...children);
+}
+
+function refreshCollaborationCards() {
+	for (const [requestId, card] of collab.cards) {
+		const el = collaborationCardEl(requestId);
+		if (el) fillCollaborationCard(el, card);
+	}
+}
+
+function setCollaborationLine(requestId, text, error) {
+	collab.lines.set(requestId, { text, error });
+	const el = collaborationCardEl(requestId);
+	const card = collab.cards.get(requestId);
+	if (el && card) fillCollaborationCard(el, card);
+}
+
+// Owner actions (cancel, download) carry the 294 caller helper proof: the HttpOnly client cookie plus a page nonce
+// issued by POST /api/agent-tool-client. A stale nonce is renewed once.
+let collaborationNonce = null;
+async function collaborationOwnerHeaders(fresh) {
+	if (fresh || !collaborationNonce) {
+		collaborationNonce = null;
+		try {
+			const issued = await fetch("/api/agent-tool-client", { method: "POST", headers: { "x-zigmini-agent-tool-client": "1" } });
+			const body = await issued.json().catch(() => null);
+			if (issued.ok && typeof body?.pageNonce === "string") collaborationNonce = body.pageNonce;
+		} catch {}
+	}
+	return collaborationNonce ? { "x-zigmini-agent-tool-client": "1", "x-zigmini-page-nonce": collaborationNonce } : { "x-zigmini-agent-tool-client": "1" };
+}
+
+async function collaborationFetch(request, retried = false) {
+	const owner = request.method === "POST";
+	let res;
+	try {
+		const headers = owner ? { ...(request.headers ?? {}), ...(await collaborationOwnerHeaders(retried)) } : request.headers;
+		res = await fetch(request.path, { method: request.method, headers, body: request.body });
+	} catch {
+		return { status: 0, body: null, res: null };
+	}
+	const body = await res.clone().json().catch(() => null);
+	if (owner && !retried && res.status === 403 && (body?.error === "page_nonce_invalid" || body?.error === "agent_tool_client_required")) return collaborationFetch(request, true);
+	return { status: res.status, body, res };
+}
+
+async function loadCollaborationListing(conv, requestId = null) {
+	if (!conv) return;
+	const stamp = ++collab.listing;
+	const { status, body } = await collaborationFetch(listingRequest(conv));
+	if (collab.conv !== conv || collab.listing !== stamp) return;
+	const outcome = listingOutcome(status, body);
+	if (outcome.ok) {
+		const merged = mergeRequestListing(collab.cards, body);
+		collab.cards = merged.cards;
+		for (const id of merged.changed) {
+			const el = collaborationCardEl(id);
+			const card = collab.cards.get(id);
+			if (el && card) fillCollaborationCard(el, card);
+		}
+	} else console.warn("collaboration listing:", status, body);
+	if (requestId) setCollaborationLine(requestId, outcome.line, !outcome.ok);
+}
+
+async function cancelCollaboration(requestId, button) {
+	const request = cancelRequest(collab.cards.get(requestId));
+	if (!request) return;
+	button.disabled = true;
+	const conv = collab.conv;
+	const { status, body } = await collaborationFetch(request);
+	if (collab.conv !== conv) return;
+	const outcome = cancelOutcome(status, body);
+	const prior = collab.cards.get(requestId);
+	if (outcome.ok && outcome.state && prior) collab.cards = new Map(collab.cards).set(requestId, { ...prior, state: outcome.state, revision: outcome.revision ?? prior.revision });
+	setCollaborationLine(requestId, outcome.line, !outcome.ok);
+}
+
+function saveBlob(blob, name) {
+	const url = URL.createObjectURL(blob);
+	const link = document.createElement("a");
+	link.href = url;
+	link.download = name;
+	document.body.append(link);
+	link.click();
+	link.remove();
+	URL.revokeObjectURL(url);
+}
+
+async function sha256Hex(bytes) {
+	if (!globalThis.crypto?.subtle) return null;
+	const hash = await crypto.subtle.digest("SHA-256", bytes);
+	return [...new Uint8Array(hash)].map((byte) => byte.toString(16).padStart(2, "0")).join("");
+}
+
+async function downloadCollaborationFile(requestId, item, button) {
+	const artifactId = item?.dataset.artifactId;
+	if (!artifactId) return;
+	const name = item.dataset.name || artifactId;
+	button.disabled = true;
+	const conv = collab.conv;
+	const { status, body, res } = await collaborationFetch({ method: "POST", path: artifactPath(artifactId) });
+	let digests = { expected: item.dataset.sha256 ?? null, header: null, computed: null };
+	let blob = null;
+	if (status === 200 && res) {
+		blob = await res.blob();
+		digests = { ...digests, header: res.headers.get("x-zgw-artifact-sha256"), computed: await sha256Hex(new Uint8Array(await blob.arrayBuffer())) };
+	}
+	const outcome = downloadOutcome(name, status, body, digests);
+	if (outcome.ok && blob) saveBlob(blob, name);
+	if (collab.conv === conv) setCollaborationLine(requestId, outcome.line, !outcome.ok);
+}
+
+els.messages.addEventListener("click", (ev) => {
+	const button = ev.target instanceof Element ? ev.target.closest("[data-action^='collaboration-']") : null;
+	if (!(button instanceof HTMLButtonElement) || button.disabled) return;
+	const requestId = button.closest(".collaboration-card")?.dataset.requestId;
+	if (!requestId) return;
+	switch (button.dataset.action) {
+		case "collaboration-cancel": void cancelCollaboration(requestId, button); break;
+		case "collaboration-recheck": void loadCollaborationListing(collab.conv, requestId); break;
+		case "collaboration-download": void downloadCollaborationFile(requestId, button.closest("[data-artifact-id]"), button); break;
+	}
+});
+
 function renderEvent(e, fromHistory = false) {
 	renderSeq = typeof e.seq === "number" ? e.seq : null;
 	switch (e.type) {
@@ -1041,8 +1348,13 @@ function renderEvent(e, fromHistory = false) {
 			const quoted = sentReferences(e.data);
 			if (quoted.length) body.appendChild(sentReferenceBlock(quoted, roleLabels()));
 			if (Array.isArray(e.data.images) && e.data.images.length) body.appendChild(imageStrip(e.data.images));
-			textBlock(body, e.data.text ?? "");
-			const source = referenceSource(e);
+			if (Array.isArray(e.data.attachments)) body.appendChild(sentDocumentBlock(e.data.attachments));
+			textBlock(body, visibleOwnerText(e.data));
+			const documents = (Array.isArray(e.data.attachments) ? e.data.attachments : []).filter(validDocument);
+			if (documents.length) documentSources.set(`${e.conv}:${e.seq}`, documents);
+			const source = referenceSource(e) ?? (documents.length ? {
+				seq: e.seq, role: "user", text: documents.map(d => d.name).join(", "), images: [],
+			} : null);
 			if (source) markReferenceable(body.parentElement, source);
 			setLastSent(nextLastSent(lastSent.rec, e));
 			rememberSent(e);
@@ -1051,7 +1363,7 @@ function renderEvent(e, fromHistory = false) {
 		}
 		case "message.precomment": {
 			// Main's one-line notice before longer work: its own lighter, smaller message, never merged into the answer.
-			const body = messageRow({ who: agentName, bot: true, ts: e.ts, tag: "chat.tag.notice" });
+			const body = botRow({ ts: e.ts, tag: "chat.tag.notice" });
 			body.parentElement.classList.add("precomment");
 			textBlock(body, e.data.text ?? "");
 			break;
@@ -1084,7 +1396,7 @@ function renderEvent(e, fromHistory = false) {
 				const row = body.parentElement;
 				if (row.parentNode) placeRow(row.parentNode, row, renderSeq ?? hist.newest);
 			} else {
-				body = messageRow({ who: agentName, bot: true, ts: e.ts });
+				body = botRow({ ts: e.ts });
 				textBlock(body, e.data.text);
 			}
 			const source = referenceSource(e);
@@ -1130,10 +1442,19 @@ function renderEvent(e, fromHistory = false) {
 		case "conversation.thread":
 			els.thread.textContent = `thread ${e.data.threadId}`;
 			break;
+		case "message.collaboration":
+		case "agent.collaboration.status":
+		case "agent.collaboration.blocked":
+		case "agent.collaboration.waiting_owner":
+		case "agent.collaboration.delivery_unknown":
+			renderCollaborationEvent(e, fromHistory);
+			break;
 		case "error":
 			systemLine(e.data?.kind === "agent-definition" ? t("agent.definitionError") : t("chat.error", { message: e.data.message }), true);
 			break;
 		case "notice":
+			// The C-4 collaboration fallback repeats a message this page already draws as its card.
+			if (isCollaborationFallback(e)) break;
 			systemLine(t("chat.notice", { message: e.data.message }), e.data.level === "error");
 			break;
 	}
@@ -1207,6 +1528,7 @@ function rememberSent(e) {
 
 function clearMessages(conv) {
 	els.messages.innerHTML = "";
+	resetCollaboration(conv);
 	turnStats.reset(conv);
 	setLastSent(null);
 	recall.sent.length = 0;
@@ -1223,19 +1545,25 @@ function clearMessages(conv) {
 function selectConversation(requested, resume = false) {
 	// Improvement 262: a hidden conversation (old "+" conversation, a decision or link that names one) opens main.
 	const id = shownConversation(state.conversations, requested);
+	const changing = id !== state.current;
 	const canResume = resume && id === state.current && hist.conv === id && hist.newest > 0;
 	if (id !== state.current) {
+		saveDocumentDraftView();
 		clearPendingReportSpeech(state.current);
 		clearReferences(refs.state);
 		renderReferences();
 		resetSlashCommands();
 	}
 	state.current = id;
+	if (changing) restoreDocumentDraftView();
+	documents.close();
+	documents.render();
 	const conv = state.conversations.find((c) => c.id === id);
 	els.title.textContent = conv ? conv.title : id;
 	els.thread.textContent = conv?.threadId ? `thread ${conv.threadId}` : "";
 	renderAgentHeader();
 	renderConversations();
+	renderAgentProfile();
 	renderInterrupt();
 	renderActivity();
 	renderSessionTransition();
@@ -1300,6 +1628,7 @@ function applyHistoryPage(page) {
 		applyHistory(page.events);
 		fillViewport();
 	}
+	if (page.mode !== "before" && collab.cards.size > 0) void loadCollaborationListing(state.current);
 	if (page.mode !== "before" && !lastSent.rec && hist.hasMore && hist.oldest !== null) seekLastSent(state.current, hist.oldest);
 	const referencedIds = new Set();
 	for (const card of els.messages.querySelectorAll(".approval")) {
@@ -1358,10 +1687,15 @@ function recountPending(approvals) {
 }
 
 function onServerEvent(e, generation, statusGeneration) {
+	if (e.type === "message.user") finishDocumentSubmission(e, true);
 	if (e.type !== "security-check.held") devLog("in", e);
+	// "지금 적용" requests waiting for their rotation see every event first (agent-ux todo 21).
+	for (const wait of applyWaits) wait(e);
+	if (reconcileAgents(e, agentState.list)) void loadAgents();
 	if (e.seq && e.conv === state.current && hist.conv === e.conv && hist.seen.has(e.seq)) return;
 	switch (e.type) {
 		case "state.snapshot":
+			documents.snapshot(e.data);
 			state.conversations = e.data.conversations;
 			recountPending(e.data.approvals);
 			state.sessionTransitions = new Set(e.data.sessionTransitions ?? []);
@@ -1373,10 +1707,14 @@ function onServerEvent(e, generation, statusGeneration) {
 			void loadAgents();
 			selectConversation(state.current, true);
 			return;
+		case "attachment.updated":
+			documents.event(e);
+			return;
 		case "decision.updated":
 			onDecisionUpdated(e.data);
 			return;
 		case "error":
+			if (e.data?.submissionId) finishDocumentSubmission(e, false);
 			if (typeof e.data?.actionId === "string") onActionError(e.data);
 			break;
 		case "history":
@@ -1420,10 +1758,11 @@ function onServerEvent(e, generation, statusGeneration) {
 			receiveAgentUpdate(e.data);
 			return;
 		case "agent.applied":
-			agentState.list = applyAgentApplied(agentState.list, e.conv, e.data);
-			renderAgentHeader();
-			renderAgentGroup();
+			receiveAgentApplied(e.conv, e.data);
 			break;
+		case "agent.tool_permissions.updated":
+			receiveToolPermissionsEvent(e.data);
+			return;
 		case "action.request":
 			state.pendingByConv.set(e.conv, (state.pendingByConv.get(e.conv) ?? 0) + 1);
 			renderConversations();
@@ -1520,6 +1859,8 @@ function onServerEvent(e, generation, statusGeneration) {
 			state.running.delete(e.conv);
 			renderInterrupt();
 			renderAgentGroup();
+			// An open editor of this conversation's agent reads its files again: the outputs the answer wrote (agent-ux todo 17).
+			if (turnEndRefreshes(agentView.editor, e.conv)) void refreshKnowledgeAfterTurn(agentView.editor.id);
 			// A report-only turn names its published message (report_event_seq); user turns keep the last answer.
 			const speech = e.conv === state.current ? speechTextForTurn(e.data, tts.lastText.get(e.conv), (seq) => tts.finals.get(`${e.conv}/${seq}`)) : null;
 			if (tts.enabled && speech) speakSummary(speech);
@@ -1817,7 +2158,7 @@ function connect() {
 		void allowedValues.connect();
 		void securityBaseline.connect();
 		renderInboxOnline();
-		send({ type: "hello", data: { client: "web-dev", version: "0.1.0" } });
+		send({ type: "hello", data: { client: "web-dev", version: "0.1.0", capabilities: { hostFileAttachments: 1 } } });
 		sendWebPresence();
 		resendPendingReportSpeech();
 		void readUiLanguage();
@@ -1839,6 +2180,7 @@ function connect() {
 		endGeneration(activity, generation);
 		if (endStatusGeneration(workStatus, statusGeneration)) renderWorkStatusAll();
 		connState = "waiting";
+		documents.disconnect();
 		renderConn();
 		$("head-avatar").classList.remove("live");
 		renderActivity();
@@ -1889,6 +2231,7 @@ els.messages.addEventListener("click", (ev) => {
 
 function sendText() {
 	if (state.sessionTransitions.has(state.current)) return;
+	if (attach.interceptSend?.()) return;
 	cancelAutoSend();
 	const text = els.input.value.trim();
 	const plan = planSend(text, refs.state, parseOptionCommand, attach.items.length);
@@ -1911,6 +2254,7 @@ function sendText() {
 	}
 	// Not taken by the socket (offline): the draft and the tags stay for a retry.
 	if (!send({ type: "input.text", conv: state.current, data: plan.data })) return;
+	attach.onSent?.(state.current);
 	clearReferences(refs.state);
 	renderReferences();
 	els.input.value = "";
@@ -1923,6 +2267,136 @@ const MAX_ATTACH = 4;
 const MAX_SIDE = 2048;
 const MAX_UPLOAD_BYTES = 10 * 1024 * 1024;
 const attach = { items: [], busy: false, tray: $("attach-tray"), input: $("attach-input"), button: $("attach") };
+const documentSources = new Map();
+const documentDraftViews = new Map();
+const documents = mountHostFiles({
+	input: els.input, menu: $("host-file-menu"), tray: $("document-tray"), note: $("document-note"), button: $("host-files"),
+}, {
+	conv: () => state.current,
+	conversations: () => state.conversations.map(c => c.id),
+	request: hostFileRequest,
+	locked: () => attach.busy || state.sessionTransitions.has(state.current),
+	closeSlash: () => closeSlashMenu(),
+	changed: () => {
+		const draft = documents.current();
+		attach.documentLocked = !!draft.submission;
+		attach.documentCount = draft.items.length;
+		els.input.readOnly = !!draft.submission;
+		$("send").disabled = state.sessionTransitions.has(state.current)
+			|| (!!draft.items.length && !documents.ready()) || !!draft.submission;
+		$("attach").disabled = !!draft.submission || state.sessionTransitions.has(state.current);
+	},
+	selected: (draft, span) => {
+		if (draft.conv === state.current && documents.current() === draft) {
+			els.input.value = replaceAttachmentQuery(els.input.value, span);
+			els.input.dispatchEvent(new Event("input"));
+		} else {
+			const view = documentDraftViews.get(draft.conv);
+			if (view?.draftId === draft.id) view.text = replaceAttachmentQuery(view.text, span);
+		}
+	},
+	retry: draft => void transmitDocumentSubmission(draft),
+});
+attach.interceptSend = () => {
+	if (documents.composing) return true;
+	if (!documents.current().items.length && !documents.current().submission && !referencedDocuments().length) return false;
+	void sendDocumentComposition();
+	return true;
+};
+attach.onSent = conv => { documentDraftViews.delete(conv); documents.drafts.reset(conv); };
+function saveDocumentDraftView() {
+	documentDraftViews.set(state.current, {
+		draftId: documents.current().id, text: els.input.value,
+		references: { ...refs.state, items: [...refs.state.items] }, images: attach.items,
+	});
+}
+function restoreDocumentDraftView() {
+	const view = documentDraftViews.get(state.current);
+	els.input.value = view?.text ?? "";
+	refs.state = view?.references ?? createReferences();
+	attach.items = view?.images ?? [];
+	renderReferences();
+	renderTray();
+}
+function referencedDocuments() {
+	return refs.state.items.flatMap(r => documentSources.get(`${state.current}:${r.seq}`) ?? []);
+}
+async function sendDocumentComposition() {
+	const draft = documents.current();
+	if (draft.submission || attach.busy) return;
+	if (!documents.ready()) { documents.refuseSend("pending"); return; }
+	const ids = draft.items.map(i => i.id);
+	if (new Set([...ids, ...referencedDocuments().map(d => d.id)]).size > 4) {
+		documents.refuseSend("limit"); return;
+	}
+	// Preserve the existing image+reference preflight and upload semantics.
+	const plan = planSend(els.input.value, refs.state, () => null, attach.items.length);
+	if (plan.kind === "blocked") { refs.state.notice = plan.notice; renderReferences(); return; }
+	draft.submission = {
+		id: crypto.randomUUID(), state: "uploading", text: els.input.value,
+		references: referenceSeqs(refs.state), attachments: ids, images: [...attach.items], uploaded: [],
+	};
+	const referenceState = refs.state;
+	referenceState.locked = true;
+	documents.close();
+	documents.render();
+	try {
+		for (const item of draft.submission.images) draft.submission.uploaded.push(await uploadImage(item.file));
+		await transmitDocumentSubmission(draft);
+	} catch (e) {
+		if (!(e instanceof Error)) throw e;
+		draft.notice = e.message;
+		draft.submission = null;
+	} finally {
+		if (!draft.submission) referenceState.locked = false;
+		documents.render();
+		renderTray();
+		renderReferences();
+		els.input.readOnly = !!documents.current().submission;
+	}
+}
+async function transmitDocumentSubmission(draft) {
+	const s = draft.submission;
+	if (!s || (s.state !== "uploading" && s.state !== "uncertain")) return;
+	if (!documents.ready(draft)) return;
+	s.state = "awaiting";
+	const data = inputData(s.text, { images: s.uploaded, references: s.references });
+	if (s.attachments.length) data.attachments = [...s.attachments];
+	data.submissionId = s.id;
+	if (!send({ type: "input.text", conv: draft.conv, data })) s.state = "uncertain";
+	draft.notice = t(s.state === "uncertain" ? "documents.uncertain" : "documents.sending");
+	documents.render();
+}
+function finishDocumentSubmission(event, accepted) {
+	const draft = documents.drafts.get(event.conv);
+	const s = draft.submission;
+	if (!s || event.data?.submissionId !== s.id) return;
+	if (accepted && s.attachments.length) {
+		const received = (Array.isArray(event.data.attachments) ? event.data.attachments : []).filter(validDocument).map(d => d.id);
+		if (JSON.stringify(received) !== JSON.stringify(s.attachments)) return;
+	}
+	if (!accepted) {
+		draft.notice = event.data.message ?? event.data.error ?? "send_failed";
+		draft.submission = null;
+		const view = documentDraftViews.get(draft.conv);
+		if (view) view.references.locked = false;
+	} else {
+		for (const image of s.images) URL.revokeObjectURL(image.url);
+		documentDraftViews.delete(draft.conv);
+		documents.drafts.reset(draft.conv);
+		if (state.current === draft.conv) {
+			attach.items = [];
+			clearReferences(refs.state);
+			els.input.value = "";
+			els.input.style.height = "";
+		}
+	}
+	if (state.current === draft.conv) {
+		refs.state.locked = false;
+		els.input.readOnly = false;
+		renderTray(); renderReferences(); documents.render();
+	}
+}
 
 function imageStrip(names) {
 	const strip = document.createElement("div");
@@ -1974,7 +2448,7 @@ function renderTray() {
 }
 
 function addAttachments(files) {
-	if (attach.busy) {
+	if (attach.busy || attach.documentLocked) {
 		systemLine(t("attach.busy"));
 		return;
 	}
@@ -2025,6 +2499,8 @@ async function sendWithImages(text) {
 	// The conversation and the tags as they are now go out with the images; the tags are locked until the upload ends.
 	const conv = state.current;
 	const draft = els.input.value;
+	const items = [...attach.items];
+	const referenceState = refs.state;
 	const references = referenceSeqs(refs.state);
 	attach.busy = true;
 	refs.state.locked = true;
@@ -2032,12 +2508,13 @@ async function sendWithImages(text) {
 	renderReferences();
 	try {
 		const names = [];
-		for (const item of attach.items) names.push(await uploadImage(item.file));
+		for (const item of items) names.push(await uploadImage(item.file));
 		if (state.sessionTransitions.has(conv)) return;
 		if (!send({ type: "input.text", conv, data: inputData(text, { images: names, references }) })) return;
-		for (const item of attach.items) URL.revokeObjectURL(item.url);
-		attach.items = [];
-		clearReferences(refs.state);
+		for (const item of items) URL.revokeObjectURL(item.url);
+		if (state.current === conv) attach.items = [];
+		clearReferences(referenceState);
+		attach.onSent?.(conv);
 		if (state.current === conv && els.input.value === draft) {
 			els.input.value = "";
 			els.input.style.height = "";
@@ -2047,7 +2524,7 @@ async function sendWithImages(text) {
 		systemLine(t("attach.uploadFailed", { error: error.message }), true);
 	} finally {
 		attach.busy = false;
-		refs.state.locked = false;
+		referenceState.locked = false;
 		renderTray();
 		renderReferences();
 	}
@@ -2163,6 +2640,7 @@ async function applyOptionCommand(command) {
 
 els.composer.addEventListener("submit", (ev) => {
 	ev.preventDefault();
+	if ($("host-file-menu").contains(document.activeElement)) return;
 	sendText();
 });
 const slash = { el: $("slash-menu"), omo: null, loading: null, failed: false, items: [], index: 0 };
@@ -2248,7 +2726,7 @@ function pickSlashCommand(i) {
 }
 
 function slashMenuKey(ev) {
-	if (slash.el.hidden || ev.isComposing) return false;
+	if (slash.el.hidden || ev.isComposing || ev.keyCode === 229 || documents.composing) return false;
 	if (ev.key === "Escape") {
 		closeSlashMenu();
 		return true;
@@ -2268,6 +2746,8 @@ function slashMenuKey(ev) {
 }
 
 els.input.addEventListener("keydown", (ev) => {
+	if (ev.isComposing || ev.keyCode === 229 || documents.composing) return;
+	if (documents.key(ev)) { ev.preventDefault(); return; }
 	if (slashMenuKey(ev)) {
 		ev.preventDefault();
 		return;
@@ -2298,15 +2778,26 @@ els.input.addEventListener("input", (ev) => {
 	els.input.style.height = "auto";
 	els.input.style.height = `${Math.min(els.input.scrollHeight, 200)}px`;
 	slash.index = 0;
-	renderSlashMenu();
+	if (!documents.composing && !ev.isComposing) {
+		documents.input();
+		if (!documents.visible) renderSlashMenu();
+	}
 });
+els.input.addEventListener("compositionstart", () => { closeSlashMenu(); documents.composition(true); });
+els.input.addEventListener("compositionend", () => { documents.composition(false); if (!documents.visible) renderSlashMenu(); });
+els.input.addEventListener("click", () => documents.input());
+els.input.addEventListener("blur", (ev) => { if (!$("host-file-menu").contains(ev.relatedTarget)) documents.close(); });
 els.input.addEventListener("blur", closeSlashMenu);
 slash.el.addEventListener("pointerdown", (ev) => ev.preventDefault());
 $("interrupt").onclick = () => send({ type: "input.interrupt", conv: state.current, data: {} });
-$("rotate-session").onclick = () => {
-	if (!confirm(t("head.newSession.confirm"))) return;
-	send({ type: "conversation.rotate", conv: state.current });
-};
+// Bug 283: while the open agent's definition changed, the question says that the new session applies it, and the
+// request opens that session at once (agent-ux todo 21); main and an unchanged agent keep the plain rotation.
+function rotateCurrentSession() {
+	const view = headerView(currentConversation(), agentState.list);
+	if (!confirm(t(staleNotice(view).confirmKey))) return;
+	send(rotateRequest(state.current, view));
+}
+$("rotate-session").onclick = rotateCurrentSession;
 function toggleDevPanel() {
 	const open = els.app.classList.toggle("dev-hidden") === false;
 	$("toggle-dev").setAttribute("aria-expanded", String(open));
@@ -2896,7 +3387,7 @@ renderFormal();
 
 /** A held text comes back into an empty composer of its conversation, so the user can fix it and send again. */
 function restoreDraft(conv, text) {
-	if (typeof text !== "string" || state.current !== conv || els.input.value !== "" || attach.items.length || refs.state.items.length) return;
+	if (typeof text !== "string" || state.current !== conv || els.input.value !== "" || attach.items.length || refs.state.items.length || attach.documentCount) return;
 	els.input.value = text;
 	els.input.focus();
 }
@@ -3205,6 +3696,9 @@ const inbox = {
 	/** Items whose delete confirmation is open, and those whose delete request is in flight. */
 	dismissing: new Set(),
 	dismissBusy: new Set(),
+	/** Held file reads this screen allowed or denied (the latest copy, kept listed with the outcome until deleted), and the ids with a review call in flight. */
+	reviewed: new Map(),
+	reviewBusy: new Set(),
 	el: $("inbox"),
 	list: $("inbox-list"),
 	toggle: $("toggle-inbox"),
@@ -3247,12 +3741,57 @@ function describeAnswer(a) {
 
 async function fetchDecisions(cursor) {
 	const query = `limit=${INBOX_PAGE}${cursor ? `&cursor=${encodeURIComponent(cursor)}` : ""}`;
-	const res = await fetch(`/api/decisions?${query}`, { cache: "no-store", signal: AbortSignal.timeout(30_000) });
+	const res = await fetch(`/api/decisions?${query}`, { cache: "no-store", headers: featureHeaders(), signal: AbortSignal.timeout(30_000) });
 	const body = await res.json().catch(() => null);
 	if (!res.ok) throw new Error(body?.error ?? String(res.status));
 	return body;
 }
 
+// The confirmation session of this screen for agent tool permissions (294 C3): one page nonce from POST
+// /api/agent-tool-client beside the HttpOnly cookie the gateway sets. A gateway restart or an expired nonce drops the
+// token so the next call takes a new one; the refused POST itself is never replayed.
+let agentToolClient = null;
+let agentToolClientPromise = null;
+let agentToolClientRefused = false;
+
+async function ensureAgentToolClient() {
+	if (agentToolClient) return agentToolClient;
+	agentToolClientPromise ??= (async () => {
+		try {
+			const res = await fetch(AGENT_TOOL_CLIENT_PATH, { method: "POST", headers: { [AGENT_TOOL_CLIENT_HEADER]: "1" }, cache: "no-store", signal: AbortSignal.timeout(30_000) });
+			const result = interpretClientIssue(res.status, await res.json().catch(() => null));
+			agentToolClient = result.kind === "ready" ? result.client : null;
+			agentToolClientRefused = result.kind === "refused";
+		} catch {
+			agentToolClient = null;
+			agentToolClientRefused = false;
+		} finally {
+			agentToolClientPromise = null;
+		}
+		return agentToolClient;
+	})();
+	return agentToolClientPromise;
+}
+
+/** An owner call (list, revoke, edit, tab picker) with this screen's session; `client: false` means no session could be had. */
+async function agentToolFetch(path, init = {}) {
+	const client = await ensureAgentToolClient();
+	if (!client) return { status: 0, body: null, client: false };
+	let res;
+	try {
+		res = await fetch(path, { ...init, cache: "no-store", headers: { ...(init.headers ?? {}), ...ownerHeaders(client) }, signal: AbortSignal.timeout(30_000) });
+	} catch {
+		return { status: 0, body: null, client: true };
+	}
+	const body = await res.json().catch(() => null);
+	if (res.status === 403 && clientExpired(body?.error)) agentToolClient = null;
+	return { status: res.status, body, client: true };
+}
+
+function agentToolClientLine(prefix) {
+	return t(`${prefix}.${agentToolClientRefused ? "clientUnavailable" : "clientOffline"}`);
+}
+
 /** `refresh`: load the current copy even though one is cached (a mounted card the reset page no longer lists). */
 /** The mounted cards a detail load reports to: every card of the decision id, so a second card never waits on the first. */
 function detailCards(id, card) {
@@ -3265,7 +3804,7 @@ async function loadDecisionDetail(id, card, { refresh = false } = {}) {
 	if ((!refresh && decisionById(inbox.state, id)) || !inbox.online || !beginDetailLoad(inbox.state, id, generation)) return;
 	const retry = () => void loadDecisionDetail(id, card, { refresh });
 	try {
-		const res = await fetch(`/api/decisions/${encodeURIComponent(id)}`, { cache: "no-store", signal: AbortSignal.timeout(30_000) });
+		const res = await fetch(`/api/decisions/${encodeURIComponent(id)}`, { cache: "no-store", headers: featureHeaders(), signal: AbortSignal.timeout(30_000) });
 		const body = await res.json().catch(() => null);
 		if (!res.ok) {
 			if (!failDetailLoad(inbox.state, id, generation)) return;
@@ -3390,7 +3929,9 @@ function renderInboxOnline() {
 
 /** Keyed nodes: only the changed item is rebuilt, so typing in another item survives updates. */
 function renderInboxList() {
-	const ordered = sortedDecisions(inbox.state);
+	// A held file read this screen reviewed stays listed with its outcome after the gateway resolved it, until 삭제 hides it.
+	const kept = new Map([...inbox.reviewed].filter(([id]) => !inbox.state.items.has(id)));
+	const ordered = kept.size === 0 ? sortedDecisions(inbox.state) : sortedDecisions({ items: new Map([...kept, ...inbox.state.items]) });
 	const keep = new Set(ordered.map((d) => d.id));
 	for (const [id, node] of inbox.nodes) {
 		if (keep.has(id)) continue;
@@ -3589,7 +4130,8 @@ function renderDecisionActions(decision, p, { locked, busy, review, surface }) {
 	};
 	if (review) actions.append(button(t("decision.reviewLatest"), "ok", () => reviewLatest(decision), !busy));
 	else {
-		if (p.mode) {
+		// A tool grant answers through its own two buttons (allow this scope / do not allow), never a generic send.
+		if (p.mode && !isToolGrant(decision)) {
 			// The retry label appears once an earlier attempt is uncertain, never while that attempt is still in flight.
 			const label = !busy && inbox.state.drafts.has(decision.id) ? t("decision.resend") : t(`decision.primary.${p.kind}`);
 			actions.append(button(label, "ok", () => void submitDecisionForm(decision, p.mode)));
@@ -3640,32 +4182,261 @@ function renderSourceContext(payload) {
 	return box;
 }
 
+function agentDisplayName(id) {
+	return agentState.list.find((agent) => agent.id === id)?.name ?? id;
+}
+
+/** decision id -> { status, candidates, note }: the open tabs the gateway listed for a card's target picker (C7, this screen only). */
+const toolTargets = new Map();
+
+/**
+ * The tool grant card (294 C8): the design rows (agent, request source, tool, target, operation, duration), the two
+ * notes, the tab picker while a borrowed tab is still unchosen, and the two direct answers. Allow stays off until the
+ * tab is chosen; deny never needs one.
+ */
+function renderToolGrantFields(decision, p, locked) {
+	const view = toolGrantView(decision, { agentName: agentDisplayName });
+	const dl = make("dl", "inbox-tool");
+	for (const row of view.rows) dl.append(make("dt", null, row.label), make("dd", null, row.value));
+	const nodes = [dl, make("p", "inbox-tool-note", view.note), make("p", "inbox-tool-restriction", view.restriction)];
+	const outcome = toolGrantOutcomeText(decision);
+	if (outcome) nodes.push(make("div", "inbox-note", outcome));
+	if (!p.form) return nodes;
+	if (view.targetNeeded) nodes.push(renderToolTargetPicker(decision, locked));
+	const choices = make("div", "approval-options inbox-tool-choices");
+	for (const choice of view.choices) {
+		const button = make("button", `btn ${choice.cls}`, choice.label);
+		button.type = "button";
+		button.dataset.choice = choice.choice;
+		button.disabled = locked || (choice.choice === "allow" && view.targetNeeded);
+		button.onclick = () => {
+			const composed = composeToolGrantResponse(decision, { choice: choice.choice });
+			if (!composed.ok) {
+				noteFor(decision.id, t(composed.reason === "target_required" ? "toolGrant.pickTabFirst" : "decision.incomplete"), true);
+				syncDecisionSurfaces(decisionById(inbox.state, decision.id) ?? decision);
+				return;
+			}
+			void submitDecision(decision.id, "answer", composed.response);
+		};
+		choices.append(button);
+	}
+	nodes.push(choices);
+	return nodes;
+}
+
+function renderToolTargetPicker(decision, locked) {
+	const targets = toolTargets.get(decision.id) ?? { status: "idle", candidates: [], note: null };
+	const box = make("div", "inbox-tool-targets");
+	box.setAttribute("role", "group");
+	box.setAttribute("aria-label", t("toolGrant.targets"));
+	const head = make("div", "inbox-tool-targets-head");
+	const load = make("button", "text-btn", t(targets.status === "ready" ? "toolGrant.reloadTabs" : "toolGrant.loadTabs"));
+	load.type = "button";
+	load.disabled = locked || targets.status === "loading" || targets.status === "designating";
+	load.onclick = () => void loadToolTargets(decision);
+	head.append(make("span", "inbox-tool-targets-label", t("toolGrant.pickTab")), load);
+	const status = make("div", `inbox-note${targets.note?.error ? " error" : ""}`, targets.status === "loading" ? t("common.checking") : targets.note?.text ?? "");
+	status.setAttribute("role", "status");
+	box.append(head, status);
+	if (targets.status !== "ready" && targets.status !== "designating") return box;
+	if (targets.candidates.length === 0) box.append(make("p", "inbox-tool-targets-empty", t("toolGrant.tabsEmpty")));
+	const list = make("div", "approval-options inbox-tool-target-list");
+	for (const candidate of targets.candidates) {
+		const button = make("button", "btn neutral inbox-tool-target", candidate.title);
+		button.type = "button";
+		button.dataset.candidate = candidate.id;
+		button.disabled = locked || targets.status === "designating";
+		if (candidate.suggested) button.append(make("small", "inbox-tool-target-suggested", t("toolGrant.suggested")));
+		button.append(make("small", "inbox-tool-target-url", candidate.url));
+		button.onclick = () => void designateToolTarget(decision, candidate);
+		list.append(button);
+	}
+	box.append(list);
+	return box;
+}
+
+async function loadToolTargets(decision) {
+	const current = toolTargets.get(decision.id);
+	if (current?.status === "loading" || current?.status === "designating") return;
+	toolTargets.set(decision.id, { status: "loading", candidates: current?.candidates ?? [], note: null });
+	syncDecisionSurfaces(decision);
+	const { status, body, client } = await agentToolFetch(candidatesPath(decision), { method: "GET" });
+	let next;
+	if (!client) next = { status: "failed", candidates: [], note: { text: agentToolClientLine("toolGrant"), error: true } };
+	else if (status === 200) next = { status: "ready", candidates: targetCandidates(body), note: null };
+	else if (status === 404) next = { status: "unsupported", candidates: [], note: { text: t("toolGrant.tabsUnsupported"), error: true } };
+	else if (status === 0) next = { status: "failed", candidates: [], note: { text: t("toolGrant.tabsFailed"), error: true } };
+	else next = { status: "failed", candidates: [], note: { text: toolErrorText(body?.error, status), error: true } };
+	toolTargets.set(decision.id, next);
+	syncDecisionSurfaces(decisionById(inbox.state, decision.id) ?? decision);
+}
+
+/** Binds the chosen tab; the gateway answers with the re-proposed card, whose digest the allow button then confirms (C7). */
+async function designateToolTarget(decision, candidate) {
+	const current = toolTargets.get(decision.id);
+	if (!current || current.status !== "ready") return;
+	toolTargets.set(decision.id, { ...current, status: "designating", note: null });
+	syncDecisionSurfaces(decision);
+	const request = designateRequest(decision, candidate.id);
+	const { status, body, client } = await agentToolFetch(request.path, { method: request.method, headers: { "content-type": "application/json" }, body: JSON.stringify(request.body) });
+	const result = client ? interpretDesignate(status, body) : { kind: "client", error: null };
+	switch (result.kind) {
+		case "accepted":
+			toolTargets.delete(decision.id);
+			applyDecision(inbox.state, result.decision);
+			noteFor(decision.id, t("toolGrant.tabChosen"));
+			break;
+		case "conflict":
+			if (result.decision) applyDecision(inbox.state, result.decision);
+			toolTargets.set(decision.id, { ...current, status: "ready", note: { text: t("toolGrant.tabConflict"), error: true } });
+			break;
+		case "unsupported":
+			toolTargets.set(decision.id, { status: "unsupported", candidates: [], note: { text: t("toolGrant.tabsUnsupported"), error: true } });
+			break;
+		case "client":
+			toolTargets.set(decision.id, { ...current, status: "ready", note: { text: agentToolClientLine("toolGrant"), error: true } });
+			break;
+		default:
+			toolTargets.set(decision.id, { ...current, status: "ready", note: { text: toolErrorText(result.error, status), error: true } });
+	}
+	syncDecisionSurfaces(decisionById(inbox.state, decision.id) ?? decision);
+	renderInboxList();
+}
+
+/**
+ * The owner card of a held collaboration file read (purpose collaboration_artifact_review): who reads, which file, which
+ * part, what the security check found (kinds and counts only) or could not check, and the two direct answers through
+ * the owner hold route. The outcome line stays on the card after the gateway resolves the hold.
+ */
+function renderArtifactReviewItem(decision) {
+	const view = artifactReviewView(decision, { agentName: agentDisplayName, mainName: agentName });
+	const busy = inbox.reviewBusy.has(decision.id);
+	const li = make("li", "inbox-item kind-artifact-review inbox-item-tool");
+	li.dataset.id = decision.id;
+	li.dataset.revision = String(decision.revision);
+	li.dataset.holdId = view.holdId;
+	li.dataset.reviewState = view.state;
+	li.setAttribute("aria-busy", String(busy));
+	const head = make("div", "inbox-item-head");
+	head.append(
+		make("span", "inbox-work", decision.ownerConv === "main" ? t("inbox.mainConversation") : conversationTitle(decision.ownerConv)),
+		make("span", `inbox-chip chip-${decision.status}`, view.chip ?? STATUS_LABELS[decision.status] ?? decision.status),
+	);
+	const question = make("div", "inbox-question", view.title);
+	question.id = `inbox-q-${decision.id}`;
+	li.setAttribute("aria-labelledby", question.id);
+	li.append(head, question);
+	const dl = make("dl", "inbox-tool");
+	for (const row of view.rows) {
+		const dd = make("dd", null, row.value);
+		dd.dataset.row = row.key;
+		dl.append(make("dt", null, row.label), dd);
+	}
+	li.append(dl);
+	if (view.warning) {
+		const warning = make("p", "inbox-tool-note inbox-review-unscanned", view.warning);
+		warning.setAttribute("role", "note");
+		li.append(warning);
+	}
+	if (view.question) li.append(make("p", "inbox-tool-restriction", view.question));
+	if (view.outcome) li.append(make("div", "inbox-note inbox-review-outcome", view.outcome));
+	const meta = make("dl", "inbox-meta");
+	meta.append(make("dt", null, t("inbox.meta.created")), make("dd", null, dateTimeLabel(decision.createdAt)));
+	li.append(meta);
+	// The receipt's line stands in until the gateway's own copy carries the outcome; a refusal stays until the next click.
+	const note = inbox.notes.get(decision.id);
+	const shown = note && (note.error || !view.outcome) ? note : null;
+	const noteEl = make("div", `inbox-note inbox-review-line${shown?.error ? " error" : ""}`, shown?.text ?? "");
+	noteEl.setAttribute("role", "status");
+	li.append(noteEl);
+	if (view.pending) {
+		const choices = make("div", "approval-options inbox-tool-choices");
+		for (const choice of view.choices) {
+			const button = make("button", `btn ${choice.cls}`, choice.label);
+			button.type = "button";
+			button.dataset.choice = choice.choice;
+			button.disabled = busy || !inbox.online;
+			button.onclick = () => void reviewArtifactHold(decision, choice.choice);
+			choices.append(button);
+		}
+		li.append(choices);
+	} else if (!isUnresolved(decision) && inbox.reviewed.has(decision.id)) {
+		const actions = make("div", "inbox-actions");
+		const hide = make("button", "text-btn inbox-review-hide", t("common.delete"));
+		hide.type = "button";
+		hide.onclick = () => {
+			inbox.reviewed.delete(decision.id);
+			inbox.notes.delete(decision.id);
+			renderInboxList();
+		};
+		actions.append(hide);
+		li.append(actions);
+	}
+	const previous = inbox.nodes.get(decision.id);
+	if (previous?.isConnected) previous.replaceWith(li);
+	inbox.nodes.set(decision.id, li);
+	return li;
+}
+
+function conversationTitle(convId) {
+	return state.conversations.find((row) => row.id === convId)?.title ?? convId;
+}
+
+/**
+ * One click = one owner call (POST /api/agent-collaboration/holds/:holdId) with the HttpOnly client cookie and the page
+ * nonce (collaborationFetch renews a stale nonce once), the revision on screen and a fresh submissionId. The answer is
+ * shown as it is: the receipt's outcome, or the refusal; a conflict reloads the latest decision so the next click uses it.
+ */
+async function reviewArtifactHold(decision, choice) {
+	const request = artifactReviewRequest(decision, choice);
+	if (!request || inbox.reviewBusy.has(decision.id) || !inbox.online) return;
+	inbox.reviewBusy.add(decision.id);
+	inbox.reviewed.set(decision.id, decision);
+	noteFor(decision.id, null);
+	renderInboxItem(decision);
+	const { status, body } = await collaborationFetch(request);
+	inbox.reviewBusy.delete(decision.id);
+	const outcome = artifactReviewOutcome(status, body);
+	devLog("in", { type: "artifact-review.answer", data: { id: decision.id, choice, status, result: outcome.kind, error: body?.error ?? null } });
+	if (!outcome.ok) inbox.reviewed.delete(decision.id);
+	noteFor(decision.id, outcome.line, !outcome.ok);
+	if (outcome.kind === "conflict" || outcome.kind === "gone" || outcome.kind === "network") void loadDecisionDetail(decision.id, null, { refresh: true });
+	const current = decisionById(inbox.state, decision.id) ?? inbox.reviewed.get(decision.id) ?? decision;
+	if (outcome.ok) inbox.reviewed.set(decision.id, current);
+	renderInboxItem(current);
+	renderInboxList();
+}
+
 function renderInboxItem(decision) {
 	if (decision.security) return renderSecurityInboxItem(decision);
+	if (isArtifactReview(decision)) return renderArtifactReviewItem(decision);
 	const p = presentation(decision);
 	const payload = decision.payload && typeof decision.payload === "object" ? decision.payload : {};
+	const tool = isToolGrant(decision);
 	const form = formFor(decision);
 	const busy = isSubmitting(inbox.state, decision);
 	const review = isReviewRequired(inbox.state, decision.id);
 	const locked = busy || !inbox.online || review;
-	const li = make("li", `inbox-item kind-${p.kind}`);
+	const li = make("li", `inbox-item kind-${p.kind}${tool ? " inbox-item-tool" : ""}`);
 	li.dataset.id = decision.id;
 	li.dataset.revision = String(decision.revision);
 	li.setAttribute("aria-busy", String(busy));
 	const head = make("div", "inbox-item-head");
 	head.append(
-		make("span", "inbox-work", decision.work ? decision.work.title : decision.ownerConv === "main" ? t("inbox.mainConversation") : decision.ownerConv),
+		// F3 D3: an agent conversation's card is headed by the agent's name, as the review card is, never by its conversation id.
+		make("span", "inbox-work", decision.work ? decision.work.title : decision.ownerConv === "main" ? t("inbox.mainConversation") : conversationTitle(decision.ownerConv)),
 		make("span", `inbox-chip chip-${decision.status}`, STATUS_LABELS[decision.status] ?? decision.status),
 	);
-	const question = make("div", "inbox-question", payload.title || t(decision.permission ? "approval.permissionRequest" : "approval.question"));
+	const question = make("div", "inbox-question", tool ? toolGrantView(decision).title : payload.title || t(decision.permission ? "approval.permissionRequest" : "approval.question"));
 	question.id = `inbox-q-${decision.id}`;
 	li.setAttribute("aria-labelledby", question.id);
 	li.append(head, question);
-	if (payload.detail) li.append(make("div", "approval-detail", payload.detail));
+	if (!tool && payload.detail) li.append(make("div", "approval-detail", payload.detail));
 	const context = renderSourceContext(payload);
 	if (context) li.append(context);
-	if (decision.answer) li.append(make("div", "inbox-note", t("decision.myAnswer", { answer: describeAnswer(decision.answer) })));
-	if (p.form) li.append(...renderAnswerFields(decision, form, locked, () => syncDecisionSurfaces(decisionById(inbox.state, decision.id) ?? decision, li)));
+	if (decision.answer && !tool) li.append(make("div", "inbox-note", t("decision.myAnswer", { answer: describeAnswer(decision.answer) })));
+	if (tool) li.append(...renderToolGrantFields(decision, p, locked));
+	else if (p.form) li.append(...renderAnswerFields(decision, form, locked, () => syncDecisionSurfaces(decisionById(inbox.state, decision.id) ?? decision, li)));
 	else {
 		// No answer is taken now, but the question and its choices still read here, not only on the original card.
 		const saved = renderSavedChoices(decision);
@@ -3680,8 +4451,10 @@ function renderInboxItem(decision) {
 	};
 	row(t("inbox.meta.created"), dateTimeLabel(decision.createdAt));
 	row(t("inbox.meta.deadline"), decision.deadlineAt === null ? (decision.bindingState === "live" ? t("inbox.meta.none") : "") : `${dateTimeLabel(decision.deadlineAt)}${decision.bindingState === "expired" ? t("inbox.meta.expired") : ""}`);
-	row(t("inbox.meta.state"), `${bindingLabel(decision)}${decision.required ? t("inbox.meta.required") : ""}`);
-	row(t("inbox.meta.waitReason"), waitReason(decision));
+	if (!tool) {
+		row(t("inbox.meta.state"), `${bindingLabel(decision)}${decision.required ? t("inbox.meta.required") : ""}`);
+		row(t("inbox.meta.waitReason"), waitReason(decision));
+	}
 	li.append(meta);
 	const note = inbox.notes.get(decision.id);
 	const noteEl = make("div", `inbox-note${note?.error ? " error" : ""}`, note?.text ?? "");
@@ -3821,17 +4594,28 @@ async function submitDecision(id, mode, response) {
 	if (!beginSubmit(inbox.state, id, "http")) return;
 	noteFor(id, null);
 	syncDecisionSurfaces(decision);
+	// A tool card answer (294 C3: grant, action, migration) carries this screen's confirmation session; without one nothing is sent.
+	const tool = ownerAnswerRequired(decision);
+	const client = tool ? await ensureAgentToolClient() : null;
 	let result;
-	try {
-		const res = await fetch(`/api/decisions/${encodeURIComponent(id)}/answer`, {
-			method: "POST",
-			headers: { "content-type": "application/json" },
-			body: JSON.stringify(body),
-			signal: AbortSignal.timeout(30_000),
-		});
-		result = interpretAnswerResponse(res.status, await res.json().catch(() => null));
-	} catch (err) {
-		result = { kind: "offline", error: err instanceof Error ? err.message : String(err) };
+	if (tool && !client) result = { kind: "client", error: null };
+	else {
+		try {
+			const res = await fetch(`/api/decisions/${encodeURIComponent(id)}/answer`, {
+				method: "POST",
+				headers: { "content-type": "application/json", ...(client ? ownerHeaders(client) : {}) },
+				body: JSON.stringify(body),
+				signal: AbortSignal.timeout(30_000),
+			});
+			const answer = await res.json().catch(() => null);
+			result = interpretAnswerResponse(res.status, answer);
+			if (tool && res.status === 403 && clientExpired(answer?.error)) {
+				agentToolClient = null;
+				result = { kind: "expired", error: answer.error };
+			}
+		} catch (err) {
+			result = { kind: "offline", error: err instanceof Error ? err.message : String(err) };
+		}
 	}
 	endSubmit(inbox.state, id);
 	devLog("in", { type: "decision.answer", data: { id, mode: body.mode, submissionId: body.submissionId, result: result.kind, error: result.error ?? null } });
@@ -3840,6 +4624,7 @@ async function submitDecision(id, mode, response) {
 
 function settleSubmit(decision, result) {
 	const id = decision.id;
+	const tool = ownerAnswerRequired(decision);
 	switch (result.kind) {
 		case "accepted":
 			inbox.forms.delete(id);
@@ -3850,7 +4635,7 @@ function settleSubmit(decision, result) {
 		case "conflict":
 			inbox.forms.delete(id);
 			noteConflict(inbox.state, decision, result.decision);
-			noteFor(id, t("decision.conflict"), true);
+			noteFor(id, tool ? toolErrorText(result.error, 409) : t("decision.conflict"), true);
 			break;
 		case "blocked":
 			// Improvement 165: the answer is held; the card decides. The typed answer stays in the form for a fix.
@@ -3861,7 +4646,16 @@ function settleSubmit(decision, result) {
 		case "rejected":
 			inbox.state.drafts.delete(id);
 			if (result.decision) applyDecision(inbox.state, result.decision);
-			noteFor(id, t("decision.rejected", { error: result.error ?? "invalid" }), true);
+			noteFor(id, tool ? toolErrorText(result.error, 400) : t("decision.rejected", { error: result.error ?? "invalid" }), true);
+			break;
+		case "client":
+			// No confirmation session: the gateway refused this origin, or it could not be reached. Nothing was sent.
+			inbox.state.drafts.delete(id);
+			noteFor(id, agentToolClientLine("toolGrant"), true);
+			break;
+		case "expired":
+			inbox.state.drafts.delete(id);
+			noteFor(id, toolErrorText(result.error, 403), true);
 			break;
 		case "gone": {
 			forgetDecision(inbox.state, id);
@@ -3872,7 +4666,7 @@ function settleSubmit(decision, result) {
 			break;
 		}
 		case "unavailable":
-			noteFor(id, t("decision.unavailable", { status: result.status, error: result.error ? ` ${result.error}` : "" }), true);
+			noteFor(id, tool ? toolErrorText(result.error, result.status) : t("decision.unavailable", { status: result.status, error: result.error ? ` ${result.error}` : "" }), true);
 			break;
 		default:
 			noteFor(id, t("decision.offline.kept"), true);
@@ -3891,6 +4685,7 @@ function onDecisionUpdated(data) {
 		securityInbox.merge(decision.security);
 		if (decision.security.status === "pending") void securityInbox.detail(decision.id);
 	}
+	if (inbox.reviewed.has(decision.id) && decision.revision >= (inbox.reviewed.get(decision.id)?.revision ?? 0)) inbox.reviewed.set(decision.id, decision);
 	renderInboxBadge();
 	if (!result.changed) return;
 	if (endSocketSubmit(inbox.state, decision)) setCardBusy(originalActionId(decision), false);
@@ -4290,11 +5085,16 @@ const appDownload = createAppDownload({
 });
 apkEls.renew.onclick = () => void appDownload.renew();
 
-// 정리 (improvement 66): nothing is cleaned until the user ticks rows and presses the button.
-const gcEls = { summary: $("gc-summary"), list: $("gc-list"), message: $("gc-message"), clean: $("gc-clean"), all: $("gc-all"), allLabel: $("gc-all-label") };
+// 정리 (improvement 66, housekeeping todo 13): two roles in one list. Nothing is cleaned until the user ticks 회수 rows and
+// presses the button; 상태 정리 rows wait for main and kept items are information only.
+const gcEls = {
+	summary: $("gc-summary"), list: $("gc-list"), message: $("gc-message"), clean: $("gc-clean"), all: $("gc-all"), allLabel: $("gc-all-label"),
+	audit: $("gc-audit"), auditList: $("gc-audit-list"),
+};
 
+// Only an enabled box belongs to a row that can be ticked: a kept item has a disabled box and a 상태 정리 row has none.
 function gcBoxes() {
-	return [...gcEls.list.querySelectorAll("input[type=checkbox]")];
+	return [...gcEls.list.querySelectorAll("input[type=checkbox]:enabled")];
 }
 
 // Improvement 142: the 전체 선택 box and the clean button follow the ticked rows.
@@ -4315,47 +5115,92 @@ gcEls.all.onchange = () => {
 };
 
 function gcTicked() {
-	return [...gcEls.list.querySelectorAll("input[type=checkbox]:checked")].map((box) => box.value);
+	return [...gcEls.list.querySelectorAll("input[type=checkbox]:enabled:checked")].map((box) => box.value);
 }
 
 function gcRow(row) {
 	const li = document.createElement("li");
-	const label = document.createElement("label");
-	label.className = "gc-row";
+	const line = document.createElement(row.role === "reconcile" ? "div" : "label");
+	const kept = row.role === "gc" && !row.selectable;
+	line.className = kept ? "gc-row readonly" : "gc-row";
+	if (row.role === "reconcile") {
+		const mark = document.createElement("span");
+		mark.className = "gc-mark";
+		line.append(mark);
+	} else {
+		const box = document.createElement("input");
+		box.type = "checkbox";
+		box.value = row.id;
+		box.disabled = !row.selectable;
+		box.onchange = gcSync;
+		line.append(box);
+	}
 	const main = document.createElement("span");
 	main.className = "gc-main";
-	const box = document.createElement("input");
-	box.type = "checkbox";
-	box.value = row.id;
-	box.onchange = gcSync;
+	const head = document.createElement("span");
+	head.className = "gc-line";
 	const name = document.createElement("span");
 	name.className = "gc-name";
 	name.textContent = row.label;
 	name.title = row.title;
+	head.append(name);
+	if (row.badge !== null) {
+		const badge = document.createElement("span");
+		badge.className = "gc-badge";
+		badge.textContent = row.badge;
+		head.append(badge);
+	}
 	const sub = document.createElement("span");
 	sub.className = "gc-sub";
 	sub.textContent = row.sub;
-	main.append(name, sub);
-	label.append(box, main);
-	li.append(label);
+	main.append(head, sub);
+	if (row.note !== null) {
+		const note = document.createElement("span");
+		note.className = "gc-note";
+		note.textContent = row.note;
+		main.append(note);
+	}
+	line.append(main);
+	li.append(line);
+	return li;
+}
+
+function gcGroup(group) {
+	const li = document.createElement("li");
+	li.className = "gc-group";
+	li.hidden = group.hidden;
+	const head = document.createElement("div");
+	head.className = "gc-group-head";
+	const title = document.createElement("span");
+	title.textContent = group.title;
+	const count = document.createElement("span");
+	count.className = "gc-count";
+	count.textContent = String(group.count);
+	head.append(title, count);
+	const rows = document.createElement("ul");
+	rows.className = "gc-rows";
+	rows.setAttribute("aria-label", group.title);
+	rows.append(...group.rows.map(gcRow));
+	li.append(head, rows);
 	return li;
 }
 
-/** The last GET /api/gc answer (null when the gateway did not answer), drawn again in a new language. */
+/** The last GET /api/housekeeping answer (null when the gateway did not answer), drawn again in a new language. */
 function renderGc(body) {
 	gcEls.body = body;
 	const view = gcView(body);
 	gcEls.summary.textContent = view.summary;
 	gcEls.summary.classList.toggle("error", view.error);
-	gcEls.list.replaceChildren(...view.rows.map(gcRow));
+	gcEls.list.replaceChildren(...view.groups.map(gcGroup));
 	gcSync();
+	renderGcAudit();
 }
 
 async function loadGc() {
 	gcEls.clean.disabled = true;
 	let body = null;
 	try {
-		const res = await fetch(GC_PATH, { cache: "no-store" });
+		const res = await fetch(HOUSEKEEPING_PATH, { cache: "no-store" });
 		if (res.ok) body = await res.json();
 	} catch {
 		body = null;
@@ -4363,12 +5208,53 @@ async function loadGc() {
 	renderGc(body);
 }
 
+// 기록 보기: the last 20 audit lines, newest first. The button text follows the open state in the current language.
+function renderGcAudit() {
+	const open = !gcEls.auditList.hidden;
+	gcEls.audit.textContent = t(open ? "settings.gc.auditHide" : "settings.gc.audit");
+	gcEls.audit.setAttribute("aria-expanded", String(open));
+	if (!open) return;
+	const view = auditView(gcEls.auditBody);
+	const items = view.rows.map((row) => {
+		const li = document.createElement("li");
+		li.textContent = `${dateTimeLabel(row.at)} · ${row.text}`;
+		li.title = row.title;
+		li.classList.toggle("error", row.error);
+		return li;
+	});
+	if (view.line !== "") {
+		const li = document.createElement("li");
+		li.className = view.error ? "gc-audit-line error" : "gc-audit-line";
+		li.textContent = view.line;
+		items.push(li);
+	}
+	gcEls.auditList.replaceChildren(...items);
+}
+
+async function loadGcAudit() {
+	let body = null;
+	try {
+		const res = await fetch(`${HOUSEKEEPING_AUDIT_PATH}?limit=${AUDIT_LINES}`, { cache: "no-store" });
+		if (res.ok) body = await res.json();
+	} catch {
+		body = null;
+	}
+	gcEls.auditBody = body;
+	renderGcAudit();
+}
+
+gcEls.audit.onclick = async () => {
+	gcEls.auditList.hidden = !gcEls.auditList.hidden;
+	if (gcEls.auditList.hidden) renderGcAudit();
+	else await loadGcAudit();
+};
+
 gcEls.clean.onclick = async () => {
 	const ids = gcTicked();
 	if (ids.length === 0) return;
 	gcEls.clean.disabled = true;
 	try {
-		const res = await fetch(GC_CLEAN_PATH, cleanRequest(ids));
+		const res = await fetch(HOUSEKEEPING_CLEAN_PATH, cleanRequest(ids));
 		gcEls.message.textContent = res.ok ? cleanResultLine(await res.json()) : t("settings.gc.failedHttp", { status: res.status });
 		gcEls.message.classList.toggle("error", !res.ok);
 	} catch (err) {
@@ -4376,6 +5262,7 @@ gcEls.clean.onclick = async () => {
 		gcEls.message.classList.add("error");
 	}
 	await loadGc();
+	if (!gcEls.auditList.hidden) await loadGcAudit();
 };
 
 function openSettings() {
@@ -4389,6 +5276,7 @@ function openSettings() {
 	void loadAccess();
 	void appDownload.start();
 	gcEls.message.textContent = "";
+	gcEls.auditList.hidden = true;
 	void loadGc();
 	settings.title.focus();
 }
@@ -4523,53 +5411,279 @@ manualEls.el.addEventListener("keydown", (ev) => {
 
 // 에이전트 (agent-sessions todo 10, design D5): web/agents.js decides; this block draws the sidebar group above 대화, the
 // header's name and stale badge, and the 에이전트 dialog (목록, editor, 공통 기본값, 보관함) over /api/agents.
-const agentState = { list: [], loaded: false };
+// agentState itself sits beside `state` near the top: the profile and bubble speaker read it from the first paint.
 const agentEls = {
 	list: $("agent-list"), manage: $("agent-manage"),
-	head: $("agent-head"), headIcon: $("agent-head-icon"), headName: $("agent-head-name"), stale: $("agent-stale"),
-	toggle: $("toggle-agents"), el: $("agents"), close: $("agents-close"), title: $("agents-title"), status: $("agents-status"), body: $("agents-body"),
+	head: $("agent-head"), headIcon: $("agent-head-icon"), headName: $("agent-head-name"), stale: $("agent-stale"), staleText: $("agent-stale-text"), rotate: $("rotate-session"),
+	toggle: $("toggle-agents"), el: $("agents"), close: $("agents-close"), title: $("agents-title"), status: $("agents-status"), applyNow: $("agents-apply-now"), body: $("agents-body"),
 	nav: { list: $("agents-nav-list"), defaults: $("agents-nav-defaults"), trash: $("agents-nav-trash") },
 };
-const agentView = { open: false, view: "list", editor: null, files: [], returnFocus: null, load: 0 };
+// `preview` is the can/cannot box's state (todo 12: the gateway's evaluation of the editor's text, its request sequence and
+// whether an answer is pending); `uploads` holds every agent's upload queue by id (the files picked for its source/ folder,
+// agent-ux todo 14) and `uploading` the ids whose runner is active: a queue keeps going out when another editor opens and a
+// second editor's queue starts at once (review fix B1); `lastDaily` is the open agent's newest daily note date from its detail
+// (todo 15); `fileTrash` its deleted files, `fileConfirm` the path whose in-row delete confirmation is open and `fileTrashOpen`
+// the disclosure state (todo 16). The files picked on a create screen live on that screen's editor state (`pendingUploads`,
+// todo 18 fix): the create request and the draft autosave take them from the state they were given, never from another screen.
+// While the editor's own save is on the wire, its agent.updated is that save, not a change made elsewhere.
+let editorSaving = false;
+const agentView = { open: false, view: "list", editor: null, files: [], returnFocus: null, load: 0, skills: { status: "idle", commands: null }, drafts: [], preview: { status: "loading", fields: null, seq: 0, pending: false }, uploads: new Map(), uploading: new Set(), lastDaily: null, fileTrash: [], fileConfirm: null, fileTrashOpen: false, applyNow: null };
+// The create screen's autosave (todo 11, 18): durable per draft id - one PUT per quiet period with the latest state of each draft, one
+// request per draft on the wire, and a state that became due is never dropped by closing or by another screen.
+const draftAutosave = createDraftSaver(saveDraft);
+// The capability preview (todo 12, 18): disposable and owned by the open editor - the gateway evaluates the editor's current text, one
+// request on the wire with the latest state after it; closing, opening another editor or a save answer discards what waits.
+const capabilityPreview = createPreviewRequester(requestPreview, { delayMs: PREVIEW_DELAY_MS });
 
-async function agentApi(request) {
-	const res = await fetch(request.path, { method: request.method, headers: request.headers, body: request.body });
-	const body = await res.json().catch(() => null);
-	if (!res.ok) throw new Error(errorLine(body, res.status));
-	return body;
+/**
+ * Every editor change lands here: the state is replaced, a new agent's draft autosave is touched (todo 11), and the box asks
+ * the gateway again (todo 12). The edit moves the preview sequence on (todo 12 fix 4): an answer still on the wire belongs to
+ * older text and is dropped when it lands, and the box stays busy until the answer for this text arrives.
+ */
+function commitEditor(next) {
+	agentView.editor = next;
+	if (next.kind === "new" && next.draftId) draftAutosave.touch(next);
+	if (next.kind === "defaults") return;
+	agentView.preview = { ...agentView.preview, seq: agentView.preview.seq + 1, pending: true };
+	document.getElementById("pe-capabilities")?.setAttribute("aria-busy", "true");
+	capabilityPreview.touch(next);
 }
 
-async function loadAgents() {
-	try {
-		const list = await agentApi({ method: "GET", path: AGENTS_PATH });
-		if (!Array.isArray(list)) return;
-		agentState.list = list;
-		agentState.loaded = true;
-		renderAgentGroup();
-		renderAgentHeader();
-		if (agentView.open && agentView.view === "list") renderAgentList();
-	} catch (error) {
-		console.warn("agents load:", error);
+/**
+ * The can/cannot box at the top of an agent's editor (agent-ux todo 12): two columns from the gateway's own evaluation of
+ * the editor's current text (POST /api/agents/preview; web/agents.js capabilities), each line with its detail as the
+ * tooltip. Until the first answer it says it is checking; text the gateway refuses shows a line instead of a guess, and so
+ * does a request that brought no answer (the gateway could not be reached); while a newer answer is pending the last valid
+ * one stays, marked busy.
+ */
+function renderCapabilities() {
+	const preview = agentView.preview;
+	const box = document.createElement("div");
+	box.className = "pe-capabilities";
+	box.id = "pe-capabilities";
+	box.setAttribute("role", "group");
+	box.setAttribute("aria-label", t("agents.cap.title"));
+	box.setAttribute("aria-busy", String(preview.pending || preview.status === "loading"));
+	box.dataset.state = preview.status;
+	if (preview.status !== "ready") {
+		const line = document.createElement("p");
+		line.className = "pe-cap-line";
+		line.id = "pe-cap-line";
+		line.textContent = t(preview.status === "loading" ? "agents.cap.loading" : preview.status === "failed" ? "agents.cap.failed" : "agents.cap.unavailable");
+		box.append(line);
+		return box;
+	}
+	const result = capabilities(preview.fields);
+	for (const [kind, items] of [["can", result.can], ["cannot", result.cannot]]) {
+		const column = document.createElement("section");
+		column.className = `pe-cap ${kind}`;
+		const heading = document.createElement("h4");
+		heading.className = "pe-cap-title";
+		heading.textContent = t(`agents.cap.${kind}`);
+		const list = document.createElement("ul");
+		for (const item of items) {
+			const li = document.createElement("li");
+			li.dataset.cap = item.key;
+			li.textContent = item.text;
+			// The page tooltip (web/tooltip.js, bug 90): shown on hover and on focus, so the line is focusable.
+			li.tabIndex = 0;
+			li.setAttribute("data-tip-keep", "");
+			li.setAttribute("data-tip", item.tip);
+			list.append(li);
+		}
+		column.append(heading, list);
+		box.append(column);
 	}
+	return box;
 }
 
-function agentSidebarView() {
-	return { current: state.current, running: state.running, busy: (id) => isBusy(activity, id), pending: state.pendingByConv };
+function refreshCapabilities() {
+	document.getElementById("pe-capabilities")?.replaceWith(renderCapabilities());
 }
 
-function currentConversation() {
-	return state.conversations.find((c) => c.id === state.current) ?? null;
+/**
+ * POST the editor's text for the box. While the request is on the wire the box keeps its last valid answer, marked busy
+ * (marked here too, since the controller sends a queued state right after an answer cleared the mark). The answer is
+ * applied only while it is the newest request of the editor that owns the preview, for its current text: a later request
+ * or an edit moves the sequence on, and closing, another editor or a save answer discards the preview and moves its owner
+ * token on (todo 18 fix 2) - the older answer is dropped, the box staying busy for the request that follows. A request
+ * that brought no answer leaves the box `failed` (todo 12 fix 4), never an older answer marked ready.
+ */
+async function requestPreview(state, token) {
+	const seq = ++agentView.preview.seq;
+	agentView.preview = { ...agentView.preview, pending: true };
+	document.getElementById("pe-capabilities")?.setAttribute("aria-busy", "true");
+	let answer = null;
+	try {
+		answer = await agentApi(previewRequest(state));
+	} catch {
+		answer = null;
+	}
+	if (!capabilityPreview.owns(token) || seq !== agentView.preview.seq) return;
+	agentView.preview = { ...previewState(answer), seq, pending: false };
+	refreshCapabilities();
 }
 
-function peSpan(className, text) {
-	const el = document.createElement("span");
-	el.className = className;
-	el.textContent = text;
-	return el;
+/** The box's state for a newly opened editor: the gateway's fields when a detail or save answer already holds them, else checking until the first request answers. */
+function resetPreview(fields = null) {
+	const seq = agentView.preview.seq + 1;
+	agentView.preview = fields ? { status: "ready", fields, seq, pending: false } : { status: "loading", fields: null, seq, pending: true };
 }
 
-function peButton(text, onClick, id, className = "text-btn", act) {
-	const button = document.createElement("button");
+/**
+ * PUT the draft (one request per draft on the wire, see createDraftSaver). The status line under the create form says
+ * when it was saved, or why not (editing goes on); it is written only while that draft is the open editor's, so an answer
+ * for an earlier draft never shows as the newest save. A 409 draft_closed means the gateway archived the draft meanwhile
+ * (it was created or discarded, maybe from another tab): the line says so, the text stays, and that id is not saved again.
+ */
+async function saveDraft(state) {
+	const current = () => agentView.editor?.draftId === state.draftId;
+	if (current()) setDraftStatus(t("agents.draft.saving"), "");
+	try {
+		// The draft lists the queued files of the state being saved by name and size (todo 18): a deferred state still carries its own
+		// files once another screen is open; a reopened draft keeps the names it had until new files are picked.
+		const files = state.pendingUploads?.length ? draftFileList(state.pendingUploads) : state.draftFiles ?? [];
+		await agentApi(draftRequest(state, files));
+		if (current()) setDraftStatus(t("agents.draft.saved", { time: new Date().toLocaleTimeString(uiLocale(), { hour: "numeric", minute: "2-digit" }) }), "ok");
+	} catch (error) {
+		if (!current()) return false;
+		if (error.code === "draft_closed") {
+			agentView.editor = { ...agentView.editor, draftId: null };
+			setDraftStatus(error.message, "warn");
+			return false;
+		}
+		setDraftStatus(t("agents.draft.failed", { reason: error.message }), "warn");
+		return false;
+	}
+}
+
+function setDraftStatus(text, kind) {
+	const line = document.getElementById("pe-draft-status");
+	if (!line) return;
+	line.textContent = text;
+	line.className = `pe-draft-status${kind ? ` ${kind}` : ""}`;
+}
+
+/** GET /api/agents/drafts for the list screen's reopen button (todo 11); a failure leaves the cached rows. */
+async function refreshDrafts(load) {
+	try {
+		const rows = draftRows(await agentApi({ method: "GET", path: DRAFTS_PATH }));
+		if (load !== agentView.load) return;
+		agentView.drafts = rows;
+		if (agentView.view === "list") renderAgentList();
+	} catch (error) {
+		console.warn("agent drafts:", error);
+	}
+}
+
+/**
+ * Reopens a draft from the list (todo 11). What this page still owes that draft lands first - a state due behind its wire
+ * included - so the GET answers the latest persisted state and the reopened editor never saves an older file list over a
+ * newer one (todo 18 fix 3); the list says it is waiting. The wait is bounded (todo 18 fix 4): a save that never answers
+ * must not block the list, so after DRAFT_REOPEN_WAIT_MS the draft opens from the newest state this page holds, with a
+ * note, and the autosave goes on behind it. A failed save also recovers the local state, with retry guidance instead of a stale GET.
+ * A reopen whose navigation token is no longer current (the user opened another
+ * editor, the list or closed the dialog meanwhile) does nothing.
+ */
+async function openDraft(id) {
+	const load = agentView.load;
+	try {
+		showAgentStatus(t("agents.draft.waiting"));
+		let bound = null;
+		const saved = await Promise.race([draftAutosave.settle(id), new Promise((resolve) => { bound = setTimeout(() => resolve(null), DRAFT_REOPEN_WAIT_MS); })]);
+		if (bound !== null) clearTimeout(bound);
+		if (load !== agentView.load) return;
+		const local = saved === false || saved === null ? draftAutosave.latest(id) : null;
+		const draft = local ? { id, source: composeSource(local), files: local.pendingUploads?.length ? draftFileList(local.pendingUploads) : local.draftFiles ?? [] } : await agentApi(draftLoadRequest(id));
+		if (load !== agentView.load) return;
+		await showAgentView("editor", null, draft);
+		if (agentView.load !== load + 1) return;
+		showAgentStatus(local && saved === null ? t("agents.draft.unsettled") : "", local && saved === null ? "warn" : "");
+		if (local && saved === false) setDraftStatus(t("agents.draft.recovered"), "warn");
+	} catch (error) {
+		if (load === agentView.load) showAgentStatus(error.message, "error");
+	}
+}
+
+async function discardDraft(id) {
+	try {
+		await agentApi(discardDraftRequest(id));
+		agentView.drafts = agentView.drafts.filter((draft) => draft.id !== id);
+		showAgentStatus(t("agents.draft.discarded"), "ok");
+		renderAgentList();
+	} catch (error) {
+		showAgentStatus(error.message, "error");
+	}
+}
+
+/**
+ * One agent API request. A refusal throws the Korean/English line with the gateway's `code`, `field` and `status` on
+ * the error (saveErrorLine turns them into save-specific sentences, todo 13); a request that never got an answer
+ * throws with `network: true`.
+ */
+async function agentApi(request) {
+	let res;
+	try {
+		res = await fetch(request.path, { method: request.method, headers: request.headers, body: request.body });
+	} catch (error) {
+		throw Object.assign(new Error(error instanceof Error ? error.message : String(error)), { code: null, field: null, status: 0, network: true });
+	}
+	const body = await res.json().catch(() => null);
+	if (!res.ok) throw Object.assign(new Error(errorLine(body, res.status)), { code: typeof body?.error === "string" ? body.error : null, field: typeof body?.field === "string" ? body.field : null, status: res.status, network: false });
+	return body;
+}
+
+/** The only writer of the agent list: every write moves its stamp on (T21W-B2). */
+function writeAgents(list) {
+	agentState.writes += 1;
+	agentState.list = list;
+}
+
+/**
+ * Reads the gateway's agent list. The answer lands only when nothing was written to the list after the request went
+ * out (freshListAnswer); an overtaken answer is dropped and asked once more, and that answer follows the same rule.
+ */
+async function loadAgents(again = true) {
+	const sent = agentState.writes;
+	try {
+		const list = await agentApi({ method: "GET", path: AGENTS_PATH });
+		if (!Array.isArray(list)) return;
+		if (!freshListAnswer(sent, agentState.writes)) {
+			if (again) await loadAgents(false);
+			return;
+		}
+		writeAgents(list);
+		agentState.loaded = true;
+		renderAgentGroup();
+		renderAgentHeader();
+		renderApplyNow();
+		// The list may arrive after the transcript was painted (first load) or changed while this page was offline
+		// (reconnect): the open conversation's rows, reference labels and profile follow it (bug 284).
+		repaintSpeaker();
+		if (agentView.open && agentView.view === "list") renderAgentList();
+		refreshTargetRows();
+	} catch (error) {
+		console.warn("agents load:", error);
+	}
+}
+
+function agentSidebarView() {
+	return { current: state.current, running: state.running, busy: (id) => isBusy(activity, id), pending: state.pendingByConv };
+}
+
+function currentConversation() {
+	return state.conversations.find((c) => c.id === state.current) ?? null;
+}
+
+function peSpan(className, text) {
+	const el = document.createElement("span");
+	el.className = className;
+	el.textContent = text;
+	return el;
+}
+
+function peButton(text, onClick, id, className = "text-btn", act) {
+	const button = document.createElement("button");
 	button.type = "button";
 	button.className = className;
 	button.textContent = text;
@@ -4618,33 +5732,131 @@ function renderAgentGroup() {
 	}
 }
 
+/** The header's agent block and the new-session button: while the definition changed, the status says so and the button is the way to apply it (bug 283). */
 function renderAgentHeader() {
 	const view = headerView(currentConversation(), agentState.list);
+	const notice = staleNotice(view);
+	agentEls.rotate.classList.toggle("attention", notice.attention);
+	agentEls.rotate.textContent = t(notice.labelKey);
+	agentEls.rotate.setAttribute("aria-label", t(notice.labelKey));
 	agentEls.head.hidden = !view.agent;
 	if (!view.agent) return;
 	agentEls.headIcon.textContent = view.icon;
 	agentEls.headName.textContent = view.name;
 	agentEls.headName.title = view.name;
-	agentEls.stale.hidden = !view.stale;
+	agentEls.stale.hidden = !notice.shown;
 	agentEls.stale.title = STALE_TITLE;
+	if (notice.shown) agentEls.staleText.textContent = t(notice.textKey);
+}
+
+/** agent.applied of a conversation: the list follows the new session's sha (a write, so an older list answer cannot undo it). */
+function receiveAgentApplied(conv, data) {
+	writeAgents(applyAgentApplied(agentState.list, conv, data));
+	renderAgentHeader();
+	renderAgentGroup();
+	renderApplyNow();
 }
 
 function receiveAgentUpdate(data) {
 	const result = applyAgentUpdate(agentState.list, state.conversations, data);
-	agentState.list = result.agents;
+	writeAgents(result.agents);
 	state.conversations = result.conversations;
 	if (result.removedConv && result.removedConv === state.current) selectConversation("main");
 	else if (result.restoredConv) selectConversation(result.restoredConv);
 	else {
 		renderConversations();
 		renderAgentHeader();
+		repaintSpeaker(data?.id);
 	}
 	if (agentView.open && agentView.view === "list") renderAgentList();
+	refreshTargetRows();
+	// The open editor's own save answers through saveAgentEditor; only a change made elsewhere is followed here.
+	switch (agentView.open && !editorSaving ? editorUpdateAction(agentView.editor, data) : null) {
+		case "reload": void reloadOpenEditor(data.id); break;
+		case "changed": showAgentStatus(t("agents.changedElsewhere"), "error"); break;
+	}
 }
 
-function showAgentStatus(text, kind = "") {
+/** An untouched editor of an agent whose saved definition changed elsewhere shows the gateway's current definition. */
+async function reloadOpenEditor(id) {
+	const load = agentView.load;
+	try {
+		const detail = await agentApi({ method: "GET", path: `${AGENTS_PATH}/${encodeURIComponent(id)}` });
+		const editor = agentView.editor;
+		if (load !== agentView.load || editorSaving || editor?.kind !== "agent" || editor.id !== id || editor.dirty === true) return;
+		agentView.editor = editorState(detail, "agent");
+		capabilityPreview.discard();
+		resetPreview(detail.fields);
+		renderAgentEditor();
+		showAgentStatus(t("agents.changedElsewhere.reloaded"), "ok");
+	} catch (error) {
+		if (load === agentView.load) showAgentStatus(t("agents.changedElsewhere"), "error");
+	}
+}
+
+/**
+ * After agent metadata changed (bug 284): the open agent conversation's rows and reference labels follow its name and
+ * icon, and the sidebar profile is redrawn. [agentId] limits the row repaint to one agent's update (a realtime
+ * `agent.updated`); without it (a list refresh) the open agent conversation is repainted whatever changed.
+ */
+function repaintSpeaker(agentId = null) {
+	const view = speaker();
+	if (view.agent && (agentId === null || view.agentId === agentId)) {
+		nameAgentRows(document.querySelectorAll(".msg:not(.mine)"), view.name);
+		iconAgentRows(document.querySelectorAll(".msg:not(.mine)"), null, view.icon);
+		for (const label of document.querySelectorAll('[data-role="assistant"]')) label.textContent = view.name;
+	}
+	refreshCollaborationCards();
+	renderAgentProfile();
+}
+
+/** The dialog's status line; [apply] is the "지금 적용" target a changed save offers beside it (todo 21), else no button. */
+function showAgentStatus(text, kind = "", apply = null) {
 	agentEls.status.textContent = text;
 	agentEls.status.className = `agents-status${kind ? ` ${kind}` : ""}`;
+	agentView.applyNow = apply;
+	renderApplyNow();
+}
+
+function renderApplyNow() {
+	agentEls.applyNow.hidden = !applyNowShown(agentView.applyNow, agentState.list);
+}
+
+/**
+ * Sends the rotation that opens [target]'s next session at once, subscribed to its conversation's events before the
+ * request goes out; resolves with applyWatch's outcome, or "unconfirmed" when nothing decides it within APPLY_WAIT_MS.
+ */
+function watchApply(target) {
+	return new Promise((resolve) => {
+		const follow = applyWatch(target);
+		let timer = null;
+		const finish = (result) => {
+			applyWaits.delete(listen);
+			clearTimeout(timer);
+			resolve(result);
+		};
+		const listen = (event) => {
+			const result = follow(event);
+			if (result !== null) finish(result);
+		};
+		timer = setTimeout(() => finish("unconfirmed"), APPLY_WAIT_MS);
+		applyWaits.add(listen);
+		if (!send({ type: "conversation.rotate", conv: target.convId, open: true })) finish("unconfirmed");
+	});
+}
+
+/** "지금 적용": the same question as the header button, then the rotation; the outcome is said in the status line. */
+async function applyAgentNow() {
+	const target = agentView.applyNow;
+	if (!target || agentEls.applyNow.disabled) return;
+	if (!confirm(t("head.newSession.confirm.apply"))) return;
+	agentEls.applyNow.disabled = true;
+	const result = await watchApply(target);
+	agentEls.applyNow.disabled = false;
+	// Whatever the outcome (a timeout included), the header and the button follow the gateway's agent state (T21W-B1).
+	void loadAgents();
+	// Only a turn that held the rotation leaves the button to press again once the answer ends.
+	showAgentStatus(applyLine(result), result === "applied" ? "ok" : "error", result === "turn_running" ? target : null);
 }
 
 function openAgents(view = "list", target = null) {
@@ -4661,9 +5873,13 @@ function openAgents(view = "list", target = null) {
 
 function closeAgents() {
 	if (!agentView.open) return;
+	// A change made less than the quiet period ago is saved now; the request outlives the dialog. The preview is discarded.
+	draftAutosave.flush();
+	capabilityPreview.discard();
 	agentView.open = false;
 	agentView.load += 1;
 	agentView.editor = null;
+	agentView.skills = { status: "idle", commands: null };
 	agentEls.el.hidden = true;
 	agentEls.body.replaceChildren();
 	for (const button of [agentEls.toggle, agentEls.manage]) button.setAttribute("aria-expanded", "false");
@@ -4672,13 +5888,16 @@ function closeAgents() {
 	(back instanceof HTMLElement && back !== document.body && document.contains(back) ? back : agentEls.toggle).focus();
 }
 
-async function showAgentView(view, target = null) {
+async function showAgentView(view, target = null, draft = null) {
+	draftAutosave.flush();
+	capabilityPreview.discard();
 	agentView.view = view;
 	for (const [name, button] of Object.entries(agentEls.nav)) button.setAttribute("aria-current", String(name === view));
 	const load = ++agentView.load;
 	agentEls.body.replaceChildren();
 	if (view === "list") {
 		renderAgentList();
+		void refreshDrafts(load);
 		return;
 	}
 	if (view === "trash") {
@@ -4694,14 +5913,31 @@ async function showAgentView(view, target = null) {
 			// The field registry rides on the defaults answer; a new agent has no detail to take it from yet.
 			const defaults = await agentApi({ method: "GET", path: DEFAULTS_PATH });
 			if (load !== agentView.load) return;
-			agentView.editor = editorState({ registry: defaults.registry }, "new");
+			// A reopened draft brings its text and id (todo 11); a fresh create screen makes a new id. defaults.md rides along as the
+			// gateway parsed it (`fields`), the shared layer under the agent's own values that the can/cannot box and the rows read (todo 12 fix 2).
+			agentView.editor = { ...editorState({ registry: defaults.registry, source: draft?.source, draftId: draft?.id ?? newDraftId(), defaultsFields: defaults.fields }, "new"), draftFiles: Array.isArray(draft?.files) ? draft.files : [], pendingUploads: [] };
 			agentView.files = [];
+			agentView.lastDaily = null;
+			agentView.fileTrash = [];
+			agentView.fileConfirm = null;
+			// The box asks the gateway at once for the fresh or reopened text (todo 12).
+			resetPreview();
+			capabilityPreview.touch(agentView.editor);
+			capabilityPreview.flush();
 		} else {
 			const detail = await agentApi({ method: "GET", path: `${AGENTS_PATH}/${encodeURIComponent(target)}` });
-			const files = await agentApi({ method: "GET", path: filesPath(target) }).catch(() => []);
+			const [files, trash] = await Promise.all([agentApi({ method: "GET", path: filesPath(target) }).catch(() => []), agentApi({ method: "GET", path: fileTrashPath(target) }).catch(() => [])]);
 			if (load !== agentView.load) return;
+			// The detail carries the parsed shared layer (`defaultsFields`) beside the merged fields, which are the gateway's evaluation of this untouched text (todo 12).
 			agentView.editor = editorState(detail, "agent");
 			agentView.files = fileRows(files);
+			// The agent's own queue stays (a run started in an earlier visit goes on, failed rows keep their 다시 시도); only the rows
+			// done by now are dropped - their files are in the list.
+			agentView.uploads.set(target, uploadQueue(target).filter((row) => row.status !== "done"));
+			agentView.lastDaily = typeof detail.lastDaily === "string" ? detail.lastDaily : null;
+			agentView.fileTrash = fileTrashRows(trash);
+			agentView.fileConfirm = null;
+			resetPreview(detail.fields);
 		}
 	} catch (error) {
 		if (load === agentView.load) showAgentStatus(error.message, "error");
@@ -4716,6 +5952,19 @@ function renderAgentList() {
 	const actions = document.createElement("div");
 	actions.className = "pe-actions";
 	actions.append(peButton(t("side.newAgent"), () => openAgents("editor", null), "pe-new", "text-btn primary"));
+	// Drafts of the create screen (todo 11): a button beside + 에이전트 opens their list.
+	const drafts = agentView.drafts;
+	const draftList = renderDraftList(drafts);
+	draftList.hidden = true;
+	if (drafts.length > 0) {
+		const open = peButton(t("agents.draft.open", { count: drafts.length }), () => {
+			draftList.hidden = !draftList.hidden;
+			open.setAttribute("aria-expanded", String(!draftList.hidden));
+		}, "pe-drafts-open");
+		open.setAttribute("aria-expanded", "false");
+		open.setAttribute("aria-controls", "pe-draft-list");
+		actions.append(open);
+	}
 	const list = document.createElement("ul");
 	list.className = "pe-list";
 	list.id = "pe-agent-list";
@@ -4752,10 +6001,53 @@ function renderAgentList() {
 		li.append(peSpan("agent-icon", item.icon), main, rowActions);
 		list.append(li);
 	}
-	section.append(actions, list);
+	section.append(actions, draftList, list);
 	agentEls.body.replaceChildren(section);
 }
 
+/** The create screen's drafts (todo 11): name or 이름 없음, when it was saved, reopen, and discard with an in-row confirmation. */
+function renderDraftList(drafts) {
+	const list = document.createElement("ul");
+	list.className = "pe-list pe-draft-list";
+	list.id = "pe-draft-list";
+	for (const draft of drafts) {
+		const li = document.createElement("li");
+		li.className = "pe-list-row";
+		li.dataset.draft = draft.id;
+		const main = document.createElement("div");
+		main.className = "pe-list-main";
+		const name = document.createElement("div");
+		name.className = "pe-list-name";
+		name.textContent = draft.name ?? t("agents.draft.unnamed");
+		const sub = document.createElement("div");
+		sub.className = "pe-list-sub";
+		sub.textContent = draft.updatedAt ? t("agents.draft.savedAt", { time: new Date(draft.updatedAt).toLocaleString(uiLocale()) }) : "";
+		main.append(name, sub);
+		const confirmBox = document.createElement("div");
+		confirmBox.className = "inbox-dismiss mode-cancel pe-draft-discard";
+		confirmBox.hidden = true;
+		const text = document.createElement("p");
+		text.className = "inbox-dismiss-text";
+		text.textContent = t("agents.draft.discard.confirm");
+		const buttons = document.createElement("div");
+		buttons.className = "pe-actions";
+		buttons.append(
+			peButton(t("agents.draft.discard"), () => void discardDraft(draft.id), undefined, "text-btn danger", "discard-confirm"),
+			peButton(t("common.cancel"), () => { confirmBox.hidden = true; }, undefined, "text-btn", "discard-cancel"),
+		);
+		confirmBox.append(text, buttons);
+		const rowActions = document.createElement("div");
+		rowActions.className = "pe-list-actions";
+		rowActions.append(
+			peButton(t("agents.draft.load"), () => void openDraft(draft.id), undefined, "text-btn primary", "load"),
+			peButton(t("agents.draft.discard"), () => { confirmBox.hidden = !confirmBox.hidden; }, undefined, "text-btn", "discard"),
+		);
+		li.append(peSpan("agent-icon", "✎"), main, rowActions, confirmBox);
+		list.append(li);
+	}
+	return list;
+}
+
 function renderEditorRow(row) {
 	const wrap = document.createElement("div");
 	wrap.className = "pe-row";
@@ -4788,18 +6080,21 @@ function renderEditorRow(row) {
 		}
 		error.textContent = "";
 		input.removeAttribute("aria-invalid");
-		agentView.editor = setField(agentView.editor, row.name, result.value);
+		commitEditor(setField(agentView.editor, row.name, result.value));
 		refreshEditorRow(wrap, row.name);
 	};
 	if (row.widget === "toggle") {
-		const toggle = document.createElement("label");
+		// The settings switch (role=switch, aria-checked), not a checkbox; the label's `for` names it.
+		const toggle = document.createElement("div");
 		toggle.className = "pe-toggle";
-		input = document.createElement("input");
-		input.type = "checkbox";
+		input = document.createElement("button");
+		input.type = "button";
+		input.className = "switch";
 		input.id = id;
-		input.checked = row.value === true;
+		input.setAttribute("role", "switch");
+		renderSwitch(input, row.value === true);
 		toggle.append(input, peSpan("", t(row.value === true ? "common.onShort" : "common.offShort")));
-		input.addEventListener("change", () => apply(input.checked));
+		input.addEventListener("click", () => apply(input.getAttribute("aria-checked") !== "true"));
 		line.append(toggle);
 	} else if (row.widget === "select") {
 		input = document.createElement("select");
@@ -4810,13 +6105,27 @@ function renderEditorRow(row) {
 		input.value = typeof row.value === "string" ? row.value : "";
 		input.addEventListener("change", () => apply(input.value));
 		line.append(input);
-	} else if (row.widget === "textarea" || row.widget === "skills") {
+	} else if (row.widget === "skills") {
+		// The check list is a group named by the row label, not a labelable control (todo 10).
+		label.removeAttribute("for");
+		label.id = `${id}-label`;
+		input = renderSkillsControl(row, apply, id);
+		input.setAttribute("aria-labelledby", label.id);
+		line.append(input);
+	} else if (row.widget === "targets") {
+		label.removeAttribute("for");
+		label.id = `${id}-label`;
+		input = renderTargetsControl(row, apply, id);
+		input.setAttribute("aria-labelledby", label.id);
+		line.append(input);
+	} else if (row.widget === "textarea") {
 		input = document.createElement("textarea");
 		input.className = "pe-textarea";
 		input.id = id;
 		input.rows = 2;
 		input.value = Array.isArray(row.value) ? row.value.join(", ") : typeof row.value === "string" ? row.value : "";
-		input.addEventListener("change", () => apply(input.value));
+		// Text is committed as it is typed so the draft autosave (todo 11) sees it; a number waits for change (its validation).
+		input.addEventListener("input", () => apply(input.value));
 		line.append(input);
 	} else {
 		input = document.createElement("input");
@@ -4826,7 +6135,7 @@ function renderEditorRow(row) {
 		if (row.min !== undefined) input.min = String(row.min);
 		if (row.max !== undefined) input.max = String(row.max);
 		input.value = row.value === null || row.value === undefined ? "" : String(row.value);
-		input.addEventListener("change", () => apply(input.value));
+		input.addEventListener(row.widget === "number" ? "change" : "input", () => apply(input.value));
 		line.append(input);
 	}
 	if (row.required) input.required = true;
@@ -4844,9 +6153,218 @@ function renderEditorRow(row) {
 	return wrap;
 }
 
+/** The installed skill commands for the check list (todo 10), fetched once per open dialog; a failure keeps the saved values. */
+function loadSkillCommands() {
+	if (agentView.skills.status === "loading") return;
+	agentView.skills = { status: "loading", commands: null };
+	agentApi({ method: "GET", path: "/api/commands?conv=main" })
+		.then((list) => { agentView.skills = { status: "ready", commands: Array.isArray(list) ? list : [] }; })
+		.catch(() => { agentView.skills = { status: "failed", commands: null }; })
+		.finally(() => refreshSkillRows());
+}
+
+/** The open editor's skills row drawn again from the loaded (or failed) list; the editor state is untouched. */
+function refreshSkillRows() {
+	if (!agentView.open || !agentView.editor) return;
+	for (const wrap of document.querySelectorAll('#pe-form .pe-row[data-field="skills"]')) {
+		const row = editorRows(agentView.editor).find((r) => r.kind === "field" && r.name === "skills");
+		if (row) wrap.replaceWith(renderEditorRow(row));
+	}
+}
+
+/**
+ * The directional targets check list (agent-collaboration-292 C-10): every other agent the gateway lists, one checkbox
+ * each, never this agent itself; a saved id the list no longer carries (a deleted agent) stays checked with a 없음 tag so
+ * the owner can uncheck it. The gateway refuses new requests to it either way.
+ */
+function renderTargetsControl(row, apply, id) {
+	const box = document.createElement("div");
+	box.className = "pe-skills pe-targets";
+	box.id = id;
+	box.setAttribute("role", "group");
+	const selfId = agentView.editor?.kind === "agent" ? agentView.editor.id : null;
+	const { loaded, options } = targetOptions(agentState.loaded ? agentState.list : null, selfId, row.value);
+	if (!loaded) {
+		const line = document.createElement("p");
+		line.className = "pe-skills-status";
+		line.setAttribute("role", "status");
+		line.textContent = t("agents.targets.loading");
+		box.append(line);
+	}
+	const list = document.createElement("div");
+	list.className = "pe-skill-list";
+	if (loaded && options.length === 0) {
+		const empty = document.createElement("p");
+		empty.className = "pe-skills-empty";
+		empty.textContent = t("agents.targets.none");
+		list.append(empty);
+	}
+	const checked = new Set(options.filter((option) => option.checked).map((option) => option.id));
+	for (const option of options) {
+		const item = document.createElement("label");
+		item.className = `pe-skill pe-target${option.missing ? " missing" : ""}`;
+		item.dataset.agentId = option.id;
+		const input = document.createElement("input");
+		input.type = "checkbox";
+		input.value = option.id;
+		input.checked = option.checked;
+		input.disabled = !loaded;
+		input.addEventListener("change", () => {
+			if (input.checked) checked.add(option.id);
+			else checked.delete(option.id);
+			apply(options.filter((candidate) => checked.has(candidate.id)).map((candidate) => candidate.id));
+		});
+		item.append(input, peSpan("pe-target-name", option.name));
+		if (option.missing) {
+			const tag = peSpan("pe-skill-missing", t("agents.targets.missing"));
+			// Not a kept-tip spot (web/tooltip.js, bug 161): the explanation becomes the tag's aria-description.
+			tag.title = t("agents.targets.missing.tip");
+			item.append(tag);
+		} else item.append(peSpan("pe-skill-desc", option.id));
+		list.append(item);
+	}
+	box.append(list);
+	return box;
+}
+
+/** The open editor's targets row drawn again after the agent list changed (a load, a rename, a delete); the editor state is untouched. */
+function refreshTargetRows() {
+	if (!agentView.open || !agentView.editor) return;
+	for (const wrap of document.querySelectorAll('#pe-form .pe-row[data-field="collaboration.targets"]')) {
+		const row = editorRows(agentView.editor).find((r) => r.kind === "field" && r.name === "collaboration.targets");
+		if (row) wrap.replaceWith(renderEditorRow(row));
+	}
+}
+
+/**
+ * The allowed-skills check list (agent-ux todo 10): the installed skills from GET /api/commands?conv=main, one checkbox
+ * each (its description as the tooltip); a saved name that is not installed stays checked at the top with a tag; a
+ * search box appears over ten rows. While the list loads or could not be loaded, the saved names are shown read-only
+ * with a retry button, and saving keeps the value either way.
+ */
+function renderSkillsControl(row, apply, id) {
+	const box = document.createElement("div");
+	box.className = "pe-skills";
+	box.id = id;
+	box.setAttribute("role", "group");
+	if (agentView.skills.status === "idle") loadSkillCommands();
+	const { status } = agentView.skills;
+	const { loaded, options } = skillOptions(agentView.skills.commands, row.value);
+	if (!loaded) {
+		const line = document.createElement("p");
+		line.className = "pe-skills-status";
+		line.setAttribute("role", "status");
+		line.append(peSpan("", t(status === "failed" ? "agents.skills.loadFailed" : "agents.skills.loading")));
+		if (status === "failed") line.append(peButton(t("agents.skills.retry"), () => loadSkillCommands(), `${id}-retry`), peSpan("", t("agents.skills.keep")));
+		box.append(line);
+	}
+	const list = document.createElement("div");
+	list.className = "pe-skill-list";
+	const noMatch = document.createElement("p");
+	noMatch.className = "pe-skills-empty";
+	noMatch.textContent = t(loaded && options.length === 0 ? "agents.skills.none" : "agents.skills.noMatch");
+	noMatch.hidden = !(loaded && options.length === 0);
+	if (loaded && options.length > 10) {
+		const search = document.createElement("input");
+		search.type = "search";
+		search.className = "pe-input pe-skill-search";
+		search.id = `${id}-search`;
+		search.placeholder = t("agents.skills.search");
+		search.setAttribute("aria-label", t("agents.skills.search"));
+		search.addEventListener("input", () => {
+			const query = search.value.trim().toLowerCase();
+			let shownRows = 0;
+			for (const item of list.querySelectorAll(".pe-skill")) {
+				const hit = !query || item.dataset.name.includes(query);
+				item.hidden = !hit;
+				if (hit) shownRows += 1;
+			}
+			noMatch.hidden = shownRows > 0;
+		});
+		box.append(search);
+	}
+	const checked = new Set(options.filter((option) => option.checked).map((option) => option.name));
+	for (const option of options) {
+		const item = document.createElement("label");
+		item.className = `pe-skill${option.installed === false ? " missing" : ""}`;
+		item.dataset.name = option.name.toLowerCase();
+		const input = document.createElement("input");
+		input.type = "checkbox";
+		input.value = option.name;
+		input.checked = option.checked;
+		input.disabled = !loaded;
+		input.addEventListener("change", () => {
+			if (input.checked) checked.add(option.name);
+			else checked.delete(option.name);
+			apply(options.filter((candidate) => checked.has(candidate.name)).map((candidate) => candidate.name));
+		});
+		item.append(input, peSpan("pe-skill-name", option.name));
+		if (option.installed === false) {
+			const tag = peSpan("pe-skill-missing", t("agents.skills.notInstalled"));
+			tag.setAttribute("data-tip-keep", "");
+			tag.setAttribute("data-tip", t("agents.skills.notInstalled.tip"));
+			item.append(tag);
+		}
+		if (option.description) {
+			// The full description is the row's page tooltip (web/tooltip.js); the line shows it clipped.
+			item.setAttribute("data-tip-keep", "");
+			item.setAttribute("data-tip", option.description);
+			item.append(peSpan("pe-skill-desc", option.description));
+		}
+		list.append(item);
+	}
+	list.append(noMatch);
+	box.append(list);
+	return box;
+}
+
+/**
+ * A prohibited field (agent-ux todo 8): its label, a switch that stays off and cannot be turned on, and the reason as
+ * visible text the switch is described by. Prohibited rows that share one reason share one paragraph: [helpId] names
+ * it and [drawHelp] says whether this row draws it (the last row of the run does). Nothing here touches the editor state,
+ * so the saved source never carries a value for the field.
+ */
+function renderForbiddenRow(row, helpId, drawHelp) {
+	const wrap = document.createElement("div");
+	wrap.className = "pe-row pe-forbidden";
+	wrap.dataset.field = row.name;
+	const id = `pe-field-${row.name.replaceAll(".", "-")}`;
+	const label = document.createElement("label");
+	label.className = "pe-label";
+	label.htmlFor = id;
+	label.textContent = row.label;
+	const control = document.createElement("div");
+	control.className = "pe-control";
+	const line = document.createElement("div");
+	line.className = "pe-control-line";
+	const holder = document.createElement("div");
+	holder.className = "pe-toggle";
+	const toggle = document.createElement("button");
+	toggle.type = "button";
+	toggle.className = "switch";
+	toggle.id = id;
+	toggle.setAttribute("role", "switch");
+	toggle.setAttribute("aria-checked", "false");
+	toggle.setAttribute("aria-disabled", "true");
+	toggle.disabled = true;
+	toggle.setAttribute("aria-describedby", helpId);
+	holder.append(toggle, peSpan("", t("common.offShort")));
+	line.append(holder);
+	control.append(line);
+	if (drawHelp) {
+		const help = document.createElement("p");
+		help.className = "pe-help";
+		help.id = helpId;
+		help.textContent = row.help;
+		control.append(help);
+	}
+	wrap.append(label, control);
+	return wrap;
+}
+
 function peClearButton(wrap, name, id) {
 	const clear = peButton(t("agents.clearOverride"), () => {
-		agentView.editor = clearField(agentView.editor, name);
+		commitEditor(clearField(agentView.editor, name));
 		const row = editorRows(agentView.editor).find((r) => r.kind === "field" && r.name === name);
 		if (row) wrap.replaceWith(renderEditorRow(row));
 	}, `${id}-clear`, "pe-clear");
@@ -4867,42 +6385,750 @@ function refreshEditorRow(wrap, name) {
 	const clear = wrap.querySelector(".pe-clear");
 	if (row.clearable && !clear && origin) origin.after(peClearButton(wrap, name, `pe-field-${name.replaceAll(".", "-")}`));
 	else if (!row.clearable && clear) clear.remove();
+	const toggleSwitch = wrap.querySelector(".pe-toggle .switch");
+	if (toggleSwitch) renderSwitch(toggleSwitch, row.value === true);
 	const toggleText = wrap.querySelector(".pe-toggle span");
 	if (toggleText) toggleText.textContent = t(row.value === true ? "common.onShort" : "common.offShort");
 	const select = wrap.querySelector("select.pe-select");
 	if (select?.options[0]) select.options[0].textContent = t(row.own ? "agents.clearOption" : "agents.inheritOption");
 }
 
+/**
+ * The how-to-write box above the role instructions (agent-ux todo 9): a native disclosure with the four headings the body
+ * should cover (web/agents.js roleGuideItems), open while creating an agent and folded in an existing agent's editor.
+ */
+function renderRoleGuide(open) {
+	const guide = document.createElement("details");
+	guide.className = "pe-guide";
+	guide.id = "pe-role-guide";
+	guide.open = open;
+	const summary = document.createElement("summary");
+	summary.textContent = t("agents.roleGuide.title");
+	const list = document.createElement("ul");
+	for (const item of roleGuideItems()) {
+		const li = document.createElement("li");
+		li.dataset.item = item.key;
+		const label = document.createElement("b");
+		label.textContent = item.label;
+		li.append(label, `: ${item.text}`);
+		list.append(li);
+	}
+	guide.append(summary, list);
+	return guide;
+}
+
+/**
+ * The knowledge file section (agent-ux todo 15): three blocks, each headed by its name and its knowledge/ path - 올린 자료
+ * (the upload zone and the source/ files), 결과물 (outputs/) and 기록 (MEMORY.md and notes/, read-only, with the newest daily
+ * note date). Uploads apply at once; the note says so.
+ */
 function renderAgentFiles(id) {
 	const section = peSection(t("agents.files"), t("agents.files.note"));
+	const areas = fileAreas(agentView.files);
+	const blocks = document.createElement("div");
+	blocks.className = "pe-areas";
+	blocks.id = "pe-files";
+	const source = renderFileArea("source", "knowledge/source/", areas.source, id);
+	source.insertBefore(renderUploadZone({ id: "pe-source-upload", label: t("agents.sourceFile.label"), rows: uploadQueue(id), onFiles: (files) => void uploadAgentSources(id, files), onRetry: (key) => retryAgentUpload(id, key) }), source.lastElementChild);
+	const notes = renderFileArea("notes", "notes/, MEMORY.md", areas.notes, id);
+	const daily = document.createElement("p");
+	daily.className = "pe-last-daily";
+	daily.id = "pe-last-daily";
+	daily.append(peSpan("", lastDailyLine(agentView.lastDaily)), infoTipButton(t("agents.lastDaily.tip")));
+	notes.append(daily);
+	blocks.append(source, renderFileArea("outputs", "knowledge/outputs/", areas.outputs, id), notes);
+	section.append(blocks, renderFileTrash(id, agentView.fileTrash));
+	return section;
+}
+
+/**
+ * The create screen's 올린 자료 block (agent-ux todo 18): the same zone, but the picked files wait in the browser as queued
+ * rows (만들기 뒤 올립니다) until the create request answered; only their names and sizes go to the draft.
+ */
+function renderNewAgentFiles() {
+	const section = peSection(t("agents.area.source"), t("agents.newFiles.note"));
+	section.append(renderUploadZone({ id: "pe-new-upload", label: t("agents.sourceFile.label"), rows: agentView.editor?.pendingUploads ?? [], onFiles: queueNewAgentFiles }));
+	return section;
+}
+
+/** The picked files join the create screen's own queue, on its editor state, and the draft autosave gets that state (todo 18 fix). */
+function queueNewAgentFiles(files) {
+	const editor = agentView.editor;
+	if (editor?.kind !== "new") return;
+	agentView.editor = { ...editor, pendingUploads: [...(editor.pendingUploads ?? []), ...queuedUploadRows(files)] };
+	redrawUploadRows("pe-new-upload", agentView.editor.pendingUploads, null);
+	if (agentView.editor.draftId) draftAutosave.touch(agentView.editor);
+}
+
+/** The file section drawn again in place after a file action (the rest of the form, and what is typed in it, stays). */
+function redrawAgentFiles(id) {
+	document.getElementById("pe-files")?.closest(".pe-section")?.replaceWith(renderAgentFiles(id));
+}
+
+/** The file list and the deleted files read again after an action (todo 16); a failure keeps the lists as they were. */
+async function refreshKnowledge(id) {
+	const [files, trash] = await Promise.all([agentApi({ method: "GET", path: filesPath(id) }), agentApi({ method: "GET", path: fileTrashPath(id) })]);
+	if (agentView.editor?.id !== id) return;
+	agentView.files = fileRows(files);
+	agentView.fileTrash = fileTrashRows(trash);
+}
+
+/** After that agent's turn ended (todo 17): the lists and the last daily note date are read again and the section redrawn; a failure leaves it as it was. */
+async function refreshKnowledgeAfterTurn(id) {
+	try {
+		const detail = await agentApi({ method: "GET", path: `${AGENTS_PATH}/${encodeURIComponent(id)}` });
+		await refreshKnowledge(id);
+		if (agentView.editor?.id !== id) return;
+		agentView.lastDaily = typeof detail.lastDaily === "string" ? detail.lastDaily : null;
+		redrawAgentFiles(id);
+	} catch (error) {
+		console.warn("agent files refresh:", error);
+	}
+}
+
+/**
+ * 내려받기 (todo 17): the file is fetched first so a refusal (a file deleted meanwhile, 404) becomes a sentence and a fresh
+ * list instead of a saved error body; a good answer is saved through a blob link with the file's own name.
+ */
+async function downloadKnowledgeFile(id, file) {
+	let res;
+	try {
+		res = await fetch(downloadPath(id, file.path));
+	} catch (error) {
+		showAgentStatus(t("agents.file.download.failed", { name: file.name, reason: error instanceof Error ? error.message : String(error) }), "error");
+		return;
+	}
+	if (!res.ok) {
+		const body = await res.json().catch(() => null);
+		showAgentStatus(t("agents.file.download.failed", { name: file.name, reason: errorLine(body, res.status) }), "error");
+		await refreshKnowledge(id).catch(() => {});
+		if (agentView.editor?.id === id) redrawAgentFiles(id);
+		return;
+	}
+	const url = URL.createObjectURL(await res.blob());
+	const link = document.createElement("a");
+	link.href = url;
+	link.download = file.name;
+	document.body.append(link);
+	link.click();
+	link.remove();
+	URL.revokeObjectURL(url);
+}
+
+function trashIcon() {
+	const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+	svg.setAttribute("viewBox", "0 0 16 16");
+	svg.setAttribute("width", "13");
+	svg.setAttribute("height", "13");
+	svg.setAttribute("aria-hidden", "true");
+	const glyph = document.createElementNS("http://www.w3.org/2000/svg", "path");
+	glyph.setAttribute("fill", "currentColor");
+	glyph.setAttribute("d", "M6 1h4l1 1.5h3V5H2V2.5h3L6 1zM3 6h10l-1 9H4L3 6z");
+	svg.append(glyph);
+	return svg;
+}
+
+/**
+ * One block of the file section: the area's name, its path as a code tag, the info tooltip with the detail, and its rows. A
+ * source/ or outputs/ file carries a 삭제 button (todo 16); pressing it opens the confirmation under that row.
+ */
+function renderFileArea(area, path, rows, id) {
+	const block = document.createElement("div");
+	block.className = `pe-area pe-area-${area}`;
+	block.id = `pe-area-${area}`;
+	const head = document.createElement("div");
+	head.className = "pe-area-head";
+	const code = document.createElement("code");
+	code.className = "pe-area-path";
+	code.textContent = path;
+	head.append(peSpan("pe-area-title", t(`agents.area.${area}`)), code, infoTipButton(t(`agents.area.${area}.tip`)));
 	const list = document.createElement("ul");
 	list.className = "pe-files";
-	list.id = "pe-files";
-	if (agentView.files.length === 0) {
+	list.id = `pe-files-${area}`;
+	if (rows.length === 0) {
 		const empty = document.createElement("li");
 		empty.className = "pe-empty";
-		empty.textContent = EMPTY_FILES_LINE;
+		// An empty 결과물 block says how results get there (todo 17).
+		empty.textContent = area === "outputs" ? t("agents.outputs.empty") : t("agents.files.none");
 		list.append(empty);
 	}
-	for (const file of agentView.files) {
+	for (const file of rows) {
 		const li = document.createElement("li");
 		li.className = "pe-file";
+		li.dataset.path = file.path;
 		const name = peSpan(`pe-file-name ${file.type}`, `${"\u00a0\u00a0".repeat(file.depth)}${file.type === "directory" ? `${file.name}/` : file.name}`);
 		name.title = file.path;
-		li.append(name, peSpan("pe-file-size", file.label));
+		li.append(name);
+		const originTag = fileOriginLabel(file);
+		if (originTag) {
+			const tag = peSpan(`pe-file-origin ${originTag.origin}`, originTag.text);
+			// Not a kept-tip spot (web/tooltip.js, bug 161): the explanation becomes the tag's aria-description.
+			tag.title = originTag.tip;
+			li.append(tag);
+		}
+		const modified = modifiedLabel(file.modifiedAt, uiLocale());
+		if (modified) li.append(peSpan("pe-file-time", modified));
+		li.append(peSpan("pe-file-size", file.label));
+		if (downloadable(file)) {
+			const link = document.createElement("a");
+			link.className = "text-btn pe-file-download";
+			link.href = downloadPath(id, file.path);
+			link.download = file.name;
+			link.textContent = t("agents.file.download");
+			link.dataset.act = "download-file";
+			link.setAttribute("aria-label", t("agents.file.download.label", { name: file.name }));
+			link.addEventListener("click", (ev) => {
+				ev.preventDefault();
+				void downloadKnowledgeFile(id, file);
+			});
+			li.append(link);
+		}
+		if (deletableFile(file)) {
+			const remove = peButton(t("agents.file.delete"), () => {
+				agentView.fileConfirm = agentView.fileConfirm === file.path ? null : file.path;
+				redrawAgentFiles(id);
+				document.querySelector(`.pe-file-confirm [data-act="${agentView.fileConfirm === null ? "delete-file" : "keep-file"}"]`)?.focus();
+			}, null, "text-btn danger pe-file-delete", "delete-file-open");
+			remove.prepend(trashIcon());
+			remove.setAttribute("aria-label", t("agents.file.delete.label", { name: file.name }));
+			remove.setAttribute("aria-expanded", String(agentView.fileConfirm === file.path));
+			li.append(remove);
+		}
+		list.append(li);
+		if (agentView.fileConfirm === file.path) list.append(renderFileConfirm(id, file));
+	}
+	block.append(head, list);
+	return block;
+}
+
+/** The in-row confirmation under a file (the inbox-dismiss box the agent delete uses): what the archive means, then 삭제 or 취소. */
+function renderFileConfirm(id, file) {
+	const li = document.createElement("li");
+	li.className = "pe-file-confirm-row";
+	const box = document.createElement("div");
+	box.className = "inbox-dismiss mode-cancel pe-file-confirm";
+	box.dataset.path = file.path;
+	const text = document.createElement("p");
+	text.className = "inbox-dismiss-text";
+	text.textContent = fileDeleteText(file);
+	const buttons = document.createElement("div");
+	buttons.className = "pe-actions";
+	const confirm = peButton(t("agents.file.delete"), () => void deleteKnowledgeFile(id, file.path), null, "text-btn danger", "delete-file");
+	confirm.setAttribute("aria-label", t("agents.file.delete.label", { name: file.name }));
+	const keep = peButton(t("common.cancel"), () => {
+		agentView.fileConfirm = null;
+		redrawAgentFiles(id);
+		document.querySelector(`.pe-file[data-path="${CSS.escape(file.path)}"] .pe-file-delete`)?.focus();
+	}, null, "text-btn", "keep-file");
+	buttons.append(confirm, keep);
+	box.append(text, buttons);
+	li.append(box);
+	return li;
+}
+
+/** The 삭제한 파일 disclosure under the blocks: the archived files of this agent with 되살리기, and what happens after 30 days. */
+function renderFileTrash(id, rows) {
+	const details = document.createElement("details");
+	details.className = "pe-guide pe-file-trash";
+	details.id = "pe-file-trash";
+	details.open = agentView.fileTrashOpen;
+	details.addEventListener("toggle", () => { agentView.fileTrashOpen = details.open; });
+	const summary = document.createElement("summary");
+	summary.textContent = fileTrashLabel(rows.length);
+	const note = document.createElement("p");
+	note.className = "pe-note";
+	note.textContent = t("agents.files.trash.note");
+	const list = document.createElement("ul");
+	list.className = "pe-files pe-file-trash-list";
+	list.id = "pe-file-trash-list";
+	if (rows.length === 0) {
+		const empty = document.createElement("li");
+		empty.className = "pe-empty";
+		empty.textContent = t("agents.files.trash.empty");
+		list.append(empty);
+	}
+	for (const row of rows) {
+		const li = document.createElement("li");
+		li.className = "pe-file pe-file-trash-row";
+		li.dataset.entry = row.entry;
+		const name = peSpan("pe-file-name", row.path);
+		name.title = row.path;
+		const when = peSpan("pe-file-size", row.deletedAt ? `${row.label}${t("agents.deletedAt", { time: new Date(row.deletedAt).toLocaleString(uiLocale()) })}` : row.label);
+		const restore = peButton(t("agents.file.restore"), () => void restoreKnowledgeFile(id, row.entry), null, "text-btn", "restore-file");
+		restore.setAttribute("aria-label", t("agents.file.restore.label", { name: row.name }));
+		li.append(name, when, restore);
 		list.append(li);
 	}
-	const upload = document.createElement("div");
-	upload.className = "pe-upload";
+	details.append(summary, note, list);
+	return details;
+}
+
+/** POST files/delete (todo 2): the file moves to this agent's archive; both lists are read again and the line says how to get it back. */
+async function deleteKnowledgeFile(id, path) {
+	const name = path.slice(path.lastIndexOf("/") + 1);
+	for (const button of document.querySelectorAll(".pe-file-confirm .text-btn")) button.disabled = true;
+	try {
+		await agentApi(fileDeleteRequest(id, path));
+		agentView.fileConfirm = null;
+		await refreshKnowledge(id);
+		showAgentStatus(t("agents.file.deleted", { name }), "ok");
+	} catch (error) {
+		showAgentStatus(error.message, "error");
+	}
+	if (agentView.editor?.id === id) redrawAgentFiles(id);
+}
+
+/** POST files/trash/<entry>/restore (todo 2): the file returns to its folder (under a new name when the old one is taken again). */
+async function restoreKnowledgeFile(id, entry) {
+	for (const button of document.querySelectorAll(".pe-file-trash-row .text-btn")) button.disabled = true;
+	try {
+		const result = await agentApi(fileRestoreRequest(id, entry));
+		await refreshKnowledge(id);
+		showAgentStatus(t("agents.file.restored", { path: typeof result?.path === "string" ? result.path : entry }), "ok");
+	} catch (error) {
+		showAgentStatus(error.message, "error");
+	}
+	if (agentView.editor?.id === id) redrawAgentFiles(id);
+}
+
+/**
+ * The upload component (agent-ux todo 14): a dashed drop zone with the styled 파일 고르기 button over a hidden `multiple`
+ * file input (the browser's own control is never shown), a drag highlight, and one progress row per queued file (name,
+ * size, bar, state word with its icon, 다시 시도 on a refused upload). The caller keeps the queue (web/agents.js uploadRows)
+ * and gets the picked FileList in onFiles and a failed row's key in onRetry.
+ */
+function renderUploadZone({ id, label, onFiles, onRetry = null, rows = [], multiple = true }) {
+	const zone = document.createElement("div");
+	zone.className = "pe-upload-zone";
+	zone.id = id;
 	const input = document.createElement("input");
 	input.type = "file";
-	input.id = "pe-source-file";
-	input.setAttribute("aria-label", t("agents.sourceFile.label"));
-	upload.append(input, peButton(t("agents.sourceUpload"), () => void uploadAgentSource(id, input), "pe-source-upload"));
-	section.append(list, upload);
+	input.multiple = multiple;
+	input.hidden = true;
+	input.id = `${id}-input`;
+	input.setAttribute("aria-label", label);
+	input.addEventListener("change", () => {
+		if (input.files?.length) onFiles(input.files);
+		input.value = "";
+	});
+	const prompt = document.createElement("div");
+	prompt.className = "pe-upload-prompt";
+	const pick = peButton(t("agents.upload.pick"), () => input.click(), `${id}-pick`, "text-btn pe-upload-pick");
+	pick.setAttribute("data-tip-keep", "");
+	pick.setAttribute("data-tip", t("agents.upload.pick.tip", { max: formatBytes(UPLOAD_MAX_BYTES) }));
+	prompt.append(peSpan("pe-upload-hint", t("agents.upload.drop")), pick);
+	zone.append(input, prompt);
+	// Files dragged over the zone: the chat and the memo accept a drop the same way (dragover preventDefault, then drop);
+	// the zone also shows it. The depth counter keeps the highlight while the pointer crosses the zone's children.
+	const draggingFiles = (ev) => [...(ev.dataTransfer?.types ?? [])].includes("Files");
+	let depth = 0;
+	zone.addEventListener("dragenter", (ev) => {
+		if (!draggingFiles(ev)) return;
+		ev.preventDefault();
+		depth += 1;
+		zone.classList.toggle("dragging", true);
+	});
+	zone.addEventListener("dragover", (ev) => {
+		if (!draggingFiles(ev)) return;
+		ev.preventDefault();
+		zone.classList.toggle("dragging", true);
+	});
+	zone.addEventListener("dragleave", () => {
+		depth = Math.max(0, depth - 1);
+		if (depth === 0) zone.classList.toggle("dragging", false);
+	});
+	zone.addEventListener("drop", (ev) => {
+		if (!ev.dataTransfer?.files?.length) return;
+		ev.preventDefault();
+		depth = 0;
+		zone.classList.toggle("dragging", false);
+		onFiles(ev.dataTransfer.files);
+	});
+	zone.append(renderUploadRows(id, rows, onRetry));
+	return zone;
+}
+
+/** The queue rows of one zone: drawn by renderUploadZone and replaced in place while an upload runs (the form is not rebuilt). */
+function renderUploadRows(zoneId, rows, onRetry) {
+	const list = document.createElement("ul");
+	list.className = "pe-upload-rows";
+	list.id = `${zoneId}-rows`;
+	list.setAttribute("aria-label", t("agents.upload.rows.label"));
+	list.hidden = rows.length === 0;
+	for (const row of rows) {
+		const li = document.createElement("li");
+		li.className = `pe-upload-row ${row.status}`;
+		li.dataset.key = row.key;
+		const head = document.createElement("div");
+		head.className = "pe-upload-head";
+		const name = peSpan("pe-file-name", row.name);
+		name.title = row.name;
+		const state = peSpan(`pe-upload-state ${row.status}`, uploadStateLine(row));
+		state.setAttribute("role", "status");
+		head.append(name, peSpan("pe-file-size", formatBytes(row.size)), state);
+		// 다시 시도 only where a new request could succeed: a file the web itself refused stays failed (retryUpload says so).
+		if (onRetry && row.status === "failed" && retryUpload([row], row.key)[0].status === "waiting") {
+			const retry = peButton(t("agents.upload.retry"), () => onRetry(row.key), null, "text-btn pe-upload-retry", "retry");
+			retry.setAttribute("aria-label", t("agents.upload.retry.label", { name: row.name }));
+			head.append(retry);
+		}
+		const bar = document.createElement("div");
+		bar.className = "pe-upload-bar";
+		bar.setAttribute("role", "progressbar");
+		bar.setAttribute("aria-label", t("agents.upload.progress.label", { name: row.name }));
+		bar.setAttribute("aria-valuemin", "0");
+		bar.setAttribute("aria-valuemax", "100");
+		bar.setAttribute("aria-valuenow", String(Math.round(row.progress * 100)));
+		const fill = document.createElement("div");
+		fill.className = "pe-upload-fill";
+		fill.style.width = `${Math.round(row.progress * 100)}%`;
+		bar.append(fill);
+		li.append(head, bar);
+		list.append(li);
+	}
+	return list;
+}
+
+/** One zone's rows redrawn from the queue; nothing happens when the zone is not on the page any more. */
+function redrawUploadRows(zoneId, rows, onRetry) {
+	document.getElementById(`${zoneId}-rows`)?.replaceWith(renderUploadRows(zoneId, rows, onRetry));
+}
+
+/**
+ * POST one file as multipart through XMLHttpRequest (fetch cannot report upload progress). Resolves the gateway's JSON
+ * answer; a refusal rejects like agentApi (the UI line as the message, `code` and `status` on the error), a request that
+ * never got an answer with `network: true`.
+ */
+function uploadWithProgress(path, file, onProgress) {
+	return new Promise((resolve, reject) => {
+		const xhr = new XMLHttpRequest();
+		xhr.open("POST", path);
+		xhr.responseType = "json";
+		xhr.upload.onprogress = (ev) => {
+			if (ev.lengthComputable && ev.total > 0) onProgress(ev.loaded / ev.total);
+		};
+		xhr.onload = () => {
+			const body = xhr.response;
+			if (xhr.status >= 200 && xhr.status < 300) resolve(body);
+			else reject(Object.assign(new Error(errorLine(body, xhr.status)), { code: typeof body?.error === "string" ? body.error : null, field: null, status: xhr.status, network: false }));
+		};
+		xhr.onerror = () => reject(Object.assign(new Error(t("agents.upload.network")), { code: null, field: null, status: 0, network: true }));
+		xhr.onabort = xhr.onerror;
+		const form = new FormData();
+		form.append("file", file, file.name);
+		xhr.send(form);
+	});
+}
+
+/**
+ * The 도구 권한 section of an agent's editor (294 C8/C10): one agent at a time, its loaded page
+ * (GET /api/agents/:id/tool-permissions), the grants busy with a request, the open scope drafts and the revoke-all
+ * confirmation. Drafts survive a reload; a conflict shows the current content beside the draft.
+ */
+const agentToolView = { agentId: null, status: "idle", page: null, note: null, busy: new Set(), editing: new Map(), confirmAll: false, seq: 0 };
+
+function refreshToolPermissions() {
+	if (agentToolView.agentId) document.getElementById("pe-tools")?.replaceWith(renderToolPermissions(agentToolView.agentId));
+}
+
+function renderToolPermissions(agentId) {
+	const view = agentToolView;
+	if (view.agentId !== agentId) {
+		Object.assign(view, { agentId, status: "loading", page: null, note: null, busy: new Set(), editing: new Map(), confirmAll: false });
+		void loadToolPermissions(agentId, { force: false });
+	}
+	const section = peSection(t("agents.tool.title"), t("agents.tool.note"));
+	section.id = "pe-tools";
+	section.classList.add("pe-tools");
+	section.setAttribute("aria-busy", String(view.status === "loading"));
+	const status = make("p", `pe-tool-status${view.note?.error ? " error" : ""}`,
+		view.status === "loading" ? t("agents.tool.loading") : view.status === "unsupported" ? t("agents.tool.unsupported") : view.note?.text ?? "");
+	status.setAttribute("role", "status");
+	section.append(status);
+	if (view.status === "failed") section.append(peButton(t("agents.tool.retry"), () => void loadToolPermissions(agentId, { force: true }), null, "text-btn pe-tool-retry"));
+	const page = view.page;
+	if (!page) return section;
+	section.append(make("p", "pe-note pe-tool-summary", accessSummary(page.policy)));
+	const pending = Array.isArray(page.pending) ? page.pending.length : 0;
+	if (pending > 0) {
+		const line = make("p", "pe-note pe-tool-pending", t("agents.tool.pending", { count: pending }));
+		line.append(peButton(t("agents.tool.openInbox"), () => openInbox(), null, "link-btn"));
+		section.append(line);
+	}
+	const rows = toolGrantRows(page, { toolName, operationLabel, scopeText });
+	if (rows.length === 0) section.append(make("p", "pe-empty", t("agents.tool.empty")));
+	else {
+		const list = make("ul", "pe-list pe-tool-list");
+		for (const row of rows) list.append(renderToolGrantRow(agentId, row, page));
+		section.append(list);
+	}
+	const all = make("div", "pe-tool-all");
+	const revokeAll = peButton(t("agents.tool.revokeAll"), () => {
+		view.confirmAll = true;
+		refreshToolPermissions();
+		document.getElementById("pe-tools")?.querySelector(".pe-tool-all-confirm .text-btn")?.focus();
+	}, "pe-tool-revoke-all", "text-btn danger");
+	revokeAll.disabled = page.policy?.accessState === "blocked" || view.busy.has("all") || rows.every((row) => row.state === "revoked");
+	all.append(revokeAll);
+	if (view.confirmAll && !revokeAll.disabled) {
+		const confirm = make("div", "inbox-dismiss mode-cancel pe-tool-all-confirm");
+		confirm.append(make("p", "inbox-dismiss-text", t("agents.tool.all.confirm")));
+		const actions = make("div", "pe-actions");
+		actions.append(
+			peButton(t("agents.tool.all.keep"), () => {
+				view.confirmAll = false;
+				refreshToolPermissions();
+			}, null, "text-btn"),
+			peButton(t("agents.tool.all.go"), () => void revokeAllGrants(agentId), null, "text-btn danger"),
+		);
+		confirm.append(actions);
+		all.append(confirm);
+	}
+	section.append(all);
 	return section;
 }
 
+/** One grant: tool, state chip, operations and target, the original confirmation, the role=switch (off = revoke at once) and the row actions. */
+function renderToolGrantRow(agentId, row, page) {
+	const view = agentToolView;
+	const grant = page.items.find((item) => item.id === row.id);
+	const busy = view.busy.has(row.id);
+	const off = row.state === "revoked" || row.state === "blocked";
+	const li = make("li", "pe-list-row pe-tool-row");
+	li.dataset.grant = row.id;
+	li.setAttribute("aria-busy", String(busy));
+	const main = make("div", "pe-list-main pe-tool-main");
+	const name = make("div", "pe-list-name pe-tool-name", row.tool);
+	name.append(make("span", `inbox-chip chip-${row.state}`, row.stateLabel));
+	main.append(name, make("div", "pe-list-sub pe-tool-sub", [row.operation, row.target].filter(Boolean).join(" · ")));
+	main.append(make("div", "pe-tool-meta", t("agents.tool.meta", { decision: row.origin, revision: row.revision })));
+	li.append(main);
+	const holder = make("div", "pe-tool-switch");
+	const toggle = make("button", "switch");
+	toggle.type = "button";
+	toggle.id = `pe-tool-switch-${row.id}`;
+	toggle.setAttribute("role", "switch");
+	toggle.setAttribute("aria-label", t("agents.tool.switch.label", { tool: row.tool }));
+	renderSwitch(toggle, !off, busy || off);
+	holder.append(toggle, make("span", null, t(off ? "common.offShort" : "common.onShort")));
+	li.append(holder);
+	if (off) {
+		// Back on is not a switch flip: the agent's next request is allowed in the inbox (C8).
+		const why = make("p", "pe-note pe-tool-reallow", t("agents.tool.reallow"));
+		why.id = `pe-tool-reallow-${row.id}`;
+		toggle.setAttribute("aria-describedby", why.id);
+		li.append(why);
+		return li;
+	}
+	toggle.onclick = () => void revokeGrant(agentId, grant);
+	const actions = make("div", "pe-list-actions pe-tool-actions");
+	const edit = peButton(t("agents.tool.edit"), () => {
+		if (view.editing.has(row.id)) view.editing.delete(row.id);
+		else view.editing.set(row.id, scopeDraft(grant));
+		refreshToolPermissions();
+	}, null, "text-btn");
+	edit.disabled = busy;
+	edit.setAttribute("aria-expanded", String(view.editing.has(row.id)));
+	const revoke = peButton(t("agents.tool.revoke"), () => void revokeGrant(agentId, grant), null, "text-btn");
+	revoke.disabled = busy;
+	actions.append(edit, revoke);
+	li.append(actions);
+	if (view.editing.has(row.id)) li.append(renderScopeEditor(agentId, grant, row));
+	return li;
+}
+
+/** The edit line: the kind of change (C8) and the exact operations and values it adds or removes. */
+function diffLine(grant, edit) {
+	const parts = [editLine(edit.kind)];
+	const operations = (list) => list.map((operation) => operationLabel(grant.toolKey, operation)).join(", ");
+	const values = (scope) => Object.entries(scope).map(([key, list]) => `${key} ${list.join(", ")}`).join("; ");
+	if (edit.added.operations.length) parts.push(t("agents.tool.edit.addedOps", { list: operations(edit.added.operations) }));
+	if (Object.keys(edit.added.scope).length) parts.push(t("agents.tool.edit.addedScope", { list: values(edit.added.scope) }));
+	if (edit.removed.operations.length) parts.push(t("agents.tool.edit.removedOps", { list: operations(edit.removed.operations) }));
+	if (Object.keys(edit.removed.scope).length) parts.push(t("agents.tool.edit.removedScope", { list: values(edit.removed.scope) }));
+	return parts.join(" ");
+}
+
+/**
+ * The inline scope editor of one grant: the granted operations as role=switch rows (off narrows) and every list value
+ * of the scope as text (fewer values narrow, more widen). The diff line and the save button update in place, so typing
+ * never redraws the field under the caret.
+ */
+function renderScopeEditor(agentId, grant, row) {
+	const view = agentToolView;
+	const draft = view.editing.get(row.id);
+	const box = make("div", "pe-tool-edit");
+	box.setAttribute("role", "group");
+	box.setAttribute("aria-label", t("agents.tool.edit"));
+	const diff = make("p", "pe-note pe-tool-diff");
+	const save = peButton(t("common.save"), () => void submitScopeEdit(agentId, grant), null, "text-btn primary");
+	const update = () => {
+		const edit = classifyEdit(grant, draft);
+		diff.textContent = diffLine(grant, edit);
+		diff.classList.toggle("widen", edit.kind === "widen");
+		save.disabled = edit.kind === "same" || view.busy.has(row.id);
+	};
+	const ops = make("div", "pe-tool-ops");
+	ops.append(make("div", "pe-tool-edit-label", t("agents.tool.edit.operations")));
+	for (const operation of row.operations) {
+		const line = make("div", "switch-row pe-tool-op");
+		const toggle = make("button", "switch");
+		toggle.type = "button";
+		toggle.id = `pe-tool-op-${row.id}-${operation}`;
+		toggle.setAttribute("role", "switch");
+		toggle.dataset.operation = operation;
+		const on = () => draft.operations.includes(operation);
+		renderSwitch(toggle, on());
+		toggle.onclick = () => {
+			draft.operations = on() ? draft.operations.filter((entry) => entry !== operation) : row.operations.filter((entry) => entry === operation || draft.operations.includes(entry));
+			renderSwitch(toggle, on());
+			update();
+		};
+		const label = make("label", "switch-label", operationLabel(grant.toolKey, operation));
+		label.htmlFor = toggle.id;
+		line.append(toggle, label);
+		ops.append(line);
+	}
+	box.append(ops);
+	for (const [key, text] of Object.entries(draft.text)) {
+		const field = make("label", "pe-tool-scope-field");
+		field.append(make("span", "pe-tool-edit-label", t("agents.tool.edit.scope", { key })));
+		const area = make("textarea", "pe-textarea pe-tool-scope");
+		area.rows = 2;
+		area.value = text;
+		area.setAttribute("aria-label", key);
+		area.addEventListener("input", () => {
+			draft.text[key] = area.value;
+			draft.scope[key] = parseScopeText(area.value);
+			update();
+		});
+		field.append(area);
+		box.append(field);
+	}
+	const actions = make("div", "pe-actions pe-tool-edit-actions");
+	actions.append(save, peButton(t("common.cancel"), () => {
+		view.editing.delete(row.id);
+		refreshToolPermissions();
+	}, null, "text-btn"));
+	box.append(diff, actions);
+	update();
+	return box;
+}
+
+async function loadToolPermissions(agentId, { force = false } = {}) {
+	const view = agentToolView;
+	if (view.agentId !== agentId) return;
+	const seq = ++view.seq;
+	view.status = "loading";
+	if (force) view.note = null;
+	refreshToolPermissions();
+	const request = toolPermissionsRequest(agentId);
+	let answer = await agentToolFetch(request.path, { method: "GET" });
+	// A read may take the renewed session once; a POST never repeats by itself.
+	if (answer.client && answer.status === 403 && clientExpired(answer.body?.error)) answer = await agentToolFetch(request.path, { method: "GET" });
+	if (view.agentId !== agentId || seq !== view.seq) return;
+	if (!answer.client) {
+		view.status = "failed";
+		view.note = { text: t(agentToolClientRefused ? "agents.tool.error.forbidden" : "agents.tool.error.network"), error: true };
+	} else {
+		const result = interpretPermissionResponse(answer.status, answer.body);
+		if (result.kind === "ok") {
+			view.status = "ready";
+			view.page = answer.body;
+		} else if (result.kind === "unsupported") {
+			view.status = "unsupported";
+			view.page = null;
+		} else {
+			view.status = "failed";
+			view.note = { text: toolPermissionErrorLine(result.error ?? null, answer.status), error: true };
+		}
+	}
+	refreshToolPermissions();
+}
+
+function toolPermissionFailure(answer) {
+	if (!answer.client) return t(agentToolClientRefused ? "agents.tool.error.forbidden" : "agents.tool.error.network");
+	const result = interpretPermissionResponse(answer.status, answer.body);
+	return toolPermissionErrorLine(result.error ?? null, answer.status);
+}
+
+const RELOAD_AFTER = new Set(["conflict", "stale", "gone"]);
+
+/** OFF on the switch or 권한 회수: revoked at once, no second confirmation (C8); the gateway's answer names any running work. */
+async function revokeGrant(agentId, grant) {
+	const view = agentToolView;
+	if (!grant || view.agentId !== agentId || view.busy.has(grant.id)) return;
+	view.busy.add(grant.id);
+	view.note = null;
+	refreshToolPermissions();
+	const request = revokeRequest(agentId, grant, crypto.randomUUID());
+	const answer = await agentToolFetch(request.path, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(request.body) });
+	view.busy.delete(grant.id);
+	if (view.agentId !== agentId) return;
+	const result = answer.client ? interpretPermissionResponse(answer.status, answer.body) : { kind: "network" };
+	if (result.kind === "ok") {
+		view.page = applyRevoke(view.page, grant.id, answer.body);
+		view.editing.delete(grant.id);
+		view.note = { text: revokeLine(answer.body), error: false };
+		refreshToolPermissions();
+		return;
+	}
+	view.note = { text: toolPermissionFailure(answer), error: true };
+	if (RELOAD_AFTER.has(result.kind)) void loadToolPermissions(agentId);
+	else refreshToolPermissions();
+}
+
+/** C10 revoke-all after the inline confirmation: every grant revoked, new requests blocked until the inbox allows one. */
+async function revokeAllGrants(agentId) {
+	const view = agentToolView;
+	if (view.agentId !== agentId || !view.page || view.busy.has("all")) return;
+	view.busy.add("all");
+	view.confirmAll = false;
+	view.note = null;
+	refreshToolPermissions();
+	const request = revokeAllRequest(agentId, view.page.policy, crypto.randomUUID());
+	const answer = await agentToolFetch(request.path, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(request.body) });
+	view.busy.delete("all");
+	if (view.agentId !== agentId) return;
+	const result = answer.client ? interpretPermissionResponse(answer.status, answer.body) : { kind: "network" };
+	view.note = result.kind === "ok" ? { text: t("agents.tool.revokedAll"), error: false } : { text: toolPermissionFailure(answer), error: true };
+	if (result.kind === "ok" || RELOAD_AFTER.has(result.kind)) void loadToolPermissions(agentId);
+	else refreshToolPermissions();
+}
+
+/** POST .../edit: 200 narrowed and applied, 202 widened and sent to the inbox, 409 keeps the draft beside the reloaded content (C8). */
+async function submitScopeEdit(agentId, grant) {
+	const view = agentToolView;
+	const draft = view.editing.get(grant.id);
+	if (!draft || view.agentId !== agentId || view.busy.has(grant.id) || classifyEdit(grant, draft).kind === "same") return;
+	view.busy.add(grant.id);
+	view.note = null;
+	refreshToolPermissions();
+	const request = editRequest(agentId, grant, draft, crypto.randomUUID());
+	const answer = await agentToolFetch(request.path, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(request.body) });
+	view.busy.delete(grant.id);
+	if (view.agentId !== agentId) return;
+	const result = answer.client ? interpretPermissionResponse(answer.status, answer.body) : { kind: "network" };
+	if (result.kind === "ok" || result.kind === "confirm") {
+		const updated = result.kind === "ok" && answer.body && typeof answer.body === "object" ? answer.body.grant : null;
+		if (updated && typeof updated === "object" && view.page) {
+			const policyRevision = typeof answer.body.policyRevision === "number" ? answer.body.policyRevision : view.page.policy.policyRevision;
+			view.page = { ...view.page, items: view.page.items.map((item) => (item.id === grant.id ? updated : item)), policy: { ...view.page.policy, policyRevision } };
+		}
+		view.editing.delete(grant.id);
+		view.note = { text: t(result.kind === "ok" ? "agents.tool.edit.narrowed" : "agents.tool.edit.sent"), error: false };
+		refreshToolPermissions();
+		return;
+	}
+	view.note = { text: toolPermissionFailure(answer), error: true };
+	if (RELOAD_AFTER.has(result.kind)) void loadToolPermissions(agentId);
+	else refreshToolPermissions();
+}
+
+function receiveToolPermissionsEvent(data) {
+	if (agentToolView.agentId && policyEventStale(agentToolView.page, data)) void loadToolPermissions(agentToolView.agentId);
+}
+
 function renderAgentEditor() {
 	const editor = agentView.editor;
 	if (!editor) return;
@@ -4918,7 +7144,30 @@ function renderAgentEditor() {
 	const isDefaults = editor.kind === "defaults";
 	const fields = peSection(isDefaults ? t("agents.defaultsSection") : editor.kind === "new" ? t("agents.new") : t("agents.settingsFor", { name: editor.name ?? "" }),
 		t(isDefaults ? "agents.defaults.note" : "agents.editor.note"));
-	for (const row of editorRows(editor)) {
+	if (editor.kind === "new") {
+		// The draft line (todo 11): what the autosave did last; a reopened draft lists the files it had picked.
+		const note = document.createElement("p");
+		note.className = "pe-note";
+		note.textContent = t("agents.draft.note");
+		const status = document.createElement("p");
+		status.className = "pe-draft-status";
+		status.id = "pe-draft-status";
+		status.setAttribute("role", "status");
+		// A redraw keeps the last line; a reopened draft (it has text already) says so; a fresh screen says nothing yet.
+		status.textContent = document.getElementById("pe-draft-status")?.textContent ?? (Object.keys(editor.own).length > 0 || editor.body ? t("agents.draft.loaded") : "");
+		fields.append(note, status);
+		if (editor.draftFiles?.length) {
+			const files = document.createElement("p");
+			files.className = "pe-note pe-draft-files";
+			files.id = "pe-draft-files";
+			files.textContent = t("agents.draft.files", { names: editor.draftFiles.map((file) => file.name).join(", ") });
+			fields.append(files);
+		}
+	}
+	if (!isDefaults) fields.append(renderCapabilities());
+	const rows = editorRows(editor);
+	for (let index = 0; index < rows.length; index += 1) {
+		const row = rows[index];
 		if (row.kind === "group") {
 			const group = document.createElement("div");
 			group.className = "section-label pe-group";
@@ -4927,18 +7176,25 @@ function renderAgentEditor() {
 			fields.append(group);
 			continue;
 		}
+		if (row.kind === "forbidden") {
+			// Consecutive prohibited rows with one reason share one paragraph, drawn under the last of them.
+			let last = index;
+			while (rows[last + 1]?.kind === "forbidden" && rows[last + 1].help === row.help) last += 1;
+			fields.append(renderForbiddenRow(row, `pe-field-${rows[last].name.replaceAll(".", "-")}-help`, last === index));
+			continue;
+		}
 		fields.append(renderEditorRow(row));
 	}
 	const instructionsKey = isDefaults ? "agents.sharedInstructions" : "agents.roleInstructions";
 	const bodySection = peSection(t(instructionsKey), t(`${instructionsKey}.note`));
+	if (!isDefaults) bodySection.append(renderRoleGuide(editor.kind === "new"));
 	const bodyArea = document.createElement("textarea");
 	bodyArea.className = "pe-textarea pe-body";
 	bodyArea.id = "pe-body";
 	bodyArea.value = editor.body;
+	if (!isDefaults) bodyArea.placeholder = t("agents.roleInstructions.placeholder");
 	bodyArea.setAttribute("aria-label", t(instructionsKey));
-	bodyArea.addEventListener("change", () => {
-		agentView.editor = setBody(agentView.editor, bodyArea.value);
-	});
+	bodyArea.addEventListener("input", () => commitEditor(setBody(agentView.editor, bodyArea.value)));
 	bodySection.append(bodyArea);
 	const rawSection = peSection(t("agents.rawSection"), t("agents.raw.note"));
 	const rawArea = document.createElement("textarea");
@@ -4947,13 +7203,13 @@ function renderAgentEditor() {
 	rawArea.value = editor.unknownRaw;
 	rawArea.spellcheck = false;
 	rawArea.setAttribute("aria-label", t("agents.raw.label"));
-	rawArea.addEventListener("change", () => {
-		agentView.editor = setUnknownRaw(agentView.editor, rawArea.value);
-	});
+	rawArea.addEventListener("input", () => commitEditor(setUnknownRaw(agentView.editor, rawArea.value)));
 	rawSection.append(rawArea);
 	form.append(fields, bodySection, rawSection);
 	const existing = editor.kind === "agent" && editor.id;
+	if (existing) form.append(renderToolPermissions(editor.id));
 	if (existing) form.append(renderAgentFiles(editor.id));
+	if (editor.kind === "new") form.append(renderNewAgentFiles());
 	let deleteBox = null;
 	let deleteInput = null;
 	const error = document.createElement("p");
@@ -5011,44 +7267,6 @@ function renderAgentEditor() {
 	if (focused) document.getElementById(focused)?.focus();
 }
 
-async function saveAgentEditor() {
-	const editor = agentView.editor;
-	if (!editor) return;
-	const errors = validateEditor(editor);
-	const errorEl = document.getElementById("pe-form-error");
-	if (errors.length) {
-		if (errorEl) errorEl.textContent = errors.map((e) => e.message).join(" · ");
-		showAgentStatus(t("agents.notSaved"), "error");
-		return;
-	}
-	if (errorEl) errorEl.textContent = "";
-	const save = document.getElementById("pe-save");
-	if (save) save.disabled = true;
-	try {
-		const body = await agentApi(saveRequest(editor));
-		if (editor.kind === "defaults") {
-			agentView.editor = editorState(body, "defaults");
-			showAgentStatus(t("agents.defaultsSaved"), "ok");
-			renderAgentEditor();
-			return;
-		}
-		receiveAgentUpdate(body);
-		if (editor.kind === "new") {
-			closeAgents();
-			systemLine(t("agents.created.line", { name: body.name }));
-			return;
-		}
-		agentView.editor = editorState(body, "agent");
-		showAgentStatus(t("agents.saved"), "ok");
-		renderAgentEditor();
-	} catch (error) {
-		showAgentStatus(error.message, "error");
-	} finally {
-		const button = document.getElementById("pe-save");
-		if (button) button.disabled = false;
-	}
-}
-
 async function cloneAgent(id) {
 	try {
 		const body = await agentApi(cloneRequest(id));
@@ -5072,22 +7290,70 @@ async function deleteAgent(id, typed) {
 	}
 }
 
-async function uploadAgentSource(id, input) {
-	const file = input.files?.[0];
-	if (!file) {
-		showAgentStatus(t("agents.pickFile"), "error");
-		return;
+/**
+ * The files picked or dropped for an agent's source/ folder (agent-ux todo 14): they join that agent's queue under the zone
+ * (a file over the gateway limit fails there at once and is never sent) and go out one by one, each row showing its
+ * progress. The file list is read again after the run and the status line says what was uploaded.
+ */
+async function uploadAgentSources(id, files) {
+	setUploadQueue(id, [...uploadQueue(id), ...uploadRows(files)]);
+	await runAgentUploads(id);
+}
+
+/** One agent's upload queue; empty when nothing was picked for it. */
+function uploadQueue(id) {
+	return agentView.uploads.get(id) ?? [];
+}
+
+/** Replaces one agent's queue and redraws its zone when that agent's editor is the open one; another editor's zone is left alone. */
+function setUploadQueue(id, rows) {
+	agentView.uploads.set(id, rows);
+	if (agentView.editor?.id === id) redrawUploadRows("pe-source-upload", rows, (key) => retryAgentUpload(id, key));
+}
+
+function retryAgentUpload(id, key) {
+	setUploadQueue(id, retryUpload(uploadQueue(id), key));
+	void runAgentUploads(id);
+}
+
+function setAgentUpload(id, key, patch) {
+	setUploadQueue(id, advanceUpload(uploadQueue(id), key, patch));
+}
+
+/**
+ * Sends one agent's waiting rows in order, one request at a time: one runner per agent (a second call while it runs only
+ * leaves its rows in the queue) and the run goes on when another editor opens (review fix B1). The list and the status
+ * line are refreshed only while that agent's editor is the open one - after the run, and again after the list answered.
+ */
+async function runAgentUploads(id) {
+	if (agentView.uploading.has(id)) return;
+	agentView.uploading.add(id);
+	const saved = [];
+	try {
+		for (let row = nextUpload(uploadQueue(id)); row; row = nextUpload(uploadQueue(id))) {
+			setAgentUpload(id, row.key, { status: "uploading", progress: 0 });
+			try {
+				const result = await uploadWithProgress(sourceUploadPath(id), row.file, (progress) => setAgentUpload(id, row.key, { status: "uploading", progress }));
+				setAgentUpload(id, row.key, { status: "done", savedName: result.name });
+				saved.push({ name: row.name, savedName: result.name, size: result.size });
+			} catch (error) {
+				setAgentUpload(id, row.key, { status: "failed", error: error.code ?? (error.network ? "network" : "rejected"), errorLine: error.message });
+			}
+		}
+	} finally {
+		agentView.uploading.delete(id);
 	}
-	const form = new FormData();
-	form.append("file", file, file.name);
+	if (agentView.editor?.id !== id) return;
 	try {
-		const result = await agentApi({ method: "POST", path: sourceUploadPath(id), body: form });
-		agentView.files = fileRows(await agentApi({ method: "GET", path: filesPath(id) }));
-		showAgentStatus(t("agents.uploaded", { name: result.name, size: formatBytes(result.size) }), "ok");
-		renderAgentEditor();
+		const files = await agentApi({ method: "GET", path: filesPath(id) });
+		if (agentView.editor?.id !== id) return;
+		agentView.files = fileRows(files);
 	} catch (error) {
+		if (agentView.editor?.id !== id) return;
 		showAgentStatus(error.message, "error");
 	}
+	if (saved.length) showAgentStatus(uploadedLine(saved), "ok");
+	renderAgentEditor();
 }
 
 async function renderAgentTrash(load) {
@@ -5124,7 +7390,9 @@ async function renderAgentTrash(load) {
 		main.append(name, sub);
 		const rowActions = document.createElement("div");
 		rowActions.className = "pe-list-actions";
-		rowActions.append(peButton(t("agents.restore"), () => void restoreAgent(row.entry), undefined, "text-btn primary", "restore"));
+		const restore = peButton(t("agents.restore"), () => restoreAgent(row.entry), undefined, "text-btn primary", "restore");
+		restore.disabled = restoreInFlight.has(row.entry);
+		rowActions.append(restore);
 		li.append(peSpan("agent-icon", row.icon), main, rowActions);
 		list.append(li);
 	}
@@ -5132,21 +7400,98 @@ async function renderAgentTrash(load) {
 	agentEls.body.replaceChildren(section);
 }
 
-async function restoreAgent(entry) {
+/**
+ * Archive entries with a restore in flight: entry -> the token of the request that owns it (gate review T22-B1). One
+ * request per entry at a time, plain or under a new id: the row's 되살리기 and the notice's retry are locked while it
+ * runs (a row or notice drawn meanwhile comes up locked too), and a reply whose request no longer owns the entry is
+ * dropped, so a late refusal can never overwrite a completed restore.
+ */
+const restoreInFlight = new Map();
+
+/**
+ * A restore from the archive (plan todo 22). The gateway's 409 `exists` means the entry's id is live again (the agent
+ * was deleted twice and one copy restored): a notice under the row explains it and offers the same restore with
+ * `{ newId: true }`, which keeps both. There is no overwrite choice.
+ */
+async function restoreAgent(entry, newId = false) {
+	if (restoreInFlight.has(entry)) return;
+	const token = {};
+	restoreInFlight.set(entry, token);
+	lockRestore(entry, true);
+	const request = restoreRequest(entry, { newId });
+	let outcome;
 	try {
-		const body = await agentApi(restoreRequest(entry));
-		receiveAgentUpdate(body);
-		showAgentStatus(t("agents.restored", { name: body.name }), "ok");
-		await showAgentView("list");
+		const res = await fetch(request.path, { method: request.method, headers: request.headers, body: request.body });
+		outcome = restoreOutcome(res.status, await res.json().catch(() => null));
 	} catch (error) {
-		showAgentStatus(error.message, "error");
+		outcome = { kind: "error", message: error.message };
+	}
+	if (restoreInFlight.get(entry) !== token) return;
+	restoreInFlight.delete(entry);
+	lockRestore(entry, false);
+	if (outcome.kind === "restored") {
+		receiveAgentUpdate(outcome.detail);
+		showAgentStatus(t(newId ? "agents.restored.newId" : "agents.restored", { name: outcome.detail.name }), "ok");
+		await showAgentView("list");
+	} else if (outcome.kind === "conflict") showRestoreConflict(entry, outcome.id);
+	else if (newId) showRestoreConflictError(entry, outcome.message);
+	else showAgentStatus(outcome.message, "error");
+}
+
+/** The row's 되살리기 and the notice's retry of one entry, as drawn now, locked while its request runs. */
+function lockRestore(entry, locked) {
+	for (const button of [archiveRow(entry)?.querySelector('[data-act="restore"]'), restoreConflictBox(entry)?.querySelector('[data-act="restore-new-id"]')]) {
+		if (button) button.disabled = locked;
 	}
 }
 
+function archiveRow(entry) {
+	return [...document.querySelectorAll("#pe-trash-list li[data-entry]")].find((li) => li.dataset.entry === entry) ?? null;
+}
+
+/** The notice under an archive row after a 409 `exists`: the cause, [새 ID로 되살리기] and [취소]. A second 409 replaces it. */
+function showRestoreConflict(entry, id) {
+	const row = archiveRow(entry);
+	if (!row) {
+		showAgentStatus(t("agents.restore.conflict", { id }), "error");
+		return;
+	}
+	restoreConflictBox(entry)?.remove();
+	const box = document.createElement("li");
+	box.className = "inbox-dismiss pe-restore-conflict";
+	box.dataset.conflict = entry;
+	box.tabIndex = -1;
+	const text = document.createElement("p");
+	text.className = "inbox-dismiss-text";
+	text.textContent = t("agents.restore.conflict", { id });
+	const error = document.createElement("p");
+	error.className = "pe-error";
+	const buttons = document.createElement("div");
+	buttons.className = "pe-actions";
+	const retry = peButton(t("agents.restore.newId"), () => restoreAgent(entry, true), undefined, "text-btn primary", "restore-new-id");
+	retry.disabled = restoreInFlight.has(entry);
+	buttons.append(retry, peButton(t("common.cancel"), () => box.remove(), undefined, "text-btn", "restore-cancel"));
+	box.append(text, error, buttons);
+	row.after(box);
+	box.focus();
+}
+
+/** A failed retry under a new id: the reason stays in the notice, next to the button; without the notice it is the status line. */
+function showRestoreConflictError(entry, message) {
+	const line = t("agents.restore.newId.failed", { reason: message });
+	const error = restoreConflictBox(entry)?.querySelector(".pe-error");
+	if (error) error.textContent = line;
+	else showAgentStatus(line, "error");
+}
+
+function restoreConflictBox(entry) {
+	return [...document.querySelectorAll("#pe-trash-list li[data-conflict]")].find((li) => li.dataset.conflict === entry) ?? null;
+}
+
 agentEls.manage.onclick = () => (agentView.open ? closeAgents() : openAgents("list"));
 agentEls.toggle.onclick = () => (agentView.open ? closeAgents() : openAgents("list"));
-agentEls.stale.onclick = () => send({ type: "conversation.rotate", conv: state.current });
 agentEls.close.onclick = closeAgents;
+agentEls.applyNow.onclick = () => void applyAgentNow();
 for (const [view, button] of Object.entries(agentEls.nav)) button.onclick = () => openAgents(view);
 agentEls.el.addEventListener("click", (ev) => {
 	if (ev.target === agentEls.el) closeAgents();
@@ -5173,6 +7518,76 @@ agentEls.el.addEventListener("keydown", (ev) => {
 });
 void loadAgents();
 
+/**
+ * Save the open editor (todo 13, bug 285). An unchanged text is not sent. After a save, the merged sha the gateway
+ * answered decides the line: unchanged, or saved while an open session keeps the previous definition (the gateway
+ * accepts a save while the agent is answering; the stale state then shows in the conversation header), or saved for
+ * the next session. A refusal becomes a sentence and the editor keeps its state.
+ */
+async function saveAgentEditor() {
+	const editor = agentView.editor;
+	if (!editor) return;
+	const errors = validateEditor(editor);
+	const errorEl = document.getElementById("pe-form-error");
+	if (errors.length) {
+		if (errorEl) errorEl.textContent = errors.map((e) => e.message).join(" \u00b7 ");
+		showAgentStatus(t("agents.notSaved"), "error");
+		return;
+	}
+	if (errorEl) errorEl.textContent = "";
+	if (unchangedSource(editor)) {
+		showAgentStatus(t("agents.saved.unchanged"), "ok");
+		return;
+	}
+	const save = document.getElementById("pe-save");
+	if (save) save.disabled = true;
+	try {
+		// A new agent: what waits for this draft is saved and its wire awaited first, so no draft request can follow the create
+		// request that archives the draft; the gateway refuses a late one from another tab (draft_closed).
+		if (editor.kind === "new") await draftAutosave.settle(editor.draftId);
+		editorSaving = true;
+		const body = await agentApi(saveRequest(editor)).finally(() => { editorSaving = false; });
+		if (editor.kind === "defaults") {
+			agentView.editor = editorState(body, "defaults");
+			showAgentStatus(t("agents.defaultsSaved"), "ok");
+			renderAgentEditor();
+			return;
+		}
+		receiveAgentUpdate(body);
+		if (editor.kind === "new") {
+			agentView.drafts = agentView.drafts.filter((draft) => draft.id !== editor.draftId);
+			// The files picked on the create screen that sent this request (captured with its editor state, todo 18) go out only now,
+			// after the definition exists, into the created agent's own queue - never another screen's files (T18-B1). While that screen
+			// is still the open one, the dialog moves to the new agent's editor, whose zone shows the progress, or closes when nothing
+			// was picked; a screen that was closed or replaced meanwhile is left alone and the uploads run behind it (review fix B1).
+			const queued = uploadsAfterCreate(body, editor.pendingUploads);
+			const stillOpen = agentView.open && agentView.editor?.kind === "new" && agentView.editor.draftId === editor.draftId;
+			systemLine(t("agents.created.line", { name: body.name }));
+			if (!queued) {
+				if (stillOpen) closeAgents();
+				return;
+			}
+			if (stillOpen) await showAgentView("editor", queued.id);
+			setUploadQueue(queued.id, queued.rows);
+			if (stillOpen) showAgentStatus(t("agents.created.uploading", { name: body.name, count: queued.rows.filter((row) => row.status === "waiting").length }), "ok");
+			void runAgentUploads(queued.id);
+			return;
+		}
+		const outcome = saveOutcome(editor, body);
+		agentView.editor = editorState(body, "agent");
+		// The save answer's merged fields are the gateway's evaluation of the saved text; a preview still on the wire is superseded.
+		capabilityPreview.discard();
+		resetPreview(body.fields);
+		showAgentStatus(t(!outcome.changed ? "agents.saved.unchanged" : outcome.stale ? "agents.saved" : "agents.saved.next"), "ok", applyNowTarget(outcome, body));
+		renderAgentEditor();
+	} catch (error) {
+		showAgentStatus(saveErrorLine(error, editor.registry), "error");
+	} finally {
+		const button = document.getElementById("pe-save");
+		if (button) button.disabled = false;
+	}
+}
+
 /** The open agent dialog redrawn from its state: the list, the archive (fetched again) or the editor (unsaved edits kept). */
 function rerenderAgentDialog() {
 	if (!agentView.open) return;
@@ -5206,6 +7621,7 @@ function rerenderLanguage() {
 	renderWorkStatusAll();
 	renderTray();
 	renderReferences();
+	documents.render();
 	renderDeviceRequests();
 	if (!slash.el.hidden) renderSlashMenu();
 	renderInboxBadge();
@@ -5232,4 +7648,12 @@ function rerenderLanguage() {
 
 onLanguageChange(rerenderLanguage);
 
+// Plan agent-ux todo 23: the first-run tour starts once per browser (localStorage zgw.tour.done); the settings button replays it.
+const tour = installTour(document, window, localStorage);
+$("tour-replay").onclick = () => {
+	closeSettings();
+	tour.start();
+};
+if (autoStartWanted(localStorage)) tour.start();
+
 connect();