@webmcp-auto-ui/ui 2.5.38 → 2.5.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webmcp-auto-ui/ui",
-  "version": "2.5.38",
+  "version": "2.5.39",
   "description": "Svelte 5 UI components — primitives, widgets, window manager",
   "license": "AGPL-3.0-or-later",
   "type": "module",

package/src/widgets/notebook/notebook.ts

@@ -79,8 +79,11 @@ export async function render(container: HTMLElement, data: Record<string, unknow
     hidePublishBadge: (data as any).hidePublishBadge === true,
   } as any);
 
-  // Default src visibility per mode (toggle remains usable for per-cell override).
-  for (const c of state.cells) c.hideSource = state.mode === 'view';
+  // Default src + logs visibility per mode (toggle remains usable for per-cell override).
+  for (const c of state.cells) {
+    c.hideSource = state.mode === 'view';
+    if (state.mode === 'view' && c.hideLogs === undefined) c.hideLogs = true;
+  }
 
   // Live mode runtime overlay (created lazily). Never mutates state.
   let overlay: RuntimeOverlay | null = null;
@@ -282,7 +285,7 @@ export async function render(container: HTMLElement, data: Record<string, unknow
   const viewBtn = shell.querySelector('.nb-mode-view') as HTMLElement;
   editBtn.addEventListener('click', () => {
     state.mode = 'edit';
-    for (const c of state.cells) c.hideSource = false;
+    for (const c of state.cells) { c.hideSource = false; c.hideLogs = false; }
     container.classList.remove('nb-view-mode');
     editBtn.classList.add('nb-on'); viewBtn.classList.remove('nb-on');
     // Leaving view: stop live refresh and clear overlay so frozen snapshots show.
@@ -291,7 +294,7 @@ export async function render(container: HTMLElement, data: Record<string, unknow
   });
   viewBtn.addEventListener('click', () => {
     state.mode = 'view';
-    for (const c of state.cells) c.hideSource = true;
+    for (const c of state.cells) { c.hideSource = true; c.hideLogs = true; }
     container.classList.add('nb-view-mode');
     viewBtn.classList.add('nb-on'); editBtn.classList.remove('nb-on');
     if (state.autoRun === true) bootstrapLive();
@@ -454,17 +457,25 @@ function renderCell(cell: NotebookCell, state: NotebookState, overlay: RuntimeOv
       liveBadge = `<span class="nbe-cell-badge nbe-cell-frozen" title="JS cells are not re-executed in live mode">frozen</span>`;
     }
   }
+  const lastRes = effectiveResult(cell, overlay) ?? cell.lastResult;
+  const logCount = (lastRes?.logs as string[] | undefined)?.length ?? 0;
+  const logsToggle = logCount > 0
+    ? `<button class="nb-icon-btn nb-toggle-logs" title="toggle console">${cell.hideLogs ? '▸' : '▾'} ${logCount}</button>`
+    : '';
   head.innerHTML = `
     <span class="nbe-run-controls"></span>
     <span class="nbe-type-${cell.type}">${cell.type}</span>
     <span class="nbe-meta-info">${escapeHtml(metaInfoFor(cell, overlay))}</span>
     ${liveBadge}
     <div class="nbe-actions">
+      ${logsToggle}
       <button class="nb-icon-btn nb-toggle-src">${cell.hideSource ? '▸ src' : '◂ src'}</button>
       <button class="nb-icon-btn nb-toggle-res">${cell.hideResult ? '▸ res' : '◂ res'}</button>
     </div>`;
   codeCell.appendChild(head);
   mountRunControls(head.querySelector('.nbe-run-controls') as HTMLElement, cell, wrap, state, rerender);
+  const logsBtn = head.querySelector('.nb-toggle-logs') as HTMLElement | null;
+  if (logsBtn) logsBtn.addEventListener('click', () => { cell.hideLogs = !cell.hideLogs; rerender(); });
 
   const body = document.createElement('div');
   body.className = 'nbe-code-body' + (cell.hideSource ? ' nbe-hidden' : '');
@@ -847,12 +858,25 @@ function renderResultInto(el: HTMLElement, cell: NotebookCell, overlay: RuntimeO
   const r = effectiveResult(cell, overlay) ?? cell.lastResult;
   el.innerHTML = '';
   if (!r) {
-    el.innerHTML = `<div class="nbe-result-empty">press ▶ to run</div>`;
+    const isView = stateRef?.mode === 'view';
+    const rtStatus = cellRuntimeStatus(cell, overlay);
+    // In view mode (autoRun), any unresolved cell is effectively loading —
+    // the auto-runner will pick it up shortly. Show a continuous spinner so
+    // users don't see a static "—" placeholder during the idle→running gap.
+    if (isView && rtStatus !== 'frozen') {
+      el.innerHTML = `<div class="nbe-result-running"><span class="nbe-spinner"></span> running</div>`;
+    } else if (rtStatus === 'running') {
+      el.innerHTML = `<div class="nbe-result-running"><span class="nbe-spinner"></span> running</div>`;
+    } else {
+      el.innerHTML = `<div class="nbe-result-empty">press ▶ to run</div>`;
+    }
     return;
   }
   // Logs panel (shared across all widgets), prepended above the main result
-  const logsEl = renderCellLogs(r);
-  if (logsEl) el.appendChild(logsEl);
+  if (!cell.hideLogs) {
+    const logsEl = renderCellLogs(r);
+    if (logsEl) el.appendChild(logsEl);
+  }
   if (!r.ok) {
     const err = document.createElement('div');
     err.className = 'nbe-result-error';
@@ -1080,6 +1104,30 @@ function injectLayoutStyles(): void {
 .nbe-code-body { padding: 14px 16px; }
 .nbe-hidden { display: none !important; }
 
+/* View-mode Option B: chrome hidden by default, revealed on hover in top-right corner. */
+.nb-root.nb-view-mode .nbe-code-cell { position: relative; min-height: 28px; }
+.nb-root.nb-view-mode .nbe-cell-head {
+  position: absolute; top: 0; right: 0; z-index: 2;
+  padding: 4px 8px; gap: 6px;
+  background: var(--color-surface2);
+  border: 1px solid var(--color-border);
+  border-top: none; border-right: none;
+  border-bottom-left-radius: 6px;
+  opacity: 0; pointer-events: none;
+  transition: opacity 120ms ease;
+  font-size: 9.5px;
+}
+.nb-root.nb-view-mode .nbe-code-cell:hover .nbe-cell-head,
+.nb-root.nb-view-mode .nbe-cell-head:focus-within {
+  opacity: 0.95; pointer-events: auto;
+}
+.nb-root.nb-view-mode .nbe-cell-head .nbe-meta-info,
+.nb-root.nb-view-mode .nbe-cell-head .nbe-type-sql,
+.nb-root.nb-view-mode .nbe-cell-head .nbe-type-js,
+.nb-root.nb-view-mode .nbe-cell-head .nbe-type-md { display: none; }
+.nb-root.nb-view-mode .nbe-code-body { padding: 10px 14px; }
+.nb-root.nb-view-mode .nbe-result { padding: 8px 14px; }
+
 .nbe-result {
   background: var(--color-bg);
   border-top: 1px solid var(--color-border);
@@ -1090,6 +1138,10 @@ function injectLayoutStyles(): void {
 .nbe-result-empty {
   color: var(--color-text2); font-style: italic; font-size: 11.5px;
 }
+.nbe-result-running {
+  display: inline-flex; align-items: center; gap: 6px;
+  color: #2ea043; font-size: 11.5px;
+}
 .nbe-result-error {
   color: var(--color-accent2); white-space: pre-wrap; font-size: 12px;
 }

package/src/widgets/notebook/share-handlers.ts

@@ -4,7 +4,7 @@
 // 4 formats: JSON, Markdown, Hyperskill link (+ short), PNG snapshot.
 // ---------------------------------------------------------------------------
 
-import { encode, buildShortUrl } from '@webmcp-auto-ui/sdk';
+import { encode, buildShortUrl, pickFence } from '@webmcp-auto-ui/sdk';
 import { canvasVanilla } from '@webmcp-auto-ui/sdk/canvas-vanilla';
 import type { NotebookState, NotebookCell } from './shared.js';
 
@@ -56,7 +56,9 @@ export function serializeToMarkdown(state: NotebookState): string {
       const metaLine = cell.args && Object.keys(cell.args).length > 0
         ? `${commentPrefix} @meta ${JSON.stringify(cell.args)}\n`
         : '';
-      parts.push('```' + lang + varname, metaLine + cell.content.trim(), '```', '');
+      const body = metaLine + cell.content.trim();
+      const fence = pickFence(body);
+      parts.push(fence + lang + varname, body, fence, '');
     }
   }
   return parts.join('\n').trim() + '\n';

package/src/widgets/notebook/shared.ts

@@ -47,6 +47,8 @@ export interface NotebookCell {
   varname?: string;        // named output (compact)
   hideSource?: boolean;
   hideResult?: boolean;
+  /** view-mode: collapse the console logs panel under the head bar. Default true in view mode. */
+  hideLogs?: boolean;
   runState?: RunState;
   lastMs?: number;
   status?: 'fresh' | 'stale';
@@ -1248,8 +1250,6 @@ const NOTEBOOK_STYLES = `
 
 .nb-root.nb-view-mode .nb-drag-handle,
 .nb-root.nb-view-mode .nb-icon-btn.nb-danger,
-.nb-root.nb-view-mode .nb-toggle-src,
-.nb-root.nb-view-mode .nb-toggle-res,
 .nb-root.nb-view-mode .nb-add-cell,
 .nb-root.nb-view-mode .nbe-cell-actionbar { display: none !important; }