@rudderjs/telescope 0.0.1 → 0.0.2

package/dist/views/vanilla/details/Batch.js

@@ -0,0 +1,120 @@
+import { Layout } from '../Layout.js';
+import { html } from '../_html.js';
+import { Card, Badge } from './sections.js';
+/**
+ * Batch view — lists every entry sharing one `batchId`. Typically a single
+ * HTTP request and all the queries / cache lookups / events / model writes
+ * it triggered. The framework's batch propagation through the request
+ * lifecycle is what makes this useful.
+ */
+export function BatchPage(props) {
+    const { basePath, batchId, entries } = props;
+    const sorted = [...entries].sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime());
+    // The first request entry (if any) is the entry-point
+    const requestEntry = sorted.find(e => e.type === 'request');
+    const counts = {};
+    for (const e of sorted)
+        counts[e.type] = (counts[e.type] ?? 0) + 1;
+    const summary = html `
+    ${Card(null, html `
+      <div class="flex items-center justify-between">
+        <div>
+          <div class="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400 mb-1">Batch</div>
+          <div class="font-mono text-xs">${batchId}</div>
+        </div>
+        <div class="flex flex-wrap gap-2">
+          ${Object.entries(counts).map(([type, count]) => html `
+            <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-gray-100 dark:bg-gray-800 text-xs">
+              <span class="font-medium">${count}</span>
+              <span class="text-gray-500 dark:text-gray-400">${type}${count === 1 ? '' : 's'}</span>
+            </span>
+          `)}
+        </div>
+      </div>
+      ${requestEntry ? html `
+        <div class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-800 text-sm">
+          <div class="flex items-center gap-2">
+            ${Badge(String(requestEntry.content['method'] ?? ''))}
+            <span class="font-mono text-xs">${String(requestEntry.content['path'] ?? '')}</span>
+          </div>
+        </div>
+      ` : ''}
+    `)}
+  `;
+    const tableRows = sorted.map(e => {
+        const c = e.content;
+        const detailUrl = `${basePath}/${pluralUrlSegment(e.type)}/${e.id}`;
+        const summaryText = entrySummary(e.type, c);
+        const offsetMs = requestEntry
+            ? new Date(e.createdAt).getTime() - new Date(requestEntry.createdAt).getTime()
+            : 0;
+        return html `
+      <tr class="hover:bg-gray-50 dark:hover:bg-gray-800">
+        <td class="px-4 py-2 text-right text-xs text-gray-400 dark:text-gray-500 font-mono w-16">+${offsetMs}ms</td>
+        <td class="px-4 py-2 w-24">${Badge(e.type)}</td>
+        <td class="px-4 py-2 text-sm break-all">${summaryText}</td>
+        <td class="px-4 py-2 text-right">
+          <a href="${detailUrl}" @click.prevent="$dispatch('telescope:navigate', '${detailUrl}')" class="text-xs text-indigo-600 dark:text-indigo-400 hover:text-indigo-700 dark:hover:text-indigo-300">View →</a>
+        </td>
+      </tr>
+    `;
+    });
+    const table = html `
+    ${Card(null, html `
+      <table class="w-full">
+        <thead class="text-left">
+          <tr class="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400 border-b border-gray-100 dark:border-gray-800">
+            <th class="px-4 py-2 text-right">Offset</th>
+            <th class="px-4 py-2">Type</th>
+            <th class="px-4 py-2">Summary</th>
+            <th class="px-4 py-2"></th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
+          ${tableRows}
+        </tbody>
+      </table>
+    `)}
+  `;
+    const backLink = html `
+    <a href="${basePath}" @click.prevent="$dispatch('telescope:navigate', '${basePath}')" class="inline-flex items-center gap-1 text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 mb-3">
+      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
+      Back to Dashboard
+    </a>
+  `;
+    const body = html `
+    ${backLink}
+    <h2 class="text-xl font-bold mb-6">Batch Detail</h2>
+    ${summary}
+    ${table}
+  `.toString();
+    return Layout({ title: 'Batch', body, basePath, activePath: '/' });
+}
+function pluralUrlSegment(type) {
+    // Mirrors the URL segments declared in `columns.ts` `pages` map.
+    if (type === 'mail' || type === 'cache' || type === 'schedule')
+        return type;
+    if (type === 'query')
+        return 'queries';
+    return `${type}s`; // request → requests, command → commands, etc.
+}
+function entrySummary(type, c) {
+    switch (type) {
+        case 'request': return `${c['method'] ?? ''} ${c['path'] ?? ''}`;
+        case 'query': return String(c['sql'] ?? '');
+        case 'job': return String(c['class'] ?? '');
+        case 'exception': return `${c['class'] ?? ''}: ${c['message'] ?? ''}`;
+        case 'log': return `[${c['level'] ?? ''}] ${c['message'] ?? ''}`;
+        case 'mail': return String(c['subject'] ?? '');
+        case 'notification': return String(c['class'] ?? '');
+        case 'event': return String(c['name'] ?? '');
+        case 'cache': return `${c['operation'] ?? ''} ${c['key'] ?? ''}`;
+        case 'schedule': return String(c['description'] ?? '');
+        case 'model': return `${c['action'] ?? ''} ${c['model'] ?? ''}`;
+        case 'command': return `${c['name'] ?? ''} (exit ${c['exitCode'] ?? '?'})`;
+        case 'broadcast': return `${c['kind'] ?? ''}${c['channel'] ? ' ' + c['channel'] : ''}${c['event'] ? ' → ' + c['event'] : ''}`;
+        case 'live': return `${c['kind'] ?? ''}${c['docName'] ? ' ' + c['docName'] : ''}${c['byteSize'] != null ? ' (' + c['byteSize'] + 'b)' : ''}`;
+        default: return '';
+    }
+}
+//# sourceMappingURL=Batch.js.map

package/dist/views/vanilla/details/Batch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Batch.js","sourceRoot":"","sources":["../../../../src/views/vanilla/details/Batch.ts"],"names":[],"mappings":"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"}

package/dist/views/vanilla/details/Layout.d.ts

@@ -0,0 +1,21 @@
+import { type SafeString } from '../_html.js';
+import type { TelescopeEntry } from '../../../types.js';
+export interface DetailLayoutProps {
+    basePath: string;
+    /** URL segment for this watcher (e.g. `requests`, `mail`, `cache`) */
+    pageKey: string;
+    /** Display title — usually the watcher type pluralised */
+    pageTitle: string;
+    entry: TelescopeEntry;
+    /** Pre-rendered detail body — must be a `SafeString` */
+    body: SafeString;
+    /** Related entries from the same batch (if any) */
+    relatedEntries?: TelescopeEntry[] | undefined;
+}
+/**
+ * Shared chrome for every per-watcher detail page. Wraps the existing
+ * sidebar Layout and adds a back link, entry header (id, type, age, tags),
+ * watcher-specific body, and inline related entries from the same batch.
+ */
+export declare function DetailLayout(props: DetailLayoutProps): string;
+//# sourceMappingURL=Layout.d.ts.map

package/dist/views/vanilla/details/Layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["../../../../src/views/vanilla/details/Layout.ts"],"names":[],"mappings":"AACA,OAAO,EAAa,KAAK,UAAU,EAAE,MAAM,aAAa,CAAA;AAExD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAEvD,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAK,MAAM,CAAA;IACnB,sEAAsE;IACtE,OAAO,EAAM,MAAM,CAAA;IACnB,0DAA0D;IAC1D,SAAS,EAAI,MAAM,CAAA;IACnB,KAAK,EAAQ,cAAc,CAAA;IAC3B,wDAAwD;IACxD,IAAI,EAAS,UAAU,CAAA;IACvB,mDAAmD;IACnD,cAAc,CAAC,EAAE,cAAc,EAAE,GAAG,SAAS,CAAA;CAC9C;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,MAAM,CA+C7D"}

package/dist/views/vanilla/details/Layout.js

@@ -0,0 +1,163 @@
+import { Layout as BaseLayout } from '../Layout.js';
+import { html } from '../_html.js';
+import { Card } from './sections.js';
+/**
+ * Shared chrome for every per-watcher detail page. Wraps the existing
+ * sidebar Layout and adds a back link, entry header (id, type, age, tags),
+ * watcher-specific body, and inline related entries from the same batch.
+ */
+export function DetailLayout(props) {
+    const { basePath, pageKey, pageTitle, entry, body, relatedEntries } = props;
+    const ageText = formatAge(new Date(entry.createdAt));
+    const tagPills = entry.tags.length > 0
+        ? html `<div class="flex flex-wrap gap-1 mt-2">
+        ${entry.tags.map((tag) => html `<a href="${basePath}/${pageKey}?tag=${tag}" @click.prevent="$dispatch('telescope:navigate', '${basePath}/${pageKey}?tag=${tag}')" class="inline-flex items-center px-2 py-0.5 rounded-full text-xs bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700">${tag}</a>`)}
+      </div>`
+        : '';
+    const batchLink = entry.batchId
+        ? html `<a href="${basePath}/batches/${entry.batchId}" @click.prevent="$dispatch('telescope:navigate', '${basePath}/batches/${entry.batchId}')" class="inline-flex items-center gap-1 text-xs text-indigo-600 dark:text-indigo-400 hover:text-indigo-700 dark:hover:text-indigo-300 ml-3">
+        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>
+        View all related entries
+      </a>`
+        : '';
+    const headerHtml = html `
+    <div class="mb-6">
+      <a href="${basePath}/${pageKey}" @click.prevent="$dispatch('telescope:navigate', '${basePath}/${pageKey}')" class="inline-flex items-center gap-1 text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 mb-3">
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
+        Back to ${pageTitle}
+      </a>
+      <div class="flex items-baseline justify-between">
+        <h2 class="text-xl font-bold">${pageTitle.replace(/s$/, '')} Detail</h2>
+        <div class="text-xs text-gray-500 dark:text-gray-400">
+          <span class="font-mono">${entry.id}</span>
+          <span class="mx-2">·</span>
+          <span>${ageText}</span>
+          ${batchLink}
+        </div>
+      </div>
+      ${tagPills}
+    </div>
+  `;
+    // Render inline related entries grouped by type
+    const relatedHtml = renderRelatedEntries(relatedEntries ?? [], basePath, entry);
+    const fullBody = html `${headerHtml}${body}${relatedHtml}`.toString();
+    return BaseLayout({
+        title: `${pageTitle.replace(/s$/, '')} ${entry.id.slice(0, 8)}`,
+        body: fullBody,
+        basePath,
+        activePath: `/${pageKey}`,
+    });
+}
+// ─── Related Entries ──────────────────────────────────────
+function renderRelatedEntries(entries, basePath, parentEntry) {
+    if (entries.length === 0)
+        return html ``;
+    // Group by type
+    const groups = new Map();
+    for (const e of entries) {
+        const list = groups.get(e.type) ?? [];
+        list.push(e);
+        groups.set(e.type, list);
+    }
+    // Sort entries within each group chronologically
+    for (const list of groups.values()) {
+        list.sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime());
+    }
+    // Render each group as a section
+    const parentTime = new Date(parentEntry.createdAt).getTime();
+    const sections = [...groups.entries()].map(([type, list]) => {
+        const title = `${typeLabel(type)} (${list.length})`;
+        const rows = list.map(e => {
+            const c = e.content;
+            const summary = entrySummary(type, c);
+            const detailUrl = `${basePath}/${pluralUrlSegment(type)}/${e.id}`;
+            const offsetMs = new Date(e.createdAt).getTime() - parentTime;
+            const durationText = c['duration'] != null ? `${c['duration']}ms` : '';
+            return html `
+        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800">
+          <td class="px-4 py-2 text-right text-xs text-gray-400 dark:text-gray-500 font-mono w-16">${offsetMs >= 0 ? '+' : ''}${offsetMs}ms</td>
+          <td class="px-4 py-2 text-sm break-all">
+            <a href="${detailUrl}" @click.prevent="$dispatch('telescope:navigate', '${detailUrl}')" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-700 dark:hover:text-indigo-300">${summary}</a>
+          </td>
+          <td class="px-4 py-2 text-right text-xs text-gray-400 dark:text-gray-500 font-mono">${durationText}</td>
+        </tr>
+      `;
+        });
+        return Card(title, html `
+      <table class="w-full">
+        <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
+          ${rows}
+        </tbody>
+      </table>
+    `);
+    });
+    return html `
+    <div class="mt-6">
+      <h3 class="text-sm uppercase tracking-wide font-medium text-gray-500 dark:text-gray-400 mb-3">Related Entries</h3>
+      ${sections}
+    </div>
+  `;
+}
+function typeLabel(type) {
+    const labels = {
+        request: 'Requests', query: 'Queries', job: 'Jobs', exception: 'Exceptions',
+        log: 'Logs', mail: 'Mail', notification: 'Notifications', event: 'Events',
+        cache: 'Cache', schedule: 'Scheduled Tasks', model: 'Model Changes',
+        command: 'Commands', http: 'HTTP Client', gate: 'Gates', dump: 'Dumps',
+        broadcast: 'WebSockets', live: 'Live (Yjs)',
+    };
+    return labels[type] ?? type;
+}
+function pluralUrlSegment(type) {
+    if (type === 'mail' || type === 'cache' || type === 'schedule' || type === 'http')
+        return type;
+    if (type === 'query')
+        return 'queries';
+    return `${type}s`;
+}
+function entrySummary(type, c) {
+    switch (type) {
+        case 'request': return `${c['method'] ?? ''} ${c['path'] ?? ''}`;
+        case 'query': return String(c['sql'] ?? '').slice(0, 120);
+        case 'job': return String(c['class'] ?? '');
+        case 'exception': return `${c['class'] ?? ''}: ${c['message'] ?? ''}`;
+        case 'log': return `[${c['level'] ?? ''}] ${String(c['message'] ?? '').slice(0, 100)}`;
+        case 'mail': return String(c['subject'] ?? '');
+        case 'notification': return String(c['class'] ?? '');
+        case 'event': return String(c['name'] ?? '');
+        case 'cache': return `${c['operation'] ?? ''} ${c['key'] ?? ''}`;
+        case 'schedule': return String(c['description'] ?? '');
+        case 'model': return `${c['action'] ?? ''} ${c['model'] ?? ''}`;
+        case 'command': return `${c['name'] ?? ''} (exit ${c['exitCode'] ?? '?'})`;
+        case 'http': return `${c['method'] ?? ''} ${c['url'] ?? ''}`;
+        case 'gate': return `${c['ability'] ?? ''} → ${c['allowed'] ? 'allowed' : 'denied'}`;
+        case 'dump': return `${c['method'] ?? ''}(${c['count'] ?? 0} args)`;
+        case 'broadcast': return `${c['kind'] ?? ''}${c['channel'] ? ' ' + c['channel'] : ''}`;
+        case 'live': return `${c['kind'] ?? ''}${c['docName'] ? ' ' + c['docName'] : ''}`;
+        default: return '';
+    }
+}
+function formatAge(date) {
+    const s = Math.floor((Date.now() - date.getTime()) / 1000);
+    const relative = s < 60 ? `${s}s ago`
+        : s < 3600 ? `${Math.floor(s / 60)}m ago`
+            : s < 86400 ? `${Math.floor(s / 3600)}h ago`
+                : `${Math.floor(s / 86400)}d ago`;
+    return `${formatFullDate(date)} (${relative})`;
+}
+function formatFullDate(date) {
+    const months = ['January', 'February', 'March', 'April', 'May', 'June',
+        'July', 'August', 'September', 'October', 'November', 'December'];
+    const month = months[date.getMonth()];
+    const day = date.getDate();
+    const year = date.getFullYear();
+    const suffix = day === 1 || day === 21 || day === 31 ? 'st'
+        : day === 2 || day === 22 ? 'nd'
+            : day === 3 || day === 23 ? 'rd' : 'th';
+    const h = date.getHours();
+    const m = date.getMinutes().toString().padStart(2, '0');
+    const ampm = h >= 12 ? 'PM' : 'AM';
+    const h12 = h % 12 || 12;
+    return `${month} ${day}${suffix} ${year}, ${h12}:${m} ${ampm}`;
+}
+//# sourceMappingURL=Layout.js.map

package/dist/views/vanilla/details/Layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Layout.js","sourceRoot":"","sources":["../../../../src/views/vanilla/details/Layout.ts"],"names":[],"mappings":"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"}

package/dist/views/vanilla/details/NotFound.d.ts

@@ -0,0 +1,8 @@
+export interface NotFoundProps {
+    basePath: string;
+    /** What we were looking up — used in the message. */
+    what: string;
+    id: string;
+}
+export declare function NotFoundPage(props: NotFoundProps): string;
+//# sourceMappingURL=NotFound.d.ts.map

package/dist/views/vanilla/details/NotFound.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotFound.d.ts","sourceRoot":"","sources":["../../../../src/views/vanilla/details/NotFound.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,MAAM,CAAA;IAChB,qDAAqD;IACrD,IAAI,EAAK,MAAM,CAAA;IACf,EAAE,EAAO,MAAM,CAAA;CAChB;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,aAAa,GAAG,MAAM,CAiBzD"}

package/dist/views/vanilla/details/NotFound.js

@@ -0,0 +1,20 @@
+import { Layout } from '../Layout.js';
+import { html } from '../_html.js';
+export function NotFoundPage(props) {
+    const { basePath, what, id } = props;
+    const body = html `
+    <div class="text-center py-20">
+      <div class="inline-flex items-center justify-center w-12 h-12 bg-gray-100 dark:bg-gray-800 rounded-full mb-4">
+        <svg class="w-6 h-6 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+      </div>
+      <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-1">${what} not found</h2>
+      <p class="text-sm text-gray-500 dark:text-gray-400 mb-6">No entry with id <span class="font-mono">${id}</span> exists.</p>
+      <a href="${basePath}" class="inline-flex items-center gap-1 text-sm text-indigo-600 dark:text-indigo-400 hover:text-indigo-700 dark:hover:text-indigo-300">
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
+        Back to Dashboard
+      </a>
+    </div>
+  `.toString();
+    return Layout({ title: 'Not Found', body, basePath, activePath: '/' });
+}
+//# sourceMappingURL=NotFound.js.map

package/dist/views/vanilla/details/NotFound.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotFound.js","sourceRoot":"","sources":["../../../../src/views/vanilla/details/NotFound.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AACrC,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAA;AASlC,MAAM,UAAU,YAAY,CAAC,KAAoB;IAC/C,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,EAAE,GAAG,KAAK,CAAA;IACpC,MAAM,IAAI,GAAG,IAAI,CAAA;;;;;gFAK6D,IAAI;0GACsB,EAAE;iBAC3F,QAAQ;;;;;GAKtB,CAAC,QAAQ,EAAE,CAAA;IAEZ,OAAO,MAAM,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,EAAE,CAAC,CAAA;AACxE,CAAC"}

package/dist/views/vanilla/details/index.d.ts

@@ -0,0 +1,5 @@
+export { DetailLayout, type DetailLayoutProps } from './Layout.js';
+export { detailViews } from './views.js';
+export { NotFoundPage } from './NotFound.js';
+export { BatchPage, type BatchPageProps } from './Batch.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/views/vanilla/details/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/vanilla/details/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,aAAa,CAAA;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAC5C,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,YAAY,CAAA"}

package/dist/views/vanilla/details/index.js

@@ -0,0 +1,5 @@
+export { DetailLayout } from './Layout.js';
+export { detailViews } from './views.js';
+export { NotFoundPage } from './NotFound.js';
+export { BatchPage } from './Batch.js';
+//# sourceMappingURL=index.js.map

package/dist/views/vanilla/details/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/views/vanilla/details/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAA0B,MAAM,aAAa,CAAA;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAC5C,OAAO,EAAE,SAAS,EAAuB,MAAM,YAAY,CAAA"}

package/dist/views/vanilla/details/sections.d.ts

@@ -0,0 +1,46 @@
+import { SafeString } from '../_html.js';
+/**
+ * Reusable detail-page sections. Composed by per-watcher views in `views.ts`
+ * to keep each detail view small and consistent.
+ */
+/**
+ * Card wrapper used to group a section of a detail page. Title is optional —
+ * omit it for sections where the content is self-explanatory.
+ */
+export declare function Card(title: string | null, body: SafeString | string): SafeString;
+/**
+ * Two-column key/value table. `null`/`undefined` values are rendered as `—`.
+ * String values are HTML-escaped automatically by `html\`\``.
+ */
+export declare function KeyValueTable(rows: Record<string, unknown>): SafeString;
+/**
+ * Formatted JSON block in a `<pre>`. Used for arbitrary nested values
+ * (request bodies, payloads, dirty attribute diffs, etc.).
+ */
+export declare function JsonBlock(value: unknown): SafeString;
+/**
+ * Code block — like JsonBlock but for arbitrary text (SQL, stack traces,
+ * log messages). No JSON formatting.
+ */
+export declare function CodeBlock(text: string, opts?: {
+    language?: string;
+    maxHeight?: string;
+}): SafeString;
+/**
+ * Coloured pill matching the badge style used in EntryList.
+ * The colour palette mirrors `EntryList.ts`'s `badgeClass()` function.
+ */
+export declare function Badge(value: string | undefined): SafeString;
+/**
+ * Tabbed sections — uses Alpine.js `x-data` for tab switching.
+ * Only renders tabs that have non-empty content.
+ */
+export declare function Tabs(tabs: {
+    label: string;
+    content: SafeString | string;
+}[]): SafeString;
+/**
+ * Get a content field with a fallback. Helper to keep view files terse.
+ */
+export declare function field(content: Record<string, unknown>, key: string): unknown;
+//# sourceMappingURL=sections.d.ts.map

package/dist/views/vanilla/details/sections.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sections.d.ts","sourceRoot":"","sources":["../../../../src/views/vanilla/details/sections.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,aAAa,CAAA;AAEnD;;;GAGG;AAEH;;;GAGG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAAE,IAAI,EAAE,UAAU,GAAG,MAAM,GAAG,UAAU,CAQhF;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,UAAU,CAgBvE;AAWD;;;GAGG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,OAAO,GAAG,UAAU,CAQpD;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,GAAE;IAAE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAO,GAAG,UAAU,CAIxG;AAED;;;GAGG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,CA0B3D;AAED;;;GAGG;AACH,wBAAgB,IAAI,CAAC,IAAI,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,UAAU,GAAG,MAAM,CAAA;CAAE,EAAE,GAAG,UAAU,CAyBxF;AAED;;GAEG;AACH,wBAAgB,KAAK,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,GAAG,EAAE,MAAM,GAAG,OAAO,CAE5E"}

package/dist/views/vanilla/details/sections.js

@@ -0,0 +1,145 @@
+import { html, raw, SafeString } from '../_html.js';
+/**
+ * Reusable detail-page sections. Composed by per-watcher views in `views.ts`
+ * to keep each detail view small and consistent.
+ */
+/**
+ * Card wrapper used to group a section of a detail page. Title is optional —
+ * omit it for sections where the content is self-explanatory.
+ */
+export function Card(title, body) {
+    const titleHtml = title ? html `<h3 class="text-xs uppercase tracking-wide font-medium text-gray-500 dark:text-gray-400 mb-3">${title}</h3>` : '';
+    return html `
+    <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 shadow-sm p-5 mb-4">
+      ${titleHtml}
+      ${typeof body === 'string' ? body : body}
+    </div>
+  `;
+}
+/**
+ * Two-column key/value table. `null`/`undefined` values are rendered as `—`.
+ * String values are HTML-escaped automatically by `html\`\``.
+ */
+export function KeyValueTable(rows) {
+    const entries = Object.entries(rows);
+    if (entries.length === 0)
+        return html `<p class="text-sm text-gray-400 dark:text-gray-500">No data.</p>`;
+    return html `
+    <table class="w-full text-sm">
+      <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
+        ${entries.map(([k, v]) => html `
+          <tr>
+            <td class="py-2 pr-4 text-gray-500 dark:text-gray-400 font-medium align-top w-40">${k}</td>
+            <td class="py-2 break-all">${formatValue(v)}</td>
+          </tr>
+        `)}
+      </tbody>
+    </table>
+  `;
+}
+function formatValue(v) {
+    if (v === null || v === undefined || v === '')
+        return raw('<span class="text-gray-300 dark:text-gray-600">—</span>');
+    if (v instanceof SafeString)
+        return v;
+    if (typeof v === 'boolean')
+        return raw(`<span class="font-mono text-xs">${v}</span>`);
+    if (typeof v === 'number')
+        return raw(`<span class="font-mono text-xs">${v}</span>`);
+    if (typeof v === 'object')
+        return JsonBlock(v);
+    return String(v);
+}
+/**
+ * Formatted JSON block in a `<pre>`. Used for arbitrary nested values
+ * (request bodies, payloads, dirty attribute diffs, etc.).
+ */
+export function JsonBlock(value) {
+    let json;
+    try {
+        json = JSON.stringify(value, null, 2);
+    }
+    catch {
+        json = String(value);
+    }
+    return html `<pre class="text-xs bg-gray-50 dark:bg-gray-800 rounded-lg p-3 overflow-auto max-h-96 font-mono">${json}</pre>`;
+}
+/**
+ * Code block — like JsonBlock but for arbitrary text (SQL, stack traces,
+ * log messages). No JSON formatting.
+ */
+export function CodeBlock(text, opts = {}) {
+    const cls = opts.maxHeight ? `max-h-${opts.maxHeight}` : 'max-h-96';
+    const langCls = opts.language ? ` language-${opts.language}` : '';
+    return html `<pre class="text-xs bg-gray-50 dark:bg-gray-800 rounded-lg p-3 overflow-auto ${cls} font-mono${langCls}">${text}</pre>`;
+}
+/**
+ * Coloured pill matching the badge style used in EntryList.
+ * The colour palette mirrors `EntryList.ts`'s `badgeClass()` function.
+ */
+export function Badge(value) {
+    if (!value)
+        return html `<span class="text-gray-300 dark:text-gray-600">—</span>`;
+    const colors = {
+        GET: 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-400',
+        POST: 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-400',
+        PUT: 'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-400',
+        DELETE: 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-400',
+        PATCH: 'bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-400',
+        error: 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-400',
+        warning: 'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-400',
+        info: 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-400',
+        debug: 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300',
+        dispatched: 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-400',
+        failed: 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-400',
+        completed: 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-400',
+        running: 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-400',
+        hit: 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-400',
+        miss: 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-400',
+        set: 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-400',
+        forget: 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300',
+        created: 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-400',
+        updated: 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-400',
+        deleted: 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-400',
+    };
+    const cls = colors[value] ?? 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-300';
+    return html `<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${cls}">${value}</span>`;
+}
+/**
+ * Tabbed sections — uses Alpine.js `x-data` for tab switching.
+ * Only renders tabs that have non-empty content.
+ */
+export function Tabs(tabs) {
+    const visible = tabs.filter(t => {
+        const s = typeof t.content === 'string' ? t.content : t.content.toString();
+        return s.trim().length > 0;
+    });
+    if (visible.length === 0)
+        return html ``;
+    if (visible.length === 1)
+        return html `${visible[0].content}`;
+    const id = `tabs_${Math.random().toString(36).slice(2, 8)}`;
+    return html `
+    <div x-data="{ tab: '${visible[0].label}' }" class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 shadow-sm mb-4">
+      <div class="flex border-b border-gray-200 dark:border-gray-800">
+        ${visible.map(t => html `
+          <button @click="tab = '${t.label}'"
+            :class="tab === '${t.label}' ? 'border-indigo-500 text-indigo-600 dark:text-indigo-400' : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200'"
+            class="px-4 py-2.5 text-sm font-medium border-b-2 -mb-px transition-colors">
+            ${t.label}
+          </button>
+        `)}
+      </div>
+      ${visible.map(t => html `
+        <div x-show="tab === '${t.label}'" class="p-5">${t.content}</div>
+      `)}
+    </div>
+  `;
+}
+/**
+ * Get a content field with a fallback. Helper to keep view files terse.
+ */
+export function field(content, key) {
+    return content[key];
+}
+//# sourceMappingURL=sections.js.map

package/dist/views/vanilla/details/sections.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sections.js","sourceRoot":"","sources":["../../../../src/views/vanilla/details/sections.ts"],"names":[],"mappings":"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"}

package/dist/views/vanilla/details/views.d.ts

@@ -0,0 +1,15 @@
+import { type SafeString } from '../_html.js';
+import type { TelescopeEntry } from '../../../types.js';
+/**
+ * Per-watcher detail view functions. Each takes a `TelescopeEntry` and
+ * returns a `SafeString` body to be slotted into `DetailLayout`.
+ *
+ * Keep these short — push reusable rendering into `sections.ts`. The
+ * point of having one function per watcher is to make the type-specific
+ * rendering decisions explicit and obvious to read.
+ */
+type ViewFn = (entry: TelescopeEntry) => SafeString;
+/** Map of EntryType → detail view function. Used by the dispatcher. */
+export declare const detailViews: Record<string, ViewFn>;
+export {};
+//# sourceMappingURL=views.d.ts.map

package/dist/views/vanilla/details/views.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"views.d.ts","sourceRoot":"","sources":["../../../../src/views/vanilla/details/views.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,UAAU,EAAE,MAAM,aAAa,CAAA;AAExD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAEvD;;;;;;;GAOG;AAEH,KAAK,MAAM,GAAG,CAAC,KAAK,EAAE,cAAc,KAAK,UAAU,CAAA;AAwhBnD,uEAAuE;AACvE,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAoB9C,CAAA"}