plugins/_commands/webui/main.html

<html>
<head>
    <title>Commands</title>
    <script type="module">
        import { store } from "/plugins/_commands/webui/commands-store.js";
    </script>
</head>
<body>
    <div x-data>
        <template x-if="$store.commandsManager">
            <div class="commands-manager" x-create="$store.commandsManager.onOpen()" x-destroy="$store.commandsManager.cleanup()">
                <div class="commands-toolbar">
                    <div class="commands-toolbar-copy">
                        <div class="commands-title">Slash Commands</div>
                        <div class="commands-subtitle">
                            YAML-configured commands for the inline chat composer.
                        </div>
                    </div>

                    <div class="commands-toolbar-controls">
                        <label class="commands-select">
                            <span>Project</span>
                            <select x-model="$store.commandsManager.projectName" @change="$store.commandsManager.onScopeChanged()">
                                <option value="">Global</option>
                                <template x-for="project in $store.commandsManager.projects" :key="project.key">
                                    <option :value="project.key" x-text="project.label"></option>
                                </template>
                            </select>
                        </label>

                        <div class="commands-toolbar-actions">
                            <button type="button" class="button secondary" @click="$store.commandsManager.refresh()">
                                <x-icon name="refresh"></x-icon>
                                <span>Refresh</span>
                            </button>
                            <button type="button" class="button secondary" @click="$store.commandsManager.browseScopeFolder()">
                                <x-icon name="folder_open"></x-icon>
                                <span>Browse Scope Folder</span>
                            </button>
                            <button type="button" class="button primary" @click="$store.commandsManager.openCreateCommand()">
                                <x-icon name="add"></x-icon>
                                <span>Create Command</span>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="commands-loading" x-show="$store.commandsManager.loading">
                    <x-icon class="spinning" name="progress_activity"></x-icon>
                    <span>Loading commands...</span>
                </div>

                <div class="commands-list" x-show="!$store.commandsManager.loading">
                    <div class="commands-section-heading">
                        <div class="commands-section-title" x-text="`${$store.commandsManager.selectedScopeLabel} commands`"></div>
                        <div class="commands-section-copy">Editable commands saved in the selected scope.</div>
                    </div>

                    <template x-if="$store.commandsManager.hasCommands">
                        <div class="commands-grid">
                            <template x-for="command in $store.commandsManager.commands" :key="command.path">
                                <article class="commands-card">
                                    <div class="commands-card-header">
                                        <div class="commands-card-copy">
                                            <div class="commands-card-title">
                                                <span class="commands-slash">/</span><span x-text="command.name"></span>
                                            </div>
                                            <div class="commands-card-description" x-text="command.description"></div>
                                        </div>

                                        <div class="commands-card-actions">
                                            <button type="button" class="button icon" title="Edit command" @click="$store.commandsManager.openEditCommand(command)">
                                                <x-icon name="edit"></x-icon>
                                            </button>
                                            <button type="button" class="button icon" title="Duplicate command" @click="$store.commandsManager.duplicateCommand(command)">
                                                <x-icon name="content_copy"></x-icon>
                                            </button>
                                            <button type="button" class="button icon danger" title="Delete command" @click.stop="$confirmClick($event, () => $store.commandsManager.deleteCommand(command))">
                                                <x-icon name="delete"></x-icon>
                                            </button>
                                        </div>
                                    </div>

                                    <div class="commands-card-path" x-text="command.path"></div>
                                </article>
                            </template>
                        </div>
                    </template>

                    <template x-if="!$store.commandsManager.hasCommands">
                        <div class="commands-empty-state">
                            <div class="commands-empty-title">No commands in this scope yet.</div>
                            <div class="commands-empty-copy">
                                Create YAML-configured slash commands here and they will appear from <code>/</code> in chat.
                            </div>
                            <button type="button" class="button primary" @click="$store.commandsManager.openCreateCommand()">
                                <x-icon name="add"></x-icon>
                                <span>Create Slash Command</span>
                            </button>
                        </div>
                    </template>

                    <template x-if="$store.commandsManager.builtinCommands.length">
                        <section class="commands-section">
                            <div class="commands-section-heading">
                                <div class="commands-section-title">Built-in commands</div>
                                <div class="commands-section-copy">
                                    Editing creates an override in <span x-text="$store.commandsManager.selectedScopeLabel"></span>; core files stay unchanged.
                                </div>
                            </div>

                            <div class="commands-grid">
                                <template x-for="command in $store.commandsManager.builtinCommands" :key="command.path">
                                    <article class="commands-card">
                                        <div class="commands-card-header">
                                            <div class="commands-card-copy">
                                                <div class="commands-card-title">
                                                    <span class="commands-slash">/</span><span x-text="command.name"></span>
                                                </div>
                                                <div class="commands-card-description" x-text="command.description"></div>
                                            </div>

                                            <button type="button"
                                                    class="button icon"
                                                    :title="$store.commandsManager.scopedOverride(command) ? 'Edit override' : 'Create editable override'"
                                                    :aria-label="$store.commandsManager.scopedOverride(command) ? `Edit /${command.name} override` : `Create editable /${command.name} override`"
                                                    @click="$store.commandsManager.editBuiltinCommand(command)">
                                                <x-icon name="edit"></x-icon>
                                            </button>
                                        </div>

                                    </article>
                                </template>
                            </div>
                        </section>
                    </template>
                </div>
            </div>
        </template>
    </div>

    <style>
        .commands-manager {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            padding: 1rem;
        }

        .commands-toolbar {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            padding: 1rem;
            border: 1px solid var(--color-border);
            border-radius: 12px;
            background: color-mix(in srgb, var(--color-panel) 88%, transparent);
        }

        .commands-toolbar-copy {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .commands-title {
            font-size: 1.1rem;
            font-weight: 600;
        }

        .commands-subtitle {
            color: var(--color-text-secondary);
            font-size: 0.92rem;
        }

        .commands-toolbar-controls {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            align-items: end;
        }

        .commands-select {
            display: flex;
            flex-direction: column;
            gap: 0.35rem;
            min-width: 14rem;
            flex: 1 1 14rem;
        }

        .commands-select span {
            color: var(--color-text-secondary);
            font-size: 0.82rem;
            font-weight: 600;
        }

        .commands-toolbar-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-left: auto;
        }

        .commands-loading {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.9rem 1rem;
            border-radius: 10px;
        }

        .commands-loading {
            color: var(--color-text-secondary);
            border: 1px dashed var(--color-border);
        }

        .commands-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
            gap: 0.9rem;
        }

        .commands-section {
            margin-top: 1.25rem;
        }

        .commands-section-heading {
            margin-bottom: 0.75rem;
        }

        .commands-section-title {
            font-size: 1rem;
            font-weight: 600;
        }

        .commands-section-copy {
            margin-top: 0.2rem;
            color: var(--color-text-secondary);
            font-size: 0.86rem;
        }

        .commands-card {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            padding: 1rem;
            border: 1px solid var(--color-border);
            border-radius: 12px;
            background: color-mix(in srgb, var(--color-panel) 90%, transparent);
        }

        .commands-card-header {
            display: flex;
            gap: 0.75rem;
            justify-content: space-between;
            align-items: flex-start;
        }

        .commands-card-copy {
            min-width: 0;
        }

        .commands-card-title {
            font-size: 1rem;
            font-weight: 600;
            word-break: break-word;
        }

        .commands-slash {
            color: var(--color-highlight);
        }

        .commands-card-description {
            margin-top: 0.25rem;
            color: var(--color-text-secondary);
            font-size: 0.82rem;
            line-height: 1.35;
        }

        .commands-card-actions {
            display: inline-flex;
            gap: 0.35rem;
            flex-shrink: 0;
        }

        .commands-card-path {
            color: var(--color-text-secondary);
            font-family: "Roboto Mono", monospace;
            font-size: 0.78rem;
            word-break: break-all;
        }

        .commands-empty-state {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 0.75rem;
            padding: 1.4rem;
            border: 1px dashed var(--color-border);
            border-radius: 12px;
            background: color-mix(in srgb, var(--color-background) 84%, var(--color-panel));
        }

        .commands-empty-title {
            font-size: 1rem;
            font-weight: 600;
        }

        .commands-empty-copy {
            color: var(--color-text-secondary);
            max-width: 42rem;
        }

        .button.primary,
        .button.secondary,
        .button.icon {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
        }

        .button.icon {
            padding: 0.45rem;
            min-width: 2.25rem;
            justify-content: center;
        }

        .button.icon.danger {
            color: var(--color-accent);
        }

        .spinning {
            animation: commands-spin 1s linear infinite;
        }

        @keyframes commands-spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        @media (max-width: 760px) {
            .commands-toolbar-actions {
                margin-left: 0;
            }

            .commands-select {
                min-width: 0;
                flex-basis: 100%;
            }

            .commands-toolbar-actions {
                width: 100%;
            }

            .commands-toolbar-actions .button {
                flex: 1 1 100%;
                justify-content: center;
            }
        }
    </style>
</body>
</html>