covara 0.0.1 → 0.6.0

package/dist/ui/html/pages/tasks.js

@@ -0,0 +1,225 @@
+import { html, escapeHtml, formatRelativeTime, formatJson } from '../utils.js';
+import { card, badge, button, statCard, emptyState, grid } from '../components/index.js';
+export const tasksPage = (data) => html `
+  <div class="page-header">
+    <h1 class="page-title">Task Queue</h1>
+    <p class="page-desc">Monitor background tasks and workers</p>
+  </div>
+
+  ${grid([
+    statCard('Pending', data.stats.pending, data.stats.pending > 100 ? 'warning' : 'info'),
+    statCard('Scheduled', data.stats.scheduled, 'neutral'),
+    statCard('Running', data.stats.running, 'success'),
+    statCard('Failed', data.stats.failed, data.stats.failed > 0 ? 'error' : 'neutral'),
+    statCard('DLQ', data.stats.dlq, data.stats.dlq > 0 ? 'error' : 'neutral'),
+])}
+
+  <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px;">
+    <div>
+      ${workersCard(data.workers)}
+    </div>
+    <div>
+      ${scheduledCard(data.scheduled)}
+    </div>
+  </div>
+
+  <div style="margin-top: 16px;">
+    ${dlqCard(data.dlq)}
+  </div>
+`;
+const workersCard = (workers) => card({
+    title: 'Workers',
+    headerRight: badge(workers.length + ' workers', 'neutral'),
+}, html `
+  ${workers.length > 0 ? html `
+    <div style="display: flex; flex-direction: column; gap: 12px;">
+      ${workers.map(worker => html `
+        <div style="display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--bg-2); border-radius: 6px;">
+          <div style="width: 8px; height: 8px; border-radius: 50%; background: ${workerStatusColor(worker.status)};"></div>
+          <div style="flex: 1;">
+            <div style="font-weight: 500; font-size: 13px;">${escapeHtml(worker.id)}</div>
+            <div style="font-size: 12px; color: var(--text-2);">
+              ${worker.currentTask ? html `Processing: <span class="code-inline">${escapeHtml(worker.currentTask)}</span>` : 'Idle'}
+            </div>
+          </div>
+          <div style="text-align: right; font-size: 12px;">
+            <div style="color: var(--success);">\u2713 ${worker.processedCount}</div>
+            <div style="color: var(--error);">\u2717 ${worker.failedCount}</div>
+          </div>
+          ${workerStatusBadge(worker.status)}
+        </div>
+      `).join('')}
+    </div>
+  ` : html `
+    <p style="color: var(--text-3); text-align: center; padding: 20px;">No workers registered</p>
+  `}
+`);
+const workerStatusColor = (status) => {
+    switch (status) {
+        case 'running': return 'var(--success)';
+        case 'paused': return 'var(--warning)';
+        case 'stopped': return 'var(--error)';
+        default: return 'var(--text-3)';
+    }
+};
+const workerStatusBadge = (status) => {
+    switch (status) {
+        case 'running': return badge('Running', 'success');
+        case 'paused': return badge('Paused', 'warning');
+        case 'stopped': return badge('Stopped', 'error');
+        default: return badge(status, 'neutral');
+    }
+};
+const scheduledCard = (tasks) => card({
+    title: 'Scheduled Tasks',
+    headerRight: badge(tasks.length + ' tasks', 'neutral'),
+    flush: true,
+}, html `
+  ${tasks.length > 0 ? html `
+    <div style="max-height: 300px; overflow-y: auto;">
+      ${tasks.map(task => html `
+        <div class="list-item">
+          <div style="flex: 1;">
+            <div style="display: flex; align-items: center; gap: 8px;">
+              <span class="code-inline">${escapeHtml(task.name)}</span>
+              ${priorityBadge(task.priority)}
+            </div>
+            <div style="font-size: 12px; color: var(--text-2); margin-top: 4px;">
+              Scheduled: ${formatRelativeTime(task.scheduledFor)}
+            </div>
+          </div>
+        </div>
+      `).join('')}
+    </div>
+  ` : emptyState('\u23F0', 'No scheduled tasks', 'Tasks will appear when scheduled')}
+`);
+const priorityBadge = (priority) => {
+    if (priority <= 25)
+        return badge('P0', 'error');
+    if (priority <= 50)
+        return badge('P1', 'warning');
+    if (priority <= 75)
+        return badge('P2', 'info');
+    return badge('P3', 'neutral');
+};
+const dlqCard = (entries) => card({
+    title: 'Dead Letter Queue',
+    headerRight: html `
+    <div style="display: flex; gap: 8px; align-items: center;">
+      ${badge(entries.length + ' entries', entries.length > 0 ? 'error' : 'neutral')}
+      ${entries.length > 0 ? button('Retry All', {
+        variant: 'secondary',
+        size: 'sm',
+        hxPost: '/__covara/api/tasks/dlq/retry-all',
+        hxConfirm: 'Retry all ' + entries.length + ' failed tasks?',
+        hxTarget: '#dlq-list',
+    }) : ''}
+    </div>
+  `,
+    flush: true,
+}, html `
+  <div id="dlq-list">
+    ${entries.length > 0 ? html `
+      <div style="overflow-x: auto;">
+        <table class="table">
+          <thead>
+            <tr>
+              <th>Task</th>
+              <th>Error</th>
+              <th>Failed</th>
+              <th>Attempts</th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody>
+            ${entries.map(entry => html `
+              <tr>
+                <td><span class="code-inline">${escapeHtml(entry.taskName)}</span></td>
+                <td style="max-width: 300px;">
+                  <div style="color: var(--error); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
+                    ${escapeHtml(entry.error)}
+                  </div>
+                </td>
+                <td style="color: var(--text-2); font-size: 12px; white-space: nowrap;">
+                  ${formatRelativeTime(entry.failedAt)}
+                </td>
+                <td>${badge(entry.attempts + 'x', 'neutral')}</td>
+                <td>
+                  <div style="display: flex; gap: 4px;">
+                    ${button('Retry', {
+    size: 'sm',
+    variant: 'primary',
+    hxPost: '/__covara/api/tasks/dlq/' + entry.id + '/retry',
+    hxTarget: 'closest tr',
+    hxSwap: 'outerHTML',
+})}
+                    ${button('Details', {
+    size: 'sm',
+    variant: 'secondary',
+    hxGet: '/__covara/ui/tasks/dlq/' + entry.id,
+    hxTarget: '#dlq-detail',
+    hxSwap: 'innerHTML',
+})}
+                    ${button('\u2715', {
+    size: 'sm',
+    variant: 'ghost',
+    class: 'btn-danger',
+    hxDelete: '/__covara/api/tasks/dlq/' + entry.id,
+    hxConfirm: 'Remove from DLQ? This cannot be undone.',
+    hxTarget: 'closest tr',
+    hxSwap: 'outerHTML',
+})}
+                  </div>
+                </td>
+              </tr>
+            `).join('')}
+          </tbody>
+        </table>
+      </div>
+      <style>.btn-danger { color: var(--error); } .btn-danger:hover { background: var(--error-bg); }</style>
+    ` : emptyState('\u2713', 'No failed tasks', 'Failed tasks will appear here for retry')}
+  </div>
+
+  <div id="dlq-detail" style="border-top: 1px solid var(--border);"></div>
+`);
+export const dlqDetail = (data) => html `
+  <div style="padding: 16px;">
+    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
+      <h4 style="font-weight: 600;">DLQ Entry Details</h4>
+      ${button('\u2715', {
+    size: 'sm',
+    variant: 'ghost',
+    hxGet: '/__covara/ui/empty',
+    hxTarget: '#dlq-detail',
+    hxSwap: 'innerHTML',
+})}
+    </div>
+
+    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
+      <div>
+        <h5 style="font-size: 12px; color: var(--text-2); margin-bottom: 8px;">Info</h5>
+        <table class="table" style="font-size: 12px;">
+          <tr><td style="color: var(--text-2);">ID</td><td class="code-inline">${escapeHtml(data.entry.id)}</td></tr>
+          <tr><td style="color: var(--text-2);">Task</td><td>${escapeHtml(data.entry.taskName)}</td></tr>
+          <tr><td style="color: var(--text-2);">Attempts</td><td>${data.entry.attempts}</td></tr>
+          <tr><td style="color: var(--text-2);">Failed</td><td>${formatRelativeTime(data.entry.failedAt)}</td></tr>
+        </table>
+      </div>
+
+      <div>
+        <h5 style="font-size: 12px; color: var(--text-2); margin-bottom: 8px;">Error</h5>
+        <div class="code" style="background: var(--error-bg); color: var(--error); max-height: 100px; overflow-y: auto;">
+          ${escapeHtml(data.entry.error)}
+        </div>
+
+        ${data.entry.payload ? html `
+          <h5 style="font-size: 12px; color: var(--text-2); margin: 12px 0 8px;">Payload</h5>
+          <div class="code" style="max-height: 150px; overflow-y: auto;">
+            ${escapeHtml(formatJson(data.entry.payload))}
+          </div>
+        ` : ''}
+      </div>
+    </div>
+  </div>
+`;
+//# sourceMappingURL=tasks.js.map

package/dist/ui/html/pages/tasks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tasks.js","sourceRoot":"","sources":["../../../../src/ui/html/pages/tasks.ts"],"names":[],"mappings":"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"}

package/dist/ui/html/pages/users.d.ts

@@ -0,0 +1,29 @@
+export interface UserInfo {
+    id: string;
+    email: string;
+    name?: string;
+    emailVerified?: boolean;
+    createdAt?: string;
+    lastLoginAt?: string;
+    roles?: string[];
+}
+export interface UsersPageData {
+    users: UserInfo[];
+    totalCount: number;
+}
+export declare const usersPage: (data: UsersPageData) => string;
+export declare const usersList: (users: UserInfo[]) => string;
+export interface UserDetailData {
+    user: UserInfo & {
+        metadata?: Record<string, unknown>;
+        sessions?: {
+            id: string;
+            createdAt: string;
+            lastActiveAt: string;
+            userAgent?: string;
+        }[];
+    };
+}
+export declare const userForm: () => string;
+export declare const userDetail: (data: UserDetailData) => string;
+//# sourceMappingURL=users.d.ts.map

package/dist/ui/html/pages/users.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"users.d.ts","sourceRoot":"","sources":["../../../../src/ui/html/pages/users.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;CAClB;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,GAAI,MAAM,aAAa,KAAG,MA4B/C,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,OAAO,QAAQ,EAAE,KAAG,MA6D5C,CAAC;AAEH,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,QAAQ,GAAG;QACf,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QACnC,QAAQ,CAAC,EAAE;YAAE,EAAE,EAAE,MAAM,CAAC;YAAC,SAAS,EAAE,MAAM,CAAC;YAAC,YAAY,EAAE,MAAM,CAAC;YAAC,SAAS,CAAC,EAAE,MAAM,CAAA;SAAE,EAAE,CAAC;KAC1F,CAAC;CACH;AAED,eAAO,MAAM,QAAQ,QAAO,MAsC3B,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,MAAM,cAAc,KAAG,MA0DjD,CAAC"}

package/dist/ui/html/pages/users.js

@@ -0,0 +1,192 @@
+import { html, escapeHtml, formatRelativeTime } from '../utils.js';
+import { card, badge, button, input, emptyState, toolbar } from '../components/index.js';
+export const usersPage = (data) => html `
+  <div class="page-header">
+    <h1 class="page-title">Users</h1>
+    <p class="page-desc">Manage user accounts and permissions</p>
+  </div>
+
+  ${toolbar(html `
+    ${input({ name: 'search', placeholder: 'Search by email or name...' })}
+    ${button('Search', {
+    variant: 'primary',
+    hxGet: '/__covara/ui/users/list',
+    hxTarget: '#users-list',
+    hxInclude: '[name="search"]',
+})}
+    <div style="flex: 1;"></div>
+    ${button('+ Create User', {
+    variant: 'secondary',
+    hxGet: '/__covara/ui/users/new',
+    hxTarget: '#modal-container',
+})}
+    ${badge(data.totalCount + ' total', 'neutral')}
+  `)}
+
+  <div id="modal-container"></div>
+
+  <div id="users-list" style="margin-top: 16px;">
+    ${usersList(data.users)}
+  </div>
+`;
+export const usersList = (users) => card({
+    title: 'Users',
+    headerRight: badge(users.length + ' shown', 'neutral'),
+    flush: true,
+}, html `
+  ${users.length > 0 ? html `
+    <div style="overflow-x: auto;">
+      <table class="table">
+        <thead>
+          <tr>
+            <th>Email</th>
+            <th>Name</th>
+            <th>Verified</th>
+            <th>Roles</th>
+            <th>Created</th>
+            <th>Last Login</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          ${users.map(user => html `
+            <tr>
+              <td>
+                <span class="code-inline">${escapeHtml(user.email)}</span>
+              </td>
+              <td>${escapeHtml(user.name || '-')}</td>
+              <td>
+                ${user.emailVerified
+    ? badge('\u2713', 'success')
+    : badge('\u2717', 'neutral')}
+              </td>
+              <td>
+                <div style="display: flex; gap: 4px; flex-wrap: wrap;">
+                  ${user.roles && user.roles.length > 0
+    ? user.roles.map(role => badge(role, 'info')).join('')
+    : html `<span style="color: var(--text-3);">-</span>`}
+                </div>
+              </td>
+              <td style="color: var(--text-2); font-size: 12px;">
+                ${user.createdAt ? formatRelativeTime(user.createdAt) : '-'}
+              </td>
+              <td style="color: var(--text-2); font-size: 12px;">
+                ${user.lastLoginAt ? formatRelativeTime(user.lastLoginAt) : '-'}
+              </td>
+              <td>
+                ${button('View', {
+    size: 'sm',
+    variant: 'secondary',
+    hxGet: '/__covara/ui/users/' + user.id,
+    hxTarget: '#user-detail',
+    hxSwap: 'innerHTML',
+})}
+              </td>
+            </tr>
+          `).join('')}
+        </tbody>
+      </table>
+    </div>
+  ` : emptyState('\u263A', 'No users found', 'Users will appear here once they sign up')}
+
+  <div id="user-detail" style="border-top: 1px solid var(--border);"></div>
+`);
+export const userForm = () => html `
+  <div class="modal-backdrop" onclick="this.remove()">
+    <div class="modal" onclick="event.stopPropagation()">
+      <div class="modal-header">
+        <span class="modal-title">Create User</span>
+        ${button('\u00D7', { size: 'sm', variant: 'ghost', class: 'modal-close' })}
+      </div>
+      <form hx-post="/__covara/api/users"
+            hx-target="#users-list"
+            hx-swap="innerHTML"
+            hx-on::after-request="if(event.detail.successful) { document.querySelector('.modal-backdrop')?.remove(); showToast('User created'); htmx.ajax('GET', '/__covara/ui/users/list', {target: '#users-list'}); }">
+        <div class="modal-body">
+          <div class="form-group">
+            <label class="form-label">Email *</label>
+            <input class="input form-input" name="email" type="email" required />
+          </div>
+          <div class="form-group">
+            <label class="form-label">Name</label>
+            <input class="input form-input" name="name" />
+          </div>
+          <div class="form-group">
+            <label class="form-label">Password</label>
+            <input class="input form-input" name="password" type="password" placeholder="Leave empty for no password" />
+          </div>
+        </div>
+        <div class="modal-footer">
+          ${button('Cancel', { variant: 'secondary', class: 'modal-close' })}
+          ${button('Create', { variant: 'primary', type: 'submit' })}
+        </div>
+      </form>
+    </div>
+  </div>
+
+  <script>
+    document.querySelectorAll('.modal-close').forEach(btn => {
+      btn.addEventListener('click', () => document.querySelector('.modal-backdrop')?.remove());
+    });
+  </script>
+`;
+export const userDetail = (data) => html `
+  <div style="padding: 16px;">
+    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
+      <h4 style="font-weight: 600;">User Details</h4>
+      ${button('\u2715', {
+    size: 'sm',
+    variant: 'ghost',
+    hxGet: '/__covara/ui/empty',
+    hxTarget: '#user-detail',
+    hxSwap: 'innerHTML',
+})}
+    </div>
+
+    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
+      <div>
+        <h5 style="font-size: 12px; color: var(--text-2); margin-bottom: 8px;">Info</h5>
+        <table class="table" style="font-size: 12px;">
+          <tr><td style="color: var(--text-2);">ID</td><td class="code-inline">${escapeHtml(data.user.id)}</td></tr>
+          <tr><td style="color: var(--text-2);">Email</td><td>${escapeHtml(data.user.email)}</td></tr>
+          <tr><td style="color: var(--text-2);">Name</td><td>${escapeHtml(data.user.name || '-')}</td></tr>
+          <tr><td style="color: var(--text-2);">Verified</td><td>${data.user.emailVerified ? badge('\u2713 Yes', 'success') : badge('\u2717 No', 'neutral')}</td></tr>
+          <tr><td style="color: var(--text-2);">Roles</td><td>${data.user.roles?.join(', ') || '-'}</td></tr>
+        </table>
+      </div>
+
+      <div>
+        ${data.user.sessions && data.user.sessions.length > 0 ? html `
+          <h5 style="font-size: 12px; color: var(--text-2); margin-bottom: 8px;">Active Sessions (${data.user.sessions.length})</h5>
+          <div style="max-height: 200px; overflow-y: auto;">
+            ${data.user.sessions.map(session => html `
+              <div class="list-item" style="padding: 8px; font-size: 12px;">
+                <div style="flex: 1;">
+                  <div class="code-inline" style="font-size: 10px; margin-bottom: 4px;">${escapeHtml(session.id.slice(0, 16))}...</div>
+                  <div style="color: var(--text-2);">${escapeHtml(session.userAgent || 'Unknown')}</div>
+                </div>
+                <div style="text-align: right; color: var(--text-3); font-size: 11px;">
+                  <div>Created: ${formatRelativeTime(session.createdAt)}</div>
+                  <div>Active: ${formatRelativeTime(session.lastActiveAt)}</div>
+                </div>
+              </div>
+            `).join('')}
+          </div>
+        ` : html `
+          <h5 style="font-size: 12px; color: var(--text-2); margin-bottom: 8px;">Active Sessions</h5>
+          <p style="color: var(--text-3); font-size: 12px;">No active sessions</p>
+        `}
+      </div>
+    </div>
+
+    ${data.user.metadata ? html `
+      <div style="margin-top: 16px;">
+        <h5 style="font-size: 12px; color: var(--text-2); margin-bottom: 8px;">Metadata</h5>
+        <div class="code" style="max-height: 150px; overflow-y: auto;">
+          ${escapeHtml(JSON.stringify(data.user.metadata, null, 2))}
+        </div>
+      </div>
+    ` : ''}
+  </div>
+`;
+//# sourceMappingURL=users.js.map

package/dist/ui/html/pages/users.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"users.js","sourceRoot":"","sources":["../../../../src/ui/html/pages/users.ts"],"names":[],"mappings":"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"}

package/dist/ui/html/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles = "\n:root {\n  --bg-0: #ffffff;\n  --bg-1: #fafafa;\n  --bg-2: #f0f0f0;\n  --bg-3: #e8e8e8;\n  --text-0: #1a1a1a;\n  --text-1: #444444;\n  --text-2: #666666;\n  --text-3: #888888;\n  --border: #e0e0e0;\n  --accent: #0066ff;\n  --accent-light: #e6f0ff;\n  --success: #00875a;\n  --success-bg: #e6f4ef;\n  --warning: #b86e00;\n  --warning-bg: #fff4e6;\n  --error: #de350b;\n  --error-bg: #ffebe6;\n  --info: #0066ff;\n  --info-bg: #e6f0ff;\n  --radius: 0;\n  --shadow: 0 1px 3px rgba(0,0,0,0.08);\n  --font-mono: 'SF Mono', 'Consolas', 'Monaco', monospace;\n}\n\n[data-theme=\"dark\"] {\n  --bg-0: #1a1a1a;\n  --bg-1: #242424;\n  --bg-2: #2e2e2e;\n  --bg-3: #383838;\n  --text-0: #f0f0f0;\n  --text-1: #cccccc;\n  --text-2: #999999;\n  --text-3: #666666;\n  --border: #404040;\n  --accent: #4d94ff;\n  --accent-light: #1a3a5c;\n  --success: #36b37e;\n  --success-bg: #1a3329;\n  --warning: #ffab00;\n  --warning-bg: #3d2e00;\n  --error: #ff5630;\n  --error-bg: #3d1a14;\n  --info: #4d94ff;\n  --info-bg: #1a3a5c;\n}\n\n* { box-sizing: border-box; margin: 0; padding: 0; }\n\nbody {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  font-size: 14px;\n  line-height: 1.5;\n  background: var(--bg-0);\n  color: var(--text-0);\n}\n\n.app {\n  display: flex;\n  min-height: 100vh;\n}\n\n/* Sidebar */\n.sidebar {\n  width: 220px;\n  background: var(--bg-1);\n  border-right: 1px solid var(--border);\n  display: flex;\n  flex-direction: column;\n  flex-shrink: 0;\n}\n\n.sidebar-header {\n  padding: 16px;\n  border-bottom: 1px solid var(--border);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.sidebar-logo {\n  font-weight: 600;\n  font-size: 16px;\n}\n\n.sidebar-nav {\n  flex: 1;\n  padding: 8px;\n  overflow-y: auto;\n}\n\n.nav-section {\n  margin-bottom: 16px;\n}\n\n.nav-section-title {\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  color: var(--text-3);\n  padding: 8px 12px 4px;\n  letter-spacing: 0.5px;\n}\n\n.nav-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  border-radius: var(--radius);\n  color: var(--text-1);\n  text-decoration: none;\n  cursor: pointer;\n  transition: background 0.15s;\n}\n\n.nav-item:hover {\n  background: var(--bg-2);\n}\n\n.nav-item.active {\n  background: var(--accent-light);\n  color: var(--accent);\n}\n\n.nav-icon {\n  width: 18px;\n  text-align: center;\n}\n\n/* Main content */\n.main {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.header {\n  height: 52px;\n  border-bottom: 1px solid var(--border);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 20px;\n  background: var(--bg-1);\n}\n\n.header-left {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.header-right {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.content {\n  flex: 1;\n  padding: 20px;\n  overflow-y: auto;\n}\n\n/* Page header */\n.page-header {\n  margin-bottom: 20px;\n}\n\n.page-title {\n  font-size: 24px;\n  font-weight: 600;\n  margin-bottom: 4px;\n}\n\n.page-desc {\n  color: var(--text-2);\n}\n\n/* Cards */\n.card {\n  background: var(--bg-1);\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  box-shadow: var(--shadow);\n}\n\n.card-header {\n  padding: 12px 16px;\n  border-bottom: 1px solid var(--border);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n}\n\n.card-title {\n  font-weight: 600;\n}\n\n.card-body {\n  padding: 16px;\n}\n\n.card-body-flush {\n  padding: 0;\n}\n\n/* Grid */\n.grid {\n  display: grid;\n  gap: 16px;\n}\n\n.grid-2 { grid-template-columns: repeat(2, 1fr); }\n.grid-3 { grid-template-columns: repeat(3, 1fr); }\n.grid-4 { grid-template-columns: repeat(4, 1fr); }\n.grid-5 { grid-template-columns: repeat(5, 1fr); }\n\n/* Stats */\n.stat-card {\n  background: var(--bg-1);\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  padding: 16px;\n}\n\n.stat-label {\n  font-size: 12px;\n  color: var(--text-2);\n  margin-bottom: 4px;\n}\n\n.stat-value {\n  font-size: 28px;\n  font-weight: 600;\n}\n\n/* Badges */\n.badge {\n  display: inline-flex;\n  align-items: center;\n  padding: 2px 8px;\n  border-radius: var(--radius);\n  font-size: 12px;\n  font-weight: 500;\n}\n\n.badge-neutral {\n  background: var(--bg-3);\n  color: var(--text-1);\n}\n\n.badge-success {\n  background: var(--success-bg);\n  color: var(--success);\n}\n\n.badge-warning {\n  background: var(--warning-bg);\n  color: var(--warning);\n}\n\n.badge-error {\n  background: var(--error-bg);\n  color: var(--error);\n}\n\n.badge-info {\n  background: var(--info-bg);\n  color: var(--info);\n}\n\n.badge-method {\n  font-family: var(--font-mono);\n  font-size: 11px;\n  padding: 2px 6px;\n}\n\n.badge-get { background: var(--success-bg); color: var(--success); }\n.badge-post { background: var(--info-bg); color: var(--info); }\n.badge-patch { background: var(--warning-bg); color: var(--warning); }\n.badge-put { background: #f3e6ff; color: #7b2cbf; }\n.badge-delete { background: var(--error-bg); color: var(--error); }\n\n[data-theme=\"dark\"] .badge-put { background: #2d1f3d; color: #b36bff; }\n\n/* Buttons */\n.btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  padding: 8px 14px;\n  border-radius: var(--radius);\n  font-size: 13px;\n  font-weight: 500;\n  border: none;\n  cursor: pointer;\n  transition: all 0.15s;\n  text-decoration: none;\n}\n\n.btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.btn-primary {\n  background: var(--accent);\n  color: white;\n}\n\n.btn-primary:hover:not(:disabled) {\n  filter: brightness(1.1);\n}\n\n.btn-secondary {\n  background: var(--bg-2);\n  color: var(--text-0);\n  border: 1px solid var(--border);\n}\n\n.btn-secondary:hover:not(:disabled) {\n  background: var(--bg-3);\n}\n\n.btn-ghost {\n  background: transparent;\n  color: var(--text-1);\n}\n\n.btn-ghost:hover:not(:disabled) {\n  background: var(--bg-2);\n}\n\n.btn-sm {\n  padding: 4px 10px;\n  font-size: 12px;\n}\n\n.btn-icon {\n  width: 32px;\n  height: 32px;\n  padding: 0;\n}\n\n/* Inputs */\n.input {\n  padding: 8px 12px;\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  font-size: 13px;\n  background: var(--bg-0);\n  color: var(--text-0);\n  outline: none;\n  transition: border-color 0.15s;\n}\n\n.input:focus {\n  border-color: var(--accent);\n}\n\n.input-mono {\n  font-family: var(--font-mono);\n}\n\n.select {\n  appearance: none;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L2 4h8z'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 10px center;\n  padding-right: 30px;\n}\n\n/* Tables */\n.table {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.table th,\n.table td {\n  padding: 10px 12px;\n  text-align: left;\n  border-bottom: 1px solid var(--border);\n}\n\n.table th {\n  font-weight: 600;\n  font-size: 12px;\n  color: var(--text-2);\n  background: var(--bg-2);\n}\n\n.table tbody tr:hover {\n  background: var(--bg-2);\n}\n\n.table-mono td {\n  font-family: var(--font-mono);\n  font-size: 12px;\n}\n\n.table-sortable th {\n  cursor: pointer;\n  user-select: none;\n}\n\n.table-sortable th:hover {\n  background: var(--bg-3);\n}\n\n/* Toolbar */\n.toolbar {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px;\n  background: var(--bg-1);\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n}\n\n/* List items */\n.list-item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 16px;\n  border-bottom: 1px solid var(--border);\n}\n\n.list-item:last-child {\n  border-bottom: none;\n}\n\n.list-item:hover {\n  background: var(--bg-2);\n}\n\n/* Empty state */\n.empty-state {\n  padding: 40px;\n  text-align: center;\n  color: var(--text-2);\n}\n\n.empty-icon {\n  font-size: 48px;\n  margin-bottom: 12px;\n  opacity: 0.5;\n}\n\n.empty-title {\n  font-size: 16px;\n  font-weight: 600;\n  margin-bottom: 4px;\n  color: var(--text-1);\n}\n\n.empty-desc {\n  font-size: 13px;\n}\n\n/* Code */\n.code {\n  font-family: var(--font-mono);\n  font-size: 12px;\n  background: var(--bg-2);\n  padding: 12px;\n  border-radius: var(--radius);\n  overflow-x: auto;\n  white-space: pre-wrap;\n  word-break: break-all;\n}\n\n.code-inline {\n  font-family: var(--font-mono);\n  font-size: 12px;\n  background: var(--bg-2);\n  padding: 2px 6px;\n  border-radius: var(--radius);\n}\n\n/* Alerts */\n.alert {\n  padding: 12px 16px;\n  border-radius: var(--radius);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.alert-warning {\n  background: var(--warning-bg);\n  color: var(--warning);\n}\n\n.alert-error {\n  background: var(--error-bg);\n  color: var(--error);\n}\n\n.alert-info {\n  background: var(--info-bg);\n  color: var(--info);\n}\n\n.alert-success {\n  background: var(--success-bg);\n  color: var(--success);\n}\n\n/* Environment badges */\n.env-badge {\n  padding: 4px 10px;\n  border-radius: var(--radius);\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n}\n\n.env-dev {\n  background: var(--success-bg);\n  color: var(--success);\n}\n\n.env-staging {\n  background: var(--warning-bg);\n  color: var(--warning);\n}\n\n.env-prod {\n  background: var(--info-bg);\n  color: var(--info);\n}\n\n/* Modal */\n.modal-backdrop {\n  position: fixed;\n  inset: 0;\n  background: rgba(0,0,0,0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n}\n\n.modal {\n  background: var(--bg-0);\n  border-radius: var(--radius);\n  box-shadow: 0 4px 20px rgba(0,0,0,0.2);\n  min-width: 400px;\n  max-width: 90vw;\n  max-height: 90vh;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}\n\n.modal-header {\n  padding: 16px;\n  border-bottom: 1px solid var(--border);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.modal-title {\n  font-weight: 600;\n  font-size: 16px;\n}\n\n.modal-body {\n  padding: 16px;\n  overflow-y: auto;\n}\n\n.modal-footer {\n  padding: 16px;\n  border-top: 1px solid var(--border);\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n}\n\n/* Form */\n.form-group {\n  margin-bottom: 16px;\n}\n\n.form-label {\n  display: block;\n  font-size: 13px;\n  font-weight: 500;\n  margin-bottom: 6px;\n}\n\n.form-input {\n  width: 100%;\n}\n\n/* Toast notifications */\n.toast-container {\n  position: fixed;\n  top: 20px;\n  right: 20px;\n  z-index: 2000;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.toast {\n  padding: 12px 16px;\n  border-radius: var(--radius);\n  box-shadow: 0 4px 12px rgba(0,0,0,0.15);\n  animation: slideIn 0.2s ease;\n}\n\n.toast-success {\n  background: var(--success);\n  color: white;\n}\n\n.toast-error {\n  background: var(--error);\n  color: white;\n}\n\n@keyframes slideIn {\n  from { transform: translateX(100%); opacity: 0; }\n  to { transform: translateX(0); opacity: 1; }\n}\n\n/* Loading */\n.loading {\n  display: inline-block;\n  width: 16px;\n  height: 16px;\n  border: 2px solid var(--border);\n  border-top-color: var(--accent);\n  border-radius: 50%;\n  animation: spin 0.8s linear infinite;\n}\n\n@keyframes spin {\n  to { transform: rotate(360deg); }\n}\n\n/* HTMX loading indicator */\n.htmx-request .htmx-indicator {\n  display: inline-block;\n}\n\n.htmx-indicator {\n  display: none;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n  .sidebar {\n    display: none;\n  }\n\n  .grid-4, .grid-3 {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}\n";
+//# sourceMappingURL=styles.d.ts.map

package/dist/ui/html/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/ui/html/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM,y9WAiqBlB,CAAC"}