diff options
| -rw-r--r-- | packages/frontend/src/lib/components/DebugPanel.svelte | 35 | ||||
| -rw-r--r-- | packages/frontend/src/lib/components/SidebarPanel.svelte | 4 |
2 files changed, 39 insertions, 0 deletions
diff --git a/packages/frontend/src/lib/components/DebugPanel.svelte b/packages/frontend/src/lib/components/DebugPanel.svelte new file mode 100644 index 0000000..aea1ccb --- /dev/null +++ b/packages/frontend/src/lib/components/DebugPanel.svelte @@ -0,0 +1,35 @@ +<script lang="ts"> +import { tabStore } from "../tabs.svelte.js"; + +let copyLabel = $state("Copy conversation"); + +function resetCopyLabel(): void { + copyLabel = "Copy conversation"; +} + +async function handleCopy(): Promise<void> { + const text = tabStore.copyConversation(); + try { + await navigator.clipboard.writeText(text); + copyLabel = "Copied"; + } catch { + copyLabel = "Failed"; + } + setTimeout(resetCopyLabel, 1500); +} +</script> + +<div class="flex flex-col gap-3"> + <div class="text-xs font-semibold text-base-content/50 uppercase tracking-wide">Debug</div> + + <div class="flex flex-col gap-2"> + <p class="text-xs text-base-content/70">Conversation</p> + <p class="text-xs text-base-content/40"> + Copy a structured plain-text dump of the active tab's conversation + (chunk shape included) for bug reports. + </p> + <button type="button" class="btn btn-sm btn-primary w-full" onclick={handleCopy}> + {copyLabel} + </button> + </div> +</div> diff --git a/packages/frontend/src/lib/components/SidebarPanel.svelte b/packages/frontend/src/lib/components/SidebarPanel.svelte index 206ed09..66fa6a4 100644 --- a/packages/frontend/src/lib/components/SidebarPanel.svelte +++ b/packages/frontend/src/lib/components/SidebarPanel.svelte @@ -4,6 +4,7 @@ import type { CacheStats, KeyInfo, LogEntry, TaskItem } from "../types.js"; import CacheRatePanel from "./CacheRatePanel.svelte"; import ClaudeReset from "./ClaudeReset.svelte"; import ConfigPanel from "./ConfigPanel.svelte"; +import DebugPanel from "./DebugPanel.svelte"; import KeyUsage from "./KeyUsage.svelte"; import ModelSelector from "./ModelSelector.svelte"; import ModelStatus from "./ModelStatus.svelte"; @@ -95,6 +96,7 @@ const viewOptions = [ "Skills", "Tools", "Settings", + "Debug", ]; function addPanel() { @@ -181,6 +183,8 @@ function contentClass(_selected: string): string { <ToolPermissions entries={permissionLog} {apiBase} /> {:else if panel.selected === "Settings"} <SettingsPanel {keys} {apiBase} /> + {:else if panel.selected === "Debug"} + <DebugPanel /> {/if} </div> </div> |