feat(chat): view context — tell the assistant what you're looking at

An eye next to the paperclip shares what the user has open with their next
message: the page, the folder being browsed, the file open in the viewer and
any highlighted passage (line numbers where a source view exists), plus which
entity a detail page is about. The bag is client-authored {label, value} pairs
in English — the backend only clamps (chars, never bytes), neutralizes the
harness tag and renders one <system-extra> block per message, deduped
consecutively so it appears exactly when the view changed. On by default,
per-device toggle, hover/tap to preview, a chip on every sent message;
docs/view-context.md for users, an updated harness.md clause for the model.

web/components/plugin-page-host.js

@@ -1,6 +1,10 @@
 import { html, nothing } from 'lit';
 import { LightElement } from '../lib/base.js';
 import { t } from '../lib/i18n.js';
+import { setSlice, clearSlice } from '../lib/view-context.js';
+
+/// The view-context slice this page owns (see `lib/view-context.js`).
+const VIEW_SLICE = 'entity@plugin-page-host';
 
 // Host for plugin-contributed pages (`#plugin/<plugin_id>/<page_id>`).
 //
@@ -29,6 +33,7 @@ export class PluginPageHost extends LightElement {
     this._error = null;
     this._loading = false;
     this._mounted = null;   // currently mounted fragment element
+    this._titles = new Map(); // "plugin/page" element tag → the page's own title
   }
 
   connectedCallback() {
@@ -42,10 +47,16 @@ export class PluginPageHost extends LightElement {
         this._open = false;
         this._route = null;
         this.style.display = 'none';
+        clearSlice(VIEW_SLICE);
       }
     });
   }
 
+  disconnectedCallback() {
+    clearSlice(VIEW_SLICE);
+    super.disconnectedCallback();
+  }
+
   async _openPage(route) {
     this._open = true;
     this.style.display = 'flex';
@@ -55,17 +66,26 @@ export class PluginPageHost extends LightElement {
     this._loading = true;
 
     const [, pluginId, pageId] = route.split('/');
+    // The entity slice: which plugin page this is. The ids go out at once; the
+    // page's own title — the part the route cannot carry — replaces them as
+    // soon as the pages list resolves (cached: a re-open refetches nothing).
+    setSlice(VIEW_SLICE, [{ label: 'Open plugin page', value: `${pluginId} / ${pageId}` }]);
     const tag = `skald-plugin-${pluginId}-${pageId}`;
     try {
       if (!customElements.get(tag)) {
-        const entry_url = await this._resolveEntry(pluginId, pageId);
-        const mod = await import(/* @vite-ignore */ entry_url);
+        const page = await this._resolvePage(pluginId, pageId);
+        this._titles.set(tag, page.title);
+        const mod = await import(/* @vite-ignore */ page.entry_url);
         const cls = mod.default;
         if (!cls || !(cls.prototype instanceof HTMLElement)) {
           throw new Error('fragment must default-export an HTMLElement class');
         }
         customElements.define(tag, cls);
       }
+      const title = this._titles.get(tag);
+      if (title && this._route === route) {
+        setSlice(VIEW_SLICE, [{ label: 'Open plugin page', value: `${title} (${pluginId} / ${pageId})` }]);
+      }
       const el = document.createElement(tag);
       el.setAttribute('plugin-id', pluginId);
       if (this._mounted) this._mounted.remove();
@@ -78,13 +98,13 @@ export class PluginPageHost extends LightElement {
     }
   }
 
-  async _resolveEntry(pluginId, pageId) {
+  async _resolvePage(pluginId, pageId) {
     const res = await fetch('/api/plugins/pages');
     if (!res.ok) throw new Error(`HTTP ${res.status}`);
     const pages = await res.json();
     const page = pages.find(p => p.plugin_id === pluginId && p.page_id === pageId);
     if (!page) throw new Error(t('plugin_page.unavailable'));
-    return page.entry_url;
+    return page;
   }
 
   render() {