claudeck 1.2.0 → 1.3.0

package/public/js/components/add-project-modal.js

@@ -0,0 +1,27 @@
+class AddProjectModal extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+  <div id="add-project-modal" class="modal-overlay hidden">
+    <div class="modal add-project-modal">
+      <div class="modal-header">
+        <h3>Add Project</h3>
+        <button id="add-project-close" class="modal-close">&times;</button>
+      </div>
+      <div class="add-project-body">
+        <div id="folder-breadcrumb" class="folder-breadcrumb"></div>
+        <div id="folder-list" class="folder-list"></div>
+        <div class="folder-select-row">
+          <input id="add-project-name" type="text" placeholder="Project name" autocomplete="off">
+          <button id="add-project-confirm" class="modal-btn-save">Add</button>
+        </div>
+      </div>
+    </div>
+  </div>`;
+
+    const overlay = this.querySelector('#add-project-modal');
+    const closeBtn = this.querySelector('#add-project-close');
+    if (closeBtn) closeBtn.addEventListener('click', () => overlay.classList.add('hidden'));
+    if (overlay) overlay.addEventListener('click', (e) => { if (e.target === overlay) overlay.classList.add('hidden'); });
+  }
+}
+customElements.define('claudeck-add-project', AddProjectModal);

package/public/js/components/agent-modal.js

@@ -0,0 +1,73 @@
+class AgentModal extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+  <div id="agent-modal" class="modal-overlay hidden">
+    <div class="modal agent-form-modal">
+      <div class="modal-header">
+        <h3 id="agent-modal-title">New Agent</h3>
+        <button id="agent-modal-close" class="modal-close">&times;</button>
+      </div>
+      <form id="agent-form">
+        <div class="af-section">
+          <div class="af-section-label">Identity</div>
+          <div class="af-grid-2">
+            <div class="af-field">
+              <label for="agent-form-title">Title</label>
+              <input id="agent-form-title" type="text" placeholder="e.g. Code Documenter" required>
+            </div>
+            <div class="af-field">
+              <label for="agent-form-icon">Icon</label>
+              <select id="agent-form-icon">
+                <option value="search">Search</option>
+                <option value="bug">Bug</option>
+                <option value="check">Check</option>
+                <option value="tool" selected>Tool</option>
+              </select>
+            </div>
+          </div>
+          <div class="af-field">
+            <label for="agent-form-desc">Description</label>
+            <input id="agent-form-desc" type="text" placeholder="Short description of what this agent does" required>
+          </div>
+        </div>
+        <div class="af-section">
+          <div class="af-section-label">Behavior</div>
+          <div class="af-field">
+            <label for="agent-form-goal">Goal</label>
+            <textarea id="agent-form-goal" rows="4" placeholder="Describe the agent's goal in detail. Be specific about what files to look at, what to check, and what output to produce..." required></textarea>
+          </div>
+        </div>
+        <div class="af-section">
+          <div class="af-section-label">Constraints</div>
+          <div class="af-grid-2">
+            <div class="af-field">
+              <label for="agent-form-max-turns">Max Turns</label>
+              <div class="af-input-with-hint">
+                <input id="agent-form-max-turns" type="number" min="1" max="200" value="50">
+                <span class="af-hint">1 - 200</span>
+              </div>
+            </div>
+            <div class="af-field">
+              <label for="agent-form-timeout">Timeout (seconds)</label>
+              <div class="af-input-with-hint">
+                <input id="agent-form-timeout" type="number" min="30" max="3600" value="300">
+                <span class="af-hint">30 - 3600</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <input id="agent-form-edit-id" type="hidden">
+        <div class="modal-actions">
+          <button type="button" id="agent-modal-cancel" class="modal-btn-cancel">Cancel</button>
+          <button type="submit" class="modal-btn-save">Save Agent</button>
+        </div>
+      </form>
+    </div>
+  </div>`;
+
+    const overlay = this.querySelector('#agent-modal');
+    this.querySelector('#agent-modal-close').addEventListener('click', () => overlay.classList.add('hidden'));
+    overlay.addEventListener('click', (e) => { if (e.target === overlay) overlay.classList.add('hidden'); });
+  }
+}
+customElements.define('claudeck-agent-modal', AgentModal);

package/public/js/components/agent-monitor-modal.js

@@ -0,0 +1,19 @@
+class AgentMonitorModal extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+  <div id="agent-monitor-modal" class="modal-overlay hidden">
+    <div class="modal agent-monitor-modal">
+      <div class="modal-header">
+        <h3>Agent Monitor</h3>
+        <button id="agent-monitor-close" class="modal-close">&times;</button>
+      </div>
+      <div id="agent-monitor-content"></div>
+    </div>
+  </div>`;
+
+    const overlay = this.querySelector('#agent-monitor-modal');
+    this.querySelector('#agent-monitor-close').addEventListener('click', () => overlay.classList.add('hidden'));
+    overlay.addEventListener('click', (e) => { if (e.target === overlay) overlay.classList.add('hidden'); });
+  }
+}
+customElements.define('claudeck-agent-monitor-modal', AgentMonitorModal);

package/public/js/components/bg-confirm-modal.js

@@ -0,0 +1,22 @@
+// Web Component: Background Session Confirmation Dialog
+class ClaudeckBgConfirm extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+      <div id="bg-confirm-modal" class="modal-overlay hidden" data-persistent>
+        <div class="modal bg-confirm-modal">
+          <div class="modal-header">
+            <h3>Session In Progress</h3>
+          </div>
+          <p class="bg-confirm-text">Claude is still responding in this session. What would you like to do?</p>
+          <div class="modal-actions bg-confirm-actions">
+            <button id="bg-confirm-cancel" class="modal-btn-cancel">Cancel</button>
+            <button id="bg-confirm-abort" class="modal-btn-cancel bg-confirm-abort-btn">Abort Session</button>
+            <button id="bg-confirm-background" class="modal-btn-save">Continue in Background</button>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('claudeck-bg-confirm', ClaudeckBgConfirm);

package/public/js/components/chain-modal.js

@@ -0,0 +1,52 @@
+class ChainModal extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+  <div id="chain-modal" class="modal-overlay hidden">
+    <div class="modal agent-form-modal">
+      <div class="modal-header">
+        <h3 id="chain-modal-title">New Chain</h3>
+        <button id="chain-modal-close" class="modal-close">&times;</button>
+      </div>
+      <form id="chain-form">
+        <div class="af-section">
+          <div class="af-section-label">Details</div>
+          <div class="af-field">
+            <label for="chain-form-title">Title</label>
+            <input id="chain-form-title" type="text" placeholder="e.g. Full Code Review Pipeline" required>
+          </div>
+          <div class="af-field">
+            <label for="chain-form-desc">Description</label>
+            <input id="chain-form-desc" type="text" placeholder="Short description of the chain">
+          </div>
+        </div>
+        <div class="af-section">
+          <div class="af-section-label">Pipeline</div>
+          <div id="chain-agent-list" class="chain-agent-list"></div>
+          <button type="button" id="chain-add-agent-btn" class="chain-add-agent-btn">+ Add Agent Step</button>
+        </div>
+        <div class="af-section">
+          <div class="af-section-label">Settings</div>
+          <div class="af-field">
+            <label for="chain-form-context">Context Passing</label>
+            <select id="chain-form-context">
+              <option value="summary">Summary (recommended)</option>
+              <option value="full">Full output</option>
+              <option value="none">None</option>
+            </select>
+          </div>
+        </div>
+        <input id="chain-form-edit-id" type="hidden">
+        <div class="modal-actions">
+          <button type="button" id="chain-modal-cancel" class="modal-btn-cancel">Cancel</button>
+          <button type="submit" class="modal-btn-save">Save Chain</button>
+        </div>
+      </form>
+    </div>
+  </div>`;
+
+    const overlay = this.querySelector('#chain-modal');
+    this.querySelector('#chain-modal-close').addEventListener('click', () => overlay.classList.add('hidden'));
+    overlay.addEventListener('click', (e) => { if (e.target === overlay) overlay.classList.add('hidden'); });
+  }
+}
+customElements.define('claudeck-chain-modal', ChainModal);

package/public/js/components/cost-dashboard-modal.js

@@ -0,0 +1,39 @@
+class CostDashboardModal extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+  <div id="cost-dashboard-modal" class="modal-overlay hidden">
+    <div class="modal cost-dashboard-modal">
+      <div class="modal-header">
+        <h3>Cost Dashboard</h3>
+        <button id="cost-modal-close" class="modal-close">&times;</button>
+      </div>
+      <div id="cost-dashboard-content">
+        <div class="cost-summary-cards" id="cost-summary-cards"></div>
+        <div class="cost-table-container">
+          <table class="cost-table">
+            <thead>
+              <tr>
+                <th data-sort="title">Session</th>
+                <th data-sort="turns">Turns</th>
+                <th data-sort="tokens">Tokens</th>
+                <th data-sort="cost">Cost</th>
+              </tr>
+            </thead>
+            <tbody id="cost-table-body"></tbody>
+          </table>
+        </div>
+        <div class="cost-chart-section">
+          <h4>Daily Costs (Last 30 Days)</h4>
+          <div class="cost-chart" id="cost-chart"></div>
+        </div>
+      </div>
+    </div>
+  </div>`;
+
+    const overlay = this.querySelector('#cost-dashboard-modal');
+    const closeBtn = this.querySelector('#cost-modal-close');
+    if (closeBtn) closeBtn.addEventListener('click', () => overlay.classList.add('hidden'));
+    if (overlay) overlay.addEventListener('click', (e) => { if (e.target === overlay) overlay.classList.add('hidden'); });
+  }
+}
+customElements.define('claudeck-cost-dashboard', CostDashboardModal);

package/public/js/components/dag-editor-modal.js

@@ -0,0 +1,55 @@
+class DagEditorModal extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+  <div id="dag-modal" class="modal-overlay hidden">
+    <div class="modal dag-modal-wide">
+      <div class="modal-header">
+        <h3 id="dag-modal-title">New DAG</h3>
+        <button id="dag-modal-close" class="modal-close">&times;</button>
+      </div>
+      <div class="dag-explainer af-section">
+        <div class="af-section-label">What is a DAG?</div>
+        <div class="orch-explainer">
+          <p class="dag-explainer-text">A <strong>DAG</strong> (Directed Acyclic Graph) lets you run agents in parallel when they have no dependencies, and sequentially when one depends on another's output.</p>
+          <div class="orch-explainer-steps">
+            <div class="orch-step"><span class="orch-step-num">1</span><span><strong>Drag agents</strong> from the palette onto the canvas</span></div>
+            <div class="orch-step"><span class="orch-step-num">2</span><span><strong>Connect outputs → inputs</strong> by dragging between ports to define dependencies</span></div>
+            <div class="orch-step"><span class="orch-step-num">3</span><span><strong>Click an edge</strong> to remove a connection</span></div>
+            <div class="orch-step"><span class="orch-step-num">4</span><span>Agents on the same level <strong>run in parallel</strong>, dependent agents wait</span></div>
+          </div>
+        </div>
+      </div>
+      <div class="dag-editor-toolbar af-section">
+        <div class="af-section-label">Details</div>
+        <div class="af-grid-2">
+          <div class="af-field">
+            <label for="dag-form-title">Title</label>
+            <input id="dag-form-title" type="text" placeholder="e.g. Full Review Pipeline" required>
+          </div>
+          <div class="af-field">
+            <label for="dag-form-desc">Description</label>
+            <input id="dag-form-desc" type="text" placeholder="Short description">
+          </div>
+        </div>
+      </div>
+      <div class="dag-editor-body">
+        <div class="dag-node-palette" id="dag-node-palette"></div>
+        <div class="dag-canvas-wrap">
+          <svg id="dag-canvas" class="dag-canvas"></svg>
+        </div>
+      </div>
+      <input id="dag-form-edit-id" type="hidden">
+      <div class="modal-actions">
+        <button type="button" id="dag-modal-cancel" class="modal-btn-cancel">Cancel</button>
+        <button type="button" id="dag-auto-layout" class="modal-btn-cancel">Auto Layout</button>
+        <button type="button" id="dag-modal-save" class="modal-btn-save">Save DAG</button>
+      </div>
+    </div>
+  </div>`;
+
+    const overlay = this.querySelector('#dag-modal');
+    this.querySelector('#dag-modal-close').addEventListener('click', () => overlay.classList.add('hidden'));
+    overlay.addEventListener('click', (e) => { if (e.target === overlay) overlay.classList.add('hidden'); });
+  }
+}
+customElements.define('claudeck-dag-editor', DagEditorModal);

package/public/js/components/file-picker-modal.js

@@ -0,0 +1,45 @@
+class FilePickerModal extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+  <div id="file-picker-modal" class="modal-overlay hidden">
+    <div class="modal file-picker-modal">
+      <div class="modal-header">
+        <h3>Attach Files</h3>
+        <button id="fp-modal-close" class="modal-close">&times;</button>
+      </div>
+      <div class="fp-info-banner">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/>
+        </svg>
+        <span>Text files up to <strong>50 KB</strong> &middot; Binary files are not supported</span>
+      </div>
+      <div class="fp-search-wrap">
+        <svg class="fp-search-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
+        </svg>
+        <input id="fp-search" type="text" class="file-picker-search" placeholder="Search files..." autocomplete="off">
+      </div>
+      <div id="fp-selected" class="fp-selected-strip hidden"></div>
+      <div id="fp-list" class="file-picker-list"></div>
+      <div id="fp-empty" class="fp-empty-state hidden">
+        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><polyline points="13 2 13 9 20 9"/>
+        </svg>
+        <span>No files match your search</span>
+      </div>
+      <div class="file-picker-footer">
+        <span id="fp-count">0 files selected</span>
+        <button id="fp-done-btn" class="modal-btn-save">Done</button>
+      </div>
+    </div>
+  </div>`;
+
+    const overlay = this.querySelector('#file-picker-modal');
+    const closeBtn = this.querySelector('#fp-modal-close');
+    const doneBtn = this.querySelector('#fp-done-btn');
+    if (closeBtn) closeBtn.addEventListener('click', () => overlay.classList.add('hidden'));
+    if (doneBtn) doneBtn.addEventListener('click', () => overlay.classList.add('hidden'));
+    if (overlay) overlay.addEventListener('click', (e) => { if (e.target === overlay) overlay.classList.add('hidden'); });
+  }
+}
+customElements.define('claudeck-file-picker', FilePickerModal);

package/public/js/components/linear-create-modal.js

@@ -0,0 +1,43 @@
+// Web Component: Linear Create Issue Modal
+class ClaudeckLinearCreate extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+      <div id="linear-create-modal" class="modal-overlay hidden">
+        <div class="modal">
+          <div class="modal-header">
+            <h3>Create Issue</h3>
+            <button id="linear-create-close" class="modal-close">&times;</button>
+          </div>
+          <form id="linear-create-form">
+            <label for="linear-create-title">Title</label>
+            <input id="linear-create-title" type="text" placeholder="Issue title" required>
+            <label for="linear-create-desc">Description</label>
+            <textarea id="linear-create-desc" rows="3" placeholder="Optional description..."></textarea>
+            <label for="linear-create-team">Project (Team)</label>
+            <select id="linear-create-team" required>
+              <option value="">Select a team...</option>
+            </select>
+            <label for="linear-create-state">State</label>
+            <select id="linear-create-state" disabled>
+              <option value="">Select a team first...</option>
+            </select>
+            <div class="modal-actions">
+              <button type="button" id="linear-create-cancel" class="modal-btn-cancel">Cancel</button>
+              <button type="submit" id="linear-create-submit" class="modal-btn-save">Create</button>
+            </div>
+          </form>
+        </div>
+      </div>
+    `;
+
+    const overlay = this.querySelector('#linear-create-modal');
+    const closeBtn = this.querySelector('#linear-create-close');
+
+    closeBtn.addEventListener('click', () => overlay.classList.add('hidden'));
+    overlay.addEventListener('click', (e) => {
+      if (e.target === overlay) overlay.classList.add('hidden');
+    });
+  }
+}
+
+customElements.define('claudeck-linear-create', ClaudeckLinearCreate);

package/public/js/components/mcp-modal.js

@@ -0,0 +1,58 @@
+// Web Component: MCP Server Management Modal
+class ClaudeckMcpModal extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+      <div id="mcp-modal" class="modal-overlay hidden">
+        <div class="modal mcp-modal">
+          <div class="modal-header">
+            <h3>MCP Servers</h3>
+            <button id="mcp-modal-close" class="modal-close">&times;</button>
+          </div>
+          <div id="mcp-server-list" class="mcp-server-list"></div>
+          <div id="mcp-form-container" class="mcp-form-container hidden">
+            <h4 id="mcp-form-title" class="mcp-form-title">Add Server</h4>
+            <form id="mcp-form">
+              <label for="mcp-name">Name</label>
+              <input id="mcp-name" type="text" placeholder="my-server" required>
+              <label for="mcp-type">Type</label>
+              <select id="mcp-type">
+                <option value="stdio">stdio</option>
+                <option value="sse">sse</option>
+                <option value="http">http</option>
+              </select>
+              <div id="mcp-stdio-fields">
+                <label for="mcp-command">Command</label>
+                <input id="mcp-command" type="text" placeholder="npx -y @modelcontextprotocol/server-name">
+                <label for="mcp-args">Args (one per line)</label>
+                <textarea id="mcp-args" rows="2" placeholder="--flag&#10;value"></textarea>
+                <label for="mcp-env">Environment (KEY=VALUE, one per line)</label>
+                <textarea id="mcp-env" rows="2" placeholder="API_KEY=xxx"></textarea>
+              </div>
+              <div id="mcp-url-fields" class="hidden">
+                <label for="mcp-url">URL</label>
+                <input id="mcp-url" type="text" placeholder="https://...">
+              </div>
+              <div class="modal-actions">
+                <button type="button" id="mcp-form-cancel" class="modal-btn-cancel">Cancel</button>
+                <button type="submit" id="mcp-form-save" class="modal-btn-save">Save</button>
+              </div>
+            </form>
+          </div>
+          <div class="mcp-modal-footer">
+            <button id="mcp-add-btn" class="modal-btn-save">+ Add Server</button>
+          </div>
+        </div>
+      </div>
+    `;
+
+    const overlay = this.querySelector('#mcp-modal');
+    const closeBtn = this.querySelector('#mcp-modal-close');
+
+    closeBtn.addEventListener('click', () => overlay.classList.add('hidden'));
+    overlay.addEventListener('click', (e) => {
+      if (e.target === overlay) overlay.classList.add('hidden');
+    });
+  }
+}
+
+customElements.define('claudeck-mcp-modal', ClaudeckMcpModal);

package/public/js/components/orchestrate-modal.js

@@ -0,0 +1,40 @@
+class OrchestrateModal extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+  <div id="orch-modal" class="modal-overlay hidden">
+    <div class="modal agent-form-modal">
+      <div class="modal-header">
+        <h3>Orchestrate</h3>
+        <button id="orch-modal-close" class="modal-close">&times;</button>
+      </div>
+      <div class="af-section">
+        <div class="af-section-label">How it works</div>
+        <div class="orch-explainer">
+          <div class="orch-explainer-steps">
+            <div class="orch-step"><span class="orch-step-num">1</span><span>Describe your task in plain language</span></div>
+            <div class="orch-step"><span class="orch-step-num">2</span><span>The orchestrator analyzes and decomposes it into sub-tasks</span></div>
+            <div class="orch-step"><span class="orch-step-num">3</span><span>Each sub-task is delegated to the best-fit agent automatically</span></div>
+            <div class="orch-step"><span class="orch-step-num">4</span><span>Results are synthesized into a unified response</span></div>
+          </div>
+        </div>
+      </div>
+      <div class="af-section">
+        <div class="af-section-label">Task</div>
+        <div class="af-field">
+          <label for="orch-task-input">What do you need done?</label>
+          <textarea id="orch-task-input" rows="5" placeholder="e.g. Review the current changes for bugs and security issues, then write tests for any uncovered code paths, and finally refactor any code smells you find."></textarea>
+        </div>
+      </div>
+      <div class="modal-actions">
+        <button type="button" id="orch-modal-cancel" class="modal-btn-cancel">Cancel</button>
+        <button type="button" id="orch-modal-run" class="modal-btn-save">Run Orchestrator</button>
+      </div>
+    </div>
+  </div>`;
+
+    const overlay = this.querySelector('#orch-modal');
+    this.querySelector('#orch-modal-close').addEventListener('click', () => overlay.classList.add('hidden'));
+    overlay.addEventListener('click', (e) => { if (e.target === overlay) overlay.classList.add('hidden'); });
+  }
+}
+customElements.define('claudeck-orchestrate-modal', OrchestrateModal);

package/public/js/components/permission-modal.js

@@ -0,0 +1,30 @@
+// Web Component: Permission Approval Modal
+class ClaudeckPermissionModal extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+      <div id="perm-modal" class="modal-overlay hidden" data-persistent>
+        <div class="modal perm-modal">
+          <div class="modal-header perm-modal-header">
+            <h3><span class="perm-tool-icon">&#9888;</span> <span id="perm-modal-tool-name">Tool Approval</span></h3>
+          </div>
+          <span id="perm-bg-badge" class="perm-bg-badge hidden"></span>
+          <div id="perm-modal-summary" class="perm-modal-summary"></div>
+          <details class="perm-modal-details">
+            <summary>Full input</summary>
+            <pre id="perm-modal-input" class="perm-modal-input"></pre>
+          </details>
+          <label class="perm-always-allow">
+            <input type="checkbox" id="perm-always-allow-cb">
+            Always allow <strong id="perm-always-allow-tool"></strong> this session
+          </label>
+          <div class="modal-actions">
+            <button id="perm-deny-btn" class="perm-deny-btn">Deny</button>
+            <button id="perm-allow-btn" class="perm-allow-btn">Allow</button>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('claudeck-permission-modal', ClaudeckPermissionModal);

package/public/js/components/prompt-modal.js

@@ -0,0 +1,31 @@
+class PromptModal extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+  <div id="prompt-modal" class="modal-overlay hidden">
+    <div class="modal">
+      <div class="modal-header">
+        <h3>New Prompt</h3>
+        <button id="modal-close" class="modal-close">&times;</button>
+      </div>
+      <form id="prompt-form">
+        <label for="prompt-title">Title</label>
+        <input id="prompt-title" type="text" placeholder="e.g. Optimize Imports" required>
+        <label for="prompt-desc">Description</label>
+        <input id="prompt-desc" type="text" placeholder="Short description of what it does" required>
+        <label for="prompt-text">Prompt</label>
+        <textarea id="prompt-text" rows="4" placeholder="The full prompt to send to Claude..." required></textarea>
+        <div class="modal-actions">
+          <button type="button" id="modal-cancel" class="modal-btn-cancel">Cancel</button>
+          <button type="submit" class="modal-btn-save">Save Prompt</button>
+        </div>
+      </form>
+    </div>
+  </div>`;
+
+    const overlay = this.querySelector('#prompt-modal');
+    const closeBtn = this.querySelector('#modal-close');
+    if (closeBtn) closeBtn.addEventListener('click', () => overlay.classList.add('hidden'));
+    if (overlay) overlay.addEventListener('click', (e) => { if (e.target === overlay) overlay.classList.add('hidden'); });
+  }
+}
+customElements.define('claudeck-prompt-modal', PromptModal);

package/public/js/components/shortcuts-modal.js

@@ -0,0 +1,45 @@
+// Web Component: Shortcuts Modal
+class ClaudeckShortcutsModal extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+      <div id="shortcuts-modal" class="modal-overlay hidden">
+        <div class="modal">
+          <div class="modal-header">
+            <h3>Keyboard Shortcuts</h3>
+            <button id="shortcuts-modal-close" class="modal-close">&times;</button>
+          </div>
+          <table class="shortcuts-table">
+            <tr><td><span class="kbd">&#8984;K</span></td><td>Focus session search</td></tr>
+            <tr><td><span class="kbd">&#8984;N</span></td><td>New session</td></tr>
+            <tr><td><span class="kbd">&#8984;/</span></td><td>Show keyboard shortcuts</td></tr>
+            <tr><td><span class="kbd">&#8984;B</span></td><td>Toggle right panel</td></tr>
+            <tr><td><span class="kbd">&#8984;&#8679;E</span></td><td>Open file explorer</td></tr>
+            <tr><td><span class="kbd">&#8984;&#8679;G</span></td><td>Open git panel</td></tr>
+            <tr><td><span class="kbd">&#8984;&#8679;R</span></td><td>Open repos panel</td></tr>
+            <tr><td><span class="kbd">&#8984;&#8679;V</span></td><td>Open events panel</td></tr>
+            <tr><td><span class="kbd">&#8984;&#8679;A</span></td><td>Go to home page</td></tr>
+            <tr><td><span class="kbd">&#8984;&#8679;T</span></td><td>Toggle tips feed</td></tr>
+            <tr><td><span class="kbd">&#8984;1</span>&ndash;<span class="kbd">&#8984;4</span></td><td>Focus parallel pane 1&ndash;4</td></tr>
+            <tr><td><span class="kbd">Esc</span></td><td>Close any open modal</td></tr>
+            <tr><td><span class="kbd">Enter</span></td><td>Send message</td></tr>
+            <tr><td><span class="kbd">Shift+Enter</span></td><td>New line in input</td></tr>
+            <tr><td><span class="kbd">/</span></td><td>Slash commands autocomplete</td></tr>
+            <tr><td><span class="kbd">&uarr;</span></td><td>Recall previous message (empty input)</td></tr>
+            <tr><td><span class="kbd">&darr;</span></td><td>Recall next message (in history)</td></tr>
+            <tr><td><span class="kbd">Esc</span></td><td>Cancel history navigation</td></tr>
+          </table>
+        </div>
+      </div>
+    `;
+
+    const overlay = this.querySelector('#shortcuts-modal');
+    const closeBtn = this.querySelector('#shortcuts-modal-close');
+
+    closeBtn.addEventListener('click', () => overlay.classList.add('hidden'));
+    overlay.addEventListener('click', (e) => {
+      if (e.target === overlay) overlay.classList.add('hidden');
+    });
+  }
+}
+
+customElements.define('claudeck-shortcuts-modal', ClaudeckShortcutsModal);