@salism3/dsh-latex-editor 0.0.0-stage → 1.0.0

package/client.js

@@ -0,0 +1,871 @@
+window.__ModuleLoader__.load({
+  id: '@local/dsh-latex-editor',
+  factory(require) {
+    const React = require('react');
+    const h = React.createElement;
+
+    const STYLE_ID = 'dsh-latex-editor-styles';
+
+    function injectStyles() {
+      if (typeof document === 'undefined') return;
+      if (document.getElementById(STYLE_ID)) return;
+
+      const style = document.createElement('style');
+      style.id = STYLE_ID;
+      style.dataset.plugin = '@local/dsh-latex-editor';
+      style.textContent = `
+        /* ==========================================================
+           1. LATEX STUDIO SPLIT PANE STYLES
+           ========================================================== */
+        .latex-editor-container {
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+          width: 100%;
+          background: var(--dsw-alias-bg-base, #181825);
+          color: var(--dsw-alias-text-primary, #cdd6f4);
+          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+          overflow: hidden;
+          box-sizing: border-box;
+          border-left: 1px solid var(--dsw-alias-border-l2, rgba(255, 255, 255, 0.12));
+        }
+
+        .latex-editor-header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 8px 12px;
+          gap: 8px;
+          background: var(--dsw-alias-bg-elevated, #1e1e2e);
+          border-bottom: 1px solid var(--dsw-alias-border-l2, rgba(255, 255, 255, 0.1));
+          flex-shrink: 0;
+          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+        }
+
+        .latex-header-left {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          min-width: 0;
+        }
+
+        .latex-brand-icon {
+          width: 22px;
+          height: 22px;
+          flex-shrink: 0;
+        }
+
+        .latex-header-title {
+          font-size: 13px;
+          font-weight: 700;
+          letter-spacing: 0.2px;
+          color: var(--dsw-alias-text-primary, #cdd6f4);
+          white-space: nowrap;
+        }
+
+        .latex-entry-chip {
+          font-size: 11px;
+          font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
+          background: rgba(99, 102, 241, 0.18);
+          color: #a5b4fc;
+          padding: 2px 6px;
+          border-radius: 4px;
+          border: 1px solid rgba(99, 102, 241, 0.3);
+          white-space: nowrap;
+        }
+
+        .latex-badge {
+          display: inline-flex;
+          align-items: center;
+          gap: 4px;
+          font-size: 11px;
+          font-weight: 600;
+          padding: 2px 8px;
+          border-radius: 12px;
+          white-space: nowrap;
+        }
+
+        .latex-badge-success {
+          background: rgba(16, 185, 129, 0.15);
+          color: #34d399;
+          border: 1px solid rgba(16, 185, 129, 0.35);
+        }
+
+        .latex-badge-warning {
+          background: rgba(245, 158, 11, 0.15);
+          color: #fbbf24;
+          border: 1px solid rgba(245, 158, 11, 0.35);
+        }
+
+        .latex-badge-error {
+          background: rgba(239, 68, 68, 0.15);
+          color: #f87171;
+          border: 1px solid rgba(239, 68, 68, 0.35);
+        }
+
+        .latex-badge-compiling {
+          background: rgba(99, 102, 241, 0.2);
+          color: #818cf8;
+          border: 1px solid rgba(99, 102, 241, 0.4);
+          animation: pulseGlow 1.5s infinite;
+        }
+
+        .latex-badge-idle {
+          background: rgba(148, 163, 184, 0.12);
+          color: #94a3b8;
+          border: 1px solid rgba(148, 163, 184, 0.25);
+        }
+
+        @keyframes pulseGlow {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0.6; }
+        }
+
+        .latex-header-actions {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          flex-shrink: 0;
+        }
+
+        .latex-select-engine {
+          background: var(--dsw-alias-bg-surface, #252538);
+          color: var(--dsw-alias-text-primary, #cdd6f4);
+          border: 1px solid var(--dsw-alias-border-l1, rgba(255, 255, 255, 0.15));
+          border-radius: 6px;
+          padding: 4px 6px;
+          font-size: 11px;
+          font-weight: 500;
+          cursor: pointer;
+          outline: none;
+        }
+
+        .latex-select-engine:focus {
+          border-color: #6366f1;
+        }
+
+        .latex-btn-compile {
+          display: inline-flex;
+          align-items: center;
+          gap: 5px;
+          background: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%);
+          color: #ffffff;
+          border: none;
+          border-radius: 6px;
+          padding: 5px 12px;
+          font-size: 12px;
+          font-weight: 600;
+          cursor: pointer;
+          transition: all 0.2s ease;
+          box-shadow: 0 2px 6px rgba(79, 70, 229, 0.35);
+          outline: none;
+        }
+
+        .latex-btn-compile:hover:not(:disabled) {
+          transform: translateY(-1px);
+          box-shadow: 0 4px 10px rgba(79, 70, 229, 0.5);
+          filter: brightness(1.08);
+        }
+
+        .latex-btn-compile:active:not(:disabled) {
+          transform: translateY(0);
+        }
+
+        .latex-btn-compile:disabled {
+          opacity: 0.65;
+          cursor: not-allowed;
+          filter: grayscale(0.2);
+        }
+
+        .latex-btn-icon {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          gap: 5px;
+          background: var(--dsw-alias-bg-surface, #252538);
+          color: var(--dsw-alias-text-primary, #cdd6f4);
+          border: 1px solid var(--dsw-alias-border-l1, rgba(255, 255, 255, 0.15));
+          border-radius: 6px;
+          padding: 5px 12px;
+          font-size: 12px;
+          font-weight: 500;
+          cursor: pointer;
+          transition: all 0.15s ease;
+        }
+
+        .latex-btn-icon:hover {
+          background: rgba(255, 255, 255, 0.08);
+          border-color: rgba(255, 255, 255, 0.25);
+        }
+
+        .latex-log-drawer {
+          background: #0f172a;
+          color: #e2e8f0;
+          border-bottom: 1px solid #334155;
+          max-height: 180px;
+          overflow-y: auto;
+          padding: 10px 14px;
+          font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
+          font-size: 11px;
+          line-height: 1.5;
+          white-space: pre-wrap;
+          box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3);
+        }
+
+        .latex-log-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          font-weight: 600;
+          margin-bottom: 6px;
+          color: #94a3b8;
+          border-bottom: 1px dashed #334155;
+          padding-bottom: 4px;
+        }
+
+        .latex-preview-body {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          position: relative;
+          min-height: 0;
+          background: #525659;
+        }
+
+        .latex-scroll {
+          flex: 1;
+          min-height: 0;
+          overflow-y: auto;
+          overflow-x: auto;
+          padding: 14px 14px 22px;
+          background: #525659;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 14px;
+          scrollbar-width: thin;
+        }
+
+        .latex-scroll::-webkit-scrollbar {
+          width: 10px;
+        }
+
+        .latex-scroll::-webkit-scrollbar-thumb {
+          background: rgba(255, 255, 255, 0.28);
+          border-radius: 6px;
+        }
+
+        .latex-page-wrap {
+          width: 100%;
+          max-width: 1100px;
+          background: #ffffff;
+          box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
+          flex: 0 0 auto;
+          position: relative;
+        }
+
+        .latex-page-img {
+          display: block;
+          width: 100%;
+          height: 100%;
+          user-select: none;
+          -webkit-user-drag: none;
+        }
+
+        .latex-page-indicator {
+          position: absolute;
+          bottom: 10px;
+          left: 50%;
+          transform: translateX(-50%);
+          background: rgba(15, 23, 42, 0.85);
+          color: #e2e8f0;
+          border: 1px solid rgba(148, 163, 184, 0.35);
+          border-radius: 999px;
+          padding: 3px 12px;
+          font-size: 11px;
+          pointer-events: none;
+          z-index: 2;
+        }
+
+        .latex-empty-state {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          flex: 1;
+          padding: 40px 24px;
+          text-align: center;
+          background: var(--dsw-alias-bg-base, #181825);
+          color: var(--dsw-alias-text-secondary, #a6adc8);
+        }
+
+        .latex-empty-icon {
+          width: 56px;
+          height: 56px;
+          margin-bottom: 16px;
+          opacity: 0.85;
+        }
+
+        .latex-empty-title {
+          font-size: 16px;
+          font-weight: 700;
+          color: var(--dsw-alias-text-primary, #cdd6f4);
+          margin-bottom: 8px;
+        }
+
+        .latex-empty-desc {
+          font-size: 13px;
+          line-height: 1.5;
+          max-width: 380px;
+          margin-bottom: 20px;
+        }
+
+        .latex-empty-code {
+          background: rgba(99, 102, 241, 0.12);
+          color: #818cf8;
+          padding: 2px 5px;
+          border-radius: 4px;
+          font-family: monospace;
+        }
+
+        .latex-footer-bar {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 4px 12px;
+          background: var(--dsw-alias-bg-elevated, #1e1e2e);
+          border-top: 1px solid var(--dsw-alias-border-l3, rgba(255, 255, 255, 0.08));
+          font-size: 10.5px;
+          color: var(--dsw-alias-text-tertiary, #6c7086);
+          flex-shrink: 0;
+        }
+
+        .latex-spinner {
+          display: inline-block;
+          width: 12px;
+          height: 12px;
+          border: 2px solid rgba(255, 255, 255, 0.3);
+          border-radius: 50%;
+          border-top-color: #ffffff;
+          animation: spin 0.8s linear infinite;
+        }
+
+        @keyframes spin {
+          to { transform: rotate(360deg); }
+        }
+
+        /* ==========================================================
+           2. PEMBERSIHAN FITUR NON-ESSENTIAL
+           (Hanya sisakan plugin, workspace, chat, session; sisanya hapus)
+           ========================================================== */
+        /* Sembunyikan kontrol Plan di Chat Composer */
+        button[aria-label*="plan" i],
+        button[aria-label*="rencana" i],
+        [data-slot-id*="conversation.input.plan"],
+        [class*="planButton"] {
+          display: none !important;
+        }
+
+        /* Sembunyikan kontrol Goal di Chat Composer & Header */
+        button[aria-label*="goal" i],
+        button[aria-label*="target" i],
+        [data-slot-id*="goal"],
+        [class*="goalBadge"],
+        [class*="goalButton"] {
+          display: none !important;
+        }
+
+        /* Sembunyikan kontrol Skill di Chat Composer & Sidebar */
+        button[aria-label*="skill" i],
+        button[aria-label*="keahlian" i],
+        [data-slot-id*="skill"],
+        [data-panel-id*="skill"],
+        [class*="skillButton"] {
+          display: none !important;
+        }
+
+        /* Sembunyikan kontrol Schedule / Reminder */
+        button[aria-label*="schedule" i],
+        button[aria-label*="jadwal" i],
+        button[aria-label*="pengingat" i],
+        [data-slot-id*="schedule"],
+        [data-panel-id*="schedule"] {
+          display: none !important;
+        }
+
+        /* Sembunyikan Workflow / Terminal / Browser tambahan */
+        button[aria-label*="workflow" i],
+        [data-slot-id*="workflow"],
+        [data-panel-id*="workflow"],
+        [data-panel-id*="browser"],
+        [data-panel-id*="terminal"] {
+          display: none !important;
+        }
+
+        /* Workspace/proyek tetap normal: pemilih folder dan tombol tambah
+           workspace TIDAK disembunyikan, agar alur tambah workspace berfungsi. */
+
+        /* Dialog pemilih folder tidak dipakai: tambah workspace langsung
+           membuat folder baru tanpa popup. */
+        [data-slot-id="sidebar.workspaces.directoryFlow"] {
+          display: none !important;
+        }
+
+        /* File Explorer dihilangkan (diganti panel LaTeX di kolom kanan). */
+        button[aria-label*="file explorer" i],
+        button[title*="file explorer" i],
+        button[aria-label*="penjelajah berkas" i],
+        button[aria-label*="explorer" i],
+        [data-tab-kind="files"] {
+          display: none !important;
+        }
+
+        /* Menu/pengaturan Plugin disembunyikan (mode editor LaTeX). */
+        [data-slot-id*="plugins."],
+        [data-slot-id*="plugin-manager"],
+        button[aria-label*="plugin" i],
+        a[href*="plugin" i] {
+          display: none !important;
+        }
+
+        /* Tombol "Open in App" (File Explorer bawaan, VS Code, Git Bash) di header sesi */
+        [data-slot-id*="open-in-app"],
+        button[aria-label*="open in" i],
+        button[title*="open in" i],
+        button[aria-label*="buka di" i],
+        button[title*="buka di" i],
+        [class*="openInApp"],
+        [class*="open-in-app"] {
+          display: none !important;
+        }
+
+        /* Peringatan login / modal autentikasi DeepSeek & launcher akun */
+        [data-slot-id*="desktop-onboarding"],
+        [data-slot-id*="sign-in"],
+        [data-slot-id*="settings.launcher"],
+        [data-slot-id*="settings.account"],
+        [data-slot-id*="quota-notice"],
+        [class*="onboardingModal"],
+        [class*="accountLauncher"],
+        [class*="signInPrompt"],
+        [class*="loginNotice"] {
+          display: none !important;
+        }
+
+        /* Pastikan track rightbar memiliki lebar yang pas untuk editor 50/50 */
+        [data-rightbar-col] {
+          min-width: 320px;
+        }
+      `;
+      document.head.appendChild(style);
+    }
+
+    const SCROLL_STORE_KEY = 'dsh-latex-preview-scroll';
+
+    function readStoredRatio() {
+      try {
+        const value = Number.parseFloat(window.sessionStorage.getItem(SCROLL_STORE_KEY) || '0');
+        if (!Number.isFinite(value)) return 0;
+        return Math.min(1, Math.max(0, value));
+      } catch (e) {
+        return 0;
+      }
+    }
+
+    function storeRatio(ratio) {
+      try {
+        window.sessionStorage.setItem(SCROLL_STORE_KEY, String(ratio));
+      } catch (e) {
+        // ignore storage restrictions
+      }
+    }
+
+    // Workspace aktif = workspace milik sesi yang sedang ditampilkan di kolom utama.
+    function useActiveWorkspacePath(props) {
+      const useSessions = props && props.useSessions;
+      if (typeof useSessions !== 'function') return undefined;
+      try {
+        return useSessions((sessions) => {
+          const byId = sessions && sessions.byId;
+          if (!byId) return undefined;
+          for (const session of Object.values(byId)) {
+            if (!session || !session.cwd) continue;
+            if ((session.retainedBy && (session.retainedBy.mainView ?? 0)) > 0) return session.cwd;
+          }
+          return undefined;
+        });
+      } catch (error) {
+        return undefined;
+      }
+    }
+
+    function LatexPdfPreviewPane(props) {
+      const [compiling, setCompiling] = React.useState(false);
+      const [engine, setEngine] = React.useState('xelatex');
+      const [status, setStatus] = React.useState(null);
+      const [showLog, setShowLog] = React.useState(false);
+      const [lastError, setLastError] = React.useState(null);
+      const [currentPage, setCurrentPage] = React.useState(1);
+
+      const scrollRef = React.useRef(null);
+      const ratioRef = React.useRef(readStoredRatio());
+      const activeWorkspace = useActiveWorkspacePath(props);
+
+      const withWorkspace = React.useCallback(
+        (path, separator = '?') => (activeWorkspace ? `${path}${separator}ws=${encodeURIComponent(activeWorkspace)}` : path),
+        [activeWorkspace]
+      );
+
+      const fetchStatus = React.useCallback(async () => {
+        try {
+          const res = await fetch(withWorkspace('/api/latex/status'));
+          if (res.ok) {
+            const data = await res.json();
+            setStatus(data);
+            if (data.lastSuccess === false && data.lastLog) {
+              setLastError(data.lastLog);
+            }
+          }
+        } catch (e) {
+          // ignore network glitch
+        }
+      }, [withWorkspace]);
+
+      const doCompile = React.useCallback(
+        async (chosenEngine = engine) => {
+          setCompiling(true);
+          setLastError(null);
+          try {
+            const res = await fetch('/api/latex/compile', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ engine: chosenEngine, ws: activeWorkspace }),
+            });
+            const data = await res.json();
+            if (data.ok) {
+              setLastError(null);
+            } else {
+              setLastError(data.log || 'Kompilasi gagal. Periksa sintaksis main.tex.');
+              setShowLog(true);
+            }
+          } catch (err) {
+            setLastError(`Kompilasi gagal: ${err.message}`);
+            setShowLog(true);
+          } finally {
+            setCompiling(false);
+            fetchStatus();
+          }
+        },
+        [engine, fetchStatus, activeWorkspace]
+      );
+
+      const createStarterTemplate = React.useCallback(async () => {
+        try {
+          await fetch(withWorkspace('/api/latex/init'), {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ ws: activeWorkspace }),
+          });
+          await doCompile(engine);
+        } catch (err) {
+          alert(`Gagal membuat template: ${err.message}`);
+        }
+      }, [doCompile, engine, withWorkspace, activeWorkspace]);
+
+      // Polling berkala untuk mendeteksi perubahan main.tex
+      React.useEffect(() => {
+        fetchStatus();
+        const timer = setInterval(fetchStatus, 3000);
+        return () => clearInterval(timer);
+      }, [fetchStatus]);
+
+      const pageCount = status?.pageCount || 0;
+      const pdfMtime = Math.round(status?.pdfMtime || 0);
+      const pageAspect = `${status?.widthPt || 595.28} / ${status?.heightPt || 841.89}`;
+      const hasPdf = Boolean(status?.mainPdfExists && pageCount > 0);
+      const workspaceLabel = (() => {
+        const full = status?.workspace || activeWorkspace || '';
+        if (!full) return '';
+        const parts = String(full).split(/[\\/]/).filter(Boolean);
+        return parts.length > 0 ? parts[parts.length - 1] : '';
+      })();
+
+      const handleScroll = React.useCallback(() => {
+        const el = scrollRef.current;
+        if (!el) return;
+
+        const max = el.scrollHeight - el.clientHeight;
+        const ratio = max > 0 ? el.scrollTop / max : 0;
+        ratioRef.current = ratio;
+        storeRatio(ratio);
+
+        const wraps = el.querySelectorAll('.latex-page-wrap');
+        if (wraps.length > 0) {
+          const containerTop = el.getBoundingClientRect().top;
+          let visible = 1;
+          for (let i = 0; i < wraps.length; i += 1) {
+            const rect = wraps[i].getBoundingClientRect();
+            if (rect.top - containerTop <= 4) visible = i + 1;
+          }
+          setCurrentPage((prev) => (prev === visible ? prev : visible));
+        }
+      }, []);
+
+      // Pertahankan posisi baca: pulihkan rasio scroll setiap dokumen berganti
+      // (setelah compile, setelah refresh manual, maupun saat panel dipasang ulang).
+      React.useLayoutEffect(() => {
+        const el = scrollRef.current;
+        if (!el || !hasPdf) return;
+
+        const applyRatio = () => {
+          const max = el.scrollHeight - el.clientHeight;
+          if (max <= 0) return false;
+          el.scrollTop = Math.round(ratioRef.current * max);
+          return true;
+        };
+
+        applyRatio();
+
+        // Ulangi sekali setelah gambar selesai dimuat, jaga-jaga bila tinggi
+        // halaman belum final saat efek pertama berjalan.
+        const raf = window.requestAnimationFrame(applyRatio);
+        return () => window.cancelAnimationFrame(raf);
+      }, [hasPdf, pageCount, pdfMtime, activeWorkspace]);
+
+      return h('div', { className: 'latex-editor-container' }, [
+        // 1. Header Toolbar (Hanya compile, log, dan refresh)
+        h('div', { className: 'latex-editor-header', key: 'header' }, [
+          // Compile Button
+          h(
+            'button',
+            {
+              className: 'latex-btn-compile',
+              onClick: () => doCompile(engine),
+              disabled: compiling,
+              title: 'Kompilasi berkas main.tex menjadi PDF',
+              key: 'btn-compile',
+            },
+            compiling
+              ? [h('span', { className: 'latex-spinner', key: 'spin' }), ' Mengompilasi...']
+              : ['▶ Compile']
+          ),
+
+          // Log Button
+          h(
+            'button',
+            {
+              className: 'latex-btn-icon',
+              onClick: () => setShowLog((prev) => !prev),
+              title: 'Tampilkan/Sembunyikan Log Kompilasi',
+              key: 'btn-log',
+            },
+            showLog ? '✕ Tutup Log' : '📋 Log'
+          ),
+
+          // Refresh Button (status saja; posisi baca tidak di-reset)
+          h(
+            'button',
+            {
+              className: 'latex-btn-icon',
+              onClick: () => fetchStatus(),
+              title: 'Muat ulang pratinjau tanpa mereset posisi halaman',
+              key: 'btn-refresh',
+            },
+            '🔄 Refresh'
+          ),
+        ]),
+
+        // 2. Log Drawer (jika terbuka atau kompilasi gagal)
+        showLog || (lastError && compiling === false)
+          ? h('div', { className: 'latex-log-drawer', key: 'log-drawer' }, [
+              h('div', { className: 'latex-log-header' }, [
+                h('span', null, '📋 Log Kompilasi LaTeX (Terakhir)'),
+                h(
+                  'button',
+                  {
+                    className: 'latex-btn-icon',
+                    style: { padding: '2px 6px', fontSize: '10px' },
+                    onClick: () => setShowLog(false),
+                  },
+                  'Tutup ✕'
+                ),
+              ]),
+              h('div', null, lastError || status?.lastLog || 'Belum ada log kompilasi.'),
+            ])
+          : null,
+
+        // 3. Area Pratinjau PDF
+        h(
+          'div',
+          { className: 'latex-preview-body', key: 'preview-body' },
+          hasPdf
+            ? [
+                h(
+                  'div',
+                  {
+                    className: 'latex-scroll',
+                    key: 'scroll',
+                    ref: scrollRef,
+                    onScroll: handleScroll,
+                  },
+                  Array.from({ length: pageCount }, (_, index) =>
+                    h(
+                      'div',
+                      {
+                        className: 'latex-page-wrap',
+                        key: `page-${activeWorkspace || 'default'}-${pdfMtime}-${index + 1}`,
+                        style: { aspectRatio: pageAspect },
+                      },
+                      h('img', {
+                        className: 'latex-page-img',
+                        src: withWorkspace(`/api/latex/page?n=${index + 1}&t=${pdfMtime}`, '&'),
+                        alt: `Halaman ${index + 1}`,
+                        loading: index < 3 ? 'eager' : 'lazy',
+                        draggable: false,
+                      })
+                    )
+                  )
+                ),
+                h(
+                  'div',
+                  { className: 'latex-page-indicator', key: 'page-indicator' },
+                  `Hal ${Math.min(currentPage, pageCount)} / ${pageCount}`
+                ),
+              ]
+            : h('div', { className: 'latex-empty-state' }, [
+                h(
+                  'svg',
+                  {
+                    className: 'latex-empty-icon',
+                    viewBox: '0 0 24 24',
+                    fill: 'none',
+                    stroke: '#6366f1',
+                    strokeWidth: '1.5',
+                    strokeLinecap: 'round',
+                    strokeLinejoin: 'round',
+                  },
+                  [
+                    h('path', { d: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z', key: 'e1' }),
+                    h('polyline', { points: '14 2 14 8 20 8', key: 'e2' }),
+                    h('circle', { cx: '12', cy: '14', r: '3', key: 'e3' }),
+                  ]
+                ),
+                h('div', { className: 'latex-empty-title' }, 'Belum Ada Hasil Kompilasi main.pdf'),
+                h(
+                  'div',
+                  { className: 'latex-empty-desc' },
+                  h(React.Fragment, null, [
+                    'Entry point dokumen adalah ',
+                    h('span', { className: 'latex-empty-code' }, 'main.tex'),
+                    '. Minta AI di kolom chat sebelah kiri untuk menulis dokumen, atau klik tombol di bawah untuk membuat template awal.',
+                  ])
+                ),
+                h(
+                  'button',
+                  {
+                    className: 'latex-btn-compile',
+                    style: { padding: '8px 18px', fontSize: '13px' },
+                    onClick: createStarterTemplate,
+                    disabled: compiling,
+                  },
+                  compiling ? 'Membuat & Mengompilasi...' : '📄 Buat Template main.tex & Compile'
+                ),
+              ])
+        ),
+
+        // 4. Footer Bar
+        h('div', { className: 'latex-footer-bar', key: 'footer' }, [
+          h(
+            'span',
+            null,
+            status?.lastCompileTime
+              ? `Kompilasi terakhir: ${new Date(status.lastCompileTime).toLocaleTimeString()} (${engine})`
+              : `Engine: ${engine} • Entry: main.tex`
+          ),
+          h('span', null, workspaceLabel ? `Proyek: ${workspaceLabel}` : 'DeepSeek Harness LaTeX Editor AI'),
+        ]),
+      ]);
+    }
+
+    return {
+      inject: ['slots', 'layout'],
+      apply(ctx) {
+        // 1. Suntikkan stylesheet kustom untuk layout split & pembersihan fitur non-essential
+        injectStyles();
+
+        // 2. Pastikan Rightbar selalu terbuka dengan track terpasang (Split Screen)
+        if (ctx.layout && typeof ctx.layout.openRightbar === 'function') {
+          const ensureSplit = () => {
+            try {
+              ctx.layout.openRightbar(true, false);
+            } catch (e) {}
+          };
+
+          ensureSplit();
+
+          // Pertahankan split screen aktif saat terjadi perpindahan view atau session
+          const interval = setInterval(ensureSplit, 1500);
+          ctx.effect(() => () => clearInterval(interval));
+        }
+
+        // 3. Daftarkan panel pratinjau PDF ke dalam slot 'rightbar' dengan prioritas tertinggi (prioritas angka terendah menang)
+        if (ctx.slots && typeof ctx.slots.inject === 'function') {
+          ctx.slots.inject('root', () =>
+            ctx.slots.register(
+              {
+                name: 'rightbar',
+                priority: -100,
+              },
+              LatexPdfPreviewPane
+            )
+          );
+        }
+
+        // 4. Tambah workspace: sekali klik langsung membuat workspace + folder,
+        //    tanpa membuka dialog pemilih folder.
+        if (typeof document !== 'undefined') {
+          ctx.effect(() => {
+            let busy = false;
+            const ADD_PATTERN = /(add workspace|tambah ruang kerja|add project|tambah proyek|workspace baru|proyek baru)/i;
+
+            const onClick = (event) => {
+              const target = event.target;
+              if (!target || typeof target.closest !== 'function') return;
+
+              const control = target.closest('button, [role="menuitem"], [role="option"], a, [role="button"]');
+              if (!control) return;
+              if (control.closest('[data-slot-id="sidebar.workspaces.directoryFlow"]')) return;
+
+              const label = `${control.getAttribute('aria-label') || ''} ${control.getAttribute('title') || ''} ${control.textContent || ''}`;
+              if (!ADD_PATTERN.test(label)) return;
+
+              event.preventDefault();
+              event.stopPropagation();
+              event.stopImmediatePropagation();
+
+              if (busy) return;
+              busy = true;
+
+              fetch('/api/latex/workspace/new', { method: 'POST' })
+                .then((response) => response.json())
+                .then((data) => {
+                  if (!data || data.ok !== true) {
+                    throw new Error((data && data.error) || 'gagal membuat workspace');
+                  }
+                })
+                .catch((error) => {
+                  console.warn('[latex-editor] gagal membuat workspace:', error);
+                })
+                .finally(() => {
+                  busy = false;
+                });
+            };
+
+            document.addEventListener('click', onClick, true);
+            return () => document.removeEventListener('click', onClick, true);
+          });
+        }
+      },
+    };
+  },
+});