klaude-code 1.2.2__py3-none-any.whl → 1.2.4__py3-none-any.whl

klaude_code/session/templates/export_session.html

@@ -4,16 +4,29 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Klaude Code - $first_user_message</title>
-    <link href="https://cdn.jsdelivr.net/npm/@fontsource/commit-mono/400.css" rel="stylesheet" />
-    <link href="https://cdn.jsdelivr.net/npm/@fontsource/commit-mono/500.css" rel="stylesheet" />
-    <link href="https://cdn.jsdelivr.net/npm/@fontsource/commit-mono/700.css" rel="stylesheet" />
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%230851b2%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><polyline points=%2216 18 22 12 16 6%22></polyline><polyline points=%228 6 2 12 8 18%22></polyline></svg>"
+    />
+    <link
+      href="https://cdn.jsdelivr.net/npm/@fontsource/iosevka/400.css"
+      rel="stylesheet"
+    />
+    <link
+      href="https://cdn.jsdelivr.net/npm/@fontsource/iosevka/500.css"
+      rel="stylesheet"
+    />
+    <link
+      href="https://cdn.jsdelivr.net/npm/@fontsource/iosevka/800.css"
+      rel="stylesheet"
+    />
     <style>
       :root {
         --bg-body: #ededed;
         --bg-container: #f0f0f0;
         --bg-card: #f0f0f0;
         --border: #c8c8c8;
-        --text: #333333;
+        --text: #111111;
         --text-dim: #64748b;
         --accent: #0851b2;
         --accent-dim: rgba(8, 145, 178, 0.08);
@@ -21,12 +34,14 @@
         --error: #dc2626;
         --bg-error: #ffebee;
         --bg-code: #f3f3f3;
-        --font-sans: "Commit Mono", "SF Mono", Menlo, monospace;
-        --font-mono: "Commit Mono", "SF Mono", Menlo, monospace;
-        --font-size-xs: 11px;
-        --font-size-sm: 12px;
-        --font-size-base: 13px;
-        --font-size-lg: 16px;
+        --font-sans: "Iosevka", "SF Mono", Menlo, monospace;
+        --font-mono: "Iosevka", "SF Mono", Menlo, monospace;
+        --font-markdown: "Iosevka", "SF Mono", Menlo, monospace;
+        --font-weight-bold: 800;
+        --font-size-xs: 13px;
+        --font-size-sm: 14px;
+        --font-size-base: 16px;
+        --font-size-lg: 18px;
         --spacing-xs: 4px;
         --spacing-sm: 8px;
         --spacing-md: 12px;
@@ -66,7 +81,7 @@
 
       .header h1 {
         font-size: 20px;
-        font-weight: 700;
+        font-weight: var(--font-weight-bold);
         margin-bottom: 16px;
         color: var(--text);
         display: inline-block;
@@ -86,9 +101,8 @@
 
       .meta-label {
         font-size: var(--font-size-sm);
-        font-weight: 700;
+        font-weight: var(--font-weight-bold);
         text-transform: uppercase;
-        letter-spacing: 0.05em;
         color: var(--text-dim);
       }
 
@@ -116,8 +130,7 @@
         font-family: var(--font-mono);
         font-size: var(--font-size-sm);
         text-transform: uppercase;
-        letter-spacing: 0.05em;
-        font-weight: 700;
+        font-weight: var(--font-weight-bold);
         cursor: pointer;
         user-select: none;
         list-style: none;
@@ -184,14 +197,17 @@
 
       .role-label {
         font-size: var(--font-size-sm);
-        font-weight: 700;
+        font-weight: var(--font-weight-bold);
         text-transform: uppercase;
-        letter-spacing: 0.05em;
         margin-bottom: 4px;
         color: var(--text-dim);
         display: flex;
         align-items: center;
         gap: 8px;
+        width: 100%;
+      }
+      .message-header .role-label {
+        width: auto;
       }
       .role-label.user {
         color: var(--accent);
@@ -210,8 +226,7 @@
         font-family: var(--font-mono);
         font-size: var(--font-size-xs);
         text-transform: uppercase;
-        letter-spacing: 0.05em;
-        font-weight: 700;
+        font-weight: var(--font-weight-bold);
         cursor: pointer;
         user-select: none;
         list-style: none;
@@ -279,14 +294,14 @@
         border: 1px solid var(--border);
         background: transparent;
         color: var(--text-dim);
+        font-family: var(--font-mono);
         font-size: var(--font-size-xs);
         text-transform: uppercase;
-        letter-spacing: 0.08em;
         padding: 2px 10px;
         border-radius: 999px;
         cursor: pointer;
         transition: color 0.2s, border-color 0.2s, background 0.2s;
-        font-weight: 700;
+        font-weight: var(--font-weight-bold);
       }
       .raw-toggle:hover {
         color: var(--text);
@@ -303,14 +318,14 @@
         border: 1px solid var(--border);
         background: transparent;
         color: var(--text-dim);
+        font-family: var(--font-mono);
         font-size: var(--font-size-xs);
         text-transform: uppercase;
-        letter-spacing: 0.08em;
         padding: 2px 10px;
         border-radius: 999px;
         cursor: pointer;
         transition: color 0.2s, border-color 0.2s, background 0.2s;
-        font-weight: 700;
+        font-weight: var(--font-weight-bold);
       }
       .copy-raw-btn:hover {
         color: var(--text);
@@ -321,14 +336,14 @@
         border: 1px solid var(--border);
         background: transparent;
         color: var(--text-dim);
+        font-family: var(--font-mono);
         font-size: var(--font-size-xs);
         text-transform: uppercase;
-        letter-spacing: 0.08em;
         padding: 2px 10px;
         border-radius: 999px;
         cursor: pointer;
         transition: color 0.2s, border-color 0.2s, background 0.2s;
-        font-weight: 700;
+        font-weight: var(--font-weight-bold);
       }
       .copy-mermaid-btn:hover {
         color: var(--text);
@@ -361,7 +376,7 @@
         border-radius: 0;
         padding: 0;
         box-shadow: none;
-        font-weight: 700;
+        font-weight: var(--font-weight-bold);
       }
 
       .thinking-block {
@@ -371,9 +386,15 @@
         border-left: 2px solid var(--border);
         color: var(--text-dim);
         font-style: italic;
-        font-size: var(--font-size-base);
+        font-size: var(--font-size-sm);
         background: var(--bg-body);
       }
+      .thinking-block.markdown-body p {
+        margin-bottom: 8px;
+      }
+      .thinking-block.markdown-body p:last-child {
+        margin-bottom: 0;
+      }
 
       /* Response Metadata */
       .response-metadata {
@@ -392,7 +413,7 @@
         line-height: 1.4;
       }
       .metadata-model {
-        font-weight: 700;
+        font-weight: var(--font-weight-bold);
         color: var(--text);
       }
       .metadata-provider {
@@ -427,7 +448,7 @@
       }
 
       .tool-name {
-        font-weight: 700;
+        font-weight: var(--font-weight-bold);
         color: var(--accent);
       }
       .tool-id {
@@ -435,6 +456,24 @@
         font-size: var(--font-size-xs);
       }
 
+      .tool-header-right {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .timestamp {
+        font-family: var(--font-mono);
+        font-size: var(--font-size-xs);
+        color: var(--text-dim);
+        margin-left: auto;
+        font-weight: normal;
+      }
+
+      .assistant-toolbar .timestamp {
+        margin-right: 8px;
+      }
+
       .tool-args {
         padding: 12px;
         background: var(--bg-body);
@@ -455,8 +494,7 @@
         font-family: var(--font-mono);
         font-size: var(--font-size-xs);
         text-transform: uppercase;
-        letter-spacing: 0.05em;
-        font-weight: 700;
+        font-weight: var(--font-weight-bold);
         cursor: pointer;
         user-select: none;
         list-style: none;
@@ -557,7 +595,7 @@
 
       /* Markdown Elements */
       .markdown-body {
-        font-family: var(--font-sans);
+        font-family: var(--font-markdown);
       }
       .markdown-body hr {
         height: 0;
@@ -574,7 +612,7 @@
         border: 1px solid var(--border);
       }
       .markdown-body code {
-        font-family: var(--font-mono);
+        font-family: var(--font-markdown);
         font-size: 0.9em;
         background: var(--bg-code);
         padding: 2px 4px;
@@ -648,8 +686,7 @@
         font-family: var(--font-mono);
         font-size: var(--font-size-xs);
         text-transform: uppercase;
-        letter-spacing: 0.05em;
-        font-weight: 700;
+        font-weight: var(--font-weight-bold);
         cursor: pointer;
         user-select: none;
         list-style: none;
@@ -689,6 +726,17 @@
         padding-top: 24px;
       }
 
+      .footer-link {
+        color: inherit;
+        text-decoration: none;
+        font-weight: 600;
+        transition: color 0.2s;
+      }
+
+      .footer-link:hover {
+        color: var(--accent);
+      }
+
       .expandable {
         cursor: pointer;
       }
@@ -757,6 +805,42 @@
         color: var(--text-dim);
       }
 
+      /* Scroll to Bottom Button */
+      .scroll-btn {
+        position: fixed;
+        bottom: 24px;
+        right: 24px;
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        background: var(--bg-card);
+        border: 1px solid var(--border);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        color: var(--text-dim);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        opacity: 0;
+        visibility: hidden;
+        transform: translateY(10px);
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        z-index: 100;
+      }
+
+      .scroll-btn:hover {
+        color: var(--accent);
+        border-color: var(--accent);
+        transform: translateY(-2px);
+        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
+      }
+
+      .scroll-btn.visible {
+        opacity: 1;
+        visibility: visible;
+        transform: translateY(0);
+      }
+
       /* Tool details in Available Tools section */
       .tool-details {
         margin-bottom: 2px;
@@ -798,9 +882,8 @@
       }
       .tool-params-title {
         font-size: var(--font-size-xs);
-        font-weight: 700;
+        font-weight: var(--font-weight-bold);
         text-transform: uppercase;
-        letter-spacing: 0.05em;
         color: var(--text-dim);
         margin-bottom: 8px;
       }
@@ -825,9 +908,81 @@
         font-size: var(--font-size-sm);
         margin-top: 2px;
       }
+      /* TOC Sidebar */
+      .toc-sidebar {
+        position: fixed;
+        top: 33vh;
+        left: 20px;
+        width: 220px;
+        bottom: 33vh;
+        overflow-y: auto;
+        padding-right: 12px;
+        /* Vertical padding to offset mask */
+        padding-top: 30px;
+        padding-bottom: 30px;
+        display: none;
+        scrollbar-width: none;
+        z-index: 100;
+        /* Linear mask for fading edges */
+        -webkit-mask-image: linear-gradient(
+          to bottom,
+          transparent 0%,
+          black 30px,
+          black calc(100% - 30px),
+          transparent 100%
+        );
+        mask-image: linear-gradient(
+          to bottom,
+          transparent 0%,
+          black 30px,
+          black calc(100% - 30px),
+          transparent 100%
+        );
+      }
+
+      .toc-sidebar::-webkit-scrollbar {
+        display: none;
+      }
+
+      /* Show TOC on wide screens */
+      @media (min-width: 1400px) {
+        .toc-sidebar {
+          display: block;
+        }
+      }
+
+      .toc-item {
+        display: block;
+        padding: 3px 10px;
+        margin-bottom: 1px;
+        font-family: var(--font-mono);
+        font-size: 12px;
+        line-height: 1.3;
+        color: var(--text-dim);
+        text-decoration: none;
+        cursor: pointer;
+        transition: all 0.2s;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        border-radius: 4px;
+      }
+
+      .toc-item:hover {
+        color: var(--text);
+        background: rgba(0, 0, 0, 0.03);
+      }
+
+      .toc-item.active {
+        color: var(--text);
+        background: var(--bg-card);
+        font-weight: bold;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+      }
     </style>
   </head>
   <body>
+    <div id="toc-sidebar" class="toc-sidebar"></div>
     <div class="container">
       <div class="header">
         <h1>Klaude Code</h1>
@@ -871,17 +1026,48 @@
       <div class="message-stream">$messages_html</div>
 
       <div class="footer">
-        Generated by klaude-code &bull; $footer_time &bull; $total_messages
-        messages
+        Generated by
+        <a
+          href="https://github.com/inspirepan/klaude-code"
+          class="footer-link"
+          target="_blank"
+          >klaude-code</a
+        >
+        &bull; $footer_time &bull; $total_messages messages
       </div>
     </div>
 
+    <div id="scroll-btn" class="scroll-btn" title="Scroll to bottom">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="20"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <line x1="12" y1="5" x2="12" y2="19"></line>
+        <polyline points="19 12 12 19 5 12"></polyline>
+      </svg>
+    </div>
+
     <link
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css"
     />
     <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <script type="module">
+      import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs";
+      mermaid.initialize({
+        startOnLoad: true,
+        theme: "neutral",
+        fontFamily: '"Iosevka", "SF Mono", Menlo, monospace',
+      });
+    </script>
     <script>
       // Markdown rendering and Syntax Highlighting
       document.querySelectorAll(".markdown-content").forEach((el) => {
@@ -1077,6 +1263,164 @@
           }
         });
       });
+
+      // Scroll to bottom button
+      const scrollBtn = document.getElementById("scroll-btn");
+
+      function updateScrollBtn() {
+        // Show button if we are not at the bottom
+        const isAtBottom =
+          window.innerHeight + window.scrollY >=
+          document.body.offsetHeight - 100;
+        if (isAtBottom) {
+          scrollBtn.classList.remove("visible");
+        } else {
+          scrollBtn.classList.add("visible");
+        }
+      }
+
+      window.addEventListener("scroll", updateScrollBtn);
+      window.addEventListener("resize", updateScrollBtn);
+      updateScrollBtn(); // Initial check
+
+      scrollBtn.addEventListener("click", () => {
+        window.scrollTo({
+          top: document.body.scrollHeight,
+          behavior: "smooth",
+        });
+      });
+
+      // TOC Logic
+      document.addEventListener("DOMContentLoaded", () => {
+        const tocSidebar = document.getElementById("toc-sidebar");
+        if (!tocSidebar) return;
+
+        const sections = [];
+        let userCount = 0;
+        let assistantCount = 0;
+
+        // 1. System Prompt
+        const sysPrompt = document.querySelector(
+          ".collapsible-section summary"
+        );
+        if (sysPrompt && sysPrompt.textContent.includes("System Prompt")) {
+          const details = sysPrompt.parentElement;
+          details.id = details.id || "section-system-prompt";
+          sections.push({
+            id: details.id,
+            label: "System Prompt",
+            el: details,
+          });
+        }
+
+        // 2. Messages and Tools
+        const stream = document.querySelector(".message-stream");
+        if (stream) {
+          // Use a Walker to find top-level relevant items if structure is complex
+          // But assuming flat children of message-stream based on CSS
+          Array.from(stream.children).forEach((child) => {
+            let label = null;
+            let idPrefix = "section";
+
+            if (child.classList.contains("message-group")) {
+              const roleLabel = child.querySelector(".role-label");
+              if (roleLabel) {
+                if (roleLabel.classList.contains("user")) {
+                  userCount++;
+                  label = `USER $${userCount}`;
+                  idPrefix = "user";
+                } else if (roleLabel.classList.contains("assistant")) {
+                  assistantCount++;
+                  label = `ASSISTANT $${assistantCount}`;
+                  idPrefix = "assistant";
+                } else {
+                  label = roleLabel.textContent.trim();
+                }
+              }
+            } else if (child.classList.contains("tool-call")) {
+              const toolName = child.querySelector(".tool-name");
+              if (toolName) {
+                label = toolName.textContent.trim();
+                idPrefix = "tool";
+              } else {
+                label = "Tool";
+              }
+            }
+
+            if (label) {
+              child.id =
+                child.id ||
+                `$${idPrefix}-$${Math.random().toString(36).substr(2, 9)}`;
+              sections.push({ id: child.id, label: label, el: child });
+            }
+          });
+        }
+
+        // Render TOC
+        sections.forEach((section) => {
+          const item = document.createElement("div");
+          item.className = "toc-item";
+          item.textContent = section.label;
+          item.dataset.target = section.id;
+          item.addEventListener("click", () => {
+            section.el.scrollIntoView({ behavior: "smooth", block: "start" });
+          });
+          tocSidebar.appendChild(item);
+        });
+
+        // Scroll Spy with throttling
+        let ticking = false;
+        const offset = 150; // Pixel offset for "active" area
+
+        function updateActiveSection() {
+          let currentId = sections.length > 0 ? sections[0].id : null;
+          const scrollY = window.scrollY;
+
+          // We look for the last section that has passed the top threshold (+ offset)
+          for (let i = 0; i < sections.length; i++) {
+            const el = sections[i].el;
+            // If element top is above the "active line" (scrollY + offset)
+            if (el.offsetTop <= scrollY + offset) {
+              currentId = sections[i].id;
+            } else {
+              // Since sections are ordered by position, we can stop once we find one below the line
+              break;
+            }
+          }
+
+          // Update UI
+          document.querySelectorAll(".toc-item").forEach((item) => {
+            const isActive = item.dataset.target === currentId;
+            if (item.classList.contains("active") !== isActive) {
+              item.classList.toggle("active", isActive);
+              if (isActive) {
+                // Auto-scroll sidebar to visible
+                const sidebarRect = tocSidebar.getBoundingClientRect();
+                const itemRect = item.getBoundingClientRect();
+                // Check if item is out of view in sidebar (accounting for mask)
+                if (
+                  itemRect.top < sidebarRect.top + 40 ||
+                  itemRect.bottom > sidebarRect.bottom - 40
+                ) {
+                  item.scrollIntoView({ behavior: "smooth", block: "center" });
+                }
+              }
+            }
+          });
+
+          ticking = false;
+        }
+
+        window.addEventListener("scroll", () => {
+          if (!ticking) {
+            window.requestAnimationFrame(updateActiveSection);
+            ticking = true;
+          }
+        });
+
+        // Initial update
+        updateActiveSection();
+      });
     </script>
   </body>
 </html>

klaude_code/ui/__init__.py

@@ -21,7 +21,7 @@ Factory Functions:
 from .core.display import DisplayABC
 from .core.input import InputProviderABC
 from .modes.debug.display import DebugEventDisplay
-from .modes.exec.display import ExecDisplay
+from .modes.exec.display import ExecDisplay, StreamJsonDisplay
 
 # --- Display Mode Implementations ---
 from .modes.repl.display import REPLDisplay
@@ -53,16 +53,19 @@ def create_default_display(
     return repl_display
 
 
-def create_exec_display(debug: bool = False) -> DisplayABC:
+def create_exec_display(debug: bool = False, stream_json: bool = False) -> DisplayABC:
     """
     Create a display for exec (non-interactive) mode.
 
     Args:
         debug: If True, wrap the display with DebugEventDisplay to log all events.
+        stream_json: If True, stream all events as JSON lines instead of normal output.
 
     Returns:
         A DisplayABC implementation that only outputs task results.
     """
+    if stream_json:
+        return StreamJsonDisplay()
     exec_display = ExecDisplay()
     if debug:
         return DebugEventDisplay(exec_display)
@@ -76,6 +79,7 @@ __all__ = [
     # Display mode implementations
     "REPLDisplay",
     "ExecDisplay",
+    "StreamJsonDisplay",
     "DebugEventDisplay",
     # Input implementations
     "PromptToolkitInput",

klaude_code/ui/modes/exec/display.py

@@ -1,3 +1,4 @@
+import sys
 from typing import override
 
 from klaude_code.protocol import events
@@ -35,3 +36,28 @@ class ExecDisplay(DisplayABC):
     async def stop(self) -> None:
         """Do nothing on stop."""
         pass
+
+
+class StreamJsonDisplay(DisplayABC):
+    """A display implementation that streams all events as JSON lines."""
+
+    @override
+    async def consume_event(self, event: events.Event) -> None:
+        """Stream each event as a JSON line."""
+        if isinstance(event, events.EndEvent):
+            return
+        event_type = type(event).__name__
+        json_data = event.model_dump_json()
+        # Output format: {"type": "EventName", "data": {...}}
+        print(f'{{"type": "{event_type}", "data": {json_data}}}', flush=True)
+        sys.stdout.flush()
+
+    @override
+    async def start(self) -> None:
+        """Do nothing on start."""
+        pass
+
+    @override
+    async def stop(self) -> None:
+        """Do nothing on stop."""
+        pass