arcane-os 0.1.0-dev.5

package/runtime/arcane/components/source-code-viewer.html

@@ -0,0 +1,441 @@
+<link rel="stylesheet" href="./arcane/css/layout.css?v=3">
+<link rel="stylesheet" href="./arcane/css/theme.css?v=1">
+<link rel="stylesheet" href="./arcane/css/primitives.css?v=1">
+
+<style>
+    :host{
+        color:var(--text-color);
+        display:block;
+        min-width:0;
+    }
+
+    [hidden]{
+        display:none !important;
+    }
+
+    .source-viewer{
+        min-width:0;
+    }
+
+    .source-state{
+        background:var(--secondary-color);
+        border:1px solid var(--border-color);
+        border-radius:.5rem;
+        color:var(--muted-text-color);
+        margin:0;
+        padding:1rem;
+    }
+
+    .source-state[data-state="error"]{
+        border-inline-start:.3rem solid var(--danger-color);
+        color:var(--text-color);
+    }
+
+    .source-header{
+        align-items:flex-start;
+        border-block-end:1px solid var(--border-color);
+        display:flex;
+        flex-wrap:wrap;
+        gap:1rem;
+        justify-content:space-between;
+        margin-block-end:1rem;
+        padding-block-end:1rem;
+    }
+
+    .source-title{
+        font-size:clamp(1.1rem,2vw,1.45rem);
+        margin:.15rem 0 0;
+        overflow-wrap:anywhere;
+    }
+
+    .source-path,
+    .source-language{
+        color:var(--muted-text-color);
+        font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+        font-size:.82rem;
+        margin:0;
+        overflow-wrap:anywhere;
+    }
+
+    .source-language{
+        margin-block-start:.35rem;
+    }
+
+    .repository-link{
+        color:var(--focus-color);
+        flex:none;
+        text-underline-offset:.15em;
+    }
+
+    .repository-link:focus-visible{
+        border-radius:.2rem;
+        outline:3px solid var(--focus-color);
+        outline-offset:.2rem;
+    }
+
+    .source-scroll{
+        background:var(--secondary-color);
+        border:1px solid var(--border-color);
+        border-radius:.5rem;
+        max-block-size:min(72vh,60rem);
+        overflow:auto;
+        overscroll-behavior:contain;
+    }
+
+    .source-lines{
+        counter-reset:source-line;
+        font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+        font-size:.88rem;
+        line-height:1.55;
+        list-style:none;
+        margin:0;
+        min-inline-size:max-content;
+        padding:.75rem 0;
+    }
+
+    .source-line{
+        counter-increment:source-line;
+        display:grid;
+        grid-template-columns:minmax(3.5rem,auto) 1fr;
+        min-block-size:1.55em;
+        scroll-margin-block:4rem;
+    }
+
+    .source-line::before{
+        border-inline-end:1px solid var(--border-color);
+        color:var(--muted-text-color);
+        content:counter(source-line);
+        padding-inline:.75rem;
+        text-align:end;
+        user-select:none;
+    }
+
+    .source-line code{
+        color:var(--text-color);
+        padding-inline:1rem;
+        white-space:pre;
+    }
+
+    .source-line:focus{
+        background:var(--modal-background);
+        outline:3px solid var(--focus-color);
+        outline-offset:-3px;
+    }
+
+    @media (forced-colors:active){
+        .source-state,
+        .source-header,
+        .source-scroll,
+        .source-line::before{
+            border-color:CanvasText;
+        }
+
+        .repository-link:focus-visible,
+        .source-line:focus{
+            outline-color:Highlight;
+        }
+    }
+
+    @media (max-width:38rem){
+        .source-header{
+            align-items:stretch;
+            flex-direction:column;
+        }
+    }
+</style>
+
+<section id="viewer" class="source-viewer" part="container" aria-busy="false">
+    <p
+        id="status"
+        class="source-state"
+        part="status"
+        role="status"
+        aria-live="polite"
+        aria-atomic="true"
+        tabindex="-1"
+    ></p>
+
+    <header id="sourceHeader" class="source-header" part="header" hidden>
+        <div>
+            <p id="sourcePath" class="source-path"></p>
+            <h2 id="sourceTitle" class="source-title"></h2>
+            <p id="sourceLanguage" class="source-language"></p>
+        </div>
+        <a
+            id="repositoryLink"
+            class="repository-link"
+            target="_blank"
+            rel="noopener noreferrer"
+            referrerpolicy="no-referrer"
+            hidden
+        >View repository source</a>
+    </header>
+
+    <div id="sourceScroll" class="source-scroll" part="source-scroll" hidden>
+        <ol id="sourceLines" class="source-lines" part="source-lines"></ol>
+    </div>
+</section>
+
+<script type="module">
+    const host=this;
+    host.ready=false;
+
+    const viewer=host.shadowRoot.querySelector('#viewer');
+    const status=host.shadowRoot.querySelector('#status');
+    const sourceHeader=host.shadowRoot.querySelector('#sourceHeader');
+    const sourcePathElement=host.shadowRoot.querySelector('#sourcePath');
+    const sourceTitle=host.shadowRoot.querySelector('#sourceTitle');
+    const sourceLanguage=host.shadowRoot.querySelector('#sourceLanguage');
+    const repositoryLink=host.shadowRoot.querySelector('#repositoryLink');
+    const sourceScroll=host.shadowRoot.querySelector('#sourceScroll');
+    const sourceLines=host.shadowRoot.querySelector('#sourceLines');
+
+    const MAXIMUM_CHARACTERS=1048576;
+    const MAXIMUM_LINES=20000;
+    const defaultOptions=Object.freeze({
+        labels:Object.freeze({
+            content:'Source code',
+            empty:'Choose a source file from the catalog.',
+            error:'This source file could not be displayed.',
+            loading:'Loading and verifying source code…',
+            repository:'View repository source'
+        })
+    });
+
+    let current=Object.freeze({
+        language:'text',
+        lineCount:0,
+        repositoryURL:'',
+        sourcePath:'',
+        text:'',
+        title:''
+    });
+    let loadSequence=0;
+    let options=normalizeOptions({},defaultOptions);
+    let state='empty';
+
+    host.clear=clear;
+    host.configure=configure;
+    host.fail=fail;
+    host.focus=focusSource;
+    host.focusLine=focusLine;
+    host.load=load;
+    host.render=render;
+
+    Object.defineProperties(host,{
+        lineCount:{get:()=>current.lineCount},
+        sourcePath:{get:()=>current.sourcePath},
+        state:{get:()=>state},
+        value:{get:()=>current.text,set:value=>render(value)}
+    });
+
+    function boundedText(value,label,maximum,{optional=false}={}){
+        if(optional&&(value===undefined||value===null||value===''))return '';
+        if(typeof value!=='string'||!value.trim()||value.length>maximum||/[\u0000-\u0008\u000B\u000C\u000E-\u001F\u007F]/.test(value)){
+            throw new TypeError(`${label} must be bounded text.`);
+        }
+        return value.trim();
+    }
+
+    function safeRepositoryURL(value=''){
+        if(value===undefined||value===null||value==='')return '';
+        const input=boundedText(value,'Source repositoryURL',2048);
+        try{
+            const url=new URL(input,document.baseURI);
+            if(!['http:','https:'].includes(url.protocol)||url.username||url.password){
+                throw new TypeError('Source repositoryURL must use HTTP(S) without credentials.');
+            }
+            return url.href;
+        }catch(error){
+            if(error instanceof TypeError&&/repositoryURL/.test(error.message))throw error;
+            throw new TypeError('Source repositoryURL must be a valid HTTP(S) URL.');
+        }
+    }
+
+    function normalizeOptions(input={},previous=defaultOptions){
+        if(!input||typeof input!=='object'||Array.isArray(input)){
+            throw new TypeError('Source viewer options must be an object.');
+        }
+        const labelInput=input.labels===undefined?{}:input.labels;
+        if(!labelInput||typeof labelInput!=='object'||Array.isArray(labelInput)){
+            throw new TypeError('Source viewer labels must be an object.');
+        }
+        const labels={...previous.labels};
+        for(const name of ['content','empty','error','loading','repository']){
+            if(labelInput[name]!==undefined){
+                labels[name]=boundedText(labelInput[name],`Source viewer labels.${name}`,160);
+            }
+        }
+        return Object.freeze({labels:Object.freeze(labels)});
+    }
+
+    function normalizeRenderOptions(input={}){
+        if(!input||typeof input!=='object'||Array.isArray(input)){
+            throw new TypeError('Source render options must be an object.');
+        }
+        return Object.freeze({
+            language:boundedText(input.language||'text','Source language',64).toLowerCase(),
+            repositoryURL:safeRepositoryURL(input.repositoryURL),
+            sourcePath:boundedText(input.sourcePath||'Source file','Source path',1024),
+            title:boundedText(input.title||input.sourcePath||'Source file','Source title',256)
+        });
+    }
+
+    function configure(input={}){
+        options=normalizeOptions(input,options);
+        repositoryLink.textContent=options.labels.repository;
+        updateStateDOM();
+        return {labels:{...options.labels}};
+    }
+
+    async function load(source='',renderOptions={}){
+        const sequence=++loadSequence;
+        transition('loading');
+        try{
+            const pending=typeof source==='function'?source():source;
+            const result=await pending;
+            if(sequence!==loadSequence)return false;
+            if(result&&typeof result==='object'&&!Array.isArray(result)){
+                return renderSource(result.text??result.value??'',{
+                    ...renderOptions,
+                    ...result
+                });
+            }
+            return renderSource(result??'',renderOptions);
+        }catch(error){
+            if(sequence===loadSequence)showError(error);
+            return false;
+        }
+    }
+
+    function render(text='',renderOptions={}){
+        ++loadSequence;
+        try{
+            return renderSource(text,renderOptions);
+        }catch(error){
+            showError(error);
+            return false;
+        }
+    }
+
+    function renderSource(text='',renderOptions={}){
+        if(typeof text!=='string')throw new TypeError('Source content must be a string.');
+        if(text.length>MAXIMUM_CHARACTERS)throw new RangeError('Source content exceeds the viewer character limit.');
+        const metadata=normalizeRenderOptions(renderOptions);
+        const lines=text.replace(/\r\n?/g,'\n').split('\n');
+        if(lines.length>MAXIMUM_LINES)throw new RangeError('Source content exceeds the viewer line limit.');
+
+        sourceLines.replaceChildren();
+        if(!text){
+            current=Object.freeze({...metadata,lineCount:0,text:''});
+            transition('empty');
+            return true;
+        }
+
+        const fragment=document.createDocumentFragment();
+        lines.forEach((line,index)=>{
+            const item=document.createElement('li');
+            const code=document.createElement('code');
+            const lineNumber=index+1;
+            item.className='source-line';
+            item.id=`L${lineNumber}`;
+            item.tabIndex=-1;
+            item.dataset.line=String(lineNumber);
+            code.textContent=line||' ';
+            item.append(code);
+            fragment.append(item);
+        });
+        sourceLines.replaceChildren(fragment);
+        current=Object.freeze({...metadata,lineCount:lines.length,text});
+        transition('ready');
+        return true;
+    }
+
+    function clear(){
+        ++loadSequence;
+        sourceLines.replaceChildren();
+        current=Object.freeze({
+            language:'text',
+            lineCount:0,
+            repositoryURL:'',
+            sourcePath:'',
+            text:'',
+            title:''
+        });
+        transition('empty');
+        return true;
+    }
+
+    function fail(error){
+        ++loadSequence;
+        showError(error);
+        return false;
+    }
+
+    function showError(error){
+        sourceLines.replaceChildren();
+        transition('error',error);
+    }
+
+    function focusSource(){
+        const target=state==='ready'?sourceLines.querySelector('.source-line'):status;
+        target?.focus({preventScroll:true});
+        return Boolean(target);
+    }
+
+    function focusLine(value){
+        const line=Number(value);
+        if(!Number.isInteger(line)||line<1||line>current.lineCount)return false;
+        const target=sourceLines.querySelector(`[data-line="${line}"]`);
+        if(!target)return false;
+        target.focus({preventScroll:true});
+        target.scrollIntoView({block:'center',inline:'nearest'});
+        return true;
+    }
+
+    function transition(next,error=null){
+        state=next;
+        updateStateDOM();
+        const detail={
+            characters:current.text.length,
+            language:current.language,
+            lines:current.lineCount,
+            sourcePath:current.sourcePath,
+            state
+        };
+        if(error)detail.message=String(error?.message||'Source rendering failed.').slice(0,512);
+        host.dispatchEvent(new CustomEvent('source-code-viewer-state',{bubbles:true,composed:true,detail}));
+        host.dispatchEvent(new CustomEvent(`source-code-viewer-${state}`,{bubbles:true,composed:true,detail}));
+    }
+
+    function updateStateDOM(){
+        const visible=state!=='ready';
+        viewer.setAttribute('aria-busy',state==='loading'?'true':'false');
+        status.hidden=!visible;
+        status.dataset.state=state;
+        status.textContent={
+            empty:options.labels.empty,
+            error:options.labels.error,
+            loading:options.labels.loading
+        }[state]||'';
+        sourceHeader.hidden=state!=='ready';
+        sourceScroll.hidden=state!=='ready';
+        sourceScroll.setAttribute('aria-label',`${options.labels.content}: ${current.sourcePath||current.title}`);
+        sourcePathElement.textContent=current.sourcePath;
+        sourceTitle.textContent=current.title;
+        sourceLanguage.textContent=current.language?`Language: ${current.language}`:'';
+        repositoryLink.textContent=options.labels.repository;
+        repositoryLink.hidden=!current.repositoryURL;
+        if(current.repositoryURL)repositoryLink.href=current.repositoryURL;
+        else repositoryLink.removeAttribute('href');
+    }
+
+    repositoryLink.textContent=options.labels.repository;
+    transition('empty');
+    host.ready=true;
+    host.dispatchEvent(new CustomEvent('source-code-viewer-ready',{
+        bubbles:true,
+        composed:true,
+        detail:{component:host,state}
+    }));
+</script>

package/runtime/arcane/components/source-explanation.html

@@ -0,0 +1,124 @@
+<style>
+  :host{display:block;color:var(--text-color);font-family:Inter,Segoe UI,sans-serif}
+  *{box-sizing:border-box}
+  .shell{display:grid;gap:1rem}
+  .lede{display:grid;gap:.55rem;padding:.9rem 1rem;border:1px solid var(--border-color);border-left:.38rem solid var(--accent-color);border-radius:.6rem;background:var(--modal-background)}
+  .badges{display:flex;gap:.4rem;flex-wrap:wrap}.badge{padding:.22rem .48rem;border:1px solid var(--border-color);border-radius:99rem;font-size:.68rem;font-weight:800}
+  h3{margin:0;font-size:1rem}p{margin:0;line-height:1.55}.lede p{font-weight:700}
+  .analysis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
+  .section{display:grid;align-content:start;gap:.55rem;padding:.85rem;border:1px solid var(--border-color);border-radius:.55rem;background:var(--modal-background)}
+  .section ul{display:grid;gap:.4rem;margin:0;padding-left:1.2rem}.section li,.section p{font-size:.82rem;line-height:1.5}
+  .evidence-layout{display:grid;grid-template-columns:minmax(18rem,.85fr) minmax(24rem,1.15fr);gap:.8rem}
+  .evidence-list{display:grid;align-content:start;gap:.55rem;max-height:34rem;overflow:auto}
+  .evidence{display:grid;gap:.45rem;padding:.7rem;border:1px solid var(--border-color);border-radius:.5rem;background:var(--modal-background)}
+  .evidence header{display:flex;justify-content:space-between;gap:.5rem;font-size:.72rem}.evidence header strong{overflow-wrap:anywhere}.evidence header span{flex:0 0 auto;color:var(--platinum)}
+  blockquote{margin:0;padding:.65rem;border-left:.25rem solid var(--border-color);background:var(--background);font-size:.78rem;line-height:1.55}
+  .original{display:grid;grid-template-rows:auto minmax(28rem,1fr);gap:.45rem;min-width:0}.original-toolbar{display:grid;grid-template-columns:minmax(12rem,.8fr) minmax(12rem,1.2fr);align-items:end;gap:.65rem}.original-toolbar label{display:grid;gap:.25rem;font-size:.72rem;font-weight:800}.original-toolbar select{width:100%;margin:0}.original p{color:var(--platinum);font-size:.75rem}.original iframe{width:100%;height:min(60vh,38rem);min-height:28rem;border:1px solid var(--border-color);border-radius:.5rem;background:rgb(245,245,245)}
+  .review{display:grid;grid-template-columns:repeat(3,minmax(10rem,1fr));gap:.7rem;padding:.85rem;border:1px solid var(--border-color);border-radius:.55rem;background:var(--modal-background)}
+  .review h3,.review .notes,.save-row{grid-column:1/-1}.review label{display:grid;gap:.3rem;font-size:.75rem;font-weight:800}.review select,.review textarea{width:100%;margin:0}.review textarea{min-height:6rem;resize:vertical}.save-row{display:flex;align-items:center;gap:.8rem}.save-row button{margin:0}.save-state{color:var(--platinum);font-size:.78rem}
+  button:focus-visible,select:focus-visible,textarea:focus-visible{outline:.18rem solid var(--focus-color);outline-offset:.12rem}
+  .empty{padding:.8rem;border:1px dashed var(--border-color);border-radius:.5rem;color:var(--platinum)}
+  @media(max-width:56rem){.analysis,.evidence-layout,.review,.original-toolbar{grid-template-columns:1fr}.review h3,.review .notes,.save-row{grid-column:1}.original{grid-template-rows:auto auto}.original iframe{min-height:24rem}}
+  @media(forced-colors:active){.lede,.section,.evidence,.original iframe,.review{border-color:CanvasText}}
+</style>
+
+<section class="shell" data-shell>
+  <header class="lede"><div class="badges" data-badges></div><h3 data-title>Investigative lead</h3><p data-assessment></p></header>
+  <div class="analysis">
+    <section class="section"><h3>What the allegation would require</h3><ul data-elements></ul></section>
+    <section class="section"><h3>How the cited facts apply</h3><p data-application></p></section>
+    <section class="section"><h3>What may weaken or defeat the allegation</h3><ul data-limitations></ul></section>
+    <section class="section"><h3>Recommended verification</h3><ul data-next-steps></ul></section>
+  </div>
+  <section class="section"><h3>Evidence in support</h3><div class="evidence-layout"><div class="evidence-list" data-evidence></div><div class="original"><div class="original-toolbar"><label>Original cited source<select data-original-picker></select></label><p data-original-label aria-live="polite">Select a cited excerpt to inspect the original source page.</p></div><iframe data-original title="Original cited source" hidden></iframe></div></div></section>
+  <form class="review" data-review>
+    <h3>Investigator decision</h3>
+    <label>Alleged actor<select data-actor></select></label>
+    <label>Disposition<select data-disposition></select></label>
+    <label>Confidence<select data-confidence></select></label>
+    <label class="notes">Notes, contrary facts, and follow-up<textarea data-notes maxlength="10000"></textarea></label>
+    <div class="save-row"><button type="submit">Save decision</button><span class="save-state" data-save-state aria-live="polite"></span></div>
+  </form>
+</section>
+
+<script type="module">
+  const host=this; const root=host.shadowRoot;
+  const title=root.querySelector('[data-title]'); const assessment=root.querySelector('[data-assessment]'); const badges=root.querySelector('[data-badges]');
+  const elements=root.querySelector('[data-elements]'); const application=root.querySelector('[data-application]'); const limitations=root.querySelector('[data-limitations]'); const nextSteps=root.querySelector('[data-next-steps]');
+  const evidenceList=root.querySelector('[data-evidence]'); const original=root.querySelector('[data-original]'); const originalLabel=root.querySelector('[data-original-label]'); const originalPicker=root.querySelector('[data-original-picker]');
+  const reviewForm=root.querySelector('[data-review]'); const actor=root.querySelector('[data-actor]'); const disposition=root.querySelector('[data-disposition]'); const confidence=root.querySelector('[data-confidence]'); const notes=root.querySelector('[data-notes]'); const saveState=root.querySelector('[data-save-state]');
+  let finding=null; let sources=[];
+
+  host.showFinding=showFinding;
+  host.populate=(value={},options={})=>showFinding(value,options);
+  host.selectSource=selectSource;
+  host.markSaved=message=>{saveState.textContent=String(message||'Saved.');};
+
+  reviewForm.addEventListener('submit',event=>{
+    event.preventDefault(); if(!finding) return;
+    saveState.textContent='Saving…';
+    host.dispatchEvent(new CustomEvent('source-explanation-save',{bubbles:true,composed:true,detail:{recordId:finding.id,classification:actor.value,status:disposition.value,attributes:{confidence:confidence.value},notes:notes.value}}));
+  });
+  originalPicker.addEventListener('change',()=>showSource(Number(originalPicker.value)));
+
+  function options(select,values=[]){
+    select.replaceChildren(...values.map(value=>{const item=document.createElement('option'); item.value=String(value.value); item.textContent=String(value.label); return item;}));
+  }
+  function list(target,values=[],emptyLabel){
+    target.replaceChildren();
+    for(const value of Array.isArray(values)?values:[]){const item=document.createElement('li'); item.textContent=String(value); target.append(item);}
+    if(!target.children.length){const item=document.createElement('li'); item.textContent=emptyLabel; target.append(item);}
+  }
+  function sameOrigin(value=''){
+    const url=new URL(String(value),document.baseURI); if(url.origin!==location.origin) throw new TypeError('Original sources must use the current application origin.'); return url;
+  }
+
+  function showFinding(value={},config={}){
+    finding=value&&typeof value==='object'?value:null; if(!finding) throw new TypeError('A finding is required.');
+    sources=(Array.isArray(finding.sources)?finding.sources:[]).slice(0,40);
+    title.textContent=String(finding.label||'Investigative lead'); assessment.textContent=String(finding.assessment||finding.conclusion||'Human review is required before reliance.');
+    badges.replaceChildren();
+    for(const value of [finding.allegedActorLabel?`Alleged actor: ${finding.allegedActorLabel}`:'Actor not assigned',finding.kind||'Investigative lead',finding.confidence?`${finding.confidence} confidence`:'Confidence not assigned']){const badge=document.createElement('span'); badge.className='badge'; badge.textContent=value; badges.append(badge);}
+    list(elements,finding.elementsToVerify,'No element checklist has been assigned.'); application.textContent=String(finding.application||'The cited passages require investigator comparison to the original sources.');
+    list(limitations,finding.limitations,'No contrary evidence has been recorded yet; this does not mean none exists.'); list(nextSteps,finding.nextSteps,'Compare the cited excerpt with the complete original and record contrary facts.');
+    evidenceList.replaceChildren();
+    for(const [index,source] of sources.entries()){
+      const card=document.createElement('article'); card.className='evidence'; const header=document.createElement('header'); const name=document.createElement('strong'); const cite=document.createElement('span');
+      name.textContent=String(source.filename||source.title||source.recordId||'Source'); cite.textContent=[source.page?`PDF p. ${source.page}`:'',source.lineStart?`MD lines ${source.lineStart}–${source.lineEnd||source.lineStart}`:''].filter(Boolean).join(' · '); header.append(name,cite);
+      const quote=document.createElement('blockquote'); quote.textContent=String(source.excerpt||source.quote||'No excerpt supplied.'); card.append(header,quote);
+      evidenceList.append(card);
+    }
+    if(!sources.length){const empty=document.createElement('p'); empty.className='empty'; empty.textContent='No source excerpt is attached. Do not rely on this lead until a source is added.'; evidenceList.append(empty);}
+    originalPicker.replaceChildren(...sources.flatMap((source,index)=>{if(!source?.pdfUrl)return[];const item=document.createElement('option');item.value=String(index);item.textContent=`${source.recordId||'Source'}${source.page?` — PDF page ${source.page}`:''}`;return[item];})); originalPicker.disabled=!originalPicker.options.length;
+    original.hidden=true; original.removeAttribute('src'); originalLabel.textContent='Select a cited excerpt to inspect the original source page.';
+    options(actor,config.actorOptions||[]); options(disposition,config.dispositionOptions||[]); options(confidence,config.confidenceOptions||[]);
+    const review=finding.review&&typeof finding.review==='object'?finding.review:{};
+    actor.value=String(review.classification||finding.allegedActor||'unassigned'); disposition.value=String(review.status||'unassessed'); confidence.value=String(review.attributes?.confidence||finding.confidence||'unassigned'); notes.value=String(review.notes||''); saveState.textContent='';
+    if(!actor.value&&actor.options.length) actor.selectedIndex=0; if(!disposition.value&&disposition.options.length) disposition.selectedIndex=0; if(!confidence.value&&confidence.options.length) confidence.selectedIndex=0;
+    const requestedSourceId=String(config.initialSourceId||'');
+    const requestedSourceIndex=requestedSourceId?sources.findIndex(source=>String(source?.id||'')===requestedSourceId):-1;
+    const firstSourceIndex=sources.findIndex(source=>source?.pdfUrl);
+    const initialSourceIndex=requestedSourceIndex>-1&&sources[requestedSourceIndex]?.pdfUrl?requestedSourceIndex:firstSourceIndex;
+    if(initialSourceIndex>-1) showSource(initialSourceIndex);
+    return {...finding};
+  }
+
+  function selectSource(value=0){
+    const index=Number.isInteger(value)?value:sources.findIndex(source=>String(source?.id||'')===String(value||''));
+    if(index<0||!sources[index]?.pdfUrl) return false;
+    showSource(index); return true;
+  }
+
+  function showSource(index=0){
+    const source=sources[index]; if(!source?.pdfUrl) return null;
+    try{
+      const url=sameOrigin(source.pdfUrl); if(source.page){url.searchParams.set('arcane-pdf-page',String(Number(source.page)));url.hash=`page=${Number(source.page)}`;}
+      originalPicker.value=String(index); original.src=url.href; original.title=`Original cited source: ${source.filename||source.recordId||'document'}${source.page?`, page ${source.page}`:''}`; original.hidden=false;
+      originalLabel.textContent=`Original source${source.page?` at PDF page ${source.page}`:''}. Compare the full page before relying on the extracted text.`;
+      host.dispatchEvent(new CustomEvent('source-explanation-source-selected',{bubbles:true,composed:true,detail:{index,source:{...source}}}));
+      return {...source};
+    }catch(error){original.hidden=true; originalLabel.textContent=error.message; return null;}
+  }
+
+  host.dispatchEvent(new CustomEvent('source-explanation-ready',{bubbles:true,composed:true}));
+</script>