@catandbox/schrodinger-web-adapter 0.1.26 → 0.1.28

package/dist/client/ticket-list.js

@@ -1,5 +1,169 @@
 import { renderStatusBadge } from "./status-badge";
 import { setInnerHtml } from "./dom-utils";
+function loadThree() {
+    return new Promise((resolve, reject) => {
+        if (typeof THREE !== "undefined") {
+            resolve();
+            return;
+        }
+        const s = document.createElement("script");
+        s.src = "https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js";
+        s.onload = () => resolve();
+        s.onerror = reject;
+        document.head.appendChild(s);
+    });
+}
+function initHydrogenLogo(el) {
+    // Math helpers
+    function factorial(n) {
+        let r = 1;
+        for (let i = 2; i <= n; i++)
+            r *= i;
+        return r;
+    }
+    function assocLaguerre(p, q, x) {
+        if (p === 0)
+            return 1;
+        if (p === 1)
+            return 1 + q - x;
+        let lm2 = 1, lm1 = 1 + q - x, val = 0;
+        for (let k = 2; k <= p; k++) {
+            val = ((2 * k - 1 + q - x) * lm1 - (k - 1 + q) * lm2) / k;
+            lm2 = lm1;
+            lm1 = val;
+        }
+        return val;
+    }
+    function assocLegendre(l, m, x) {
+        let pmm = 1.0;
+        if (m > 0) {
+            const s = Math.sqrt((1 - x) * (1 + x));
+            let f = 1;
+            for (let i = 1; i <= m; i++) {
+                pmm *= -f * s;
+                f += 2;
+            }
+        }
+        if (l === m)
+            return pmm;
+        let pmmp1 = x * (2 * m + 1) * pmm;
+        if (l === m + 1)
+            return pmmp1;
+        let pll = 0;
+        for (let ll = m + 2; ll <= l; ll++) {
+            pll = (x * (2 * ll - 1) * pmmp1 - (ll + m - 1) * pmm) / (ll - m);
+            pmm = pmmp1;
+            pmmp1 = pll;
+        }
+        return pll;
+    }
+    function sphericalHarmonicReal(l, m, theta, phi) {
+        const absM = Math.abs(m);
+        const norm = Math.sqrt(((2 * l + 1) / (4 * Math.PI)) * (factorial(l - absM) / factorial(l + absM)));
+        const plm = assocLegendre(l, absM, Math.cos(theta));
+        if (m > 0)
+            return norm * plm * Math.cos(m * phi) * Math.SQRT2;
+        if (m < 0)
+            return norm * plm * Math.sin(absM * phi) * Math.SQRT2;
+        return norm * plm;
+    }
+    function radialWaveFunction(n, l, r) {
+        const rho = (2 * r) / n;
+        const norm = Math.sqrt(Math.pow(2 / n, 3) * factorial(n - l - 1) / (2 * n * Math.pow(factorial(n + l), 3)));
+        return norm * Math.exp(-rho / 2) * Math.pow(rho, l) * assocLaguerre(n - l - 1, 2 * l + 1, rho);
+    }
+    function psiProb(n, l, m, r, theta, phi) {
+        const R = radialWaveFunction(n, l, r);
+        const Y = sphericalHarmonicReal(l, m, theta, phi);
+        return R * R * Y * Y;
+    }
+    // Generate points via rejection sampling
+    const n = 4, l = 3, m = 1, maxR = 45, numPoints = 80000;
+    let maxProb = 0;
+    for (let i = 0; i < 5000; i++) {
+        const r = Math.random() * maxR;
+        const theta = Math.acos(2 * Math.random() - 1);
+        const phi = Math.random() * 2 * Math.PI;
+        const p = psiProb(n, l, m, r, theta, phi) * r * r;
+        if (p > maxProb)
+            maxProb = p;
+    }
+    const pts = [], cols = [], szs = [];
+    let accepted = 0;
+    const sc = 0.7;
+    for (let i = 0; i < numPoints * 30 && accepted < numPoints; i++) {
+        const r = Math.random() * maxR;
+        const theta = Math.acos(2 * Math.random() - 1);
+        const phi = Math.random() * 2 * Math.PI;
+        const prob = psiProb(n, l, m, r, theta, phi) * r * r;
+        const thr = prob / maxProb;
+        if (Math.random() < thr) {
+            pts.push(r * Math.sin(theta) * Math.cos(phi) * sc, r * Math.sin(theta) * Math.sin(phi) * sc, r * Math.cos(theta) * sc);
+            const t = r / maxR;
+            cols.push(0.3 + 0.6 * t, 0.5 * (1 - t) + 0.2 * t, 0.95 - 0.2 * t);
+            szs.push(0.08 + 0.15 * thr);
+            accepted++;
+        }
+    }
+    const scene = new THREE.Scene();
+    const camera = new THREE.PerspectiveCamera(50, 1, 0.1, 1000);
+    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+    renderer.setSize(80, 80);
+    renderer.setClearColor(0x08090d, 1);
+    el.appendChild(renderer.domElement);
+    const geometry = new THREE.BufferGeometry();
+    geometry.setAttribute("position", new THREE.Float32BufferAttribute(pts, 3));
+    geometry.setAttribute("color", new THREE.Float32BufferAttribute(cols, 3));
+    geometry.setAttribute("size", new THREE.Float32BufferAttribute(szs, 1));
+    const material = new THREE.ShaderMaterial({
+        vertexShader: `
+      attribute float size;
+      varying vec3 vColor;
+      void main() {
+        vColor = color;
+        vec4 mv = modelViewMatrix * vec4(position, 1.0);
+        gl_PointSize = size * (200.0 / -mv.z);
+        gl_Position = projectionMatrix * mv;
+      }
+    `,
+        fragmentShader: `
+      varying vec3 vColor;
+      void main() {
+        float d = length(gl_PointCoord - vec2(0.5));
+        if (d > 0.5) discard;
+        float a = smoothstep(0.5, 0.1, d) * 0.7;
+        gl_FragColor = vec4(vColor, a);
+      }
+    `,
+        vertexColors: true,
+        transparent: true,
+        depthWrite: false,
+        blending: THREE.AdditiveBlending,
+    });
+    scene.add(new THREE.Points(geometry, material));
+    const nucGeo = new THREE.SphereGeometry(0.25, 12, 12);
+    scene.add(new THREE.Mesh(nucGeo, new THREE.MeshBasicMaterial({ color: 0xffffff })));
+    let theta = 0;
+    const phi = 0.85, radius = 42;
+    function updateCam() {
+        camera.position.set(radius * Math.sin(phi) * Math.sin(theta), radius * Math.cos(phi), radius * Math.sin(phi) * Math.cos(theta));
+        camera.lookAt(0, 0, 0);
+    }
+    let rafId;
+    function animate() {
+        rafId = requestAnimationFrame(animate);
+        theta += 0.003;
+        updateCam();
+        renderer.render(scene, camera);
+    }
+    updateCam();
+    animate();
+    return () => {
+        cancelAnimationFrame(rafId);
+        renderer.dispose();
+    };
+}
 function formatDate(timestamp) {
     return new Date(timestamp * 1000).toLocaleDateString(undefined, {
         month: "short",
@@ -35,10 +199,11 @@ const ORDER_OPTIONS = [
     { value: "oldest", label: "Oldest first" }
 ];
 export async function renderTicketList(container, client, emitter) {
-    // Load tickets and categories in parallel
+    // Load tickets, categories and Three.js in parallel
     const [result, portalConfig] = await Promise.all([
         client.listTickets({}).catch(() => ({ items: [] })),
-        client.getPortalConfig().catch(() => ({ categories: [], aliases: [] }))
+        client.getPortalConfig().catch(() => ({ categories: [], aliases: [] })),
+        loadThree().catch(() => { })
     ]);
     const allTickets = result.items;
     const categories = portalConfig.categories;
@@ -57,10 +222,10 @@ export async function renderTicketList(container, client, emitter) {
       <s-box padding="large">
         <s-stack gap="large">
           <div style="display:flex; justify-content:space-between; align-items:center;">
-            <s-stack gap="extraTight">
-              <s-text variant="headingMd">Support Tickets</s-text>
-              <s-text variant="bodySm" tone="subdued">View and manage your support requests</s-text>
-            </s-stack>
+            <div style="display:flex; align-items:center; gap:12px;">
+              <div id="sch-logo-el" style="width:80px; height:80px; border-radius:8px; overflow:hidden; flex-shrink:0; background:#08090d;"></div>
+              <span style="font-size:18px; font-weight:700; color:#0f172a;">Schrödinger helpdesk by Cat and box</span>
+            </div>
             <s-button variant="primary" id="sch-new-ticket-btn">
               <span style="display:inline-flex; align-items:center; gap:4px;">
                 <svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor"><path d="M10 3a1 1 0 0 1 1 1v5h5a1 1 0 1 1 0 2h-5v5a1 1 0 1 1-2 0v-5H4a1 1 0 1 1 0-2h5V4a1 1 0 0 1 1-1z"/></svg>
@@ -96,6 +261,11 @@ export async function renderTicketList(container, client, emitter) {
     container
         .querySelector("#sch-new-ticket-btn")
         ?.addEventListener("click", () => emitter.emit("ticket:create", undefined));
+    // Init hydrogen orbital logo
+    const logoEl = container.querySelector("#sch-logo-el");
+    if (logoEl && typeof THREE !== "undefined") {
+        initHydrogenLogo(logoEl);
+    }
     function getSelectValue(id) {
         const el = container.querySelector(`#${id}`);
         return el?.value ?? "";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@catandbox/schrodinger-web-adapter",
-  "version": "0.1.26",
+  "version": "0.1.28",
   "private": false,
   "type": "module",
   "main": "./dist/index.js",