@zeyos/client 0.1.0

package/samples/kanban/js/kanban.js

@@ -0,0 +1,246 @@
+/**
+ * Kanban board — column rendering + HTML5 drag-and-drop.
+ * Dispatches custom events for ticket interactions; all API calls are handled
+ * in main.js to keep this module free of async side-effects.
+ */
+import { STATUS_MAP, PRIORITY_MAP } from './constants.js';
+import { runtime } from './state.js';
+
+// ── Custom Events ──────────────────────────────────────────────────────────
+// 'ticket:open'   — detail({ ticketId })
+// 'ticket:move'   — detail({ ticketId, toStatus })
+// 'ticket:create' — detail({ status })  (quick-create in a column)
+
+// ── Public API ─────────────────────────────────────────────────────────────
+
+/** Render (or re-render) the entire board into #kanban-board. */
+export function renderBoard() {
+  const board = document.getElementById('kanban-board');
+  if (!board) return;
+
+  const { settings, tickets } = runtime;
+
+  if (settings.columns.length === 0) {
+    board.innerHTML = '';
+    document.getElementById('no-columns-banner')?.classList.remove('hidden');
+    return;
+  }
+
+  document.getElementById('no-columns-banner')?.classList.add('hidden');
+  board.innerHTML = '';
+
+  for (const statusValue of settings.columns) {
+    const status  = STATUS_MAP[statusValue];
+    if (!status) continue;
+    const colTickets = tickets.filter(t => t.status === statusValue);
+    board.appendChild(_buildColumn(status, colTickets));
+  }
+}
+
+/** Update a single column in-place (faster than full re-render). */
+export function updateColumn(statusValue) {
+  const col = document.querySelector(`[data-column="${statusValue}"]`);
+  if (!col) { renderBoard(); return; }
+
+  const status     = STATUS_MAP[statusValue];
+  const colTickets = runtime.tickets.filter(t => t.status === statusValue);
+
+  const badge = col.querySelector('.col-badge');
+  if (badge) badge.textContent = colTickets.length;
+
+  const list = col.querySelector('.col-cards');
+  if (list) {
+    list.innerHTML = '';
+    for (const ticket of colTickets) list.appendChild(_buildCard(ticket));
+  }
+}
+
+// ── Column Builder ─────────────────────────────────────────────────────────
+
+function _buildColumn(status, tickets) {
+  const col = document.createElement('div');
+  col.className = 'kanban-col flex flex-col rounded-xl shadow-sm overflow-hidden';
+  col.style.cssText = 'min-width:280px; width:280px; max-height:100%;';
+  col.dataset.column = status.value;
+
+  const header = document.createElement('div');
+  header.className = 'col-header flex items-center justify-between px-3 py-2.5 flex-shrink-0';
+  header.style.cssText = `background:${status.headerBg}; border-bottom:2px solid ${status.cardBorder};`;
+  header.innerHTML = `
+    <div class="flex items-center gap-2">
+      <span class="font-semibold text-sm" style="color:${status.headerText}">${status.label}</span>
+      <span class="col-badge text-xs font-medium px-1.5 py-0.5 rounded-full bg-white/60" style="color:${status.headerText}">${tickets.length}</span>
+    </div>
+    <button class="col-add-btn text-lg leading-none opacity-50 hover:opacity-100 transition-opacity" style="color:${status.headerText}" title="Add ticket" data-status="${status.value}">+</button>
+  `;
+  col.appendChild(header);
+
+  const body = document.createElement('div');
+  body.className = 'col-cards flex-1 overflow-y-auto p-2 space-y-2 bg-white/50';
+  body.style.cssText = 'min-height:80px; background:#f8fafc;';
+  body.dataset.dropzone = status.value;
+
+  for (const ticket of tickets) body.appendChild(_buildCard(ticket));
+
+  body.addEventListener('dragover', _onDragOver);
+  body.addEventListener('dragenter', _onDragEnter);
+  body.addEventListener('dragleave', _onDragLeave);
+  body.addEventListener('drop', _onDrop);
+
+  col.appendChild(body);
+
+  header.querySelector('.col-add-btn').addEventListener('click', () => {
+    col.dispatchEvent(new CustomEvent('ticket:create', {
+      bubbles: true, detail: { status: status.value },
+    }));
+  });
+
+  return col;
+}
+
+// ── Card Builder ───────────────────────────────────────────────────────────
+
+function _buildCard(ticket) {
+  const priority = PRIORITY_MAP[ticket.priority ?? 2];
+  const status   = STATUS_MAP[ticket.status ?? 0];
+
+  const card = document.createElement('div');
+  card.className =
+    'kanban-card bg-white rounded-lg p-3 shadow-sm cursor-pointer ' +
+    'hover:shadow-md transition-all select-none group relative';
+  card.style.cssText = `border-left: 3px solid ${status?.cardBorder ?? '#94a3b8'};`;
+  card.draggable = true;
+  card.dataset.ticketId = ticket.ID;
+
+  const meta = document.createElement('div');
+  meta.className = 'flex items-center justify-between mb-1';
+  meta.innerHTML = `
+    <span class="text-xs text-slate-400 font-mono">${ticket.ticketnum ?? `#${ticket.ID}`}</span>
+    <span class="text-xs font-semibold" style="color:${priority.color}" title="${priority.label}">${priority.symbol}</span>
+  `;
+  card.appendChild(meta);
+
+  const name = document.createElement('p');
+  name.className = 'text-sm font-medium text-slate-800 leading-snug line-clamp-2 mb-1.5';
+  name.textContent = ticket.name ?? '(untitled)';
+  card.appendChild(name);
+
+  if (ticket.duedate) {
+    const due = document.createElement('div');
+    due.className = 'flex items-center gap-1 text-xs mb-1';
+    const isOverdue = ticket.duedate * 1000 < Date.now();
+    due.innerHTML = `
+      <span class="${isOverdue ? 'text-red-500' : 'text-slate-400'}">📅</span>
+      <span class="${isOverdue ? 'text-red-500 font-medium' : 'text-slate-400'}">${_formatDate(ticket.duedate)}</span>
+    `;
+    card.appendChild(due);
+  }
+
+  const actions = document.createElement('div');
+  actions.className =
+    'absolute top-1.5 right-1.5 hidden group-hover:flex gap-1';
+  actions.innerHTML = `
+    <button class="card-btn-edit p-1 rounded bg-slate-100 hover:bg-blue-100 text-slate-500 hover:text-blue-600 text-xs" title="Edit">✎</button>
+    <button class="card-btn-delete p-1 rounded bg-slate-100 hover:bg-red-100 text-slate-500 hover:text-red-600 text-xs" title="Delete">✕</button>
+  `;
+  card.appendChild(actions);
+
+  card.addEventListener('dragstart', _onDragStart);
+  card.addEventListener('dragend',   _onDragEnd);
+  // Allow dropping ONTO a card (not just onto the column background). Without
+  // this some browsers require e.preventDefault() at the target element level
+  // and won't allow a drop when the cursor is over a child card.
+  card.addEventListener('dragover',  e => { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; });
+
+  card.addEventListener('click', e => {
+    if (e.target.closest('.card-btn-edit') || e.target.closest('.card-btn-delete')) return;
+    card.dispatchEvent(new CustomEvent('ticket:open', {
+      bubbles: true, detail: { ticketId: ticket.ID, mode: 'view' },
+    }));
+  });
+
+  actions.querySelector('.card-btn-edit').addEventListener('click', e => {
+    e.stopPropagation();
+    card.dispatchEvent(new CustomEvent('ticket:open', {
+      bubbles: true, detail: { ticketId: ticket.ID, mode: 'edit' },
+    }));
+  });
+
+  actions.querySelector('.card-btn-delete').addEventListener('click', e => {
+    e.stopPropagation();
+    card.dispatchEvent(new CustomEvent('ticket:delete', {
+      bubbles: true, detail: { ticketId: ticket.ID },
+    }));
+  });
+
+  return card;
+}
+
+// ── Drag & Drop ────────────────────────────────────────────────────────────
+
+let _dragTicketId = null;
+let _dragSourceStatus = null;
+
+function _onDragStart(e) {
+  const card = e.currentTarget;
+  _dragTicketId    = Number(card.dataset.ticketId);
+  _dragSourceStatus = Number(card.closest('[data-column]')?.dataset.column);
+  e.dataTransfer.effectAllowed = 'move';
+  e.dataTransfer.setData('text/plain', String(_dragTicketId));
+  // slight delay so the ghost image renders before we fade the card
+  requestAnimationFrame(() => card.style.opacity = '0.4');
+}
+
+function _onDragEnd(e) {
+  e.currentTarget.style.opacity = '';
+  _dragTicketId    = null;
+  _dragSourceStatus = null;
+  document.querySelectorAll('.col-cards').forEach(z => z.classList.remove('drop-active'));
+}
+
+function _onDragOver(e) {
+  e.preventDefault();
+  e.dataTransfer.dropEffect = 'move';
+}
+
+function _onDragEnter(e) {
+  e.preventDefault();
+  e.currentTarget.classList.add('drop-active');
+}
+
+function _onDragLeave(e) {
+  // Only remove when leaving the dropzone itself, not a child element
+  if (!e.currentTarget.contains(e.relatedTarget)) {
+    e.currentTarget.classList.remove('drop-active');
+  }
+}
+
+function _onDrop(e) {
+  e.preventDefault();
+  const zone     = e.currentTarget;
+  const toStatus = Number(zone.dataset.dropzone);
+  zone.classList.remove('drop-active');
+
+  // dataTransfer is the authoritative source — it's set in dragstart and
+  // stays available through the drop event regardless of dragend timing.
+  const raw      = e.dataTransfer.getData('text/plain');
+  const ticketId = raw ? Number(raw) : _dragTicketId;
+  if (!ticketId) return;
+
+  // Read source status from the module variable; NaN means same-column check
+  // is skipped (safe to always dispatch and let main.js do the guard).
+  const srcStatus = Number.isFinite(_dragSourceStatus) ? _dragSourceStatus : toStatus + 1;
+  if (toStatus === srcStatus) return;
+
+  zone.dispatchEvent(new CustomEvent('ticket:move', {
+    bubbles: true, detail: { ticketId, toStatus },
+  }));
+}
+
+// ── Utilities ──────────────────────────────────────────────────────────────
+
+function _formatDate(unix) {
+  return new Date(unix * 1000).toLocaleDateString(undefined, {
+    month: 'short', day: 'numeric', year: 'numeric',
+  });
+}

package/samples/kanban/js/main.js

@@ -0,0 +1,362 @@
+/**
+ * Application entry point.
+ * Bootstraps the client, handles auth, wires up all UI events,
+ * and orchestrates data loading / board re-renders.
+ *
+ * Authentication: reads config from <body> data attributes + localStorage.
+ *  1. If tokens are available → token mode
+ *  2. If URL only → try session detection via /oauth2/v1/userinfo
+ *  3. Otherwise → connection screen with troubleshooting
+ *
+ * Exposes a global ZeyOS console API for debugging / configuration.
+ */
+import { initTokenClient, initSessionClient, fetchTickets, fetchProjects, updateTicket, deleteTicket } from './api.js';
+import { trySessionAuth, logout } from './auth.js';
+import { runtime, resolveConfig, saveUrl, saveTokens, clearTokens, clearUrl, saveContext } from './state.js';
+import { renderBoard, updateColumn }               from './kanban.js';
+import { openTicketDetail, openCreateTicket }      from './modals.js';
+import { openSettings, closeSettings, onSettingsChange } from './settings.js';
+import { showToast, showLoading, hideLoading }     from './ui.js';
+
+// ── Boot ────────────────────────────────────────────────────────────────────
+
+document.addEventListener('DOMContentLoaded', async () => {
+  const config = resolveConfig();
+
+  // 1. No URL configured → show connection screen immediately
+  if (!config.url) {
+    _showConnectionScreen('No ZeyOS URL configured.');
+    return;
+  }
+
+  runtime.url = config.url;
+
+  // 2. Tokens available → initialize in token mode
+  if (config.accessToken) {
+    saveTokens({
+      accessToken:  config.accessToken,
+      refreshToken: config.refreshToken ?? null,
+    });
+    initTokenClient(config.url);
+    runtime.authMode = 'token';
+    await _bootApp();
+    return;
+  }
+
+  // 3. No tokens → try session detection
+  showLoading();
+  const userInfo = await trySessionAuth(config.url);
+  hideLoading();
+
+  if (userInfo) {
+    initSessionClient(config.url);
+    runtime.authMode = 'session';
+    await _bootApp();
+    return;
+  }
+
+  // 4. Nothing works → connection screen
+  _showConnectionScreen('Could not connect. Set a token or log into ZeyOS first.');
+});
+
+// ── Connection Screen ────────────────────────────────────────────────────────
+
+function _showConnectionScreen(message) {
+  document.getElementById('connection-screen')?.classList.remove('hidden');
+  document.getElementById('app-shell')?.classList.add('hidden');
+
+  const msgEl = document.getElementById('connection-message');
+  if (msgEl) msgEl.textContent = message;
+}
+
+// ── Main App Boot ───────────────────────────────────────────────────────────
+
+async function _bootApp() {
+  document.getElementById('connection-screen')?.classList.add('hidden');
+  document.getElementById('app-shell')?.classList.remove('hidden');
+
+  onSettingsChange(_refreshBoard);
+
+  _wireNavbar();
+  _wireBoard();
+
+  showLoading();
+  try {
+    await _loadContextData();
+    await _loadTickets();
+    renderBoard();
+  } catch (err) {
+    if (err?.status === 401) {
+      showToast('Session expired. Please log in again.', 'error');
+      setTimeout(async () => { await logout(); location.reload(); }, 2000);
+      return;
+    }
+    showToast(`Failed to load data: ${err.message}`, 'error');
+  } finally {
+    hideLoading();
+  }
+}
+
+// ── Data Loading ────────────────────────────────────────────────────────────
+
+async function _loadContextData() {
+  runtime.projects = await fetchProjects();
+  _renderContextDropdown();
+  _updateContextLabel();
+}
+
+async function _loadTickets() {
+  runtime.tickets = await fetchTickets({ context: runtime.context });
+}
+
+async function _refreshBoard() {
+  showLoading();
+  try {
+    await _loadTickets();
+    renderBoard();
+  } catch (err) {
+    showToast(`Refresh failed: ${err.message}`, 'error');
+  } finally {
+    hideLoading();
+  }
+}
+
+// ── Navbar Wiring ───────────────────────────────────────────────────────────
+
+function _wireNavbar() {
+  document.getElementById('btn-settings')?.addEventListener('click', openSettings);
+  document.getElementById('btn-open-settings')?.addEventListener('click', openSettings);
+  document.getElementById('btn-close-settings')?.addEventListener('click', closeSettings);
+  document.getElementById('settings-overlay')?.addEventListener('click', closeSettings);
+
+  document.getElementById('btn-new-ticket')?.addEventListener('click', () => {
+    openCreateTicket(runtime.settings.columns[0] ?? 0);
+  });
+
+  document.getElementById('btn-logout')?.addEventListener('click', async () => {
+    if (!confirm('Log out of ZeyOS Kanban?')) return;
+    await logout();
+    clearUrl();
+    location.reload();
+  });
+
+  // Context button toggle
+  document.getElementById('btn-context')?.addEventListener('click', e => {
+    e.stopPropagation();
+    const drop = document.getElementById('context-dropdown');
+    if (!drop) return;
+    if (drop.classList.contains('hidden')) {
+      const rect = e.currentTarget.getBoundingClientRect();
+      drop.style.top  = `${rect.bottom + 4}px`;
+      drop.style.left = `${rect.left}px`;
+      drop.classList.remove('hidden');
+    } else {
+      drop.classList.add('hidden');
+    }
+  });
+
+  document.addEventListener('click', e => {
+    if (!e.target.closest('#context-dropdown') && !e.target.closest('#btn-context')) {
+      document.getElementById('context-dropdown')?.classList.add('hidden');
+    }
+  });
+}
+
+// ── Board Event Wiring ──────────────────────────────────────────────────────
+
+function _wireBoard() {
+  const board = document.getElementById('kanban-board');
+  if (!board) return;
+
+  // Ticket open
+  board.addEventListener('ticket:open', async e => {
+    const { ticketId, mode } = e.detail;
+    await openTicketDetail(ticketId, mode);
+  });
+
+  // Drag-and-drop move
+  board.addEventListener('ticket:move', async e => {
+    const { ticketId, toStatus } = e.detail;
+    const ticket = runtime.tickets.find(t => t.ID === ticketId);
+    if (!ticket) return;
+
+    const fromStatus = ticket.status;
+    // Optimistic update
+    ticket.status = toStatus;
+    updateColumn(fromStatus);
+    updateColumn(toStatus);
+
+    try {
+      const updated = await updateTicket(ticketId, { status: toStatus });
+
+      // Use the server-confirmed status from the response body.
+      // If the API rejected or clamped the value it will differ from toStatus.
+      const confirmedStatus = updated?.status ?? toStatus;
+      if (confirmedStatus !== toStatus) {
+        ticket.status = confirmedStatus;
+        updateColumn(toStatus);
+        updateColumn(confirmedStatus);
+        showToast(`Status set to ${confirmedStatus} (server override).`, 'info');
+      } else {
+        showToast('Status updated.', 'success');
+      }
+    } catch (err) {
+      // Revert on failure
+      ticket.status = fromStatus;
+      updateColumn(fromStatus);
+      updateColumn(toStatus);
+      showToast(`Move failed: ${err.message}`, 'error');
+    }
+  });
+
+  // Quick-create
+  board.addEventListener('ticket:create', e => {
+    openCreateTicket(e.detail.status);
+  });
+
+  // Delete from card hover button
+  board.addEventListener('ticket:delete', async e => {
+    const { ticketId } = e.detail;
+    const ticket = runtime.tickets.find(t => t.ID === ticketId);
+    if (!confirm(`Delete "${ticket?.name ?? ticketId}"?`)) return;
+    try {
+      await deleteTicket(ticketId);
+      runtime.tickets = runtime.tickets.filter(t => t.ID !== ticketId);
+      renderBoard();
+      showToast('Ticket deleted.', 'success');
+    } catch (err) {
+      showToast(`Delete failed: ${err.message}`, 'error');
+    }
+  });
+
+  // Reload after create/update/delete inside modals
+  document.addEventListener('app:reload', _refreshBoard);
+}
+
+// ── Context Dropdown ────────────────────────────────────────────────────────
+
+function _renderContextDropdown() {
+  const drop = document.getElementById('context-dropdown');
+  if (!drop) return;
+
+  const allItem      = { type: 'all',     id: null, name: 'All Tickets' };
+  const projectItems = runtime.projects.map(p => ({ type: 'project', id: p.ID, name: p.name }));
+
+  const groupHtml = (title, list) =>
+    list.length === 0 ? '' : `
+      ${title ? `<li class="px-3 py-1 text-xs font-semibold text-slate-400 uppercase tracking-wide">${title}</li>` : ''}
+      ${list.map(item => `
+        <li>
+          <button class="ctx-item w-full text-left px-3 py-2 text-sm hover:bg-slate-50 text-slate-700 flex items-center gap-2"
+            data-type="${item.type}" data-id="${item.id ?? ''}" data-name="${_esc(item.name)}">
+            <span class="w-1.5 h-1.5 rounded-full flex-shrink-0 ${item.type === 'all' ? 'bg-slate-400' : 'bg-purple-400'}"></span>
+            ${_esc(item.name)}
+          </button>
+        </li>
+      `).join('')}
+    `;
+
+  drop.innerHTML = `<ul class="py-1">
+    ${groupHtml('', [allItem])}
+    ${groupHtml('Projects', projectItems)}
+  </ul>`;
+
+  drop.querySelectorAll('.ctx-item').forEach(btn => {
+    btn.addEventListener('click', async () => {
+      drop.classList.add('hidden');
+      const ctx = {
+        type: btn.dataset.type,
+        id:   btn.dataset.id ? Number(btn.dataset.id) : null,
+        name: btn.dataset.name,
+      };
+      runtime.context = ctx;
+      saveContext(ctx);
+      _updateContextLabel();
+      await _refreshBoard();
+    });
+  });
+}
+
+function _updateContextLabel() {
+  const el = document.getElementById('context-label');
+  if (el) el.textContent = runtime.context.name ?? 'All Tickets';
+}
+
+function _esc(str) {
+  return String(str)
+    .replace(/&/g, '&amp;').replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+// ── Console API ─────────────────────────────────────────────────────────────
+// Provides ZeyOS.setUrl(), ZeyOS.setToken(), ZeyOS.status(), etc.
+// Values set via the console are persisted to localStorage and override
+// <body> data attributes on next page load.
+
+globalThis.ZeyOS = {
+  /**
+   * Set the ZeyOS instance URL.
+   * @param {string} url - e.g. 'https://cloud.zeyos.com/demo/'
+   */
+  setUrl(url) {
+    if (!url || typeof url !== 'string') {
+      console.error('[ZeyOS] Usage: ZeyOS.setUrl("https://cloud.zeyos.com/demo/")');
+      return;
+    }
+    saveUrl(url.trim());
+    console.log(`%c[ZeyOS]%c URL set to: ${url}`, 'color:#2563eb;font-weight:bold', '');
+    console.log('%c[ZeyOS]%c Call ZeyOS.reconnect() to apply.', 'color:#2563eb;font-weight:bold', '');
+  },
+
+  /**
+   * Set access (and optionally refresh) token.
+   * @param {string} accessToken
+   * @param {string} [refreshToken]
+   */
+  setToken(accessToken, refreshToken) {
+    if (!accessToken || typeof accessToken !== 'string') {
+      console.error('[ZeyOS] Usage: ZeyOS.setToken("access-token", "optional-refresh-token")');
+      return;
+    }
+    saveTokens({
+      accessToken:  accessToken.trim(),
+      refreshToken: refreshToken?.trim() ?? null,
+    });
+    console.log('%c[ZeyOS]%c Token saved.', 'color:#2563eb;font-weight:bold', '');
+    console.log('%c[ZeyOS]%c Call ZeyOS.reconnect() to apply.', 'color:#2563eb;font-weight:bold', '');
+  },
+
+  /**
+   * Print the current connection status to the console.
+   */
+  status() {
+    const config = resolveConfig();
+    const lines = [
+      '',
+      `  URL:            ${config.url ?? '(not set)'}`,
+      `  Access Token:   ${config.accessToken ? config.accessToken.slice(0, 16) + '...' : '(not set)'}`,
+      `  Refresh Token:  ${config.refreshToken ? 'yes' : 'no'}`,
+      `  Auth Mode:      ${runtime.authMode ?? '(not connected)'}`,
+      '',
+    ];
+    console.log(`%c[ZeyOS] Status%c\n${lines.join('\n')}`, 'color:#2563eb;font-weight:bold', 'color:inherit');
+  },
+
+  /**
+   * Clear all stored config (URL + tokens) and reload.
+   */
+  logout() {
+    clearTokens();
+    clearUrl();
+    console.log('%c[ZeyOS]%c Config cleared. Reloading...', 'color:#2563eb;font-weight:bold', '');
+    location.reload();
+  },
+
+  /**
+   * Reload the page to re-run the boot sequence with current config.
+   */
+  reconnect() {
+    console.log('%c[ZeyOS]%c Reconnecting...', 'color:#2563eb;font-weight:bold', '');
+    location.reload();
+  },
+};