claudeck 1.2.0 → 1.3.1

package/public/js/components/status-bar.js

@@ -0,0 +1,97 @@
+class StatusBar extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+  <footer class="status-bar" id="status-bar">
+    <div class="status-bar-left">
+      <span class="sb-item sb-version" id="sb-version" title="Claudeck version"></span>
+      <span class="sb-sep"></span>
+      <span class="sb-item sb-connection" id="sb-connection" title="Connection status">
+        <span class="sb-dot" id="sb-dot"></span>
+        <span id="sb-connection-text">connecting</span>
+      </span>
+      <span class="sb-sep"></span>
+      <span class="sb-item sb-branch" id="sb-branch" title="Current git branch">
+        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="6" y1="3" x2="6" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/></svg>
+        <span id="sb-branch-name">--</span>
+      </span>
+      <span class="sb-sep"></span>
+      <span class="sb-item sb-project" id="sb-project" title="Current project">
+        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
+        <span id="sb-project-name">no project</span>
+      </span>
+    </div>
+    <div class="status-bar-center">
+      <span class="sb-item sb-activity" id="sb-activity"></span>
+    </div>
+    <div class="status-bar-right">
+      <span class="sb-item sb-bg-sessions hidden" id="sb-bg-sessions" title="Background sessions">
+        <span class="sb-bg-dot"></span>
+        <span id="sb-bg-count">0</span> bg
+      </span>
+      <span class="sb-sep sb-bg-sep hidden" id="sb-bg-sep"></span>
+      <span class="sb-item sb-tokens hidden" id="sb-streaming-tokens" title="Streaming tokens">
+        <span id="sb-tokens-value">~0 tokens</span>
+      </span>
+      <span class="sb-sep sb-tokens-sep hidden" id="sb-tokens-sep"></span>
+      <span class="sb-item sb-context-gauge" id="sb-context-gauge-item">
+        <span id="context-gauge" class="context-gauge hidden" title="Session context usage">
+          <span class="context-gauge-bar"><span id="context-gauge-fill" class="context-gauge-fill"></span></span>
+          <span id="context-gauge-label" class="context-gauge-label">0/200k</span>
+        </span>
+      </span>
+      <span class="sb-sep hidden" id="sb-gauge-sep"></span>
+      <span class="sb-item sb-credits" id="sb-credits" title="Credits">
+        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
+        <div class="sb-credits-popup" id="sb-credits-popup">
+          <div class="sb-credits-header">Credits</div>
+          <div class="sb-credits-body">
+            <div class="sb-credits-row">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
+              <div class="sb-credits-info">
+                <span class="sb-credits-role">Creator & Architect</span>
+                <span class="sb-credits-name">Hamed Farag</span>
+              </div>
+            </div>
+            <div class="sb-credits-divider"></div>
+            <div class="sb-credits-row">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#a78bfa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a4 4 0 0 0-4 4c0 2 2 3 2 5h4c0-2 2-3 2-5a4 4 0 0 0-4-4z"/><line x1="10" y1="17" x2="14" y2="17"/><line x1="10" y1="20" x2="14" y2="20"/><line x1="11" y1="23" x2="13" y2="23"/></svg>
+              <div class="sb-credits-info">
+                <span class="sb-credits-role">AI Assistant</span>
+                <span class="sb-credits-name">Claude Code AI</span>
+              </div>
+            </div>
+          </div>
+          <div class="sb-credits-sponsor">
+            <div class="sb-credits-row">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>
+              <div class="sb-credits-info">
+                <span class="sb-credits-role">Sponsor</span>
+                <span class="sb-credits-name">WakeCap</span>
+              </div>
+            </div>
+          </div>
+          <a class="sb-credits-kofi" href="https://ko-fi.com/hamedfarag" target="_blank" rel="noopener noreferrer">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#ff5e5b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8h1a4 4 0 0 1 0 8h-1"/><path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"/><line x1="6" y1="1" x2="6" y2="4"/><line x1="10" y1="1" x2="10" y2="4"/><line x1="14" y1="1" x2="14" y2="4"/></svg>
+            <span>Support on Ko-fi</span>
+          </a>
+        </div>
+      </span>
+      <span class="sb-sep sb-credits-sep"></span>
+      <span class="sb-item sb-cost sb-cost-hint" id="sb-cost">
+        <span id="sb-session-cost">$0.00</span>
+        <span class="sb-cost-pipe">/</span>
+        <span id="sb-total-cost">$0.00</span>
+        <div class="sb-hint-popup">
+          <div class="sb-hint-header">Session / Total Cost</div>
+          <div class="sb-hint-body">
+            <p>Every message carries a fixed <strong>~20k token</strong> overhead from the Claude Code SDK — this includes the system prompt (~12-15k), core tool schemas (~4-5k), and environment context (~1k).</p>
+            <p>This cost is unavoidable and cannot be reduced. Disabling optional tools in Session settings saves only ~2-3k tokens.</p>
+            <p class="sb-hint-dim">Subsequent turns benefit from Anthropic's prompt caching, which significantly reduces the effective cost.</p>
+          </div>
+        </div>
+      </span>
+    </div>
+  </footer>`;
+  }
+}
+customElements.define('claudeck-status-bar', StatusBar);

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

@@ -0,0 +1,29 @@
+class SystemPromptModal extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+  <div id="system-prompt-modal" class="modal-overlay hidden">
+    <div class="modal">
+      <div class="modal-header">
+        <h3>System Prompt</h3>
+        <button id="sp-modal-close" class="modal-close">&times;</button>
+      </div>
+      <form id="system-prompt-form">
+        <label for="sp-textarea">Custom instructions for Claude in this project</label>
+        <p class="sp-hint">If a <code>CLAUDE.md</code> file exists in the project root, it is automatically included by the SDK — no need to duplicate it here.</p>
+        <textarea id="sp-textarea" rows="8" placeholder="e.g., You are an expert in React + TypeScript. This is a monorepo..."></textarea>
+        <div class="modal-actions">
+          <button type="button" id="sp-clear-btn" class="modal-btn-cancel">Clear</button>
+          <button type="button" id="sp-cancel-btn" class="modal-btn-cancel">Cancel</button>
+          <button type="submit" class="modal-btn-save">Save</button>
+        </div>
+      </form>
+    </div>
+  </div>`;
+
+    const overlay = this.querySelector('#system-prompt-modal');
+    const closeBtn = this.querySelector('#sp-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-system-prompt-modal', SystemPromptModal);

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

@@ -0,0 +1,84 @@
+// Web Component: Telegram Settings Modal
+class ClaudeckTelegramModal extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+      <div id="telegram-modal" class="modal-overlay hidden">
+        <div class="modal telegram-modal">
+          <div class="modal-header">
+            <h2>
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M21.2 4.6L2.4 11.2c-.8.3-.8 1.5 0 1.8l4.6 1.7 1.7 5.5c.2.6 1 .8 1.4.3l2.5-2.8 4.8 3.5c.6.4 1.4.1 1.5-.6L21.2 4.6z"/>
+              </svg>
+              Telegram Notifications
+            </h2>
+            <button class="modal-close" id="telegram-close">&times;</button>
+          </div>
+          <div class="modal-body" style="padding:16px;">
+            <div class="telegram-form">
+              <label class="telegram-toggle-row">
+                <input type="checkbox" id="telegram-enabled">
+                <span>Enable Telegram notifications</span>
+              </label>
+              <div class="telegram-field">
+                <label for="telegram-bot-token">Bot Token</label>
+                <input type="password" id="telegram-bot-token" placeholder="123456:ABC-DEF..." autocomplete="off">
+              </div>
+              <div class="telegram-field">
+                <label for="telegram-chat-id">Chat ID</label>
+                <input type="text" id="telegram-chat-id" placeholder="-100123456789" autocomplete="off">
+              </div>
+              <div class="telegram-field">
+                <label for="telegram-afk-timeout">AFK Approval Timeout (minutes)</label>
+                <input type="number" id="telegram-afk-timeout" min="1" max="120" value="15" style="width:80px;">
+              </div>
+
+              <div class="telegram-notify-section">
+                <label class="telegram-field-label">Notification Events</label>
+                <div class="telegram-notify-grid">
+                  <label class="telegram-toggle-row"><input type="checkbox" id="tg-notify-session" checked> Session complete</label>
+                  <label class="telegram-toggle-row"><input type="checkbox" id="tg-notify-workflow" checked> Workflow complete</label>
+                  <label class="telegram-toggle-row"><input type="checkbox" id="tg-notify-chain" checked> Chain complete</label>
+                  <label class="telegram-toggle-row"><input type="checkbox" id="tg-notify-agent" checked> Agent complete</label>
+                  <label class="telegram-toggle-row"><input type="checkbox" id="tg-notify-orchestrator" checked> Orchestrator complete</label>
+                  <label class="telegram-toggle-row"><input type="checkbox" id="tg-notify-dag" checked> DAG complete</label>
+                  <label class="telegram-toggle-row"><input type="checkbox" id="tg-notify-errors" checked> Errors &amp; failures</label>
+                  <label class="telegram-toggle-row"><input type="checkbox" id="tg-notify-permissions" checked> Permission requests (AFK approve/deny)</label>
+                  <label class="telegram-toggle-row"><input type="checkbox" id="tg-notify-start" checked> Task start</label>
+                </div>
+              </div>
+
+              <div class="telegram-actions">
+                <button class="btn btn-secondary" id="telegram-test-btn">Send Test</button>
+                <button class="btn btn-primary" id="telegram-save-btn">Save</button>
+              </div>
+              <div id="telegram-status" class="telegram-status hidden"></div>
+              <details class="telegram-help">
+                <summary>Setup instructions</summary>
+                <ol>
+                  <li>Open Telegram and search for <strong>@BotFather</strong></li>
+                  <li>Send <code>/newbot</code> and follow the prompts to create a bot</li>
+                  <li>Copy the <strong>Bot Token</strong> and paste it above</li>
+                  <li>Start a chat with your new bot (send <code>/start</code>)</li>
+                  <li>To find your <strong>Chat ID</strong>, send a message to the bot, then visit:<br>
+                    <code>https://api.telegram.org/bot&lt;TOKEN&gt;/getUpdates</code><br>
+                    Look for <code>"chat":{"id":...</code> in the response</li>
+                  <li>For group chats, add the bot to the group and use the group's chat ID (starts with <code>-</code>)</li>
+                </ol>
+              </details>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+
+    const overlay = this.querySelector('#telegram-modal');
+    const closeBtn = this.querySelector('#telegram-close');
+
+    closeBtn.addEventListener('click', () => overlay.classList.add('hidden'));
+    overlay.addEventListener('click', (e) => {
+      if (e.target === overlay) overlay.classList.add('hidden');
+    });
+  }
+}
+
+customElements.define('claudeck-telegram-modal', ClaudeckTelegramModal);

package/public/js/components/welcome-overlay.js

@@ -0,0 +1,60 @@
+class WelcomeOverlay extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+  <div id="welcome-overlay" class="welcome-overlay hidden">
+    <div class="welcome-container">
+      <div class="welcome-mascot">
+        <img src="/icons/whaly.png" alt="Whaly" class="welcome-whaly" draggable="false">
+      </div>
+      <h1 class="welcome-title">Welcome to <span>Claudeck</span></h1>
+      <div class="welcome-version">v1.0 &middot; browser-based AI development environment</div>
+      <p class="welcome-description">
+        Your local command center for Claude Code. Chat with AI, run workflows,
+        manage projects, explore files, and orchestrate autonomous agents &mdash;
+        all from a single interface.
+      </p>
+      <div class="welcome-features">
+        <div class="welcome-feature">
+          <div class="welcome-feature-icon">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+            </svg>
+          </div>
+          <div>
+            <div class="welcome-feature-title">AI Chat</div>
+            <div class="welcome-feature-desc">Stream conversations with Claude, run slash commands, attach files</div>
+          </div>
+        </div>
+        <div class="welcome-feature">
+          <div class="welcome-feature-icon">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="12" cy="12" r="3"/><path d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83"/>
+            </svg>
+          </div>
+          <div>
+            <div class="welcome-feature-title">Agents & Workflows</div>
+            <div class="welcome-feature-desc">Automate tasks with pre-built or custom agent pipelines</div>
+          </div>
+        </div>
+        <div class="welcome-feature">
+          <div class="welcome-feature-icon">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
+            </svg>
+          </div>
+          <div>
+            <div class="welcome-feature-title">Dev Tools</div>
+            <div class="welcome-feature-desc">File explorer, Git panel, MCP servers, cost analytics</div>
+          </div>
+        </div>
+      </div>
+      <div class="welcome-actions">
+        <button id="welcome-get-started" class="welcome-btn-primary">Get Started</button>
+        <button id="welcome-take-tour" class="welcome-btn-secondary">Take a Tour</button>
+      </div>
+      <div class="welcome-hint">Press <kbd>Enter</kbd> or <kbd>Esc</kbd> to skip</div>
+    </div>
+  </div>`;
+  }
+}
+customElements.define('claudeck-welcome-overlay', WelcomeOverlay);

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

@@ -0,0 +1,41 @@
+class WorkflowModal extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+  <div id="wf-modal" class="modal-overlay hidden">
+    <div class="modal agent-form-modal">
+      <div class="modal-header">
+        <h3 id="wf-modal-title">New Workflow</h3>
+        <button id="wf-modal-close" class="modal-close">&times;</button>
+      </div>
+      <form id="wf-form">
+        <div class="af-section">
+          <div class="af-section-label">Identity</div>
+          <div class="af-field">
+            <label for="wf-form-title">Title</label>
+            <input id="wf-form-title" type="text" placeholder="e.g. Review PR" required>
+          </div>
+          <div class="af-field">
+            <label for="wf-form-desc">Description</label>
+            <input id="wf-form-desc" type="text" placeholder="Short description of this workflow">
+          </div>
+        </div>
+        <div class="af-section">
+          <div class="af-section-label">Steps</div>
+          <div id="wf-steps-list" class="wf-steps-list"></div>
+          <button type="button" id="wf-add-step-btn" class="wf-step-add">+ Add Step</button>
+        </div>
+        <input id="wf-form-edit-id" type="hidden">
+        <div class="modal-actions">
+          <button type="button" id="wf-modal-cancel" class="modal-btn-cancel">Cancel</button>
+          <button type="submit" class="modal-btn-save">Save Workflow</button>
+        </div>
+      </form>
+    </div>
+  </div>`;
+
+    const overlay = this.querySelector('#wf-modal');
+    this.querySelector('#wf-modal-close').addEventListener('click', () => overlay.classList.add('hidden'));
+    overlay.addEventListener('click', (e) => { if (e.target === overlay) overlay.classList.add('hidden'); });
+  }
+}
+customElements.define('claudeck-workflow-modal', WorkflowModal);

package/public/js/core/api.js

@@ -1,5 +1,15 @@
 // All fetch() calls consolidated into named functions
 
+// Global 401 interceptor — redirect to login on auth failure
+const _origFetch = window.fetch;
+window.fetch = async (...args) => {
+  const res = await _origFetch(...args);
+  if (res.status === 401 && !window.location.pathname.startsWith("/login")) {
+    window.location.href = "/login";
+  }
+  return res;
+};
+
 export async function fetchProjects() {
   const res = await fetch("/api/projects");
   return res.json();

package/public/js/core/dom.js

@@ -99,6 +99,8 @@ export const $ = {
   fpSearch: document.getElementById("fp-search"),
   fpList: document.getElementById("fp-list"),
   fpCount: document.getElementById("fp-count"),
+  fpSelected: document.getElementById("fp-selected"),
+  fpEmpty: document.getElementById("fp-empty"),
 
   // Image attachments
   imageBtn: document.getElementById("image-btn"),
@@ -114,8 +116,7 @@ export const $ = {
   modalCloseBtn: document.getElementById("modal-close"),
   modalCancelBtn: document.getElementById("modal-cancel"),
 
-  // Shortcuts
-  shortcutsModal: document.getElementById("shortcuts-modal"),
+  // Shortcuts — rendered by <claudeck-shortcuts-modal> web component
 
   // Cost dashboard
   costDashboardModal: document.getElementById("cost-dashboard-modal"),

package/public/js/core/ws.js

@@ -44,7 +44,13 @@ export function connectWebSocket() {
     emit("ws:message", msg);
   };
 
-  ws.onclose = () => {
+  ws.onclose = (event) => {
+    // Auth rejected — redirect to login instead of reconnecting
+    if (event.code === 1008 || event.code === 4401) {
+      window.location.href = "/login";
+      return;
+    }
+
     const delay = getBackoffDelay();
     backoffAttempt++;
     console.log(`WebSocket disconnected, reconnecting in ${Math.round(delay)}ms (attempt ${backoffAttempt})...`);