@kaifronsdal/transcript-viewer/build/client/_app/immutable/nodes/3.BkDTDQeg.js

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

import"../chunks/CWj6FrbW.js";import"../chunks/COV05J5X.js";import{e as T,f as b,g as S,i as v,j as _,$ as k,s as a,k as e,r as s,n as g,t as M,l as m,m as h}from"../chunks/DDSnUQRm.js";import{e as A,i as P}from"../chunks/ZS3-Rmiz.js";import{s as $}from"../chunks/BfFtub1s.js";import{i as I}from"../chunks/CbNCDuoM.js";var D=b('<a class="btn btn-primary btn-sm w-full">View Demo Transcript</a>'),z=b('<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> <!></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=...&metadataOnly=true</code></pre></div></div></div></div></div>');function U(u,f){T(f,!1);const x=["transcripts/test/transcript_2025-07-30_19-19-00_af5163dd.json"];I();var i=z();S(n=>{k.title="Clean Architecture Demo"});var r=a(e(i),2),l=a(e(r),2),d=a(e(l),4),o=e(d),c=a(e(o),2),w=a(e(c),8);A(w,1,()=>x,P,(n,y)=>{var p=D();const C=m(()=>h(y).split("/").map(t=>encodeURIComponent(t)));M(t=>$(p,"href",`/transcript/${t??""}`),[()=>h(C).join("/")],m),v(n,p)}),s(c),s(o),s(d),g(2),s(l),g(2),s(r),s(i),v(u,i),_()}export{U as component};