npm - agentdev-webui - Versions diffs - 1.0.0 - Mend

agentdev-webui 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (39) hide show

package/lib/agent-api.js +530 -0
package/lib/auth.js +127 -0
package/lib/config.js +53 -0
package/lib/database.js +762 -0
package/lib/device-flow.js +257 -0
package/lib/email.js +420 -0
package/lib/encryption.js +112 -0
package/lib/github.js +339 -0
package/lib/history.js +143 -0
package/lib/pwa.js +107 -0
package/lib/redis-logs.js +226 -0
package/lib/routes.js +680 -0
package/migrations/000_create_database.sql +33 -0
package/migrations/001_create_agentdev_schema.sql +135 -0
package/migrations/001_create_agentdev_schema.sql.old +100 -0
package/migrations/001_create_agentdev_schema_fixed.sql +135 -0
package/migrations/002_add_github_token.sql +17 -0
package/migrations/003_add_agent_logs_table.sql +23 -0
package/migrations/004_remove_oauth_columns.sql +11 -0
package/migrations/005_add_projects.sql +44 -0
package/migrations/006_project_github_token.sql +7 -0
package/migrations/007_project_repositories.sql +12 -0
package/migrations/008_add_notifications.sql +20 -0
package/migrations/009_unified_oauth.sql +153 -0
package/migrations/README.md +97 -0
package/package.json +37 -0
package/public/css/styles.css +1140 -0
package/public/device.html +384 -0
package/public/docs.html +862 -0
package/public/docs.md +697 -0
package/public/favicon.svg +5 -0
package/public/index.html +271 -0
package/public/js/app.js +2379 -0
package/public/login.html +224 -0
package/public/profile.html +394 -0
package/public/register.html +392 -0
package/public/reset-password.html +349 -0
package/public/verify-email.html +177 -0
package/server.js +1450 -0

package/public/index.html ADDED Viewed

@@ -0,0 +1,271 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+  <meta name="theme-color" content="#1a1a2e">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+  <meta name="apple-mobile-web-app-title" content="Agent Dev">
+  <meta name="description" content="Multi-agent development workflow">
+  <meta property="og:title" content="Agent Dev">
+  <meta property="og:description" content="Multi-agent development workflow">
+  <meta property="og:type" content="website">
+  <meta property="og:image" content="/og-image.svg">
+  <meta property="og:image:width" content="1200">
+  <meta property="og:image:height" content="630">
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:title" content="Agent Dev">
+  <meta name="twitter:description" content="Multi-agent development workflow">
+  <meta name="twitter:image" content="/og-image.svg">
+  <link rel="manifest" href="/manifest.json">
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+  <link rel="apple-touch-icon" href="/icon-192.png">
+  <link rel="stylesheet" href="/css/styles.css">
+  <title>Agent Dev</title>
+</head>
+<body>
+  <div class="offline-banner" id="offlineBanner">You are offline - reconnecting...</div>
+  <div class="header">
+    <h1>Agent Dev</h1>
+    <div class="status"><div class="status-dot" id="dot"></div><span id="statusTxt">Ready</span></div>
+    <div class="project-group">
+      <select id="projectSelector" class="project-selector" onchange="switchProject(this.value)" title="Select project">
+        <option value="">All Projects</option>
+      </select>
+      <button class="manage-projects-btn" onclick="openManageProjectsModal()" title="Add New Project">+</button>
+      <button class="manage-projects-btn" id="editProjectBtn" onclick="editCurrentProject()" title="Edit Selected Project" style="display:none;font-size:12px;">&#9998;</button>
+    </div>
+    <div class="actions-group">
+      <div style="position:relative">
+        <button class="notification-bell" id="notificationBell" onclick="toggleNotificationPanel()" title="Notifications">
+          <svg viewBox="0 0 24 24"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2zm-2 1H8v-6c0-2.48 1.51-4.5 4-4.5s4 2.02 4 4.5v6z"/></svg>
+          <span class="badge" id="notificationBadge">0</span>
+        </button>
+        <div class="notification-panel" id="notificationPanel">
+          <div class="notification-panel-header">
+            <span>Notifications</span>
+            <button onclick="clearNotifications()" title="Mark all as read">Clear</button>
+          </div>
+          <div class="notification-panel-body" id="notificationPanelBody">
+            <div class="notification-empty">No notifications</div>
+          </div>
+        </div>
+      </div>
+      <button class="logout-btn" onclick="window.location.href='/device'" title="Authorize Devices">
+        <svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M17 1.01L7 1c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z"/></svg>
+      </button>
+      <button class="logout-btn" onclick="window.location.href='/profile'" title="Profile">
+        <svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/></svg>
+      </button>
+      <button class="logout-btn" id="logoutBtn" onclick="logout()" title="Logout">
+        <svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z"/></svg>
+      </button>
+    </div>
+    <button class="hamburger" id="hamburger" onclick="toggleSidebar()">
+      <span></span><span></span><span></span>
+    </button>
+  </div>
+  <div class="controls">
+    <div class="view-toggle">
+      <button class="view-btn active" id="viewLogsBtn" onclick="switchView('logs')" title="Logs View">Logs</button>
+      <button class="view-btn" id="viewBoardBtn" onclick="switchView('board')" title="Board View">Board</button>
+    </div>
+    <button id="runBtn" onclick="run()">Run</button>
+    <button onclick="clearCurrentTab()">Clear</button>
+    <button id="stopBtn" onclick="stop()" disabled>Stop</button>
+    <button onclick="openCreateTicketModal()" class="btn-primary">+ Ticket</button>
+    <span class="agent-count" id="agentCount">Agents: 0</span>
+  </div>
+  <div class="mobile-sidebar-tabs" id="mobileSidebarTabs">
+    <div class="mobile-sidebar-tab active" data-tab="active" onclick="mobileSidebarTab('active')">Active</div>
+    <div class="mobile-sidebar-tab" data-tab="tickets" onclick="mobileSidebarTab('tickets')">Tickets <span id="mobileTodoCount" class="todo-count"></span></div>
+    <div class="mobile-sidebar-tab" data-tab="history" onclick="mobileSidebarTab('history')">History</div>
+  </div>
+  <!-- Create Ticket Modal -->
+  <div class="modal-overlay" id="createTicketModal">
+    <div class="modal">
+      <div class="modal-header">
+        <h2>Create Ticket</h2>
+        <button class="modal-close" onclick="closeCreateTicketModal()">&times;</button>
+      </div>
+      <div class="modal-body">
+        <div class="form-status" id="formStatus"></div>
+        <div class="form-group">
+          <label for="ticketRepo">Repository</label>
+          <select id="ticketRepo"></select>
+        </div>
+        <div class="form-group">
+          <label for="ticketDescription">Description</label>
+          <div class="textarea-wrapper">
+            <textarea id="ticketDescription" placeholder="Describe what you want to build or fix...
+The first line will be used as the ticket title.
+@claude will be automatically added."></textarea>
+            <button type="button" class="voice-btn" id="voiceBtn" onclick="toggleVoiceInput()" title="Voice input">
+              <svg viewBox="0 0 24 24"><path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm-1-9c0-.55.45-1 1-1s1 .45 1 1v6c0 .55-.45 1-1 1s-1-.45-1-1V5zm6 6c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"/></svg>
+            </button>
+          </div>
+          <div class="hint">First line = title. @claude auto-added. Tap mic for voice input.</div>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button onclick="closeCreateTicketModal()">Cancel</button>
+        <button class="btn-primary" id="createTicketBtn" onclick="createTicket()">Create Ticket</button>
+      </div>
+    </div>
+  </div>
+  <div class="main">
+    <div class="logs-container" id="logsContainer">
+      <div class="tabs" id="tabs">
+        <div class="tab active" data-tab="global" onclick="switchTab('global')">Global</div>
+      </div>
+      <div class="tab-content" id="tabContent">
+        <div class="logs-panel active" id="panel-global"></div>
+      </div>
+    </div>
+    <div class="board-container" id="boardContainer">
+      <div class="board" id="board"></div>
+    </div>
+    <div class="sidebar-overlay" id="sidebarOverlay" onclick="closeSidebar()"></div>
+    <div class="sidebar" id="sidebar">
+      <div class="sidebar-tabs">
+        <div class="sidebar-tab active" onclick="switchSidebarTab('active')">Active</div>
+        <div class="sidebar-tab" onclick="switchSidebarTab('tickets')">Tickets <span id="todoCount" class="todo-count"></span></div>
+        <div class="sidebar-tab" onclick="switchSidebarTab('history')">History</div>
+      </div>
+      <div class="sidebar-content">
+        <div class="agent-list active" id="agents"></div>
+        <div class="agent-list" id="agentsTodo"></div>
+        <div class="agent-list" id="agentsHistory"></div>
+      </div>
+    </div>
+  </div>
+  <!-- Ticket Detail Panel -->
+  <div class="ticket-panel-overlay" id="ticketPanelOverlay" onclick="closeTicketPanel()"></div>
+  <div class="ticket-panel" id="ticketPanel">
+    <div class="ticket-panel-header">
+      <div class="ticket-panel-title" id="ticketPanelTitle"></div>
+      <button class="ticket-panel-close" onclick="closeTicketPanel()">&times;</button>
+    </div>
+    <div class="ticket-panel-body" id="ticketPanelBody"></div>
+  </div>
+  <div class="tooltip" id="tooltip"></div>
+  <button class="scroll-to-bottom" id="scrollToBottom" onclick="scrollToBottom()" title="Scroll to bottom">
+    <svg viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>
+  </button>
+  <div class="bottom-sheet" id="bottomSheet">
+    <div class="bottom-sheet-handle"></div>
+    <div class="bottom-sheet-content" id="bottomSheetContent"></div>
+  </div>
+  <!-- Add Comment Modal -->
+  <div class="modal-overlay" id="addCommentModal">
+    <div class="modal">
+      <div class="modal-header">
+        <h2>Add Comment to Ticket</h2>
+        <button class="modal-close" onclick="closeCommentModal()">&times;</button>
+      </div>
+      <div class="modal-body">
+        <div class="form-status" id="commentFormStatus"></div>
+        <div class="form-group">
+          <label>Ticket</label>
+          <div id="commentTicketInfo" style="color:#4ade80;font-size:14px;padding:8px 0;"></div>
+        </div>
+        <div class="form-group">
+          <label for="commentText">Comment</label>
+          <div class="textarea-wrapper">
+            <textarea id="commentText" placeholder="Write your comment here...
+@claude will be automatically added to trigger the agent."></textarea>
+            <button type="button" class="voice-btn" id="commentVoiceBtn" onclick="toggleCommentVoiceInput()" title="Voice input">
+              <svg viewBox="0 0 24 24"><path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm-1-9c0-.55.45-1 1-1s1 .45 1 1v6c0 .55-.45 1-1 1s-1-.45-1-1V5zm6 6c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"/></svg>
+            </button>
+          </div>
+          <div class="hint">@claude will be auto-added. Use mic for voice input. Ctrl+Enter to submit.</div>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button onclick="closeCommentModal()">Cancel</button>
+        <button class="btn-primary" id="addCommentBtn" onclick="submitComment()">Add Comment</button>
+      </div>
+    </div>
+  </div>
+  <!-- Manage Projects Modal -->
+  <div class="modal-overlay" id="manageProjectsModal">
+    <div class="modal" style="max-width:500px;">
+      <div class="modal-header">
+        <h2 id="projectModalTitle">Add Project</h2>
+        <button class="modal-close" onclick="closeManageProjectsModal()">&times;</button>
+      </div>
+      <div class="modal-body">
+        <div class="form-status" id="projectFormStatus"></div>
+        <div class="form-group">
+          <label for="projectName">Name</label>
+          <input type="text" id="projectName" placeholder="My Project" style="width:100%;padding:8px;background:#16213e;border:1px solid #333;color:#fff;border-radius:4px;">
+        </div>
+        <div class="form-group">
+          <label for="projectOrg">GitHub Org</label>
+          <input type="text" id="projectOrg" placeholder="data-tamer" style="width:100%;padding:8px;background:#16213e;border:1px solid #333;color:#fff;border-radius:4px;">
+        </div>
+        <div class="form-group">
+          <label for="projectGithubToken">GitHub Token (optional)</label>
+          <input type="password" id="projectGithubToken" placeholder="ghp_... (leave empty to use profile default)" style="width:100%;padding:8px;background:#16213e;border:1px solid #333;color:#fff;border-radius:4px;font-family:monospace;font-size:12px;">
+          <div class="hint">Optional. Used for fetching repos/fields below. If empty, uses your profile token.</div>
+        </div>
+        <div class="form-group">
+          <label for="projectNumber">Project Number</label>
+          <input type="number" id="projectNumber" placeholder="1" style="width:100%;padding:8px;background:#16213e;border:1px solid #333;color:#fff;border-radius:4px;">
+        </div>
+        <div class="form-group">
+          <label>Project Board Fields</label>
+          <div style="display:flex;gap:8px;margin-bottom:8px;">
+            <button type="button" class="btn-fetch-repos" onclick="fetchProjectFields(this)">Fetch from GitHub</button>
+            <span id="fieldsFetchStatus" style="font-size:11px;color:#888;align-self:center;"></span>
+          </div>
+          <input type="hidden" id="projectGithubId">
+          <input type="hidden" id="projectStatusFieldId">
+          <div id="projectFieldsInfo" style="font-size:11px;color:#888;margin-bottom:8px;"></div>
+          <div class="hint" style="margin-bottom:8px;">Fill in Org + Project Number above, then click "Fetch from GitHub" to auto-detect the project ID, status field, and status columns.</div>
+        </div>
+        <div class="form-group">
+          <label>Status Columns</label>
+          <table id="statusOptionsTable" class="status-options-table">
+            <thead><tr><th style="width:30px;"></th><th>Map To</th><th>Column Name</th><th>ID</th><th style="width:30px;"></th></tr></thead>
+            <tbody id="statusOptionsBody">
+              <tr><td colspan="5" style="color:#666;text-align:center;padding:12px;">Click "Fetch from GitHub" to load columns</td></tr>
+            </tbody>
+          </table>
+          <div id="addColumnRow" style="display:none;margin-top:8px;gap:6px;align-items:center;">
+            <select id="addColMapTo" style="padding:4px;background:#16213e;border:1px solid #333;color:#eee;border-radius:4px;font-size:11px;">
+              <option value="">(skip)</option><option value="TODO">TODO</option><option value="IN_PROGRESS">IN_PROGRESS</option><option value="TEST">TEST</option><option value="DONE">DONE</option>
+            </select>
+            <input type="text" id="addColName" placeholder="Column name" style="flex:1;padding:4px 6px;background:#16213e;border:1px solid #333;color:#eee;border-radius:4px;font-size:11px;">
+            <input type="text" id="addColId" placeholder="Column ID" style="flex:1;padding:4px 6px;background:#16213e;border:1px solid #333;color:#eee;border-radius:4px;font-size:11px;font-family:monospace;">
+            <button type="button" id="confirmAddColBtn" class="btn-fetch-repos" style="padding:4px 10px;font-size:11px;min-height:auto;" onclick="confirmAddColumn()">Add</button>
+            <button type="button" id="cancelAddColBtn" style="padding:4px 8px;font-size:11px;background:#333;border:1px solid #555;color:#eee;border-radius:4px;cursor:pointer;" onclick="hideAddColumnRow()">Cancel</button>
+          </div>
+          <button type="button" class="btn-add-column" id="addColumnBtn" onclick="showAddColumnRow()">+ Add Column</button>
+          <div class="hint">Assign each GitHub column to a role: TODO, IN_PROGRESS, TEST, or DONE. Reorder with arrows, remove with &times;.</div>
+        </div>
+        <div class="form-group">
+          <label for="projectRepositories">Repositories</label>
+          <div style="display:flex;gap:8px;margin-bottom:8px;">
+            <button type="button" class="btn-fetch-repos" onclick="fetchOrgRepos(this)">Fetch from Org</button>
+            <span id="repoFetchStatus" style="font-size:11px;color:#888;align-self:center;"></span>
+          </div>
+          <select id="projectRepositories" multiple size="8" class="repo-multiselect">
+          </select>
+          <div class="hint">Fill in the GitHub Org above, then click "Fetch from Org" to load repos. Ctrl/Cmd+click to select multiple.</div>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button onclick="closeManageProjectsModal()">Cancel</button>
+        <button class="btn-primary" id="projectSubmitBtn" onclick="submitProject()">Add Project</button>
+      </div>
+    </div>
+  </div>
+  <script src="/js/app.js"></script>
+</body>
+</html>