@bitpub/cli 2.0.3 → 2.0.4

package/static/console.html

@@ -61,27 +61,99 @@ svg { flex-shrink: 0; }
 /* ── Layout shell ───────────────────────────────────── */
 #app { display: flex; flex-direction: column; height: 100vh; }
 
-/* ── Address bar (top) ──────────────────────────────── */
+/* ── Browser shell: address bar + nav controls ───────
+   Treated like Chrome's omnibox. The URL bar is a single rounded pill
+   that holds either the read-only breadcrumb (default) or a typeable
+   text input (on click/focus). Back/forward/home sit outside the pill,
+   left-aligned, exactly like a desktop browser. */
 .addressbar {
-  height: 48px; flex-shrink: 0;
-  display: flex; align-items: center; gap: 12px;
+  height: 52px; flex-shrink: 0;
+  display: flex; align-items: center; gap: 10px;
   padding: 0 14px;
   background: var(--bg-card);
   border-bottom: 1px solid var(--border);
 }
-.wordmark { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; color: var(--text); white-space: nowrap; cursor: pointer; }
-.wordmark .mark { width: 18px; height: 18px; background: var(--accent); border-radius: 4px; position: relative; }
-.wordmark .mark::after { content: ""; position: absolute; inset: 4px; border-radius: 1px; background: var(--bg-card); }
-.wordmark .name { letter-spacing: -.01em; }
-.wordmark .soft { color: var(--text-subtle); font-weight: 500; }
+/* Left zone holds the wordmark + nav-controls and is sized to align
+   the URL bar's left edge with the main content panel's left edge
+   below (i.e. just past the sidebar's right edge). The total width
+   below was tuned for a 264px sidebar: 14 (addressbar left padding)
+   + 240 (this zone) + 10 (gap) = 264. If the sidebar width changes,
+   keep this in sync.
+
+   The wordmark is pinned to the far left and the nav-controls to
+   the far right so the back/forward/home buttons sit flush against
+   the URL bar's left edge. */
+.addressbar-left {
+  display: flex; align-items: center;
+  justify-content: space-between;
+  width: 240px; flex-shrink: 0;
+}
+/* The wordmark uses the same two assets as the marketing nav so the
+   in-app browser has consistent brand identity with bitpub.io.
+   Sized down for the 52px addressbar: a 20px icon + 28px wordmark
+   leaves comfortable vertical padding. The wordmark .name / .soft /
+   .mark rules are kept around (as no-ops here) for any legacy callers
+   of the wordmark structure. */
+.wordmark { display: inline-flex; align-items: center; gap: 6px; color: var(--text); white-space: nowrap; cursor: pointer; text-decoration: none; }
+.wordmark .nav-icon { display: block; height: 20px; width: auto; flex-shrink: 0; }
+.wordmark .nav-wordmark { display: block; height: 28px; width: auto; flex-shrink: 0; }
+
+/* Nav controls (back / forward / home) */
+.nav-controls { display: inline-flex; align-items: center; gap: 2px; }
+.nav-btn {
+  width: 28px; height: 28px; flex-shrink: 0;
+  display: inline-flex; align-items: center; justify-content: center;
+  border: 0; border-radius: 50%;
+  background: transparent; color: var(--text-muted);
+  cursor: pointer; transition: background .1s, color .1s;
+}
+.nav-btn:hover:not(:disabled) { background: var(--bg-hover); color: var(--text); }
+.nav-btn:active:not(:disabled) { background: var(--bg-inset); }
+.nav-btn:disabled { color: var(--text-subtle); opacity: .45; cursor: default; }
+
+/* URL bar — the single pill that holds breadcrumb or typeable input */
+.url-bar {
+  flex: 1; min-width: 0;
+  display: flex; align-items: center; gap: 6px;
+  height: 34px;
+  padding: 0 4px 0 10px;
+  background: var(--bg-inset);
+  border: 1px solid transparent;
+  border-radius: 100px;
+  transition: background .12s, border-color .12s, box-shadow .12s;
+  cursor: text;
+}
+.url-bar:hover { background: var(--bg-hover); }
+.url-bar.editing,
+.url-bar:focus-within {
+  background: var(--bg-card);
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-soft);
+}
 
-.mode-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; padding: 3px 8px; border-radius: 100px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-muted); white-space: nowrap; }
-.mode-badge.local { background: var(--accent-bg); border-color: rgba(229,87,51,.3); color: var(--accent-hover); }
-.mode-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-subtle); }
-.mode-badge.local .dot { background: var(--accent); }
+/* Site-info chip on the left edge of the URL bar (replaces the standalone
+   mode badge). When local-decrypted we tint it with the lock color to
+   echo a browser's https indicator. */
+.mode-badge {
+  width: 22px; height: 22px; flex-shrink: 0;
+  display: inline-flex; align-items: center; justify-content: center;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--text-subtle);
+  cursor: default;
+}
+.mode-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-subtle); }
+.mode-badge.local { color: var(--scope-private); }
+.mode-badge.local .dot { background: var(--scope-private); }
 
-.address { flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px; font-family: var(--mono); font-size: 12px; color: var(--text-muted); overflow: hidden; }
-.address .seg { padding: 3px 6px; border-radius: var(--radius-sm); cursor: pointer; color: var(--accent); white-space: nowrap; transition: background .1s, color .1s; }
+/* Breadcrumb (display mode of the URL bar) */
+.address {
+  flex: 1; min-width: 0;
+  display: flex; align-items: center; gap: 2px;
+  font-family: var(--mono); font-size: 12.5px; color: var(--text-muted);
+  overflow: hidden; white-space: nowrap;
+}
+.address .seg { padding: 2px 6px; border-radius: var(--radius-sm); cursor: pointer; color: var(--accent); transition: background .1s, color .1s; }
 .address .seg:hover { background: var(--accent-soft); }
 .address .seg.scheme { color: var(--text-subtle); cursor: default; font-weight: 500; }
 .address .seg.scheme:hover { background: transparent; }
@@ -89,39 +161,34 @@ svg { flex-shrink: 0; }
 .address .seg.current:hover { background: transparent; }
 .address .sep { color: var(--text-subtle); padding: 0 1px; user-select: none; }
 .address .glob { color: var(--text-subtle); font-weight: 500; padding-left: 4px; }
-
-.live { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-muted); white-space: nowrap; padding: 3px 8px; border-radius: 100px; }
-.live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fresh-7d); position: relative; }
-.live.pulse .dot { background: var(--accent); }
-.live.pulse .dot::after {
-  content: ""; position: absolute; inset: -4px; border-radius: 50%;
-  background: var(--accent); opacity: .25;
-  animation: pulse 1.4s ease-out infinite;
-}
-@keyframes pulse {
-  0% { transform: scale(.6); opacity: .35; }
-  100% { transform: scale(2.2); opacity: 0; }
-}
-
-.search-box { position: relative; width: 240px; }
-.search-box input { width: 100%; background: var(--bg-inset); border: 1px solid transparent; border-radius: var(--radius); padding: 5px 12px 5px 30px; color: var(--text); font-size: 12.5px; font-family: var(--font); outline: none; transition: background .15s, border-color .15s; }
-.search-box input::placeholder { color: var(--text-subtle); }
-.search-box input:focus { background: var(--bg-card); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
-.search-box svg { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--text-subtle); }
-.search-box .kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: 10px; color: var(--text-subtle); border: 1px solid var(--border); background: var(--bg-card); border-radius: 3px; padding: 0 4px; pointer-events: none; line-height: 14px; }
-.search-box input:focus ~ .kbd { display: none; }
-
-/* ── Filter strip ───────────────────────────────────── */
-.filter-strip {
-  height: 38px; flex-shrink: 0;
-  display: flex; align-items: center; gap: 14px;
-  padding: 0 14px;
-  background: var(--bg-canvas);
-  border-bottom: 1px solid var(--border);
-  overflow-x: auto;
-}
-.filter-strip::-webkit-scrollbar { display: none; }
-.filter-label { font-size: 11px; color: var(--text-subtle); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; white-space: nowrap; }
+.address .placeholder { color: var(--text-subtle); font-style: italic; font-family: var(--font); font-size: 12.5px; }
+
+/* Typeable URL input (edit mode of the URL bar) */
+.address-input {
+  flex: 1; min-width: 0;
+  height: 26px;
+  padding: 0 6px;
+  background: transparent; border: 0; outline: none;
+  font-family: var(--mono); font-size: 12.5px; color: var(--text);
+}
+.address-input::placeholder { color: var(--text-subtle); font-family: var(--font); font-style: italic; }
+
+.address-edit-btn,
+.address-copy-btn {
+  width: 24px; height: 24px; flex-shrink: 0;
+  display: inline-flex; align-items: center; justify-content: center;
+  border: 0; border-radius: 50%;
+  background: transparent; color: var(--text-subtle);
+  cursor: pointer; transition: background .1s, color .1s;
+}
+.address-edit-btn { margin-left: auto; }
+.address-edit-btn:hover,
+.address-copy-btn:hover { background: var(--bg-hover); color: var(--text); }
+.url-bar.editing .address-edit-btn,
+.url-bar.editing .address-copy-btn { display: none; }
+.address-copy-btn.copied { background: var(--accent-bg); color: var(--accent); }
+
+/* ── Tag pills (reused in slice view for tag chips) ────── */
 .pill-group { display: inline-flex; gap: 4px; }
 .pill {
   display: inline-flex; align-items: center; gap: 5px;
@@ -141,10 +208,6 @@ svg { flex-shrink: 0; }
 .pill.tag .x { color: var(--text-subtle); margin-left: 2px; font-weight: 700; }
 .pill.tag:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
 .pill.tag:hover .x { color: #fff; }
-.filter-divider { width: 1px; height: 18px; background: var(--border); flex-shrink: 0; }
-.filter-count { margin-left: auto; font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
-.filter-count .n { color: var(--text); font-weight: 600; }
-
 /* ── Body layout ────────────────────────────────────── */
 .layout { display: flex; flex: 1; min-height: 0; }
 #sidebar { width: 264px; min-width: 264px; background: var(--bg-card); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; }
@@ -385,21 +448,6 @@ svg { flex-shrink: 0; }
 }
 
 /* ── Namespace panel ────────────────────────────────── */
-.hcu-hero {
-  display: flex; align-items: center; gap: 10px;
-  padding: 10px 14px;
-  background: var(--bg-card); border: 1px solid var(--border);
-  border-radius: var(--radius);
-  font-family: var(--mono); font-size: 12.5px;
-  margin-bottom: 12px;
-}
-.hcu-hero .lock { color: var(--scope-private); }
-.hcu-hero .uri { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
-.hcu-hero .uri .scheme { color: var(--text-subtle); }
-.hcu-hero .uri .glob { color: var(--text-subtle); padding-left: 2px; }
-.hcu-hero .copy-btn { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; font-size: 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text-muted); cursor: pointer; font-family: var(--font); transition: background .1s, color .1s; }
-.hcu-hero .copy-btn:hover { background: var(--bg-hover); color: var(--text); }
-
 .stats-strip { display: flex; align-items: center; gap: 16px; padding: 0 2px 12px; font-size: 12px; color: var(--text-muted); flex-wrap: wrap; }
 .stats-strip .s-item { display: inline-flex; align-items: center; gap: 5px; }
 .stats-strip .s-item .n { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
@@ -781,6 +829,48 @@ svg { flex-shrink: 0; }
 /* Subtle stream subtitle */
 .stream-sub { font-size: 11.5px; color: var(--text-subtle); margin: -6px 0 10px 2px; font-weight: 400; letter-spacing: 0; text-transform: none; }
 
+/* ── Sandboxed app frame (slice view, text/html payloads) ────────────
+   When a slice's content type is HTML and the scope is private/group,
+   the content dispatcher renders it inside a sandboxed iframe. The
+   frame fills the blob container's horizontal space and grows to a
+   workable default height (the app can be taller; the user scrolls
+   the main pane to follow). */
+.app-frame {
+  display: block;
+  width: 100%;
+  min-height: 480px;
+  border: 0;
+  background: var(--bg-page);
+}
+
+.app-badge {
+  display: inline-flex; align-items: center; gap: 4px;
+  font-size: 10.5px; font-weight: 600;
+  padding: 2px 8px;
+  border: 1px solid rgba(124, 58, 237, .25);
+  background: rgba(124, 58, 237, .06);
+  color: var(--scope-private);
+  border-radius: 100px;
+  white-space: nowrap;
+  cursor: help;
+}
+.app-badge svg { color: var(--scope-private); }
+
+.app-public-note {
+  display: flex; align-items: flex-start; gap: 10px;
+  padding: 10px 14px;
+  background: var(--bg-canvas);
+  border-bottom: 1px solid var(--border-soft);
+  font-size: 12px; color: var(--text-muted);
+  line-height: 1.5;
+}
+.app-public-note svg { color: var(--text-subtle); flex-shrink: 0; margin-top: 1px; }
+.app-public-note code {
+  font-family: var(--mono); font-size: 11.5px;
+  background: var(--bg-card); padding: 1px 5px; border-radius: 3px;
+  border: 1px solid var(--border-soft); color: var(--text);
+}
+
 .hidden { display: none !important; }
 </style>
 </head>
@@ -799,25 +889,45 @@ svg { flex-shrink: 0; }
     </div>
   </div>
 
-  <!-- Address bar -->
+  <!-- Address bar (browser-shell layout) -->
   <header class="addressbar">
-    <div class="wordmark" onclick="goRoot()">
-      <span class="mark"></span>
-      <span class="name">bitpub</span>
+    <!-- Left zone: wordmark + nav controls. Sized to match the sidebar
+         width below so the URL bar starts at the same x as the main
+         content panel. -->
+    <div class="addressbar-left">
+      <div class="wordmark" onclick="goRoot()" title="bitpub home" role="link" aria-label="bitpub home">
+        <img class="nav-icon" src="/assets/tollbit-icon.png" alt="" aria-hidden="true">
+        <img class="nav-wordmark" src="/assets/BITPUB-dark.png" alt="BitPub">
+      </div>
+
+      <div class="nav-controls">
+        <button id="nav-back" class="nav-btn" onclick="goBack()" title="Back" disabled>
+          <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M9.78 12.78a.75.75 0 01-1.06 0L4.47 8.53a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 1.06L6.06 8l3.72 3.72a.75.75 0 010 1.06z"/></svg>
+        </button>
+        <button id="nav-forward" class="nav-btn" onclick="goForward()" title="Forward" disabled>
+          <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M6.22 3.22a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 11-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 010-1.06z"/></svg>
+        </button>
+        <button id="nav-home" class="nav-btn" onclick="goRoot()" title="Home">
+          <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M6.906.664a1.749 1.749 0 012.187 0l5.25 4.2c.415.332.657.835.657 1.367v7.019A1.75 1.75 0 0113.25 15h-3.5a.75.75 0 01-.75-.75V9.5h-2v4.75a.75.75 0 01-.75.75h-3.5A1.75 1.75 0 011 13.25V6.23c0-.531.242-1.034.657-1.366l5.25-4.2zm1.25 1.171a.25.25 0 00-.312 0l-5.25 4.2a.25.25 0 00-.094.196v7.019c0 .138.112.25.25.25H5v-4.75a.75.75 0 01.75-.75h3.5a.75.75 0 01.75.75v4.75h2.75a.25.25 0 00.25-.25V6.23a.25.25 0 00-.094-.195l-5.25-4.2z"/></svg>
+        </button>
+      </div>
     </div>
-    <div id="mode-badge" class="mode-badge"><span class="dot"></span><span class="label">—</span></div>
-    <div id="address" class="address"></div>
-    <div id="live" class="live"><span class="dot"></span><span class="label">—</span></div>
-    <div class="search-box">
-      <input id="search" type="text" placeholder="Search slices..." oninput="handleSearch(this.value)">
-      <svg width="13" height="13" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" d="M10.68 11.74a6 6 0 01-7.922-8.982 6 6 0 018.982 7.922l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04zM11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7z"/></svg>
-      <span class="kbd">/</span>
+
+    <div class="url-bar" id="url-bar">
+      <span id="mode-badge" class="mode-badge" title="Connection mode"><span class="dot"></span></span>
+      <div id="address" class="address" onclick="enterAddressEdit()"></div>
+      <input id="address-input" class="address-input hidden" type="text"
+             spellcheck="false" autocomplete="off"
+             placeholder="Enter a bitpub:// URL, /path, or search">
+      <button id="address-edit-btn" class="address-edit-btn" onclick="enterAddressEdit()" title="Edit address">
+        <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><path d="M11.013 1.427a1.75 1.75 0 012.474 0l1.086 1.086a1.75 1.75 0 010 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 01-.927-.928l.929-3.25c.081-.286.235-.547.445-.758l8.61-8.61zm1.414 1.06a.25.25 0 00-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 000-.354l-1.086-1.086zM11.189 6.25L9.75 4.81l-6.286 6.287a.25.25 0 00-.064.108l-.558 1.953 1.953-.558a.249.249 0 00.108-.064L11.189 6.25z"/></svg>
+      </button>
+      <button id="address-copy-btn" class="address-copy-btn" onclick="copyAddressUri(this)" title="Copy URI">
+        <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"/><path fill-rule="evenodd" d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"/></svg>
+      </button>
     </div>
   </header>
 
-  <!-- Filter strip -->
-  <div id="filter-strip" class="filter-strip"></div>
-
   <!-- Body -->
   <div class="layout">
     <aside id="sidebar">
@@ -873,6 +983,11 @@ const ICON = {
   chev:    '<svg width="10" height="10" viewBox="0 0 16 16" fill="currentColor"><path d="M6.22 3.22a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 010-1.06z"/></svg>',
   lock:    '<svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" d="M4 4v2h-.25A1.75 1.75 0 002 7.75v5.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 13.25v-5.5A1.75 1.75 0 0012.25 6H12V4a4 4 0 00-8 0zm6.5 2V4a2.5 2.5 0 00-5 0v2h5z"/></svg>',
   copy:    '<svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"/><path fill-rule="evenodd" d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"/></svg>',
+  // Same copy glyph reused as the icon for the address-bar Copy URI
+  // button; kept under a distinct key so its dimensions can drift
+  // (currently identical to ICON.copy).
+  copyLg:  '<svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"/><path fill-rule="evenodd" d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"/></svg>',
+  check:   '<svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><path d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.751.751 0 01.018-1.042.751.751 0 011.042-.018L6 10.94l6.72-6.72a.75.75 0 011.06 0z"/></svg>',
   hex:     '<svg class="hex" viewBox="0 0 12 12" fill="currentColor"><path d="M6 0L11.196 3V9L6 12L0.804 9V3L6 0Z"/></svg>',
   search:  '<svg width="13" height="13" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" d="M10.68 11.74a6 6 0 01-7.922-8.982 6 6 0 018.982 7.922l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z"/></svg>',
   info:    '<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M0 8a8 8 0 1116 0A8 8 0 010 8zm8-6.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM6.5 7.75A.75.75 0 017.25 7h1a.75.75 0 01.75.75v2.75h.25a.75.75 0 010 1.5h-2a.75.75 0 010-1.5h.25v-2h-.25a.75.75 0 01-.75-.75zM8 6a1 1 0 100-2 1 1 0 000 2z"/></svg>',
@@ -887,6 +1002,7 @@ async function boot() {
   const data = await fetchData();
   if (!data) return;
   ingestData(data);
+  maybeOpenWelcomeSlice();
   renderAll();
   setInterval(pollData, 30000);
   document.addEventListener('visibilitychange', () => {
@@ -913,18 +1029,43 @@ function findWelcomeSlice(slices) {
 }
 
 function shouldShowWelcomePanel(slices) {
-  // Forced via URL — useful for re-opening the panel after dismissal,
-  // or for install.sh which always opens with ?welcome=1 set.
+  // The Welcome slice is now itself an HTML app (the entire welcome
+  // experience is rendered from inside the slice's sandboxed iframe).
+  // So we only show this fallback panel during the install.sh boot race:
+  // the page was opened with ?welcome=1 *before* the welcome push landed
+  // in the local cache. `maybeOpenWelcomeSlice()` auto-navigates to the
+  // slice as soon as it appears, at which point this panel disappears
+  // and the slice's own app takes over.
   const params = new URLSearchParams(location.search);
-  if (params.get('welcome') === '1') return true;
-
-  // Auto: the user has only the auto-saved Welcome slice (fresh install).
-  // We compare against S.slices (total), not the filtered list, so a
-  // search/filter doesn't accidentally trigger the welcome state.
-  const total = S.slices;
-  if (total.length === 1 && WELCOME_RE.test(total[0].hcu)) return true;
-
-  return false;
+  if (params.get('welcome') !== '1') return false;
+  const all = slices || S.slices;
+  const hasWelcome = (all || []).some(s => WELCOME_RE.test(s.hcu));
+  return !hasWelcome;
+}
+
+/**
+ * One-shot navigator: when the page is loaded with `?welcome=1` (the URL
+ * install.sh opens) and the Welcome slice is already in the cache, jump
+ * straight to the slice view so the user lands in the welcome HTML app
+ * instead of the recent-writes overview. Idempotent — runs at most once
+ * per page load.
+ */
+function maybeOpenWelcomeSlice() {
+  if (S.welcomeOpened) return;
+  const params = new URLSearchParams(location.search);
+  if (params.get('welcome') !== '1') return;
+  const wel = findWelcomeSlice();
+  if (!wel) return;
+  S.welcomeOpened = true;
+  // Mirror selectSlice() without an extra renderAll — boot is about to
+  // call renderAll itself.
+  const { scope } = scopeOf(wel.hcu);
+  S.view = 'slice';
+  S.currentScope = scope;
+  S.currentPath = pathOf(wel.hcu);
+  S.selectedHcu = wel.hcu;
+  S.searchQuery = '';
+  S.raw = false;
 }
 
 function renderWelcomePanel() {
@@ -1045,13 +1186,22 @@ async function pollData() {
     triggerLivePulse();
     setTimeout(() => { S.newArrivals = new Set(); }, 2500);
   }
+  // Boot-race recovery: if install.sh opened us with ?welcome=1 before
+  // the welcome push had synced down, the slice may show up here on the
+  // first poll. Take the user to it as soon as it appears.
+  maybeOpenWelcomeSlice();
   renderAll();
 }
 
 function triggerLivePulse() {
-  $('live').classList.add('pulse');
+  // Live indicator was removed from the address bar; keep this as a
+  // no-op so the polling loop doesn't crash and so we can re-introduce
+  // a freshness indicator later without re-wiring callers.
+  const el = $('live');
+  if (!el) return;
+  el.classList.add('pulse');
   clearTimeout(triggerLivePulse._t);
-  triggerLivePulse._t = setTimeout(() => $('live').classList.remove('pulse'), 4000);
+  triggerLivePulse._t = setTimeout(() => el.classList.remove('pulse'), 4000);
 }
 
 function showAuth() {
@@ -1066,7 +1216,7 @@ async function submitAuth() {
   sessionStorage.setItem('bitpub_key', key);
   $('auth-error').classList.add('hidden');
   const data = await fetchData();
-  if (data) { $('auth-overlay').classList.add('hidden'); ingestData(data); renderAll(); }
+  if (data) { $('auth-overlay').classList.add('hidden'); ingestData(data); maybeOpenWelcomeSlice(); renderAll(); }
   else { $('auth-error').textContent = 'Invalid API key'; $('auth-error').classList.remove('hidden'); S.apiKey = null; sessionStorage.removeItem('bitpub_key'); }
 }
 
@@ -1252,30 +1402,29 @@ function clearFilter() {
 function renderAll() {
   renderModeBadge();
   renderAddress();
-  renderLive();
-  renderFilterStrip();
   renderTree();
   renderPanel();
   $('clear-filter-btn').classList.toggle('hidden', !filterActive());
 }
 
 function renderModeBadge() {
+  // The mode badge now lives inside the URL bar as a dot-only indicator
+  // (the verbose label moved into a tooltip). Tinted private-purple in
+  // local-decrypted mode to echo a browser's https indicator.
   const el = $('mode-badge');
   if (S.mode === 'local') {
     el.className = 'mode-badge local';
-    el.querySelector('.label').textContent = 'Local · decrypted';
+    el.setAttribute('title', 'Local cache · private slices decrypted on this machine');
   } else {
     el.className = 'mode-badge';
-    el.querySelector('.label').textContent = 'Remote';
+    el.setAttribute('title', 'Remote · private slices appear as ciphertext');
   }
 }
 
 function renderAddress() {
   const el = $('address');
   let html = '<span class="seg scheme">bitpub://</span>';
-  if (S.view === 'overview') {
-    html += '<span class="glob">**</span>';
-  } else if (S.currentScope) {
+  if (S.currentScope) {
     html += `<span class="sep">/</span><span class="seg" onclick="navigateTo('${escAttr(S.currentScope)}', [])">${esc(S.currentScope)}</span>`;
     const isSlice = S.view === 'slice';
     S.currentPath.forEach((seg, i) => {
@@ -1290,15 +1439,18 @@ function renderAddress() {
         html += `<span class="${className}" onclick="navigateTo('${escAttr(S.currentScope)}', ${JSON.stringify(subPath).replace(/"/g, '&quot;')})">${esc(seg)}</span>`;
       }
     });
-    if (!isSlice) html += '<span class="glob">/**</span>';
   }
   el.innerHTML = html;
 }
 
 function renderLive() {
+  // Live indicator was removed from the address bar in the browser-shell
+  // refactor; this is a no-op kept around so legacy callers don't crash.
   const el = $('live');
+  if (!el) return;
   const label = S.lastUpdated ? `updated ${timeAgo(S.lastUpdated)}` : 'no activity';
-  el.querySelector('.label').textContent = label;
+  const lbl = el.querySelector('.label');
+  if (lbl) lbl.textContent = label;
 }
 
 function renderFilterStrip() {
@@ -1481,6 +1633,233 @@ function onTreeFolderClick(ev, scope, path) {
   navigateTo(scope, path);
 }
 
+/* ══════════════════════════════════════════════════════
+   Address bar — typeable URL input + history stack
+
+   Navigation history is browser-style: pushHistory() snapshots the
+   minimum nav state needed to re-render the right view, and back/
+   forward replay snapshots without re-pushing. Initial load lands on
+   "overview" with history[0] = root, so Back from the first navigation
+   takes the user home rather than dead-ending.
+   ══════════════════════════════════════════════════════ */
+S.history = [];
+S.historyIndex = -1;
+S.historyMuted = false;   // true while replaying back/forward
+
+function snapshotNav() {
+  return {
+    view: S.view,
+    currentScope: S.currentScope,
+    currentPath: S.currentPath.slice(),
+    selectedHcu: S.selectedHcu,
+    searchQuery: S.searchQuery,
+  };
+}
+
+function applyNav(snap) {
+  S.view = snap.view;
+  S.currentScope = snap.currentScope;
+  S.currentPath = snap.currentPath.slice();
+  S.selectedHcu = snap.selectedHcu;
+  S.searchQuery = snap.searchQuery || '';
+  S.raw = false;
+}
+
+function navSnapEq(a, b) {
+  return a.view === b.view
+    && a.currentScope === b.currentScope
+    && arrayEq(a.currentPath, b.currentPath)
+    && a.selectedHcu === b.selectedHcu
+    && (a.searchQuery || '') === (b.searchQuery || '');
+}
+
+function pushHistory() {
+  if (S.historyMuted) return;
+  if (S.historyIndex < S.history.length - 1) {
+    // Branching off a back-state truncates forward history, same as a browser.
+    S.history = S.history.slice(0, S.historyIndex + 1);
+  }
+  const snap = snapshotNav();
+  const top = S.history[S.history.length - 1];
+  if (top && navSnapEq(top, snap)) return;   // collapse no-op pushes
+  S.history.push(snap);
+  S.historyIndex = S.history.length - 1;
+  updateNavButtons();
+}
+
+function updateNavButtons() {
+  const back = $('nav-back');
+  const fwd = $('nav-forward');
+  if (back) back.disabled = S.historyIndex <= 0;
+  if (fwd) fwd.disabled = S.historyIndex >= S.history.length - 1;
+}
+
+function goBack() {
+  if (S.historyIndex <= 0) return;
+  S.historyIndex--;
+  S.historyMuted = true;
+  applyNav(S.history[S.historyIndex]);
+  renderAll();
+  updateNavButtons();
+  S.historyMuted = false;
+}
+
+function goForward() {
+  if (S.historyIndex >= S.history.length - 1) return;
+  S.historyIndex++;
+  S.historyMuted = true;
+  applyNav(S.history[S.historyIndex]);
+  renderAll();
+  updateNavButtons();
+  S.historyMuted = false;
+}
+
+// Pick the "your private root" scope for leading-slash resolution. We
+// take the most common private scope in the local cache. If the user
+// has no private slices yet, leading-slash input falls through to search.
+function ownerScope() {
+  const counts = {};
+  for (const s of S.slices) {
+    const sc = scopeOf(s.hcu);
+    if (sc.type === 'private') counts[sc.scope] = (counts[sc.scope] || 0) + 1;
+  }
+  let best = null, bestN = 0;
+  for (const k of Object.keys(counts)) {
+    if (counts[k] > bestN) { best = k; bestN = counts[k]; }
+  }
+  return best;
+}
+
+// Build the canonical bitpub:// string for the current view, used as
+// the initial value of the typeable input and the target of Copy URI.
+// We don't append wildcard suffixes here — pasting the URL back into
+// the bar still works because submitAddress strips trailing '*' chars
+// before resolving.
+function currentAddressString() {
+  if (S.view === 'overview' || !S.currentScope) return 'bitpub://';
+  const path = S.currentPath.join('/');
+  return `bitpub://${S.currentScope}` + (path ? '/' + path : '');
+}
+
+function enterAddressEdit() {
+  const bar = $('url-bar');
+  const inp = $('address-input');
+  if (!bar || !inp) return;
+  bar.classList.add('editing');
+  $('address').classList.add('hidden');
+  inp.classList.remove('hidden');
+  inp.value = currentAddressString();
+  // setTimeout lets the click-that-triggered-edit finish before we steal focus.
+  setTimeout(() => { inp.focus(); inp.select(); }, 0);
+}
+
+function exitAddressEdit() {
+  const bar = $('url-bar');
+  const inp = $('address-input');
+  if (!bar || !inp) return;
+  bar.classList.remove('editing');
+  inp.classList.add('hidden');
+  $('address').classList.remove('hidden');
+}
+
+// Copies the canonical bitpub:// URL for whatever the user is currently
+// viewing. Briefly swaps the button's icon for a checkmark as feedback;
+// no-ops on the overview where the URL would just be "bitpub://".
+function copyAddressUri(btn) {
+  const uri = currentAddressString();
+  if (!uri || uri === 'bitpub://') return;
+  const finish = () => {
+    if (!btn) return;
+    btn.classList.add('copied');
+    btn.innerHTML = ICON.check;
+    clearTimeout(copyAddressUri._t);
+    copyAddressUri._t = setTimeout(() => {
+      btn.classList.remove('copied');
+      btn.innerHTML = ICON.copyLg;
+    }, 1200);
+  };
+  if (navigator.clipboard && navigator.clipboard.writeText) {
+    navigator.clipboard.writeText(uri).then(finish).catch(() => {
+      // Clipboard API can fail in non-secure contexts; fall back to
+      // a textarea-based copy so the button still gives feedback.
+      try {
+        const ta = document.createElement('textarea');
+        ta.value = uri; ta.style.position = 'fixed'; ta.style.opacity = '0';
+        document.body.appendChild(ta); ta.select();
+        document.execCommand('copy');
+        document.body.removeChild(ta);
+        finish();
+      } catch (_) { /* swallow */ }
+    });
+  }
+}
+
+function onAddressKeyDown(e) {
+  if (e.key === 'Enter') {
+    e.preventDefault();
+    submitAddress($('address-input').value);
+  } else if (e.key === 'Escape') {
+    e.preventDefault();
+    exitAddressEdit();
+  }
+}
+
+/**
+ * Resolve a typed URL-bar string and navigate. Accepts:
+ *   - full `bitpub://...` URLs (verbatim)
+ *   - leading-slash paths (resolves against your private root)
+ *   - short names that match a slice tail in cache
+ *   - any other text → falls through to search
+ *
+ * Trailing wildcards (`**`, `*`) and slashes are stripped before
+ * resolution; that's a convenience for users round-tripping pasted
+ * breadcrumb strings from `currentAddressString()`.
+ */
+function submitAddress(raw) {
+  const value = (raw || '').trim();
+  exitAddressEdit();
+  if (!value || value === 'bitpub://') { goRoot(); return; }
+
+  const fullMatch = value.match(/^bitpub:\/\/([^/]+)(?:\/(.*))?$/);
+  if (fullMatch) {
+    const scope = fullMatch[1];
+    const rest = (fullMatch[2] || '').replace(/\*+$/, '').replace(/\/+$/, '');
+    const segs = rest ? rest.split('/').filter(Boolean) : [];
+    const full = `bitpub://${scope}${segs.length ? '/' + segs.join('/') : ''}`;
+    const exact = S.slices.find(s => s.hcu === full);
+    if (exact) { selectSlice(exact.hcu); return; }
+    navigateTo(scope, segs);
+    return;
+  }
+
+  if (value.startsWith('/')) {
+    const owner = ownerScope();
+    if (owner) {
+      const rest = value.replace(/^\/+/, '').replace(/\*+$/, '').replace(/\/+$/, '');
+      const segs = rest ? rest.split('/').filter(Boolean) : [];
+      const full = `bitpub://${owner}${segs.length ? '/' + segs.join('/') : ''}`;
+      const exact = S.slices.find(s => s.hcu === full);
+      if (exact) { selectSlice(exact.hcu); return; }
+      navigateTo(owner, segs);
+      return;
+    }
+  }
+
+  // Try to match a slice by its URL tail (the "load forgivingly" pattern).
+  const tail = value.replace(/^\/+/, '');
+  const exactTail = S.slices.find(s => s.hcu.endsWith('/' + tail));
+  if (exactTail) { selectSlice(exactTail.hcu); return; }
+
+  // Fall through: treat as search.
+  S.view = 'overview';
+  S.currentScope = null;
+  S.currentPath = [];
+  S.selectedHcu = null;
+  S.searchQuery = value;
+  pushHistory();
+  renderAll();
+}
+
 /* ══════════════════════════════════════════════════════
    Navigation
    ══════════════════════════════════════════════════════ */
@@ -1490,7 +1869,7 @@ function goRoot() {
   S.currentPath = [];
   S.selectedHcu = null;
   S.searchQuery = '';
-  $('search').value = '';
+  pushHistory();
   renderAll();
 }
 
@@ -1499,6 +1878,8 @@ function navigateTo(scope, path) {
   S.currentScope = scope;
   S.currentPath = Array.isArray(path) ? path : [];
   S.selectedHcu = null;
+  S.searchQuery = '';
+  pushHistory();
   renderAll();
 }
 
@@ -1510,7 +1891,9 @@ function selectSlice(hcu) {
   S.currentScope = scope;
   S.currentPath = pathOf(hcu);
   S.selectedHcu = hcu;
+  S.searchQuery = '';
   S.raw = false;
+  pushHistory();
   renderAll();
 }
 
@@ -1829,10 +2212,7 @@ function renderNamespace() {
     node = node.children[seg];
   }
 
-  const pathStr = S.currentPath.length ? '/' + S.currentPath.join('/') : '';
-  const fullUri = `bitpub://${scope}${pathStr}/**`;
   const { type } = scopeOf(`bitpub://${scope}`);
-  const isPriv = type === 'private';
 
   // Collect slices within this subtree
   const subSlices = [];
@@ -1843,13 +2223,9 @@ function renderNamespace() {
 
   let html = '<div class="panel">';
 
-  // Address hero
-  html += `<div class="hcu-hero">
-    <span class="scope-dot ${type}"></span>
-    ${isPriv ? `<span class="lock">${ICON.lock}</span>` : ''}
-    <span class="uri"><span class="scheme">bitpub://</span>${esc(scope)}${esc(pathStr)}<span class="glob">/**</span></span>
-    <button class="copy-btn" onclick="copyText('${escAttr(fullUri)}', this)">${ICON.copy}<span>Copy</span></button>
-  </div>`;
+  // (The URI + copy button used to live here as an `.hcu-hero`, but the
+  //  same info is now shown in the address bar at the top of the window
+  //  — keeping it in the panel was redundant.)
 
   // Stats strip
   const tagsInSubtree = new Set();
@@ -1954,13 +2330,9 @@ function renderSlice(sl) {
 
   let html = '<div class="panel blob-wrap">';
 
-  // Address hero chip
-  html += `<div class="hcu-hero">
-    <span class="scope-dot ${type}"></span>
-    ${isPriv ? `<span class="lock">${ICON.lock}</span>` : ''}
-    <span class="uri"><span class="scheme">bitpub://</span>${esc(sl.hcu.replace(/^bitpub:\/\//, ''))}</span>
-    <button class="copy-btn" onclick="copyText('${escAttr(sl.hcu)}', this)">${ICON.copy}<span>Copy URI</span></button>
-  </div>`;
+  // (The URI + copy button used to live here as an `.hcu-hero`, but the
+  //  same info is now shown in the address bar at the top of the window
+  //  — keeping it in the panel was redundant.)
 
   // Meta strip — identity + mutability signal
   html += '<div class="blob-meta">';
@@ -1997,20 +2369,44 @@ function renderSlice(sl) {
     <span class="caveat">${ICON.info}<span>Next push to this address replaces this slice in place.</span></span>
   </div>`;
 
-  // Blob container
+  // Content-type dispatcher. The payload's declared format is the
+  // truthiest signal; we fall back to lightweight content sniffing for
+  // slices written before format declarations were standardised.
+  const kind = detectContentKind(sl, content);
+  // Trusted-only: render HTML inline (in a sandboxed iframe) only for
+  // private + group scopes. Public HTML falls back to escaped source
+  // until we ship the scoped bridge + permission model. This matches
+  // the v1 cut from product discussion.
+  const canRenderAsApp = kind === 'html' && (type === 'private' || type === 'group');
+
   html += '<div class="blob-container has-banner">';
   html += '<div class="blob-toolbar">';
   html += '<div class="btn-group">';
-  html += `<button class="btn ${!S.raw ? 'active' : ''}" onclick="toggleRaw(false)">Preview</button>`;
-  html += `<button class="btn ${S.raw ? 'active' : ''}" onclick="toggleRaw(true)">Raw</button>`;
+  const previewLabel = canRenderAsApp ? 'App' : 'Preview';
+  const sourceLabel = (kind === 'html') ? 'Source' : 'Raw';
+  html += `<button class="btn ${!S.raw ? 'active' : ''}" onclick="toggleRaw(false)">${previewLabel}</button>`;
+  html += `<button class="btn ${S.raw ? 'active' : ''}" onclick="toggleRaw(true)">${sourceLabel}</button>`;
   html += '</div>';
   html += '<div class="spacer"></div>';
+  if (canRenderAsApp && !S.raw) {
+    html += `<span class="app-badge" title="HTML is rendered in a sandboxed iframe with no network or storage access">${ICON.lock}<span>sandboxed</span></span>`;
+  }
   html += `<button class="btn" onclick="copyContent(this)">${ICON.copy}<span>Copy content</span></button>`;
   html += '</div>';
+
   if (S.raw) {
     html += `<pre class="content-raw">${esc(content)}</pre>`;
-  } else {
+  } else if (canRenderAsApp) {
+    html += renderHtmlAppFrame(content);
+  } else if (kind === 'html') {
+    html += `<div class="app-public-note">${ICON.info}
+      <div>HTML apps from <code>public:</code> addresses are shown as source until the public sandbox model lands. Apps in <code>private:</code> and <code>group:</code> scopes render inline.</div>
+    </div>`;
+    html += `<pre class="content-raw">${esc(content)}</pre>`;
+  } else if (kind === 'markdown') {
     html += `<div class="content-body">${md(content)}</div>`;
+  } else {
+    html += `<pre class="content-raw">${esc(content)}</pre>`;
   }
   html += `<div class="blob-footer">${lines} line${lines !== 1 ? 's' : ''} · ${formatBytes(sizeBytes)} · ${esc(format)} · only the latest version is retained</div>`;
   html += '</div>';
@@ -2019,6 +2415,71 @@ function renderSlice(sl) {
   $('main').innerHTML = html;
 }
 
+/**
+ * Content-kind detection for the slice dispatcher. Returns one of
+ *   'html' | 'markdown' | 'text'
+ * Order of signals (most authoritative first):
+ *   1. Declared payload format (e.g. text/html, text/markdown)
+ *   2. Slice address tail (.html / .md hints — common in Pack layouts)
+ *   3. Content sniffing (doctype, leading <html>, leading #-heading)
+ */
+function detectContentKind(sl, content) {
+  const fmt = (sl.payload.format || '').toLowerCase();
+  if (/html/.test(fmt)) return 'html';
+  if (/markdown|^text\/md$|md(?:$|;)/.test(fmt)) return 'markdown';
+
+  const tail = (pathOf(sl.hcu).pop() || '').toLowerCase();
+  if (/\.html?$/.test(tail)) return 'html';
+  if (/\.md$|\.markdown$/.test(tail)) return 'markdown';
+
+  if (/^\s*(<!doctype\s+html|<html[\s>]|<body[\s>])/i.test(content)) return 'html';
+  if (/^\s*#\s/m.test(content)) return 'markdown';
+
+  return 'text';
+}
+
+/**
+ * Render an HTML payload as a sandboxed app frame.
+ *
+ * Security floor (v1 trusted-only model):
+ *   - sandbox="allow-scripts" only. Notably NOT allow-same-origin, so
+ *     the iframe runs in a unique opaque origin: no parent DOM access,
+ *     no cookies, no localStorage carried over.
+ *   - Strict CSP injected into <head> via <meta http-equiv="...">.
+ *     default-src 'none' blocks all network — no fetch, no XHR, no
+ *     WebSocket, no images from arbitrary hosts. Inline scripts and
+ *     styles are permitted (the app's code is embedded in srcdoc).
+ *   - <base target="_blank"> so any link the app tries to follow opens
+ *     in a new tab instead of breaking the user out of the Browser.
+ *   - referrerpolicy="no-referrer" so even allowed sub-resources can't
+ *     leak the user's location.
+ *
+ * No bridge to bitpub is exposed yet — apps in v1 can render but cannot
+ * read from or write to the user's namespaces. The bridge is the next
+ * milestone and will be opt-in per Pack via a declared manifest.
+ */
+function renderHtmlAppFrame(html) {
+  const csp = `<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'unsafe-inline'; style-src 'unsafe-inline'; img-src data: blob:; font-src data:; base-uri 'none'; form-action 'none'">`;
+  const baseTag = `<base target="_blank">`;
+  const headInject = `${csp}${baseTag}`;
+
+  let doc;
+  if (/<head[\s>]/i.test(html)) {
+    // Insert our policy at the very start of the existing <head> so it
+    // applies before any of the app's own resources are referenced.
+    doc = html.replace(/<head([\s>])/i, `<head$1${headInject}`);
+  } else if (/<html[\s>]/i.test(html)) {
+    doc = html.replace(/<html([\s>][^>]*)>/i, `<html$1><head>${headInject}</head>`);
+  } else {
+    doc = `<!doctype html><html><head>${headInject}</head><body>${html}</body></html>`;
+  }
+
+  // srcdoc unescapes &, <, >, ", ' before parsing the inner document,
+  // so we only need to escape what would otherwise break the attribute.
+  const srcdoc = doc.replace(/&/g, '&amp;').replace(/"/g, '&quot;');
+  return `<iframe class="app-frame" sandbox="allow-scripts" referrerpolicy="no-referrer" srcdoc="${srcdoc}"></iframe>`;
+}
+
 function renderWriteGuide(sl) {
   const addr = sl.hcu;
   const ver = sl.metadata.version || 1;
@@ -2243,13 +2704,22 @@ function timeAgo(ts) {
    Keyboard
    ══════════════════════════════════════════════════════ */
 document.addEventListener('keydown', e => {
+  // `/` focuses the URL bar — same affordance as the old search box, now
+  // it's the address bar. Ignored when the user is already typing.
   if (e.key === '/' && document.activeElement.tagName !== 'INPUT') {
-    e.preventDefault(); $('search').focus();
+    e.preventDefault();
+    enterAddressEdit();
   }
+  // Browser-style Alt+Left / Alt+Right for back/forward.
+  if (e.altKey && e.key === 'ArrowLeft') { e.preventDefault(); goBack(); }
+  if (e.altKey && e.key === 'ArrowRight') { e.preventDefault(); goForward(); }
+
   if (e.key === 'Escape') {
-    if (S.searchQuery) { $('search').value = ''; S.searchQuery = ''; renderPanel(); }
-    else if (filterActive()) { clearFilter(); }
-    else if (S.view === 'slice' || S.view === 'namespace') { goRoot(); }
+    // Order: bail out of address-edit > clear search > clear filter > go home.
+    if (!$('address-input').classList.contains('hidden')) { exitAddressEdit(); return; }
+    if (S.searchQuery) { S.searchQuery = ''; renderPanel(); return; }
+    if (filterActive()) { clearFilter(); return; }
+    if (S.view === 'slice' || S.view === 'namespace') { goRoot(); }
   }
 });
 
@@ -2257,6 +2727,11 @@ document.addEventListener('keydown', e => {
    Boot
    ══════════════════════════════════════════════════════ */
 $('auth-key').addEventListener('keydown', e => { if (e.key === 'Enter') submitAuth(); });
+$('address-input').addEventListener('keydown', onAddressKeyDown);
+$('address-input').addEventListener('blur', exitAddressEdit);
+// Prime history with the initial overview so the first navigation has
+// somewhere to come back to.
+pushHistory();
 boot();
 </script>
 </body>