@sugar-crash-studios/vibe-forge 0.4.0

package/bin/dashboard/frontend/src/lib/components/AgentCard.svelte

@@ -0,0 +1,60 @@
+<script>
+    import { getAgentConfig } from '../stores/agents.js';
+    import { speak } from '../stores/voice.js';
+    import { capitalize } from '../utils/formatters.js';
+
+    export let agent;
+
+    // API returns agents with field 'agent' (not 'name' or 'id')
+    $: config = getAgentConfig(agent.agent || agent.name || agent.id);
+    $: status = (agent.status || 'offline').toLowerCase();
+    $: statusText = capitalize(status);
+
+    const GREETINGS = {
+        'planning-hub': "Planning Hub online. The forge council is assembled — what needs building today?",
+        'oracle':        "Oracle here. Before we build anything, let's make sure we're solving the right problem.",
+        'architect':     "Architect online. Systems designed, patterns ready — what are we building?",
+        'aegis':         "Aegis is here. What needs securing?",
+        'pixel':         "Pixel reporting in. Let's make something people actually enjoy using.",
+        'ember':         "Ember online. Infrastructure's ready — what needs shipping?",
+        'anvil':         "Anvil here. Give me a component and I'll build it.",
+        'furnace':       "Furnace is online. Backend's fired up — what are we building?",
+        'crucible':      "Crucible here. I'll find the bugs before your users do. What are we testing?",
+        'temper':        "Temper here. Send the PR when it's ready — I'll review it.",
+        'scribe':        "Scribe online. What needs documenting?",
+        'herald':        "Herald here. Ready to cut a release — what are we shipping?",
+        'forge-master':  "Forge Master online. All systems go — what's on the anvil?",
+        'loki':          "Loki here. So... are you sure you're solving the right problem?",
+    };
+
+    function handleClick() {
+        const agentKey = (agent.agent || agent.name || agent.id || '').toLowerCase();
+        const greeting = GREETINGS[agentKey] || `${agent.displayName || agentKey} online.`;
+        speak(greeting, agentKey, true);
+    }
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<div class="card agent-card" tabindex="0"
+    onclick={handleClick}
+    onkeydown={e => (e.key === 'Enter' || e.key === ' ') && handleClick()}
+    role="button"
+    aria-label="Hear {agent.displayName || agent.agent} greeting"
+>
+    <div class="agent-avatar {config?.color || ''}">{agent.icon || config?.icon || '?'}</div>
+    <div class="agent-info">
+        <div class="agent-name">{agent.displayName || config?.name || agent.name || agent.id || 'Unknown'}</div>
+        <div class="agent-status">
+            <span class="status-indicator {status}"></span>
+            <span>{statusText}</span>
+        </div>
+        {#if agent.task}
+            <div class="agent-task">{agent.task}</div>
+        {/if}
+        {#if agent.progress !== undefined}
+            <div class="agent-progress">
+                <div class="agent-progress-bar" style="width: {agent.progress}%"></div>
+            </div>
+        {/if}
+    </div>
+</div>

package/bin/dashboard/frontend/src/lib/components/AgentsPanel.svelte

@@ -0,0 +1,57 @@
+<script>
+    import { agents, agentsLoading, agentsError } from '../stores/agents.js';
+    import { refreshAgents } from '../stores/websocket.js';
+    import AgentCard from './AgentCard.svelte';
+
+    let refreshing = false;
+
+    async function handleRefresh() {
+        refreshing = true;
+        await refreshAgents();
+        refreshing = false;
+    }
+</script>
+
+<section id="agents-panel" class="panel agents-panel" aria-labelledby="agents-heading" tabindex="-1">
+    <div class="panel-header">
+        <h2 id="agents-heading" class="panel-title">AGENTS</h2>
+        <button
+            class="panel-refresh"
+            class:loading={refreshing}
+            onclick={handleRefresh}
+            aria-label="Refresh agents"
+        >
+            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M23 4v6h-6M1 20v-6h6"/>
+                <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>
+            </svg>
+        </button>
+    </div>
+
+    {#if $agentsLoading}
+        <div class="loading-state">
+            <div class="skeleton-card"></div>
+            <div class="skeleton-card"></div>
+            <div class="skeleton-card"></div>
+        </div>
+    {:else if $agentsError}
+        <div class="error-state">
+            <div class="error-icon" aria-hidden="true">!</div>
+            <p class="error-title">Failed to load agents</p>
+            <p class="error-message">{$agentsError}</p>
+            <button class="btn btn-secondary" onclick={handleRefresh}>Retry</button>
+        </div>
+    {:else if $agents.length === 0}
+        <div class="empty-state">
+            <div class="empty-icon" aria-hidden="true">&#x263D;</div>
+            <p class="empty-title">All agents idle</p>
+            <p class="empty-subtitle">Ready when you are</p>
+        </div>
+    {:else}
+        <div id="agents-list" class="panel-content agents-list" aria-busy="false">
+            {#each $agents as agent (agent.id || agent.name)}
+                <AgentCard {agent} />
+            {/each}
+        </div>
+    {/if}
+</section>

package/bin/dashboard/frontend/src/lib/components/DispatchModal.svelte

@@ -0,0 +1,180 @@
+<script>
+    import { pendingDispatch, dispatchLoading, dispatchError, closeDispatchModal, generateTaskId, removeIssue, getCategoryConfig } from '../stores/issues.js';
+    import { getAgentConfig } from '../stores/agents.js';
+    import { showToast } from '../stores/toast.js';
+    import { refreshTasks } from '../stores/websocket.js';
+    import { dispatchTask } from '../utils/api.js';
+    import { capitalize } from '../utils/formatters.js';
+    import { onMount, onDestroy } from 'svelte';
+
+    let modalElement;
+    let previousFocus = null;
+
+    $: issue = $pendingDispatch;
+    $: agent = issue ? getAgentConfig(issue.agent) : null;
+    $: category = issue ? getCategoryConfig(issue.category) : null;
+    $: taskId = issue ? generateTaskId() : '';
+    $: taskTitle = issue ? `Fix: ${issue.title}` : '';
+
+    async function handleConfirm() {
+        if (!issue) return;
+
+        dispatchLoading.set(true);
+        dispatchError.set(null);
+
+        try {
+            const result = await dispatchTask(issue);
+
+            // Save references before closing modal
+            const dispatchedIssueId = issue.id;
+            const dispatchedAgent = issue.agent;
+
+            // Success - close modal
+            closeDispatchModal();
+
+            // Remove issue from list
+            removeIssue(dispatchedIssueId);
+
+            // Show success toast
+            showToast({
+                type: 'success',
+                title: 'Task dispatched!',
+                message: `${result.taskId || 'Task'} assigned to ${getAgentConfig(dispatchedAgent)?.name || 'agent'}`,
+            });
+
+            // Refresh tasks
+            refreshTasks();
+        } catch (error) {
+            dispatchLoading.set(false);
+            dispatchError.set('Failed to dispatch task. Please try again.');
+            console.error('Dispatch error:', error);
+        }
+    }
+
+    function handleBackdropClick() {
+        closeDispatchModal();
+    }
+
+    function handleKeydown(event) {
+        if (event.key === 'Escape') {
+            closeDispatchModal();
+        }
+
+        // Focus trap
+        if (event.key === 'Tab' && modalElement) {
+            const focusableElements = modalElement.querySelectorAll(
+                'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+            );
+
+            if (focusableElements.length === 0) {
+                event.preventDefault();
+                return;
+            }
+
+            const firstFocusable = focusableElements[0];
+            const lastFocusable = focusableElements[focusableElements.length - 1];
+
+            if (event.shiftKey) {
+                if (document.activeElement === firstFocusable) {
+                    event.preventDefault();
+                    lastFocusable.focus();
+                }
+            } else {
+                if (document.activeElement === lastFocusable) {
+                    event.preventDefault();
+                    firstFocusable.focus();
+                }
+            }
+        }
+    }
+
+    // Focus management
+    $: if (issue && modalElement) {
+        previousFocus = document.activeElement;
+        setTimeout(() => {
+            const cancelBtn = modalElement?.querySelector('.btn-secondary');
+            cancelBtn?.focus();
+        }, 100);
+    }
+
+    onDestroy(() => {
+        if (previousFocus) {
+            previousFocus.focus();
+        }
+    });
+</script>
+
+{#if issue}
+    <!-- svelte-ignore a11y_interactive_supports_focus -->
+    <div
+        class="modal"
+        role="dialog"
+        aria-labelledby="dispatch-modal-title"
+        aria-modal="true"
+        bind:this={modalElement}
+        onkeydown={handleKeydown}
+    >
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div class="modal-backdrop" onclick={handleBackdropClick}></div>
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3 id="dispatch-modal-title" class="modal-title">
+                    Dispatch Task to <span>{agent?.name || 'Agent'}</span>
+                </h3>
+                <button class="modal-close" onclick={closeDispatchModal} aria-label="Close modal">&times;</button>
+            </div>
+            <div class="modal-body">
+                <div class="dispatch-info">
+                    <div class="info-row">
+                        <span class="info-label">Issue:</span>
+                        <span class="info-value">{issue.title}</span>
+                    </div>
+                    <div class="info-row">
+                        <span class="info-label">Target:</span>
+                        <span class="info-value">{issue.target}</span>
+                    </div>
+                    <div class="info-row">
+                        <span class="info-label">Reason:</span>
+                        <span class="info-value">{issue.details}</span>
+                    </div>
+                </div>
+                <div class="dispatch-preview">
+                    <p class="preview-label">This will create a new task:</p>
+                    <div class="task-preview">
+                        <div class="preview-id">{taskId}</div>
+                        <div class="preview-title">{taskTitle}</div>
+                        <div class="preview-meta">
+                            <span>Assigned to: <strong>{agent?.name || 'Agent'}</strong></span>
+                            <span>Priority: <strong>{capitalize(category?.priority || 'medium')}</strong></span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button class="btn btn-secondary" onclick={closeDispatchModal}>Cancel</button>
+                <button
+                    class="btn btn-primary"
+                    class:loading={$dispatchLoading}
+                    disabled={$dispatchLoading}
+                    onclick={handleConfirm}
+                >
+                    <span class="btn-text" class:hidden={$dispatchLoading}>Confirm Dispatch</span>
+                    <span class="btn-spinner" class:hidden={!$dispatchLoading}></span>
+                </button>
+            </div>
+            {#if $dispatchError}
+                <div class="modal-error">
+                    <span class="error-icon">!</span>
+                    <span class="error-text">{$dispatchError}</span>
+                </div>
+            {/if}
+        </div>
+    </div>
+{/if}
+
+<style>
+    .hidden {
+        visibility: hidden;
+    }
+</style>

package/bin/dashboard/frontend/src/lib/components/Footer.svelte

@@ -0,0 +1,33 @@
+<script>
+    import { wsConnected, lastUpdated, showConnectionBanner, reconnect } from '../stores/websocket.js';
+    import { openKeyboardHelp } from '../stores/ui.js';
+    import { formatRelativeTime } from '../utils/formatters.js';
+
+    $: connectionText = $wsConnected ? 'Connected' : 'Disconnected';
+    $: lastUpdatedText = $lastUpdated ? formatRelativeTime($lastUpdated) : '--';
+</script>
+
+<!-- Connection Lost Banner -->
+{#if $showConnectionBanner}
+    <div class="connection-banner" role="alert" aria-live="assertive">
+        <span class="banner-icon">!</span>
+        <span class="banner-text">Connection Lost - Dashboard cannot reach the forge server. Check if the daemon is running.</span>
+        <button class="banner-retry" onclick={reconnect}>Retry</button>
+    </div>
+{/if}
+
+<!-- svelte-ignore a11y_no_redundant_roles -->
+<footer class="footer" role="contentinfo">
+    <div class="footer-left">
+        <span class="connection-status">
+            <span class="status-dot" class:connected={$wsConnected} class:disconnected={!$wsConnected} aria-hidden="true"></span>
+            <span>{connectionText}</span>
+        </span>
+        <span class="separator">|</span>
+        <span>Last updated: {lastUpdatedText}</span>
+    </div>
+    <div class="footer-right">
+        <span>Vibe Forge v0.1.0</span>
+        <button class="keyboard-help-btn" onclick={openKeyboardHelp} aria-label="Keyboard shortcuts (?)">?</button>
+    </div>
+</footer>

package/bin/dashboard/frontend/src/lib/components/Header.svelte

@@ -0,0 +1,84 @@
+<script>
+    import { onMount } from 'svelte';
+    import { get } from 'svelte/store';
+    import { toggleTheme } from '../stores/theme.js';
+    import { refreshAll } from '../stores/websocket.js';
+    import { voiceEnabled, voiceSpeaking, toggleVoice, speak } from '../stores/voice.js';
+
+    let _greetingPlayed = false;
+
+    function playGreetingIfReady() {
+        if (get(voiceEnabled) && !_greetingPlayed) {
+            _greetingPlayed = true;
+            speak('Forge team online. Ready.', 'forge-master');
+        }
+    }
+
+    // If voice was pre-enabled from config, play greeting on first user gesture
+    onMount(() => {
+        const handler = () => {
+            playGreetingIfReady();
+            document.removeEventListener('click', handler, { capture: true });
+        };
+        document.addEventListener('click', handler, { capture: true });
+        return () => document.removeEventListener('click', handler, { capture: true });
+    });
+
+    function handleVoiceToggle() {
+        toggleVoice();
+        // Play greeting when voice is turned ON (covers the manual-enable case)
+        if ($voiceEnabled && !_greetingPlayed) {
+            _greetingPlayed = true;
+            setTimeout(() => speak('Forge team online. Ready.', 'forge-master'), 50);
+        }
+    }
+</script>
+
+<!-- svelte-ignore a11y_no_redundant_roles -->
+<header class="header" role="banner">
+    <div class="header-left">
+        <button class="logo-btn" onclick={refreshAll} aria-label="Refresh dashboard">
+            <span class="logo-icon" aria-hidden="true">&#x2692;</span>
+            <span class="logo-text">VIBE FORGE DASHBOARD</span>
+        </button>
+    </div>
+    <div class="header-right">
+        <button
+            id="voice-toggle"
+            class="header-btn"
+            class:active={$voiceEnabled}
+            class:speaking={$voiceSpeaking}
+            onclick={handleVoiceToggle}
+            aria-label={$voiceEnabled ? 'Disable agent voices' : 'Enable agent voices'}
+            title={$voiceEnabled ? 'Agent voices on (click to mute)' : 'Enable agent voices'}
+        >
+            {#if $voiceEnabled}
+                <!-- Speaker with waves (voice on) -->
+                <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
+                    <path d="M15.54 8.46a5 5 0 0 1 0 7.07"/>
+                    <path d="M19.07 4.93a10 10 0 0 1 0 14.14"/>
+                </svg>
+            {:else}
+                <!-- Speaker muted -->
+                <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
+                    <line x1="23" y1="9" x2="17" y2="15"/>
+                    <line x1="17" y1="9" x2="23" y2="15"/>
+                </svg>
+            {/if}
+        </button>
+        <button id="theme-toggle" class="header-btn" onclick={toggleTheme} aria-label="Toggle dark/light mode" title="Toggle theme (t)">
+            <svg class="icon sun-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <circle cx="12" cy="12" r="5"/>
+                <line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/>
+                <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
+                <line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/>
+                <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
+            </svg>
+            <svg class="icon moon-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
+            </svg>
+        </button>
+    </div>
+</header>

package/bin/dashboard/frontend/src/lib/components/IssueCard.svelte

@@ -0,0 +1,33 @@
+<script>
+    import { getCategoryConfig, openDispatchModal } from '../stores/issues.js';
+    import { getAgentConfig } from '../stores/agents.js';
+
+    export let issue;
+
+    $: category = getCategoryConfig(issue.category);
+    $: agent = getAgentConfig(issue.agent);
+
+    function handleDispatch(event) {
+        event.stopPropagation();
+        openDispatchModal(issue);
+    }
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<div class="card issue-card" data-issue-id={issue.id} tabindex="0">
+    <div class="issue-category {issue.category}">{category.icon}</div>
+    <div class="issue-content">
+        <div class="issue-header">
+            <span class="issue-badge {issue.category}">{category.label}</span>
+            <span class="issue-title">{issue.title}</span>
+        </div>
+        <div class="issue-details">{issue.details}</div>
+        <div class="issue-meta">{issue.meta}</div>
+    </div>
+    <div class="issue-dispatch">
+        <button class="btn btn-dispatch" onclick={handleDispatch}>
+            <span class="btn-text">Dispatch {agent ? agent.short : 'Agent'}</span>
+            <span class="btn-arrow">&raquo;</span>
+        </button>
+    </div>
+</div>

package/bin/dashboard/frontend/src/lib/components/IssuesPanel.svelte

@@ -0,0 +1,73 @@
+<script>
+    import { issues, issuesLoading, issuesError, issuesCollapsed, toggleIssuesCollapse } from '../stores/issues.js';
+    import { refreshIssues } from '../stores/websocket.js';
+    import IssueCard from './IssueCard.svelte';
+
+    let refreshing = false;
+
+    async function handleRefresh() {
+        refreshing = true;
+        await refreshIssues();
+        refreshing = false;
+    }
+</script>
+
+<section
+    id="issues-panel"
+    class="panel issues-panel"
+    class:collapsed={$issuesCollapsed}
+    aria-labelledby="issues-heading"
+    tabindex="-1"
+>
+    <div class="panel-header">
+        <h2 id="issues-heading" class="panel-title">ISSUES <span class="panel-subtitle">(Actionable)</span></h2>
+        <div class="panel-actions">
+            <button
+                class="panel-refresh"
+                class:loading={refreshing}
+                onclick={handleRefresh}
+                aria-label="Refresh issues"
+            >
+                <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M23 4v6h-6M1 20v-6h6"/>
+                    <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>
+                </svg>
+            </button>
+            <button
+                class="panel-collapse"
+                onclick={toggleIssuesCollapse}
+                aria-label="Collapse issues panel"
+            >
+                <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <polyline points="18 15 12 9 6 15"/>
+                </svg>
+            </button>
+        </div>
+    </div>
+
+    {#if $issuesLoading}
+        <div class="loading-state">
+            <div class="skeleton-issue"></div>
+            <div class="skeleton-issue"></div>
+        </div>
+    {:else if $issuesError}
+        <div class="error-state">
+            <div class="error-icon" aria-hidden="true">!</div>
+            <p class="error-title">Failed to load issues</p>
+            <p class="error-message">{$issuesError}</p>
+            <button class="btn btn-secondary" onclick={handleRefresh}>Retry</button>
+        </div>
+    {:else if $issues.length === 0}
+        <div class="empty-state celebration">
+            <div class="empty-icon" aria-hidden="true">&#x1F389;</div>
+            <p class="empty-title">Everything looks great!</p>
+            <p class="empty-subtitle">No stale docs, failing tests, or security issues</p>
+        </div>
+    {:else}
+        <div id="issues-list" class="panel-content issues-list" aria-busy="false">
+            {#each $issues as issue (issue.id)}
+                <IssueCard {issue} />
+            {/each}
+        </div>
+    {/if}
+</section>

package/bin/dashboard/frontend/src/lib/components/KeyboardShortcutsModal.svelte

@@ -0,0 +1,108 @@
+<script>
+    import { showKeyboardHelp, closeKeyboardHelp } from '../stores/ui.js';
+    import { onDestroy } from 'svelte';
+
+    let modalElement;
+    let previousFocus = null;
+
+    function handleBackdropClick() {
+        closeKeyboardHelp();
+    }
+
+    function handleKeydown(event) {
+        if (event.key === 'Escape') {
+            closeKeyboardHelp();
+        }
+
+        // Focus trap
+        if (event.key === 'Tab' && modalElement) {
+            const focusableElements = modalElement.querySelectorAll(
+                'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+            );
+
+            if (focusableElements.length === 0) {
+                event.preventDefault();
+                return;
+            }
+
+            const firstFocusable = focusableElements[0];
+            const lastFocusable = focusableElements[focusableElements.length - 1];
+
+            if (event.shiftKey) {
+                if (document.activeElement === firstFocusable) {
+                    event.preventDefault();
+                    lastFocusable.focus();
+                }
+            } else {
+                if (document.activeElement === lastFocusable) {
+                    event.preventDefault();
+                    firstFocusable.focus();
+                }
+            }
+        }
+    }
+
+    // Focus management
+    $: if ($showKeyboardHelp && modalElement) {
+        previousFocus = document.activeElement;
+        setTimeout(() => {
+            const closeBtn = modalElement?.querySelector('.modal-close');
+            closeBtn?.focus();
+        }, 100);
+    }
+
+    onDestroy(() => {
+        if (previousFocus) {
+            previousFocus.focus();
+        }
+    });
+</script>
+
+{#if $showKeyboardHelp}
+    <!-- svelte-ignore a11y_interactive_supports_focus -->
+    <div
+        class="modal"
+        role="dialog"
+        aria-labelledby="keyboard-modal-title"
+        aria-modal="true"
+        bind:this={modalElement}
+        onkeydown={handleKeydown}
+    >
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div class="modal-backdrop" onclick={handleBackdropClick}></div>
+        <div class="modal-content keyboard-help">
+            <div class="modal-header">
+                <h3 id="keyboard-modal-title" class="modal-title">Keyboard Shortcuts</h3>
+                <button class="modal-close" onclick={closeKeyboardHelp} aria-label="Close modal">&times;</button>
+            </div>
+            <div class="modal-body">
+                <div class="shortcut-section">
+                    <h4>Navigation</h4>
+                    <div class="shortcut-list">
+                        <div class="shortcut"><kbd>1</kbd> <kbd>2</kbd> <kbd>3</kbd> <kbd>4</kbd> <span>Focus panels (Tasks, Agents, Notifications, Issues)</span></div>
+                        <div class="shortcut"><kbd>j</kbd> / <kbd>k</kbd> <span>Move down / up in list</span></div>
+                        <div class="shortcut"><kbd>Enter</kbd> <span>Expand / select item</span></div>
+                        <div class="shortcut"><kbd>Escape</kbd> <span>Close / deselect</span></div>
+                    </div>
+                </div>
+                <div class="shortcut-section">
+                    <h4>Actions</h4>
+                    <div class="shortcut-list">
+                        <div class="shortcut"><kbd>d</kbd> <span>Dispatch (on issue)</span></div>
+                        <div class="shortcut"><kbd>r</kbd> <span>Refresh current panel</span></div>
+                        <div class="shortcut"><kbd>t</kbd> <span>Toggle theme</span></div>
+                    </div>
+                </div>
+                <div class="shortcut-section">
+                    <h4>General</h4>
+                    <div class="shortcut-list">
+                        <div class="shortcut"><kbd>?</kbd> <span>Show this help</span></div>
+                        <div class="shortcut"><kbd>Tab</kbd> <span>Next element</span></div>
+                        <div class="shortcut"><kbd>Shift</kbd>+<kbd>Tab</kbd> <span>Previous element</span></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+{/if}