@qnote/q-ai-note 1.0.5 → 1.0.6

package/dist/web/app.js

@@ -9,6 +9,7 @@ const state = {
   operations: [],
   chats: [],
   settings: {},
+  readonly: false,
   pendingAction: null,
   nodeEntities: [],
   nodeEntityStats: null,
@@ -16,7 +17,8 @@ const state = {
   nodeEntityFilter: 'all',
   editingNodeEntityId: null,
   nodeEntityFormExpanded: false,
-  sandboxPresentationMode: false,
+  sandboxChatVisible: false,
+  sandboxChatVisibleBeforeFullscreen: false,
   sandboxFullscreenMode: false,
   workTreeViewMode: 'full',
   workItemElementPreviewMode: 'none',
@@ -38,6 +40,7 @@ let sandboxActionHandler = null;
 let sandboxEscLocked = false;
 let resizeRenderTimer = null;
 const WORK_ITEM_SHOW_ASSIGNEE_STORAGE_KEY = 'q-ai-note.work-item.show-assignee';
+const WORK_TREE_VIEW_MODE_STORAGE_KEY = 'q-ai-note.work-tree.view-mode';
 
 function loadWorkItemAssigneePreference() {
   try {
@@ -60,14 +63,78 @@ function persistWorkItemAssigneePreference() {
   }
 }
 
-function applySandboxLayoutMode() {
+function loadWorkTreeViewModePreference() {
+  try {
+    const raw = String(window.localStorage.getItem(WORK_TREE_VIEW_MODE_STORAGE_KEY) || '').trim();
+    if (raw === 'full' || raw === 'report' || raw === 'dense') {
+      state.workTreeViewMode = raw;
+    }
+  } catch {
+    // Ignore storage failures in restricted environments.
+  }
+}
+
+function persistWorkTreeViewModePreference() {
+  try {
+    window.localStorage.setItem(WORK_TREE_VIEW_MODE_STORAGE_KEY, state.workTreeViewMode || 'full');
+  } catch {
+    // Ignore storage failures in restricted environments.
+  }
+}
+
+function applySandboxChatVisibility() {
   const layout = document.getElementById('sandbox-layout');
-  const toggleBtn = document.getElementById('toggle-sandbox-present-btn');
+  const toggleBtn = document.getElementById('toggle-sandbox-chat-btn');
   if (!layout || !toggleBtn) return;
-  const isPresentation = Boolean(state.sandboxPresentationMode);
-  layout.classList.toggle('presentation-mode', isPresentation);
-  toggleBtn.textContent = isPresentation ? '退出展示态' : '展示态布局';
-  toggleBtn.setAttribute('aria-pressed', isPresentation ? 'true' : 'false');
+  const shouldShow = !state.readonly && Boolean(state.sandboxChatVisible);
+  layout.classList.toggle('show-chat', shouldShow);
+  toggleBtn.classList.toggle('hidden', state.readonly);
+  toggleBtn.innerHTML = shouldShow
+    ? '<span class="icon" aria-hidden="true">🤖</span><span>隐藏 AI 助手</span>'
+    : '<span class="icon" aria-hidden="true">🤖</span><span>显示 AI 助手</span>';
+  toggleBtn.setAttribute('aria-pressed', shouldShow ? 'true' : 'false');
+}
+
+async function loadRuntimeMode() {
+  try {
+    const runtime = await apiRequest(`${API_BASE}/runtime`);
+    state.readonly = Boolean(runtime?.readonly);
+  } catch {
+    state.readonly = false;
+  }
+}
+
+function setHiddenById(id, hidden = true) {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.classList.toggle('hidden', hidden);
+}
+
+function applyReadonlyMode() {
+  document.body.classList.toggle('readonly-mode', state.readonly);
+  const settingsNav = document.querySelector('[data-nav="settings"]');
+  if (settingsNav instanceof HTMLElement) {
+    settingsNav.classList.toggle('hidden', state.readonly);
+  }
+  setHiddenById('page-settings', state.readonly);
+  setHiddenById('add-sandbox-btn', state.readonly);
+  setHiddenById('add-item-btn', state.readonly);
+  setHiddenById('toggle-node-entity-form-btn', state.readonly);
+  setHiddenById('drawer-diary-save-btn', state.readonly);
+  setHiddenById('save-diary-btn', state.readonly);
+  const diaryForm = document.querySelector('#page-diaries .diary-form');
+  if (diaryForm instanceof HTMLElement) {
+    diaryForm.classList.toggle('hidden', state.readonly);
+  }
+  const drawerDiaryForm = document.querySelector('#node-entity-drawer .drawer-diary-quick-form');
+  if (drawerDiaryForm instanceof HTMLElement) {
+    drawerDiaryForm.classList.toggle('hidden', state.readonly);
+  }
+  if (state.readonly) {
+    state.sandboxChatVisible = false;
+    closeQuickChatPopover();
+  }
+  applySandboxChatVisibility();
 }
 
 function getSandboxLayoutElement() {
@@ -100,7 +167,14 @@ function applySandboxFullscreenState() {
   const layout = getSandboxLayoutElement();
   const fullscreenRoot = getSandboxFullscreenElement();
   const toggleBtn = document.getElementById('toggle-sandbox-fullscreen-btn');
+  const wasFullscreen = Boolean(state.sandboxFullscreenMode);
   const isFullscreen = Boolean(fullscreenRoot && document.fullscreenElement === fullscreenRoot);
+  if (!wasFullscreen && isFullscreen) {
+    state.sandboxChatVisibleBeforeFullscreen = Boolean(state.sandboxChatVisible);
+    state.sandboxChatVisible = false;
+  } else if (wasFullscreen && !isFullscreen) {
+    state.sandboxChatVisible = Boolean(state.sandboxChatVisibleBeforeFullscreen);
+  }
   state.sandboxFullscreenMode = isFullscreen;
   if (layout) {
     layout.classList.toggle('is-fullscreen', isFullscreen);
@@ -112,9 +186,22 @@ function applySandboxFullscreenState() {
     toggleBtn.textContent = isFullscreen ? '退出全屏' : '全屏';
     toggleBtn.setAttribute('aria-pressed', isFullscreen ? 'true' : 'false');
   }
+  applySandboxChatVisibility();
+  applySandboxLayoutHeight();
   void syncSandboxEscLock(isFullscreen);
 }
 
+function applySandboxLayoutHeight() {
+  const layout = getSandboxLayoutElement();
+  if (!(layout instanceof HTMLElement)) return;
+  const rect = layout.getBoundingClientRect();
+  const viewportHeight = Math.floor(window.visualViewport?.height || window.innerHeight || 0);
+  if (!Number.isFinite(viewportHeight) || viewportHeight <= 0) return;
+  const bottomGap = state.sandboxFullscreenMode ? 8 : 10;
+  const nextHeight = Math.max(320, viewportHeight - Math.floor(rect.top) - bottomGap);
+  layout.style.height = `${nextHeight}px`;
+}
+
 async function toggleSandboxFullscreen() {
   const fullscreenRoot = getSandboxFullscreenElement();
   if (!fullscreenRoot) return;
@@ -230,7 +317,7 @@ function renderWorkTree() {
   }
 
   if (allItems.length === 0) {
-    tree.innerHTML = '<div class="empty-state"><p>点击上方"添加"按钮创建第一个任务</p></div>';
+    tree.innerHTML = `<div class="empty-state"><p>${state.readonly ? '暂无任务' : '点击上方"添加"按钮创建第一个任务'}</p></div>`;
     return;
   }
 
@@ -246,7 +333,7 @@ function renderWorkTree() {
       }
       renderWorkTree();
     },
-    onAddChild: (parentId) => {
+    onAddChild: state.readonly ? undefined : (parentId) => {
       document.getElementById('item-dialog-title').textContent = '添加子任务';
       document.getElementById('item-dialog').dataset.editId = '';
       document.getElementById('new-item-name').value = '';
@@ -257,14 +344,14 @@ function renderWorkTree() {
       document.getElementById('new-item-parent').value = parentId;
       document.getElementById('item-dialog').showModal();
     },
-    onAddDiary: (nodeId) => {
+    onAddDiary: state.readonly ? undefined : (nodeId) => {
       showNodeEntityDrawer(nodeId, 'diary');
       const textarea = document.getElementById('drawer-diary-content');
       if (textarea instanceof HTMLTextAreaElement) {
         textarea.focus();
       }
     },
-    onEdit: (id) => {
+    onEdit: state.readonly ? undefined : (id) => {
       editWorkItem(id);
     },
     onSelect: (id) => {
@@ -273,7 +360,7 @@ function renderWorkTree() {
     onSelectEntity: (nodeId, entityType) => {
       showNodeEntityDrawer(nodeId, entityType || 'all');
     },
-    onMoveNode: async (dragNodeId, newParentId) => {
+    onMoveNode: state.readonly ? undefined : async (dragNodeId, newParentId) => {
       if (!state.currentSandbox) return;
       if (!dragNodeId || dragNodeId === newParentId) return;
       const byId = new Map((state.currentSandbox.items || []).map((item) => [item.id, item]));
@@ -301,7 +388,7 @@ function renderWorkTree() {
       });
       await loadSandbox(state.currentSandbox.id);
     },
-    onReorderSiblings: async (dragNodeId, targetNodeId, position) => {
+    onReorderSiblings: state.readonly ? undefined : async (dragNodeId, targetNodeId, position) => {
       if (!state.currentSandbox) return;
       if (!dragNodeId || !targetNodeId || dragNodeId === targetNodeId) return;
       const byId = new Map((state.currentSandbox.items || []).map((item) => [item.id, item]));
@@ -334,7 +421,7 @@ function renderWorkTree() {
       });
       await loadSandbox(state.currentSandbox.id);
     },
-    onReorderLanes: async (dragRootId, targetRootId) => {
+    onReorderLanes: state.readonly ? undefined : async (dragRootId, targetRootId) => {
       if (!state.currentSandbox) return;
       if (!dragRootId || !targetRootId || dragRootId === targetRootId) return;
       const roots = (state.currentSandbox.items || []).filter((item) => !item.parent_id);
@@ -359,19 +446,21 @@ function renderWorkTree() {
       });
       await loadSandbox(state.currentSandbox.id);
     },
-    onDelete: async (id) => {
+    onDelete: state.readonly ? undefined : async (id) => {
       if (confirm('确定删除此任务？')) {
         await apiRequest(`${API_BASE}/items/${id}`, { method: 'DELETE' });
         await loadSandbox(state.currentSandbox.id);
       }
     },
-    onQuickChat: (id, el) => {
+    onQuickChat: state.readonly ? undefined : (id, el) => {
       openQuickChatPopover(id, el);
     },
     renderMode: state.workTreeViewMode === 'dense' ? 'dense' : 'card',
     showAssignee: state.workItemShowAssignee,
     elementPreviewMode: state.workItemElementPreviewMode,
     entityRowsByNodeId,
+    readonly: state.readonly,
+    selectedId: state.selectedNodeId || '',
   });
   
   populateParentSelect(allItems);
@@ -674,6 +763,7 @@ function closeNodeEntityDrawer() {
   state.nodeEntityFilter = 'all';
   state.editingNodeEntityId = null;
   state.nodeEntityFormExpanded = false;
+  renderWorkTree();
 }
 
 function setNodeEntityFormExpanded(expanded) {
@@ -755,13 +845,15 @@ function renderNodeEntityList(nodeId) {
               <span class="entity-type-pill">diary</span>
               <strong>${safeText('日志记录')}</strong>
             </div>
-            <div class="entity-card-actions">
-              <button class="btn btn-secondary btn-sm" data-diary-edit-id="${safeText(row.id)}">编辑</button>
-              ${row.processed ? '' : `
-                <button class="btn btn-secondary btn-sm" data-diary-confirm-id="${safeText(row.id)}">采纳</button>
-                <button class="btn btn-secondary btn-sm" data-diary-ignore-id="${safeText(row.id)}">忽略</button>
-              `}
-            </div>
+            ${state.readonly ? '' : `
+              <div class="entity-card-actions">
+                <button class="btn btn-secondary btn-sm" data-diary-edit-id="${safeText(row.id)}">编辑</button>
+                ${row.processed ? '' : `
+                  <button class="btn btn-secondary btn-sm" data-diary-confirm-id="${safeText(row.id)}">采纳</button>
+                  <button class="btn btn-secondary btn-sm" data-diary-ignore-id="${safeText(row.id)}">忽略</button>
+                `}
+              </div>
+            `}
           </div>
           <div class="entity-meta">
             ${safeText(new Date(row.created_at).toLocaleString())}
@@ -778,10 +870,12 @@ function renderNodeEntityList(nodeId) {
             <span class="entity-type-pill">${safeText(row.entity_type)}</span>
             <strong>${safeText(row.title || '-')}</strong>
           </div>
-          <div class="entity-card-actions">
-            <button class="btn btn-secondary btn-sm" data-entity-edit-id="${safeText(row.id)}">编辑</button>
-            <button class="btn btn-secondary btn-sm" data-entity-delete-id="${safeText(row.id)}">删除</button>
-          </div>
+          ${state.readonly ? '' : `
+            <div class="entity-card-actions">
+              <button class="btn btn-secondary btn-sm" data-entity-edit-id="${safeText(row.id)}">编辑</button>
+              <button class="btn btn-secondary btn-sm" data-entity-delete-id="${safeText(row.id)}">删除</button>
+            </div>
+          `}
         </div>
         <div class="entity-meta">
           ${safeText(new Date(row.created_at).toLocaleString())}
@@ -920,6 +1014,7 @@ function showNodeEntityDrawer(nodeId, preferredFilter = 'all') {
   state.nodeEntityFilter = filter;
   title.textContent = node.name || nodeId;
   renderNodeEntitySummary(nodeId);
+  renderWorkTree();
   renderQuickDiaryTargetLabel();
   renderNodeEntityFilterTabs();
   renderNodeEntityList(nodeId);
@@ -1031,6 +1126,7 @@ function composeQuickChatContent(nodeId, userQuestion) {
 }
 
 async function sendSandboxChatMessage(content, options = {}) {
+  if (state.readonly) return;
   if (!content || !state.currentSandbox) return;
   const messages = document.getElementById('sandbox-chat-messages');
   const btn = document.getElementById('sandbox-send-btn');
@@ -1221,12 +1317,13 @@ function renderSandboxes() {
     onOpen: (id) => {
       window.location.hash = `/sandbox/${id}`;
     },
-    onDelete: async (id) => {
+    onDelete: state.readonly ? undefined : async (id) => {
       if (confirm('确定删除此沙盘？')) {
         await apiRequest(`${API_BASE}/sandboxes/${id}`, { method: 'DELETE' });
         await loadSandboxes();
       }
-    }
+    },
+    readonly: state.readonly,
   });
 }
 
@@ -1247,12 +1344,19 @@ async function loadSandbox(id) {
   applyWorkTreeViewMode(state.workTreeViewMode || 'full');
   applyWorkItemAssigneeToggle();
   applyWorkItemElementPreviewMode();
-  applySandboxLayoutMode();
+  applySandboxChatVisibility();
   applySandboxFullscreenState();
   renderQuickDiaryTargetLabel();
   renderSandboxOverview();
   renderWorkTree();
-  loadSandboxChats(id);
+  applySandboxLayoutHeight();
+  if (state.readonly) {
+    state.chats = [];
+    const messages = document.getElementById('sandbox-chat-messages');
+    if (messages) messages.innerHTML = '';
+  } else {
+    loadSandboxChats(id);
+  }
 }
 
 function renderSandboxOverview() {
@@ -1277,6 +1381,7 @@ function renderSandboxOverview() {
 }
 
 async function loadSandboxChats(sandboxId) {
+  if (state.readonly) return;
   const messages = document.getElementById('sandbox-chat-messages');
   if (!messages) return;
   
@@ -1436,25 +1541,26 @@ function renderDiaries() {
       openDiaryWorkItemInSandbox(sandboxId, workItemId);
     },
     renderContent: (content) => renderMarkdownSnippet(content),
-    onConfirm: async (id) => {
+    onConfirm: state.readonly ? undefined : async (id) => {
       await apiRequest(`${API_BASE}/diaries/${id}/process`, {
         method: 'PUT',
         body: JSON.stringify({ action: 'confirm' }),
       });
       await loadDiaries();
     },
-    onIgnore: async (id) => {
+    onIgnore: state.readonly ? undefined : async (id) => {
       await apiRequest(`${API_BASE}/diaries/${id}/process`, {
         method: 'PUT',
         body: JSON.stringify({ action: 'ignore' }),
       });
       await loadDiaries();
     },
-    onEdit: async (id) => {
+    onEdit: state.readonly ? undefined : async (id) => {
       const diary = state.diaries.find((row) => row.id === id);
       if (!diary) return;
       openDiaryEditDialog(diary);
     },
+    readonly: state.readonly,
   });
 }
 
@@ -1812,10 +1918,12 @@ function editWorkItem(id) {
   document.getElementById('item-dialog').showModal();
 }
 
-function initApp() {
-  const hash = window.location.hash;
+async function initApp() {
+  await loadRuntimeMode();
   loadWorkItemAssigneePreference();
+  loadWorkTreeViewModePreference();
   renderQuickDiaryTargetLabel();
+  applyReadonlyMode();
   
   document.querySelectorAll('.nav-list a').forEach(link => {
     link.addEventListener('click', (e) => {
@@ -1825,6 +1933,7 @@ function initApp() {
   });
   
   document.getElementById('add-sandbox-btn')?.addEventListener('click', () => {
+    if (state.readonly) return;
     document.getElementById('sandbox-dialog').showModal();
   });
   
@@ -1833,6 +1942,7 @@ function initApp() {
   });
   
   const createSandbox = async (e) => {
+    if (state.readonly) return;
     e?.preventDefault?.();
     const name = document.getElementById('new-sandbox-name').value;
     const description = document.getElementById('new-sandbox-desc').value;
@@ -1856,6 +1966,7 @@ function initApp() {
   document.getElementById('confirm-sandbox-btn')?.addEventListener('click', createSandbox);
   
   document.getElementById('add-item-btn')?.addEventListener('click', () => {
+    if (state.readonly) return;
     document.getElementById('item-dialog-title').textContent = '添加任务';
     document.getElementById('item-dialog').dataset.editId = '';
     document.getElementById('new-item-name').value = '';
@@ -1867,9 +1978,11 @@ function initApp() {
     document.getElementById('item-dialog').showModal();
   });
 
-  document.getElementById('toggle-sandbox-present-btn')?.addEventListener('click', () => {
-    state.sandboxPresentationMode = !state.sandboxPresentationMode;
-    applySandboxLayoutMode();
+  document.getElementById('toggle-sandbox-chat-btn')?.addEventListener('click', () => {
+    if (state.readonly) return;
+    state.sandboxChatVisible = !state.sandboxChatVisible;
+    applySandboxChatVisibility();
+    applySandboxLayoutHeight();
   });
 
   document.getElementById('toggle-sandbox-fullscreen-btn')?.addEventListener('click', async () => {
@@ -1890,6 +2003,7 @@ function initApp() {
   });
 
   document.getElementById('toggle-node-entity-form-btn')?.addEventListener('click', () => {
+    if (state.readonly) return;
     setNodeEntityFormExpanded(!state.nodeEntityFormExpanded);
     if (state.nodeEntityFormExpanded) {
       document.getElementById('entity-title-input')?.focus();
@@ -1918,6 +2032,7 @@ function initApp() {
   });
 
   document.getElementById('create-node-entity-btn')?.addEventListener('click', async () => {
+    if (state.readonly) return;
     if (!state.currentSandbox || !state.selectedNodeId) return;
     const btn = document.getElementById('create-node-entity-btn');
     const title = document.getElementById('entity-title-input').value.trim();
@@ -2016,6 +2131,7 @@ function initApp() {
   });
   
   document.getElementById('confirm-item-btn')?.addEventListener('click', async () => {
+    if (state.readonly) return;
     const dialog = document.getElementById('item-dialog');
     const editId = dialog.dataset.editId || null;
     const isNewItem = !editId;
@@ -2062,6 +2178,7 @@ function initApp() {
   });
   
   document.getElementById('rollback-btn')?.addEventListener('click', async () => {
+    if (state.readonly) return;
     if (!state.currentSandbox?.items?.length) return;
     const lastItem = state.currentSandbox.items[state.currentSandbox.items.length - 1];
     await apiRequest(`${API_BASE}/items/${lastItem.id}/rollback`, { method: 'POST' });
@@ -2069,6 +2186,7 @@ function initApp() {
   });
   
   document.getElementById('sandbox-send-btn')?.addEventListener('click', async () => {
+    if (state.readonly) return;
     const input = document.getElementById('sandbox-chat-input');
     const content = input.value.trim();
     if (!content || !state.currentSandbox) return;
@@ -2186,12 +2304,14 @@ function initApp() {
   sandboxActionHandler = handleAIAction;
   
   document.getElementById('sandbox-chat-input')?.addEventListener('keypress', (e) => {
+    if (state.readonly) return;
     if (e.key === 'Enter') {
       document.getElementById('sandbox-send-btn').click();
     }
   });
   
   document.getElementById('save-diary-btn')?.addEventListener('click', async () => {
+    if (state.readonly) return;
     const content = document.getElementById('diary-content').value.trim();
     if (!content) return;
     await saveDiaryEntry({ content, sandboxId: null, workItemId: null });
@@ -2200,6 +2320,7 @@ function initApp() {
   });
 
   document.getElementById('drawer-diary-save-btn')?.addEventListener('click', async () => {
+    if (state.readonly) return;
     if (!state.currentSandbox || !state.selectedNodeId) return;
     const textarea = document.getElementById('drawer-diary-content');
     if (!(textarea instanceof HTMLTextAreaElement)) return;
@@ -2222,9 +2343,11 @@ function initApp() {
     closeDiaryEditDialog();
   });
   document.getElementById('confirm-edit-diary-btn')?.addEventListener('click', async () => {
+    if (state.readonly) return;
     await submitDiaryEditDialog();
   });
   document.getElementById('diary-edit-content')?.addEventListener('keydown', async (event) => {
+    if (state.readonly) return;
     const isSubmit = event.key === 'Enter' && (event.metaKey || event.ctrlKey);
     if (!isSubmit) return;
     event.preventDefault();
@@ -2241,6 +2364,7 @@ function initApp() {
   });
   
   document.getElementById('save-settings-btn')?.addEventListener('click', async () => {
+    if (state.readonly) return;
     const api_url = document.getElementById('setting-api-url').value;
     const api_key = document.getElementById('setting-api-key').value;
     const model = document.getElementById('setting-model').value;
@@ -2270,6 +2394,7 @@ function initApp() {
   });
 
   document.getElementById('add-setting-header-btn')?.addEventListener('click', () => {
+    if (state.readonly) return;
     const list = document.getElementById('setting-headers-list');
     if (!(list instanceof HTMLElement)) return;
     list.appendChild(createSettingHeaderRow('', ''));
@@ -2288,6 +2413,7 @@ function initApp() {
   document.getElementById('work-tree-view-mode')?.addEventListener('change', (e) => {
     const nextMode = e.target.value || 'full';
     applyWorkTreeViewMode(nextMode);
+    persistWorkTreeViewModePreference();
     renderWorkTree();
   });
 
@@ -2411,12 +2537,13 @@ function initApp() {
       clearTimeout(resizeRenderTimer);
     }
     resizeRenderTimer = setTimeout(() => {
+      applySandboxLayoutHeight();
       renderWorkTree();
     }, 120);
   });
   
   window.addEventListener('hashchange', handleRoute);
-  handleRoute();
+  await handleRoute();
   
   async function handleRoute() {
     const hash = window.location.hash.slice(1) || '/';
@@ -2452,6 +2579,15 @@ function initApp() {
       await loadSandboxes();
       await loadChanges();
     } else if (pathHash === '/settings') {
+      if (state.readonly) {
+        if (window.location.hash !== '#/sandboxes') {
+          window.location.hash = '/sandboxes';
+          return;
+        }
+        showPage('sandboxes');
+        await loadSandboxes();
+        return;
+      }
       showPage('settings');
       await loadSettings();
     }

package/dist/web/index.html

@@ -39,7 +39,10 @@
         <div class="action-strip">
           <button class="btn btn-secondary btn-sm" id="generate-insight-btn">智能总结</button>
           <button class="btn btn-secondary btn-sm" id="generate-report-btn">生成汇报</button>
-          <button class="btn btn-secondary btn-sm" id="toggle-sandbox-present-btn" type="button">展示态布局</button>
+          <button class="btn btn-secondary btn-sm ai-toggle-btn" id="toggle-sandbox-chat-btn" type="button">
+            <span class="icon" aria-hidden="true">🤖</span>
+            <span>显示 AI 助手</span>
+          </button>
           <button class="btn btn-secondary btn-sm" id="toggle-sandbox-fullscreen-btn" type="button">全屏</button>
         </div>
         <div class="insight-box hidden" id="sandbox-insight-output" hidden>