From c2926eb7d7c67f30c815244a4aa2df9db6668e3e Mon Sep 17 00:00:00 2001
From: QuickMythril <quickmythril@protonmail.com>
Date: Wed, 29 Jul 2026 19:04:24 -0400
Subject: [PATCH 1/4] feat: adopt Home resource viewing bridge

---
 README.md                  | 10 ++++--
 package-lock.json          |  4 +--
 package.json               |  2 +-
 src/App.tsx                | 67 ++++++++++++++++++++++++++++++------
 src/contentViewer.test.ts  | 31 +++++++++++++++++
 src/contentViewer.tsx      | 50 ++++++++++++++++++++++++---
 src/dispatcher.test.ts     | 27 +++++++++++++++
 src/dispatcher.ts          | 13 ++++++-
 src/qdnRequest.test.ts     | 17 +++++++++-
 src/qdnRequest.ts          | 21 +++++++++++-
 src/resourceBridge.test.ts | 69 ++++++++++++++++++++++++++++++++++++++
 src/resourceBridge.ts      | 56 +++++++++++++++++++++++++++++++
 src/styles.css             |  2 +-
 13 files changed, 344 insertions(+), 25 deletions(-)
 create mode 100644 src/contentViewer.test.ts
 create mode 100644 src/resourceBridge.test.ts
 create mode 100644 src/resourceBridge.ts

diff --git a/README.md b/README.md
index 10eb82f..11f04c9 100644
--- a/README.md
+++ b/README.md
@@ -23,9 +23,13 @@ when the app is loaded through Qortium Home.
 - Browse QDN services, names, and resources through deep-linkable routes.
 - Search public QDN metadata with an optional service filter.
 - Inspect resource metadata, status, and properties.
-- Open apps, websites, media, and documents through the appropriate Home
-  action, with safe internal viewers for text, Markdown, code, CSV, JSON, and
-  images.
+- Feature-detect Home's generic QDN resource viewer and use it for public
+  non-browser resources, while keeping APP/WEBSITE/GAME on Home's navigation
+  path and retaining the older media/document actions as compatibility
+  fallbacks.
+- Use Home-provided ranged URLs for lazy inline image, audio, and video
+  previews. On older Home versions, bounded image/text previews and the
+  existing Open actions continue to work.
 - Browse the individual files of a multi-file resource, with a deep-linkable
   route per file (`#/detail/{service}/{name}/{identifier}/file/{path}`).
 - View a published Git repository (bare or worktree layout) as a repository:
diff --git a/package-lock.json b/package-lock.json
index b953096..bde0a60 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "qortium-explore",
-  "version": "1.4.9",
+  "version": "1.4.10",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "qortium-explore",
-      "version": "1.4.9",
+      "version": "1.4.10",
       "hasInstallScript": true,
       "license": "0BSD",
       "dependencies": {
diff --git a/package.json b/package.json
index d73a665..2aaa967 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "qortium-explore",
-  "version": "1.4.9",
+  "version": "1.4.10",
   "private": true,
   "license": "0BSD",
   "description": "Browse, search, inspect, and open public Qortium QDN resources.",
diff --git a/src/App.tsx b/src/App.tsx
index 825785a..a083349 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,6 +8,12 @@ import { createTranslator } from './i18n';
 import { detectGitRepositoryLayout } from './qdnGitRepository';
 import { NameOwnerIdentity } from './NameOwnerIdentity';
 import { hasHomeBridge, qdnRequest } from './qdnRequest';
+import {
+  canStreamResource,
+  resourceBridgeCapabilities,
+  resourceStreamRequest,
+  type ResourceBridgeCapabilities,
+} from './resourceBridge';
 import { loadResourceDetails } from './resourceDetails';
 import { resourceFetchRequest, resourceFiles } from './resourceFiles';
 import { isBrowserArchiveService, PUBLIC_QDN_SERVICES } from './services';
@@ -25,10 +31,31 @@ const date = (timestamp?: number) => timestamp ? new Date(timestamp).toLocaleStr
 function groupBy<T extends string>(resources: QdnResource[], key: (item: QdnResource) => T): Folder[] { const map = new Map<T, Folder>(); for (const resource of resources) { const name = key(resource), old = map.get(name); map.set(name, { name, count: (old?.count ?? 0) + 1, updated: Math.max(old?.updated ?? 0, updatedOf(resource)) }); } return [...map.values()]; }
 function resourceQuery(route: ExploreRoute) { if (route.kind === 'services') return { action: 'LIST_QDN_RESOURCES', mode: 'ALL', limit: 0 }; if (route.kind === 'service') return { action: 'LIST_QDN_RESOURCES', mode: 'ALL', service: route.service, limit: 0 }; if (route.kind === 'name-services') return { action: 'LIST_QDN_RESOURCES', mode: 'ALL', name: route.name, exactMatchNames: true, limit: 0 }; if (route.kind === 'resources') return { action: 'LIST_QDN_RESOURCES', mode: 'ALL', service: route.service, name: route.name, exactMatchNames: true, includeStatus: true, includeMetadata: true, limit: 0 }; return null; }
 
-function Thumbnail({ resource }: { resource: QdnResource }) {
+function Thumbnail({ resource, streamUrlSupported }: { resource: QdnResource; streamUrlSupported: boolean | null }) {
   const [src, setSrc] = useState<string>();
-  useEffect(() => { if (!mayFetchThumbnail(resource)) return; let active = true; void qdnRequest<unknown>(resourceFetchRequest(resource, { binary: true, maxBytes: THUMBNAIL_MAX_BYTES })).then(data => { if (active && typeof data === 'string') setSrc(`data:image/*;base64,${data}`); }).catch(() => undefined); return () => { active = false; }; }, [resource.identifier, resource.name, resource.path, resource.service, resource.size]);
-  return src ? <img className="thumbnail" alt="" src={src} /> : <span className="thumbnail thumbnail--placeholder" aria-label="Preview unavailable">▧</span>;
+  useEffect(() => {
+    if (!mayFetchThumbnail(resource) || streamUrlSupported === null) return;
+    let active = true;
+    const load = async () => {
+      if (streamUrlSupported && canStreamResource(resource)) {
+        try {
+          const streamUrl = await qdnRequest<unknown>(resourceStreamRequest(resource));
+          if (typeof streamUrl === 'string' && streamUrl) {
+            if (active) setSrc(streamUrl);
+            return;
+          }
+        } catch {
+          // A newly advertised stream URL can still fail transiently. Retain
+          // Explore's bounded base64 thumbnail path as the compatibility fallback.
+        }
+      }
+      const data = await qdnRequest<unknown>(resourceFetchRequest(resource, { binary: true, maxBytes: THUMBNAIL_MAX_BYTES }));
+      if (active && typeof data === 'string') setSrc(`data:image/*;base64,${data}`);
+    };
+    void load().catch(() => undefined);
+    return () => { active = false; };
+  }, [resource.identifier, resource.name, resource.path, resource.service, resource.size, streamUrlSupported]);
+  return src ? <img className="thumbnail" alt="" decoding="async" loading="lazy" src={src} /> : <span className="thumbnail thumbnail--placeholder" aria-label="Preview unavailable">▧</span>;
 }
 function SortButton({ active, children, onClick }: { active: boolean; children: ReactNode; onClick: () => void }) { return <button className="sort" type="button" onClick={onClick}>{children}{active ? ' ↕' : ''}</button>; }
 
@@ -41,6 +68,8 @@ export function App() {
   const [gitFallback, setGitFallback] = useState('');
   const [previewing, setPreviewing] = useState(false); const [previewMessage, setPreviewMessage] = useState(''); const [previewFailure, setPreviewFailure] = useState('');
   const [sourcePreviewSupported, setSourcePreviewSupported] = useState(false);
+  const [resourceBridge, setResourceBridge] = useState<ResourceBridgeCapabilities>({ resourceViewer: false, streamUrl: false });
+  const [resourceBridgeReady, setResourceBridgeReady] = useState(false);
   const t = useMemo(() => createTranslator(display.language), [display.language]);
   const navigate = (next: ExploreRoute) => { window.location.hash = hashForRoute(next); };
   const replace = (next: ExploreRoute) => {
@@ -49,7 +78,21 @@ export function App() {
   };
   useEffect(() => { const onHash = () => setRoute(routeFromHash(window.location.hash)); window.addEventListener('hashchange', onHash); return () => window.removeEventListener('hashchange', onHash); }, []);
   useEffect(() => { applyDisplaySettings(display); const onMessage = (event: MessageEvent) => setDisplay(current => updateFromHostMessage(event.data, current) ?? current); window.addEventListener('message', onMessage); return () => window.removeEventListener('message', onMessage); }, [display]);
-  useEffect(() => { if (!hasHomeBridge()) { setSourcePreviewSupported(false); return; } let active = true; void qdnRequest<unknown>({ action: 'SHOW_ACTIONS' }).then(actions => { if (active) setSourcePreviewSupported(supportsSourcePreview(actions)); }).catch(() => { if (active) setSourcePreviewSupported(false); }); return () => { active = false; }; }, []);
+  useEffect(() => {
+    let active = true;
+    void qdnRequest<unknown>({ action: 'SHOW_ACTIONS' }).then(actions => {
+      if (!active) return;
+      setSourcePreviewSupported(hasHomeBridge() && supportsSourcePreview(actions));
+      setResourceBridge(resourceBridgeCapabilities(actions));
+      setResourceBridgeReady(true);
+    }).catch(() => {
+      if (!active) return;
+      setSourcePreviewSupported(false);
+      setResourceBridge({ resourceViewer: false, streamUrl: false });
+      setResourceBridgeReady(true);
+    });
+    return () => { active = false; };
+  }, []);
   useEffect(() => { const request = resourceQuery(route); if (!request) return; let active = true; setLoading(true); setFailure(''); void qdnRequest<unknown>(request).then(value => { if (!active) return; const nextResources = asResources(value); const detail = singleResourceDetailRoute(route, nextResources); if (detail) { replace(detail); return; } setResources(nextResources); }).catch(error => { if (active) setFailure(errorText(error)); }).finally(() => { if (active) setLoading(false); }); return () => { active = false; }; }, [route, refresh]);
   useEffect(() => { setGitFallback(''); if (route.kind !== 'detail') { setDetails(null); return; } let active = true; setDetails(null); setFailure(''); const resource = { service: route.service, name: route.name, identifier: route.identifier }; void loadResourceDetails(qdnRequest, resource).then(value => { if (active) setDetails(value); }).catch(error => { if (active) setFailure(errorText(error)); }); return () => { active = false; }; }, [route]);
   const folders = useMemo(() => route.kind === 'services' ? groupBy(resources, item => item.service) : route.kind === 'service' ? groupBy(resources, item => item.name) : route.kind === 'name-services' ? groupBy(resources, item => item.service) : [], [resources, route]);
@@ -61,16 +104,20 @@ export function App() {
   const previewLocalFile = () => { setPreviewing(true); setPreviewMessage(''); setPreviewFailure(''); void previewQdnPublishSource(qdnRequest).then(result => setPreviewMessage(result.kind === 'canceled' ? t('preview.canceled') : t('preview.opened'))).catch(error => setPreviewFailure(errorText(error))).finally(() => setPreviewing(false)); };
   const detailResource: QdnResource | null = route.kind === 'detail' ? { service: route.service, name: route.name, identifier: route.identifier } : null;
   if (route.kind === 'detail' && detailResource) {
-    const file = typeof details?.properties?.filename === 'string' ? details.properties.filename : undefined;
-    const mime = typeof details?.properties?.mimeType === 'string' ? details.properties.mimeType : undefined;
-    const open = dispatchOpen(detailResource, { filename: file, mimeType: mime });
-    const opensInHomeViewer = open.action === 'OPEN_QDN_DOCUMENT_VIEWER' || open.action === 'OPEN_QDN_MEDIA_PLAYER';
     const files = resourceFiles(details?.metadata);
     const selected = files.includes(route.path ?? '') ? route.path : undefined;
     const viewed = { ...detailResource, path: selected };
+    const file = selected || (typeof details?.properties?.filename === 'string' ? details.properties.filename : undefined);
+    const mime = selected ? undefined : typeof details?.properties?.mimeType === 'string' ? details.properties.mimeType : undefined;
+    const open = dispatchOpen(viewed, {
+      filename: file,
+      mimeType: mime,
+      resourceViewer: resourceBridge.resourceViewer,
+    });
+    const opensInHomeViewer = open.action === 'OPEN_QDN_DOCUMENT_VIEWER' || open.action === 'OPEN_QDN_MEDIA_PLAYER' || open.action === 'OPEN_QDN_RESOURCE_VIEWER';
     const showFiles = files.length > 1;
     const showGit = !selected && !gitFallback && !!detectGitRepositoryLayout(files);
-    return <main className="app"><header className="top"><div><h1>{t('app.title')}</h1><p>{detailResource.service} / {detailResource.name} / {detailResource.identifier || 'default'}{selected ? ` / ${selected}` : ''}</p><NameOwnerIdentity key={detailResource.name} language={display.language} name={detailResource.name} /></div><button onClick={() => history.back()}>{t('action.back')}</button></header><section className="detail"><div className="detail-actions">{open.action === 'INTERNAL_VIEWER' ? null : <button onClick={() => void qdnRequest(open)}>{t('action.open')}</button>}{isBrowserArchiveService(detailResource.service) ? <button onClick={() => void qdnRequest(dispatchOpen(detailResource, { newTab: true }))}>{t('action.openNewTab')}</button> : null}<button onClick={() => void qdnRequest({ action: 'SAVE_QDN_RESOURCE', ...detailResource, filename: file })}>{t('action.download')}</button></div>{failure ? <p className="error">{failure}</p> : null}<div className="detail-grid"><section><h2>{t('label.details')}</h2><dl><dt>{t('label.title')}</dt><dd>{String(details?.metadata?.title || '—')}</dd><dt>{t('label.description')}</dt><dd>{String(details?.metadata?.description || '—')}</dd><dt>{t('label.status')}</dt><dd>{String(details?.status?.status || '—')}</dd><dt>{t('column.size')}</dt><dd>{bytes(details?.status?.size)}</dd><dt>{t('column.updated')}</dt><dd>{date(details?.status?.updated)}</dd></dl>{showFiles ? <><h3>{t('label.files')} <small>{files.length.toLocaleString()}</small></h3><div className="file-list">{files.map(path => <button className={`file-row${path === selected ? ' file-row--active' : ''}`} key={path} type="button" onClick={() => navigate({ ...route, path })}>{path}</button>)}</div></> : null}<h3>{t('label.properties')}</h3><pre className="source">{JSON.stringify(details?.properties || {}, null, 2)}</pre></section><section><h2>{showGit ? t('git.title') : selected || (opensInHomeViewer ? t('viewer.preview') : t('viewer.source'))}</h2>{selected ? <button className="file-clear" type="button" onClick={() => navigate({ ...route, path: undefined })}>{t('action.allFiles')}</button> : null}{gitFallback ? <p className="viewer-note">{gitFallback}</p> : null}{showGit ? <GitRepositoryViewer key={`${detailResource.service}/${detailResource.name}/${detailResource.identifier || ''}`} files={files} language={display.language} onFallback={setGitFallback} resource={detailResource} /> : showFiles && !selected ? <p className="viewer-note">{t('viewer.selectFile')}</p> : <ContentViewer key={selected ?? ''} resource={viewed} properties={details?.properties} binaryMessage={opensInHomeViewer ? t('viewer.openInHome') : undefined} />}</section></div></section></main>;
+    return <main className="app"><header className="top"><div><h1>{t('app.title')}</h1><p>{detailResource.service} / {detailResource.name} / {detailResource.identifier || 'default'}{selected ? ` / ${selected}` : ''}</p><NameOwnerIdentity key={detailResource.name} language={display.language} name={detailResource.name} /></div><button onClick={() => history.back()}>{t('action.back')}</button></header><section className="detail"><div className="detail-actions">{open.action === 'INTERNAL_VIEWER' ? null : <button onClick={() => void qdnRequest(open).catch(error => setFailure(errorText(error)))}>{t('action.open')}</button>}{isBrowserArchiveService(detailResource.service) ? <button onClick={() => void qdnRequest(dispatchOpen(detailResource, { newTab: true })).catch(error => setFailure(errorText(error)))}>{t('action.openNewTab')}</button> : null}<button onClick={() => void qdnRequest({ action: 'SAVE_QDN_RESOURCE', ...viewed, filename: file }).catch(error => setFailure(errorText(error)))}>{t('action.download')}</button></div>{failure ? <p className="error">{failure}</p> : null}<div className="detail-grid"><section><h2>{t('label.details')}</h2><dl><dt>{t('label.title')}</dt><dd>{String(details?.metadata?.title || '—')}</dd><dt>{t('label.description')}</dt><dd>{String(details?.metadata?.description || '—')}</dd><dt>{t('label.status')}</dt><dd>{String(details?.status?.status || '—')}</dd><dt>{t('column.size')}</dt><dd>{bytes(details?.status?.size)}</dd><dt>{t('column.updated')}</dt><dd>{date(details?.status?.updated)}</dd></dl>{showFiles ? <><h3>{t('label.files')} <small>{files.length.toLocaleString()}</small></h3><div className="file-list">{files.map(path => <button className={`file-row${path === selected ? ' file-row--active' : ''}`} key={path} type="button" onClick={() => navigate({ ...route, path })}>{path}</button>)}</div></> : null}<h3>{t('label.properties')}</h3><pre className="source">{JSON.stringify(details?.properties || {}, null, 2)}</pre></section><section><h2>{showGit ? t('git.title') : selected || (opensInHomeViewer ? t('viewer.preview') : t('viewer.source'))}</h2>{selected ? <button className="file-clear" type="button" onClick={() => navigate({ ...route, path: undefined })}>{t('action.allFiles')}</button> : null}{gitFallback ? <p className="viewer-note">{gitFallback}</p> : null}{showGit ? <GitRepositoryViewer key={`${detailResource.service}/${detailResource.name}/${detailResource.identifier || ''}`} files={files} language={display.language} onFallback={setGitFallback} resource={detailResource} /> : showFiles && !selected ? <p className="viewer-note">{t('viewer.selectFile')}</p> : <ContentViewer key={selected ?? ''} resource={viewed} properties={details?.properties} binaryMessage={opensInHomeViewer ? t('viewer.openInHome') : undefined} streamUrlSupported={resourceBridgeReady ? resourceBridge.streamUrl : null} />}</section></div></section></main>;
   }
-  return <main className="app"><header className="top"><div><h1>{t('app.title')}</h1><p>{t('app.subtitle')} <small>{__APP_VERSION__}</small></p></div><div className="top-actions">{sourcePreviewSupported ? <button disabled={previewing} onClick={previewLocalFile}>{previewing ? t('preview.choosing') : t('action.preview')}</button> : null}<button disabled={loading} onClick={() => setRefresh(value => value + 1)}>{t('action.refresh')}</button></div></header>{previewMessage ? <p className="preview-status" aria-live="polite">{previewMessage}</p> : null}{previewFailure ? <p className="error" role="alert">{previewFailure}</p> : null}<section className="search"><input aria-label={t('field.query')} value={search} placeholder={t('field.query')} onChange={event => setSearch(event.target.value)} onKeyDown={event => { if (event.key === 'Enter') doSearch(); }} /><select aria-label={t('field.service')} value={searchService} onChange={event => setSearchService(event.target.value)}><option value="">{t('field.service')}</option>{PUBLIC_QDN_SERVICES.map(service => <option key={service}>{service}</option>)}</select><button disabled={searchLoading} onClick={doSearch}>{t('action.search')}</button>{searchResults ? <button onClick={() => { setSearch(''); setSearchResults(null); }}>{t('action.back')}</button> : null}</section><p className="crumb">{route.kind === 'services' ? 'QDN' : route.kind === 'service' ? route.service : route.kind === 'name-services' ? route.name : `${route.service} / ${route.name}`}</p>{failure ? <section className="error-box"><strong>{t('error.coreOffline')}</strong><p>{failure}</p><button onClick={() => setRefresh(value => value + 1)}>{t('action.retry')}</button></section> : null}{loading && !resources.length ? <p className="loading">{t('loading')}</p> : null}{!searchResults && folders.length > 0 ? <section className="list"><div className="head"><span>{t('label.name')}</span><SortButton active={sort.key === 'count'} onClick={() => toggle('count')}>{t('column.count')}</SortButton><SortButton active={sort.key === 'updated'} onClick={() => toggle('updated')}>{t('column.updated')}</SortButton></div>{sortedFolders.map(row => <button className="row folder" key={row.name} onClick={() => navigate(route.kind === 'services' ? { kind: 'service', service: row.name } : route.kind === 'service' ? { kind: 'resources', service: route.service, name: row.name } : { kind: 'resources', service: row.name, name: route.name })}><span>▸ {row.name}</span><span>{row.count.toLocaleString()}</span><span>{date(row.updated)}</span></button>)}</section> : null}{(searchResults || route.kind === 'resources') && <section className="list"><div className="head resources"><span aria-hidden="true" /><SortButton active={sort.key === 'identifier'} onClick={() => toggle('identifier')}>{t('column.identifier')}</SortButton><SortButton active={sort.key === 'status'} onClick={() => toggle('status')}>{t('column.status')}</SortButton><SortButton active={sort.key === 'size'} onClick={() => toggle('size')}>{t('column.size')}</SortButton><SortButton active={sort.key === 'updated'} onClick={() => toggle('updated')}>{t('column.updated')}</SortButton></div>{sortedResources.map(resource => <button className="row resource" key={`${resource.service}/${resource.name}/${resource.identifier || ''}`} onClick={() => navigate(detailRoute(resource))}><Thumbnail resource={resource} /><span><strong>{resource.identifier || 'default'}</strong><small>{resource.service} · {resource.name}</small></span><span>{resource.status?.status || 'PUBLISHED'}</span><span>{bytes(resource.size)}</span><span>{date(updatedOf(resource))}</span></button>)}</section>}{!loading && !failure && ((searchResults && !searchResults.length) || (!searchResults && !folders.length && route.kind !== 'resources') || (route.kind === 'resources' && !resources.length)) ? <p className="empty">{searchResults ? t('empty.search') : t('empty.resources')}</p> : null}</main>;
+  return <main className="app"><header className="top"><div><h1>{t('app.title')}</h1><p>{t('app.subtitle')} <small>{__APP_VERSION__}</small></p></div><div className="top-actions">{sourcePreviewSupported ? <button disabled={previewing} onClick={previewLocalFile}>{previewing ? t('preview.choosing') : t('action.preview')}</button> : null}<button disabled={loading} onClick={() => setRefresh(value => value + 1)}>{t('action.refresh')}</button></div></header>{previewMessage ? <p className="preview-status" aria-live="polite">{previewMessage}</p> : null}{previewFailure ? <p className="error" role="alert">{previewFailure}</p> : null}<section className="search"><input aria-label={t('field.query')} value={search} placeholder={t('field.query')} onChange={event => setSearch(event.target.value)} onKeyDown={event => { if (event.key === 'Enter') doSearch(); }} /><select aria-label={t('field.service')} value={searchService} onChange={event => setSearchService(event.target.value)}><option value="">{t('field.service')}</option>{PUBLIC_QDN_SERVICES.map(service => <option key={service}>{service}</option>)}</select><button disabled={searchLoading} onClick={doSearch}>{t('action.search')}</button>{searchResults ? <button onClick={() => { setSearch(''); setSearchResults(null); }}>{t('action.back')}</button> : null}</section><p className="crumb">{route.kind === 'services' ? 'QDN' : route.kind === 'service' ? route.service : route.kind === 'name-services' ? route.name : `${route.service} / ${route.name}`}</p>{failure ? <section className="error-box"><strong>{t('error.coreOffline')}</strong><p>{failure}</p><button onClick={() => setRefresh(value => value + 1)}>{t('action.retry')}</button></section> : null}{loading && !resources.length ? <p className="loading">{t('loading')}</p> : null}{!searchResults && folders.length > 0 ? <section className="list"><div className="head"><span>{t('label.name')}</span><SortButton active={sort.key === 'count'} onClick={() => toggle('count')}>{t('column.count')}</SortButton><SortButton active={sort.key === 'updated'} onClick={() => toggle('updated')}>{t('column.updated')}</SortButton></div>{sortedFolders.map(row => <button className="row folder" key={row.name} onClick={() => navigate(route.kind === 'services' ? { kind: 'service', service: row.name } : route.kind === 'service' ? { kind: 'resources', service: route.service, name: row.name } : { kind: 'resources', service: row.name, name: route.name })}><span>▸ {row.name}</span><span>{row.count.toLocaleString()}</span><span>{date(row.updated)}</span></button>)}</section> : null}{(searchResults || route.kind === 'resources') && <section className="list"><div className="head resources"><span aria-hidden="true" /><SortButton active={sort.key === 'identifier'} onClick={() => toggle('identifier')}>{t('column.identifier')}</SortButton><SortButton active={sort.key === 'status'} onClick={() => toggle('status')}>{t('column.status')}</SortButton><SortButton active={sort.key === 'size'} onClick={() => toggle('size')}>{t('column.size')}</SortButton><SortButton active={sort.key === 'updated'} onClick={() => toggle('updated')}>{t('column.updated')}</SortButton></div>{sortedResources.map(resource => <button className="row resource" key={`${resource.service}/${resource.name}/${resource.identifier || ''}`} onClick={() => navigate(detailRoute(resource))}><Thumbnail resource={resource} streamUrlSupported={resourceBridgeReady ? resourceBridge.streamUrl : null} /><span><strong>{resource.identifier || 'default'}</strong><small>{resource.service} · {resource.name}</small></span><span>{resource.status?.status || 'PUBLISHED'}</span><span>{bytes(resource.size)}</span><span>{date(updatedOf(resource))}</span></button>)}</section>}{!loading && !failure && ((searchResults && !searchResults.length) || (!searchResults && !folders.length && route.kind !== 'resources') || (route.kind === 'resources' && !resources.length)) ? <p className="empty">{searchResults ? t('empty.search') : t('empty.resources')}</p> : null}</main>;
 }
diff --git a/src/contentViewer.test.ts b/src/contentViewer.test.ts
new file mode 100644
index 0000000..8398010
--- /dev/null
+++ b/src/contentViewer.test.ts
@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest';
+import { classifyContent } from './contentViewer';
+
+const resource = (service: string, path?: string) => ({
+  service,
+  name: 'Alice',
+  identifier: 'one',
+  path,
+});
+
+describe('content viewer media classification', () => {
+  it.each([
+    ['AUDIO', 'audio'],
+    ['VOICE', 'audio'],
+    ['PODCAST', 'audio'],
+    ['VIDEO', 'video'],
+    ['IMAGE', 'image'],
+  ] as const)('classifies %s by service as %s', (service, kind) => {
+    expect(classifyContent(resource(service))).toBe(kind);
+  });
+
+  it('classifies media inside generic file services by selected filename', () => {
+    expect(classifyContent(resource('FILES', 'media/song.opus'))).toBe('audio');
+    expect(classifyContent(resource('ATTACHMENT', 'media/movie.webm'))).toBe('video');
+    expect(classifyContent(resource('FILE'), { filename: 'cover.avif' })).toBe('image');
+  });
+
+  it('does not apply container MIME hints to an individually selected file', () => {
+    expect(classifyContent(resource('FILES', 'README.md'), { mimeType: 'video/mp4' })).toBe('markdown');
+  });
+});
diff --git a/src/contentViewer.tsx b/src/contentViewer.tsx
index df23be2..58dec96 100644
--- a/src/contentViewer.tsx
+++ b/src/contentViewer.tsx
@@ -1,13 +1,14 @@
 import { useEffect, useState } from 'react';
 import { previewCache, previewCacheKey } from './previewCache';
 import { qdnRequest } from './qdnRequest';
+import { canStreamResource, resourceStreamRequest } from './resourceBridge';
 import { resourceFetchRequest } from './resourceFiles';
 import type { QdnResource } from './types';
 
 export const CONTENT_MAX_BYTES = 2 * 1024 * 1024;
 const IMAGE_MIME_TYPES: Record<string, string> = { avif: 'image/avif', bmp: 'image/bmp', gif: 'image/gif', ico: 'image/x-icon', jpeg: 'image/jpeg', jpg: 'image/jpeg', png: 'image/png', svg: 'image/svg+xml', webp: 'image/webp' };
 
-export type ContentKind = 'binary' | 'csv' | 'image' | 'json' | 'markdown' | 'text';
+export type ContentKind = 'audio' | 'binary' | 'csv' | 'image' | 'json' | 'markdown' | 'text' | 'video';
 
 function filename(resource: QdnResource, properties?: Record<string, unknown>) { return resource.path || (typeof properties?.filename === 'string' ? properties.filename : '') || resource.identifier || 'resource'; }
 function extension(name: string) { return name.toLowerCase().split('/').pop()?.split('.').slice(1).pop() ?? ''; }
@@ -23,6 +24,8 @@ export function classifyContent(resource: QdnResource, properties?: Record<strin
   const file = resource.path ? '' : String(properties?.mimeType || properties?.mimetype || '').toLowerCase();
   const service = resource.path ? '' : resource.service;
   if (service === 'IMAGE' || service === 'THUMBNAIL' || /^image\//.test(file) || /\.(png|jpe?g|gif|webp|svg|ico|bmp|avif)$/.test(name)) return 'image';
+  if (/^(AUDIO|VOICE|PODCAST)$/.test(service) || /^audio\//.test(file) || /\.(mp3|m4a|aac|flac|ogg|oga|opus|wav|weba)$/.test(name)) return 'audio';
+  if (service === 'VIDEO' || /^video\//.test(file) || /\.(mp4|m4v|webm|ogv|mov)$/.test(name)) return 'video';
   if (service === 'JSON' || file.includes('json') || name.endsWith('.json')) return 'json';
   if (file.includes('csv') || name.endsWith('.csv')) return 'csv';
   if (/\.(md|markdown)$/.test(name) || file.includes('markdown')) return 'markdown';
@@ -45,7 +48,7 @@ function csvRows(text: string) { return text.split(/\r?\n/).filter(Boolean).map(
  * viewer feeds it bytes it read out of a repository instead.
  */
 export function ContentPreview({ kind, data, resource, properties, binaryMessage }: { kind: ContentKind; data: string; resource: QdnResource; properties?: Record<string, unknown>; binaryMessage?: string }) {
-  if (kind === 'binary') return <p className="viewer-note">{binaryMessage || 'This resource cannot be rendered safely in Explore. Use Download to save its original bytes.'}</p>;
+  if (kind === 'binary' || kind === 'audio' || kind === 'video') return <p className="viewer-note">{binaryMessage || 'This resource cannot be rendered safely in Explore. Use Download to save its original bytes.'}</p>;
   if (kind === 'image') return <img className="content-image" alt={filename(resource, properties)} src={`data:${imageMimeType(resource, properties)};base64,${data}`} />;
   if (kind === 'json') { try { return <pre className="source">{JSON.stringify(JSON.parse(data), null, 2)}</pre>; } catch { return <pre className="source">{data}</pre>; } }
   if (kind === 'csv') { const rows = csvRows(data); return <div className="table-scroll"><table className="csv"><tbody>{rows.map((row, i) => <tr key={i}>{row.map((cell, j) => i === 0 ? <th key={j}>{cell}</th> : <td key={j}>{cell}</td>)}</tr>)}</tbody></table></div>; }
@@ -53,12 +56,46 @@ export function ContentPreview({ kind, data, resource, properties, binaryMessage
   return <pre className="source">{data}</pre>;
 }
 
-export function ContentViewer({ resource, properties, binaryMessage }: { resource: QdnResource; properties?: Record<string, unknown>; binaryMessage?: string }) {
+function StreamedContent({ kind, resource, properties }: { kind: 'audio' | 'image' | 'video'; resource: QdnResource; properties?: Record<string, unknown> }) {
+  const [state, setState] = useState<{ error?: string; loading: boolean; url?: string }>({ loading: true });
+  const knownFilename = filename(resource, properties);
+  const knownMimeType = resource.path ? undefined : String(properties?.mimeType || properties?.mimetype || '') || undefined;
+
+  useEffect(() => {
+    let active = true;
+    setState({ loading: true });
+    void qdnRequest<unknown>(resourceStreamRequest(resource, {
+      filename: knownFilename,
+      mimeType: knownMimeType,
+    })).then((value) => {
+      if (!active) return;
+      if (typeof value !== 'string' || !value) throw new Error('Home did not return a media URL.');
+      setState({ loading: false, url: value });
+    }).catch((error) => {
+      if (active) setState({
+        error: error instanceof Error ? error.message : 'Unable to open the media stream.',
+        loading: false,
+      });
+    });
+    return () => { active = false; };
+  }, [knownFilename, knownMimeType, resource.identifier, resource.name, resource.path, resource.service]);
+
+  if (state.loading) return <p className="loading">Loading preview…</p>;
+  if (state.error || !state.url) return <p className="error">{state.error || 'Unable to open the media stream.'}</p>;
+  if (kind === 'image') return <img className="content-image" alt={knownFilename} decoding="async" loading="lazy" src={state.url} />;
+  if (kind === 'audio') return <audio className="content-media" controls preload="metadata" src={state.url} />;
+  return <video className="content-media content-video" controls playsInline preload="metadata" src={state.url} />;
+}
+
+export function ContentViewer({ resource, properties, binaryMessage, streamUrlSupported = null }: { resource: QdnResource; properties?: Record<string, unknown>; binaryMessage?: string; streamUrlSupported?: boolean | null }) {
   const [state, setState] = useState<{ data?: string; error?: string; loading: boolean }>({ loading: true });
   const kind = classifyContent(resource, properties);
+  const streamableContent = canStreamResource(resource) && ['audio', 'image', 'video'].includes(kind);
+  const awaitingStreamCapability = streamUrlSupported === null && streamableContent;
+  const useStreamUrl = streamUrlSupported === true && streamableContent;
   const cacheKey = previewCacheKey(resource, kind);
   useEffect(() => {
-    if (kind === 'binary') { setState({ loading: false }); return; }
+    if (kind === 'binary' || kind === 'audio' || kind === 'video' || useStreamUrl || awaitingStreamCapability) { setState({ loading: false }); return; }
     const cached = previewCache.get(cacheKey);
     if (cached !== undefined) { setState({ data: cached, loading: false }); return; }
     let active = true;
@@ -69,8 +106,11 @@ export function ContentViewer({ resource, properties, binaryMessage }: { resourc
       if (active) setState({ data: text, loading: false });
     }).catch(error => { if (active) setState({ error: error instanceof Error ? error.message : 'Unable to fetch content.', loading: false }); });
     return () => { active = false; };
-  }, [cacheKey, kind, resource.identifier, resource.name, resource.path, resource.service]);
+  }, [awaitingStreamCapability, cacheKey, kind, resource.identifier, resource.name, resource.path, resource.service, useStreamUrl]);
+  if (awaitingStreamCapability) return <p className="loading">Loading preview…</p>;
+  if (useStreamUrl) return <StreamedContent kind={kind as 'audio' | 'image' | 'video'} resource={resource} properties={properties} />;
   if (kind === 'binary') return <ContentPreview kind={kind} data="" resource={resource} properties={properties} binaryMessage={binaryMessage} />;
+  if (kind === 'audio' || kind === 'video') return <ContentPreview kind={kind} data="" resource={resource} properties={properties} binaryMessage={binaryMessage} />;
   if (state.loading) return <p className="loading">Loading preview…</p>;
   if (state.error) return <p className="error">{state.error}</p>;
   return <ContentPreview kind={kind} data={state.data || ''} resource={resource} properties={properties} />;
diff --git a/src/dispatcher.test.ts b/src/dispatcher.test.ts
index 3619dd7..576f98c 100644
--- a/src/dispatcher.test.ts
+++ b/src/dispatcher.test.ts
@@ -9,6 +9,33 @@ describe('open dispatcher', () => {
   it.each(['AUDIO', 'VOICE', 'PODCAST', 'VIDEO'])('routes %s to media player', (service) => expect(dispatchOpen(resource(service)).action).toBe('OPEN_QDN_MEDIA_PLAYER'));
   it.each(['DOCUMENT', 'FILE', 'FILES', 'ATTACHMENT'])('routes %s to document viewer', (service) => expect(dispatchOpen(resource(service)).action).toBe('OPEN_QDN_DOCUMENT_VIEWER'));
   it('keeps other services in Explore internal viewer', () => expect(dispatchOpen(resource('JSON')).action).toBe('INTERNAL_VIEWER'));
+  it.each(['IMAGE', 'AUDIO', 'VIDEO', 'DOCUMENT', 'JSON', 'CODE', 'IMAGE_GALLERY', 'GIT_REPOSITORY'])(
+    'routes %s to the generic Home viewer when advertised',
+    (service) => expect(dispatchOpen(resource(service), { resourceViewer: true })).toEqual({
+      action: 'OPEN_QDN_RESOURCE_VIEWER',
+      service,
+      name: 'Alice',
+      identifier: 'one',
+      path: 'file.txt',
+      filename: undefined,
+      mimeType: undefined,
+    }),
+  );
+  it('passes selected-file hints to the generic viewer', () => {
+    expect(dispatchOpen(resource('FILE'), {
+      filename: 'clip.mp4',
+      mimeType: 'video/mp4',
+      resourceViewer: true,
+    })).toMatchObject({
+      action: 'OPEN_QDN_RESOURCE_VIEWER',
+      filename: 'clip.mp4',
+      mimeType: 'video/mp4',
+      path: 'file.txt',
+    });
+  });
+  it.each(['APP', 'WEBSITE', 'GAME'])('keeps %s on the navigation path even with the generic viewer', (service) => {
+    expect(dispatchOpen(resource(service), { resourceViewer: true }).action).toBe('OPEN_CURRENT_TAB');
+  });
   it('routes a lower-cased browser archive service too', () => expect(dispatchOpen(resource('game')).action).toBe('OPEN_CURRENT_TAB'));
   it('addresses a GAME by its own service', () => expect(dispatchOpen(resource('GAME'))).toEqual({ action: 'OPEN_CURRENT_TAB', address: 'qdn://GAME/Alice/one' }));
 });
diff --git a/src/dispatcher.ts b/src/dispatcher.ts
index d2c692a..bc8a936 100644
--- a/src/dispatcher.ts
+++ b/src/dispatcher.ts
@@ -1,19 +1,30 @@
 import { isBrowserArchiveService } from './services';
+import { OPEN_QDN_RESOURCE_VIEWER } from './resourceBridge';
 import type { QdnResource } from './types';
 
 export type OpenDispatch =
   | { action: 'OPEN_CURRENT_TAB' | 'OPEN_NEW_TAB'; address: string }
   | { action: 'OPEN_QDN_MEDIA_PLAYER'; identifier?: string; name: string; path?: string; service: string }
   | { action: 'OPEN_QDN_DOCUMENT_VIEWER'; filename?: string; identifier?: string; mimeType?: string; name: string; path?: string; service: string }
+  | { action: typeof OPEN_QDN_RESOURCE_VIEWER; filename?: string; identifier?: string; mimeType?: string; name: string; path?: string; service: string }
   | { action: 'INTERNAL_VIEWER' };
 const media = new Set(['AUDIO', 'VOICE', 'PODCAST', 'VIDEO']);
 const documents = new Set(['DOCUMENT', 'FILE', 'FILES', 'ATTACHMENT']);
 export function qdnUrl(resource: Pick<QdnResource, 'service' | 'name' | 'identifier'>) {
   return `qdn://${resource.service}/${encodeURIComponent(resource.name)}${resource.identifier ? `/${encodeURIComponent(resource.identifier)}` : ''}`;
 }
-export function dispatchOpen(resource: QdnResource, options: { newTab?: boolean; filename?: string; mimeType?: string } = {}): OpenDispatch {
+export function dispatchOpen(
+  resource: QdnResource,
+  options: {
+    filename?: string;
+    mimeType?: string;
+    newTab?: boolean;
+    resourceViewer?: boolean;
+  } = {},
+): OpenDispatch {
   const service = resource.service.toUpperCase();
   if (isBrowserArchiveService(service)) return { action: options.newTab ? 'OPEN_NEW_TAB' : 'OPEN_CURRENT_TAB', address: qdnUrl({ ...resource, service }) };
+  if (options.resourceViewer) return { action: OPEN_QDN_RESOURCE_VIEWER, service, name: resource.name, identifier: resource.identifier, path: resource.path, filename: options.filename, mimeType: options.mimeType };
   if (media.has(service)) return { action: 'OPEN_QDN_MEDIA_PLAYER', service, name: resource.name, identifier: resource.identifier, path: resource.path };
   if (documents.has(service)) return { action: 'OPEN_QDN_DOCUMENT_VIEWER', service, name: resource.name, identifier: resource.identifier, path: resource.path, filename: options.filename, mimeType: options.mimeType };
   return { action: 'INTERNAL_VIEWER' };
diff --git a/src/qdnRequest.test.ts b/src/qdnRequest.test.ts
index 0feca17..3f3e226 100644
--- a/src/qdnRequest.test.ts
+++ b/src/qdnRequest.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { resourcePath, sanitizeNodePath, sanitizeReadMethod } from './qdnRequest';
+import { LOCAL_READ_ACTIONS, resourcePath, resourceRenderPath, sanitizeNodePath, sanitizeReadMethod } from './qdnRequest';
 describe('qdn request sanitizers', () => {
   it('requires a safe absolute node path', () => {
     expect(() => sanitizeNodePath('admin/status')).toThrow();
@@ -16,4 +16,19 @@ describe('qdn request sanitizers', () => {
     expect(sanitizeReadMethod()).toBe('GET'); expect(sanitizeReadMethod(' head ')).toBe('HEAD');
     expect(() => sanitizeReadMethod('POST')).toThrow('Only GET and HEAD');
   });
+  it('advertises and builds local ranged render URLs for browser development', () => {
+    expect(LOCAL_READ_ACTIONS).toContain('GET_QDN_RESOURCE_STREAM_URL');
+    expect(resourceRenderPath({
+      action: 'GET_QDN_RESOURCE_STREAM_URL',
+      service: 'file',
+      name: 'Alice Example',
+      identifier: 'clip',
+      path: 'media/demo one.mp4?download=false',
+    })).toBe('/render/FILE/Alice%20Example/clip/media/demo%20one.mp4?download=false');
+    expect(() => resourceRenderPath({
+      action: 'GET_QDN_RESOURCE_STREAM_URL',
+      service: 'JSON',
+      name: 'Alice',
+    })).toThrow('does not support inline streaming');
+  });
 });
diff --git a/src/qdnRequest.ts b/src/qdnRequest.ts
index 1ee8eda..9eca996 100644
--- a/src/qdnRequest.ts
+++ b/src/qdnRequest.ts
@@ -1,9 +1,11 @@
+import { canStreamResource, GET_QDN_RESOURCE_STREAM_URL } from './resourceBridge';
+
 const DEFAULT_NODE_API_URL = 'http://127.0.0.1:24891';
 
 export const LOCAL_READ_ACTIONS = [
   'FETCH_NODE_API', 'FETCH_QDN_RESOURCE', 'GET_NODE_STATUS', 'IS_USING_PUBLIC_NODE', 'LIST_QDN_RESOURCES',
   'SEARCH_QDN_RESOURCES', 'GET_QDN_RESOURCE_METADATA', 'GET_QDN_RESOURCE_PROPERTIES', 'GET_QDN_RESOURCE_STATUS',
-  'SHOW_ACTIONS', 'WHICH_UI',
+  GET_QDN_RESOURCE_STREAM_URL, 'SHOW_ACTIONS', 'WHICH_UI',
 ] as const;
 
 export type QdnRequest = { action: string; maxBytes?: number; method?: string; path?: string; [key: string]: unknown };
@@ -44,6 +46,16 @@ export function resourcePath(request: QdnRequest, kind: 'fetch' | 'metadata' | '
   if (str(request.encoding).toLowerCase() === 'base64') params.set('encoding', 'base64');
   return `/arbitrary/${resource.service}/${encodeURIComponent(resource.name)}${resource.identifier ? `/${encodeURIComponent(resource.identifier)}` : ''}${params.size ? `?${params}` : ''}`;
 }
+export function resourceRenderPath(request: QdnRequest) {
+  const resource = resourceRequest(request);
+  if (!canStreamResource(resource)) throw new Error('This QDN service does not support inline streaming.');
+  const queryIndex = resource.path.indexOf('?');
+  const pathOnly = queryIndex === -1 ? resource.path : resource.path.slice(0, queryIndex);
+  const query = queryIndex === -1 ? '' : resource.path.slice(queryIndex + 1);
+  const encodedPath = pathOnly.split('/').filter(Boolean).map(encodeURIComponent).join('/');
+  const queryString = new URLSearchParams(query).toString();
+  return `/render/${resource.service}/${encodeURIComponent(resource.name)}${resource.identifier ? `/${encodeURIComponent(resource.identifier)}` : ''}${encodedPath ? `/${encodedPath}` : ''}${queryString ? `?${queryString}` : ''}`;
+}
 function parse(body: string, type: string): unknown { try { return type.includes('json') || /^[\s\r\n]*[\[{]/.test(body) ? JSON.parse(body) : body; } catch { return body; } }
 async function localData(request: QdnRequest, path: string) {
   const method = sanitizeReadMethod(request.method); const response = await fetch(`${getNodeApiUrl()}${sanitizeNodePath(path)}`, { method });
@@ -59,6 +71,13 @@ async function fallback<T>(request: QdnRequest): Promise<T> {
     case 'GET_QDN_RESOURCE_METADATA': return localData(request, resourcePath(request, 'metadata')) as Promise<T>;
     case 'GET_QDN_RESOURCE_PROPERTIES': return localData(request, resourcePath(request, 'properties')) as Promise<T>;
     case 'GET_QDN_RESOURCE_STATUS': return localData(request, resourcePath(request, 'status')) as Promise<T>;
+    case GET_QDN_RESOURCE_STREAM_URL: {
+      const status = await localData(request, resourcePath(request, 'status'));
+      if (!status || typeof status !== 'object' || !('status' in status) || status.status === 'NOT_PUBLISHED') {
+        throw new Error('Resource does not exist.');
+      }
+      return `${getNodeApiUrl()}${resourceRenderPath(request)}` as T;
+    }
     case 'GET_NODE_STATUS': return localData(request, '/admin/status') as Promise<T>;
     case 'LIST_QDN_RESOURCES': return localData(request, resourcesPath(request, '/arbitrary/resources')) as Promise<T>;
     case 'SEARCH_QDN_RESOURCES': return localData(request, resourcesPath(request, '/arbitrary/resources/search')) as Promise<T>;
diff --git a/src/resourceBridge.test.ts b/src/resourceBridge.test.ts
new file mode 100644
index 0000000..c7723e7
--- /dev/null
+++ b/src/resourceBridge.test.ts
@@ -0,0 +1,69 @@
+import { describe, expect, it } from 'vitest';
+import {
+  canStreamResource,
+  GET_QDN_RESOURCE_STREAM_URL,
+  OPEN_QDN_RESOURCE_VIEWER,
+  resourceBridgeCapabilities,
+  resourceStreamRequest,
+} from './resourceBridge';
+
+describe('Home resource bridge capabilities', () => {
+  it('feature-detects the viewer and stream actions independently', () => {
+    expect(resourceBridgeCapabilities([
+      'SHOW_ACTIONS',
+      GET_QDN_RESOURCE_STREAM_URL,
+      OPEN_QDN_RESOURCE_VIEWER,
+    ])).toEqual({ resourceViewer: true, streamUrl: true });
+    expect(resourceBridgeCapabilities([GET_QDN_RESOURCE_STREAM_URL])).toEqual({
+      resourceViewer: false,
+      streamUrl: true,
+    });
+    expect(resourceBridgeCapabilities({ actions: [OPEN_QDN_RESOURCE_VIEWER] })).toEqual({
+      resourceViewer: false,
+      streamUrl: false,
+    });
+  });
+
+  it.each([
+    'IMAGE',
+    'THUMBNAIL',
+    'QCHAT_IMAGE',
+    'AUDIO',
+    'VOICE',
+    'PODCAST',
+    'VIDEO',
+    'DOCUMENT',
+    'FILE',
+    'FILES',
+    'ATTACHMENT',
+  ])('allows Home-supported %s resources to stream', (service) => {
+    expect(canStreamResource({ service })).toBe(true);
+  });
+
+  it.each(['APP', 'WEBSITE', 'GAME', 'JSON', 'CODE', 'GIT_REPOSITORY'])(
+    'does not request a stream URL for %s',
+    (service) => {
+      expect(canStreamResource({ service })).toBe(false);
+    },
+  );
+
+  it('builds a minimal descriptor without leaking host credentials', () => {
+    expect(resourceStreamRequest(
+      {
+        service: 'file',
+        name: 'Alice',
+        identifier: 'clip',
+        path: 'media/demo.mp4',
+      },
+      { filename: 'demo.mp4', mimeType: 'video/mp4' },
+    )).toEqual({
+      action: GET_QDN_RESOURCE_STREAM_URL,
+      service: 'FILE',
+      name: 'Alice',
+      identifier: 'clip',
+      path: 'media/demo.mp4',
+      filename: 'demo.mp4',
+      mimeType: 'video/mp4',
+    });
+  });
+});
diff --git a/src/resourceBridge.ts b/src/resourceBridge.ts
new file mode 100644
index 0000000..aba4b0c
--- /dev/null
+++ b/src/resourceBridge.ts
@@ -0,0 +1,56 @@
+import type { QdnRequest } from './qdnRequest';
+import type { QdnResource } from './types';
+
+export const OPEN_QDN_RESOURCE_VIEWER = 'OPEN_QDN_RESOURCE_VIEWER';
+export const GET_QDN_RESOURCE_STREAM_URL = 'GET_QDN_RESOURCE_STREAM_URL';
+
+const STREAMABLE_SERVICES = new Set([
+  'IMAGE',
+  'THUMBNAIL',
+  'QCHAT_IMAGE',
+  'AUDIO',
+  'VOICE',
+  'PODCAST',
+  'VIDEO',
+  'DOCUMENT',
+  'FILE',
+  'FILES',
+  'ATTACHMENT',
+]);
+
+export type ResourceBridgeCapabilities = {
+  resourceViewer: boolean;
+  streamUrl: boolean;
+};
+
+export function resourceBridgeCapabilities(actions: unknown): ResourceBridgeCapabilities {
+  const actionSet = new Set(
+    Array.isArray(actions)
+      ? actions.filter((action): action is string => typeof action === 'string')
+      : [],
+  );
+
+  return {
+    resourceViewer: actionSet.has(OPEN_QDN_RESOURCE_VIEWER),
+    streamUrl: actionSet.has(GET_QDN_RESOURCE_STREAM_URL),
+  };
+}
+
+export function canStreamResource(resource: Pick<QdnResource, 'service'>) {
+  return STREAMABLE_SERVICES.has(resource.service.toUpperCase());
+}
+
+export function resourceStreamRequest(
+  resource: Pick<QdnResource, 'service' | 'name' | 'identifier' | 'path'>,
+  hints: { filename?: string; mimeType?: string } = {},
+): QdnRequest {
+  return {
+    action: GET_QDN_RESOURCE_STREAM_URL,
+    service: resource.service.toUpperCase(),
+    name: resource.name,
+    ...(resource.identifier ? { identifier: resource.identifier } : {}),
+    ...(resource.path ? { path: resource.path } : {}),
+    ...(hints.filename ? { filename: hints.filename } : {}),
+    ...(hints.mimeType ? { mimeType: hints.mimeType } : {}),
+  };
+}
diff --git a/src/styles.css b/src/styles.css
index 397bc84..1d2b3b8 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -9,7 +9,7 @@ button:hover:not(:disabled) { border-color: var(--brand); } button:disabled { op
 .top { display: flex; gap: 1rem; align-items: start; justify-content: space-between; margin-bottom: 1rem; }.top h1 { margin: 0; font-size: 1.7rem; }.top p, .crumb { margin: .3rem 0 0; color: var(--muted); }.top small { padding-left: .4rem; }.top-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: end; }.preview-status { margin: -.35rem 0 1rem; color: var(--muted); }.name-owner { display: flex; gap: .55rem; align-items: center; margin-top: .7rem; }.name-owner__avatar, .name-owner__fallback { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; }.name-owner__avatar { object-fit: cover; border: 1px solid var(--line); }.name-owner__fallback { display: grid; place-items: center; background: var(--brand); color: var(--brand-ink); font-weight: 700; }.name-owner__text { display: grid; min-width: 0; }.name-owner__label, .name-owner__address { color: var(--muted); font-size: .8rem; }.name-owner__address { overflow-wrap: anywhere; }
 .search { display: grid; grid-template-columns: minmax(12rem, 1fr) 12rem auto auto; gap: .5rem; padding: .75rem; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }.search input, .search select { min-width: 0; border: 1px solid var(--line); border-radius: 7px; padding: .55rem; background: var(--bg); color: var(--ink); }.search button:first-of-type, .detail-actions button:first-child { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
 .crumb { padding: 1rem 0; font-weight: 600; }.list { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel); }.head, .row { display: grid; grid-template-columns: minmax(14rem, 1fr) 8rem 12rem; gap: 1rem; align-items: center; width: 100%; text-align: left; border: 0; border-radius: 0; border-bottom: 1px solid var(--line); padding: .7rem 1rem; }.head { color: var(--muted); font-size: .85rem; }.head.resources, .row.resource { grid-template-columns: 34px minmax(15rem, 2fr) minmax(7rem, 1fr) 7rem 12rem; }.row:last-child { border-bottom: 0; }.row.folder:hover, .row.resource:hover { background: color-mix(in srgb, var(--brand) 8%, var(--panel)); }.row small { display: block; color: var(--muted); margin-top: .15rem; }.sort { text-align: left; padding: 0; border: 0; background: transparent; color: inherit; font-size: inherit; }.thumbnail { width: 34px; height: 34px; object-fit: cover; border-radius: 6px; }.thumbnail--placeholder { display: inline-grid; place-items: center; background: var(--bg); color: var(--muted); }
-.loading, .empty { padding: 2rem; text-align: center; color: var(--muted); }.error, .error-box { color: var(--danger); }.error-box { border: 1px solid var(--danger); background: var(--panel); padding: 1rem; border-radius: 8px; margin-bottom: 1rem; }.detail-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }.detail-grid { display: grid; grid-template-columns: minmax(16rem, 1fr) minmax(20rem, 2fr); gap: 1rem; }.detail-grid > section { border: 1px solid var(--line); border-radius: 10px; padding: 1rem; background: var(--panel); min-width: 0; }.detail h2 { margin-top: 0; } dl { display: grid; grid-template-columns: 8rem 1fr; gap: .45rem .8rem; } dt { color: var(--muted); } dd { margin: 0; overflow-wrap: anywhere; }.source { padding: 1rem; background: var(--bg); border-radius: 7px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }.markdown { line-height: 1.6; }.markdown h1, .markdown h2, .markdown h3 { margin: 1rem 0 .4rem; }.content-image { max-width: 100%; max-height: 70vh; object-fit: contain; background: var(--bg); }.table-scroll { overflow: auto; }.csv { border-collapse: collapse; width: 100%; }.csv td, .csv th { border: 1px solid var(--line); padding: .45rem; text-align: left; }.viewer-note { padding: 1rem; background: var(--bg); color: var(--muted); border-radius: 7px; }.file-list { max-height: 22rem; overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); margin-bottom: 1rem; }.file-row { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; padding: .45rem .7rem; overflow-wrap: anywhere; }.file-row:last-child { border-bottom: 0; }.file-row:hover { background: color-mix(in srgb, var(--brand) 8%, var(--panel)); }.file-row--active { background: color-mix(in srgb, var(--brand) 16%, var(--panel)); font-weight: 600; }.file-clear { margin-bottom: .8rem; }
+.loading, .empty { padding: 2rem; text-align: center; color: var(--muted); }.error, .error-box { color: var(--danger); }.error-box { border: 1px solid var(--danger); background: var(--panel); padding: 1rem; border-radius: 8px; margin-bottom: 1rem; }.detail-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }.detail-grid { display: grid; grid-template-columns: minmax(16rem, 1fr) minmax(20rem, 2fr); gap: 1rem; }.detail-grid > section { border: 1px solid var(--line); border-radius: 10px; padding: 1rem; background: var(--panel); min-width: 0; }.detail h2 { margin-top: 0; } dl { display: grid; grid-template-columns: 8rem 1fr; gap: .45rem .8rem; } dt { color: var(--muted); } dd { margin: 0; overflow-wrap: anywhere; }.source { padding: 1rem; background: var(--bg); border-radius: 7px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }.markdown { line-height: 1.6; }.markdown h1, .markdown h2, .markdown h3 { margin: 1rem 0 .4rem; }.content-image { max-width: 100%; max-height: 70vh; object-fit: contain; background: var(--bg); }.content-media { display: block; width: 100%; }.content-video { max-height: 70vh; background: #000; }.table-scroll { overflow: auto; }.csv { border-collapse: collapse; width: 100%; }.csv td, .csv th { border: 1px solid var(--line); padding: .45rem; text-align: left; }.viewer-note { padding: 1rem; background: var(--bg); color: var(--muted); border-radius: 7px; }.file-list { max-height: 22rem; overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); margin-bottom: 1rem; }.file-row { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; padding: .45rem .7rem; overflow-wrap: anywhere; }.file-row:last-child { border-bottom: 0; }.file-row:hover { background: color-mix(in srgb, var(--brand) 8%, var(--panel)); }.file-row--active { background: color-mix(in srgb, var(--brand) 16%, var(--panel)); font-weight: 600; }.file-clear { margin-bottom: .8rem; }
 :root[data-ui='modern'] { --panel: color-mix(in srgb, var(--bg) 18%, #ffffff); } :root[data-theme='dark'][data-ui='modern'] { --panel: #17252b; }:root[data-ui='modern'] .app { max-width: 1320px; }:root[data-ui='modern'] .list, :root[data-ui='modern'] .search, :root[data-ui='modern'] .detail-grid > section { border-radius: 18px; box-shadow: 0 10px 30px #00000012; }:root[data-ui='modern'] .top h1 { letter-spacing: -.04em; font-size: 2rem; }
 @media (max-width: 720px) { .app { width: min(100% - 1rem, 1200px); padding-top: .75rem; }.search { grid-template-columns: 1fr 1fr; }.search input { grid-column: 1 / -1; }.head, .row { grid-template-columns: minmax(11rem, 1fr) 6rem; }.head > :last-child, .row > :last-child { display: none; }.head.resources, .row.resource { grid-template-columns: 34px minmax(9rem, 1fr) 6rem; }.head.resources > :nth-child(n+4), .row.resource > :nth-child(n+4) { display: none; }.detail-grid { grid-template-columns: 1fr; } }
 .git-meta { margin: 0 0 .8rem; color: var(--muted); overflow-wrap: anywhere; }.git-path { margin: 0 0 .8rem; overflow-wrap: anywhere; }

From 3fd4e6291465d558b286393728c328ec3a3a5c56 Mon Sep 17 00:00:00 2001
From: QuickMythril <quickmythril@protonmail.com>
Date: Wed, 29 Jul 2026 19:07:48 -0400
Subject: [PATCH 2/4] fix: validate Home media URLs

---
 src/App.tsx                |  8 ++++----
 src/contentViewer.tsx      |  5 ++---
 src/resourceBridge.test.ts | 17 +++++++++++++++++
 src/resourceBridge.ts      | 14 ++++++++++++++
 4 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index a083349..f7e9e94 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -12,6 +12,7 @@ import {
   canStreamResource,
   resourceBridgeCapabilities,
   resourceStreamRequest,
+  safeQdnStreamUrl,
   type ResourceBridgeCapabilities,
 } from './resourceBridge';
 import { loadResourceDetails } from './resourceDetails';
@@ -40,10 +41,9 @@ function Thumbnail({ resource, streamUrlSupported }: { resource: QdnResource; st
       if (streamUrlSupported && canStreamResource(resource)) {
         try {
           const streamUrl = await qdnRequest<unknown>(resourceStreamRequest(resource));
-          if (typeof streamUrl === 'string' && streamUrl) {
-            if (active) setSrc(streamUrl);
-            return;
-          }
+          const safeStreamUrl = safeQdnStreamUrl(streamUrl);
+          if (active) setSrc(safeStreamUrl);
+          return;
         } catch {
           // A newly advertised stream URL can still fail transiently. Retain
           // Explore's bounded base64 thumbnail path as the compatibility fallback.
diff --git a/src/contentViewer.tsx b/src/contentViewer.tsx
index 58dec96..3549546 100644
--- a/src/contentViewer.tsx
+++ b/src/contentViewer.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { previewCache, previewCacheKey } from './previewCache';
 import { qdnRequest } from './qdnRequest';
-import { canStreamResource, resourceStreamRequest } from './resourceBridge';
+import { canStreamResource, resourceStreamRequest, safeQdnStreamUrl } from './resourceBridge';
 import { resourceFetchRequest } from './resourceFiles';
 import type { QdnResource } from './types';
 
@@ -69,8 +69,7 @@ function StreamedContent({ kind, resource, properties }: { kind: 'audio' | 'imag
       mimeType: knownMimeType,
     })).then((value) => {
       if (!active) return;
-      if (typeof value !== 'string' || !value) throw new Error('Home did not return a media URL.');
-      setState({ loading: false, url: value });
+      setState({ loading: false, url: safeQdnStreamUrl(value) });
     }).catch((error) => {
       if (active) setState({
         error: error instanceof Error ? error.message : 'Unable to open the media stream.',
diff --git a/src/resourceBridge.test.ts b/src/resourceBridge.test.ts
index c7723e7..71c3778 100644
--- a/src/resourceBridge.test.ts
+++ b/src/resourceBridge.test.ts
@@ -5,6 +5,7 @@ import {
   OPEN_QDN_RESOURCE_VIEWER,
   resourceBridgeCapabilities,
   resourceStreamRequest,
+  safeQdnStreamUrl,
 } from './resourceBridge';
 
 describe('Home resource bridge capabilities', () => {
@@ -66,4 +67,20 @@ describe('Home resource bridge capabilities', () => {
       mimeType: 'video/mp4',
     });
   });
+
+  it('accepts only credential-free HTTP(S) stream URLs', () => {
+    expect(safeQdnStreamUrl('https://node.example/render/VIDEO/Alice/clip')).toBe(
+      'https://node.example/render/VIDEO/Alice/clip',
+    );
+    expect(safeQdnStreamUrl('http://127.0.0.1:24891/render/AUDIO/Alice/clip')).toBe(
+      'http://127.0.0.1:24891/render/AUDIO/Alice/clip',
+    );
+    expect(() => safeQdnStreamUrl('javascript:alert(1)')).toThrow('unsafe media URL');
+    expect(() => safeQdnStreamUrl('data:text/html,<script>alert(1)</script>')).toThrow('unsafe media URL');
+    expect(() => safeQdnStreamUrl('https://user:secret@node.example/render/IMAGE/Alice/clip')).toThrow(
+      'unsafe media URL',
+    );
+    expect(() => safeQdnStreamUrl('/render/IMAGE/Alice/clip')).toThrow();
+    expect(() => safeQdnStreamUrl(null)).toThrow('did not return a media URL');
+  });
 });
diff --git a/src/resourceBridge.ts b/src/resourceBridge.ts
index aba4b0c..7130c55 100644
--- a/src/resourceBridge.ts
+++ b/src/resourceBridge.ts
@@ -54,3 +54,17 @@ export function resourceStreamRequest(
     ...(hints.mimeType ? { mimeType: hints.mimeType } : {}),
   };
 }
+
+export function safeQdnStreamUrl(value: unknown) {
+  if (typeof value !== 'string' || !value) {
+    throw new Error('Home did not return a media URL.');
+  }
+
+  const url = new URL(value);
+
+  if (!['http:', 'https:'].includes(url.protocol) || url.username || url.password) {
+    throw new Error('Home returned an unsafe media URL.');
+  }
+
+  return url.toString();
+}

From 74d01f9b267c47618533ad0acb640af0aeb8fa80 Mon Sep 17 00:00:00 2001
From: QuickMythril <quickmythril@protonmail.com>
Date: Wed, 29 Jul 2026 19:10:48 -0400
Subject: [PATCH 3/4] fix: isolate streamed images behind blob URLs

---
 src/App.tsx           | 13 +++++++++++--
 src/contentViewer.tsx | 37 ++++++++++++++++++++++++++++---------
 2 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index f7e9e94..213a1d9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -37,12 +37,18 @@ function Thumbnail({ resource, streamUrlSupported }: { resource: QdnResource; st
   useEffect(() => {
     if (!mayFetchThumbnail(resource) || streamUrlSupported === null) return;
     let active = true;
+    let objectUrl: string | undefined;
     const load = async () => {
       if (streamUrlSupported && canStreamResource(resource)) {
         try {
           const streamUrl = await qdnRequest<unknown>(resourceStreamRequest(resource));
           const safeStreamUrl = safeQdnStreamUrl(streamUrl);
-          if (active) setSrc(safeStreamUrl);
+          const response = await fetch(safeStreamUrl);
+          if (!response.ok) throw new Error(`Thumbnail request failed with HTTP ${response.status}.`);
+          const blob = await response.blob();
+          if (!blob.type.startsWith('image/')) throw new Error('Thumbnail response was not an image.');
+          objectUrl = URL.createObjectURL(blob);
+          if (active) setSrc(objectUrl);
           return;
         } catch {
           // A newly advertised stream URL can still fail transiently. Retain
@@ -53,7 +59,10 @@ function Thumbnail({ resource, streamUrlSupported }: { resource: QdnResource; st
       if (active && typeof data === 'string') setSrc(`data:image/*;base64,${data}`);
     };
     void load().catch(() => undefined);
-    return () => { active = false; };
+    return () => {
+      active = false;
+      if (objectUrl) URL.revokeObjectURL(objectUrl);
+    };
   }, [resource.identifier, resource.name, resource.path, resource.service, resource.size, streamUrlSupported]);
   return src ? <img className="thumbnail" alt="" decoding="async" loading="lazy" src={src} /> : <span className="thumbnail thumbnail--placeholder" aria-label="Preview unavailable">▧</span>;
 }
diff --git a/src/contentViewer.tsx b/src/contentViewer.tsx
index 3549546..7600f44 100644
--- a/src/contentViewer.tsx
+++ b/src/contentViewer.tsx
@@ -63,20 +63,39 @@ function StreamedContent({ kind, resource, properties }: { kind: 'audio' | 'imag
 
   useEffect(() => {
     let active = true;
+    let objectUrl: string | undefined;
+    const abortController = new AbortController();
     setState({ loading: true });
-    void qdnRequest<unknown>(resourceStreamRequest(resource, {
-      filename: knownFilename,
-      mimeType: knownMimeType,
-    })).then((value) => {
-      if (!active) return;
-      setState({ loading: false, url: safeQdnStreamUrl(value) });
-    }).catch((error) => {
-      if (active) setState({
+    const load = async () => {
+      const value = await qdnRequest<unknown>(resourceStreamRequest(resource, {
+        filename: knownFilename,
+        mimeType: knownMimeType,
+      }));
+      const safeStreamUrl = safeQdnStreamUrl(value);
+
+      if (kind === 'image') {
+        const response = await fetch(safeStreamUrl, { signal: abortController.signal });
+        if (!response.ok) throw new Error(`Image request failed with HTTP ${response.status}.`);
+        const blob = await response.blob();
+        if (!blob.type.startsWith('image/')) throw new Error('Image response did not contain an image.');
+        objectUrl = URL.createObjectURL(blob);
+        if (active) setState({ loading: false, url: objectUrl });
+        return;
+      }
+
+      if (active) setState({ loading: false, url: safeStreamUrl });
+    };
+    void load().catch((error) => {
+      if (active && !abortController.signal.aborted) setState({
         error: error instanceof Error ? error.message : 'Unable to open the media stream.',
         loading: false,
       });
     });
-    return () => { active = false; };
+    return () => {
+      active = false;
+      abortController.abort();
+      if (objectUrl) URL.revokeObjectURL(objectUrl);
+    };
   }, [knownFilename, knownMimeType, resource.identifier, resource.name, resource.path, resource.service]);
 
   if (state.loading) return <p className="loading">Loading preview…</p>;

From 331968e55e37ee002785bbddd434e8ad5781ccb8 Mon Sep 17 00:00:00 2001
From: QuickMythril <quickmythril@protonmail.com>
Date: Wed, 29 Jul 2026 19:13:37 -0400
Subject: [PATCH 4/4] fix: retain bounded thumbnail previews

---
 src/App.tsx | 40 ++++------------------------------------
 1 file changed, 4 insertions(+), 36 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 213a1d9..0b42286 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -9,10 +9,7 @@ import { detectGitRepositoryLayout } from './qdnGitRepository';
 import { NameOwnerIdentity } from './NameOwnerIdentity';
 import { hasHomeBridge, qdnRequest } from './qdnRequest';
 import {
-  canStreamResource,
   resourceBridgeCapabilities,
-  resourceStreamRequest,
-  safeQdnStreamUrl,
   type ResourceBridgeCapabilities,
 } from './resourceBridge';
 import { loadResourceDetails } from './resourceDetails';
@@ -32,39 +29,10 @@ const date = (timestamp?: number) => timestamp ? new Date(timestamp).toLocaleStr
 function groupBy<T extends string>(resources: QdnResource[], key: (item: QdnResource) => T): Folder[] { const map = new Map<T, Folder>(); for (const resource of resources) { const name = key(resource), old = map.get(name); map.set(name, { name, count: (old?.count ?? 0) + 1, updated: Math.max(old?.updated ?? 0, updatedOf(resource)) }); } return [...map.values()]; }
 function resourceQuery(route: ExploreRoute) { if (route.kind === 'services') return { action: 'LIST_QDN_RESOURCES', mode: 'ALL', limit: 0 }; if (route.kind === 'service') return { action: 'LIST_QDN_RESOURCES', mode: 'ALL', service: route.service, limit: 0 }; if (route.kind === 'name-services') return { action: 'LIST_QDN_RESOURCES', mode: 'ALL', name: route.name, exactMatchNames: true, limit: 0 }; if (route.kind === 'resources') return { action: 'LIST_QDN_RESOURCES', mode: 'ALL', service: route.service, name: route.name, exactMatchNames: true, includeStatus: true, includeMetadata: true, limit: 0 }; return null; }
 
-function Thumbnail({ resource, streamUrlSupported }: { resource: QdnResource; streamUrlSupported: boolean | null }) {
+function Thumbnail({ resource }: { resource: QdnResource }) {
   const [src, setSrc] = useState<string>();
-  useEffect(() => {
-    if (!mayFetchThumbnail(resource) || streamUrlSupported === null) return;
-    let active = true;
-    let objectUrl: string | undefined;
-    const load = async () => {
-      if (streamUrlSupported && canStreamResource(resource)) {
-        try {
-          const streamUrl = await qdnRequest<unknown>(resourceStreamRequest(resource));
-          const safeStreamUrl = safeQdnStreamUrl(streamUrl);
-          const response = await fetch(safeStreamUrl);
-          if (!response.ok) throw new Error(`Thumbnail request failed with HTTP ${response.status}.`);
-          const blob = await response.blob();
-          if (!blob.type.startsWith('image/')) throw new Error('Thumbnail response was not an image.');
-          objectUrl = URL.createObjectURL(blob);
-          if (active) setSrc(objectUrl);
-          return;
-        } catch {
-          // A newly advertised stream URL can still fail transiently. Retain
-          // Explore's bounded base64 thumbnail path as the compatibility fallback.
-        }
-      }
-      const data = await qdnRequest<unknown>(resourceFetchRequest(resource, { binary: true, maxBytes: THUMBNAIL_MAX_BYTES }));
-      if (active && typeof data === 'string') setSrc(`data:image/*;base64,${data}`);
-    };
-    void load().catch(() => undefined);
-    return () => {
-      active = false;
-      if (objectUrl) URL.revokeObjectURL(objectUrl);
-    };
-  }, [resource.identifier, resource.name, resource.path, resource.service, resource.size, streamUrlSupported]);
-  return src ? <img className="thumbnail" alt="" decoding="async" loading="lazy" src={src} /> : <span className="thumbnail thumbnail--placeholder" aria-label="Preview unavailable">▧</span>;
+  useEffect(() => { if (!mayFetchThumbnail(resource)) return; let active = true; void qdnRequest<unknown>(resourceFetchRequest(resource, { binary: true, maxBytes: THUMBNAIL_MAX_BYTES })).then(data => { if (active && typeof data === 'string') setSrc(`data:image/*;base64,${data}`); }).catch(() => undefined); return () => { active = false; }; }, [resource.identifier, resource.name, resource.path, resource.service, resource.size]);
+  return src ? <img className="thumbnail" alt="" src={src} /> : <span className="thumbnail thumbnail--placeholder" aria-label="Preview unavailable">▧</span>;
 }
 function SortButton({ active, children, onClick }: { active: boolean; children: ReactNode; onClick: () => void }) { return <button className="sort" type="button" onClick={onClick}>{children}{active ? ' ↕' : ''}</button>; }
 
@@ -128,5 +96,5 @@ export function App() {
     const showGit = !selected && !gitFallback && !!detectGitRepositoryLayout(files);
     return <main className="app"><header className="top"><div><h1>{t('app.title')}</h1><p>{detailResource.service} / {detailResource.name} / {detailResource.identifier || 'default'}{selected ? ` / ${selected}` : ''}</p><NameOwnerIdentity key={detailResource.name} language={display.language} name={detailResource.name} /></div><button onClick={() => history.back()}>{t('action.back')}</button></header><section className="detail"><div className="detail-actions">{open.action === 'INTERNAL_VIEWER' ? null : <button onClick={() => void qdnRequest(open).catch(error => setFailure(errorText(error)))}>{t('action.open')}</button>}{isBrowserArchiveService(detailResource.service) ? <button onClick={() => void qdnRequest(dispatchOpen(detailResource, { newTab: true })).catch(error => setFailure(errorText(error)))}>{t('action.openNewTab')}</button> : null}<button onClick={() => void qdnRequest({ action: 'SAVE_QDN_RESOURCE', ...viewed, filename: file }).catch(error => setFailure(errorText(error)))}>{t('action.download')}</button></div>{failure ? <p className="error">{failure}</p> : null}<div className="detail-grid"><section><h2>{t('label.details')}</h2><dl><dt>{t('label.title')}</dt><dd>{String(details?.metadata?.title || '—')}</dd><dt>{t('label.description')}</dt><dd>{String(details?.metadata?.description || '—')}</dd><dt>{t('label.status')}</dt><dd>{String(details?.status?.status || '—')}</dd><dt>{t('column.size')}</dt><dd>{bytes(details?.status?.size)}</dd><dt>{t('column.updated')}</dt><dd>{date(details?.status?.updated)}</dd></dl>{showFiles ? <><h3>{t('label.files')} <small>{files.length.toLocaleString()}</small></h3><div className="file-list">{files.map(path => <button className={`file-row${path === selected ? ' file-row--active' : ''}`} key={path} type="button" onClick={() => navigate({ ...route, path })}>{path}</button>)}</div></> : null}<h3>{t('label.properties')}</h3><pre className="source">{JSON.stringify(details?.properties || {}, null, 2)}</pre></section><section><h2>{showGit ? t('git.title') : selected || (opensInHomeViewer ? t('viewer.preview') : t('viewer.source'))}</h2>{selected ? <button className="file-clear" type="button" onClick={() => navigate({ ...route, path: undefined })}>{t('action.allFiles')}</button> : null}{gitFallback ? <p className="viewer-note">{gitFallback}</p> : null}{showGit ? <GitRepositoryViewer key={`${detailResource.service}/${detailResource.name}/${detailResource.identifier || ''}`} files={files} language={display.language} onFallback={setGitFallback} resource={detailResource} /> : showFiles && !selected ? <p className="viewer-note">{t('viewer.selectFile')}</p> : <ContentViewer key={selected ?? ''} resource={viewed} properties={details?.properties} binaryMessage={opensInHomeViewer ? t('viewer.openInHome') : undefined} streamUrlSupported={resourceBridgeReady ? resourceBridge.streamUrl : null} />}</section></div></section></main>;
   }
-  return <main className="app"><header className="top"><div><h1>{t('app.title')}</h1><p>{t('app.subtitle')} <small>{__APP_VERSION__}</small></p></div><div className="top-actions">{sourcePreviewSupported ? <button disabled={previewing} onClick={previewLocalFile}>{previewing ? t('preview.choosing') : t('action.preview')}</button> : null}<button disabled={loading} onClick={() => setRefresh(value => value + 1)}>{t('action.refresh')}</button></div></header>{previewMessage ? <p className="preview-status" aria-live="polite">{previewMessage}</p> : null}{previewFailure ? <p className="error" role="alert">{previewFailure}</p> : null}<section className="search"><input aria-label={t('field.query')} value={search} placeholder={t('field.query')} onChange={event => setSearch(event.target.value)} onKeyDown={event => { if (event.key === 'Enter') doSearch(); }} /><select aria-label={t('field.service')} value={searchService} onChange={event => setSearchService(event.target.value)}><option value="">{t('field.service')}</option>{PUBLIC_QDN_SERVICES.map(service => <option key={service}>{service}</option>)}</select><button disabled={searchLoading} onClick={doSearch}>{t('action.search')}</button>{searchResults ? <button onClick={() => { setSearch(''); setSearchResults(null); }}>{t('action.back')}</button> : null}</section><p className="crumb">{route.kind === 'services' ? 'QDN' : route.kind === 'service' ? route.service : route.kind === 'name-services' ? route.name : `${route.service} / ${route.name}`}</p>{failure ? <section className="error-box"><strong>{t('error.coreOffline')}</strong><p>{failure}</p><button onClick={() => setRefresh(value => value + 1)}>{t('action.retry')}</button></section> : null}{loading && !resources.length ? <p className="loading">{t('loading')}</p> : null}{!searchResults && folders.length > 0 ? <section className="list"><div className="head"><span>{t('label.name')}</span><SortButton active={sort.key === 'count'} onClick={() => toggle('count')}>{t('column.count')}</SortButton><SortButton active={sort.key === 'updated'} onClick={() => toggle('updated')}>{t('column.updated')}</SortButton></div>{sortedFolders.map(row => <button className="row folder" key={row.name} onClick={() => navigate(route.kind === 'services' ? { kind: 'service', service: row.name } : route.kind === 'service' ? { kind: 'resources', service: route.service, name: row.name } : { kind: 'resources', service: row.name, name: route.name })}><span>▸ {row.name}</span><span>{row.count.toLocaleString()}</span><span>{date(row.updated)}</span></button>)}</section> : null}{(searchResults || route.kind === 'resources') && <section className="list"><div className="head resources"><span aria-hidden="true" /><SortButton active={sort.key === 'identifier'} onClick={() => toggle('identifier')}>{t('column.identifier')}</SortButton><SortButton active={sort.key === 'status'} onClick={() => toggle('status')}>{t('column.status')}</SortButton><SortButton active={sort.key === 'size'} onClick={() => toggle('size')}>{t('column.size')}</SortButton><SortButton active={sort.key === 'updated'} onClick={() => toggle('updated')}>{t('column.updated')}</SortButton></div>{sortedResources.map(resource => <button className="row resource" key={`${resource.service}/${resource.name}/${resource.identifier || ''}`} onClick={() => navigate(detailRoute(resource))}><Thumbnail resource={resource} streamUrlSupported={resourceBridgeReady ? resourceBridge.streamUrl : null} /><span><strong>{resource.identifier || 'default'}</strong><small>{resource.service} · {resource.name}</small></span><span>{resource.status?.status || 'PUBLISHED'}</span><span>{bytes(resource.size)}</span><span>{date(updatedOf(resource))}</span></button>)}</section>}{!loading && !failure && ((searchResults && !searchResults.length) || (!searchResults && !folders.length && route.kind !== 'resources') || (route.kind === 'resources' && !resources.length)) ? <p className="empty">{searchResults ? t('empty.search') : t('empty.resources')}</p> : null}</main>;
+  return <main className="app"><header className="top"><div><h1>{t('app.title')}</h1><p>{t('app.subtitle')} <small>{__APP_VERSION__}</small></p></div><div className="top-actions">{sourcePreviewSupported ? <button disabled={previewing} onClick={previewLocalFile}>{previewing ? t('preview.choosing') : t('action.preview')}</button> : null}<button disabled={loading} onClick={() => setRefresh(value => value + 1)}>{t('action.refresh')}</button></div></header>{previewMessage ? <p className="preview-status" aria-live="polite">{previewMessage}</p> : null}{previewFailure ? <p className="error" role="alert">{previewFailure}</p> : null}<section className="search"><input aria-label={t('field.query')} value={search} placeholder={t('field.query')} onChange={event => setSearch(event.target.value)} onKeyDown={event => { if (event.key === 'Enter') doSearch(); }} /><select aria-label={t('field.service')} value={searchService} onChange={event => setSearchService(event.target.value)}><option value="">{t('field.service')}</option>{PUBLIC_QDN_SERVICES.map(service => <option key={service}>{service}</option>)}</select><button disabled={searchLoading} onClick={doSearch}>{t('action.search')}</button>{searchResults ? <button onClick={() => { setSearch(''); setSearchResults(null); }}>{t('action.back')}</button> : null}</section><p className="crumb">{route.kind === 'services' ? 'QDN' : route.kind === 'service' ? route.service : route.kind === 'name-services' ? route.name : `${route.service} / ${route.name}`}</p>{failure ? <section className="error-box"><strong>{t('error.coreOffline')}</strong><p>{failure}</p><button onClick={() => setRefresh(value => value + 1)}>{t('action.retry')}</button></section> : null}{loading && !resources.length ? <p className="loading">{t('loading')}</p> : null}{!searchResults && folders.length > 0 ? <section className="list"><div className="head"><span>{t('label.name')}</span><SortButton active={sort.key === 'count'} onClick={() => toggle('count')}>{t('column.count')}</SortButton><SortButton active={sort.key === 'updated'} onClick={() => toggle('updated')}>{t('column.updated')}</SortButton></div>{sortedFolders.map(row => <button className="row folder" key={row.name} onClick={() => navigate(route.kind === 'services' ? { kind: 'service', service: row.name } : route.kind === 'service' ? { kind: 'resources', service: route.service, name: row.name } : { kind: 'resources', service: row.name, name: route.name })}><span>▸ {row.name}</span><span>{row.count.toLocaleString()}</span><span>{date(row.updated)}</span></button>)}</section> : null}{(searchResults || route.kind === 'resources') && <section className="list"><div className="head resources"><span aria-hidden="true" /><SortButton active={sort.key === 'identifier'} onClick={() => toggle('identifier')}>{t('column.identifier')}</SortButton><SortButton active={sort.key === 'status'} onClick={() => toggle('status')}>{t('column.status')}</SortButton><SortButton active={sort.key === 'size'} onClick={() => toggle('size')}>{t('column.size')}</SortButton><SortButton active={sort.key === 'updated'} onClick={() => toggle('updated')}>{t('column.updated')}</SortButton></div>{sortedResources.map(resource => <button className="row resource" key={`${resource.service}/${resource.name}/${resource.identifier || ''}`} onClick={() => navigate(detailRoute(resource))}><Thumbnail resource={resource} /><span><strong>{resource.identifier || 'default'}</strong><small>{resource.service} · {resource.name}</small></span><span>{resource.status?.status || 'PUBLISHED'}</span><span>{bytes(resource.size)}</span><span>{date(updatedOf(resource))}</span></button>)}</section>}{!loading && !failure && ((searchResults && !searchResults.length) || (!searchResults && !folders.length && route.kind !== 'resources') || (route.kind === 'resources' && !resources.length)) ? <p className="empty">{searchResults ? t('empty.search') : t('empty.resources')}</p> : null}</main>;
 }