klaude-code 1.2.2__py3-none-any.whl → 1.2.3__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;
       }
@@ -858,9 +941,7 @@
         <div
           class="details-content system-prompt-content"
           style="font-family: var(--font-mono); white-space: pre-wrap"
-        >
-          $system_prompt
-        </div>
+        >$system_prompt</div>
       </details>
 
       <details class="collapsible-section">
@@ -871,17 +952,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 +1189,32 @@
           }
         });
       });
+
+      // 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",
+        });
+      });
     </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

klaude_code/ui/modes/repl/event_handler.py

@@ -107,7 +107,7 @@ class SpinnerStatusState:
         if self._base_status:
             result = Text(self._base_status)
             if activity_text:
-                result.append(" ")
+                result.append(" | ")
                 result.append_text(activity_text)
             return result
         if activity_text:
@@ -286,12 +286,14 @@ class DisplayEventHandler:
         self.renderer.display_task_finish(event)
         if not self.renderer.is_sub_agent_session(event.session_id):
             emit_osc94(OSC94States.HIDDEN)
+            self.spinner_status.reset()
         self.renderer.spinner_stop()
         await self.stage_manager.transition_to(Stage.WAITING)
         self._maybe_notify_task_finish(event)
 
     async def _on_interrupt(self, event: events.InterruptEvent) -> None:
         self.renderer.spinner_stop()
+        self.spinner_status.reset()
         await self.stage_manager.transition_to(Stage.WAITING)
         emit_osc94(OSC94States.HIDDEN)
         self.renderer.display_interrupt()
@@ -302,11 +304,13 @@ class DisplayEventHandler:
         self.renderer.display_error(event)
         if not event.can_retry:
             self.renderer.spinner_stop()
+            self.spinner_status.reset()
 
     async def _on_end(self, event: events.EndEvent) -> None:
         emit_osc94(OSC94States.HIDDEN)
         await self.stage_manager.transition_to(Stage.WAITING)
         self.renderer.spinner_stop()
+        self.spinner_status.reset()
 
     # ─────────────────────────────────────────────────────────────────────────────
     # Private helper methods

klaude_code/ui/renderers/developer.py

@@ -16,7 +16,7 @@ def need_render_developer_message(e: events.DeveloperMessageEvent) -> bool:
         or e.item.external_file_changes
         or e.item.todo_use
         or e.item.at_files
-        or e.item.clipboard_images
+        or e.item.user_image_count
     )
 
 
@@ -74,16 +74,12 @@ def render_developer_message(e: events.DeveloperMessageEvent) -> RenderableType:
             )
         parts.append(grid)
 
-    if ci := e.item.clipboard_images:
+    if uic := e.item.user_image_count:
         grid = create_grid()
-        for img_tag in ci:
-            grid.add_row(
-                Text("  +", style=ThemeKey.REMINDER),
-                Text.assemble(
-                    ("Read ", ThemeKey.REMINDER),
-                    Text(f"{img_tag} Image", style=ThemeKey.REMINDER_BOLD),
-                ),
-            )
+        grid.add_row(
+            Text("  +", style=ThemeKey.REMINDER),
+            Text(f"Attached {uic} image{'s' if uic > 1 else ''}", style=ThemeKey.REMINDER),
+        )
         parts.append(grid)
 
     return Group(*parts) if parts else Text("")

klaude_code/ui/renderers/metadata.py

@@ -41,33 +41,32 @@ def render_response_metadata(e: events.ResponseMetadataEvent) -> RenderableType:
 
     if metadata.usage is not None:
         # Input
-        parts.append(
-            Text.assemble(
-                ("input:", ThemeKey.METADATA_DIM),
-                (format_number(metadata.usage.input_tokens), ThemeKey.METADATA_DIM),
-            )
-        )
+        input_parts: list[tuple[str, str]] = [
+            ("input:", ThemeKey.METADATA_DIM),
+            (format_number(metadata.usage.input_tokens), ThemeKey.METADATA_DIM),
+        ]
+        if metadata.usage.input_cost is not None:
+            input_parts.append((f"(${metadata.usage.input_cost:.4f})", ThemeKey.METADATA_DIM))
+        parts.append(Text.assemble(*input_parts))
 
         # Cached
         if metadata.usage.cached_tokens > 0:
-            parts.append(
-                Text.assemble(
-                    ("cached", ThemeKey.METADATA_DIM),
-                    (":", ThemeKey.METADATA_DIM),
-                    (
-                        format_number(metadata.usage.cached_tokens),
-                        ThemeKey.METADATA_DIM,
-                    ),
-                )
-            )
+            cached_parts: list[tuple[str, str]] = [
+                ("cached:", ThemeKey.METADATA_DIM),
+                (format_number(metadata.usage.cached_tokens), ThemeKey.METADATA_DIM),
+            ]
+            if metadata.usage.cache_read_cost is not None:
+                cached_parts.append((f"(${metadata.usage.cache_read_cost:.4f})", ThemeKey.METADATA_DIM))
+            parts.append(Text.assemble(*cached_parts))
 
         # Output
-        parts.append(
-            Text.assemble(
-                ("output:", ThemeKey.METADATA_DIM),
-                (format_number(metadata.usage.output_tokens), ThemeKey.METADATA_DIM),
-            )
-        )
+        output_parts: list[tuple[str, str]] = [
+            ("output:", ThemeKey.METADATA_DIM),
+            (format_number(metadata.usage.output_tokens), ThemeKey.METADATA_DIM),
+        ]
+        if metadata.usage.output_cost is not None:
+            output_parts.append((f"(${metadata.usage.output_cost:.4f})", ThemeKey.METADATA_DIM))
+        parts.append(Text.assemble(*output_parts))
 
         # Reasoning
         if metadata.usage.reasoning_tokens > 0:
@@ -105,16 +104,26 @@ def render_response_metadata(e: events.ResponseMetadataEvent) -> RenderableType:
                 )
             )
 
-    # Cost
+    # Duration
     if metadata.task_duration_s is not None:
         parts.append(
             Text.assemble(
-                ("cost", ThemeKey.METADATA_DIM),
+                ("time", ThemeKey.METADATA_DIM),
                 (":", ThemeKey.METADATA_DIM),
                 (f"{metadata.task_duration_s:.1f}s", ThemeKey.METADATA_DIM),
             )
         )
 
+    # Cost (USD)
+    if metadata.usage is not None and metadata.usage.total_cost is not None:
+        parts.append(
+            Text.assemble(
+                ("cost", ThemeKey.METADATA_DIM),
+                (":", ThemeKey.METADATA_DIM),
+                (f"${metadata.usage.total_cost:.4f}", ThemeKey.METADATA_DIM),
+            )
+        )
+
     if parts:
         line2 = Text("/", style=ThemeKey.METADATA_DIM).join(parts)
         renderables.append(Padding(line2, (0, 0, 0, 2)))

klaude_code/ui/renderers/sub_agent.py

@@ -6,8 +6,8 @@ from rich.style import Style
 from rich.text import Text
 
 from klaude_code import const
-from klaude_code.core.sub_agent import get_sub_agent_profile_by_tool
 from klaude_code.protocol import events, model
+from klaude_code.protocol.sub_agent import get_sub_agent_profile_by_tool
 from klaude_code.ui.rich.markdown import NoInsetMarkdown
 from klaude_code.ui.rich.theme import ThemeKey
 

klaude_code/ui/renderers/tools.py

@@ -6,8 +6,8 @@ from rich.padding import Padding
 from rich.text import Text
 
 from klaude_code import const
-from klaude_code.core.sub_agent import is_sub_agent_tool as _is_sub_agent_tool
 from klaude_code.protocol import events, model
+from klaude_code.protocol.sub_agent import is_sub_agent_tool as _is_sub_agent_tool
 from klaude_code.ui.renderers import diffs as r_diffs
 from klaude_code.ui.renderers.common import create_grid
 from klaude_code.ui.rich.theme import ThemeKey
@@ -449,7 +449,7 @@ def get_tool_active_form(tool_name: str) -> str:
         return _TOOL_ACTIVE_FORM[tool_name]
 
     # Check sub agent profiles
-    from klaude_code.core.sub_agent import get_sub_agent_profile_by_tool
+    from klaude_code.protocol.sub_agent import get_sub_agent_profile_by_tool
 
     profile = get_sub_agent_profile_by_tool(tool_name)
     if profile and profile.active_form: