Examples

const CACHE_NAME = 'upas-cache-v1';
const APP_ASSETS = [
  './',
  './index.html',
  './app.js',
  './styles.css',
];

// Install event: cache static assets
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      return cache.addAll(APP_ASSETS);
    })
  );
});

// Activate event: clean old caches
self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys().then((names) => {
      return Promise.all(
        names
          .filter((name) => name !== CACHE_NAME)
          .map((name) => caches.delete(name))
      );
    })
  );
});

// Fetch event: cache-first for models, network-first for app
self.addEventListener('fetch', (event) => {
  const url = new URL(event.request.url);
  
  if (isModelRequest(url)) {
    event.respondWith(cacheFirst(event.request));
  } else {
    event.respondWith(networkFirst(event.request));
  }
});

function isModelRequest(url) {
  return url.pathname.includes('.gguf') || 
         url.hostname.includes('huggingface');
}

async function cacheFirst(request) {
  const cached = await caches.match(request);
  if (cached) return cached;
  
  const response = await fetch(request);
  const cache = await caches.open(CACHE_NAME);
  cache.put(request, response.clone());
  return response;
}

async function networkFirst(request) {
  try {
    const response = await fetch(request);
    const cache = await caches.open(CACHE_NAME);
    cache.put(request, response.clone());
    return response;
  } catch {
    return caches.match(request);
  }
}

type Runtime = 'webgpu' | 'wasm' | 'none';

export async function detectRuntime(): Promise<Runtime> {
  // Check WebGPU
  if (navigator.gpu) {
    try {
      const adapter = await navigator.gpu.requestAdapter();
      if (adapter) {
        return 'webgpu';
      }
    } catch {
      // WebGPU failed, try WASM
    }
  }
  
  // Check WASM
  if (typeof WebAssembly === 'object') {
    return 'wasm';
  }
  
  return 'none';
}

export function getRuntimeBadge(runtime: Runtime): string {
  switch (runtime) {
    case 'webgpu': return 'WebGPU';
    case 'wasm': return 'WASM';
    case 'none': return 'Manual';
  }
}

interface ProcedurePack {
  id: string;
  version: string;
  documents: Document[];
}

interface QueryResult {
  steps: string[];
  source: string;
  provenance: Provenance;
}

export async function loadPack(packId: string): Promise<ProcedurePack> {
  // Check cache first
  const cache = await caches.open('upas-packs-v1');
  const cached = await cache.match(`/packs/${packId}.json`);
  
  if (cached) {
    return cached.json();
  }
  
  // Fetch from network
  const response = await fetch(`/packs/${packId}.json`);
  cache.put(`/packs/${packId}.json`, response.clone());
  return response.json();
}

export async function queryPack(
  pack: ProcedurePack,
  question: string
): Promise<QueryResult> {
  // Implementation depends on your AI backend
  // This is a simplified example
  const relevantDocs = await semanticSearch(pack, question);
  const context = relevantDocs.map(d => d.content).join('\n\n');
  
  const response = await runInference(question, context);
  
  return {
    steps: parseSteps(response),
    source: relevantDocs[0].title,
    provenance: {
      publisher: pack.publisher,
      version: pack.version,
      date: relevantDocs[0].effectiveDate,
    },
  };
}

interface ProvenanceProps {
  source: string;
  version: string;
  publisher: string;
  date: string;
  hash: string;
}

export function Provenance(props: ProvenanceProps) {
  const [expanded, setExpanded] = useState(false);

  return (
    <div className="provenance">
      <button onClick={() => setExpanded(!expanded)}>
        Source: {props.source}
      </button>
      
      {expanded && (
        <dl className="provenance-details">
          <dt>Version</dt>
          <dd>{props.version}</dd>
          
          <dt>Publisher</dt>
          <dd>{props.publisher}</dd>
          
          <dt>Effective Date</dt>
          <dd>{props.date}</dd>
          
          <dt>Integrity Hash</dt>
          <dd className="hash">{props.hash.slice(0, 16)}...</dd>
        </dl>
      )}
    </div>
  );
}