fix(share): make tool calls and results toggle-able

Author: Kuberwastaken

src-rust/crates/core/src/share_export/template.css

@@ -124,6 +124,66 @@ nav {
   width: 4px; height: 4px; background: var(--accent); border-radius: 50%; display: inline-block;
 }
 
+/* Header-level toggles (e.g. show/hide tool calls) */
+.hero-controls {
+  margin-top: 1rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem 1rem;
+}
+.toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.55rem;
+  font-size: 0.78rem;
+  color: var(--text-secondary);
+  cursor: pointer;
+  user-select: none;
+  padding: 0.3rem 0.6rem;
+  border: 1px solid var(--surface-border);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.02);
+  transition: border-color 0.15s, color 0.15s, background 0.15s;
+}
+.toggle:hover { border-color: rgba(233, 30, 99, 0.4); color: var(--text-primary); }
+.toggle input { position: absolute; opacity: 0; pointer-events: none; }
+.toggle-swatch {
+  width: 26px;
+  height: 14px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.08);
+  position: relative;
+  transition: background 0.15s;
+  flex-shrink: 0;
+}
+.toggle-swatch::after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--text-secondary);
+  transition: left 0.15s, background 0.15s;
+}
+.toggle input:checked + .toggle-swatch { background: var(--accent-shy); }
+.toggle input:checked + .toggle-swatch::after {
+  left: 14px;
+  background: var(--accent);
+}
+.toggle input:focus-visible + .toggle-swatch {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+/* Hide tool calls/results/thinking entirely when the user toggles them off. */
+#messages.hide-tools details.tool-call,
+#messages.hide-tools details.tool-result,
+#messages.hide-tools details.thinking {
+  display: none;
+}
+
 /* Messages container */
 #messages { padding: 0; }
 

src-rust/crates/core/src/share_export/template.js

@@ -38,6 +38,17 @@
   var title = meta.title || ('Session ' + (meta.session_id || ''));
   document.title = title + ' — Claurst Session';
 
+  var msgsEl = document.getElementById('messages');
+
+  // Tool-call visibility preference, persisted across reloads. Default: shown.
+  var TOOLS_PREF_KEY = 'claurst.share.showTools';
+  var showTools = true;
+  try {
+    var stored = localStorage.getItem(TOOLS_PREF_KEY);
+    if (stored === '0') showTools = false;
+  } catch (_) { /* localStorage may be unavailable in sandboxed contexts */ }
+  applyShowTools(showTools);
+
   var hero = document.getElementById('hero');
   if (hero) {
     var heroBody = document.createElement('div');
@@ -67,12 +78,46 @@
       metaDiv.appendChild(s);
     });
     heroBody.appendChild(metaDiv);
+
+    // Tool-call visibility toggle. Tool calls, tool results and thinking
+    // blocks are shown by default; this lets the reader hide them for a
+    // cleaner prompts/responses-only view.
+    var controls = document.createElement('div');
+    controls.className = 'hero-controls';
+    var toolToggle = document.createElement('label');
+    toolToggle.className = 'toggle';
+    var cb = document.createElement('input');
+    cb.type = 'checkbox';
+    cb.checked = showTools;
+    cb.addEventListener('change', function () {
+      showTools = cb.checked;
+      applyShowTools(showTools);
+      try { localStorage.setItem(TOOLS_PREF_KEY, showTools ? '1' : '0'); } catch (_) {}
+    });
+    toolToggle.appendChild(cb);
+    var swatch = document.createElement('span');
+    swatch.className = 'toggle-swatch';
+    toolToggle.appendChild(swatch);
+    var lbl = document.createElement('span');
+    lbl.className = 'toggle-label';
+    lbl.textContent = 'Show tool calls & thinking';
+    toolToggle.appendChild(lbl);
+    controls.appendChild(toolToggle);
+    heroBody.appendChild(controls);
+
     hero.appendChild(heroBody);
   }
 
-  var msgsEl = document.getElementById('messages');
   messages.forEach(function (m) { msgsEl.appendChild(renderMessage(m)); });
 
+  function applyShowTools(on) {
+    if (on) {
+      msgsEl.classList.remove('hide-tools');
+    } else {
+      msgsEl.classList.add('hide-tools');
+    }
+  }
+
   function renderMessage(m) {
     var div = document.createElement('div');
     div.className = 'msg ' + (m.role || '');
@@ -193,6 +238,7 @@
   function renderToolCall(block) {
     var d = document.createElement('details');
     d.className = 'tool-call';
+    d.open = true;
     var s = document.createElement('summary');
 
     var badge = document.createElement('span');
@@ -219,7 +265,7 @@
     var isError = !!block.is_error;
     var d = document.createElement('details');
     d.className = 'tool-result' + (isError ? ' error' : '');
-    d.open = isError;
+    d.open = true;
     var s = document.createElement('summary');
 
     var badge = document.createElement('span');