@raquezha/notrace 0.0.6 → 0.1.0

package/templates/session.sample.html

@@ -68,6 +68,44 @@
       overflow: visible;
     }
     .subtitle { margin: 10px 0 0; color: var(--muted); }
+    .session-subtitle {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      flex-wrap: wrap;
+    }
+    .session-id-chip {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      max-width: 100%;
+      padding: 6px 8px 6px 10px;
+      border: 1px solid var(--border);
+      border-radius: 999px;
+      background: rgba(0,0,0,0.18);
+      color: var(--text);
+      font-family: "SFMono-Regular", ui-monospace, Menlo, Monaco, Consolas, monospace;
+      font-size: 0.78rem;
+      word-break: break-all;
+    }
+    .copy-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 26px;
+      height: 26px;
+      border: 1px solid rgba(255,255,255,0.12);
+      border-radius: 999px;
+      background: rgba(255,255,255,0.04);
+      color: var(--muted);
+      cursor: pointer;
+      transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
+    }
+    .copy-btn:hover, .copy-btn.copied {
+      color: var(--text);
+      border-color: rgba(216,132,98,0.45);
+      background: var(--accent-soft);
+    }
     .meta {
       display: flex;
       gap: 8px;
@@ -76,7 +114,7 @@
       align-items: center;
       margin-top: 16px;
     }
-    .pill, .workflow-pill, .sort-btn {
+    .pill, .workflow-pill, .sort-btn, .export-btn {
       display: inline-flex;
       align-items: center;
       gap: 6px;
@@ -89,7 +127,7 @@
       font-size: 0.86rem;
       font-weight: 600;
     }
-    .metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; margin: 24px 0; }
+    .metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 16px; margin: 24px 0; }
     .metric-card {
       background: var(--panel-strong);
       border: 1px solid var(--border);
@@ -208,7 +246,40 @@
     .msg-role { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
     .msg.user .msg-role { color: #8ec5ff; }
     .msg.assistant .msg-role { color: var(--accent); }
-    .msg-content { padding: 14px; white-space: pre-wrap; word-break: break-word; }
+    .msg-content { padding: 14px; }
+    .chat-text {
+      white-space: pre-wrap;
+      word-break: break-word;
+      font-size: 0.95rem;
+      line-height: 1.6;
+      margin-bottom: 12px;
+    }
+    .chat-text:last-child { margin-bottom: 0; }
+    .chat-tool-use {
+      background: rgba(0,0,0,0.3);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      overflow: hidden;
+      margin-bottom: 12px;
+    }
+    .chat-tool-use:last-child { margin-bottom: 0; }
+    .chat-tool-header {
+      background: rgba(255,255,255,0.04);
+      padding: 8px 12px;
+      font-size: 0.8rem;
+      font-family: "SFMono-Regular", ui-monospace, Menlo, Monaco, Consolas, monospace;
+      color: #8ec5ff;
+      border-bottom: 1px solid var(--border);
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .chat-tool-body {
+      padding: 12px;
+      margin: 0;
+      background: transparent;
+      border: none;
+    }
     .footer-note {
       margin-top: 22px;
       color: var(--muted);
@@ -253,7 +324,15 @@
       color: var(--text);
       border-bottom-color: rgba(236,227,218,0.45);
     }
-    @media (max-width: 760px) {
+    .export-btn {
+      cursor: pointer;
+      transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
+    }
+    .export-btn:hover, .export-btn.copied {
+      color: var(--text);
+      border-color: rgba(216,132,98,0.45);
+      background: var(--accent-soft);
+    }
       .container { padding: 20px 14px 48px; }
       .hero { padding: 20px; }
       .hero-top { grid-template-columns: 1fr; }
@@ -285,12 +364,13 @@
     </g>
     <text x="0" y="114" fill="#ECE3DA" style="fill:#ECE3DA" font-family="Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif" font-size="96" font-weight="900" letter-spacing="-7">no</text>
     <text x="82" y="114" fill="#d88462" font-family="Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif" font-size="96" font-weight="900" letter-spacing="-7">trace</text>
-  </svg></a><p class="subtitle">Session retrospective for 019ed2ee-5252-76ee-b353-ad925a6bad31</p></div>
+  </svg></a><p class="subtitle session-subtitle"><span>Session retrospective</span><span class="session-id-chip"><span>019ed2ee-5252-76ee-b353-ad925a6bad31</span><button class="copy-btn" type="button" data-copy-value="019ed2ee-5252-76ee-b353-ad925a6bad31" aria-label="Copy session ID" title="Copy session ID"><svg width="14" height="14" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></button></span></p></div>
         </div>
         <div class="meta">
           <span class="pill">nothing</span>
           <span class="pill">Started 2026-06-17 22:05</span>
-          <span class="pill">Capture full</span>
+          <span class="pill">Mode: full</span>
+          <button class="export-btn" type="button" data-copy-value="{&quot;kind&quot;:&quot;notrace-export&quot;,&quot;traceId&quot;:&quot;019ed2ee-5252-76ee-b353-ad925a6bad31&quot;,&quot;repository&quot;:&quot;nothing&quot;,&quot;task&quot;:{&quot;workflow&quot;:&quot;research&quot;,&quot;id&quot;:&quot;branch:main&quot;,&quot;path&quot;:null,&quot;dir&quot;:null},&quot;metrics&quot;:{&quot;inputTokens&quot;:3120,&quot;outputTokens&quot;:179,&quot;cacheReadTokens&quot;:0,&quot;cacheWriteTokens&quot;:0,&quot;totalTokens&quot;:3299,&quot;totalCostUsd&quot;:0.02064},&quot;summary&quot;:&quot;compressed 24,110 to 18,332 tokens; saved 5,778 tokens across 3 tool results&quot;,&quot;events&quot;:[{&quot;model&quot;:&quot;claude-sonnet-4&quot;,&quot;input&quot;:[{&quot;role&quot;:&quot;user&quot;,&quot;content&quot;:&quot;Polish notrace HTML output and unify dashboard/session design.&quot;}],&quot;output&quot;:&quot;Found renderer split. Will move both pages to one shared shell and standardize styles.&quot;}]}" title="Copy session data for LLM/Agent context"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg><span>Export</span></button>
         </div>
       </div>
       <div class="metrics">
@@ -385,9 +465,9 @@
       </div>
       <span class="event-time">22:05:04</span>
     </summary>
-    <div class="event-body"><div class="stack"><section class="block"><h4>Arguments</h4><pre>{
+    <div class="event-body"><div class="stack"><section class="block"><h4>Arguments</h4><div class="msg-content"><div class="chat-tool-use"><div class="chat-tool-header"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path></svg> Execution Input</div><pre class="chat-tool-body">{
   &quot;command&quot;: &quot;find packages/notrace -maxdepth 3 -type f&quot;
-}</pre></section></div></div>
+}</pre></div></div></section></div></div>
   </details><details class="event">
     <summary>
       <div class="event-main">
@@ -396,11 +476,11 @@
       </div>
       <span class="event-time">22:05:05</span>
     </summary>
-    <div class="event-body"><div class="stack"><section class="block"><h4>Result</h4><pre>{
+    <div class="event-body"><div class="stack"><section class="block"><h4>Result</h4><div class="msg-content"><div class="chat-tool-use" style=""><div class="chat-tool-header" style="color: var(--muted);"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 10 4 15 9 20"></polyline><path d="M20 4v7a4 4 0 0 1-4 4H4"></path></svg> Execution Output</div><pre class="chat-tool-body">{
   &quot;stdout&quot;: &quot;packages/notrace/extensions/notrace/index.ts\npackages/notrace/extensions/notrace/renderer.ts\npackages/notrace/package.json&quot;,
   &quot;stderr&quot;: &quot;&quot;,
   &quot;exitCode&quot;: 0
-}</pre></section></div></div>
+}</pre></div></div></section></div></div>
   </details><details class="event">
     <summary>
       <div class="event-main">
@@ -409,7 +489,7 @@
       </div>
       <span class="event-time">22:05:11</span>
     </summary>
-    <div class="event-body"><div class="stack"><section class="block"><h4>Input Messages</h4><div class="msg user"><div class="msg-head"><span class="msg-role">user</span></div><div class="msg-content">Polish notrace HTML output and unify dashboard/session design.</div></div></section><section class="block"><h4>Output</h4><pre>Found renderer split. Will move both pages to one shared shell and standardize styles.</pre></section><section class="block"><h4>Usage</h4><pre>{
+    <div class="event-body"><div class="stack"><section class="block"><h4>Input Messages</h4><div class="msg user"><div class="msg-head"><span class="msg-role">user</span></div><div class="msg-content"><div class="chat-text">Polish notrace HTML output and unify dashboard/session design.</div></div></div></section><section class="block"><h4>Output</h4><div class="msg-content"><div class="chat-text">Found renderer split. Will move both pages to one shared shell and standardize styles.</div></div></section><section class="block"><h4>Usage</h4><pre>{
   &quot;input&quot;: 2140,
   &quot;output&quot;: 116,
   &quot;cacheRead&quot;: 0,
@@ -427,5 +507,35 @@
       <div class="footer-tagline">Local-first retrospective engine</div>
       <div class="footer-meta"><a href="https://opensource.org/licenses/MIT">MIT</a></div>
     </footer>
-  </div></body>
+  </div><script>(() => {
+    document.querySelectorAll('[data-copy-value]').forEach((button) => {
+      button.addEventListener('click', async () => {
+        const value = button.getAttribute('data-copy-value') || '';
+        try {
+          if (navigator.clipboard?.writeText) {
+            await navigator.clipboard.writeText(value);
+          } else {
+            const textarea = document.createElement('textarea');
+            textarea.value = value;
+            textarea.style.position = 'fixed';
+            textarea.style.opacity = '0';
+            document.body.appendChild(textarea);
+            textarea.focus();
+            textarea.select();
+            document.execCommand('copy');
+            textarea.remove();
+          }
+          const previous = button.innerHTML;
+          button.classList.add('copied');
+          button.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"></path></svg>';
+          setTimeout(() => {
+            button.classList.remove('copied');
+            button.innerHTML = previous;
+          }, 1400);
+        } catch {
+          button.textContent = 'ERR';
+        }
+      });
+    });
+  })();</script></body>
 </html>

package/templates/sessions/019ed2ee-1000-76ee-b353-000000000001/notrace.html

@@ -68,6 +68,44 @@
       overflow: visible;
     }
     .subtitle { margin: 10px 0 0; color: var(--muted); }
+    .session-subtitle {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      flex-wrap: wrap;
+    }
+    .session-id-chip {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      max-width: 100%;
+      padding: 6px 8px 6px 10px;
+      border: 1px solid var(--border);
+      border-radius: 999px;
+      background: rgba(0,0,0,0.18);
+      color: var(--text);
+      font-family: "SFMono-Regular", ui-monospace, Menlo, Monaco, Consolas, monospace;
+      font-size: 0.78rem;
+      word-break: break-all;
+    }
+    .copy-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 26px;
+      height: 26px;
+      border: 1px solid rgba(255,255,255,0.12);
+      border-radius: 999px;
+      background: rgba(255,255,255,0.04);
+      color: var(--muted);
+      cursor: pointer;
+      transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
+    }
+    .copy-btn:hover, .copy-btn.copied {
+      color: var(--text);
+      border-color: rgba(216,132,98,0.45);
+      background: var(--accent-soft);
+    }
     .meta {
       display: flex;
       gap: 8px;
@@ -76,7 +114,7 @@
       align-items: center;
       margin-top: 16px;
     }
-    .pill, .workflow-pill, .sort-btn {
+    .pill, .workflow-pill, .sort-btn, .export-btn {
       display: inline-flex;
       align-items: center;
       gap: 6px;
@@ -89,7 +127,7 @@
       font-size: 0.86rem;
       font-weight: 600;
     }
-    .metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; margin: 24px 0; }
+    .metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 16px; margin: 24px 0; }
     .metric-card {
       background: var(--panel-strong);
       border: 1px solid var(--border);
@@ -208,7 +246,40 @@
     .msg-role { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
     .msg.user .msg-role { color: #8ec5ff; }
     .msg.assistant .msg-role { color: var(--accent); }
-    .msg-content { padding: 14px; white-space: pre-wrap; word-break: break-word; }
+    .msg-content { padding: 14px; }
+    .chat-text {
+      white-space: pre-wrap;
+      word-break: break-word;
+      font-size: 0.95rem;
+      line-height: 1.6;
+      margin-bottom: 12px;
+    }
+    .chat-text:last-child { margin-bottom: 0; }
+    .chat-tool-use {
+      background: rgba(0,0,0,0.3);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      overflow: hidden;
+      margin-bottom: 12px;
+    }
+    .chat-tool-use:last-child { margin-bottom: 0; }
+    .chat-tool-header {
+      background: rgba(255,255,255,0.04);
+      padding: 8px 12px;
+      font-size: 0.8rem;
+      font-family: "SFMono-Regular", ui-monospace, Menlo, Monaco, Consolas, monospace;
+      color: #8ec5ff;
+      border-bottom: 1px solid var(--border);
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .chat-tool-body {
+      padding: 12px;
+      margin: 0;
+      background: transparent;
+      border: none;
+    }
     .footer-note {
       margin-top: 22px;
       color: var(--muted);
@@ -253,7 +324,15 @@
       color: var(--text);
       border-bottom-color: rgba(236,227,218,0.45);
     }
-    @media (max-width: 760px) {
+    .export-btn {
+      cursor: pointer;
+      transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
+    }
+    .export-btn:hover, .export-btn.copied {
+      color: var(--text);
+      border-color: rgba(216,132,98,0.45);
+      background: var(--accent-soft);
+    }
       .container { padding: 20px 14px 48px; }
       .hero { padding: 20px; }
       .hero-top { grid-template-columns: 1fr; }
@@ -285,12 +364,13 @@
     </g>
     <text x="0" y="114" fill="#ECE3DA" style="fill:#ECE3DA" font-family="Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif" font-size="96" font-weight="900" letter-spacing="-7">no</text>
     <text x="82" y="114" fill="#d88462" font-family="Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif" font-size="96" font-weight="900" letter-spacing="-7">trace</text>
-  </svg></a><p class="subtitle">Session retrospective for 019ed2ee-1000-76ee-b353-000000000001</p></div>
+  </svg></a><p class="subtitle session-subtitle"><span>Session retrospective</span><span class="session-id-chip"><span>019ed2ee-1000-76ee-b353-000000000001</span><button class="copy-btn" type="button" data-copy-value="019ed2ee-1000-76ee-b353-000000000001" aria-label="Copy session ID" title="Copy session ID"><svg width="14" height="14" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></button></span></p></div>
         </div>
         <div class="meta">
           <span class="pill">nothing</span>
           <span class="pill">Started 2026-06-17 17:00</span>
-          <span class="pill">Capture full</span>
+          <span class="pill">Mode: full</span>
+          <button class="export-btn" type="button" data-copy-value="{&quot;kind&quot;:&quot;notrace-export&quot;,&quot;traceId&quot;:&quot;019ed2ee-1000-76ee-b353-000000000001&quot;,&quot;repository&quot;:&quot;nothing&quot;,&quot;task&quot;:{&quot;workflow&quot;:&quot;norpiv&quot;,&quot;id&quot;:&quot;NR-101&quot;,&quot;path&quot;:&quot;.workflow/tasks/NR-101&quot;,&quot;dir&quot;:&quot;/repo/.workflow/tasks/NR-101&quot;},&quot;metrics&quot;:{&quot;inputTokens&quot;:3100,&quot;outputTokens&quot;:410,&quot;cacheReadTokens&quot;:0,&quot;cacheWriteTokens&quot;:0,&quot;totalTokens&quot;:3510,&quot;totalCostUsd&quot;:0.0204},&quot;summary&quot;:&quot;compressed 24,110 to 18,332 tokens; saved 5,778 tokens across 3 tool results&quot;,&quot;events&quot;:[{&quot;model&quot;:&quot;claude-sonnet-4&quot;,&quot;input&quot;:[{&quot;role&quot;:&quot;user&quot;,&quot;content&quot;:&quot;Polish notrace HTML output and unify dashboard/session design.&quot;}],&quot;output&quot;:&quot;Found renderer split. Will move both pages to one shared shell and standardize styles.&quot;}]}" title="Copy session data for LLM/Agent context"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg><span>Export</span></button>
         </div>
       </div>
       <div class="metrics">
@@ -380,9 +460,9 @@
       </div>
       <span class="event-time">22:05:04</span>
     </summary>
-    <div class="event-body"><div class="stack"><section class="block"><h4>Arguments</h4><pre>{
+    <div class="event-body"><div class="stack"><section class="block"><h4>Arguments</h4><div class="msg-content"><div class="chat-tool-use"><div class="chat-tool-header"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path></svg> Execution Input</div><pre class="chat-tool-body">{
   &quot;command&quot;: &quot;find packages/notrace -maxdepth 3 -type f&quot;
-}</pre></section></div></div>
+}</pre></div></div></section></div></div>
   </details><details class="event">
     <summary>
       <div class="event-main">
@@ -391,11 +471,11 @@
       </div>
       <span class="event-time">22:05:05</span>
     </summary>
-    <div class="event-body"><div class="stack"><section class="block"><h4>Result</h4><pre>{
+    <div class="event-body"><div class="stack"><section class="block"><h4>Result</h4><div class="msg-content"><div class="chat-tool-use" style=""><div class="chat-tool-header" style="color: var(--muted);"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 10 4 15 9 20"></polyline><path d="M20 4v7a4 4 0 0 1-4 4H4"></path></svg> Execution Output</div><pre class="chat-tool-body">{
   &quot;stdout&quot;: &quot;packages/notrace/extensions/notrace/index.ts\npackages/notrace/extensions/notrace/renderer.ts\npackages/notrace/package.json&quot;,
   &quot;stderr&quot;: &quot;&quot;,
   &quot;exitCode&quot;: 0
-}</pre></section></div></div>
+}</pre></div></div></section></div></div>
   </details><details class="event">
     <summary>
       <div class="event-main">
@@ -404,7 +484,7 @@
       </div>
       <span class="event-time">22:05:11</span>
     </summary>
-    <div class="event-body"><div class="stack"><section class="block"><h4>Input Messages</h4><div class="msg user"><div class="msg-head"><span class="msg-role">user</span></div><div class="msg-content">Polish notrace HTML output and unify dashboard/session design.</div></div></section><section class="block"><h4>Output</h4><pre>Found renderer split. Will move both pages to one shared shell and standardize styles.</pre></section><section class="block"><h4>Usage</h4><pre>{
+    <div class="event-body"><div class="stack"><section class="block"><h4>Input Messages</h4><div class="msg user"><div class="msg-head"><span class="msg-role">user</span></div><div class="msg-content"><div class="chat-text">Polish notrace HTML output and unify dashboard/session design.</div></div></div></section><section class="block"><h4>Output</h4><div class="msg-content"><div class="chat-text">Found renderer split. Will move both pages to one shared shell and standardize styles.</div></div></section><section class="block"><h4>Usage</h4><pre>{
   &quot;input&quot;: 2140,
   &quot;output&quot;: 116,
   &quot;cacheRead&quot;: 0,
@@ -422,5 +502,35 @@
       <div class="footer-tagline">Local-first retrospective engine</div>
       <div class="footer-meta"><a href="https://opensource.org/licenses/MIT">MIT</a></div>
     </footer>
-  </div></body>
+  </div><script>(() => {
+    document.querySelectorAll('[data-copy-value]').forEach((button) => {
+      button.addEventListener('click', async () => {
+        const value = button.getAttribute('data-copy-value') || '';
+        try {
+          if (navigator.clipboard?.writeText) {
+            await navigator.clipboard.writeText(value);
+          } else {
+            const textarea = document.createElement('textarea');
+            textarea.value = value;
+            textarea.style.position = 'fixed';
+            textarea.style.opacity = '0';
+            document.body.appendChild(textarea);
+            textarea.focus();
+            textarea.select();
+            document.execCommand('copy');
+            textarea.remove();
+          }
+          const previous = button.innerHTML;
+          button.classList.add('copied');
+          button.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"></path></svg>';
+          setTimeout(() => {
+            button.classList.remove('copied');
+            button.innerHTML = previous;
+          }, 1400);
+        } catch {
+          button.textContent = 'ERR';
+        }
+      });
+    });
+  })();</script></body>
 </html>

package/templates/sessions/019ed2ee-1001-76ee-b353-000000000002/notrace.html

@@ -68,6 +68,44 @@
       overflow: visible;
     }
     .subtitle { margin: 10px 0 0; color: var(--muted); }
+    .session-subtitle {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      flex-wrap: wrap;
+    }
+    .session-id-chip {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      max-width: 100%;
+      padding: 6px 8px 6px 10px;
+      border: 1px solid var(--border);
+      border-radius: 999px;
+      background: rgba(0,0,0,0.18);
+      color: var(--text);
+      font-family: "SFMono-Regular", ui-monospace, Menlo, Monaco, Consolas, monospace;
+      font-size: 0.78rem;
+      word-break: break-all;
+    }
+    .copy-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 26px;
+      height: 26px;
+      border: 1px solid rgba(255,255,255,0.12);
+      border-radius: 999px;
+      background: rgba(255,255,255,0.04);
+      color: var(--muted);
+      cursor: pointer;
+      transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
+    }
+    .copy-btn:hover, .copy-btn.copied {
+      color: var(--text);
+      border-color: rgba(216,132,98,0.45);
+      background: var(--accent-soft);
+    }
     .meta {
       display: flex;
       gap: 8px;
@@ -76,7 +114,7 @@
       align-items: center;
       margin-top: 16px;
     }
-    .pill, .workflow-pill, .sort-btn {
+    .pill, .workflow-pill, .sort-btn, .export-btn {
       display: inline-flex;
       align-items: center;
       gap: 6px;
@@ -89,7 +127,7 @@
       font-size: 0.86rem;
       font-weight: 600;
     }
-    .metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; margin: 24px 0; }
+    .metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 16px; margin: 24px 0; }
     .metric-card {
       background: var(--panel-strong);
       border: 1px solid var(--border);
@@ -208,7 +246,40 @@
     .msg-role { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
     .msg.user .msg-role { color: #8ec5ff; }
     .msg.assistant .msg-role { color: var(--accent); }
-    .msg-content { padding: 14px; white-space: pre-wrap; word-break: break-word; }
+    .msg-content { padding: 14px; }
+    .chat-text {
+      white-space: pre-wrap;
+      word-break: break-word;
+      font-size: 0.95rem;
+      line-height: 1.6;
+      margin-bottom: 12px;
+    }
+    .chat-text:last-child { margin-bottom: 0; }
+    .chat-tool-use {
+      background: rgba(0,0,0,0.3);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      overflow: hidden;
+      margin-bottom: 12px;
+    }
+    .chat-tool-use:last-child { margin-bottom: 0; }
+    .chat-tool-header {
+      background: rgba(255,255,255,0.04);
+      padding: 8px 12px;
+      font-size: 0.8rem;
+      font-family: "SFMono-Regular", ui-monospace, Menlo, Monaco, Consolas, monospace;
+      color: #8ec5ff;
+      border-bottom: 1px solid var(--border);
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .chat-tool-body {
+      padding: 12px;
+      margin: 0;
+      background: transparent;
+      border: none;
+    }
     .footer-note {
       margin-top: 22px;
       color: var(--muted);
@@ -253,7 +324,15 @@
       color: var(--text);
       border-bottom-color: rgba(236,227,218,0.45);
     }
-    @media (max-width: 760px) {
+    .export-btn {
+      cursor: pointer;
+      transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
+    }
+    .export-btn:hover, .export-btn.copied {
+      color: var(--text);
+      border-color: rgba(216,132,98,0.45);
+      background: var(--accent-soft);
+    }
       .container { padding: 20px 14px 48px; }
       .hero { padding: 20px; }
       .hero-top { grid-template-columns: 1fr; }
@@ -285,12 +364,13 @@
     </g>
     <text x="0" y="114" fill="#ECE3DA" style="fill:#ECE3DA" font-family="Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif" font-size="96" font-weight="900" letter-spacing="-7">no</text>
     <text x="82" y="114" fill="#d88462" font-family="Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif" font-size="96" font-weight="900" letter-spacing="-7">trace</text>
-  </svg></a><p class="subtitle">Session retrospective for 019ed2ee-1001-76ee-b353-000000000002</p></div>
+  </svg></a><p class="subtitle session-subtitle"><span>Session retrospective</span><span class="session-id-chip"><span>019ed2ee-1001-76ee-b353-000000000002</span><button class="copy-btn" type="button" data-copy-value="019ed2ee-1001-76ee-b353-000000000002" aria-label="Copy session ID" title="Copy session ID"><svg width="14" height="14" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></button></span></p></div>
         </div>
         <div class="meta">
           <span class="pill">nothing</span>
           <span class="pill">Started 2026-06-17 17:37</span>
-          <span class="pill">Capture redacted</span>
+          <span class="pill">Mode: redacted</span>
+          <button class="export-btn" type="button" data-copy-value="{&quot;kind&quot;:&quot;notrace-export&quot;,&quot;traceId&quot;:&quot;019ed2ee-1001-76ee-b353-000000000002&quot;,&quot;repository&quot;:&quot;nothing&quot;,&quot;task&quot;:{&quot;workflow&quot;:&quot;research&quot;,&quot;id&quot;:&quot;branch:topic-02&quot;,&quot;path&quot;:null,&quot;dir&quot;:null},&quot;metrics&quot;:{&quot;inputTokens&quot;:4200,&quot;outputTokens&quot;:530,&quot;cacheReadTokens&quot;:1024,&quot;cacheWriteTokens&quot;:0,&quot;totalTokens&quot;:5754,&quot;totalCostUsd&quot;:0.0267},&quot;summary&quot;:&quot;compressed 24,110 to 18,332 tokens; saved 5,778 tokens across 3 tool results&quot;,&quot;events&quot;:[{&quot;model&quot;:&quot;claude-sonnet-4&quot;,&quot;input&quot;:[{&quot;role&quot;:&quot;user&quot;,&quot;content&quot;:&quot;Polish notrace HTML output and unify dashboard/session design.&quot;}],&quot;output&quot;:&quot;Found renderer split. Will move both pages to one shared shell and standardize styles.&quot;}]}" title="Copy session data for LLM/Agent context"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg><span>Export</span></button>
         </div>
       </div>
       <div class="metrics">
@@ -379,9 +459,9 @@
       </div>
       <span class="event-time">22:05:04</span>
     </summary>
-    <div class="event-body"><div class="stack"><section class="block"><h4>Arguments</h4><pre>{
+    <div class="event-body"><div class="stack"><section class="block"><h4>Arguments</h4><div class="msg-content"><div class="chat-tool-use"><div class="chat-tool-header"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path></svg> Execution Input</div><pre class="chat-tool-body">{
   &quot;command&quot;: &quot;find packages/notrace -maxdepth 3 -type f&quot;
-}</pre></section></div></div>
+}</pre></div></div></section></div></div>
   </details><details class="event">
     <summary>
       <div class="event-main">
@@ -390,11 +470,11 @@
       </div>
       <span class="event-time">22:05:05</span>
     </summary>
-    <div class="event-body"><div class="stack"><section class="block"><h4>Result</h4><pre>{
+    <div class="event-body"><div class="stack"><section class="block"><h4>Result</h4><div class="msg-content"><div class="chat-tool-use" style=""><div class="chat-tool-header" style="color: var(--muted);"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 10 4 15 9 20"></polyline><path d="M20 4v7a4 4 0 0 1-4 4H4"></path></svg> Execution Output</div><pre class="chat-tool-body">{
   &quot;stdout&quot;: &quot;packages/notrace/extensions/notrace/index.ts\npackages/notrace/extensions/notrace/renderer.ts\npackages/notrace/package.json&quot;,
   &quot;stderr&quot;: &quot;&quot;,
   &quot;exitCode&quot;: 0
-}</pre></section></div></div>
+}</pre></div></div></section></div></div>
   </details><details class="event">
     <summary>
       <div class="event-main">
@@ -403,7 +483,7 @@
       </div>
       <span class="event-time">22:05:11</span>
     </summary>
-    <div class="event-body"><div class="stack"><section class="block"><h4>Input Messages</h4><div class="msg user"><div class="msg-head"><span class="msg-role">user</span></div><div class="msg-content">Polish notrace HTML output and unify dashboard/session design.</div></div></section><section class="block"><h4>Output</h4><pre>Found renderer split. Will move both pages to one shared shell and standardize styles.</pre></section><section class="block"><h4>Usage</h4><pre>{
+    <div class="event-body"><div class="stack"><section class="block"><h4>Input Messages</h4><div class="msg user"><div class="msg-head"><span class="msg-role">user</span></div><div class="msg-content"><div class="chat-text">Polish notrace HTML output and unify dashboard/session design.</div></div></div></section><section class="block"><h4>Output</h4><div class="msg-content"><div class="chat-text">Found renderer split. Will move both pages to one shared shell and standardize styles.</div></div></section><section class="block"><h4>Usage</h4><pre>{
   &quot;input&quot;: 2140,
   &quot;output&quot;: 116,
   &quot;cacheRead&quot;: 0,
@@ -421,5 +501,35 @@
       <div class="footer-tagline">Local-first retrospective engine</div>
       <div class="footer-meta"><a href="https://opensource.org/licenses/MIT">MIT</a></div>
     </footer>
-  </div></body>
+  </div><script>(() => {
+    document.querySelectorAll('[data-copy-value]').forEach((button) => {
+      button.addEventListener('click', async () => {
+        const value = button.getAttribute('data-copy-value') || '';
+        try {
+          if (navigator.clipboard?.writeText) {
+            await navigator.clipboard.writeText(value);
+          } else {
+            const textarea = document.createElement('textarea');
+            textarea.value = value;
+            textarea.style.position = 'fixed';
+            textarea.style.opacity = '0';
+            document.body.appendChild(textarea);
+            textarea.focus();
+            textarea.select();
+            document.execCommand('copy');
+            textarea.remove();
+          }
+          const previous = button.innerHTML;
+          button.classList.add('copied');
+          button.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"></path></svg>';
+          setTimeout(() => {
+            button.classList.remove('copied');
+            button.innerHTML = previous;
+          }, 1400);
+        } catch {
+          button.textContent = 'ERR';
+        }
+      });
+    });
+  })();</script></body>
 </html>