claudeck 1.0.0

package/plugins/event-stream/client.js

@@ -0,0 +1,271 @@
+// Event Stream — migrated to Tab SDK plugin
+// This file replaces the old event-stream.js + HTML template
+import { registerTab } from '/js/ui/tab-sdk.js';
+import { escapeHtml, getToolDetail } from '/js/core/utils.js';
+
+registerTab({
+  id: 'events',
+  title: 'Events',
+  icon: '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>',
+  lazy: true,
+
+  init(ctx) {
+    let events = [];
+    let activeFilter = 'all';
+    let searchQuery = '';
+    let listEl, countEl, autoscrollEl, searchEl;
+
+    // ── Build DOM ─────────────────────────────────────
+    const root = document.createElement('div');
+    root.className = 'event-stream-tab';
+    root.style.cssText = 'display:flex;flex-direction:column;flex:1;overflow:hidden;';
+
+    root.innerHTML = `
+      <div class="event-stream-toolbar">
+        <div class="event-stream-filters">
+          <button class="event-filter-btn active" data-filter="all">All</button>
+          <button class="event-filter-btn" data-filter="tool">Tools</button>
+          <button class="event-filter-btn" data-filter="error">Errors</button>
+          <button class="event-filter-btn" data-filter="result">Results</button>
+        </div>
+        <input type="text" placeholder="Search events..." autocomplete="off" class="event-stream-search">
+        <button class="event-stream-clear-btn" title="Clear">Clear</button>
+      </div>
+      <div class="event-stream-list">
+        <div class="event-stream-empty">
+          <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
+          </svg>
+          <span>No events yet</span>
+          <span class="event-stream-empty-hint">Events will appear here as the AI works</span>
+        </div>
+      </div>
+      <div class="event-stream-footer">
+        <span class="event-stream-count">0 events</span>
+        <label class="event-autoscroll-toggle" title="Auto-scroll to latest">
+          <input type="checkbox" checked> Auto
+        </label>
+      </div>
+    `;
+
+    listEl = root.querySelector('.event-stream-list');
+    countEl = root.querySelector('.event-stream-count');
+    autoscrollEl = root.querySelector('.event-autoscroll-toggle input');
+    searchEl = root.querySelector('.event-stream-search');
+
+    // ── Helpers ───────────────────────────────────────
+    function formatTime(ts) {
+      const d = ts instanceof Date ? ts : new Date(ts);
+      return d.toTimeString().slice(0, 8);
+    }
+
+    function badgeClass(type) {
+      switch (type) {
+        case 'tool': return 'badge-tool';
+        case 'result': return 'badge-result';
+        case 'error': return 'badge-error';
+        case 'done': return 'badge-done';
+        default: return 'badge-tool';
+      }
+    }
+
+    function badgeLabel(type) {
+      switch (type) {
+        case 'tool': return 'TOOL';
+        case 'result': return 'OK';
+        case 'error': return 'ERR';
+        case 'done': return 'DONE';
+        default: return type.toUpperCase();
+      }
+    }
+
+    function renderEvent(evt) {
+      const row = document.createElement('div');
+      row.className = 'event-row';
+      row.dataset.type = evt.type;
+
+      const content = document.createElement('div');
+      content.style.cssText = 'display:flex;align-items:flex-start;gap:8px;flex-grow:1;min-width:0;';
+      content.innerHTML = `
+        <span class="event-time">${formatTime(evt.timestamp)}</span>
+        <span class="event-badge ${badgeClass(evt.type)}">${badgeLabel(evt.type)}</span>
+        <span class="event-summary">${escapeHtml(evt.summary)}</span>
+      `;
+      row.appendChild(content);
+
+      if (evt.detail) {
+        const detail = document.createElement('div');
+        detail.className = 'event-detail';
+        detail.textContent = evt.detail;
+        row.appendChild(detail);
+      }
+
+      row.addEventListener('click', () => row.classList.toggle('expanded'));
+      return row;
+    }
+
+    function matchesFilter(evt) {
+      if (activeFilter === 'all') return true;
+      if (activeFilter === 'tool') return evt.type === 'tool';
+      if (activeFilter === 'error') return evt.type === 'error';
+      if (activeFilter === 'result') return evt.type === 'result' || evt.type === 'done';
+      return true;
+    }
+
+    function matchesSearch(row) {
+      if (!searchQuery) return true;
+      return row.textContent.toLowerCase().includes(searchQuery.toLowerCase());
+    }
+
+    function applyFilters() {
+      let visible = 0;
+      for (const row of listEl.children) {
+        const show = matchesFilter({ type: row.dataset.type }) && matchesSearch(row);
+        row.style.display = show ? '' : 'none';
+        if (show) visible++;
+      }
+      updateCount(visible);
+    }
+
+    function updateCount(count) {
+      const n = count != null ? count : events.length;
+      countEl.textContent = `${n} event${n !== 1 ? 's' : ''}`;
+      ctx.showBadge(events.length);
+    }
+
+    function autoScroll() {
+      if (autoscrollEl.checked) {
+        listEl.scrollTop = listEl.scrollHeight;
+      }
+    }
+
+    function addEvent(evt) {
+      evt.timestamp = evt.timestamp || new Date();
+      events.push(evt);
+      // Remove empty state placeholder if present
+      const emptyEl = listEl.querySelector('.event-stream-empty');
+      if (emptyEl) emptyEl.remove();
+      const row = renderEvent(evt);
+      listEl.appendChild(row);
+      if (!matchesFilter(evt) || !matchesSearch(row)) {
+        row.style.display = 'none';
+      }
+      updateCount();
+      autoScroll();
+    }
+
+    function clearEvents() {
+      events = [];
+      listEl.innerHTML = `
+        <div class="event-stream-empty">
+          <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
+          </svg>
+          <span>No events yet</span>
+          <span class="event-stream-empty-hint">Events will appear here as the AI works</span>
+        </div>`;
+      updateCount(0);
+    }
+
+    async function loadSessionEvents(sessionId) {
+      if (!sessionId) return;
+      try {
+        const messages = await (await fetch(`/api/sessions/${encodeURIComponent(sessionId)}/messages-single`)).json();
+        for (const msg of messages) {
+          const data = JSON.parse(msg.content);
+          const ts = msg.created_at ? new Date(msg.created_at * 1000) : new Date();
+          switch (msg.role) {
+            case 'tool':
+              addEvent({
+                type: 'tool', timestamp: ts,
+                summary: `${data.name}: ${getToolDetail(data.name, data.input) || '(no detail)'}`,
+                detail: JSON.stringify(data.input, null, 2),
+                toolName: data.name,
+              });
+              break;
+            case 'tool_result':
+              addEvent({
+                type: data.isError ? 'error' : 'result', timestamp: ts,
+                summary: (data.content || '').slice(0, 100),
+                detail: data.content,
+              });
+              break;
+            case 'result':
+              addEvent({
+                type: 'done', timestamp: ts,
+                summary: `${data.model || ''} · ${data.num_turns || 0} turns · $${(data.cost_usd || 0).toFixed(4)}`,
+              });
+              break;
+            case 'error':
+              addEvent({ type: 'error', timestamp: ts, summary: data.error || 'Unknown error' });
+              break;
+          }
+        }
+      } catch (err) {
+        console.error('Failed to load session events:', err);
+      }
+    }
+
+    // ── UI bindings ──────────────────────────────────
+    // Filter buttons
+    const filterBtns = root.querySelectorAll('.event-filter-btn');
+    for (const btn of filterBtns) {
+      btn.addEventListener('click', () => {
+        activeFilter = btn.dataset.filter;
+        filterBtns.forEach(b => b.classList.toggle('active', b === btn));
+        applyFilters();
+      });
+    }
+
+    // Search
+    let searchTimer = null;
+    searchEl.addEventListener('input', () => {
+      clearTimeout(searchTimer);
+      searchTimer = setTimeout(() => {
+        searchQuery = searchEl.value;
+        applyFilters();
+      }, 200);
+    });
+
+    // Clear
+    root.querySelector('.event-stream-clear-btn').addEventListener('click', () => clearEvents());
+
+    // ── Event listeners ──────────────────────────────
+    ctx.on('ws:message', (msg) => {
+      switch (msg.type) {
+        case 'tool':
+          addEvent({
+            type: 'tool',
+            summary: `${msg.name}: ${getToolDetail(msg.name, msg.input) || '(no detail)'}`,
+            detail: JSON.stringify(msg.input, null, 2),
+            toolName: msg.name,
+          });
+          break;
+        case 'tool_result':
+          addEvent({
+            type: msg.isError ? 'error' : 'result',
+            summary: (msg.content || '').slice(0, 100),
+            detail: msg.content,
+          });
+          break;
+        case 'result':
+          addEvent({
+            type: 'done',
+            summary: `${msg.model || ''} · ${msg.num_turns || 0} turns · $${(msg.cost_usd || 0).toFixed(4)}`,
+          });
+          break;
+        case 'error':
+          addEvent({ type: 'error', summary: msg.error || 'Unknown error' });
+          break;
+      }
+    });
+
+    // Session switch
+    ctx.onState('sessionId', (newId) => {
+      clearEvents();
+      if (newId) loadSessionEvents(newId);
+    });
+
+    return root;
+  },
+});

package/plugins/linear/client.css

@@ -0,0 +1,345 @@
+/* ── Linear Tab ───────────────────────────────────────── */
+
+.linear-tab {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+  height: 100%;
+}
+
+/* Tab header with nav + actions */
+.linear-tab-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+.linear-tab-nav {
+  display: flex;
+  gap: 2px;
+  background: var(--bg-tertiary);
+  border-radius: 6px;
+  padding: 2px;
+}
+
+.linear-nav-btn {
+  background: none;
+  border: none;
+  color: var(--text-secondary);
+  font-size: 11px;
+  font-weight: 600;
+  padding: 4px 12px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+
+.linear-nav-btn:hover {
+  color: var(--text-primary);
+}
+
+.linear-nav-btn.active {
+  background: var(--bg);
+  color: var(--text-primary);
+  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+}
+
+.linear-tab-actions {
+  display: flex;
+  gap: 4px;
+}
+
+.linear-tab-actions button {
+  background: none;
+  border: none;
+  color: var(--text-dim);
+  cursor: pointer;
+  padding: 2px 4px;
+  border-radius: var(--radius);
+  font-size: 14px;
+  line-height: 1;
+  transition: color 0.15s, background 0.15s;
+}
+
+.linear-tab-actions button:hover {
+  color: var(--text);
+  background: var(--bg-tertiary);
+}
+
+.linear-create-issue-btn {
+  font-size: 16px !important;
+  font-weight: 600;
+}
+
+.linear-tab-actions button.spinning svg {
+  animation: linearSpin 0.8s linear infinite;
+}
+
+@keyframes linearSpin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+/* Views */
+.linear-view {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ── Issues view ─────────────────────────────────────── */
+
+.linear-issues {
+  flex: 1;
+  overflow-y: auto;
+  padding: 6px 0;
+}
+
+.linear-issues::-webkit-scrollbar { width: 4px; }
+.linear-issues::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
+
+.linear-issue {
+  display: block;
+  padding: 8px 12px;
+  cursor: pointer;
+  text-decoration: none;
+  transition: background 0.1s;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.linear-issue:hover {
+  background: var(--bg-tertiary);
+}
+
+.linear-issue-top {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.linear-issue-priority {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.linear-issue-id {
+  font-size: 11px;
+  color: var(--text-dim);
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.linear-issue-title {
+  font-size: 12px;
+  color: var(--text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+}
+
+.linear-issue-meta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 3px;
+  padding-left: 13px;
+  font-size: 10px;
+  color: var(--text-dim);
+}
+
+.linear-issue-state {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+}
+
+.linear-issue-state-dot {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.linear-issue-due {
+  color: var(--warning);
+}
+
+.linear-issue-label {
+  padding: 0 4px;
+  border-radius: 2px;
+  font-size: 10px;
+  line-height: 1.5;
+}
+
+.linear-panel-footer {
+  padding: 6px 12px;
+  border-top: 1px solid var(--border);
+  font-size: 10px;
+  color: var(--text-dim);
+  text-align: center;
+  flex-shrink: 0;
+}
+
+.linear-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 32px 16px;
+  color: var(--text-dim);
+  font-size: 12px;
+  text-align: center;
+  gap: 8px;
+  flex: 1;
+}
+
+.linear-empty .linear-empty-icon {
+  font-size: 24px;
+  opacity: 0.5;
+}
+
+/* ── Settings view ───────────────────────────────────── */
+
+.linear-settings-view {
+  padding: 16px;
+  overflow-y: auto;
+}
+
+.ls-form {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.ls-toggle-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.ls-switch {
+  position: relative;
+  display: inline-block;
+  width: 36px;
+  height: 20px;
+  cursor: pointer;
+}
+
+.ls-switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.ls-slider {
+  position: absolute;
+  inset: 0;
+  background: var(--border);
+  border-radius: 20px;
+  transition: background 0.2s;
+}
+
+.ls-slider::before {
+  content: "";
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  left: 3px;
+  bottom: 3px;
+  background: #fff;
+  border-radius: 50%;
+  transition: transform 0.2s;
+}
+
+.ls-switch input:checked + .ls-slider {
+  background: var(--accent);
+}
+
+.ls-switch input:checked + .ls-slider::before {
+  transform: translateX(16px);
+}
+
+.ls-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.ls-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.ls-input {
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 8px 10px;
+  font-size: 12px;
+  font-family: var(--font-mono, monospace);
+  color: var(--text-primary);
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.ls-input:focus {
+  border-color: var(--accent);
+}
+
+.ls-input::placeholder {
+  color: var(--text-tertiary);
+}
+
+.ls-hint {
+  font-size: 10px;
+  color: var(--text-tertiary);
+}
+
+.ls-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 4px;
+}
+
+.ls-btn {
+  padding: 7px 16px;
+  border-radius: 6px;
+  border: none;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.15s;
+  background: var(--accent);
+  color: #fff;
+}
+
+.ls-btn:hover { opacity: 0.85; }
+.ls-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.ls-btn-secondary {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+  border: 1px solid var(--border);
+}
+
+.ls-status {
+  font-size: 11px;
+  padding: 8px 10px;
+  border-radius: 6px;
+  transition: opacity 0.2s;
+}
+
+.ls-status.hidden { display: none; }
+.ls-success { background: rgba(34,197,94,0.12); color: #22c55e; }
+.ls-error { background: rgba(239,68,68,0.12); color: #ef4444; }