@kaifronsdal/transcript-viewer/build/server/chunks/_page.svelte-W_N2tckI.js

A web-based viewer for AI conversation transcripts with rollback support

import { x as push, N as ensure_array_like, M as head, F as attr, O as stringify, z as pop } from './index-CeukPVPf.js';

function _page($$payload, $$props) {
  push();
  const demoTranscripts = [
    "transcripts/test/transcript_2025-07-30_19-19-00_af5163dd.json"
  ];
  const each_array = ensure_array_like(demoTranscripts);
  head($$payload, ($$payload2) => {
    $$payload2.title = `<title>Clean Architecture Demo</title>`;
  });
  $$payload.out += `<div class="min-h-screen bg-base-100"><div class="hero bg-base-200 py-16"><div class="hero-content text-center"><div class="max-w-md"><h1 class="text-5xl font-bold">Clean Architecture</h1> <p class="py-6">Demonstrating the newly organized codebase with proper server/client separation and modern Svelte 5 patterns.</p></div></div></div> <div class="container mx-auto py-12 px-4"><div class="alert alert-info mb-8"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg> <div><h3 class="font-bold">🧪 Development Demo Page</h3> <div class="text-sm">This page showcases the new organized architecture. Visit <a href="/" class="link">main app</a> for the full transcript viewer.</div></div></div> <div class="grid gap-8 md:grid-cols-2"><div class="card bg-base-200 shadow-xl"><div class="card-body"><h2 class="card-title">🏗️ New Architecture</h2> <ul class="list-disc list-inside space-y-2 text-sm"><li><strong>Server/Client Separation:</strong> Clear boundaries between server and client code</li> <li><strong>Component Organization:</strong> MessageCard, TranscriptViewer, FilterControls</li> <li><strong>Svelte 5 Runes:</strong> Modern reactive state management with $state, $derived</li> <li><strong>Shared Types:</strong> Common types used across client and server</li> <li><strong>Composables:</strong> Reusable reactive logic (useTableState)</li> <li><strong>Clean API:</strong> File path based transcript loading</li></ul></div></div> <div class="card bg-base-200 shadow-xl"><div class="card-body"><h2 class="card-title">⚡ Performance</h2> <ul class="list-disc list-inside space-y-2 text-sm"><li><strong>Lazy Loading:</strong> Metadata first, full content on demand</li> <li><strong>File-based Caching:</strong> Individual transcript caching</li> <li><strong>Security:</strong> Path validation prevents directory traversal</li> <li><strong>Memory Efficient:</strong> No bulk directory loading</li> <li><strong>Streaming Ready:</strong> Architecture supports SSE</li></ul></div></div> <div class="card bg-base-200 shadow-xl"><div class="card-body"><h2 class="card-title">🧪 Test Pages</h2> <div class="space-y-3"><a href="/test-new-api" class="btn btn-outline btn-sm w-full">API Testing Page</a> <a href="/test-viewer" class="btn btn-outline btn-sm w-full">TranscriptViewer Component Test</a> <a href="/demo/message-rendering" class="btn btn-outline btn-sm w-full">Message Rendering Variants</a> <a href="/demo/message-shortlist" class="btn btn-primary btn-sm w-full">Message Shortlist (1C, Bloomberg, Discord, NASA)</a> <!--[-->`;
  for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
    let transcriptPath = each_array[$$index];
    const segments = transcriptPath.split("/").map((segment) => encodeURIComponent(segment));
    $$payload.out += `<a${attr("href", `/transcript/${stringify(segments.join("/"))}`)} class="btn btn-primary btn-sm w-full">View Demo Transcript</a>`;
  }
  $$payload.out += `<!--]--></div></div></div> <div class="card bg-base-200 shadow-xl"><div class="card-body"><h2 class="card-title">🧩 Components</h2> <div class="text-sm space-y-2"><div class="collapse collapse-arrow bg-base-100"><input type="checkbox"/> <div class="collapse-title font-medium">Core Layer</div> <div class="collapse-content text-xs"><ul class="list-disc list-inside space-y-1"><li><code>server/core/transcript-loader.ts</code> - Server-side file loading</li> <li><code>shared/types.ts</code> - Shared TypeScript types</li> <li><code>client/utils/copy-utils.ts</code> - Client clipboard operations</li></ul></div></div> <div class="collapse collapse-arrow bg-base-100"><input type="checkbox"/> <div class="collapse-title font-medium">Components</div> <div class="collapse-content text-xs"><ul class="list-disc list-inside space-y-1"><li><code>TranscriptViewer.svelte</code> - Main transcript display</li> <li><code>MessageCard.svelte</code> - Individual message rendering</li> <li><code>TranscriptTable.svelte</code> - Data table with virtualization</li> <li><code>FilterControls.svelte</code> - Advanced filtering UI</li></ul></div></div> <div class="collapse collapse-arrow bg-base-100"><input type="checkbox"/> <div class="collapse-title font-medium">API</div> <div class="collapse-content text-xs"><ul class="list-disc list-inside space-y-1"><li><code>/api/transcripts</code> - Clean endpoint</li> <li>File path based routing</li> <li>Metadata-only support</li></ul></div></div></div></div></div></div> <div class="mt-12"><h2 class="text-2xl font-bold mb-6">💻 Usage Examples</h2> <div class="grid gap-6 md:grid-cols-2"><div class="mockup-code"><pre data-prefix="$"><code>// Using the transcript loader</code></pre> <pre data-prefix=">"><code>const loader = createTranscriptLoader(path)</code></pre> <pre data-prefix=">"><code>await loader.loadMetadata()</code></pre> <pre data-prefix=">"><code>await loader.loadTranscript()</code></pre></div> <div class="mockup-code"><pre data-prefix="$"><code>// API calls</code></pre> <pre data-prefix=">"><code>GET /api/transcripts?filePath=...</code></pre> <pre data-prefix=">"><code>GET /api/transcripts?filePath=...&amp;metadataOnly=true</code></pre></div></div></div></div></div>`;
  pop();
}

export { _page as default };
//# sourceMappingURL=_page.svelte-W_N2tckI.js.map