{% extends "base.html" %}

{% block content %}
<script>window.__MODEL_NAMES__ = { {% for model_id, display_name, _ in available_models %}'{{ model_id }}': '{{ display_name }}'{% if not loop.last %}, {% endif %}{% endfor %} };
window.__ANTHROPIC_MODEL_IDS__ = new Set([{% for model_id, _, _ in available_models %}'{{ model_id }}'{% if not loop.last %}, {% endif %}{% endfor %}]);
window.__EXPERIMENTAL__ = {{ 'true' if experimental else 'false' }};
window.__DEFAULT_MODEL__ = '{{ default_model }}';
window.__DEFAULT_OLLAMA_URL__ = '{{ default_ollama_url }}';</script>
<div class="epic-panel-toggle" onclick="Board.toggleEpicPanel()" data-map-name="board.epic-toggle">
    <svg class="epic-panel-chevron" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 4 10 8 6 12"/></svg>
    Epics
</div>
<div class="epic-panel" id="epic-panel" data-map-name="board.epic-panel"></div>
<main class="board" data-map-name="board">
    {% for col in columns %}
    <div class="column" data-column="{{ col.id }}" data-map-name="board.column-{{ col.id }}">
        <div class="column-header" data-map-name="board.column-{{ col.id }}.header">
            <h2 title="{{ col.tooltip }}">{{ col.label }}</h2>
            <div class="column-header-actions">
                {% if col.id == 'todo' %}
                <button class="btn btn-plus" onclick="Dialogs.openNewItem()" title="Add new item" data-map-name="board.btn-new-item">+</button>
                {% endif %}
                <span class="column-count" data-count-for="{{ col.id }}" data-map-name="board.column-{{ col.id }}.count">0</span>
            </div>
        </div>
        <div class="column-cards" data-column="{{ col.id }}" data-map-name="board.column-{{ col.id }}.dropzone"
             ondrop="Board.handleDrop(event)" ondragover="Board.handleDragOver(event)">
            {% for item in items if item.column_name == col.id %}
            {% include "partials/card.html" %}
            {% endfor %}
        </div>
    </div>
    {% endfor %}
</main>

<!-- Notifications Dialog -->
<dialog id="notification-dialog" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>System Notifications</h3>
            <button class="btn-close" onclick="Dialogs.close('notification-dialog')">&times;</button>
        </div>
        <div id="notification-list" class="notification-list">
            <p class="notification-empty">No notifications</p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-sm" id="clear-notifications-btn" onclick="NotificationDialog.clearAll()">Clear All</button>
            <button type="button" class="btn btn-sm" onclick="Dialogs.close('notification-dialog')">Close</button>
        </div>
    </div>
</dialog>

<!-- New / Edit Item Dialog -->
<dialog id="item-dialog" class="modal modal-large">
    <div class="modal-content">
        <div class="modal-header">
            <h3 id="item-dialog-title">New Item</h3>
            <button class="btn-close" onclick="Dialogs.close('item-dialog')">&times;</button>
        </div>
        <form id="item-form" onsubmit="Dialogs.submitItem(event)">
            <input type="hidden" id="item-form-id" value="">
            <div class="form-group">
                <label for="item-form-title">Title <span class="tooltip" title="A short summary of the task. This becomes the card title on the board.">?</span></label>
                <input type="text" id="item-form-title" required autofocus>
            </div>
            <div class="form-group">
                <label for="item-form-desc">Description <span class="tooltip" title="Detailed task instructions for the agent. Supports Markdown. Be specific about what files to create/modify and expected outcomes.">?</span></label>
                <textarea id="item-form-desc" rows="10" placeholder="Describe what the agent should do..."></textarea>
            </div>
            {% if workspace_mode == "multi" %}
            <div class="form-group" id="item-form-repo-group">
                <label for="item-form-repo">Repo <span class="tooltip" title="Which subrepo this task targets. The agent's worktree is created from this repo; sibling repos are read-only references.">?</span></label>
                <select id="item-form-repo" required>
                    <option value="">— select a repo —</option>
                    {% for r in workspace_repos %}
                    <option value="{{ r }}">{{ r }}</option>
                    {% endfor %}
                </select>
            </div>
            {% endif %}
            <div class="form-group">
                <label for="item-form-model">Model <span class="tooltip" title="The Claude model to use for this specific task. Leave empty to use the global default model. Sonnet is fast and capable, Opus is most powerful, Haiku is cheapest.">?</span></label>
                <select id="item-form-model">
                    <option value="">Use Global Default</option>
                    <optgroup label="Anthropic Models">
                    {% for model_id, display_name, is_experimental in available_models %}
                    {% if not is_experimental or experimental %}<option value="{{ model_id }}">{{ display_name }}</option>{% endif %}
                    {% endfor %}
                    </optgroup>
                </select>
            </div>
            <div class="form-group">
                <label for="item-form-epic">Epic <span class="tooltip" title="Assign this item to an epic to group related tasks together.">?</span></label>
                <select id="item-form-epic">
                    <option value="">No Epic</option>
                </select>
                <button type="button" class="btn btn-xs" style="margin-top: 4px;" onclick="ItemDialog.showInlineEpicCreate()">+ New Epic</button>
                <div id="epic-inline-create" class="epic-inline-create">
                    <input type="text" id="epic-create-title" placeholder="Epic name" style="margin-bottom: 6px; width: 100%;">
                    <div class="epic-color-swatches" id="epic-color-swatches"></div>
                    <div style="margin-top: 8px; display: flex; gap: 6px;">
                        <button type="button" class="btn btn-xs btn-primary" onclick="ItemDialog.createEpicInline()">Create</button>
                        <button type="button" class="btn btn-xs" onclick="ItemDialog.hideInlineEpicCreate()">Cancel</button>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label>Requires <span class="tooltip" title="Select other board items that must be completed before this task can start. The item will be marked as blocked until all dependencies are done.">?</span></label>
                <div id="item-form-deps-chips" class="dep-chips"></div>
                <div class="dep-picker-wrap">
                    <input type="text" id="item-form-deps-search" class="dep-picker-input" placeholder="Search items to add…" autocomplete="off">
                    <div id="item-form-deps-list" class="dep-picker-list" hidden></div>
                </div>
                <label class="checkbox-label" id="auto-start-wrap" style="margin-top: 8px; display: none;">
                    <input type="checkbox" id="item-form-auto-start"> Auto-start agent when unblocked
                </label>
            </div>
            <div class="form-group">
                <label>Attachments <span class="tooltip" title="Add annotated screenshots or reference images. The agent can see these when working on the task.">?</span></label>
                <div id="item-form-attachments" class="attachments-grid"></div>
                <button type="button" class="btn btn-sm" style="margin-top: 8px;" onclick="Dialogs.openAnnotateForNewItem()">+ Add Annotated Image</button>
            </div>
            <div class="form-group">
                <label for="item-form-auto-approve" style="display:flex;align-items:center;gap:8px;">
                    Auto-approve
                    <select id="item-form-auto-approve" style="cursor:pointer;width:auto;margin-left:auto;">
                        <option value="0">Off — manual review</option>
                        <option value="2">Direct — merge without review</option>
                        <option value="1">With Review — auto-review then merge</option>
                    </select>
                </label>
                <p class="text-muted" style="font-size:12px;margin:4px 0 0;">
                    <strong>Off:</strong> the agent's work lands in Review for you to inspect.<br>
                    <strong>Direct:</strong> merge as soon as the agent finishes — no review pass.<br>
                    <strong>With Review:</strong> a separate review agent inspects the diff. If it approves, the work is auto-merged; otherwise its comments go back to the agent (capped at 3 return-trips before falling back to manual review).
                </p>
            </div>
            <div class="form-group">
                <label for="item-form-start-copy" style="display:flex;align-items:center;gap:8px;">
                    Start as Copy
                    <input type="checkbox" id="item-form-start-copy" style="cursor:pointer;">
                </label>
                <p class="text-muted" style="font-size:12px;margin:4px 0 0;">
                    When enabled, the Start button becomes Start Copy — keeping the original item in Todo when started.
                </p>
            </div>
            <div class="form-group">
                <label for="item-form-use-chrome" style="display:flex;align-items:center;gap:8px;">
                    🌐 Browser access
                    <input type="checkbox" id="item-form-use-chrome" style="cursor:pointer;">
                </label>
                <p class="text-muted" style="font-size:12px;margin:4px 0 0;">
                    Launch this task's agent with <code>claude --chrome</code>, giving it browser tools
                    (navigate, read pages, click, screenshot). Use for tasks that need the web or a running UI.
                    Leave off for code-only tasks. Requires Chrome with the Claude extension running.
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn" onclick="Dialogs.close('item-dialog')">Cancel</button>
                <button type="button" id="item-play-btn" class="btn btn-primary" onclick="Dialogs.submitItemAndStart(event)" title="Save item and immediately start agent">▶ Save & Start</button>
                <button type="submit" class="btn">Save</button>
            </div>
        </form>
    </div>
</dialog>

<!-- Item Detail Dialog -->
<dialog id="detail-dialog" class="modal modal-large">
    <div class="modal-content">
        <div class="modal-header">
            <span id="detail-column-badge" class="detail-column-badge"></span>
            <h3 id="detail-title"></h3>
            <div class="modal-header-actions" id="detail-header-actions">
                <label id="detail-auto-approve-wrap" class="detail-auto-approve-wrap" style="display:none" title="Auto-approve mode for this item. Takes effect when the agent finishes.">
                    <span class="detail-auto-approve-label">Auto-approve</span>
                    <select id="detail-auto-approve">
                        <option value="0">Off — manual review</option>
                        <option value="2">Direct — merge without review</option>
                        <option value="1">With Review — auto-review then merge</option>
                    </select>
                </label>
                <button class="btn btn-sm" id="detail-delete-btn" title="Delete item" style="color: var(--danger)">&#128465;</button>
                <button class="btn btn-sm" id="detail-edit-btn">Edit</button>
                <button class="btn-close" onclick="Dialogs.close('detail-dialog')">&times;</button>
            </div>
        </div>
        <div class="review-tabs">
            <button class="review-tab active" data-tab="detail-desc" onclick="Dialogs.switchDetailTab('detail-desc')">Description</button>
            <button class="review-tab" data-tab="detail-attach" onclick="Dialogs.switchDetailTab('detail-attach')">Attachments <span id="detail-attach-count" class="column-count">0</span></button>
            <button class="review-tab" data-tab="detail-wlog" onclick="Dialogs.switchDetailTab('detail-wlog')">Work Log</button>
        </div>
        <div id="detail-tab-detail-desc" class="review-content review-tab-content active">
            <div id="detail-body" class="detail-body"></div>
        </div>
        <div id="detail-tab-detail-attach" class="review-content review-tab-content" style="display:none">
            <div id="detail-attachments" class="attachments-grid"></div>
            <div class="attachments-actions">
                <button class="btn btn-sm" id="detail-annotate-btn" onclick="Dialogs.openAnnotateCanvas()">+ Add Annotated Image</button>
            </div>
        </div>
        <div id="detail-tab-detail-wlog" class="review-content review-tab-content" style="display:none">
            <div id="detail-log" class="detail-log" style="border-top:none"></div>
            <form id="detail-resume-form" class="detail-resume-form" style="display:none" onsubmit="DetailDialog.submitResume(event)">
                <label for="detail-resume-message">Send to agent (optional) and continue:</label>
                <textarea id="detail-resume-message" rows="3" placeholder="e.g. investigate a simpler approach using …"></textarea>
                <div class="detail-resume-actions">
                    <button type="submit" class="btn btn-primary">▶ Continue</button>
                </div>
            </form>
        </div>
    </div>
</dialog>

<!-- Annotation Canvas Dialog -->
<dialog id="annotate-dialog" class="modal" style="width: min(900px, 95vw); max-height: 95vh;">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Annotate Image</h3>
            <button class="btn-close" onclick="Dialogs.close('annotate-dialog')">&times;</button>
        </div>
        <div class="annotate-toolbar">
            <div class="annotate-tools">
                <button class="btn btn-sm annotate-tool active" data-tool="select" onclick="Dialogs.setAnnotateTool('select')" title="Select / Move"><svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" style="vertical-align:middle"><path d="M3 1l10 7.5-4.5 1 2.5 5-2 1-2.5-5L3 13V1z"/></svg></button>
                <button class="btn btn-sm annotate-tool" data-tool="arrow" onclick="Dialogs.setAnnotateTool('arrow')" title="Arrow">&#10132;</button>
                <button class="btn btn-sm annotate-tool" data-tool="circle" onclick="Dialogs.setAnnotateTool('circle')" title="Circle / Ellipse">&#9711;</button>
                <button class="btn btn-sm annotate-tool" data-tool="rect" onclick="Dialogs.setAnnotateTool('rect')" title="Rectangle">&#9633;</button>
                <button class="btn btn-sm annotate-tool" data-tool="freehand" onclick="Dialogs.setAnnotateTool('freehand')" title="Freehand draw">&#9998;</button>
                <button class="btn btn-sm annotate-tool" data-tool="text" onclick="Dialogs.setAnnotateTool('text')" title="Text (click to place, double-click to edit)">T</button>
            </div>
            <div class="annotate-options">
                <input type="color" id="annotate-color" value="#ff3b30" onchange="Annotate.color = this.value" title="Color">
                <select id="annotate-line-width" onchange="Annotate.lineWidth = +this.value" title="Line width">
                    <option value="2">Thin</option>
                    <option value="3" selected>Medium</option>
                    <option value="5">Thick</option>
                </select>
                <select id="annotate-font-size" onchange="Annotate.fontSize = +this.value" title="Font size">
                    <option value="12">12px</option>
                    <option value="16" selected>16px</option>
                    <option value="20">20px</option>
                    <option value="28">28px</option>
                    <option value="36">36px</option>
                </select>
                <label class="annotate-fill-toggle" title="Fill color for shapes and text background (click swatch to change, checkbox to toggle)">
                    <input type="checkbox" id="annotate-fill-enabled" onchange="Annotate.fillColor = this.checked ? document.getElementById('annotate-fill-color').value : null"> Fill
                    <input type="color" id="annotate-fill-color" value="#ffffff" onchange="if(document.getElementById('annotate-fill-enabled').checked) Annotate.fillColor = this.value" title="Fill color">
                </label>
                <span class="annotate-separator"></span>
                <label class="annotate-layer-toggle" title="Draw on main image instead of as annotation overlay">
                    <input type="checkbox" id="annotate-draw-on-image" onchange="Annotate.drawOnImage = this.checked"> On image
                </label>
            </div>
            <div class="annotate-hint">Drop images onto the canvas or paste from clipboard (Ctrl/Cmd+V)</div>
        </div>
        <div class="annotate-canvas-wrap">
            <canvas id="annotate-canvas" width="850" height="500"></canvas>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn" onclick="Annotate.clear()">Clear</button>
            <button type="button" class="btn" onclick="Dialogs.close('annotate-dialog')">Cancel</button>
            <button type="button" class="btn btn-primary" onclick="Dialogs.saveAnnotation()">Save</button>
        </div>
    </div>
</dialog>

<!-- Review Dialog -->
<dialog id="review-dialog" class="modal modal-large">
    <div class="modal-content">
        <div class="modal-header">
            <span id="review-column-badge" class="detail-column-badge"></span>
            <h3 id="review-title">Review</h3>
            <div class="modal-header-actions" id="review-header-actions">
                <button class="btn-close" onclick="Dialogs.close('review-dialog')">&times;</button>
            </div>
        </div>
        <div class="review-tabs">
            <button class="review-tab active" data-tab="description" onclick="Dialogs.switchReviewTab('description')">Description</button>
            <button class="review-tab" data-tab="result" id="review-tab-btn-result" style="display:none" onclick="Dialogs.switchReviewTab('result')">📋 Result</button>
            <button class="review-tab" data-tab="diff" onclick="Dialogs.switchReviewTab('diff')">Diff</button>
            <button class="review-tab" data-tab="files" onclick="Dialogs.switchReviewTab('files')">Files</button>
            <button class="review-tab" data-tab="log" onclick="Dialogs.switchReviewTab('log')">Work Log</button>
        </div>
        <div id="review-tab-description" class="review-content review-tab-content active">
            <div id="review-description" class="detail-body"></div>
        </div>
        <div id="review-tab-result" class="review-content review-tab-content" style="display:none">
            <div id="review-result" class="detail-body"></div>
        </div>
        <div id="review-tab-diff" class="review-content review-tab-content" style="display:none">
            <div id="review-files"></div>
            <div id="review-diff"></div>
        </div>
        <div id="review-tab-files" class="review-tab-content" style="display:none">
            <div class="review-file-browser">
                <div class="rfb-tree-panel">
                    <div class="rfb-tree-header">
                        <input type="text" id="rfb-filter" class="rfb-filter-input" placeholder="Filter files…">
                    </div>
                    <div id="rfb-tree" class="rfb-tree" tabindex="0"></div>
                </div>
                <div class="rfb-viewer-panel">
                    <div id="rfb-tabs" class="rfb-tabs"></div>
                    <div id="rfb-breadcrumb" class="rfb-breadcrumb"></div>
                    <div id="rfb-content" class="rfb-content">
                        <div class="file-empty-state">
                            <div class="file-empty-icon">📂</div>
                            <p>Select a file from the tree to view it</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="review-tab-log" class="review-content review-tab-content" style="display:none">
            <div id="review-log" class="detail-log"></div>
        </div>
        <div class="review-actions">
            <button class="btn" id="review-changes-btn">↩ Request Changes</button>
            <button class="btn btn-danger" id="review-cancel-btn">✕ Cancel Review</button>
            <button class="btn btn-primary" id="review-approve-btn">✓ Approve & Merge</button>
        </div>
    </div>
</dialog>

<!-- Confirm Dialog -->
<dialog id="confirm-dialog" class="modal" style="width: min(400px, 85vw);">
    <div class="modal-content">
        <div class="modal-header">
            <h3 id="confirm-title">Confirm</h3>
        </div>
        <div style="padding: 20px;">
            <p id="confirm-message"></p>
        </div>
        <div class="modal-footer">
            <button class="btn" id="confirm-cancel-btn">Cancel</button>
            <button class="btn btn-danger" id="confirm-ok-btn">Delete</button>
        </div>
    </div>
</dialog>

<!-- Skill Info Dialog -->
<dialog id="skill-info-dialog" class="modal" style="width: min(560px, 90vw);">
    <div class="modal-content">
        <div class="modal-header">
            <h3 id="skill-info-name" style="font-family:var(--font-mono);"></h3>
            <button class="btn-close" onclick="Dialogs.close('skill-info-dialog')">&times;</button>
        </div>
        <div style="padding: 20px;">
            <div style="font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.04em;margin-bottom:6px;">Description</div>
            <p id="skill-info-desc" style="margin:0 0 16px;white-space:pre-wrap;line-height:1.5;"></p>
            <div style="font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.04em;margin-bottom:6px;">Installed from</div>
            <div id="skill-info-source" style="font-size:13px;word-break:break-all;"></div>
        </div>
        <div class="modal-footer">
            <button class="btn" onclick="Dialogs.close('skill-info-dialog')">Close</button>
        </div>
    </div>
</dialog>

<!-- View Attachment Dialog -->
<dialog id="view-attach-dialog" class="modal" style="width: min(900px, 95vw); max-height: 95vh; background: transparent; box-shadow: none;">
    <div class="modal-content" style="background: var(--bg-secondary); border-radius: var(--radius); box-shadow: var(--shadow-lg);">
        <div class="modal-header">
            <h3 id="view-attach-title">Attachment</h3>
            <button class="btn-close" onclick="Dialogs.close('view-attach-dialog')">&times;</button>
        </div>
        <div style="padding: 12px; text-align: center; overflow: auto; max-height: 75vh;">
            <img id="view-attach-img" src="" alt="" style="max-width: 100%; max-height: 70vh; border-radius: var(--radius-sm);">
        </div>
    </div>
</dialog>

<!-- Questions Dialog -->
<dialog id="clarify-dialog" class="modal modal-large">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Agent has a question</h3>
            <button class="btn-close" onclick="Dialogs.close('clarify-dialog')">&times;</button>
        </div>
        <form id="clarify-form" onsubmit="Dialogs.submitClarification(event)">
            <input type="hidden" id="clarify-item-id" value="">
            <div id="clarify-context-group" class="form-group" style="display:none;">
                <label>Context</label>
                <div id="clarify-context" class="clarify-context"></div>
            </div>
            <div class="form-group">
                <label>Question from agent:</label>
                <div id="clarify-prompt" class="clarify-prompt"></div>
            </div>
            <div id="clarify-choices" class="clarify-choices"></div>
            <div class="form-group">
                <label for="clarify-response">Your response:</label>
                <textarea id="clarify-response" rows="6" placeholder="Your response..."></textarea>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn" onclick="Dialogs.close('clarify-dialog')">Cancel</button>
                <button type="submit" class="btn btn-primary">Send</button>
            </div>
        </form>
    </div>
</dialog>

<!-- Request Changes Dialog -->
<dialog id="changes-dialog" class="modal modal-large">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Request Changes</h3>
            <button class="btn-close" onclick="Dialogs.close('changes-dialog')">&times;</button>
        </div>
        <form id="changes-form" onsubmit="Dialogs.submitChanges(event)">
            <input type="hidden" id="changes-item-id" value="">
            <div class="form-group">
                <label for="changes-text">Describe what changes you'd like the agent to make: <span class="tooltip" title="The agent resumes its previous session with full context. Reference specific files, lines, or behaviors you want changed.">?</span></label>
                <textarea id="changes-text" rows="10" placeholder="Please change..."></textarea>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn" onclick="Dialogs.close('changes-dialog')">Cancel</button>
                <button type="submit" class="btn btn-primary">Send to Agent</button>
            </div>
        </form>
    </div>
</dialog>

<!-- Settings Dialog -->
<dialog id="config-dialog" class="modal modal-large" data-map-name="dialog.settings">
    <div class="modal-content">
        <div class="modal-header" data-map-name="dialog.settings.header">
            <h3>Settings</h3>
            <button class="btn-close" data-map-name="dialog.settings.btn-close" onclick="Dialogs.close('config-dialog')">&times;</button>
        </div>
        <form id="config-form" data-map-name="dialog.settings.form" onsubmit="Dialogs.submitConfig(event)">
            <div class="review-tabs" data-map-name="dialog.settings.tabs">
                <button type="button" class="review-tab active" data-map-name="dialog.settings.tab-general" data-tab="general" onclick="Dialogs.switchConfigTab('general')">General</button>
                <button type="button" class="review-tab" data-map-name="dialog.settings.tab-prompts" data-tab="prompts" onclick="Dialogs.switchConfigTab('prompts')">Prompts</button>
                {% if experimental %}<button type="button" class="review-tab" data-map-name="dialog.settings.tab-ollama" data-tab="ollama" onclick="Dialogs.switchConfigTab('ollama')">Ollama <span style="font-size:9px;opacity:0.6;font-weight:normal;vertical-align:super;">experimental</span></button>{% endif %}
                <button type="button" class="review-tab" data-map-name="dialog.settings.tab-mcp" data-tab="mcp" onclick="Dialogs.switchConfigTab('mcp')">MCP</button>
                <button type="button" class="review-tab" data-map-name="dialog.settings.tab-plugins" data-tab="plugins" onclick="Dialogs.switchConfigTab('plugins')">Plugins</button>
                <button type="button" class="review-tab" data-map-name="dialog.settings.tab-graphify" data-tab="graphify" onclick="Dialogs.switchConfigTab('graphify')">Graphify</button>
                <button type="button" class="review-tab" data-map-name="dialog.settings.tab-skills" data-tab="skills" onclick="Dialogs.switchConfigTab('skills')">Skills</button>
                <button type="button" class="review-tab" data-map-name="dialog.settings.tab-appearance" data-tab="appearance" onclick="Dialogs.switchConfigTab('appearance')">Appearance</button>
            </div>
            <!-- General tab -->
            <div class="config-tab-content" data-map-name="dialog.settings.panel-general" data-config-tab="general" style="padding:20px;">
                <div class="form-group" style="margin:0;">
                    <label for="config-model">Model <span class="tooltip" title="The Claude model used for all agent tasks. Sonnet is fast and capable, Opus is most powerful, Haiku is cheapest.">?</span></label>
                    <select id="config-model" data-map-name="dialog.settings.field-model" style="width:100%;">
                        <optgroup label="Anthropic Models">
                        {% for model_id, display_name, is_experimental in available_models %}
                        {% if not is_experimental or experimental %}<option value="{{ model_id }}">{{ display_name }}</option>{% endif %}
                        {% endfor %}
                        </optgroup>
                    </select>
                </div>
                <div class="form-group" style="margin-top:16px;display:flex;align-items:center;justify-content:space-between;gap:16px;">
                    <label for="config-wip-limit" style="margin:0;">WIP Limit <span class="text-muted" style="font-weight:normal;font-size:11px;">(0 = unlimited)</span> <span class="tooltip" title="Maximum number of agents that can run concurrently. Extra items are queued in the Doing column and auto-started when a slot opens. 0 = unlimited.">?</span></label>
                    <input type="number" id="config-wip-limit" data-map-name="dialog.settings.field-wip-limit" min="0" max="50" value="0" style="width:80px;">
                </div>
                <div class="form-group" style="margin-top: 16px;">
                    <label>Allowed Commands</label>
                    <label for="config-bash-yolo" style="font-size:12px;font-weight:normal;margin-top:8px;">
                        Yolo mode (allow all)
                        <input type="checkbox" id="config-bash-yolo" onchange="ConfigDialog.toggleYolo(this.checked)" style="cursor:pointer;">
                    </label>
                    <p class="text-muted" style="font-size: 12px; margin: 4px 0 8px;">
                        Shell commands agents can run (e.g., flutter, npm, cargo). Agents can also request access at runtime.
                    </p>
                    <div id="config-allowed-commands-list"></div>
                    <div style="display:flex;gap:8px;margin-top:8px;">
                        <input type="text" id="config-allowed-command-input" placeholder="e.g. flutter" style="flex:1;"
                               onkeydown="if(event.key==='Enter'){event.preventDefault();ConfigDialog.addAllowedCommand();}">
                        <button class="btn btn-sm" onclick="ConfigDialog.addAllowedCommand()">Add</button>
                    </div>
                </div>
                <div class="form-group" style="margin-top: 16px;">
                    <label>Built-in Tools <span class="tooltip" title="Enable built-in Claude Code tools for agents. These tools require explicit opt-in beyond the defaults (Read, Write, Edit, Glob, Grep).">?</span></label>
                    <div id="config-builtin-tools-list"></div>
                </div>
            </div>
            <!-- Prompts tab -->
            <div class="config-tab-content" data-map-name="dialog.settings.panel-prompts" data-config-tab="prompts" style="padding:20px;display:none;">
                <div class="form-group">
                    <label for="config-system-prompt">System Prompt <span class="tooltip" title="Instructions prepended to every agent task. Use this to define coding style, conventions, or constraints that apply to all work in this project.">?</span></label>
                    <textarea id="config-system-prompt" rows="6" placeholder="e.g. Use TypeScript with strict mode. Follow existing patterns in the codebase. Write tests for new features."></textarea>
                </div>
                <div class="form-group">
                    <label for="config-project-context">Project Context <span class="tooltip" title="Background information about the project that helps the agent understand the codebase. Architecture, tech stack, key decisions, etc.">?</span></label>
                    <textarea id="config-project-context" rows="6" placeholder="e.g. This is a React + FastAPI app. The frontend is in /web, the API is in /api. We use PostgreSQL for persistence."></textarea>
                </div>
            </div>
            <!-- Ollama tab -->
            <div class="config-tab-content" data-map-name="dialog.settings.panel-ollama" data-config-tab="ollama" style="padding:20px;display:none;">
                <div style="padding:8px 12px;margin-bottom:16px;background:var(--warning-bg, rgba(255,180,0,0.1));border:1px solid var(--warning, #e6a700);border-radius:var(--radius-sm);font-size:12px;color:var(--text-secondary);">
                    <b>Experimental.</b> Ollama support is early-stage. External MCP servers and plugins are disabled for Ollama agents to keep context size manageable for local models. Cloud-hosted Ollama models (e.g. <code>kimi-k2.5:cloud</code>) tend to work best.
                </div>
                <div class="form-group">
                    <label for="config-ollama-enabled" style="display:flex;align-items:center;gap:8px;">
                        Enable Ollama Provider <span class="tooltip" data-tip-html="<b>Run agents against a local Ollama instance.</b><br><br>When enabled, agents use Ollama instead of the Anthropic API. Requires Ollama running locally.<br><br><b>Setup:</b> Install Ollama and pull a model:<br><code>ollama pull qwen3.5</code><br><br>Then select the model name in the General tab's Model field (e.g. <code>qwen3.5</code>).">?</span>
                        <input type="checkbox" id="config-ollama-enabled" style="cursor:pointer;" onchange="if(this.checked) ConfigDialog.refreshOllamaModels()">
                    </label>
                    <p class="text-muted" style="font-size:12px;margin:4px 0 0;">
                        Route agent tasks through a local Ollama server instead of the Anthropic API.
                    </p>
                </div>
                <div class="form-group" style="margin-top:16px;">
                    <label for="config-ollama-base-url" style="display:flex;align-items:center;gap:8px;">
                        Base URL <span class="tooltip" title="The Ollama API endpoint. Default is http://localhost:11434 for a local installation.">?</span>
                        <span id="ollama-connection-status" style="font-size:11px;font-weight:normal;"></span>
                    </label>
                    <input type="text" id="config-ollama-base-url" placeholder="http://localhost:11434" value="http://localhost:11434">
                </div>
                <div class="form-group" style="margin-top:16px;">
                    <label for="config-ollama-load-claude-md" style="display:flex;align-items:center;gap:8px;">
                        Load project CLAUDE.md <span class="tooltip" data-tip-html="<b>Inject the target project's CLAUDE.md into the agent's system prompt.</b><br><br>Ollama agents run with <code>setting_sources=[&quot;local&quot;]</code>, which keeps context small by <b>not</b> auto-loading the project <code>CLAUDE.md</code> (unlike Claude agents). Turn this on to feed project conventions to the local model — at the cost of a larger prompt.<br><br>Leave off for small models that struggle with large contexts.">?</span>
                        <input type="checkbox" id="config-ollama-load-claude-md" style="cursor:pointer;">
                    </label>
                    <p class="text-muted" style="font-size:12px;margin:4px 0 0;">
                        Inject the project's <code>CLAUDE.md</code> into the prompt (Claude agents do this automatically; Ollama agents skip it by default to stay lean).
                    </p>
                </div>
                <div class="form-group" style="margin-top:16px;">
                    <label style="font-size:12px;font-weight:600;margin-bottom:6px;display:flex;align-items:center;gap:8px;">
                        Available Models
                        <button type="button" class="btn btn-xs" onclick="ConfigDialog.refreshOllamaModels()" title="Refresh model list" style="font-size:11px;padding:2px 8px;">↻ Refresh</button>
                    </label>
                    <div id="ollama-models-list" style="font-size:12px;color:var(--text-muted);">
                        Click Refresh to discover models from your Ollama server.
                    </div>
                </div>
                <div class="form-group" style="margin-top:16px;padding:12px;background:var(--bg-hover);border-radius:var(--radius-sm);">
                    <label style="font-size:12px;font-weight:600;margin-bottom:6px;display:block;">How it works</label>
                    <p class="text-muted" style="font-size:12px;margin:0;line-height:1.5;">
                        When Ollama is enabled, agents connect to your local Ollama server via environment variable overrides.<br><br>
                        <b>1.</b> Install <a href="https://ollama.com" target="_blank" style="color:var(--accent);">Ollama</a> and start the server<br>
                        <b>2.</b> Pull a model: <code>ollama pull qwen3.5</code><br>
                        <b>3.</b> Enable this toggle — Ollama models will appear in all Model dropdowns automatically
                    </p>
                </div>
            </div>
            <!-- MCP tab -->
            <div class="config-tab-content" data-map-name="dialog.settings.panel-mcp" data-config-tab="mcp" style="padding:20px;display:none;">
                <div class="form-group">
                    <label for="config-mcp-enabled">
                        Enable MCP (Model Context Protocol) <span class="tooltip" title="Enable Model Context Protocol to connect external tools and data sources for enhanced agent capabilities.">?</span>
                        <input type="checkbox" id="config-mcp-enabled">
                    </label>
                </div>
                <div class="form-group">
                    <label for="config-mcp-servers">MCP Servers <span class="tooltip" data-tip-html="<b>JSON object mapping server names to configs.</b><br><br><b>Example:</b><pre style='margin:6px 0;font-size:11px;background:rgba(255,255,255,0.1);padding:6px;border-radius:4px'>{<br>  &quot;filesystem&quot;: {<br>    &quot;command&quot;: &quot;npx&quot;,<br>    &quot;args&quot;: [&quot;-y&quot;,<br>      &quot;@modelcontextprotocol/server-filesystem&quot;,<br>      &quot;/path/to/data&quot;]<br>  }<br>}</pre><b>Common servers:</b><br>filesystem, github, postgres, puppeteer, brave-search">?</span></label>
                    <textarea id="config-mcp-servers" rows="6" placeholder='{"filesystem": {"command": "npx", "args": ["-y", "@modelcontextprotocol/server-filesystem", "/path/to/data"]}}'></textarea>
                </div>
            </div>
            <!-- Plugins tab -->
            <div class="config-tab-content" data-map-name="dialog.settings.panel-plugins" data-config-tab="plugins" style="padding:20px;display:none;">
                <div class="form-group">
                    <label>Plugins <span class="tooltip" data-tip-html="<b>Local plugin directories</b> that extend agents with custom skills, agents, hooks, and MCP servers.<br><br>Each plugin must contain a <code>.claude-plugin/plugin.json</code> manifest.<br><br><b>Structure:</b><pre style='margin:6px 0;font-size:11px;background:rgba(255,255,255,0.1);padding:6px;border-radius:4px'>my-plugin/<br>  .claude-plugin/plugin.json<br>  skills/<br>  agents/<br>  hooks/</pre>Enter one directory path per line (absolute or relative to the project root).">?</span></label>
                    <div id="config-plugins-list" class="plugins-list"></div>
                    <div style="display:flex;gap:8px;margin-top:8px;">
                        <input type="text" id="config-plugin-path-input" placeholder="/path/to/plugin or ./relative/path" style="flex:1">
                        <button type="button" class="btn btn-sm" onclick="Dialogs.addPlugin()">+ Add Plugin</button>
                    </div>
                </div>
            </div>
            <!-- Graphify tab -->
            <div class="config-tab-content" data-map-name="dialog.settings.panel-graphify" data-config-tab="graphify" style="padding:20px;display:none;">
                <div class="form-group" style="margin:0;padding:12px;background:var(--bg-hover);border-radius:var(--radius-sm);">
                    <label style="font-size:12px;font-weight:600;margin-bottom:6px;display:flex;align-items:center;justify-content:space-between;gap:8px;">
                        <span>Knowledge graph <span class="tooltip" data-tip-html="<b>graphify</b> builds a navigable knowledge graph of this project (code structure + optional semantic layer). The dashboard owns the graph; agents read it.">?</span></span>
                        <button type="button" class="btn btn-xs" onclick="ConfigDialog.refreshGraphifyStatus()" title="Refresh status" style="font-size:11px;padding:2px 8px;">↻ Refresh</button>
                    </label>
                    <div id="graphify-status" style="font-size:12px;color:var(--text-muted);">Loading…</div>
                    <div id="graphify-upgrade-row" style="margin-top:8px;display:none;">
                        <button type="button" class="btn btn-sm" onclick="ConfigDialog.installGraphify()">Upgrade graphify</button>
                    </div>
                </div>
                <div class="form-group" style="margin-top:16px;">
                    <label for="config-graphify-enabled" style="display:flex;align-items:center;gap:8px;">
                        Enable graphify for agents <span class="tooltip" title="Adds a read-only graph_query tool so agents can orient against the project graph before editing.">?</span>
                        <input type="checkbox" id="config-graphify-enabled" style="cursor:pointer;">
                    </label>
                </div>
                <div class="form-group" style="margin-top:12px;">
                    <label for="config-graphify-auto-refresh" style="display:flex;align-items:center;gap:8px;">
                        Auto-refresh graph after merge <span class="tooltip" title="Re-run the free AST graph build after an item merges to the project root, so the graph tracks mainline.">?</span>
                        <input type="checkbox" id="config-graphify-auto-refresh" style="cursor:pointer;" checked>
                    </label>
                </div>
                <div class="form-group" style="margin-top:12px;">
                    <label for="config-graphify-backend">Semantic backend <span class="tooltip" data-tip-html="<b>AST only</b> is free and fast (code structure). <b>Gemini</b> adds an LLM semantic layer (concepts, cross-file links) and costs tokens — requires GEMINI_API_KEY.">?</span></label>
                    <select id="config-graphify-backend" style="width:100%;">
                        <option value="ast">AST only (free)</option>
                        <option value="gemini">Gemini (semantic, costs tokens)</option>
                    </select>
                </div>
                <div class="form-group" style="margin-top:16px;">
                    <label style="font-size:12px;font-weight:600;margin-bottom:6px;display:block;">Build</label>
                    <div style="display:flex;gap:8px;">
                        <button type="button" class="btn btn-sm" onclick="ConfigDialog.buildGraph(false)">Build / Rebuild (AST)</button>
                        <button type="button" class="btn btn-sm" onclick="ConfigDialog.buildGraph(true)">Enrich (semantic)</button>
                    </div>
                    <p class="text-muted" style="font-size:12px;margin:8px 0 0;">AST build is free and runs in seconds. Semantic enrichment uses an LLM and can cost ~hundreds of thousands of tokens on a large repo.</p>
                </div>
            </div>
            <!-- Skills tab -->
            <div class="config-tab-content" data-map-name="dialog.settings.panel-skills" data-config-tab="skills" style="padding:20px;display:none;">
                <p class="text-muted" style="font-size:12px;margin:0 0 12px;">
                    Install Agent Skills into a local library and enable a subset for <b>this project</b>.
                    Enabled skills are delivered to agents. Installing a third-party skill adds its
                    instructions to your agents — review before enabling.
                </p>
                <div class="form-group" style="margin:0;">
                    <label style="font-size:12px;font-weight:600;margin-bottom:6px;display:flex;align-items:center;justify-content:space-between;gap:8px;">
                        Installed skills
                        <button type="button" class="btn btn-xs" onclick="ConfigDialog.refreshSkills()" title="Refresh" style="font-size:11px;padding:2px 8px;">↻ Refresh</button>
                    </label>
                    <div id="skills-installed-list" style="font-size:12px;color:var(--text-muted);">Loading…</div>
                </div>
                <div class="form-group" style="margin-top:16px;">
                    <label for="skill-add-input">Add by GitHub URL or <code>owner/repo/path</code></label>
                    <div style="display:flex;gap:8px;margin-top:6px;">
                        <input type="text" id="skill-add-input" placeholder="anthropics/skills/skills/docx" style="flex:1;"
                               onkeydown="if(event.key==='Enter'){event.preventDefault();ConfigDialog.installSkill();}">
                        <button type="button" class="btn btn-sm" onclick="ConfigDialog.installSkill()">Install</button>
                    </div>
                </div>
                <div class="form-group" style="margin-top:16px;">
                    <label style="font-size:12px;font-weight:600;margin-bottom:6px;display:flex;align-items:center;gap:8px;">
                        Browse anthropics/skills
                        <button type="button" class="btn btn-xs" onclick="ConfigDialog.browseSkills()" style="font-size:11px;padding:2px 8px;">Load list</button>
                    </label>
                    <div id="skills-browse-list" style="font-size:12px;color:var(--text-muted);">
                        Click “Load list” to fetch installable skills from
                        <a href="https://github.com/anthropics/skills" target="_blank" style="color:var(--accent);">anthropics/skills</a>.
                        More at <a href="https://skills.pub/" target="_blank" style="color:var(--accent);">skills.pub</a> (paste a GitHub URL above to install).
                    </div>
                </div>
            </div>
            <!-- Appearance tab -->
            <div class="config-tab-content" data-map-name="dialog.settings.panel-appearance" data-config-tab="appearance" style="padding:20px;display:none;">
                <div class="form-group">
                    <label for="config-flame-enabled" style="display:flex;align-items:center;gap:8px;">
                        Background Flame Animation
                        <input type="checkbox" id="config-flame-enabled" style="cursor:pointer;" checked>
                    </label>
                    <p class="text-muted" style="font-size:12px;margin:4px 0 0;">
                        Animated flame effect behind the board columns. Intensity reacts to agent activity — tokens/min, messages/min, and tools/min.
                    </p>
                </div>
                <div class="form-group" style="margin-top:16px;">
                    <label for="config-flame-intensity">Intensity Multiplier: <span id="config-flame-intensity-value" style="font-weight:600;">1.0</span>x</label>
                    <input type="range" id="config-flame-intensity" min="0.2" max="3.0" step="0.1" value="1.0"
                           style="width:100%;cursor:pointer;margin-top:4px;"
                           oninput="document.getElementById('config-flame-intensity-value').textContent = parseFloat(this.value).toFixed(1)">
                    <div style="display:flex;justify-content:space-between;font-size:11px;color:var(--text-muted);margin-top:2px;">
                        <span>Subtle (0.2x)</span>
                        <span>Normal (1.0x)</span>
                        <span>Inferno (3.0x)</span>
                    </div>
                    <p class="text-muted" style="font-size:12px;margin:8px 0 0;">
                        Controls how strongly the flame reacts to activity. At higher values, even small activity produces visible flames.
                    </p>
                </div>
                <div class="form-group" style="margin-top:16px;padding:12px;background:var(--bg-hover);border-radius:var(--radius-sm);">
                    <label style="font-size:12px;font-weight:600;margin-bottom:6px;display:block;">How intensity works</label>
                    <p class="text-muted" style="font-size:12px;margin:0;line-height:1.5;">
                        The flame reacts to live metrics:<br>
                        <b>Active agents</b> — each running agent adds base intensity<br>
                        <b>Tokens/min</b> — high throughput makes the flame taller<br>
                        <b>Messages/min</b> — conversation pace adds flicker<br>
                        <b>Tools/min</b> — frequent tool calls fuel the fire<br>
                        <br>
                        When no agents are running, the flame fades out completely.
                    </p>
                </div>
            </div>
            <div class="modal-footer" data-map-name="dialog.settings.footer">
                <button type="button" class="btn" data-map-name="dialog.settings.btn-cancel" onclick="Dialogs.close('config-dialog')">Cancel</button>
                <button type="submit" class="btn btn-primary" data-map-name="dialog.settings.btn-save">Save</button>
            </div>
        </form>
    </div>
</dialog>
<!-- File Browser Dialog -->
<dialog id="file-browser-dialog" class="modal">
    <div class="modal-content file-browser-modal">
        <div class="modal-header">
            <h3>Files</h3>
            <div class="modal-header-actions">
                <button class="btn-icon" onclick="FileBrowser.refresh()" title="Refresh files" data-tip="Refresh tree &amp; active file">
                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10"/><path d="M20.49 15a9 9 0 0 1-14.85 3.36L1 14"/></svg>
                </button>
                <button class="btn-close" onclick="FileBrowser.close()">&times;</button>
            </div>
        </div>
        <div class="file-browser-container">
            <div class="file-tree-panel">
                <div class="file-tree-search">
                    <input type="text" placeholder="Filter files..." id="file-tree-filter">
                </div>
                <div class="file-tree" id="file-tree">
                    <div class="file-tree-loading">Loading...</div>
                </div>
            </div>
            <div class="file-viewer-panel">
                <div class="file-tabs" id="file-tabs"></div>
                <div class="file-breadcrumb" id="file-breadcrumb"></div>
                <div class="file-content" id="file-content">
                    <div class="file-empty-state">
                        <div class="file-empty-icon">📂</div>
                        <p>Select a file from the tree to view it</p>
                    </div>
                </div>
                <div class="file-font-controls" id="file-font-controls" style="display:none;">
                    <button onclick="FileBrowser.changeFontSize(-1)" title="Decrease font size">&minus;</button>
                    <button onclick="FileBrowser.changeFontSize(1)" title="Increase font size">&plus;</button>
                </div>
            </div>
        </div>
    </div>
</dialog>
<!-- Search Dialog -->
<dialog id="search-dialog" class="search-dialog">
    <div class="search-container">
        <div class="search-input-wrap">
            <svg class="search-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="7" cy="7" r="4.5"/><line x1="10.5" y1="10.5" x2="14" y2="14"/></svg>
            <input type="text" id="search-input" placeholder="Search items..." autocomplete="off" spellcheck="false">
            <kbd class="search-esc" onclick="SearchDialog.close()">esc</kbd>
        </div>
        <div class="search-filters" id="search-filters"></div>
        <div class="search-options">
            <label><input type="checkbox" id="search-worklog"> Include work log</label>
        </div>
        <div class="search-results" id="search-results"></div>
    </div>
</dialog>
<!-- Shortcut Progress Dialog -->
<dialog id="shortcut-progress-dialog" class="modal" style="width: min(900px, 90vw);">
    <div class="modal-content">
        <div class="modal-header">
            <h3 id="shortcut-progress-title">Shortcut</h3>
            <button class="btn-close" onclick="Shortcuts.closeProgress()">&times;</button>
        </div>
        <div style="padding: 16px; flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column;">
            <div id="shortcut-progress-command" class="shortcut-cmd-display"></div>
            <div id="shortcut-progress-status" class="shortcut-status"></div>
            <pre id="shortcut-progress-output" class="shortcut-output">(waiting for output...)</pre>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-danger btn-sm" id="shortcut-reset-btn" onclick="Shortcuts.resetShortcut()">Reset</button>
            <button type="button" class="btn btn-sm" id="shortcut-auto-reset-btn" onclick="Shortcuts.autoResetAndClose()" style="display:none">Auto-reset</button>
            <button type="button" class="btn" onclick="Shortcuts.closeProgress()">Close</button>
        </div>
    </div>
</dialog>

<!-- Shortcut Add Dialog -->
<dialog id="shortcut-add-dialog" class="modal" style="width: min(450px, 85vw);">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Add Shortcut</h3>
            <button class="btn-close" onclick="Shortcuts.closeAddDialog()">&times;</button>
        </div>
        <form onsubmit="Shortcuts.submitAdd(event)">
            <div style="padding: 16px; display: flex; flex-direction: column; gap: 12px;">
                <div class="form-group">
                    <label for="shortcut-add-name">Button Name</label>
                    <input type="text" id="shortcut-add-name" required placeholder="e.g. Build" autofocus>
                </div>
                <div class="form-group">
                    <label for="shortcut-add-command">Command</label>
                    <textarea id="shortcut-add-command" required placeholder="e.g. npm run build" rows="3" style="font-family: var(--font-mono, monospace); resize: vertical;"></textarea>
                    <small style="color: var(--text-secondary); margin-top: 2px;">Use multiple lines for chained commands. Ctrl+Enter to submit.</small>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn" onclick="Shortcuts.closeAddDialog()">Cancel</button>
                <button type="submit" class="btn btn-primary">Add</button>
            </div>
        </form>
    </div>
</dialog>

<!-- Shortcut Manage Dialog -->
<dialog id="shortcut-manage-dialog" class="modal" style="width: min(500px, 85vw);">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Manage Shortcuts</h3>
            <button class="btn-close" onclick="Shortcuts.closeManageDialog()">&times;</button>
        </div>
        <div id="shortcut-manage-list" style="padding: 16px; flex: 1 1 auto; min-height: 0; max-height: 400px; overflow-y: auto;"></div>
        <div class="modal-footer">
            <button type="button" class="btn" onclick="Shortcuts.closeManageDialog()">Close</button>
        </div>
    </div>
</dialog>

<!-- Shortcut Edit Dialog -->
<dialog id="shortcut-edit-dialog" class="modal" style="width: min(450px, 85vw);">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Edit Shortcut</h3>
            <button class="btn-close" onclick="Shortcuts.closeEditDialog()">&times;</button>
        </div>
        <form onsubmit="Shortcuts.submitEdit(event)">
            <div style="padding: 16px; display: flex; flex-direction: column; gap: 12px;">
                <div class="form-group">
                    <label for="shortcut-edit-name">Button Name</label>
                    <input type="text" id="shortcut-edit-name" required autofocus>
                </div>
                <div class="form-group">
                    <label for="shortcut-edit-command">Command</label>
                    <textarea id="shortcut-edit-command" required rows="3" style="font-family: var(--font-mono, monospace); resize: vertical;"></textarea>
                    <small style="color: var(--text-secondary); margin-top: 2px;">Use multiple lines for chained commands. Ctrl+Enter to submit.</small>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn" onclick="Shortcuts.closeEditDialog()">Cancel</button>
                <button type="submit" class="btn btn-primary">Save</button>
            </div>
        </form>
    </div>
</dialog>
{% endblock %}