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

package/web/style.css

@@ -8,13 +8,33 @@
 	--muted: #949ba4;
 	--accent: #5865f2;
 	--ok: #23a55a;
+	--ok-soft: rgba(35, 165, 90, 0.18);
 	--warn: #f0b232;
+	--warn-soft: rgba(240, 178, 50, 0.16);
 	--danger: #da373c;
 	--border: #1f2023;
 	--side-w: 512px;
 	font-family: Pretendard, "Noto Sans KR", system-ui, sans-serif;
 }
 * { box-sizing: border-box; }
+/* The document tray under the composer: wrapping chips in the chat's tokens (the @ menu itself is styled with the slash menu below). */
+.document-list:empty, .host-file-status:empty { display: none; }
+.document-list { flex: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 16px 8px; list-style: none; max-width: 100%; }
+.document-chip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; max-width: 100%; padding: 8px; background: var(--bg-card); color: var(--text); border: 1px solid #4e5058; border-radius: 6px; font-size: 13px; overflow-wrap: anywhere; }
+.document-chip strong, .document-chip a { min-width: 0; overflow-wrap: anywhere; color: var(--text); }
+.document-chip a { display: inline-flex; align-items: center; min-width: 24px; min-height: 24px; }
+.document-chip span { flex: 1 0 100%; font-size: 12px; color: var(--muted); }
+.document-chip select { max-width: 100%; min-height: 24px; font: inherit; font-size: 12px; background: var(--bg-input); color: var(--text); border: 1px solid #4e5058; border-radius: 4px; }
+.document-chip .text-btn { min-height: 24px; }
+.document-chip button:hover:not(:disabled) { background: var(--bg-hover); }
+.document-chip button:active:not(:disabled) { background: var(--bg-input); }
+.document-chip :disabled { color: var(--muted); opacity: 1; cursor: default; }
+.document-chip.revoked strong { color: var(--muted); }
+.document-chip :focus-visible, #input:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
+#document-tray .document-chip { gap: 6px; padding: 2px 2px 2px 8px; background: transparent; border-radius: 4px; }
+#document-tray .document-chip strong { font-weight: 400; }
+#document-tray .document-chip span { flex: 0 1 auto; }
+@media (max-width: 640px) { #document-tray .document-chip span { flex: 1 1 80px; min-width: 0; } }
 html, body { margin: 0; height: 100%; background: var(--bg-chat); color: var(--text); }
 body { word-break: keep-all; overflow-wrap: anywhere; overflow: hidden; }
 button { font: inherit; color: inherit; cursor: pointer; }
@@ -60,6 +80,7 @@ button { font: inherit; color: inherit; cursor: pointer; }
 .me-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .agent-avatar { background: var(--bg-input); overflow: hidden; }
 .agent-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
+.bot-avatar, .agent-avatar { font-size: 18px; line-height: 1; }
 .me { user-select: none; }
 .me-name-input { width: 100%; min-width: 0; box-sizing: border-box; font: inherit; color: var(--text); background: var(--bg-input); border: 1px solid var(--accent); border-radius: 4px; padding: 1px 6px; outline: none; }
 .me-name-input[aria-invalid="true"] { border-color: var(--danger); }
@@ -168,6 +189,10 @@ button { font: inherit; color: inherit; cursor: pointer; }
 .msg-text th { background: #2b2d31; }
 .msg-text hr { border: 0; border-top: 1px solid #4e5058; }
 .text-btn.armed { background: var(--warn); color: #111; }
+/* Bug 283: the new-session button carries the action while the open agent's definition changed: warning border and fill, ↻ before the label. */
+.text-btn.attention { box-shadow: inset 0 0 0 1px var(--warn); background: var(--warn-soft); color: var(--warn); font-weight: 600; }
+.text-btn.attention::before { content: "\21BB"; margin-right: 4px; }
+.text-btn.attention:hover { background: var(--warn); color: #111; }
 .msg-text.streaming::after { content: "▍"; color: var(--muted); }
 .msg-text:empty:not(.streaming) { display: none; }
 .thinking { margin: 2px 0 6px; border-left: 3px solid #5c5f66; padding: 2px 0 2px 10px; color: var(--muted); font-size: 13px; }
@@ -188,6 +213,44 @@ button { font: inherit; color: inherit; cursor: pointer; }
 .approval-options .btn { text-align: left; }
 .approval-options .btn small { display: block; font-weight: 400; font-size: 12px; opacity: 0.85; }
 .approval-options .btn.picked { background: var(--ok); }
+/* 에이전트 협업 카드 (292 C-10): one card per request, aligned with message text (68px), the state as a dot plus a word, never colour alone. */
+.collaboration-card { margin: 8px 16px 8px 68px; max-width: 640px; border: 1px solid #4e5058; border-radius: 6px; background: var(--bg-card); padding: 12px; font-size: 14px; }
+.collab-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; }
+.collab-title { font-weight: 700; }
+.collab-kind { font-size: 11px; color: var(--muted); border: 1px solid #4e5058; border-radius: 4px; padding: 0 5px; white-space: nowrap; }
+.collab-state { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); white-space: nowrap; }
+.collab-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
+.collab-state.ok { color: var(--ok); }
+.collab-state.busy { color: #a3acff; }
+.collab-state.warn { color: var(--warn); }
+.collab-state.danger { color: #f38b8d; }
+.collab-time { margin-left: auto; font-size: 12px; color: var(--muted); }
+.collab-parties { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 4px; font-size: 12px; color: var(--muted); }
+.collab-parties b { color: var(--text); font-weight: 600; }
+.collab-text { margin-top: 8px; white-space: pre-wrap; line-height: 1.5; }
+.collab-section { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; }
+.collab-section-label { font-size: 12px; font-weight: 600; color: var(--muted); margin: 0 0 4px; }
+.collab-section .collab-text { margin-top: 0; }
+.collab-section .collab-text + .collab-section-label { margin-top: 8px; }
+.collab-files { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
+.collab-file { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 4px 8px; border-radius: 4px; background: var(--bg-input); font-size: 13px; }
+.collab-file-name { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
+.collab-file-size { font-size: 12px; color: var(--muted); }
+.collab-file .text-btn { min-height: 24px; }
+.collab-note { margin-top: 8px; font-size: 12px; color: var(--muted); line-height: 1.5; }
+.collab-note.error, .collab-line.error { color: #f38b8d; }
+.collab-line { font-size: 12px; color: var(--muted); line-height: 1.5; }
+.collab-line:not(:empty) { margin-top: 8px; }
+.collab-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
+.collab-actions .text-btn.danger { color: #f38b8d; }
+.collab-actions .text-btn.danger:hover:not(:disabled) { background: var(--danger); color: #fff; }
+.collab-actions .text-btn:disabled, .collab-file .text-btn:disabled { opacity: 0.5; cursor: default; }
+.collaboration-card .text-btn:focus-visible { outline: 2px solid #a3acff; outline-offset: 2px; }
+@media (max-width: 640px) {
+	.collaboration-card { margin: 8px 8px 8px 16px; max-width: none; }
+	.collab-time { flex: 1 0 100%; margin-left: 0; }
+	.collab-actions .text-btn, .collab-file .text-btn { min-height: 44px; min-width: 44px; }
+}
 .btn { border: 0; border-radius: 4px; padding: 6px 14px; font-weight: 600; font-size: 14px; }
 .btn.ok { background: var(--ok); color: #fff; }
 .btn.neutral { background: #4e5058; color: #fff; }
@@ -204,14 +267,35 @@ button { font: inherit; color: inherit; cursor: pointer; }
 .transition-status { flex: none; color: var(--warn); font-size: 13px; font-weight: 600; }
 .composer.transitioning { opacity: 0.72; }
 .composer :disabled { cursor: default; }
-.slash-menu { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 10; max-height: min(360px, 45vh); overflow-y: auto; background: #2b2d31; border: 1px solid #4e5058; border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); padding: 4px; }
-.slash-menu[hidden] { display: none; }
-.slash-item { display: flex; align-items: baseline; gap: 10px; padding: 7px 10px; border-radius: 6px; cursor: pointer; }
-.slash-item.active { background: #404249; }
-.slash-name { flex: none; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: var(--text); }
-.slash-desc { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: #949ba4; }
-.slash-src { flex: none; font-size: 11px; color: #949ba4; border: 1px solid #4e5058; border-radius: 4px; padding: 0 5px; }
-.slash-note { padding: 7px 10px; font-size: 12px; color: #949ba4; }
+/* The slash menu and the @ file menu share one idiom: panel, rows, active row, names, descriptions and notes. */
+.slash-menu, .host-file-menu { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px + var(--menu-lift, 0px)); z-index: 10; max-height: min(360px, 45vh, var(--menu-room, 360px)); overflow-y: auto; background: #2b2d31; border: 1px solid #4e5058; border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); padding: 4px; }
+.slash-menu[hidden], .host-file-menu[hidden] { display: none; }
+.slash-item, .host-file-option { display: flex; align-items: baseline; gap: 10px; padding: 7px 10px; border-radius: 6px; cursor: pointer; }
+.slash-item.active, .host-file-option[aria-selected="true"] { background: #404249; }
+.slash-name, .host-file-option > span { flex: none; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: var(--text); }
+.slash-desc, .host-file-option small { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: #949ba4; }
+.slash-src, .host-file-nav .text-btn { flex: none; font-size: 11px; color: #949ba4; border: 1px solid #4e5058; border-radius: 4px; padding: 0 5px; }
+.slash-note, .host-file-status { padding: 7px 10px; font-size: 12px; color: #949ba4; }
+/* The @ file menu adds its own layout: a toolbar row (title, search combobox, roots, parent, hidden files, paging),
+   the listbox that owns the bounded scroll, and a status line. Everything else comes from the shared rules above. */
+.host-file-menu { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
+.host-file-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 3px 6px 5px; }
+.host-file-nav strong { flex: 1 1 auto; font-size: 11px; font-weight: 700; color: #949ba4; text-transform: uppercase; letter-spacing: 0.02em; }
+.host-file-nav .text-btn { background: transparent; min-height: 24px; padding: 2px 8px; font-size: 12px; }
+.host-file-nav .text-btn:hover:not(:disabled) { color: var(--text); background: #404249; }
+.host-file-nav .text-btn:disabled { opacity: 0.5; cursor: default; }
+.host-file-nav label { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; font-size: 12px; color: #949ba4; cursor: pointer; }
+.host-file-nav input[type="checkbox"] { width: 14px; height: 14px; margin: 0; accent-color: var(--accent); }
+.host-file-query-label { flex: 1 1 100%; }
+.host-file-query-label input { flex: 1; min-width: 0; min-height: 28px; padding: 4px 8px; font: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: var(--text); background: var(--bg-input); border: 1px solid #4e5058; border-radius: 6px; }
+.host-file-nav :focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }
+#host-file-list { overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
+.host-file-option > span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.host-file-option small { flex: none; max-width: 50%; }
+.host-file-option[aria-disabled="true"] { cursor: default; }
+.host-file-option[aria-disabled="true"] > span { color: #949ba4; }
+.host-file-status { flex: none; margin: 0 16px 8px; color: var(--text); overflow-wrap: anywhere; }
+.host-file-menu .host-file-status { margin: 0; color: #949ba4; }
 .composer textarea { flex: 1; resize: none; background: transparent; border: 0; color: var(--text); font: inherit; font-size: 15px; line-height: 1.4; max-height: 200px; padding: 6px 4px; outline: none; }
 .mic, .send { border: 0; border-radius: 6px; padding: 6px 12px; background: #4e5058; color: #fff; font-size: 13px; font-weight: 600; }
 .send { background: var(--accent); }
@@ -344,7 +428,7 @@ button { font: inherit; color: inherit; cursor: pointer; }
 .inbox-item-head { display: flex; align-items: center; gap: 8px; }
 .inbox-work { flex: 1; min-width: 0; font-size: 12px; font-weight: 700; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .inbox-chip { flex: none; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; }
-.chip-pending { background: rgba(240, 178, 50, 0.16); color: var(--warn); }
+.chip-pending { background: var(--warn-soft); color: var(--warn); }
 .chip-needs_review { background: rgba(218, 55, 60, 0.18); color: #f38b8d; }
 .chip-submitted { background: rgba(88, 101, 242, 0.22); color: #a3acff; }
 .inbox-question { font-weight: 600; line-height: 1.4; white-space: pre-wrap; }
@@ -436,15 +520,33 @@ button { font: inherit; color: inherit; cursor: pointer; }
 .gc-all input { width: 16px; height: 16px; margin: 0; }
 .gc-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
 .gc-list:empty { display: none; }
+/* Housekeeping todo 13: one group per role (상태 정리, 회수) with a count pill; a read-only row keeps the row frame but mutes its text. */
+.gc-group { display: flex; flex-direction: column; gap: 6px; }
+.gc-group[hidden] { display: none; }
+.gc-group-head { display: flex; align-items: center; gap: 8px; padding: 4px 2px 0; font-size: 12px; font-weight: 600; color: var(--muted); }
+.gc-count { font-size: 11px; font-weight: 600; min-width: 20px; padding: 1px 7px; border-radius: 10px; background: var(--bg-input); color: var(--text); text-align: center; font-variant-numeric: tabular-nums; }
+.gc-rows { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
 .gc-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--bg-card); border: 1px solid #4e5058; border-radius: 6px; font-size: 13px; }
+.gc-row.readonly { color: var(--muted); }
 .gc-row input { flex: none; width: 18px; height: 18px; margin: 0; }
+.gc-row input:disabled { opacity: 0.4; cursor: default; }
+.gc-mark { flex: none; width: 18px; height: 18px; display: grid; place-items: center; }
+.gc-mark::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); }
 .gc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+.gc-line { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0; }
 .gc-name, .gc-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.gc-line .gc-name { flex: 0 1 auto; min-width: 0; }
+.gc-badge { flex: none; font-size: 11px; font-weight: 600; line-height: 1.4; padding: 0 6px; border: 1px solid var(--warn); border-radius: 4px; color: var(--warn); white-space: nowrap; }
 .gc-sub { font-size: 12px; color: var(--muted); }
+.gc-note { font-size: 12px; color: var(--warn); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .gc-message { margin: 0; font-size: 13px; color: var(--muted); }
 .gc-message:empty { display: none; }
 .gc-message.error { color: #f38b8d; }
-.gc-actions { display: flex; justify-content: flex-end; }
+.gc-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
+.gc-audit { margin: 0; padding: 8px 10px; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); background: var(--bg-card); border: 1px solid #4e5058; border-radius: 6px; }
+.gc-audit[hidden] { display: none; }
+.gc-audit li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
+.gc-audit li.error { color: #f38b8d; }
 .settings.manual { z-index: 31; }
 .manual-card { width: min(100%, 760px); height: 100%; }
 .manual-status { margin: 0; padding: 12px 16px 0; font-size: 13px; color: var(--muted); }
@@ -599,19 +701,27 @@ button { font: inherit; color: inherit; cursor: pointer; }
 .agent-list li.stale .agent-stale-dot { display: inline; }
 .agent-list li .dot { margin-left: 0; }
 .agent-list li.agent-empty, .agent-list li.agent-empty:hover { padding: 4px 8px 6px; font-size: 12px; color: var(--muted); background: none; cursor: default; }
-.agent-stale:focus-visible, .pe-clear:focus-visible, .pe-list-row:focus-visible { outline: 2px solid #a3acff; outline-offset: 2px; }
+.pe-clear:focus-visible, .pe-list-row:focus-visible { outline: 2px solid #a3acff; outline-offset: 2px; }
 .agent-head { display: flex; align-items: center; gap: 8px; min-width: 0; flex: none; }
 .agent-head[hidden] { display: none; }
 .agent-head-icon { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--bg-input); font-size: 14px; line-height: 1; }
 .agent-head-name { min-width: 0; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
-.agent-stale { flex: none; border: 1px solid var(--warn); border-radius: 10px; background: rgba(240, 178, 50, 0.16); color: var(--warn); font: inherit; font-size: 12px; font-weight: 600; padding: 2px 8px; white-space: nowrap; }
-.agent-stale:hover { background: var(--warn); color: #111; }
-.agent-stale[hidden] { display: none; }
+/* The small "definition changed" pill of a list row (the agents dialog). It is not a control, so it has no hover state. */
+.agent-stale { flex: none; border: 1px solid var(--warn); border-radius: 10px; background: var(--warn-soft); color: var(--warn); font: inherit; font-size: 12px; font-weight: 600; padding: 2px 8px; white-space: nowrap; }
+/* Bug 283: the header's definition notice is a status text, not a button: the state line and, under it, an explanation visible without a mouse (a short form on phones). */
+.agent-stale-status { display: flex; flex-direction: column; min-width: 0; color: var(--warn); font-size: 12px; font-weight: 600; line-height: 1.3; white-space: nowrap; }
+.agent-stale-status[hidden] { display: none; }
+.agent-stale-icon { margin-right: 4px; }
+.agent-stale-hint { color: var(--muted); font-size: 11px; font-weight: 400; }
+.agent-stale-hint.short { display: none; }
 .agents-card { width: min(100%, 640px); height: min(100%, 860px); }
 .agents-head { gap: 8px; }
 .agents-nav { display: flex; flex-wrap: wrap; gap: 6px; }
 .agents-nav .text-btn[aria-current="true"] { background: var(--accent); color: #fff; }
-.agents-status { margin: 0; padding: 8px 16px 0; font-size: 12px; color: var(--muted); }
+/* The save line and, after a save that changed a stale agent, its "지금 적용" button beside it (agent-ux todo 21). */
+.agents-status-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 16px 0; }
+.agents-status-row:has(> .agents-status:empty):has(> .agents-apply-now[hidden]) { display: none; }
+.agents-status { margin: 0; font-size: 12px; color: var(--muted); }
 .agents-status:empty { display: none; }
 .agents-status.error { color: #f38b8d; }
 .agents-status.ok { color: var(--ok); }
@@ -622,7 +732,7 @@ button { font: inherit; color: inherit; cursor: pointer; }
 .pe-group { margin-top: 6px; justify-content: flex-start; flex-wrap: wrap; gap: 4px 8px; }
 .pe-group > span:first-child { flex: none; }
 .pe-group-help { font-weight: 400; text-transform: none; }
-.pe-note { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
+.pe-note, .pe-help { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
 .pe-row { display: grid; grid-template-columns: minmax(120px, 160px) minmax(0, 1fr); gap: 4px 12px; align-items: start; }
 .pe-label { font-size: 13px; padding-top: 6px; }
 .pe-label small { display: block; font-size: 12px; color: var(--muted); font-weight: 400; }
@@ -633,11 +743,60 @@ button { font: inherit; color: inherit; cursor: pointer; }
 .pe-input[aria-invalid="true"] { border-color: var(--danger); }
 .pe-input.pe-number { flex: 0 1 140px; font-variant-numeric: tabular-nums; }
 .pe-input.pe-select { flex: 0 1 180px; }
-.pe-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; padding: 6px 0; cursor: pointer; }
-.pe-toggle input { width: 16px; height: 16px; margin: 0; }
+.pe-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; padding: 6px 0; }
 .pe-textarea { width: 100%; min-height: 72px; resize: vertical; padding: 8px; font: inherit; font-size: 13px; line-height: 1.5; color: var(--text); background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; }
 .pe-textarea.pe-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; min-height: 96px; }
 .pe-textarea.pe-body { min-height: 180px; }
+/* agent-ux todo 9: the how-to-write box above the role instructions, a native disclosure (open while creating). */
+.pe-guide { border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); padding: 6px 12px; font-size: 12px; line-height: 1.5; color: var(--muted); }
+.pe-guide summary { cursor: pointer; padding: 4px 0; font-size: 13px; font-weight: 600; color: var(--text); border-radius: 4px; }
+.pe-guide summary:hover { background: var(--bg-hover); }
+.pe-guide summary:focus-visible { outline: 2px solid #a3acff; outline-offset: 2px; }
+.pe-guide ul { margin: 4px 0 6px; padding-left: 18px; }
+.pe-guide li + li { margin-top: 2px; }
+.pe-guide b { color: var(--text); font-weight: 600; }
+/* agent-ux todo 10: the allowed-skills check list (installed skills from the engine; a saved name outside it is tagged). */
+.pe-skills { flex: 1 1 100%; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
+.pe-skills-status { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 12px; color: var(--muted); }
+.pe-skills-status .text-btn { padding: 2px 8px; font-size: 12px; }
+.pe-skill-list { display: flex; flex-direction: column; max-height: 240px; overflow-y: auto; padding: 4px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); }
+.pe-skill { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 6px; border-radius: 4px; font-size: 13px; cursor: pointer; }
+.pe-skill:hover { background: var(--bg-hover); }
+.pe-skill[hidden] { display: none; }
+.pe-skill input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer; }
+.pe-skill input:disabled { cursor: default; opacity: 0.6; }
+.pe-skill-name { flex: none; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
+.pe-skill-desc { flex: 1; min-width: 0; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pe-skill-missing { flex: none; font-size: 11px; color: var(--warn); border: 1px solid var(--warn); border-radius: 4px; padding: 0 5px; white-space: nowrap; }
+.pe-skill-search { flex: none; width: 100%; }
+.pe-skills-empty { margin: 0; padding: 8px; font-size: 12px; color: var(--muted); }
+.pe-skills-empty[hidden] { display: none; }
+/* The collaboration targets list (292 C-10) reuses the skills list; the agent name is the row's text, its id the muted detail. */
+.pe-target-name { flex: none; font-size: 13px; }
+.pe-target.missing .pe-target-name { color: var(--muted); }
+.pe-file-origin { flex: none; font-size: 11px; color: var(--muted); border: 1px solid #4e5058; border-radius: 4px; padding: 0 5px; white-space: nowrap; }
+.pe-file-origin.collaboration-copy { color: #a3acff; border-color: #5865f2; }
+/* agent-ux todo 11: the create screen's draft status line and the list screen's drafts. */
+.pe-draft-status { margin: 0; font-size: 12px; color: var(--muted); }
+.pe-draft-status:empty { display: none; }
+.pe-draft-status.ok { color: var(--ok); }
+.pe-draft-status.warn { color: var(--warn); }
+.pe-draft-list[hidden] { display: none; }
+.pe-draft-list .pe-list-row { flex-wrap: wrap; }
+.pe-draft-discard { flex: 1 1 100%; display: flex; flex-direction: column; gap: 8px; }
+.pe-draft-discard[hidden] { display: none; }
+/* agent-ux todo 12: the can/cannot box above the fields; two columns, one on the phone. */
+.pe-capabilities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); }
+.pe-cap { min-width: 0; }
+.pe-cap-line { grid-column: 1 / -1; margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
+.pe-cap-title { margin: 0 0 4px; font-size: 12px; font-weight: 700; text-transform: uppercase; }
+.pe-cap.can .pe-cap-title { color: var(--ok); }
+.pe-cap.cannot .pe-cap-title { color: var(--danger); }
+.pe-cap ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
+.pe-cap li { display: flex; gap: 6px; font-size: 12px; line-height: 1.5; color: var(--text); cursor: default; }
+.pe-cap li::before { flex: none; font-weight: 700; }
+.pe-cap.can li::before { content: "\2713"; color: var(--ok); }
+.pe-cap.cannot li::before { content: "\2715"; color: var(--danger); }
 .pe-origin { flex: none; font-size: 11px; color: var(--muted); border: 1px solid #4e5058; border-radius: 4px; padding: 0 5px; white-space: nowrap; }
 .pe-origin.agent, .pe-origin.defaults { color: #a3acff; border-color: #5865f2; }
 .pe-clear { background: none; border: 0; padding: 2px 4px; border-radius: 4px; color: #00a8fc; font-size: 12px; }
@@ -647,7 +806,7 @@ button { font: inherit; color: inherit; cursor: pointer; }
 .pe-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
 .pe-actions .pe-spacer { flex: 1; }
 .pe-actions .text-btn.primary { background: var(--accent); color: #fff; }
-.pe-actions .text-btn.primary:disabled, .pe-actions .text-btn.danger:disabled, .pe-actions .text-btn:disabled { opacity: 0.5; cursor: default; }
+.pe-actions .text-btn.primary:disabled, .pe-actions .text-btn.danger:disabled, .pe-actions .text-btn:disabled, .pe-list-actions .text-btn:disabled { opacity: 0.5; cursor: default; }
 .text-btn.danger { background: var(--danger); color: #fff; }
 .pe-delete { display: flex; flex-direction: column; gap: 8px; }
 .pe-delete[hidden] { display: none; }
@@ -666,19 +825,96 @@ button { font: inherit; color: inherit; cursor: pointer; }
 .pe-file-name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
 .pe-file-name.directory { color: var(--muted); }
 .pe-file-size { flex: none; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
-.pe-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
 @media (max-width: 640px) {
 	.agent-head-name { max-width: 120px; }
 	.pe-row { grid-template-columns: 1fr; }
 	/* An agent conversation's header: the avatar and the agent block share the first row, the action buttons wrap below. */
 	.chat-head:has(.agent-head:not([hidden])) { flex-wrap: wrap; }
 	.agent-head { flex: 1 1 calc(100% - 44px); flex-wrap: wrap; }
+	/* The definition notice shares one line with its short explanation (bug 283). */
+	.agent-stale-status { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }
+	.agent-stale-hint { display: none; }
+	.agent-stale-hint.short { display: inline; }
 	.pe-label { padding-top: 0; }
-	.agents-body .text-btn, .agent-stale, .pe-clear { min-height: 44px; }
+	.agents-body .text-btn, .pe-clear { min-height: 44px; }
+	.agents-apply-now { min-height: 44px; }
+	.pe-skill { min-height: 44px; }
+	.pe-capabilities { grid-template-columns: 1fr; }
 	.pe-list-row { flex-wrap: wrap; }
 	.pe-list-actions { width: 100%; justify-content: flex-start; }
 }
 
+/* agent-ux todo 14: the upload zone of the knowledge files. A dashed box (the 1px dashed #4e5058 outline of .msg-ref) with the
+   styled 파일 고르기 .text-btn over a hidden file input (the browser's own control is never shown); files dragged over it turn
+   the outline --accent on --bg-hover, as the chat composer and the memo box take a drop. Each queued file is one row on
+   --bg-input: the monospace name and size of .pe-file, a 4px progress bar (#4e5058 track, --accent fill, --ok done,
+   --danger failed) and the state word with its icon, never colour alone. The phone keeps only the big 파일 고르기 button. */
+.pe-upload-zone { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px dashed #4e5058; border-radius: 6px; background: var(--bg-card); transition: border-color 150ms ease, background 150ms ease; }
+.pe-upload-zone.dragging { border-color: var(--accent); background: var(--bg-hover); }
+.pe-upload-prompt { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 8px; font-size: 13px; color: var(--muted); }
+.pe-upload-pick { font-weight: 600; }
+.pe-upload-rows { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
+.pe-upload-rows[hidden] { display: none; }
+.pe-upload-row { display: flex; flex-direction: column; gap: 4px; padding: 6px 8px; border-radius: 4px; background: var(--bg-input); }
+.pe-upload-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
+.pe-upload-state { flex: none; font-size: 12px; color: var(--muted); white-space: nowrap; }
+.pe-upload-state::before { font-weight: 700; margin-right: 4px; }
+.pe-upload-state.waiting::before, .pe-upload-state.queued::before { content: "\25CB"; }
+.pe-upload-state.uploading { color: #a3acff; }
+.pe-upload-state.uploading::before { content: "\2191"; }
+.pe-upload-state.done { color: var(--ok); }
+.pe-upload-state.done::before { content: "\2713"; }
+.pe-upload-state.failed { color: #f38b8d; white-space: normal; }
+.pe-upload-state.failed::before { content: "\2715"; }
+.pe-upload-retry { flex: none; padding: 2px 8px; font-size: 12px; }
+.pe-upload-bar { height: 4px; border-radius: 2px; background: #4e5058; overflow: hidden; }
+.pe-upload-fill { height: 100%; width: 0; border-radius: 2px; background: var(--accent); transition: width 150ms ease; }
+.pe-upload-row.done .pe-upload-fill { background: var(--ok); }
+.pe-upload-row.failed .pe-upload-bar { background: rgba(218, 55, 60, 0.35); }
+.pe-upload-row.failed .pe-upload-fill { background: var(--danger); }
+@media (prefers-reduced-motion: reduce) {
+	.pe-upload-zone, .pe-upload-fill { transition: none; }
+}
+/* agent-ux todo 15: the file section's three blocks (올린 자료, 결과물, 기록), each headed by its 13px name, its knowledge/ path as a
+   monospace tag (the #4e5058 outline of .pe-origin) and the info icon whose tooltip carries the detail; the 12px muted last
+   daily note line closes 기록. */
+.pe-areas { display: flex; flex-direction: column; gap: 12px; }
+.pe-area { display: flex; flex-direction: column; gap: 6px; }
+.pe-area + .pe-area { border-top: 1px solid var(--border); padding-top: 10px; }
+.pe-area-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; font-weight: 600; }
+.pe-area-path { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 400; color: var(--muted); border: 1px solid #4e5058; border-radius: 4px; padding: 0 5px; }
+.pe-last-daily { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
+/* agent-ux todo 16: the compact 삭제 .text-btn.danger (trash glyph + word) at the right of a source/ or outputs/ row, the in-row
+   confirmation (the inbox-dismiss box of the agent delete) under that row, and the 삭제한 파일 disclosure (the .pe-guide
+   box) whose rows add 되살리기. */
+.pe-file-delete { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font-size: 12px; }
+.pe-file-confirm-row { list-style: none; padding: 2px 0 4px 8px; }
+.pe-file-confirm { display: flex; flex-direction: column; gap: 8px; }
+.pe-file-confirm .pe-actions .text-btn { padding: 4px 12px; }
+.pe-file-trash { margin-top: 4px; }
+.pe-file-trash summary { font-size: 13px; }
+.pe-file-trash .pe-note { margin: 2px 0 6px; }
+.pe-file-trash-list { margin-bottom: 6px; }
+.pe-file-trash-row { gap: 8px; }
+.pe-file-trash-row .text-btn { flex: none; padding: 2px 8px; font-size: 12px; }
+/* agent-ux todo 17: the modified time of a file (12px muted, tabular) and the 내려받기 link drawn as the compact .text-btn. */
+.pe-file-time { flex: none; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
+.pe-file-download { flex: none; display: inline-flex; align-items: center; padding: 2px 8px; font-size: 12px; text-decoration: none; }
+.pe-file-download:hover { text-decoration: none; }
+@media (max-width: 640px) {
+	.pe-upload-hint { display: none; }
+	.pe-upload-pick { flex: 1 1 100%; min-height: 44px; }
+	.pe-upload-retry { min-height: 44px; }
+	.pe-file { flex-wrap: wrap; }
+	/* F3 V1: a saved row (올린 자료, 결과물, 삭제한 파일) gives its first line to the name alone - with the flex: 1 basis of 0
+	   even alpha.txt was cut to alpha.t... - and wraps the time, size and buttons under it, the buttons at the right edge.
+	   A name longer than the line still ellipsizes and keeps its full path on the row (title, read as aria-description).
+	   The upload progress rows (.pe-upload-head), whose names were never cut, keep their one-line shape. */
+	.pe-file .pe-file-name { flex-basis: 100%; }
+	.pe-file .pe-file-size { margin-right: auto; }
+	.pe-file-delete, .pe-file-download, .pe-file-trash-row .text-btn { min-height: 44px; }
+}
+
 /* Bug 90: the page-drawn tooltip (web/tooltip.js). */
 .zgw-tip { position: fixed; z-index: 10000; max-width: min(360px, calc(100vw - 16px)); padding: 6px 9px; border-radius: 6px; background: #111214; color: var(--text); border: 1px solid #3f4147; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); font-size: 12px; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; pointer-events: none; }
 .zgw-tip[hidden] { display: none; }
@@ -740,3 +976,88 @@ button { font: inherit; color: inherit; cursor: pointer; }
 	.info-tip::after { inset: -13px; }
 }
 .security-card .security-value { white-space: pre-wrap; overflow-wrap: anywhere; }
+
+/* Plan agent-ux todo 23: the first-run tour (web/tour.js). Four shade panels dim the page and leave a hole over the
+   step's element, so only that element takes clicks; the ring frames the hole and the bubble below or above it carries
+   the sentence, the hint, n/7, 다음 (only where the real click is risky) and 건너뛰기. The phone, whose sidebar is never
+   shown, gets the sidebar as a drawer for that step only. Above every dialog (z-index 30), below the page tooltip (10000). */
+.tour { position: fixed; inset: 0; z-index: 9500; pointer-events: none; }
+.tour[hidden] { display: none; }
+.tour-shade { position: fixed; background: rgba(0, 0, 0, 0.6); pointer-events: auto; }
+.tour-shield { position: fixed; pointer-events: auto; cursor: not-allowed; }
+.tour-shield[hidden] { display: none; }
+.tour-ring { position: fixed; border: 2px solid var(--accent); border-radius: 8px; box-shadow: 0 0 0 4px rgba(88, 101, 242, 0.35); pointer-events: none; }
+.tour-bubble { position: fixed; width: min(360px, calc(100vw - 16px)); padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-side); color: var(--text); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); pointer-events: auto; outline: none; }
+.tour-text { margin: 0; font-size: 14px; line-height: 1.5; font-weight: 600; }
+.tour-hint { margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
+.tour-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
+.tour-count { margin-right: auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
+.tour-next { background: var(--accent); color: #fff; }
+.tour-next:hover { background: var(--accent); filter: brightness(1.15); }
+.tour-bubble .text-btn:focus-visible { outline: 2px solid #a3acff; outline-offset: 2px; }
+/* F3 V2: the tour marks the body while it runs, so no page tooltip of the highlighted element (확인함 at step 4) is drawn
+   over the bubble. web/tooltip.js draws none while the mark is there; this rule hides one already on screen. */
+body[data-tip-quiet] .zgw-tip { display: none; }
+@media (max-width: 640px) {
+	.tour-bubble .text-btn { min-height: 44px; }
+	.app.tour-drawer .sidebar { display: flex; position: fixed; top: 0; left: 0; z-index: 9400; width: min(320px, 85vw); max-height: 60dvh; border-right: 1px solid var(--border); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); }
+	.app.tour-drawer .work-status, .app.tour-drawer .sidebar-foot { display: none; }
+}
+
+/* Plan 294 item 9: agent tool permissions. The inbox grant card (its rows in the inbox-meta look, the two design notes, the
+   tab picker as option buttons on the #1e1f22 inset) and the 도구 권한 editor section (pe-list rows with a state chip, the
+   settings switch, the inline scope editor in the inbox-dismiss box look). Colours are the existing tokens plus the #4e5058
+   outline, the #a3acff accent and the #f38b8d error text the inbox and the editor already use. */
+.inbox-tool { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; font-size: 13px; }
+.inbox-tool dt { color: var(--muted); font-weight: 600; }
+.inbox-tool dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
+.inbox-tool-note, .inbox-tool-restriction { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
+.inbox-tool-choices .btn { flex: 1 1 140px; }
+/* Held file read review (artifact hold): the unscanned-page warning is a warning word, the outcome reads as text. */
+.inbox-review-unscanned { color: var(--warn); }
+.inbox-review-outcome { color: var(--text); }
+.inbox-item.kind-artifact-review .inbox-review-line:empty { display: none; }
+.inbox-tool-targets { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid #4e5058; border-radius: 4px; background: #1e1f22; }
+.inbox-tool-targets-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; }
+.inbox-tool-targets-label { font-size: 13px; font-weight: 600; }
+.inbox-tool-targets-empty { margin: 0; font-size: 12px; color: var(--muted); }
+.inbox-tool-target-list { margin-top: 0; }
+.inbox-tool-target { max-width: 100%; white-space: normal; text-align: left; }
+.inbox-tool-target-suggested { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 600; color: #a3acff; }
+.inbox-tool-target-url { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 400; color: inherit; opacity: 0.85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
+.pe-tool-status { margin: 0; font-size: 12px; color: var(--muted); }
+.pe-tool-status:empty { display: none; }
+.pe-tool-status.error { color: #f38b8d; }
+.pe-tool-summary { font-weight: 600; }
+.pe-tool-pending { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
+.pe-tool-pending .link-btn { padding: 0 4px; font-size: 12px; }
+.pe-tool-row { flex-wrap: wrap; align-items: flex-start; }
+.pe-tool-main { flex: 1 1 240px; }
+.pe-tool-name { gap: 8px; white-space: normal; }
+.pe-tool-sub { white-space: normal; overflow-wrap: anywhere; }
+.pe-tool-meta { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
+.pe-tool-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
+.pe-tool-reallow { flex: 1 1 100%; }
+.pe-tool-actions { gap: 8px; }
+.chip-allowed { background: var(--ok-soft); color: var(--ok); }
+.chip-applying { background: rgba(88, 101, 242, 0.22); color: #a3acff; }
+.chip-revoked, .chip-blocked { background: var(--bg-input); color: var(--muted); }
+.chip-suspended { background: var(--warn-soft); color: var(--warn); }
+.pe-tool-edit { flex: 1 1 100%; display: flex; flex-direction: column; gap: 8px; padding: 8px; border: 1px solid #4e5058; border-radius: 4px; }
+.pe-tool-edit-label { font-size: 12px; font-weight: 600; color: var(--muted); }
+.pe-tool-ops { display: flex; flex-direction: column; gap: 2px; }
+.pe-tool-op .switch-label { cursor: pointer; }
+.pe-tool-scope-field { display: flex; flex-direction: column; gap: 4px; }
+.pe-tool-diff { color: var(--text); }
+.pe-tool-diff.widen { color: var(--warn); }
+.pe-tool-all { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
+.pe-tool-all-confirm { align-self: stretch; }
+@media (max-width: 640px) {
+	.inbox-tool { grid-template-columns: 1fr; gap: 0; }
+	.inbox-tool dt { margin-top: 4px; }
+	.inbox-tool-choices .btn, .inbox-tool-target, .inbox-tool-targets .text-btn { min-height: 44px; }
+	.inbox-review-hide { min-height: 44px; }
+	.pe-tool-row .text-btn, .pe-tool-edit .text-btn, .pe-tool-retry, .pe-tool-pending button { min-height: 44px; }
+	.pe-tool-actions { width: 100%; justify-content: flex-start; }
+	.pe-tool-switch { min-height: 44px; }
+}

package/web/tooltip.d.ts

@@ -8,9 +8,11 @@ export type TipElement = {
 export const TIP_GAP: number;
 export const TIP_MARGIN: number;
 export const TIP_ID: string;
+export const TIP_QUIET_ATTR: string;
 export function placeTip(anchor: Box, tip: { width: number; height: number }, view: { width: number; height: number }): { left: number; top: number; side: "above" | "below" };
 export function adoptTitle(el: Pick<TipElement, "getAttribute" | "setAttribute" | "removeAttribute" | "hasAttribute">): void;
 export function tipText(el: TipElement): string;
+export function tipQuiet(body: Pick<TipElement, "hasAttribute">): boolean;
 export function addId(list: string | null, id: string): string;
 export function removeId(list: string | null, id: string): string;
 export function installTooltips(doc: Document, win: Window & typeof globalThis): void;

package/web/tooltip.js

@@ -9,6 +9,8 @@
 export const TIP_GAP = 6;
 export const TIP_MARGIN = 8;
 export const TIP_ID = "zgw-tip";
+// F3 V2: the mark the first-run tour (web/tour.js) writes on the body while it runs.
+export const TIP_QUIET_ATTR = "data-tip-quiet";
 const HOVER_DELAY_MS = 250;
 const SELECTOR = "[data-tip]";
 
@@ -35,6 +37,15 @@ export function tipText(el) {
 	return el.hasAttribute("data-tip-keep") ? el.getAttribute("data-tip") || "" : "";
 }
 
+/**
+ * F3 V2: while the page runs its own overlay - the first-run tour, which marks the body - no hover or focus tip is drawn,
+ * so the tip of the element the tour highlights (확인함 at step 4) never covers the tour's bubble. The tour removes the
+ * mark when it finishes or is skipped, and tips work again.
+ */
+export function tipQuiet(body) {
+	return body.hasAttribute(TIP_QUIET_ATTR);
+}
+
 export function addId(list, id) {
 	const ids = (list ?? "").split(/\s+/).filter(Boolean);
 	return ids.includes(id) ? ids.join(" ") : [...ids, id].join(" ");
@@ -78,6 +89,7 @@ export function installTooltips(doc, win) {
 		tip.hidden = true;
 	};
 	const show = (el) => {
+		if (tipQuiet(doc.body)) return hide();
 		const text = tipText(el);
 		if (!text || !el.isConnected) return hide();
 		if (owner !== el) hide();

package/web/tour.d.ts

@@ -0,0 +1,57 @@
+export type TourAdvance = "input" | "click" | "next";
+export interface TourStep {
+	readonly id: string;
+	readonly target: string;
+	readonly advance: TourAdvance;
+	readonly hit?: string;
+	readonly drawer?: boolean;
+	readonly opens?: "agents";
+	readonly within?: string;
+}
+export interface TourCover {
+	readonly id: string;
+	readonly open: string;
+	readonly close: string;
+}
+export interface TourStorage {
+	getItem(key: string): string | null;
+	setItem(key: string, value: string): void;
+}
+export type TourReason = "running" | "finished" | "skipped";
+export interface TourState {
+	readonly at: number;
+	readonly done: boolean;
+	readonly reason: TourReason;
+}
+export type Box = { left: number; top: number; right: number; bottom: number };
+export type Size = { width: number; height: number };
+export interface TourController {
+	readonly start: () => void;
+	readonly skip: () => void;
+	readonly active: () => boolean;
+	readonly step: () => number;
+}
+export const TOUR_DONE_KEY: string;
+export const TOUR_ID: string;
+export const HOLE_PAD: number;
+export const BUBBLE_GAP: number;
+export const BUBBLE_MARGIN: number;
+export const TOUR_STEPS: readonly TourStep[];
+export const COVERS: readonly TourCover[];
+export function readTourDone(storage: Pick<TourStorage, "getItem">): boolean;
+export function writeTourDone(storage: Pick<TourStorage, "setItem">): void;
+export function autoStartWanted(storage: Pick<TourStorage, "getItem">): boolean;
+export function startState(): TourState;
+export function tourTransition(state: TourState, action: "advance" | "skip", count?: number): TourState;
+export function stepLabel(at: number, count?: number): string;
+export function advanceMode(step: Pick<TourStep, "advance">, hasHit: boolean): TourAdvance;
+export function hintKey(mode: TourAdvance): string;
+export type TourKeyPlace = "shielded" | "input" | "row" | "other";
+export type TourKeyAction = "skip" | "tab" | "block" | "activate";
+export function keyAction(mode: TourAdvance, key: string, place: TourKeyPlace, shift?: boolean): TourKeyAction | null;
+export function cycleIndex(length: number, at: number, shift: boolean): number;
+export function subjectName(name: string, lang?: string): string;
+export function holeBox(rects: readonly Box[], view: Size, pad?: number): Box | null;
+export function shadeRects(hole: Box, view: Size): { top: Box; right: Box; bottom: Box; left: Box };
+export function placeBubble(hole: Box, size: Size, view: Size): { left: number; top: number; side: "below" | "above" };
+export function installTour(doc: Document, win: Window & typeof globalThis, storage: TourStorage): TourController;