docugate 0.2.0 → 0.2.1

package/pill/dist/pill.js

@@ -93,250 +93,308 @@ async function fetchTour(base) {
 // ---------------------------------------------------------------------------
 // CSS (injected into shadow DOM)
 // ---------------------------------------------------------------------------
-const STYLES = `
-:host { all: initial; }
-*, *::before, *::after { box-sizing: border-box; }
-
-/* ── pill button ── */
-.pill-btn {
-  position: fixed;
-  bottom: 20px;
-  right: 20px;
-  z-index: 2147483647;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 12px;
-  background: #1a1a1a;
-  color: #e8e8e8;
-  border: 1px solid #333;
-  border-radius: 999px;
-  font: 12px/1 -apple-system, "Segoe UI", system-ui, sans-serif;
-  cursor: pointer;
-  user-select: none;
-  letter-spacing: 0.01em;
-  transition: background 0.15s;
-}
-.pill-btn:hover { background: #2a2a2a; }
-.pill-btn:focus-visible { outline: 2px solid #4a90d9; outline-offset: 2px; }
-.pill-dot {
-  width: 6px;
-  height: 6px;
-  background: #4a90d9;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-
-/* ── menu ── */
-.menu {
-  position: fixed;
-  bottom: 54px;
-  right: 20px;
-  z-index: 2147483647;
-  background: #1a1a1a;
-  border: 1px solid #333;
-  border-radius: 8px;
-  overflow: hidden;
-  font: 13px/1 -apple-system, "Segoe UI", system-ui, sans-serif;
-  min-width: 170px;
-}
-.menu-item {
-  display: block;
-  width: 100%;
-  padding: 10px 14px;
-  background: none;
-  border: none;
-  color: #e0e0e0;
-  text-align: left;
-  cursor: pointer;
-  font: inherit;
-  transition: background 0.1s;
-}
-.menu-item:hover { background: #2a2a2a; }
-.menu-item:focus-visible { outline: 2px solid #4a90d9; outline-offset: -2px; }
-.menu-item + .menu-item { border-top: 1px solid #2a2a2a; }
-.menu-item.active { color: #4a90d9; }
-.menu-item:disabled { color: #777; cursor: default; background: none; }
-
-/* ── overlay / backdrop ── */
-.overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 2147483640;
-  pointer-events: none;
-}
-
-/* ── walkthrough card ── */
-.wt-card {
-  position: fixed;
-  z-index: 2147483645;
-  background: #1a1a1a;
-  border: 1px solid #333;
-  border-radius: 10px;
-  padding: 18px 20px 14px;
-  width: 320px;
-  max-width: calc(100vw - 32px);
-  font: 13px/1.55 -apple-system, "Segoe UI", system-ui, sans-serif;
-  color: #ddd;
-}
-.wt-card-heading {
-  font-size: 14px;
-  font-weight: 600;
-  color: #fff;
-  margin: 0 0 12px;
-}
-.wt-field {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  margin-bottom: 8px;
-}
-.wt-field-label {
-  font-size: 10px;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: #666;
-}
-.wt-field-value {
-  font-size: 12px;
-  color: #b0b0b0;
-  word-break: break-all;
-}
-.wt-field-value a {
-  color: #4a90d9;
-  text-decoration: none;
-}
-.wt-field-value a:hover { text-decoration: underline; }
-.wt-prose {
-  font-size: 13px;
-  color: #bbb;
-  margin: 10px 0 14px;
-  line-height: 1.55;
-}
-.wt-nav {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-}
-.wt-btn {
-  padding: 5px 14px;
-  border-radius: 6px;
-  border: 1px solid #444;
-  background: #252525;
-  color: #ddd;
-  font: 12px -apple-system, "Segoe UI", system-ui, sans-serif;
-  cursor: pointer;
-  transition: background 0.1s;
-}
-.wt-btn:hover { background: #333; }
-.wt-btn:focus-visible { outline: 2px solid #4a90d9; outline-offset: 2px; }
-.wt-btn.primary {
-  background: #1e4a8a;
-  border-color: #2a5fa0;
-  color: #fff;
-}
-.wt-btn.primary:hover { background: #25559a; }
-.wt-counter {
-  font-size: 11px;
-  color: #555;
-  margin-right: auto;
-  align-self: center;
-}
-
-/* ── inspector popup ── */
-.insp-popup {
-  position: fixed;
-  z-index: 2147483645;
-  background: #1a1a1a;
-  border: 1px solid #333;
-  border-radius: 8px;
-  padding: 12px 14px 10px;
-  width: 280px;
-  max-width: calc(100vw - 24px);
-  font: 12px/1.5 -apple-system, "Segoe UI", system-ui, sans-serif;
-  color: #ccc;
-  pointer-events: auto;
-}
-.insp-popup-heading {
-  font-size: 13px;
-  font-weight: 600;
-  color: #fff;
-  margin: 0 0 8px;
-}
-.insp-popup-row {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  margin-bottom: 7px;
-}
-.insp-popup-label {
-  font-size: 10px;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: #555;
-}
-.insp-popup-val {
-  font-size: 12px;
-  color: #aaa;
-  word-break: break-all;
-}
-.insp-popup-val a { color: #4a90d9; text-decoration: none; }
-.insp-popup-val a:hover { text-decoration: underline; }
-.insp-popup-prose { font-size: 12px; color: #bbb; margin: 6px 0 10px; }
-.insp-popup-actions {
-  display: flex;
-  gap: 6px;
-  justify-content: flex-end;
-}
-
-/* ── add form ── */
-.add-form {
-  position: fixed;
-  z-index: 2147483646;
-  background: #1a1a1a;
-  border: 1px solid #333;
-  border-radius: 10px;
-  padding: 18px 20px 14px;
-  width: 340px;
-  max-width: calc(100vw - 32px);
-  font: 13px/1.4 -apple-system, "Segoe UI", system-ui, sans-serif;
-  color: #ddd;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-.add-form-title { font-size: 14px; font-weight: 600; color: #fff; margin: 0 0 14px; }
-.add-form label { display: block; font-size: 11px; color: #666; margin-bottom: 4px; margin-top: 10px; text-transform: uppercase; letter-spacing: 0.05em; }
-.add-form label:first-of-type { margin-top: 0; }
-.add-form input, .add-form textarea {
-  width: 100%;
-  background: #111;
-  border: 1px solid #333;
-  border-radius: 5px;
-  color: #ddd;
-  font: 12px/1.4 -apple-system, "Segoe UI", system-ui, sans-serif;
-  padding: 6px 8px;
-  resize: vertical;
-}
-.add-form input:focus, .add-form textarea:focus { outline: 2px solid #4a90d9; border-color: transparent; }
-.add-form textarea { min-height: 60px; }
-.add-form-warn {
-  margin-top: 10px;
-  font-size: 11px;
-  color: #c09a40;
-  background: #1e1a0a;
-  border: 1px solid #3a2e0a;
-  border-radius: 5px;
-  padding: 7px 9px;
-  line-height: 1.5;
-}
-.add-form-warn code { font-family: monospace; color: #e0b840; }
-.add-form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
-
-/* ── reduced motion ── */
-@media (prefers-reduced-motion: reduce) {
-  *, *::before, *::after { transition: none !important; }
-}
+const STYLES = `
+:host { all: initial; }
+*, *::before, *::after { box-sizing: border-box; }
+
+/* One material for everything the pill draws: near-black glass, a hairline
+   border and a soft shadow, the way the Next.js dev indicator looks. */
+.surface {
+  background: rgba(12, 12, 14, 0.92);
+  -webkit-backdrop-filter: blur(12px) saturate(140%);
+  backdrop-filter: blur(12px) saturate(140%);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 12px 32px -8px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
+  color: #ededed;
+  font: 13px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* ── the badge ── */
+.pill-btn {
+  position: fixed;
+  z-index: 2147483647;
+  display: flex;
+  align-items: center;
+  height: 36px;
+  padding: 0 9px;
+  border-radius: 999px;
+  cursor: pointer;
+  user-select: none;
+  touch-action: none;
+  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.15s;
+}
+.pill-btn.away { opacity: 0; pointer-events: none; transform: scale(0.8); }
+.pill-btn.dragging { cursor: grabbing; transition: none; }
+.pill-btn:hover { background: rgba(24, 24, 28, 0.96); }
+.pill-btn:active:not(.dragging) { transform: scale(0.96); }
+.pill-btn:focus-visible { outline: 2px solid #F4C43F; outline-offset: 3px; }
+.pill-glyph { width: 18px; height: 14px; flex-shrink: 0; display: block; }
+.pill-label {
+  max-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  opacity: 0;
+  margin-left: 0;
+  transition: max-width 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s, margin 0.28s;
+}
+.pill-btn:hover .pill-label, .pill-btn:focus-visible .pill-label, .pill-btn.open .pill-label {
+  max-width: 220px;
+  opacity: 1;
+  margin-left: 8px;
+}
+.pill-count {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  min-width: 17px;
+  height: 17px;
+  padding: 0 5px;
+  border-radius: 999px;
+  background: #F4C43F;
+  color: #10122F;
+  font: 700 10.5px/17px -apple-system, "Segoe UI", system-ui, sans-serif;
+  text-align: center;
+  box-shadow: 0 0 0 2px rgba(12, 12, 14, 0.92);
+}
+.pill-btn.inspecting { box-shadow: 0 0 0 2px #F4C43F, 0 12px 32px -8px rgba(0, 0, 0, 0.55); }
+
+/* ── the panel ── */
+.menu {
+  position: fixed;
+  z-index: 2147483647;
+  width: 288px;
+  border-radius: 12px;
+  overflow: hidden;
+  transform-origin: var(--origin, bottom right);
+  animation: pop 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+@keyframes pop { from { opacity: 0; transform: scale(0.96) translateY(var(--rise, 4px)); } }
+.menu-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 14px 10px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
+}
+.menu-route { font: 12px ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace; color: #a1a1a1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.menu-tag { flex-shrink: 0; font-size: 11px; color: #10122F; background: #F4C43F; border-radius: 999px; padding: 1px 8px; font-weight: 600; }
+.menu-tag.empty { color: #a1a1a1; background: rgba(255, 255, 255, 0.08); }
+.menu-list { padding: 6px; }
+.menu-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  width: 100%;
+  padding: 8px 10px;
+  border: 0;
+  border-radius: 7px;
+  background: none;
+  color: #ededed;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.menu-item:hover, .menu-item:focus-visible { background: rgba(255, 255, 255, 0.07); outline: none; }
+.menu-item:disabled { color: #6e6e6e; cursor: default; background: none; }
+.menu-hint { color: #8f8f8f; font-size: 12px; }
+kbd {
+  font: 11px ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
+  color: #a1a1a1;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  border-bottom-width: 2px;
+  border-radius: 5px;
+  padding: 0 5px;
+}
+.switch { position: relative; width: 28px; height: 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); transition: background 0.15s; flex-shrink: 0; }
+.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1); }
+.menu-item[aria-checked="true"] .switch { background: #F4C43F; }
+.menu-item { padding: 9px 10px; }
+.menu-item[aria-checked="true"] .switch::after { transform: translateX(12px); background: #10122F; }
+.menu-foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 9px 14px;
+  border-top: 1px solid rgba(255, 255, 255, 0.07);
+  font-size: 12px;
+  color: #8f8f8f;
+}
+.menu-foot .live { display: inline-flex; align-items: center; gap: 6px; }
+.menu-foot .live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #45d483; box-shadow: 0 0 0 3px rgba(69, 212, 131, 0.15); }
+.link-btn { border: 0; background: none; color: #a1a1a1; font: inherit; cursor: pointer; padding: 2px 4px; border-radius: 5px; }
+.link-btn:hover, .link-btn:focus-visible { color: #ededed; background: rgba(255, 255, 255, 0.07); outline: none; }
+
+/* ── walkthrough card and inspector popup ── */
+.wt-card, .insp-popup {
+  position: fixed;
+  z-index: 2147483645;
+  border-radius: 12px;
+  width: 340px;
+  max-width: calc(100vw - 24px);
+  padding: 16px 16px 12px;
+  animation: pop 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
+  pointer-events: auto;
+}
+.wt-eyebrow { font-size: 11px; color: #8f8f8f; margin: 0 0 4px; letter-spacing: 0.02em; }
+.wt-card-heading, .insp-popup-heading { font-size: 15px; font-weight: 600; color: #fff; margin: 0 0 6px; letter-spacing: -0.01em; }
+.wt-prose, .insp-popup-prose { font-size: 13px; color: #c7c7c7; margin: 0 0 12px; line-height: 1.55; }
+.wt-prose code, .insp-popup-prose code { font: 12px ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace; color: #f5f0e3; background: rgba(255, 255, 255, 0.08); border-radius: 4px; padding: 1px 5px; }
+.wt-fields {
+  display: grid;
+  grid-template-columns: 58px 1fr;
+  gap: 6px 10px;
+  padding: 10px 12px;
+  margin: 0 0 12px;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+}
+.wt-field-label, .insp-popup-label { font-size: 11px; color: #8f8f8f; padding-top: 1px; }
+.wt-field-value, .insp-popup-val { font: 12px/1.45 ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace; color: #e4e4e4; overflow-wrap: break-word; }
+.wt-field-value a, .insp-popup-val a { color: #F4C43F; text-decoration: none; }
+.wt-field-value a:hover, .insp-popup-val a:hover { text-decoration: underline; }
+.wt-nav, .insp-popup-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
+.wt-dots { display: flex; gap: 4px; margin-right: auto; }
+.wt-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); transition: background 0.2s, width 0.2s; }
+.wt-dots i.on { width: 16px; border-radius: 999px; background: #F4C43F; }
+.wt-btn {
+  height: 28px;
+  padding: 0 12px;
+  border-radius: 7px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: rgba(255, 255, 255, 0.04);
+  color: #ededed;
+  font: 500 12.5px -apple-system, "Segoe UI", system-ui, sans-serif;
+  cursor: pointer;
+  transition: background 0.12s, border-color 0.12s;
+}
+.wt-btn:hover { background: rgba(255, 255, 255, 0.09); }
+.wt-btn:focus-visible { outline: 2px solid #F4C43F; outline-offset: 2px; }
+.wt-btn.primary { background: #F4C43F; border-color: #F4C43F; color: #10122F; font-weight: 600; }
+.wt-btn.primary:hover { background: #ffd35c; border-color: #ffd35c; }
+
+/* ── add / edit form ── */
+.add-form {
+  position: fixed;
+  z-index: 2147483646;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 380px;
+  max-width: calc(100vw - 24px);
+  max-height: calc(100vh - 48px);
+  overflow: auto;
+  border-radius: 14px;
+  padding: 18px 18px 14px;
+}
+.add-form-title { font-size: 15px; font-weight: 600; color: #fff; margin: 0 0 12px; }
+.add-form label { display: block; font-size: 11.5px; color: #a1a1a1; margin: 10px 0 4px; }
+.add-form label:first-of-type { margin-top: 0; }
+.add-form input, .add-form textarea {
+  width: 100%;
+  background: rgba(0, 0, 0, 0.35);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 7px;
+  color: #ededed;
+  font: 12.5px/1.4 ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
+  padding: 7px 9px;
+  resize: vertical;
+}
+.add-form textarea { min-height: 64px; font-family: -apple-system, "Segoe UI", system-ui, sans-serif; }
+.add-form input:focus, .add-form textarea:focus { outline: none; border-color: #F4C43F; box-shadow: 0 0 0 3px rgba(244, 196, 63, 0.18); }
+.add-form-warn {
+  margin-top: 12px;
+  font-size: 12px;
+  line-height: 1.5;
+  color: #f1dc9a;
+  background: rgba(244, 196, 63, 0.08);
+  border: 1px solid rgba(244, 196, 63, 0.25);
+  border-radius: 8px;
+  padding: 8px 10px;
+}
+.add-form-warn code { font-family: ui-monospace, "Cascadia Mono", Menlo, monospace; color: #F4C43F; }
+.insp-popup { width: 360px; }
+.panel-section { margin: 4px 0 6px; font-size: 11px; color: #8f8f8f; letter-spacing: 0.02em; }
+.panel-hint { margin: 0 0 12px; font-size: 12.5px; color: #a1a1a1; }
+.panel-file { margin-right: auto; font: 11px ui-monospace, "Cascadia Mono", Menlo, monospace; color: #6e6e6e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.panel-error { margin: 10px 0 0; font-size: 12px; color: #ff9b8a; }
+.file-link { all: unset; cursor: pointer; font: inherit; color: #ededed; border-bottom: 1px dashed rgba(244, 196, 63, 0.55); overflow-wrap: anywhere; }
+.file-link:hover, .file-link:focus-visible { color: #F4C43F; border-bottom-style: solid; }
+.panel-form label { display: block; font-size: 11.5px; color: #a1a1a1; margin: 10px 0 4px; }
+.panel-form label:first-of-type { margin-top: 0; }
+.panel-form input, .panel-form textarea {
+  width: 100%;
+  background: rgba(0, 0, 0, 0.35);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 7px;
+  color: #ededed;
+  font: 12.5px/1.4 ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
+  padding: 7px 9px;
+  resize: vertical;
+}
+.panel-form textarea { min-height: 72px; font-family: -apple-system, "Segoe UI", system-ui, sans-serif; font-size: 13px; }
+.panel-form input::placeholder, .panel-form textarea::placeholder { color: #555; font-style: italic; }
+.panel-form input:focus, .panel-form textarea:focus { outline: none; border-color: #F4C43F; box-shadow: 0 0 0 3px rgba(244, 196, 63, 0.18); }
+.panel-form .insp-popup-actions { margin-top: 14px; }
+.wt-btn.ghost { border-color: transparent; background: none; color: #a1a1a1; }
+.wt-btn.ghost:hover { color: #ededed; background: rgba(255, 255, 255, 0.07); }
+.wt-btn.danger { border-color: transparent; background: none; color: #ff9b8a; }
+.wt-btn.danger:hover { background: rgba(255, 110, 90, 0.12); }
+.toast {
+  position: fixed;
+  z-index: 2147483647;
+  left: 50%;
+  bottom: 24px;
+  transform: translateX(-50%);
+  max-width: min(520px, calc(100vw - 32px));
+  padding: 9px 14px;
+  border-radius: 10px;
+  font-size: 12.5px;
+  animation: pop 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+.wt-section { padding: 6px; }
+.wt-head { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 8px 8px 6px; border-radius: 8px; cursor: pointer; }
+.wt-head:hover, .wt-head:focus-visible { background: rgba(255, 255, 255, 0.05); }
+.wt-head .chev { width: 16px; height: 16px; color: #a1a1a1; transition: transform 0.2s; flex-shrink: 0; }
+.wt-head[aria-expanded="false"] .chev { transform: rotate(180deg); }
+.wt-title { font-weight: 600; color: #fff; margin-right: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.ticks { display: flex; gap: 2px; }
+.ticks i { width: 2px; height: 11px; border-radius: 1px; background: rgba(255, 255, 255, 0.16); }
+.ticks i.on { background: #F4C43F; }
+.wt-count { font-size: 12px; color: #a1a1a1; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.steps { margin: 4px 0 2px; padding: 6px; border-radius: 10px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.06); }
+.step-row { display: flex; align-items: center; border-radius: 7px; }
+.step-row:hover { background: rgba(255, 255, 255, 0.06); }
+.step, .add-step { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 7px 8px; border-radius: 7px; cursor: pointer; color: #ededed; }
+.step:focus-visible, .add-step:focus-visible, .step-edit:focus-visible { outline: 2px solid #F4C43F; outline-offset: -2px; }
+.step:disabled { cursor: default; opacity: 0.45; }
+.step .label, .add-step .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.num { display: grid; place-items: center; width: 20px; height: 20px; flex-shrink: 0; border-radius: 6px; font-size: 11px; font-weight: 600; color: #a1a1a1; border: 1px solid rgba(255, 255, 255, 0.14); }
+.num svg { width: 13px; height: 13px; }
+.step-row.done .num { background: #F4C43F; border-color: #F4C43F; color: #10122F; }
+.step-row.done .label { color: #8f8f8f; }
+.step-row.current .num { background: #ededed; border-color: #ededed; color: #0c0c0e; }
+.step-edit { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 26px; height: 26px; margin-right: 4px; border-radius: 6px; color: #8f8f8f; cursor: pointer; opacity: 0; }
+.step-edit svg { width: 15px; height: 15px; }
+.step-row:hover .step-edit, .step-edit:focus-visible { opacity: 1; }
+.step-edit:hover { color: #F4C43F; background: rgba(255, 255, 255, 0.07); }
+.step-edit:disabled { display: none; }
+.add-step { color: #a1a1a1; }
+.add-step .num { border-style: dashed; font-size: 14px; font-weight: 400; }
+.add-step:hover { background: rgba(255, 255, 255, 0.06); color: #ededed; }
+.wt-empty { margin: 4px 8px 6px; font-size: 12.5px; line-height: 1.5; color: #a1a1a1; }
+.item-text { display: flex; flex-direction: column; gap: 1px; }
+.menu-list { border-top: 1px solid rgba(255, 255, 255, 0.07); }
+.menu { width: 320px; }
+.add-form-actions { display: flex; gap: 6px; justify-content: flex-end; margin-top: 14px; }
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { transition: none !important; animation: none !important; }
+}
 `;
 // ---------------------------------------------------------------------------
 // Highlight ring drawn on a canvas over the page
@@ -377,7 +435,7 @@ function drawRing(canvas, rect) {
     ctx.fill();
     ctx.restore();
     // ring
-    ctx.strokeStyle = '#4a90d9';
+    ctx.strokeStyle = '#F4C43F';
     ctx.lineWidth = 2;
     ctx.beginPath();
     ctx.moveTo(x + r, y);
@@ -400,7 +458,7 @@ function clearCanvas(canvas) {
 // Card positioning: place card near target without clipping viewport
 // ---------------------------------------------------------------------------
 function positionCard(card, rect) {
-    const cw = 320;
+    const cw = card.offsetWidth || 340;
     const ch = card.offsetHeight || 220;
     const vw = window.innerWidth;
     const vh = window.innerHeight;
@@ -428,9 +486,9 @@ function createHighlightEl() {
         'position:fixed',
         'pointer-events:none',
         'z-index:2147483642',
-        'border:2px solid #4a90d9',
+        'border:2px solid #F4C43F',
         'border-radius:4px',
-        'background:rgba(74,144,217,0.08)',
+        'background:rgba(244,196,63,0.10)',
         'transition:top 0.06s,left 0.06s,width 0.06s,height 0.06s',
         'display:none',
     ].join(';');
@@ -444,6 +502,58 @@ function moveHighlight(el, rect) {
     el.style.height = `${rect.height + 4}px`;
 }
 // ---------------------------------------------------------------------------
+// Text helpers for cards
+// ---------------------------------------------------------------------------
+/** The data-tour value inside a selector like [data-tour="invoice-total"], if any. */
+function tourValue(selector) {
+    return selector.match(/data-tour=["']([^"']+)["']/)?.[1];
+}
+/** Lets a long path wrap after its slashes rather than in the middle of a name. */
+function breakable(text) {
+    return text.replace(/\//g, '/\u200b');
+}
+/** Writes prose into `el`, turning `backticked` spans into inline code. Never HTML. */
+function renderProse(el, prose) {
+    prose.split(/(`[^`]+`)/).forEach((part) => {
+        if (part.startsWith('`') && part.endsWith('`') && part.length > 2) {
+            const code = document.createElement('code');
+            code.textContent = part.slice(1, -1);
+            el.appendChild(code);
+        }
+        else if (part) {
+            el.appendChild(document.createTextNode(part));
+        }
+    });
+}
+const CORNERS = ['bottom-right', 'bottom-left', 'top-right', 'top-left'];
+const CORNER_KEY = 'docugate-pill-corner';
+const HIDDEN_KEY = 'docugate-pill-hidden';
+const EDGE = 16;
+/** The corner nearest to a point, for snapping the badge where it is dropped. */
+function nearestCorner(x, y, width, height) {
+    const vertical = y < height / 2 ? 'top' : 'bottom';
+    const horizontal = x < width / 2 ? 'left' : 'right';
+    return `${vertical}-${horizontal}`;
+}
+function savedCorner() {
+    try {
+        const value = localStorage.getItem(CORNER_KEY);
+        return value && CORNERS.includes(value) ? value : 'bottom-right';
+    }
+    catch {
+        return 'bottom-right';
+    }
+}
+/** Pins an element to a corner, `offset` px further in from the edge. */
+function pin(el, corner, offset = 0) {
+    const [v, h] = corner.split('-');
+    el.style.top = el.style.bottom = el.style.left = el.style.right = '';
+    el.style[v] = `${EDGE + offset}px`;
+    el.style[h] = `${EDGE}px`;
+}
+/** DocuGate's owl glyph, in cream and gold. */
+const GLYPH = `<svg class="pill-glyph" viewBox="0 0 48 36" aria-hidden="true"><defs><mask id="dg-m" maskUnits="userSpaceOnUse" x="0" y="0" width="48" height="36"><rect width="48" height="36" fill="#fff"/><polygon points="24,19 30.5,25 24,33.5 17.5,25" fill="#000" stroke="#000" stroke-width="3.2" stroke-linejoin="round"/></mask></defs><g transform="translate(-0.9 -2.4)"><g mask="url(#dg-m)"><circle cx="12.5" cy="14" r="9.5" fill="none" stroke="#F5F0E3" stroke-width="4.2"/><circle cx="35.5" cy="14" r="9.5" fill="none" stroke="#F5F0E3" stroke-width="4.2"/><circle cx="14" cy="12.5" r="4.4" fill="#F5F0E3"/><circle cx="37" cy="12.5" r="4.4" fill="#F5F0E3"/></g><polygon points="24,19 24,33.5 17.5,25" fill="#F4C43F"/><polygon points="24,19 30.5,25 24,33.5" fill="#D99A1E"/></g></svg>`;
+// ---------------------------------------------------------------------------
 // Main Pill class
 // ---------------------------------------------------------------------------
 class DocugatePill {
@@ -461,9 +571,13 @@ class DocugatePill {
         this.wtCard = null;
         this.inspPopup = null;
         this.addForm = null;
+        this.inspEl = null;
+        this.inspectedPath = location.pathname;
+        this.listCollapsed = false;
         this.highlightEl = null;
         this.evtSource = null;
         this.isStaticMode = false;
+        this.corner = savedCorner();
         this.base = base;
         this.isStaticMode = !!window.DOCUGATE_TOUR;
         this.host = document.createElement('div');
@@ -498,16 +612,81 @@ class DocugatePill {
         this.removePill();
         if (!this.alive)
             return;
+        try {
+            if (sessionStorage.getItem(HIDDEN_KEY))
+                return;
+        }
+        catch {
+            // storage blocked: show the pill
+        }
+        const stops = this.tour?.stops.length ?? 0;
         const btn = document.createElement('button');
-        btn.className = 'pill-btn';
-        btn.setAttribute('aria-label', 'Docugate tour');
-        btn.innerHTML = `<span class="pill-dot"></span>Tour`;
+        btn.className = `pill-btn surface${this.inspectorActive ? ' inspecting' : ''}`;
+        btn.setAttribute('aria-haspopup', 'menu');
+        btn.setAttribute('aria-expanded', 'false');
+        btn.setAttribute('aria-label', `DocuGate tour: ${stops ? `${stops} stops on this page` : 'no tour on this page yet'}`);
+        btn.innerHTML =
+            GLYPH +
+                `<span class="pill-label">${stops ? `${stops} stop${stops === 1 ? '' : 's'} on this page` : 'No tour on this page yet'}</span>` +
+                (stops ? `<span class="pill-count" aria-hidden="true">${stops}</span>` : '');
+        pin(btn, this.corner);
+        this.makeDraggable(btn);
+        this.shadow.appendChild(btn);
+        this.pillBtn = btn;
+    }
+    /**
+     * Click opens the panel; a drag of a few pixels moves the badge instead and
+     * drops it in the nearest corner, which is remembered for next time.
+     */
+    makeDraggable(btn) {
+        let start = null;
+        let dragged = false;
+        btn.addEventListener('pointerdown', (e) => {
+            if (e.button !== 0)
+                return;
+            start = { x: e.clientX, y: e.clientY };
+            dragged = false;
+            btn.setPointerCapture(e.pointerId);
+        });
+        btn.addEventListener('pointermove', (e) => {
+            if (!start)
+                return;
+            const dx = e.clientX - start.x;
+            const dy = e.clientY - start.y;
+            if (!dragged && Math.hypot(dx, dy) < 5)
+                return;
+            if (!dragged) {
+                dragged = true;
+                this.closeMenu();
+                btn.classList.add('dragging');
+            }
+            btn.style.transform = `translate(${dx}px, ${dy}px)`;
+        });
+        btn.addEventListener('pointerup', (e) => {
+            if (!start)
+                return;
+            start = null;
+            if (!dragged)
+                return;
+            btn.classList.remove('dragging');
+            btn.style.transform = '';
+            this.corner = nearestCorner(e.clientX, e.clientY, window.innerWidth, window.innerHeight);
+            try {
+                localStorage.setItem(CORNER_KEY, this.corner);
+            }
+            catch {
+                // not remembered, still moved
+            }
+            pin(btn, this.corner);
+        });
         btn.addEventListener('click', (e) => {
             e.stopPropagation();
+            if (dragged) {
+                dragged = false;
+                return;
+            }
             this.toggleMenu();
         });
-        this.shadow.appendChild(btn);
-        this.pillBtn = btn;
     }
     removePill() {
         this.pillBtn?.remove();
@@ -526,48 +705,203 @@ class DocugatePill {
     openMenu() {
         this.closeMenu();
         const menu = document.createElement('div');
-        menu.className = 'menu';
-        menu.setAttribute('role', 'menu');
-        const walkBtn = document.createElement('button');
-        walkBtn.className = 'menu-item';
-        const stops = this.tour?.stops.length ?? 0;
-        walkBtn.textContent = stops ? 'Walkthrough' : 'No tour on this page yet';
-        walkBtn.disabled = !stops;
-        walkBtn.setAttribute('role', 'menuitem');
-        walkBtn.addEventListener('click', () => { this.closeMenu(); this.startWalkthrough(); });
-        const inspBtn = document.createElement('button');
-        inspBtn.className = `menu-item${this.inspectorActive ? ' active' : ''}`;
-        inspBtn.textContent = this.inspectorActive ? 'Inspector: on' : 'Inspector';
-        inspBtn.setAttribute('role', 'menuitem');
-        inspBtn.addEventListener('click', () => { this.closeMenu(); this.toggleInspector(); });
-        menu.appendChild(walkBtn);
-        menu.appendChild(inspBtn);
+        menu.className = 'menu surface';
+        menu.setAttribute('role', 'dialog');
+        menu.setAttribute('aria-label', 'DocuGate tour');
+        menu.append(this.walkthroughSection(), this.inspectorRow(), this.menuFooter());
+        // Open away from the corner the badge sits in.
+        const [v, h] = this.corner.split('-');
+        pin(menu, this.corner, 44);
+        menu.style.setProperty('--origin', `${v} ${h}`);
+        menu.style.setProperty('--rise', v === 'bottom' ? '6px' : '-6px');
         this.shadow.appendChild(menu);
         this.menuEl = menu;
         this.menuOpen = true;
+        this.pillBtn?.classList.add('open');
+        this.pillBtn?.setAttribute('aria-expanded', 'true');
         const close = (e) => {
-            if (!menu.contains(e.target) && e.target !== this.pillBtn) {
+            const inside = e.composedPath().some((n) => n === menu || n === this.pillBtn);
+            if (e instanceof KeyboardEvent ? e.key === 'Escape' : !inside) {
                 this.closeMenu();
                 document.removeEventListener('click', close, true);
+                document.removeEventListener('keydown', close, true);
             }
         };
         document.addEventListener('click', close, true);
+        document.addEventListener('keydown', close, true);
+    }
+    /**
+     * The walkthrough as a checklist: progress at the top, then every step with
+     * its state. Click a step to go there, the pencil to correct it, and the last
+     * row to add one. A page with no walkthrough offers its first step.
+     */
+    walkthroughSection() {
+        const stops = this.tour?.stops ?? [];
+        const seen = this.visited();
+        const done = stops.filter((s) => seen.has(s.target)).length;
+        const current = stops.find((s) => !seen.has(s.target));
+        const section = document.createElement('div');
+        section.className = 'wt-section';
+        const head = document.createElement('button');
+        head.className = 'wt-head';
+        head.setAttribute('aria-expanded', String(!this.listCollapsed));
+        const ticks = 20;
+        const lit = stops.length ? Math.round((done / stops.length) * ticks) : 0;
+        head.innerHTML =
+            `<svg class="chev" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 10l4-4 4 4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>` +
+                `<span class="wt-title"></span>` +
+                (stops.length
+                    ? `<span class="ticks" aria-hidden="true">${Array.from({ length: ticks }, (_, i) => `<i class="${i < lit ? 'on' : ''}"></i>`).join('')}</span><span class="wt-count">${done}/${stops.length}</span>`
+                    : `<span class="wt-count">No steps yet</span>`);
+        head.querySelector('.wt-title').textContent = this.tour?.title ?? 'Walkthrough';
+        head.addEventListener('click', () => {
+            this.listCollapsed = !this.listCollapsed;
+            this.openMenu();
+        });
+        section.appendChild(head);
+        if (this.listCollapsed)
+            return section;
+        const list = document.createElement('div');
+        list.className = 'steps';
+        stops.forEach((stop, i) => {
+            const state = seen.has(stop.target) ? 'done' : stop === current ? 'current' : 'next';
+            const onPage = document.querySelector(stop.target) !== null;
+            const row = document.createElement('div');
+            row.className = `step-row ${state}`;
+            const go = document.createElement('button');
+            go.className = 'step';
+            go.disabled = !onPage;
+            go.title = onPage ? `Go to step ${i + 1}` : 'Not on the page right now';
+            go.innerHTML =
+                `<span class="num">${state === 'done' ? '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M4 8.5l2.5 2.5L12 5.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>' : i + 1}</span><span class="label"></span>`;
+            go.querySelector('.label').textContent = stop.heading;
+            go.addEventListener('click', () => {
+                this.closeMenu();
+                this.startWalkthrough(stop);
+            });
+            row.appendChild(go);
+            if (!this.isStaticMode) {
+                const edit = document.createElement('button');
+                edit.className = 'step-edit';
+                edit.setAttribute('aria-label', `Edit step ${i + 1}, ${stop.heading}`);
+                edit.innerHTML = `<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M10.5 3.5l2 2L6 12H4v-2z" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg>`;
+                edit.disabled = !onPage;
+                edit.addEventListener('click', () => {
+                    const el = document.querySelector(stop.target);
+                    this.closeMenu();
+                    if (el)
+                        this.showInspPopup(el, stop, true);
+                });
+                row.appendChild(edit);
+            }
+            list.appendChild(row);
+        });
+        if (!stops.length) {
+            const empty = document.createElement('p');
+            empty.className = 'wt-empty';
+            empty.textContent = this.isStaticMode
+                ? 'This page has no walkthrough.'
+                : 'This page has no walkthrough yet. Add the first step yourself, or let IBM Bob write it with docugate tour init.';
+            list.appendChild(empty);
+        }
+        if (!this.isStaticMode) {
+            const add = document.createElement('button');
+            add.className = 'add-step';
+            add.innerHTML = `<span class="num">+</span><span class="label"></span>`;
+            add.querySelector('.label').textContent = stops.length ? 'Add a step' : 'Add the first step';
+            add.addEventListener('click', () => {
+                this.closeMenu();
+                if (!this.inspectorActive)
+                    this.toggleInspector();
+                this.toast('Click the element this step should explain.');
+            });
+            list.appendChild(add);
+        }
+        section.appendChild(list);
+        return section;
+    }
+    /** One switch: while it is on, clicking anything shows its info, or lets you add it. */
+    inspectorRow() {
+        const row = document.createElement('div');
+        row.className = 'menu-list';
+        const b = document.createElement('button');
+        b.className = 'menu-item';
+        b.setAttribute('role', 'switch');
+        b.setAttribute('aria-checked', String(this.inspectorActive));
+        b.innerHTML = `<span class="item-text"><span></span><span class="menu-hint"></span></span><span class="switch" aria-hidden="true"></span>`;
+        const [label, hint] = b.querySelectorAll('.item-text span');
+        label.textContent = 'Inspector';
+        hint.textContent = this.isStaticMode ? 'Click anything to see what it is' : 'Click anything to see it, fix it, or add it';
+        b.addEventListener('click', () => {
+            this.closeMenu();
+            this.toggleInspector();
+        });
+        row.appendChild(b);
+        return row;
+    }
+    menuFooter() {
+        const foot = document.createElement('div');
+        foot.className = 'menu-foot';
+        const status = document.createElement('span');
+        status.className = 'live';
+        status.textContent = this.isStaticMode ? 'Static demo' : this.base.replace(/^https?:\/\//, '');
+        const hide = document.createElement('button');
+        hide.className = 'link-btn';
+        hide.textContent = 'Hide';
+        hide.title = 'Hide until this tab is reloaded';
+        hide.addEventListener('click', () => {
+            try {
+                sessionStorage.setItem(HIDDEN_KEY, '1');
+            }
+            catch {
+                // hidden for now only
+            }
+            if (this.inspectorActive)
+                this.stopInspector();
+            this.removePill();
+        });
+        foot.append(status, hide);
+        return foot;
+    }
+    /** Steps seen on this screen in this tab, by target, so the checklist shows progress. */
+    visited() {
+        try {
+            return new Set(JSON.parse(sessionStorage.getItem(`docugate-seen:${this.tour?.route ?? location.pathname}`) ?? '[]'));
+        }
+        catch {
+            return new Set();
+        }
+    }
+    markVisited(target) {
+        const seen = this.visited();
+        seen.add(target);
+        try {
+            sessionStorage.setItem(`docugate-seen:${this.tour?.route ?? location.pathname}`, JSON.stringify([...seen]));
+        }
+        catch {
+            // progress is only shown for this session anyway
+        }
     }
     closeMenu() {
         this.menuEl?.remove();
         this.menuEl = null;
         this.menuOpen = false;
+        this.pillBtn?.classList.remove('open');
+        this.pillBtn?.setAttribute('aria-expanded', 'false');
     }
     // ── Walkthrough ───────────────────────────────────────────────────────────
-    startWalkthrough() {
+    startWalkthrough(from) {
         if (!this.tour)
             return;
         // Filter to stops whose target exists in the DOM
         this.wtStops = this.tour.stops.filter((s) => document.querySelector(s.target) !== null);
         if (!this.wtStops.length)
             return;
+        const startAt = from ? Math.max(0, this.wtStops.indexOf(from)) : 0;
         this.walkthroughActive = true;
-        this.wtIndex = 0;
+        // The card needs the corner the badge sits in; it steps aside until Done.
+        this.pillBtn?.classList.add('away');
+        this.wtIndex = startAt;
         this.canvas = createRingCanvas();
         document.body.appendChild(this.canvas);
         document.addEventListener('keydown', this.boundHandleKey);
@@ -581,6 +915,7 @@ class DocugatePill {
             this.nextWtStep();
             return;
         }
+        this.markVisited(stop.target);
         const rect = target.getBoundingClientRect();
         if (this.canvas) {
             this.canvas.width = window.innerWidth;
@@ -590,14 +925,26 @@ class DocugatePill {
         target.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
         this.wtCard?.remove();
         const card = document.createElement('div');
-        card.className = 'wt-card';
+        card.className = 'wt-card surface';
         card.setAttribute('role', 'dialog');
         card.setAttribute('aria-modal', 'true');
         card.setAttribute('aria-label', stop.heading);
+        const eyebrow = document.createElement('p');
+        eyebrow.className = 'wt-eyebrow';
+        eyebrow.textContent = `${this.tour?.title ?? 'Tour'} · stop ${this.wtIndex + 1} of ${this.wtStops.length}`;
+        card.appendChild(eyebrow);
         const heading = document.createElement('h2');
         heading.className = 'wt-card-heading';
         heading.textContent = stop.heading;
         card.appendChild(heading);
+        if (stop.prose) {
+            const prose = document.createElement('p');
+            prose.className = 'wt-prose';
+            renderProse(prose, stop.prose);
+            card.appendChild(prose);
+        }
+        const grid = document.createElement('div');
+        grid.className = 'wt-fields';
         const fields = [];
         if (stop.data)
             fields.push({ label: 'Data', value: stop.data });
@@ -607,8 +954,6 @@ class DocugatePill {
         if (stop.docs)
             fields.push({ label: 'Docs', value: stop.docs, isLink: true });
         for (const f of fields) {
-            const row = document.createElement('div');
-            row.className = 'wt-field';
             const lbl = document.createElement('span');
             lbl.className = 'wt-field-label';
             lbl.textContent = f.label;
@@ -619,28 +964,34 @@ class DocugatePill {
                 a.href = f.value;
                 a.target = '_blank';
                 a.rel = 'noopener noreferrer';
-                a.textContent = f.value;
+                a.textContent = breakable(f.value);
                 val.appendChild(a);
             }
             else {
-                val.textContent = f.value;
+                val.textContent = breakable(f.value);
             }
-            row.appendChild(lbl);
-            row.appendChild(val);
-            card.appendChild(row);
-        }
-        if (stop.prose) {
-            const prose = document.createElement('p');
-            prose.className = 'wt-prose';
-            prose.textContent = stop.prose;
-            card.appendChild(prose);
+            grid.append(lbl, val);
         }
+        card.appendChild(grid);
         const nav = document.createElement('div');
         nav.className = 'wt-nav';
-        const counter = document.createElement('span');
-        counter.className = 'wt-counter';
-        counter.textContent = `${this.wtIndex + 1} / ${this.wtStops.length}`;
-        nav.appendChild(counter);
+        const dots = document.createElement('span');
+        dots.className = 'wt-dots';
+        dots.setAttribute('aria-hidden', 'true');
+        dots.innerHTML = this.wtStops.map((_, i) => `<i class="${i === this.wtIndex ? 'on' : ''}"></i>`).join('');
+        nav.appendChild(dots);
+        if (!this.isStaticMode) {
+            const edit = document.createElement('button');
+            edit.className = 'wt-btn ghost';
+            edit.textContent = 'Edit';
+            edit.addEventListener('click', () => {
+                const el = document.querySelector(stop.target);
+                this.stopWalkthrough();
+                if (el)
+                    this.showInspPopup(el, stop, true);
+            });
+            nav.appendChild(edit);
+        }
         if (this.wtIndex > 0) {
             const back = document.createElement('button');
             back.className = 'wt-btn';
@@ -657,6 +1008,7 @@ class DocugatePill {
         card.appendChild(nav);
         this.shadow.appendChild(card);
         this.wtCard = card;
+        next.focus();
         // Position after appending (needs offsetHeight)
         requestAnimationFrame(() => positionCard(card, rect));
     }
@@ -692,6 +1044,7 @@ class DocugatePill {
     }
     stopWalkthrough() {
         this.walkthroughActive = false;
+        this.pillBtn?.classList.remove('away');
         this.wtCard?.remove();
         this.wtCard = null;
         if (this.canvas) {
@@ -712,6 +1065,7 @@ class DocugatePill {
     }
     startInspector() {
         this.inspectorActive = true;
+        this.pillBtn?.classList.add('inspecting');
         this.highlightEl = createHighlightEl();
         document.body.appendChild(this.highlightEl);
         document.addEventListener('mousemove', this.boundHandleMouseMove, true);
@@ -720,6 +1074,7 @@ class DocugatePill {
     }
     stopInspector() {
         this.inspectorActive = false;
+        this.pillBtn?.classList.remove('inspecting');
         document.removeEventListener('mousemove', this.boundHandleMouseMove, true);
         document.removeEventListener('click', this.boundHandleClick, true);
         document.removeEventListener('keydown', this.boundHandleKey);
@@ -772,185 +1127,331 @@ class DocugatePill {
         }
         return null;
     }
-    showInspPopup(el, stop) {
+    // ── Stop panel: read a stop, or correct it, next to its element ──────────
+    /**
+     * One panel for everything about a stop. It opens reading (what this is and
+     * where its data comes from) and turns into a form in place when the person
+     * edits, so fixing something the AI got wrong never leaves the element.
+     * With no stop, it opens as the form for a new one.
+     */
+    showInspPopup(el, stop, editing = false) {
         this.closeInspPopup();
-        const popup = document.createElement('div');
-        popup.className = 'insp-popup';
-        popup.setAttribute('role', 'dialog');
-        popup.setAttribute('aria-label', stop.heading);
+        const panel = document.createElement('div');
+        panel.className = 'insp-popup surface';
+        panel.setAttribute('role', 'dialog');
+        panel.setAttribute('aria-label', stop ? stop.heading : 'Add to tour');
+        this.shadow.appendChild(panel);
+        this.inspPopup = panel;
+        this.inspEl = el;
+        if (stop && !editing)
+            this.fillView(panel, el, stop);
+        else
+            this.fillForm(panel, el, stop);
+        this.placeNear(panel, el);
+    }
+    fillView(panel, el, stop) {
+        panel.replaceChildren();
+        const stops = this.tour?.stops ?? [];
+        const index = stops.findIndex((s) => s.target === stop.target);
+        const eyebrow = document.createElement('p');
+        eyebrow.className = 'wt-eyebrow';
+        eyebrow.textContent = `${this.tour?.title ?? 'Tour'}${index >= 0 ? ` · stop ${index + 1} of ${stops.length}` : ''}`;
         const heading = document.createElement('h3');
         heading.className = 'insp-popup-heading';
         heading.textContent = stop.heading;
-        popup.appendChild(heading);
-        const rows = [];
-        if (stop.data)
-            rows.push({ label: 'Data', value: stop.data });
-        rows.push({ label: 'Code', value: stop.code });
-        if (stop.source)
-            rows.push({ label: 'Source', value: stop.source });
-        if (stop.docs)
-            rows.push({ label: 'Docs', value: stop.docs, isLink: true });
-        for (const r of rows) {
-            const row = document.createElement('div');
-            row.className = 'insp-popup-row';
+        panel.append(eyebrow, heading);
+        if (stop.prose) {
+            const prose = document.createElement('p');
+            prose.className = 'insp-popup-prose';
+            renderProse(prose, stop.prose);
+            panel.appendChild(prose);
+        }
+        const section = document.createElement('p');
+        section.className = 'panel-section';
+        section.textContent = 'Where it comes from';
+        panel.appendChild(section);
+        const grid = document.createElement('div');
+        grid.className = 'wt-fields';
+        const find = tourValue(stop.target);
+        const row = (label, content) => {
             const lbl = document.createElement('span');
             lbl.className = 'insp-popup-label';
-            lbl.textContent = r.label;
+            lbl.textContent = label;
             const val = document.createElement('span');
             val.className = 'insp-popup-val';
-            if (r.isLink && r.value.startsWith('http')) {
-                const a = document.createElement('a');
-                a.href = r.value;
-                a.target = '_blank';
-                a.rel = 'noopener noreferrer';
-                a.textContent = r.value;
-                val.appendChild(a);
-            }
-            else {
-                val.textContent = r.value;
-            }
-            row.appendChild(lbl);
-            row.appendChild(val);
-            popup.appendChild(row);
-        }
-        if (stop.prose) {
-            const prose = document.createElement('p');
-            prose.className = 'insp-popup-prose';
-            prose.textContent = stop.prose;
-            popup.appendChild(prose);
+            val.appendChild(content);
+            grid.append(lbl, val);
+        };
+        const fileLink = (path, findText) => {
+            if (this.isStaticMode)
+                return document.createTextNode(breakable(path));
+            const b = document.createElement('button');
+            b.className = 'file-link';
+            b.title = 'Open in your editor';
+            b.textContent = breakable(path);
+            b.addEventListener('click', () => this.openInEditor(path, findText));
+            return b;
+        };
+        if (stop.data)
+            row('Data', document.createTextNode(stop.data));
+        row('Code', fileLink(stop.code, find));
+        if (stop.source)
+            row('Source', fileLink(stop.source));
+        if (stop.docs && /^https?:\/\//.test(stop.docs)) {
+            const a = document.createElement('a');
+            a.href = stop.docs;
+            a.target = '_blank';
+            a.rel = 'noopener noreferrer';
+            a.textContent = breakable(stop.docs);
+            row('Docs', a);
         }
+        panel.appendChild(grid);
+        const actions = document.createElement('div');
+        actions.className = 'insp-popup-actions';
+        const where = document.createElement('span');
+        where.className = 'panel-file';
+        where.textContent = this.tour?.file ?? '';
+        actions.appendChild(where);
         if (!this.isStaticMode) {
-            const actions = document.createElement('div');
-            actions.className = 'insp-popup-actions';
-            const editBtn = document.createElement('button');
-            editBtn.className = 'wt-btn';
-            editBtn.textContent = 'Edit';
-            editBtn.addEventListener('click', () => {
-                this.closeInspPopup();
-                this.showAddForm(el, stop);
+            const edit = document.createElement('button');
+            edit.className = 'wt-btn';
+            edit.textContent = 'Edit';
+            edit.addEventListener('click', () => {
+                this.fillForm(panel, el, stop);
+                this.placeNear(panel, el);
             });
-            actions.appendChild(editBtn);
-            const closeBtn = document.createElement('button');
-            closeBtn.className = 'wt-btn primary';
-            closeBtn.textContent = 'Close';
-            closeBtn.addEventListener('click', () => this.closeInspPopup());
-            actions.appendChild(closeBtn);
-            popup.appendChild(actions);
+            actions.appendChild(edit);
         }
-        else {
-            const closeBtn = document.createElement('button');
-            closeBtn.className = 'wt-btn primary';
-            closeBtn.textContent = 'Close';
-            closeBtn.addEventListener('click', () => this.closeInspPopup());
-            const actions = document.createElement('div');
-            actions.className = 'insp-popup-actions';
-            actions.appendChild(closeBtn);
-            popup.appendChild(actions);
-        }
-        // Position near element
-        const rect = el.getBoundingClientRect();
-        popup.style.top = `${Math.min(rect.bottom + 10, window.innerHeight - 200)}px`;
-        popup.style.left = `${Math.min(rect.left, window.innerWidth - 296)}px`;
-        this.shadow.appendChild(popup);
-        this.inspPopup = popup;
+        const close = document.createElement('button');
+        close.className = 'wt-btn primary';
+        close.textContent = 'Close';
+        close.addEventListener('click', () => this.closeInspPopup());
+        actions.appendChild(close);
+        panel.appendChild(actions);
+        close.focus();
     }
-    closeInspPopup() {
-        this.inspPopup?.remove();
-        this.inspPopup = null;
-    }
-    // ── Add/Edit form ─────────────────────────────────────────────────────────
-    showAddForm(el, existing) {
-        this.closeAddForm();
+    fillForm(panel, el, existing) {
+        panel.replaceChildren();
+        panel.setAttribute('aria-label', existing ? `Edit ${existing.heading}` : 'Add to tour');
         const { selector, needsAttribute } = suggestSelector(el);
-        const form = document.createElement('div');
-        form.className = 'add-form';
-        form.setAttribute('role', 'dialog');
-        form.setAttribute('aria-modal', 'true');
-        form.setAttribute('aria-label', existing ? 'Edit stop' : 'Add stop');
         const title = document.createElement('h3');
-        title.className = 'add-form-title';
-        title.textContent = existing ? 'Edit stop' : 'Add to tour';
-        form.appendChild(title);
+        title.className = 'insp-popup-heading';
+        title.textContent = existing ? 'Edit this stop' : 'Add to tour';
+        const hint = document.createElement('p');
+        hint.className = 'panel-hint';
+        hint.textContent = existing
+            ? 'Correct anything that is wrong. Only this stop changes in the tour file.'
+            : 'Say what this element is and where its data comes from.';
+        panel.append(title, hint);
         const fields = [
-            { id: 'f-heading', label: 'Heading', value: existing?.heading ?? '' },
-            { id: 'f-target', label: 'Target (selector)', value: existing?.target ?? selector },
-            { id: 'f-data', label: 'Data (optional)', value: existing?.data ?? '' },
-            { id: 'f-code', label: 'Code file', value: existing?.code ?? '' },
-            { id: 'f-source', label: 'Source file (optional)', value: existing?.source ?? '' },
-            { id: 'f-docs', label: 'Docs URL (optional)', value: existing?.docs ?? '' },
-            { id: 'f-prose', label: 'Prose', value: existing?.prose ?? '', multi: true },
+            { key: 'heading', label: 'Name', value: existing?.heading ?? '', placeholder: 'e.g. Total' },
+            { key: 'prose', label: 'What it is', value: existing?.prose ?? '', multi: true, placeholder: 'e.g. The amount due: the subtotal plus tax, computed by `totals()`.' },
+            { key: 'data', label: 'Data', value: existing?.data ?? '', placeholder: 'e.g. GET /api/invoices/:id → total' },
+            { key: 'code', label: 'Code file', value: existing?.code ?? '', placeholder: 'e.g. src/screens/Invoice.tsx' },
+            { key: 'source', label: 'Source file', value: existing?.source ?? '', placeholder: 'Optional: where the value is computed' },
+            { key: 'docs', label: 'Docs link', value: existing?.docs ?? '', placeholder: 'Optional' },
+            { key: 'target', label: 'Selector', value: existing?.target ?? selector },
         ];
         const inputs = {};
+        const form = document.createElement('form');
+        form.className = 'panel-form';
         for (const f of fields) {
-            const lbl = document.createElement('label');
-            lbl.setAttribute('for', f.id);
-            lbl.textContent = f.label;
-            form.appendChild(lbl);
-            const input = f.multi
-                ? document.createElement('textarea')
-                : document.createElement('input');
-            input.id = f.id;
+            const id = `dg-${f.key}`;
+            const label = document.createElement('label');
+            label.htmlFor = id;
+            label.textContent = f.label;
+            const input = f.multi ? document.createElement('textarea') : document.createElement('input');
+            input.id = id;
             input.value = f.value;
-            if (!f.multi)
-                input.type = 'text';
-            form.appendChild(input);
-            inputs[f.id] = input;
+            if (f.placeholder)
+                input.placeholder = f.placeholder;
+            if (f.key === 'target' || f.key === 'code')
+                input.spellcheck = false;
+            form.append(label, input);
+            inputs[f.key] = input;
         }
         if (needsAttribute && !existing) {
             const warn = document.createElement('div');
             warn.className = 'add-form-warn';
-            warn.innerHTML = `This element has no <code>data-tour</code> attribute yet. Add this attribute to identify it:<br><code>data-tour="${selector.replace(/^\[data-tour="/, '').replace(/"\]$/, '')}"</code>`;
+            warn.append('Add ');
+            const code = document.createElement('code');
+            code.textContent = `data-tour="${tourValue(selector) ?? ''}"`;
+            warn.append(code, ' to this element in your code, so the stop keeps finding it.');
             form.appendChild(warn);
         }
+        const error = document.createElement('p');
+        error.className = 'panel-error';
+        error.hidden = true;
+        form.appendChild(error);
         const actions = document.createElement('div');
-        actions.className = 'add-form-actions';
+        actions.className = 'insp-popup-actions';
+        if (existing) {
+            const remove = document.createElement('button');
+            remove.type = 'button';
+            remove.className = 'wt-btn danger';
+            remove.textContent = 'Remove';
+            let armed = false;
+            remove.addEventListener('click', () => {
+                if (!armed) {
+                    armed = true;
+                    remove.textContent = 'Remove this stop?';
+                    return;
+                }
+                this.removeStop(existing);
+            });
+            actions.appendChild(remove);
+        }
+        const spacer = document.createElement('span');
+        spacer.className = 'panel-file';
+        actions.appendChild(spacer);
         const cancel = document.createElement('button');
+        cancel.type = 'button';
         cancel.className = 'wt-btn';
         cancel.textContent = 'Cancel';
-        cancel.addEventListener('click', () => this.closeAddForm());
-        actions.appendChild(cancel);
+        cancel.addEventListener('click', () => {
+            if (existing) {
+                this.fillView(panel, el, existing);
+                this.placeNear(panel, el);
+            }
+            else {
+                this.closeInspPopup();
+            }
+        });
         const save = document.createElement('button');
+        save.type = 'submit';
         save.className = 'wt-btn primary';
-        save.textContent = 'Save';
-        save.addEventListener('click', () => {
+        save.textContent = existing ? 'Save' : 'Add stop';
+        actions.append(cancel, save);
+        form.appendChild(actions);
+        form.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const value = (k) => inputs[k].value.trim();
             const stop = {
-                heading: inputs['f-heading'].value.trim(),
-                target: inputs['f-target'].value.trim(),
-                data: inputs['f-data'].value.trim() || undefined,
-                code: inputs['f-code'].value.trim(),
-                source: inputs['f-source'].value.trim() || undefined,
-                docs: inputs['f-docs'].value.trim() || undefined,
-                prose: inputs['f-prose'].value.trim(),
+                heading: value('heading'),
+                target: value('target'),
+                data: value('data') || undefined,
+                code: value('code'),
+                source: value('source') || undefined,
+                docs: value('docs') || undefined,
+                prose: value('prose'),
             };
-            if (!stop.heading || !stop.target || !stop.code)
+            const missing = !stop.heading ? 'a name' : !stop.code ? 'the code file' : !stop.target ? 'a selector' : '';
+            if (missing) {
+                error.textContent = `Add ${missing} first.`;
+                error.hidden = false;
+                return;
+            }
+            save.disabled = true;
+            const saved = await this.saveStop(stop, existing?.target);
+            save.disabled = false;
+            if (!saved) {
+                error.textContent = 'Could not save. Is docugate tour serve still running?';
+                error.hidden = false;
                 return;
-            this.saveStop(stop);
-            this.closeAddForm();
+            }
+            this.fillView(panel, el, stop);
+            this.placeNear(panel, el);
         });
-        actions.appendChild(save);
-        form.appendChild(actions);
-        this.shadow.appendChild(form);
-        this.addForm = form;
-        inputs['f-heading'].focus();
+        panel.appendChild(form);
+        inputs[existing ? 'prose' : 'heading'].focus();
+    }
+    /** Puts the panel beside its element, below it when there is room, else above. */
+    placeNear(panel, el) {
+        const rect = el.getBoundingClientRect();
+        const w = panel.offsetWidth || 360;
+        const h = panel.offsetHeight || 300;
+        const pad = 12;
+        let top = rect.bottom + 10;
+        if (top + h > window.innerHeight - pad)
+            top = Math.max(pad, rect.top - h - 10);
+        const left = Math.max(pad, Math.min(rect.left, window.innerWidth - w - pad));
+        panel.style.top = `${top}px`;
+        panel.style.left = `${left}px`;
+    }
+    closeInspPopup() {
+        this.inspPopup?.remove();
+        this.inspPopup = null;
+        this.inspEl = null;
+    }
+    showAddForm(el, existing) {
+        this.showInspPopup(el, existing ?? null, true);
     }
     closeAddForm() {
-        this.addForm?.remove();
-        this.addForm = null;
+        this.closeInspPopup();
     }
-    async saveStop(stop) {
+    async saveStop(stop, previousTarget) {
         // A page with no tour yet starts one at its own path.
         const route = this.tour?.route ?? location.pathname;
         try {
-            await fetch(`${this.base}/stop`, {
+            const res = await fetch(`${this.base}/stop`, {
                 method: 'PUT',
                 headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ route, stop }),
+                body: JSON.stringify({ route, stop, previousTarget }),
             });
+            if (!res.ok)
+                return false;
+            this.patchLocalStop(stop, previousTarget);
+            this.toast(`Saved to ${this.tour?.file ?? '.docugate/tour/'}`);
+            return true;
         }
         catch {
-            // best-effort
+            return false;
         }
     }
+    async removeStop(stop) {
+        try {
+            const res = await fetch(`${this.base}/stop`, {
+                method: 'DELETE',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ route: this.tour?.route ?? location.pathname, target: stop.target }),
+            });
+            if (!res.ok)
+                throw new Error();
+            if (this.tour)
+                this.tour.stops = this.tour.stops.filter((s) => s.target !== stop.target);
+            this.closeInspPopup();
+            this.toast(`Removed "${stop.heading}"`);
+        }
+        catch {
+            this.toast('Could not remove the stop. Is docugate tour serve still running?');
+        }
+    }
+    /** Keeps the in-memory tour in step with a save, before the file watcher reports it. */
+    patchLocalStop(stop, previousTarget) {
+        if (!this.tour) {
+            this.tour = { route: location.pathname, title: document.title || 'Tour', stops: [stop] };
+            return;
+        }
+        const i = this.tour.stops.findIndex((s) => s.target === (previousTarget ?? stop.target));
+        if (i >= 0)
+            this.tour.stops[i] = stop;
+        else
+            this.tour.stops.push(stop);
+    }
+    async openInEditor(path, find) {
+        try {
+            const res = await fetch(`${this.base}/open`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ path, find }),
+            });
+            if (!res.ok)
+                throw new Error();
+            this.toast(`Opened ${path.split('/').pop()}`);
+        }
+        catch {
+            this.toast('Could not open your editor. Set DOCUGATE_EDITOR (for example: code) and restart docugate tour serve.');
+        }
+    }
+    toast(message) {
+        this.shadow.querySelector('.toast')?.remove();
+        const t = document.createElement('div');
+        t.className = 'toast surface';
+        t.setAttribute('role', 'status');
+        t.textContent = message;
+        this.shadow.appendChild(t);
+        setTimeout(() => t.remove(), 3200);
+    }
     // ── Keyboard ──────────────────────────────────────────────────────────────
     handleKey(e) {
         if (e.key === 'Escape') {
@@ -996,12 +1497,15 @@ class DocugatePill {
         }
     }
     async reload() {
+        const path = location.pathname;
         await this.load();
         if (this.walkthroughActive)
             this.stopWalkthrough();
-        if (this.inspectorActive)
-            this.stopInspector();
         this.render();
+        // A new page ends the inspection; an edit on this page keeps it going.
+        if (this.inspectorActive && path !== this.inspectedPath)
+            this.stopInspector();
+        this.inspectedPath = path;
     }
     // ── URL change detection ──────────────────────────────────────────────────
     patchHistory() {