generated from nhcarrigan/template
608 lines
22 KiB
Svelte
608 lines
22 KiB
Svelte
<script lang="ts">
|
|
import { Menu, ScrollText } from "lucide-svelte";
|
|
import { openUrl } from "@tauri-apps/plugin-opener";
|
|
import { achievementProgress } from "$lib/stores/achievements";
|
|
import { runningAgentCount } from "$lib/stores/agents";
|
|
import { editorStore } from "$lib/stores/editor";
|
|
import { configStore } from "$lib/stores/config";
|
|
import { debugConsoleStore } from "$lib/stores/debugConsole";
|
|
import { memoryBrowserStore } from "$lib/stores/memoryBrowser";
|
|
import type { ConnectionStatus } from "$lib/types/messages";
|
|
import StatsDisplay from "./StatsDisplay.svelte";
|
|
import AboutPanel from "./AboutPanel.svelte";
|
|
import HelpPanel from "./HelpPanel.svelte";
|
|
import KeyboardShortcutsModal from "./KeyboardShortcutsModal.svelte";
|
|
import SessionHistoryPanel from "./SessionHistoryPanel.svelte";
|
|
import TodoPanel from "./TodoPanel.svelte";
|
|
import GitPanel from "./GitPanel.svelte";
|
|
import ProfilePanel from "./ProfilePanel.svelte";
|
|
import AgentMonitorPanel from "./AgentMonitorPanel.svelte";
|
|
import CastPanel from "./CastPanel.svelte";
|
|
import PluginManagementPanel from "./PluginManagementPanel.svelte";
|
|
import McpManagementPanel from "./McpManagementPanel.svelte";
|
|
import ProjectContextPanel from "./ProjectContextPanel.svelte";
|
|
import PrdPanel from "./PrdPanel.svelte";
|
|
import ChangelogPanel from "./ChangelogPanel.svelte";
|
|
import TaskLoopPanel from "./TaskLoopPanel.svelte";
|
|
import WorkflowPanel from "./WorkflowPanel.svelte";
|
|
import MemoryBrowserPanel from "./MemoryBrowserPanel.svelte";
|
|
import { injectTextStore } from "$lib/stores/projectContext";
|
|
|
|
const DISCORD_URL = "https://chat.nhcarrigan.com";
|
|
const DONATE_URL = "https://donate.nhcarrigan.com";
|
|
|
|
interface Props {
|
|
connectionStatus: ConnectionStatus;
|
|
workingDirectory: string;
|
|
selectedDirectory: string;
|
|
isSummarising: boolean;
|
|
onToggleCompact: () => void;
|
|
onToggleAchievements: () => void;
|
|
onCompactConversation: () => Promise<void>;
|
|
onStartFreshWithContext: () => Promise<void>;
|
|
}
|
|
|
|
const {
|
|
connectionStatus,
|
|
workingDirectory,
|
|
selectedDirectory,
|
|
isSummarising,
|
|
onToggleCompact,
|
|
onToggleAchievements,
|
|
onCompactConversation,
|
|
onStartFreshWithContext,
|
|
}: Props = $props();
|
|
|
|
let showMenu = $state(false);
|
|
let showStats = $state(false);
|
|
let showAbout = $state(false);
|
|
let showHelp = $state(false);
|
|
let showKeyboardShortcuts = $state(false);
|
|
let showSessionHistory = $state(false);
|
|
let showTodoPanel = $state(false);
|
|
let showGitPanel = $state(false);
|
|
let showProfile = $state(false);
|
|
let showAgentMonitor = $state(false);
|
|
let showCastPanel = $state(false);
|
|
let showPluginPanel = $state(false);
|
|
let showMcpPanel = $state(false);
|
|
let showProjectContext = $state(false);
|
|
let showPrdPanel = $state(false);
|
|
let showChangelog = $state(false);
|
|
let showTaskLoop = $state(false);
|
|
let showWorkflowPanel = $state(false);
|
|
let showMemoryPanel = $state(false);
|
|
memoryBrowserStore.subscribe((s) => {
|
|
showMemoryPanel = s.isOpen;
|
|
});
|
|
|
|
const progress = $derived($achievementProgress);
|
|
const activeAgentCount = $derived($runningAgentCount);
|
|
|
|
let editorVisible = $state(false);
|
|
editorStore.isEditorVisible.subscribe((value) => {
|
|
editorVisible = value;
|
|
});
|
|
|
|
export function isFileEditorDisabled(status: ConnectionStatus): boolean {
|
|
return status !== "connected";
|
|
}
|
|
|
|
function menuAction(action: () => void): () => void {
|
|
return () => {
|
|
action();
|
|
showMenu = false;
|
|
};
|
|
}
|
|
|
|
function handleInjectContext(content: string): void {
|
|
injectTextStore.set(content);
|
|
}
|
|
|
|
function handleGlobalHelpShortcut(event: KeyboardEvent): void {
|
|
const target = event.target as HTMLElement;
|
|
const isInputFocused = target.tagName === "INPUT" || target.tagName === "TEXTAREA";
|
|
if (isInputFocused) return;
|
|
|
|
if (event.key === "?") {
|
|
event.preventDefault();
|
|
showHelp = !showHelp;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<svelte:window onkeydown={handleGlobalHelpShortcut} />
|
|
|
|
<div class="relative">
|
|
<button
|
|
onclick={() => (showMenu = !showMenu)}
|
|
class="p-1 shrink-0 {showMenu ? 'text-[var(--trans-pink)]' : 'text-gray-500 icon-trans-hover'}"
|
|
title="Menu"
|
|
>
|
|
<Menu class="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
|
|
{#if showMenu}
|
|
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
|
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
<div class="fixed inset-0 z-40" onclick={() => (showMenu = false)}></div>
|
|
<div
|
|
class="fixed top-12 right-4 z-50 max-h-96 overflow-y-auto min-w-[13rem] bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-md shadow-lg py-1"
|
|
>
|
|
<!-- Profile -->
|
|
<button onclick={menuAction(() => (showProfile = true))} class="nav-item">
|
|
<svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
|
|
/>
|
|
</svg>
|
|
<span>Profile</span>
|
|
</button>
|
|
|
|
<!-- Compact Mode -->
|
|
<button onclick={menuAction(onToggleCompact)} class="nav-item">
|
|
<svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"
|
|
/>
|
|
</svg>
|
|
<span>Compact Mode</span>
|
|
</button>
|
|
|
|
<!-- Achievements -->
|
|
<button onclick={menuAction(onToggleAchievements)} class="nav-item">
|
|
<span class="text-base w-5 h-5 flex items-center justify-center shrink-0">🏆</span>
|
|
<span>Achievements</span>
|
|
{#if progress.unlocked > 0}
|
|
<span
|
|
class="ml-auto bg-[var(--accent-primary)] text-white text-xs rounded-full w-4 h-4 flex items-center justify-center text-[10px] shrink-0"
|
|
>
|
|
{progress.unlocked}
|
|
</span>
|
|
{/if}
|
|
</button>
|
|
|
|
<!-- Session History -->
|
|
<button onclick={menuAction(() => (showSessionHistory = true))} class="nav-item">
|
|
<svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
/>
|
|
</svg>
|
|
<span>Session History</span>
|
|
</button>
|
|
|
|
<!-- Memory Manager -->
|
|
<button onclick={menuAction(() => memoryBrowserStore.open())} class="nav-item">
|
|
<svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
|
|
/>
|
|
</svg>
|
|
<span>Memory Manager</span>
|
|
</button>
|
|
|
|
<!-- To-Do List -->
|
|
<button onclick={menuAction(() => (showTodoPanel = true))} class="nav-item">
|
|
<svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"
|
|
/>
|
|
</svg>
|
|
<span>To-Do List</span>
|
|
</button>
|
|
|
|
<!-- Git Panel -->
|
|
<button onclick={menuAction(() => (showGitPanel = true))} class="nav-item">
|
|
<svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
|
|
/>
|
|
</svg>
|
|
<span>Git Panel</span>
|
|
</button>
|
|
|
|
<!-- Plugins -->
|
|
<button onclick={menuAction(() => (showPluginPanel = true))} class="nav-item">
|
|
<svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
|
|
/>
|
|
</svg>
|
|
<span>Plugins</span>
|
|
</button>
|
|
|
|
<!-- MCP Servers -->
|
|
<button onclick={menuAction(() => (showMcpPanel = true))} class="nav-item">
|
|
<svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"
|
|
/>
|
|
</svg>
|
|
<span>MCP Servers</span>
|
|
</button>
|
|
|
|
<!-- Project Context -->
|
|
<button onclick={menuAction(() => (showProjectContext = true))} class="nav-item">
|
|
<svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
|
|
/>
|
|
</svg>
|
|
<span>Project Context</span>
|
|
</button>
|
|
|
|
<!-- PRD Creator -->
|
|
<button onclick={menuAction(() => (showPrdPanel = true))} class="nav-item">
|
|
<ScrollText class="w-5 h-5 shrink-0" />
|
|
<span>PRD Creator</span>
|
|
</button>
|
|
|
|
<!-- Task Loop -->
|
|
<button onclick={menuAction(() => (showTaskLoop = true))} class="nav-item">
|
|
<svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
|
|
/>
|
|
</svg>
|
|
<span>Task Loop</span>
|
|
</button>
|
|
|
|
<!-- Guided Workflow -->
|
|
<button onclick={menuAction(() => (showWorkflowPanel = true))} class="nav-item">
|
|
<svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12h18" />
|
|
</svg>
|
|
<span>Guided Workflow</span>
|
|
</button>
|
|
|
|
<!-- File Editor -->
|
|
<button
|
|
onclick={menuAction(() => editorStore.toggleEditor())}
|
|
disabled={isFileEditorDisabled(connectionStatus)}
|
|
class="nav-item {editorVisible
|
|
? 'text-[var(--trans-pink)]'
|
|
: ''} disabled:opacity-40 disabled:cursor-not-allowed"
|
|
title={isFileEditorDisabled(connectionStatus)
|
|
? "Connect to enable file editor"
|
|
: "File Editor (Ctrl+E)"}
|
|
>
|
|
<svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
|
|
/>
|
|
</svg>
|
|
<span>File Editor</span>
|
|
</button>
|
|
|
|
<!-- Meet the Team -->
|
|
<button onclick={menuAction(() => (showCastPanel = true))} class="nav-item">
|
|
<svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
|
|
/>
|
|
</svg>
|
|
<span>Meet the Team</span>
|
|
</button>
|
|
|
|
<!-- Agent Monitor -->
|
|
<button
|
|
onclick={menuAction(() => (showAgentMonitor = !showAgentMonitor))}
|
|
class="nav-item {showAgentMonitor ? 'text-[var(--trans-pink)]' : ''}"
|
|
>
|
|
<div class="relative shrink-0 w-5 h-5">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"
|
|
/>
|
|
</svg>
|
|
{#if activeAgentCount > 0}
|
|
<span
|
|
class="absolute -top-1 -right-1 bg-blue-500 text-white rounded-full w-3.5 h-3.5 flex items-center justify-center text-[9px] animate-pulse"
|
|
>
|
|
{activeAgentCount}
|
|
</span>
|
|
{/if}
|
|
</div>
|
|
<span>Agent Monitor</span>
|
|
</button>
|
|
|
|
<!-- Usage Stats -->
|
|
<button
|
|
onclick={menuAction(() => (showStats = !showStats))}
|
|
class="nav-item {showStats ? 'text-[var(--trans-pink)]' : ''}"
|
|
>
|
|
<svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zM13 19v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2h2a2 2 0 002-2zM21 19V8a2 2 0 00-2-2h-2a2 2 0 00-2 2v11a2 2 0 002 2h2a2 2 0 002-2z"
|
|
/>
|
|
</svg>
|
|
<span>Usage Stats</span>
|
|
</button>
|
|
|
|
<!-- Debug Console -->
|
|
<button onclick={menuAction(() => debugConsoleStore.toggle())} class="nav-item">
|
|
<svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
|
|
/>
|
|
</svg>
|
|
<span>Debug Console</span>
|
|
</button>
|
|
|
|
<!-- Settings -->
|
|
<button onclick={menuAction(() => configStore.openSidebar())} class="nav-item">
|
|
<svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
|
|
/>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
|
|
/>
|
|
</svg>
|
|
<span>Settings</span>
|
|
</button>
|
|
|
|
<!-- Support Us -->
|
|
<button onclick={menuAction(() => openUrl(DONATE_URL))} class="nav-item">
|
|
<svg class="w-5 h-5 shrink-0" fill="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
|
|
/>
|
|
</svg>
|
|
<span>Support Us</span>
|
|
</button>
|
|
|
|
<!-- Changelog -->
|
|
<button onclick={menuAction(() => (showChangelog = true))} class="nav-item">
|
|
<svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2M9 12h6M9 16h4"
|
|
/>
|
|
</svg>
|
|
<span>Changelog</span>
|
|
</button>
|
|
|
|
<!-- About -->
|
|
<button onclick={menuAction(() => (showAbout = true))} class="nav-item">
|
|
<svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
/>
|
|
</svg>
|
|
<span>About</span>
|
|
</button>
|
|
|
|
<!-- Keyboard Shortcuts -->
|
|
<button onclick={menuAction(() => (showKeyboardShortcuts = true))} class="nav-item">
|
|
<svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M12 3C10.22 3 8.47 3.23 6.86 3.68A2 2 0 005 5.57V18.43a2 2 0 001.86 1.89C8.47 20.77 10.22 21 12 21s3.53-.23 5.14-.68A2 2 0 0019 18.43V5.57a2 2 0 00-1.86-1.89C15.53 3.23 13.78 3 12 3z"
|
|
/>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M8 7h.01M12 7h.01M16 7h.01M8 11h.01M12 11h.01M16 11h.01M8 15h8"
|
|
/>
|
|
</svg>
|
|
<span>Keyboard Shortcuts</span>
|
|
</button>
|
|
|
|
<!-- Help -->
|
|
<button onclick={menuAction(() => (showHelp = true))} class="nav-item">
|
|
<svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
/>
|
|
</svg>
|
|
<span>Help</span>
|
|
</button>
|
|
|
|
<!-- Discord -->
|
|
<button onclick={menuAction(() => openUrl(DISCORD_URL))} class="nav-item">
|
|
<svg class="w-5 h-5 shrink-0" viewBox="0 0 24 24" fill="currentColor">
|
|
<path
|
|
d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"
|
|
/>
|
|
</svg>
|
|
<span>Discord</span>
|
|
</button>
|
|
</div>
|
|
{/if}
|
|
|
|
{#if showStats}
|
|
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
|
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
<div class="fixed inset-0 z-40" onclick={() => (showStats = false)}></div>
|
|
<div class="fixed top-14 right-4 z-50 max-h-[calc(100vh-4rem)] overflow-y-auto">
|
|
<StatsDisplay
|
|
onRequestSummary={onCompactConversation}
|
|
{onStartFreshWithContext}
|
|
{isSummarising}
|
|
/>
|
|
</div>
|
|
{/if}
|
|
|
|
{#if showAbout}
|
|
<AboutPanel onClose={() => (showAbout = false)} />
|
|
{/if}
|
|
|
|
{#if showHelp}
|
|
<HelpPanel onClose={() => (showHelp = false)} />
|
|
{/if}
|
|
|
|
{#if showKeyboardShortcuts}
|
|
<KeyboardShortcutsModal onClose={() => (showKeyboardShortcuts = false)} />
|
|
{/if}
|
|
|
|
{#if showSessionHistory}
|
|
<SessionHistoryPanel onClose={() => (showSessionHistory = false)} />
|
|
{/if}
|
|
|
|
{#if showTodoPanel}
|
|
<TodoPanel onClose={() => (showTodoPanel = false)} />
|
|
{/if}
|
|
|
|
{#if showGitPanel}
|
|
<GitPanel isOpen={showGitPanel} onClose={() => (showGitPanel = false)} />
|
|
{/if}
|
|
|
|
{#if showProfile}
|
|
<ProfilePanel onClose={() => (showProfile = false)} />
|
|
{/if}
|
|
|
|
{#if showAgentMonitor}
|
|
<AgentMonitorPanel isOpen={showAgentMonitor} onClose={() => (showAgentMonitor = false)} />
|
|
{/if}
|
|
|
|
{#if showCastPanel}
|
|
<CastPanel onClose={() => (showCastPanel = false)} />
|
|
{/if}
|
|
|
|
{#if showPluginPanel}
|
|
<PluginManagementPanel onClose={() => (showPluginPanel = false)} />
|
|
{/if}
|
|
|
|
{#if showMcpPanel}
|
|
<McpManagementPanel onClose={() => (showMcpPanel = false)} />
|
|
{/if}
|
|
|
|
{#if showProjectContext}
|
|
<ProjectContextPanel
|
|
onClose={() => (showProjectContext = false)}
|
|
onInject={handleInjectContext}
|
|
workingDirectory={workingDirectory || selectedDirectory}
|
|
/>
|
|
{/if}
|
|
|
|
{#if showPrdPanel}
|
|
<PrdPanel
|
|
onClose={() => (showPrdPanel = false)}
|
|
onBackToWorkflow={() => {
|
|
showPrdPanel = false;
|
|
showWorkflowPanel = true;
|
|
}}
|
|
workingDirectory={workingDirectory || selectedDirectory}
|
|
/>
|
|
{/if}
|
|
|
|
{#if showChangelog}
|
|
<ChangelogPanel onClose={() => (showChangelog = false)} />
|
|
{/if}
|
|
|
|
{#if showTaskLoop}
|
|
<TaskLoopPanel
|
|
onClose={() => (showTaskLoop = false)}
|
|
onBackToWorkflow={() => {
|
|
showTaskLoop = false;
|
|
showWorkflowPanel = true;
|
|
}}
|
|
/>
|
|
{/if}
|
|
|
|
{#if showMemoryPanel}
|
|
<MemoryBrowserPanel isOpen={showMemoryPanel} onClose={() => memoryBrowserStore.close()} />
|
|
{/if}
|
|
|
|
{#if showWorkflowPanel}
|
|
<WorkflowPanel
|
|
onClose={() => (showWorkflowPanel = false)}
|
|
onOpenPrdPanel={() => {
|
|
showWorkflowPanel = false;
|
|
showPrdPanel = true;
|
|
}}
|
|
onOpenTaskLoop={() => {
|
|
showWorkflowPanel = false;
|
|
showTaskLoop = true;
|
|
}}
|
|
workingDirectory={workingDirectory || selectedDirectory}
|
|
/>
|
|
{/if}
|
|
|
|
<style>
|
|
.nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 0.5rem 1rem;
|
|
font-size: 0.875rem;
|
|
color: rgb(209, 213, 219);
|
|
transition:
|
|
background-color 0.15s,
|
|
color 0.15s;
|
|
width: 100%;
|
|
text-align: left;
|
|
}
|
|
|
|
.nav-item:hover:not(:disabled) {
|
|
background-color: rgba(255, 255, 255, 0.07);
|
|
color: var(--trans-pink);
|
|
}
|
|
</style>
|