Fix preview and UI behavior

app.py

@@ -347,8 +347,8 @@ def _targeted_prompt(
         "If the user asks a coding question or wants reasoning that does not require running code, "
         "answer directly without a fenced block. If they ask to generate, revise, or fix runnable "
         "web code, return one ```html fenced block only. The code is rendered inside a sandboxed "
-        "iframe that spans the full width of the preview panel and is about 680px tall, so design "
-        "the page to fill that iframe responsively: html/body at margin:0 and 100% width/height, "
+        "iframe that fills the preview panel, so design the page to fill that iframe responsively: "
+        "html/body at margin:0 and 100% width/height, "
         "avoid fixed widths larger than the iframe, and resize any <canvas> to its container "
         "(including on window resize) so the whole app is visible without horizontal scrolling."
         f"{context_block}\n\n"

index.html

@@ -102,6 +102,24 @@ a:hover { text-decoration: underline; text-shadow: var(--glow-cyan); }
 }
 #config-warning.visible { display: block; }
 
+#playground-banner {
+  background: linear-gradient(90deg, rgba(0,212,255,0.08), rgba(57,255,20,0.05));
+  border-bottom: 1px solid var(--border);
+  color: var(--gray-mid);
+  font-size: 12px;
+  padding: 7px 18px;
+  text-align: center;
+  flex-shrink: 0;
+}
+#playground-banner strong {
+  color: var(--gray-light);
+  font-weight: 600;
+}
+#playground-banner a {
+  color: var(--cyan);
+  font-weight: 600;
+}
+
 /* ═══════════════════════════════════════════════════════
    HEADER
    ═══════════════════════════════════════════════════════ */
@@ -359,15 +377,21 @@ a:hover { text-decoration: underline; text-shadow: var(--glow-cyan); }
   border-radius: var(--radius);
   background: rgba(255,179,0,0.03);
 }
-.think-block summary {
+.think-summary {
+  display: block;
+  width: 100%;
+  background: transparent;
+  border: none;
   padding: 6px 10px;
   cursor: pointer;
   font-size: 12px;
+  font-family: var(--font-mono);
+  text-align: left;
   color: var(--gray-dim);
   user-select: none;
   transition: color var(--transition);
 }
-.think-block summary:hover { color: var(--amber); }
+.think-summary:hover { color: var(--amber); }
 .think-block .think-content {
   padding: 6px 12px 10px;
   font-size: 12px;
@@ -375,6 +399,9 @@ a:hover { text-decoration: underline; text-shadow: var(--glow-cyan); }
   line-height: 1.55;
   border-top: 1px solid rgba(255,179,0,0.1);
 }
+.think-block:not(.open) .think-content {
+  display: none;
+}
 
 /* Streaming cursor */
 .streaming-cursor::after {
@@ -557,6 +584,7 @@ a:hover { text-decoration: underline; text-shadow: var(--glow-cyan); }
   width: 45%;
   min-width: 340px;
   max-width: 55%;
+  min-height: 0;
   background: var(--bg-panel);
 }
 
@@ -590,22 +618,27 @@ a:hover { text-decoration: underline; text-shadow: var(--glow-cyan); }
 
 #output-content {
   flex: 1;
-  overflow: auto;
+  min-height: 0;
+  overflow: hidden;
   position: relative;
 }
 
 /* Tab panes */
-.tab-pane { display: none; height: 100%; }
+.tab-pane { display: none; height: 100%; min-height: 0; }
 .tab-pane.active { display: flex; flex-direction: column; }
 
 /* Preview tab */
 #pane-preview {
-  align-items: center;
-  justify-content: center;
+  align-items: stretch;
+  justify-content: stretch;
   position: relative;
+  min-height: 0;
+  overflow: hidden;
 }
 
 .preview-placeholder {
+  align-self: center;
+  margin: auto;
   text-align: center;
   color: var(--gray-dim);
   padding: 40px 20px;
@@ -631,9 +664,11 @@ a:hover { text-decoration: underline; text-shadow: var(--glow-cyan); }
 
 #preview-iframe {
   display: none;
+  position: absolute;
+  inset: 0;
   width: 100%;
-  flex: 1;
-  min-height: 680px;
+  height: 100%;
+  min-height: 0;
   border: none;
   background: #fff;
 }
@@ -897,6 +932,13 @@ a:hover { text-decoration: underline; text-shadow: var(--glow-cyan); }
     </div>
   </header>
 
+  <div id="playground-banner">
+    <a id="banner-model-link" href="https://huggingface.co/CohereLabs/North-Mini-Code-1.0" target="_blank" rel="noopener"><strong>North-Mini-Code-1.0</strong></a>
+    is built for agentic coding and works best in your terminal with
+    <a id="opencode-banner-link" href="#" target="_blank" rel="noopener">OpenCode ↗</a>.
+    This Space is a browser playground for trying the model.
+  </div>
+
   <!-- Main Layout -->
   <div id="main">
     <!-- Terminal Panel -->
@@ -1008,7 +1050,12 @@ const state = {
   activeTab: 'preview',
   lastExecution: null,
   lastCode: '',
-  lastCodeLang: ''
+  lastCodeLang: '',
+  pendingWebPreviewCode: '',
+  loadedWebPreviewCode: '',
+  scheduledWebPreviewCode: '',
+  reasoningExpanded: false,
+  lastReasoningPressAt: 0
 };
 
 // ═══════════════════════════════════════════════════════
@@ -1020,12 +1067,14 @@ document.addEventListener('DOMContentLoaded', () => {
 
   if (CONFIG.model_url) {
     document.getElementById('model-pill').href = CONFIG.model_url;
+    document.getElementById('banner-model-link').href = CONFIG.model_url;
   }
   if (CONFIG.model_id) {
     document.getElementById('model-pill-text').textContent = CONFIG.model_id;
   }
   if (CONFIG.opencode_url) {
     document.getElementById('opencode-pill').href = CONFIG.opencode_url;
+    document.getElementById('opencode-banner-link').href = CONFIG.opencode_url;
   }
 
   // Config warning
@@ -1048,6 +1097,12 @@ document.addEventListener('DOMContentLoaded', () => {
       handleSend();
     }
   });
+
+  document.addEventListener('pointerdown', handleReasoningPress, true);
+  document.addEventListener('mousedown', handleReasoningPress, true);
+  document.addEventListener('keydown', handleReasoningKeydown, true);
+  document.addEventListener('keydown', handleFullscreenKeydown);
+  observePreviewSize();
 });
 
 function autoResize() {
@@ -1072,6 +1127,8 @@ function renderExamples() {
     chip.textContent = ex.label;
     chip.title = ex.prompt;
     chip.addEventListener('click', () => {
+      if (state.isGenerating) return;
+      resetConversation();
       if (ex.target) setTarget(ex.target);
       sendMessage(ex.prompt);
     });
@@ -1119,6 +1176,7 @@ function addAssistantMessage() {
   div.id = 'current-assistant-msg';
   div.innerHTML = `<span class="msg-prefix">north&gt;</span><span class="msg-content streaming-cursor"></span>`;
   container.appendChild(div);
+  state.reasoningExpanded = false;
   scrollToBottom();
   return div;
 }
@@ -1127,7 +1185,12 @@ function updateAssistantMessage(content, isStreaming) {
   const div = document.getElementById('current-assistant-msg');
   if (!div) return;
   const contentEl = div.querySelector('.msg-content');
+  const keepReasoningExpanded = state.reasoningExpanded || Boolean(contentEl.querySelector('.think-block.open'));
+  state.reasoningExpanded = keepReasoningExpanded;
   contentEl.innerHTML = parseMarkdown(content);
+  contentEl.querySelectorAll('.think-block').forEach((block) => {
+    setReasoningBlockOpen(block, keepReasoningExpanded);
+  });
   if (isStreaming) {
     contentEl.classList.add('streaming-cursor');
   } else {
@@ -1158,13 +1221,18 @@ function scrollToBottom() {
 function parseMarkdown(text) {
   if (!text) return '';
 
-  // Handle think blocks
+  // Extract reasoning blocks before escaping so they render as collapsed details.
+  const thinkBlocks = [];
   text = text.replace(/<think>([\s\S]*?)<\/think>/g, (_, content) => {
-    return `<details class="think-block"><summary>💭 Reasoning (click to expand)</summary><div class="think-content">${escapeHtml(content.trim())}</div></details>`;
+    const idx = thinkBlocks.length;
+    thinkBlocks.push(renderThinkBlock(content, '💭 Reasoning (click to expand)'));
+    return `@@THINKBLOCK_${idx}@@`;
   });
   // Handle unclosed think blocks (during streaming)
   text = text.replace(/<think>([\s\S]*)$/g, (_, content) => {
-    return `<details class="think-block"><summary>💭 Reasoning (thinking…)</summary><div class="think-content">${escapeHtml(content.trim())}</div></details>`;
+    const idx = thinkBlocks.length;
+    thinkBlocks.push(renderThinkBlock(content, '💭 Reasoning (thinking…)'));
+    return `@@THINKBLOCK_${idx}@@`;
   });
 
   // Extract code blocks first to prevent inner processing
@@ -1172,20 +1240,12 @@ function parseMarkdown(text) {
   text = text.replace(/```(\w*)\n([\s\S]*?)```/g, (_, lang, code) => {
     const idx = codeBlocks.length;
     codeBlocks.push({ lang: lang || 'text', code: code.trimEnd() });
-    return `\x00CODEBLOCK_${idx}\x00`;
+    return `@@CODEBLOCK_${idx}@@`;
   });
 
   // Escape HTML in remaining text
   text = escapeHtml(text);
 
-  // Restore code blocks with formatting
-  text = text.replace(/\x00CODEBLOCK_(\d+)\x00/g, (_, idx) => {
-    const block = codeBlocks[parseInt(idx)];
-    const escapedCode = escapeHtml(block.code);
-    const id = `code-${Date.now()}-${idx}`;
-    return `<div class="code-block-wrap"><div class="code-block-header"><span class="code-lang">${escapeHtml(block.lang)}</span><button class="btn-copy" onclick="copyBlock(this, '${id}')">📋 Copy</button></div><pre><code id="${id}">${escapedCode}</code></pre></div>`;
-  });
-
   // Inline formatting
   text = text.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
   text = text.replace(/(?<!\*)\*([^*]+?)\*(?!\*)/g, '<em>$1</em>');
@@ -1211,6 +1271,15 @@ function parseMarkdown(text) {
     return match;
   });
 
+  // Restore block-level placeholders after inline parsing so their contents remain literal.
+  text = text.replace(/@@CODEBLOCK_(\d+)@@/g, (_, idx) => {
+    const block = codeBlocks[parseInt(idx)];
+    const escapedCode = escapeHtml(block.code);
+    const id = `code-${Date.now()}-${idx}`;
+    return `<div class="code-block-wrap"><div class="code-block-header"><span class="code-lang">${escapeHtml(block.lang)}</span><button class="btn-copy" onclick="copyBlock(this, '${id}')">📋 Copy</button></div><pre><code id="${id}">${escapedCode}</code></pre></div>`;
+  });
+  text = text.replace(/@@THINKBLOCK_(\d+)@@/g, (_, idx) => thinkBlocks[parseInt(idx)]);
+
   // Line breaks (preserve paragraph structure)
   text = text.replace(/\n\n/g, '</p><p>');
   text = text.replace(/\n/g, '<br>');
@@ -1218,12 +1287,60 @@ function parseMarkdown(text) {
 
   // Clean up empty paragraphs
   text = text.replace(/<p>\s*<\/p>/g, '');
-  text = text.replace(/<p>(<(?:div|ul|ol|h[1-3]|details))/g, '$1');
-  text = text.replace(/(<\/(?:div|ul|ol|h[1-3]|details)>)<\/p>/g, '$1');
+  text = text.replace(/<p>(<(?:div|ul|ol|h[1-3]))/g, '$1');
+  text = text.replace(/(<\/(?:div|ul|ol|h[1-3])>)<\/p>/g, '$1');
 
   return text;
 }
 
+function renderThinkBlock(content, summary) {
+  const escapedContent = escapeHtml(content.trim()).replace(/\n/g, '<br>');
+  const openClass = state.reasoningExpanded ? ' open' : '';
+  const expanded = state.reasoningExpanded ? 'true' : 'false';
+  return `<div class="think-block${openClass}"><button type="button" class="think-summary" aria-expanded="${expanded}">${summary}</button><div class="think-content">${escapedContent}</div></div>`;
+}
+
+function handleReasoningPress(event) {
+  updateReasoningFromEvent(event);
+}
+
+function handleReasoningKeydown(event) {
+  if (event.key !== 'Enter' && event.key !== ' ') return;
+  updateReasoningFromEvent(event);
+}
+
+function updateReasoningFromEvent(event) {
+  if (event.type === 'mousedown' && Date.now() - state.lastReasoningPressAt < 500) {
+    return;
+  }
+  const target = event.target;
+  if (!target || !target.closest) return;
+  const button = target.closest('.think-summary');
+  if (!button) return;
+  const block = button.closest('.think-block');
+  if (!block) return;
+  event.preventDefault();
+  event.stopPropagation();
+  if (event.stopImmediatePropagation) {
+    event.stopImmediatePropagation();
+  }
+  state.lastReasoningPressAt = Date.now();
+  const nextOpen = !block.classList.contains('open');
+  state.reasoningExpanded = nextOpen;
+  const scope = block.closest('.msg-content') || document;
+  scope.querySelectorAll('.think-block').forEach((trace) => {
+    setReasoningBlockOpen(trace, nextOpen);
+  });
+}
+
+function setReasoningBlockOpen(block, open) {
+  block.classList.toggle('open', open);
+  const button = block.querySelector('.think-summary');
+  if (button) {
+    button.setAttribute('aria-expanded', open ? 'true' : 'false');
+  }
+}
+
 function escapeHtml(text) {
   const div = document.createElement('div');
   div.textContent = text;
@@ -1291,7 +1408,8 @@ function renderStatus(text, statusState) {
 // ═══════════════════════════════════════════════════════
 // OUTPUT PANEL
 // ═══════════════════════════════════════════════════════
-function switchTab(tab) {
+function switchTab(tab, { forcePreviewReload = false } = {}) {
+  const wasPreview = state.activeTab === 'preview';
   state.activeTab = tab;
   document.querySelectorAll('.output-tab').forEach((btn) => {
     btn.classList.toggle('active', btn.dataset.tab === tab);
@@ -1299,6 +1417,9 @@ function switchTab(tab) {
   document.querySelectorAll('.tab-pane').forEach((pane) => {
     pane.classList.toggle('active', pane.id === `pane-${tab}`);
   });
+  if (tab === 'preview') {
+    ensureWebPreviewLoaded({ forceReload: forcePreviewReload || !wasPreview });
+  }
 }
 
 function renderExecution(execution) {
@@ -1332,7 +1453,7 @@ function renderExecution(execution) {
   // Preview
   const placeholder = document.getElementById('preview-placeholder');
   const img = document.getElementById('preview-image');
-  const iframe = document.getElementById('preview-iframe');
+  const iframe = getPreviewIframe();
   const fsBtn = document.getElementById('btn-fullscreen');
 
   if (execution.image_url) {
@@ -1347,11 +1468,15 @@ function renderExecution(execution) {
   } else if (execution.target === 'web' && execution.code) {
     placeholder.style.display = 'none';
     img.style.display = 'none';
-    iframe.srcdoc = execution.code;
     iframe.style.display = 'block';
     fsBtn.style.display = 'block';
+    state.pendingWebPreviewCode = execution.code;
+    state.loadedWebPreviewCode = '';
+    state.scheduledWebPreviewCode = '';
     if (state.activeTab !== 'console' && state.activeTab !== 'code') {
-      switchTab('preview');
+      switchTab('preview', { forcePreviewReload: true });
+    } else {
+      iframe.srcdoc = '';
     }
   } else {
     // No visual preview, but maybe there's stdout
@@ -1364,10 +1489,11 @@ function renderExecution(execution) {
 }
 
 function resetOutput() {
+  const iframe = getPreviewIframe();
   document.getElementById('preview-placeholder').style.display = '';
   document.getElementById('preview-image').style.display = 'none';
-  document.getElementById('preview-iframe').style.display = 'none';
-  document.getElementById('preview-iframe').srcdoc = '';
+  iframe.style.display = 'none';
+  iframe.srcdoc = '';
   document.getElementById('btn-fullscreen').style.display = 'none';
   document.getElementById('console-stdout').textContent = 'No output.';
   document.getElementById('console-stderr').textContent = 'No errors.';
@@ -1377,11 +1503,100 @@ function resetOutput() {
   state.lastExecution = null;
   state.lastCode = '';
   state.lastCodeLang = '';
+  state.pendingWebPreviewCode = '';
+  state.loadedWebPreviewCode = '';
+  state.scheduledWebPreviewCode = '';
 }
 
 // ═══════════════════════════════════════════════════════
 // FULLSCREEN
 // ═══════════════════════════════════════════════════════
+function getPreviewIframe() {
+  return document.getElementById('preview-iframe');
+}
+
+function recreatePreviewIframe() {
+  const oldFrame = getPreviewIframe();
+  const freshFrame = document.createElement('iframe');
+  freshFrame.id = 'preview-iframe';
+  freshFrame.setAttribute('sandbox', 'allow-scripts');
+  freshFrame.style.display = oldFrame.style.display || 'block';
+  oldFrame.replaceWith(freshFrame);
+  return freshFrame;
+}
+
+function ensureWebPreviewLoaded({ forceReload = false } = {}) {
+  const iframe = getPreviewIframe();
+  if (!state.pendingWebPreviewCode || state.activeTab !== 'preview' || iframe.style.display === 'none') {
+    return;
+  }
+  if (!forceReload && state.loadedWebPreviewCode === state.pendingWebPreviewCode) {
+    schedulePreviewResize(iframe);
+    return;
+  }
+  if (!forceReload && state.scheduledWebPreviewCode === state.pendingWebPreviewCode) {
+    return;
+  }
+
+  state.scheduledWebPreviewCode = state.pendingWebPreviewCode;
+  iframe.srcdoc = '';
+  const loadWhenLaidOut = () => {
+    if (state.activeTab !== 'preview' || !state.pendingWebPreviewCode) {
+      state.scheduledWebPreviewCode = '';
+      return;
+    }
+    if (!forceReload && state.loadedWebPreviewCode === state.pendingWebPreviewCode) return;
+    const visibleFrame = getPreviewIframe();
+    const rect = visibleFrame.getBoundingClientRect();
+    if (rect.width < 10 || rect.height < 10) {
+      state.scheduledWebPreviewCode = '';
+      setTimeout(() => ensureWebPreviewLoaded({ forceReload }), 50);
+      return;
+    }
+    const freshFrame = recreatePreviewIframe();
+    freshFrame.srcdoc = state.pendingWebPreviewCode;
+    state.loadedWebPreviewCode = state.pendingWebPreviewCode;
+    state.scheduledWebPreviewCode = '';
+    schedulePreviewResize(freshFrame);
+  };
+  requestAnimationFrame(() => requestAnimationFrame(loadWhenLaidOut));
+  setTimeout(loadWhenLaidOut, 75);
+}
+
+function schedulePreviewResize(iframe) {
+  const dispatchResize = () => {
+    try {
+      iframe.contentWindow?.dispatchEvent(new Event('resize'));
+    } catch (_err) {
+      // Sandboxed srcdoc frames may reject parent-origin access; visible-load timing is the main fix.
+    }
+  };
+  requestAnimationFrame(() => {
+    requestAnimationFrame(dispatchResize);
+  });
+  setTimeout(dispatchResize, 100);
+  setTimeout(dispatchResize, 350);
+}
+
+function observePreviewSize() {
+  const previewPane = document.getElementById('pane-preview');
+  if (!previewPane) return;
+
+  window.addEventListener('resize', () => {
+    if (state.activeTab === 'preview' && state.loadedWebPreviewCode) {
+      schedulePreviewResize(getPreviewIframe());
+    }
+  });
+
+  if (typeof ResizeObserver === 'undefined') return;
+  const observer = new ResizeObserver(() => {
+    if (state.activeTab === 'preview' && state.loadedWebPreviewCode) {
+      schedulePreviewResize(getPreviewIframe());
+    }
+  });
+  observer.observe(previewPane);
+}
+
 function openFullscreen() {
   const overlay = document.getElementById('fullscreen-overlay');
   const iframe = document.getElementById('fullscreen-iframe');
@@ -1396,6 +1611,14 @@ function closeFullscreen() {
   document.getElementById('fullscreen-iframe').srcdoc = '';
 }
 
+function handleFullscreenKeydown(event) {
+  if (event.key !== 'Escape') return;
+  const overlay = document.getElementById('fullscreen-overlay');
+  if (!overlay.classList.contains('active')) return;
+  event.preventDefault();
+  closeFullscreen();
+}
+
 // ═══════════════════════════════════════════════════════
 // SEND / RECEIVE
 // ═══════════════════════════════════════════════════════
@@ -1575,12 +1798,13 @@ function stopGeneration() {
   onGenerationEnd();
 }
 
-function newChat() {
+function resetConversation(announcement) {
   state.history = [];
   state.executionContext = {};
   state.lastExecution = null;
   state.lastCode = '';
   state.lastCodeLang = '';
+  state.reasoningExpanded = false;
 
   if (state.currentEventSource) {
     state.currentEventSource.close();
@@ -1593,7 +1817,13 @@ function newChat() {
   resetOutput();
   switchTab('preview');
   renderStatus('Idle', 'idle');
-  addSystemMessage(`Session reset. Welcome back to ${CONFIG.app_title || 'North Mini Code 1.0'}.`);
+  if (announcement) {
+    addSystemMessage(announcement);
+  }
+}
+
+function newChat() {
+  resetConversation(`Session reset. Welcome back to ${CONFIG.app_title || 'North Mini Code 1.0'}.`);
 }
 </script>
 </body>