generated from nhcarrigan/template
feat: collapsible tool lines in terminal
Long tool messages (e.g. Bash commands) are now stored in full and displayed collapsed by default, with a toggle button to expand/collapse. Removes backend truncation of Bash commands at 50 chars.
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { claudeStore, type TerminalLine } from "$lib/stores/claude";
|
||||
import { afterUpdate, tick, onMount, onDestroy } from "svelte";
|
||||
|
||||
import ConversationTabs from "./ConversationTabs.svelte";
|
||||
import Markdown from "./Markdown.svelte";
|
||||
import HighlightedText from "./HighlightedText.svelte";
|
||||
@@ -187,6 +188,22 @@
|
||||
copiedMessageId = null;
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
// Collapsible tool lines
|
||||
const TOOL_COLLAPSE_THRESHOLD = 60;
|
||||
let expandedToolLines: Record<string, boolean> = {};
|
||||
|
||||
function isToolContentLong(content: string): boolean {
|
||||
return content.length > TOOL_COLLAPSE_THRESHOLD;
|
||||
}
|
||||
|
||||
function truncateToolContent(content: string): string {
|
||||
return content.slice(0, TOOL_COLLAPSE_THRESHOLD) + "…";
|
||||
}
|
||||
|
||||
function toggleToolLine(id: string) {
|
||||
expandedToolLines = { ...expandedToolLines, [id]: !expandedToolLines[id] };
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
@@ -289,6 +306,22 @@
|
||||
<span class="copy-text">{copiedMessageId === line.id ? "Copied!" : "Copy"}</span>
|
||||
</button>
|
||||
</div>
|
||||
{:else if line.type === "tool" && isToolContentLong(maskPaths(line.content, hidePaths))}
|
||||
<span class="tool-collapsible">
|
||||
<HighlightedText
|
||||
content={expandedToolLines[line.id]
|
||||
? maskPaths(line.content, hidePaths)
|
||||
: truncateToolContent(maskPaths(line.content, hidePaths))}
|
||||
searchQuery={currentSearchQuery}
|
||||
/>
|
||||
<button
|
||||
class="tool-toggle-btn"
|
||||
onclick={() => toggleToolLine(line.id)}
|
||||
title={expandedToolLines[line.id] ? "Collapse" : "Expand to see full content"}
|
||||
>
|
||||
{expandedToolLines[line.id] ? "▲" : "▼"}
|
||||
</button>
|
||||
</span>
|
||||
{:else}
|
||||
<HighlightedText
|
||||
content={maskPaths(line.content, hidePaths)}
|
||||
@@ -408,4 +441,28 @@
|
||||
.terminal-line {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tool-collapsible {
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
gap: 0.4em;
|
||||
}
|
||||
|
||||
.tool-toggle-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-tertiary, #6b7280);
|
||||
cursor: pointer;
|
||||
font-size: 0.7em;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
opacity: 0.7;
|
||||
transition: opacity 0.15s ease;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.tool-toggle-btn:hover {
|
||||
opacity: 1;
|
||||
color: var(--terminal-tool, #c084fc);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user