claudeck 1.4.0 → 1.4.2

package/public/css/ui/right-panel.css

@@ -486,3 +486,210 @@
   filter: brightness(1.1);
   box-shadow: var(--glow-strong);
 }
+
+/* ── Marketplace tabs ── */
+
+.marketplace-tabs {
+  display: flex;
+  gap: 4px;
+  margin-top: 12px;
+}
+
+.marketplace-tab {
+  padding: 6px 16px;
+  border-radius: var(--radius-md);
+  font-size: 12px;
+  font-weight: 500;
+  font-family: var(--font-sans);
+  cursor: pointer;
+  transition: all 0.2s var(--ease-smooth);
+  border: 1px solid transparent;
+  background: none;
+  color: var(--text-dim);
+}
+
+.marketplace-tab:hover {
+  color: var(--text);
+  background: var(--bg-tertiary);
+}
+
+.marketplace-tab.active {
+  color: var(--accent);
+  background: var(--accent-dim);
+  border-color: var(--accent);
+}
+
+.marketplace-tab-content {
+  flex: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.marketplace-tab-content::-webkit-scrollbar {
+  width: 4px;
+}
+.marketplace-tab-content::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 2px;
+}
+
+.marketplace-tab-content > .marketplace-subtitle {
+  padding: 12px 16px 4px;
+}
+
+.marketplace-tab-content > .marketplace-list {
+  flex: 1;
+}
+
+.marketplace-tab-content > .marketplace-empty {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.marketplace-tab-content > .marketplace-empty a {
+  color: var(--accent);
+  text-decoration: none;
+  margin-top: 8px;
+}
+
+.marketplace-tab-content > .marketplace-empty a:hover {
+  text-decoration: underline;
+}
+
+/* ── Community plugin items ── */
+
+.marketplace-community-item {
+  cursor: default;
+  padding: 12px;
+}
+
+.marketplace-item-meta {
+  display: flex;
+  gap: 8px;
+  margin-top: 4px;
+  font-size: 10px;
+  color: var(--text-dim);
+  font-family: var(--font-mono);
+}
+
+.marketplace-author {
+  opacity: 0.7;
+}
+
+.marketplace-version {
+  opacity: 0.5;
+}
+
+.marketplace-version-old {
+  opacity: 0.4;
+  text-decoration: line-through;
+}
+
+.marketplace-source {
+  font-size: 9px;
+  font-family: var(--font-display);
+  padding: 1px 6px;
+  border-radius: 4px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  vertical-align: middle;
+}
+
+.marketplace-source.community {
+  color: var(--purple);
+  background: color-mix(in srgb, var(--purple) 15%, transparent);
+  border: 1px solid color-mix(in srgb, var(--purple) 30%, transparent);
+}
+
+.marketplace-source.server {
+  color: var(--orange, #f0a040);
+  background: color-mix(in srgb, var(--orange, #f0a040) 15%, transparent);
+  border: 1px solid color-mix(in srgb, var(--orange, #f0a040) 30%, transparent);
+}
+
+/* ── Action buttons (install / uninstall / update) ── */
+
+.marketplace-item-actions {
+  flex-shrink: 0;
+}
+
+.marketplace-action-btn {
+  padding: 5px 14px;
+  border-radius: var(--radius-md);
+  font-size: 11px;
+  font-weight: 500;
+  font-family: var(--font-sans);
+  cursor: pointer;
+  transition: all 0.2s var(--ease-smooth);
+  border: 1px solid var(--border);
+  white-space: nowrap;
+}
+
+.marketplace-action-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.marketplace-install-btn {
+  background: var(--accent);
+  color: #fff;
+  border-color: var(--accent);
+}
+
+.marketplace-install-btn:hover:not(:disabled) {
+  filter: brightness(1.1);
+  box-shadow: var(--glow);
+}
+
+.marketplace-uninstall-btn {
+  background: none;
+  color: var(--text-dim);
+}
+
+.marketplace-uninstall-btn:hover:not(:disabled) {
+  color: var(--red, #e54);
+  border-color: var(--red, #e54);
+  background: color-mix(in srgb, var(--red, #e54) 10%, transparent);
+}
+
+.marketplace-update-btn {
+  background: var(--purple);
+  color: #fff;
+  border-color: var(--purple);
+}
+
+.marketplace-update-btn:hover:not(:disabled) {
+  filter: brightness(1.1);
+  box-shadow: 0 0 8px color-mix(in srgb, var(--purple) 40%, transparent);
+}
+
+/* ── Loading state ── */
+
+.marketplace-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 48px 16px;
+  color: var(--text-dim);
+  font-size: 12px;
+  font-family: var(--font-sans);
+}
+
+.marketplace-spinner {
+  width: 24px;
+  height: 24px;
+  border: 2px solid var(--border);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}

package/public/css/ui/sessions.css

@@ -287,6 +287,179 @@
   font-family: var(--font-mono);
 }
 
+/* Typed path row */
+.folder-path-row {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.folder-path-row input {
+  flex: 1;
+  padding: 8px 10px;
+  font-size: 12px;
+  font-family: var(--font-mono);
+}
+
+.folder-path-go {
+  flex-shrink: 0;
+  padding: 7px 14px;
+  font-size: 11px;
+  font-family: var(--font-mono);
+  background: var(--bg);
+  color: var(--text-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.folder-path-go:hover {
+  color: var(--accent);
+  border-color: var(--accent);
+}
+
+/* Recents row */
+.folder-recents {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 6px 0 10px;
+  border-bottom: 1px solid var(--border-subtle);
+  margin-bottom: 6px;
+}
+
+.folder-recents-label {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-dim);
+  margin-right: 2px;
+}
+
+.folder-recent-chip {
+  padding: 3px 8px;
+  font-size: 11px;
+  font-family: var(--font-mono);
+  color: var(--text-secondary);
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  cursor: pointer;
+  transition: all 0.15s;
+  max-width: 160px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.folder-recent-chip:hover {
+  color: var(--accent);
+  border-color: var(--accent);
+  background: var(--accent-dim);
+}
+
+/* New folder row */
+.folder-new-toggle-row {
+  margin: 4px 0 8px;
+}
+
+.folder-new-toggle {
+  background: none;
+  border: 1px dashed var(--border);
+  border-radius: var(--radius-md);
+  color: var(--text-dim);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  padding: 6px 10px;
+  width: 100%;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.folder-new-toggle:hover {
+  color: var(--accent);
+  border-color: var(--accent);
+  background: var(--accent-dim);
+}
+
+.folder-new-row {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  margin: 4px 0 8px;
+}
+
+.folder-new-row input {
+  flex: 1;
+  padding: 8px 10px;
+  font-size: 12px;
+  font-family: var(--font-mono);
+}
+
+.modal-btn-cancel {
+  flex-shrink: 0;
+  padding: 7px 12px;
+  font-size: 11px;
+  font-family: var(--font-mono);
+  background: transparent;
+  color: var(--text-dim);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.modal-btn-cancel:hover {
+  color: var(--text);
+  border-color: var(--text-dim);
+}
+
+/* Inline message area (error / success) */
+.add-project-message {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 8px 12px;
+  margin-bottom: 10px;
+  border-radius: var(--radius-md);
+  font-size: 12px;
+  font-family: var(--font-mono);
+}
+
+.add-project-message-error {
+  background: rgba(255, 80, 80, 0.08);
+  color: #ff8080;
+  border: 1px solid rgba(255, 80, 80, 0.3);
+}
+
+.add-project-message-success {
+  background: rgba(80, 200, 120, 0.08);
+  color: #6ad48a;
+  border: 1px solid rgba(80, 200, 120, 0.3);
+}
+
+.add-project-message-action {
+  flex-shrink: 0;
+  padding: 3px 10px;
+  font-size: 11px;
+  font-family: var(--font-mono);
+  background: transparent;
+  color: inherit;
+  border: 1px solid currentColor;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  opacity: 0.85;
+  transition: opacity 0.15s;
+}
+
+.add-project-message-action:hover {
+  opacity: 1;
+}
+
 /* Sessions */
 .sessions-section {
   flex: 1;

package/public/css/ui/settings.css

@@ -0,0 +1,75 @@
+.settings-modal {
+  width: 380px;
+  max-width: 90vw;
+}
+
+.settings-list {
+  padding: 16px;
+}
+
+.settings-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 0;
+  cursor: pointer;
+}
+
+.settings-row + .settings-row {
+  border-top: 1px solid var(--border);
+}
+
+.settings-label {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.settings-label strong {
+  font-size: 13px;
+  color: var(--text-primary);
+}
+
+.settings-label small {
+  font-size: 11px;
+  color: var(--text-secondary);
+}
+
+.settings-toggle {
+  appearance: none;
+  width: 36px;
+  height: 20px;
+  background: var(--bg-tertiary);
+  border-radius: 10px;
+  position: relative;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background 0.2s;
+}
+
+.settings-toggle:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+.settings-toggle::after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--text-secondary);
+  transition: transform 0.2s, background 0.2s;
+}
+
+.settings-toggle:checked {
+  background: var(--accent);
+}
+
+.settings-toggle:checked::after {
+  transform: translateX(16px);
+  background: #fff;
+}

package/public/index.html

@@ -12,7 +12,7 @@
   <link rel="apple-touch-icon" href="/icons/icon-192.png">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400;1,8..60,500&family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="style.css">
   <link id="hljs-theme" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/driver.js@1.3.6/dist/driver.css">
@@ -166,6 +166,12 @@
             <span id="telegram-label">Telegram</span>
           </button>
           <div style="height:1px;background:var(--border);margin:4px 8px;"></div>
+          <button class="header-dropdown-item" id="settings-btn" title="Settings">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <line x1="4" y1="21" x2="4" y2="14"/><line x1="4" y1="10" x2="4" y2="3"/><line x1="12" y1="21" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="3"/><line x1="20" y1="21" x2="20" y2="16"/><line x1="20" y1="12" x2="20" y2="3"/><line x1="1" y1="14" x2="7" y2="14"/><line x1="9" y1="8" x2="15" y2="8"/><line x1="17" y1="16" x2="23" y2="16"/>
+            </svg>
+            <span>Settings</span>
+          </button>
           <button class="header-dropdown-item" id="dev-docs-btn" title="Developer Documentation">
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
               <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
@@ -318,6 +324,7 @@
           <span class="input-waiting-dot"></span>
           <span class="input-waiting-text">Claude is waiting for your response</span>
         </div>
+        <claudeck-jump-to-latest></claudeck-jump-to-latest>
         <div class="input-bar">
           <div class="input-textarea-wrap">
             <textarea id="message-input" placeholder="> type a message or / for commands..." rows="1"></textarea>
@@ -515,10 +522,11 @@
   <claudeck-shortcuts-modal></claudeck-shortcuts-modal>
   <claudeck-cost-dashboard></claudeck-cost-dashboard>
   <claudeck-bg-confirm></claudeck-bg-confirm>
+  <claudeck-queue-stop></claudeck-queue-stop>
   <claudeck-permission-modal></claudeck-permission-modal>
-  <claudeck-linear-create></claudeck-linear-create>
   <claudeck-telegram-modal></claudeck-telegram-modal>
   <claudeck-mcp-modal></claudeck-mcp-modal>
+  <claudeck-settings-modal></claudeck-settings-modal>
   <claudeck-add-project></claudeck-add-project>
 
   <!-- Status Bar (Web Component) -->

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

@@ -8,8 +8,22 @@ class AddProjectModal extends HTMLElement {
         <button id="add-project-close" class="modal-close">&times;</button>
       </div>
       <div class="add-project-body">
+        <div class="folder-path-row">
+          <input id="folder-path-input" type="text" placeholder="Type a path (e.g. ~/code/my-app) and press Enter" autocomplete="off" spellcheck="false">
+          <button id="folder-path-go" class="folder-path-go" title="Go to path">Go</button>
+        </div>
+        <div id="folder-recents" class="folder-recents hidden"></div>
         <div id="folder-breadcrumb" class="folder-breadcrumb"></div>
         <div id="folder-list" class="folder-list"></div>
+        <div id="folder-new-row" class="folder-new-row hidden">
+          <input id="folder-new-name" type="text" placeholder="New folder name" autocomplete="off" spellcheck="false">
+          <button id="folder-new-create" class="modal-btn-save">Create</button>
+          <button id="folder-new-cancel" class="modal-btn-cancel">Cancel</button>
+        </div>
+        <div id="folder-new-toggle-row" class="folder-new-toggle-row">
+          <button id="folder-new-toggle" class="folder-new-toggle" type="button">+ New folder here</button>
+        </div>
+        <div id="add-project-message" class="add-project-message hidden"></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>

package/public/js/components/jump-to-latest.js

@@ -0,0 +1,42 @@
+// Jump-to-latest pill — shown when new content arrives while the user has
+// scrolled up. Click to force-scroll to the bottom and re-engage stick-to-bottom.
+class JumpToLatest extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+      <button id="jump-to-latest-btn" class="jump-to-latest hidden" type="button" aria-label="Jump to latest message">
+        <svg width="14" height="14" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+          <path d="M5 8l5 5 5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+        <span class="jump-to-latest-label">New messages</span>
+      </button>`;
+
+    this._btn = this.querySelector('#jump-to-latest-btn');
+    this._onState = (e) => {
+      // Only react to the active (single-mode) pane for now. In parallel mode
+      // each pane handles its own scroll independently and the global pill stays hidden.
+      const detail = e.detail || {};
+      if (detail.chatId != null) return;
+      if (detail.hasNewBelow) {
+        this._btn.classList.remove('hidden');
+      } else {
+        this._btn.classList.add('hidden');
+      }
+    };
+    window.addEventListener('claudeck:scroll-state', this._onState);
+
+    this._btn.addEventListener('click', async () => {
+      // Lazy import to avoid pulling parallel.js into component init.
+      const [{ getPane }, { scrollToBottom }] = await Promise.all([
+        import('../ui/parallel.js'),
+        import('../core/utils.js'),
+      ]);
+      const pane = getPane(null);
+      if (pane) scrollToBottom(pane, { force: true });
+    });
+  }
+
+  disconnectedCallback() {
+    if (this._onState) window.removeEventListener('claudeck:scroll-state', this._onState);
+  }
+}
+customElements.define('claudeck-jump-to-latest', JumpToLatest);

package/public/js/components/queue-stop-modal.js

@@ -0,0 +1,23 @@
+// Web Component: Queue Stop Confirmation Dialog
+class ClaudeckQueueStop extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+      <div id="queue-stop-modal" class="modal-overlay hidden" data-persistent>
+        <div class="modal queue-stop-modal">
+          <div class="modal-header">
+            <h3>Queue Active</h3>
+          </div>
+          <p class="queue-stop-text">You have queued messages. What would you like to do?</p>
+          <div class="mq-queue-preview" id="queue-stop-preview"></div>
+          <div class="modal-actions queue-stop-actions">
+            <button id="queue-stop-all" class="modal-btn-cancel queue-stop-terminate">Terminate All</button>
+            <button id="queue-stop-skip" class="modal-btn-cancel">Skip to Next</button>
+            <button id="queue-stop-pause" class="modal-btn-save">Just Stop Current</button>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('claudeck-queue-stop', ClaudeckQueueStop);

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

@@ -0,0 +1,65 @@
+// Web Component: Settings Modal
+const SETTINGS_KEY = 'claudeck-settings';
+
+function loadSettings() {
+  try { return JSON.parse(localStorage.getItem(SETTINGS_KEY) || '{}'); } catch { return {}; }
+}
+
+function saveSettings(s) {
+  localStorage.setItem(SETTINGS_KEY, JSON.stringify(s));
+}
+
+export function getSetting(key, fallback = true) {
+  const s = loadSettings();
+  return s[key] !== undefined ? s[key] : fallback;
+}
+
+class ClaudeckSettingsModal extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+      <div id="settings-modal" class="modal-overlay hidden">
+        <div class="modal settings-modal">
+          <div class="modal-header">
+            <h3>Settings</h3>
+            <button id="settings-modal-close" class="modal-close">&times;</button>
+          </div>
+          <div class="settings-list">
+            <label class="settings-row">
+              <span class="settings-label">
+                <strong>Assistant Bot</strong>
+                <small>Show the floating assistant bot bubble</small>
+              </span>
+              <input type="checkbox" id="setting-assistant-bot" class="settings-toggle">
+            </label>
+          </div>
+        </div>
+      </div>
+    `;
+
+    const overlay = this.querySelector('#settings-modal');
+    const closeBtn = this.querySelector('#settings-modal-close');
+    const botToggle = this.querySelector('#setting-assistant-bot');
+
+    // Init toggle state
+    botToggle.checked = getSetting('assistantBot', true);
+
+    closeBtn.addEventListener('click', () => overlay.classList.add('hidden'));
+    overlay.addEventListener('click', (e) => { if (e.target === overlay) overlay.classList.add('hidden'); });
+
+    botToggle.addEventListener('change', () => {
+      const s = loadSettings();
+      s.assistantBot = botToggle.checked;
+      saveSettings(s);
+      // Dispatch event so the bot module can react
+      window.dispatchEvent(new CustomEvent('setting:assistantBot', { detail: botToggle.checked }));
+    });
+
+    // Open from settings button
+    document.getElementById('settings-btn')?.addEventListener('click', () => {
+      botToggle.checked = getSetting('assistantBot', true);
+      overlay.classList.remove('hidden');
+    });
+  }
+}
+
+customElements.define('claudeck-settings-modal', ClaudeckSettingsModal);