tabminal 3.0.13 → 3.0.14

package/public/index.html

@@ -229,6 +229,10 @@
                     target.classList.contains('file-tree') ||
                     target.classList.contains('tab-file-tree') ||
                     target.classList.contains('editor-content') ||
+                    target.classList.contains('markdown-preview-container') ||
+                    target.classList.contains('markdown-preview-scroll') ||
+                    target.classList.contains('pdf-preview-container') ||
+                    target.classList.contains('pdf-preview-pages') ||
                     target.classList.contains('agent-panel-transcript') ||
                     target.classList.contains('agent-panel-input') ||
                     target.classList.contains('xterm-viewport') ||
@@ -273,18 +277,82 @@
             }
 
             const runtimeStorageKey = 'tabminal_runtime_boot_id';
-            let runtimeBootId = '';
-            try {
-                runtimeBootId = localStorage.getItem(runtimeStorageKey) || '';
-            } catch {
-                runtimeBootId = '';
-            }
-            const runtimeAssetKey = runtimeBootId || `cold-${Date.now()}`;
-            window.__tabminalRuntimeAssetKey = runtimeAssetKey;
-            const link = document.createElement('link');
-            link.rel = 'stylesheet';
-            link.href = `./styles.css?v=${encodeURIComponent(runtimeAssetKey)}`;
-            document.head.appendChild(link);
+            const versionApiUrl = './api/version';
+            const runtimeVersionTimeoutMs = 3000;
+            const readStoredRuntimeBootId = () => {
+                try {
+                    return localStorage.getItem(runtimeStorageKey) || '';
+                } catch {
+                    return '';
+                }
+            };
+            const persistRuntimeBootId = (bootId) => {
+                try {
+                    localStorage.setItem(runtimeStorageKey, bootId);
+                } catch {
+                    // Ignore storage failures and continue with in-memory key.
+                }
+            };
+            const getStartupFallbackAssetKey = () => {
+                return readStoredRuntimeBootId() || `cold-${Date.now()}`;
+            };
+            window.__tabminalRuntimeAssetKey = getStartupFallbackAssetKey();
+
+            window.__tabminalResolveRuntimeVersion = (() => {
+                let promise = null;
+                return () => {
+                    if (promise) {
+                        return promise;
+                    }
+                    promise = (async () => {
+                        const controller = (
+                            typeof AbortController === 'function'
+                                ? new AbortController()
+                                : null
+                        );
+                        const timeoutId = window.setTimeout(() => {
+                            if (controller) {
+                                controller.abort();
+                            }
+                        }, runtimeVersionTimeoutMs);
+                        try {
+                            const response = await fetch(versionApiUrl, {
+                                method: 'GET',
+                                cache: 'no-store',
+                                credentials: 'same-origin',
+                                headers: {
+                                    'accept': 'application/json'
+                                },
+                                signal: controller?.signal
+                            });
+                            if (!response.ok) {
+                                throw new Error(`version ${response.status}`);
+                            }
+                            const data = await response.json();
+                            const bootId = String(data?.bootId || '').trim();
+                            if (!bootId) {
+                                throw new Error('missing runtime version boot id');
+                            }
+                            window.__tabminalRuntimeAssetKey = bootId;
+                            persistRuntimeBootId(bootId);
+                            return {
+                                bootId,
+                                source: 'api'
+                            };
+                        } catch (_err) {
+                            const bootId = getStartupFallbackAssetKey();
+                            window.__tabminalRuntimeAssetKey = bootId;
+                            return {
+                                bootId,
+                                source: 'fallback'
+                            };
+                        } finally {
+                            window.clearTimeout(timeoutId);
+                        }
+                    })();
+                    return promise;
+                };
+            })();
         })();
     </script>
     <script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.44.0/min/vs/loader.js"></script>
@@ -327,6 +395,27 @@
                         <div id="image-preview-container" class="image-preview-container" style="display: none;">
                             <img id="image-preview" src="" alt="Preview">
                         </div>
+                        <div id="pdf-preview-container" class="pdf-preview-container" style="display: none;">
+                        <div id="pdf-preview-status" class="pdf-preview-status">
+                            <span
+                                id="pdf-preview-status-primary"
+                                class="pdf-preview-status-primary"
+                            ></span>
+                            <span
+                                id="pdf-preview-status-secondary"
+                                class="pdf-preview-status-secondary"
+                            ></span>
+                        </div>
+                        <div id="pdf-preview-pages" class="pdf-preview-pages"></div>
+                        </div>
+                        <div id="markdown-preview-container" class="markdown-preview-container" style="display: none;">
+                            <div id="markdown-preview-scroll" class="markdown-preview-scroll">
+                                <article
+                                    id="markdown-preview-content"
+                                    class="markdown-preview-sheet markdown-body"
+                                ></article>
+                            </div>
+                        </div>
                         <div id="empty-editor-state" class="empty-editor-state">
                             Select a file to view
                         </div>
@@ -565,25 +654,29 @@
     </div>
     <script>
         function getRuntimeAssetKey() {
-            const runtimeStorageKey = 'tabminal_runtime_boot_id';
-            try {
-                const bootId = localStorage.getItem(runtimeStorageKey) || '';
-                if (bootId) {
-                    return bootId;
-                }
-            } catch {
-                // Fall through to cold key.
-            }
-            if (window.__tabminalRuntimeAssetKey) {
-                return window.__tabminalRuntimeAssetKey;
+            const assetKey = window.__tabminalRuntimeAssetKey;
+            if (typeof assetKey === 'string' && assetKey) {
+                return assetKey;
             }
             const coldKey = `cold-${Date.now()}`;
             window.__tabminalRuntimeAssetKey = coldKey;
             return coldKey;
         }
 
-        (function() {
-            const runtimeBootId = getRuntimeAssetKey();
+        (async function() {
+            const runtimeVersion = (
+                window.__tabminalResolveRuntimeVersion
+                    ? await window.__tabminalResolveRuntimeVersion()
+                    : getRuntimeAssetKey()
+            );
+            const runtimeBootId = typeof runtimeVersion === 'string'
+                ? runtimeVersion
+                : (runtimeVersion?.bootId || getRuntimeAssetKey());
+            window.__tabminalRuntimeAssetKey = runtimeBootId;
+            const link = document.createElement('link');
+            link.rel = 'stylesheet';
+            link.href = `./styles.css?v=${encodeURIComponent(runtimeBootId)}`;
+            document.head.appendChild(link);
             const script = document.createElement('script');
             script.type = 'module';
             script.src = `./app.js?v=${encodeURIComponent(runtimeBootId)}`;
@@ -592,16 +685,25 @@
 
         if ('serviceWorker' in navigator) {
             window.addEventListener('load', () => {
-                const runtimeBootId = getRuntimeAssetKey();
-                navigator.serviceWorker.register(
-                    `/sw.js?rt=${encodeURIComponent(runtimeBootId)}`
-                )
-                    .then(registration => {
-                        console.log('ServiceWorker registration successful with scope: ', registration.scope);
-                    })
-                    .catch(err => {
-                        console.log('ServiceWorker registration failed: ', err);
-                    });
+                (async () => {
+                    const runtimeVersion = (
+                        window.__tabminalResolveRuntimeVersion
+                            ? await window.__tabminalResolveRuntimeVersion()
+                            : getRuntimeAssetKey()
+                    );
+                    const runtimeBootId = typeof runtimeVersion === 'string'
+                        ? runtimeVersion
+                        : (runtimeVersion?.bootId || getRuntimeAssetKey());
+                    navigator.serviceWorker.register(
+                        `/sw.js?rt=${encodeURIComponent(runtimeBootId)}`
+                    )
+                        .then(registration => {
+                            console.log('ServiceWorker registration successful with scope: ', registration.scope);
+                        })
+                        .catch(err => {
+                            console.log('ServiceWorker registration failed: ', err);
+                        });
+                })();
             });
         }
     </script>

package/public/styles.css

@@ -1711,6 +1711,57 @@ kbd {
     border-top: 2px solid var(--accent-color);
 }
 
+.editor-tab.bound-tab-primary {
+    border-right: 0;
+}
+
+.editor-tab.bound-tab-secondary {
+    min-width: 0;
+    padding-left: 10px;
+    padding-right: 12px;
+}
+
+.markdown-preview-tab {
+    color: rgba(229, 237, 239, 0.76);
+}
+
+.editor-tab.is-split {
+    border-top-color: rgba(38, 139, 210, 0.55);
+}
+
+.editor-tab .tab-action-btn {
+    margin-left: 8px;
+    color: rgba(229, 237, 239, 0.72);
+    border-radius: 6px;
+    width: 20px;
+    height: 20px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 20px;
+    opacity: 0.78;
+    cursor: pointer;
+}
+
+.editor-tab:hover .tab-action-btn,
+.editor-tab.active .tab-action-btn {
+    opacity: 1;
+}
+
+.editor-tab .tab-action-btn:hover {
+    background-color: rgba(38, 139, 210, 0.16);
+    color: var(--text-highlight);
+}
+
+.markdown-split-btn,
+.markdown-unsplit-btn {
+    margin-left: auto;
+}
+
+.markdown-unsplit-btn + .close-btn {
+    margin-left: 6px;
+}
+
 .editor-tab .close-btn {
     margin-left: auto;
     font-size: 14px;
@@ -1751,6 +1802,18 @@ kbd {
     position: relative;
     overflow: hidden;
     min-width: 0;
+    min-height: 0;
+}
+
+.editor-content.markdown-split-active {
+    position: absolute;
+    inset: 36px 0 0;
+    flex: 1 1 0%;
+    height: auto;
+    min-height: 0;
+    display: flex;
+    align-items: stretch;
+    gap: 0;
 }
 
 .terminal-tab-host {
@@ -3343,6 +3406,16 @@ kbd {
     min-width: 0;
 }
 
+.editor-content.markdown-split-active > .monaco-container {
+    position: relative;
+    flex: 1 1 0;
+    width: auto;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+    border-right: 1px solid rgba(148, 163, 184, 0.14);
+}
+
 .image-preview-container {
     width: 100%;
     height: 100%;
@@ -3367,6 +3440,240 @@ kbd {
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
 }
 
+.pdf-preview-container {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    min-height: 0;
+    background:
+        linear-gradient(180deg, rgba(7, 54, 66, 0.98), rgba(0, 36, 46, 0.98));
+}
+
+.markdown-preview-container {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    min-height: 0;
+    background:
+        linear-gradient(180deg, rgba(7, 54, 66, 0.98), rgba(0, 36, 46, 0.98));
+}
+
+.editor-content.markdown-split-active > .markdown-preview-container {
+    position: relative;
+    inset: auto;
+    flex: 1 1 0;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+}
+
+.markdown-preview-scroll {
+    flex: 1;
+    overflow: auto;
+    min-height: 0;
+    padding: 18px;
+    overscroll-behavior: contain;
+    -webkit-overflow-scrolling: touch;
+    touch-action: pan-y pinch-zoom;
+}
+
+.markdown-preview-sheet.markdown-body {
+    box-sizing: border-box;
+    width: min(960px, 100%);
+    min-height: 100%;
+    margin: 0 auto;
+    padding: 28px 32px 40px;
+    background: #0d1117;
+    color: #c9d1d9;
+    border: 1px solid rgba(229, 237, 239, 0.08);
+    border-radius: 12px;
+    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
+}
+
+.editor-content.markdown-split-active
+    > .markdown-preview-container
+    .markdown-preview-scroll {
+    padding: 14px;
+}
+
+.editor-content.markdown-split-active
+    > .markdown-preview-container
+    .markdown-preview-sheet.markdown-body {
+    width: min(100%, 860px);
+    padding: 22px 24px 28px;
+    border-radius: 0;
+    border-top: 0;
+    border-right: 0;
+    border-bottom: 0;
+    box-shadow: none;
+}
+
+.markdown-preview-sheet.markdown-body img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 8px;
+}
+
+.markdown-preview-sheet.markdown-body pre {
+    overflow: auto;
+}
+
+.markdown-preview-sheet.markdown-body .task-list-item {
+    list-style: none;
+}
+
+.markdown-preview-sheet.markdown-body .task-list-item input {
+    margin-right: 8px;
+}
+
+.markdown-preview-error {
+    color: #fca5a5;
+    font-size: 13px;
+}
+
+@media (max-width: 767px) {
+    .markdown-preview-scroll {
+        padding: 12px;
+    }
+
+    .markdown-preview-sheet.markdown-body {
+        padding: 18px 16px 28px;
+        border-radius: 10px;
+    }
+}
+
+.pdf-preview-status {
+    padding: 14px 18px;
+    color: var(--text-muted);
+    min-height: 22px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+}
+
+.pdf-preview-status.is-empty {
+    display: none;
+}
+
+.pdf-preview-status-primary,
+.pdf-preview-status-secondary {
+    font-size: 12px;
+    line-height: 1.4;
+    white-space: nowrap;
+}
+
+.pdf-preview-status-primary {
+    color: var(--text-muted);
+    font-weight: 600;
+}
+
+.pdf-preview-status-secondary {
+    color: rgba(229, 237, 239, 0.68);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: right;
+}
+
+.pdf-preview-pages {
+    flex: 1;
+    overflow: auto;
+    min-height: 0;
+    padding: 16px 18px 18px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 18px;
+    overscroll-behavior: contain;
+    -webkit-overflow-scrolling: touch;
+    touch-action: pan-y pinch-zoom;
+}
+
+.pdf-preview-page {
+    width: 100%;
+    flex: 0 0 auto;
+    display: flex;
+    justify-content: center;
+}
+
+.pdf-preview-sheet {
+    position: relative;
+    width: fit-content;
+    max-width: 100%;
+}
+
+.pdf-preview-page canvas {
+    width: auto;
+    max-width: 100%;
+    height: auto;
+    display: block;
+    background: #ffffff;
+    box-shadow:
+        0 12px 32px rgba(0, 0, 0, 0.28),
+        0 0 0 1px rgba(255, 255, 255, 0.05);
+}
+
+.pdf-preview-page .textLayer {
+    position: absolute;
+    text-align: initial;
+    inset: 0;
+    overflow: clip;
+    opacity: 1;
+    line-height: 1;
+    text-size-adjust: none;
+    forced-color-adjust: none;
+    transform-origin: 0 0;
+    caret-color: CanvasText;
+    z-index: 1;
+    user-select: text;
+    -webkit-user-select: text;
+}
+
+.pdf-preview-page .textLayer:is(.highlighting) {
+    touch-action: none;
+}
+
+.pdf-preview-page .textLayer :is(span, br) {
+    color: transparent;
+    position: absolute;
+    white-space: pre;
+    cursor: text;
+    transform-origin: 0 0;
+}
+
+.pdf-preview-page .textLayer {
+    --min-font-size: 1;
+    --text-scale-factor:
+        calc(var(--total-scale-factor) * var(--min-font-size));
+    --min-font-size-inv: calc(1 / var(--min-font-size));
+}
+
+.pdf-preview-page .textLayer > :not(.markedContent),
+.pdf-preview-page .textLayer .markedContent span:not(.markedContent) {
+    z-index: 1;
+    --font-height: 0;
+    font-size: calc(var(--text-scale-factor) * var(--font-height));
+    --scale-x: 1;
+    --rotate: 0deg;
+    transform:
+        rotate(var(--rotate))
+        scaleX(var(--scale-x))
+        scale(var(--min-font-size-inv));
+}
+
+.pdf-preview-page .textLayer .markedContent {
+    display: contents;
+}
+
+.pdf-preview-page .textLayer span[role="img"] {
+    user-select: none;
+    cursor: default;
+}
+
 .empty-editor-state {
     width: 100%;
     height: 100%;