@pb33f/cowboy-components 0.7.18 → 0.8.0

package/dist/components/waiting-line/waiting-line.js

@@ -0,0 +1,424 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import waitingLineCss from './waiting-line.css.js';
+const vertexShader = `#version 300 es
+in vec2 position;
+void main() {
+    gl_Position = vec4(position, 0.0, 1.0);
+}`;
+const fragmentShader = `#version 300 es
+precision highp float;
+
+uniform float uTime;
+uniform vec2 uResolution;
+uniform vec3 uPrimaryColor;
+uniform vec3 uSecondaryColor;
+uniform float uLightMode;
+
+out vec4 fragColor;
+
+vec3 random3(vec3 c) {
+    float j = 4096.0*sin(dot(c,vec3(17.0, 59.4, 15.0)));
+    vec3 r;
+    r.z = fract(512.0*j);
+    j *= .125;
+    r.x = fract(512.0*j);
+    j *= .125;
+    r.y = fract(512.0*j);
+    return r-0.5;
+}
+
+const float F3 = 0.3333333;
+const float G3 = 0.1666667;
+
+float simplex3d(vec3 p) {
+    vec3 s = floor(p + dot(p, vec3(F3)));
+    vec3 x = p - s + dot(s, vec3(G3));
+    vec3 e = step(vec3(0.0), x - x.yzx);
+    vec3 i1 = e*(1.0 - e.zxy);
+    vec3 i2 = 1.0 - e.zxy*(1.0 - e);
+    vec3 x1 = x - i1 + G3;
+    vec3 x2 = x - i2 + 2.0*G3;
+    vec3 x3 = x - 1.0 + 3.0*G3;
+    vec4 w, d;
+    w.x = dot(x, x);
+    w.y = dot(x1, x1);
+    w.z = dot(x2, x2);
+    w.w = dot(x3, x3);
+    w = max(0.6 - w, 0.0);
+    d.x = dot(random3(s), x);
+    d.y = dot(random3(s + i1), x1);
+    d.z = dot(random3(s + i2), x2);
+    d.w = dot(random3(s + 1.0), x3);
+    w *= w;
+    w *= w;
+    d *= w;
+    return dot(d, vec4(52.0));
+}
+
+float noise(vec3 m) {
+    return 0.5333333*simplex3d(m)
+          +0.2666667*simplex3d(2.0*m)
+          +0.1333333*simplex3d(4.0*m)
+          +0.0666667*simplex3d(8.0*m);
+}
+
+// Hash functions for particle randomization (bounded input for precision)
+float hash(float n) {
+    n = mod(n, 1000.0);
+    return fract(sin(n) * 43758.5453123);
+}
+
+vec2 hash2(float n) {
+    n = mod(n, 1000.0);
+    return fract(sin(vec2(n, n + 1.0)) * vec2(43758.5453123, 22578.1459123));
+}
+
+// Get the Y position of the line at a given X coordinate
+float getLineY(float x, float time) {
+    float normalizedX = (x + 1.0) * 0.5;
+    vec2 p = vec2(normalizedX, 0.5);
+    vec3 p3 = vec3(p, time * 0.4);
+    float intensity = noise(vec3(p3 * 12.0 + 12.0));
+    float t = clamp((x * -x * 0.16) + 0.15, 0.0, 1.0);
+    return intensity * -t * 0.12;
+}
+
+// Render a spark streak using line segment SDF
+float renderSparkStreak(vec2 uv, vec2 particlePos, vec2 velocity, float age, float lifetime) {
+    vec2 streakDir = normalize(velocity + vec2(0.0, 0.001));
+    float speed = length(velocity);
+    float streakLength = speed * 0.15 + 0.02;
+
+    // Line segment SDF: point to segment distance
+    vec2 pa = uv - particlePos;
+    vec2 ba = -streakDir * streakLength;
+    float baDot = max(dot(ba, ba), 0.0001);
+    float h = clamp(dot(pa, ba) / baDot, 0.0, 1.0);
+    float dist = length(pa - ba * h);
+
+    float thickness = 0.015;
+    float glow = smoothstep(thickness * 3.0, 0.0, dist);
+
+    // Fade based on remaining lifetime (quadratic falloff)
+    float lifeFade = 1.0 - pow(age / lifetime, 2.0);
+    // Fade along the streak (brighter at head)
+    float headFade = 1.0 - h * 0.4;
+
+    return glow * lifeFade * headFade * 2.5;
+}
+
+// Spark particle constants
+const int NUM_PARTICLE_GROUPS = 6;
+const int PARTICLES_PER_GROUP = 4;
+const float CYCLE_DURATION = 2.0;
+const float GRAVITY = 0.8;
+
+void main() {
+    // Original line UV (with Y compression)
+    vec2 uv = gl_FragCoord.xy / uResolution.xy;
+    uv = uv * 2.0 - 1.0;
+    uv.y *= 0.12;
+
+    vec2 p = gl_FragCoord.xy / uResolution.x;
+    vec3 p3 = vec3(p, uTime * 0.4);
+
+    float intensity = noise(vec3(p3 * 12.0 + 12.0));
+
+    float t = clamp((uv.x * -uv.x * 0.16) + 0.15, 0.0, 1.0);
+    float y = abs(intensity * -t + uv.y);
+
+    float g = pow(y, 0.13);
+
+    // lineIntensity: 1.0 at line center, 0.0 away from line
+    float lineIntensity = 1.0 - clamp(g * 1.5, 0.0, 1.0);
+    lineIntensity = pow(lineIntensity, 0.9);
+
+    vec3 col;
+    if (uLightMode > 0.5) {
+        // Light mode: BLACK line on WHITE background
+        col = vec3(1.0 - lineIntensity);
+    } else {
+        // Dark mode: BLUE line on dark theme background
+        vec3 bgColor = vec3(0.051, 0.067, 0.090);  // #0d1117
+        vec3 lineColor = vec3(0.5, 0.85, 1.0);
+        col = mix(bgColor, lineColor, lineIntensity);
+    }
+
+    // Spark particle system (uses uncompressed coordinates)
+    vec2 sparkUV = gl_FragCoord.xy / uResolution.xy;
+    sparkUV = sparkUV * 2.0 - 1.0;
+    // Adjust aspect ratio for sparks
+    sparkUV.x *= uResolution.x / uResolution.y;
+
+    float sparkIntensity = 0.0;
+    float cycleTime = mod(uTime, CYCLE_DURATION);
+    float cycleIndex = floor(uTime / CYCLE_DURATION);
+
+    for (int g = 0; g < NUM_PARTICLE_GROUPS; g++) {
+        float spawnInterval = CYCLE_DURATION / float(NUM_PARTICLE_GROUPS);
+        float groupSpawnTime = float(g) * spawnInterval;
+        float timeSinceSpawn = cycleTime - groupSpawnTime;
+
+        // Handle wrap-around for particles from previous cycle still alive
+        if (timeSinceSpawn < 0.0) {
+            timeSinceSpawn += CYCLE_DURATION;
+        }
+
+        // Random lifetime for this group (0.4 - 1.2 seconds)
+        // Branchless: use previous cycle seed when particle wraps around
+        float prevCycleOffset = step(CYCLE_DURATION * 0.5, timeSinceSpawn) * -100.0;
+        float groupSeed = float(g) * 17.0 + (cycleIndex + prevCycleOffset) * 100.0;
+        float lifetime = 0.4 + hash(groupSeed) * 0.8;
+
+        if (timeSinceSpawn < lifetime && timeSinceSpawn >= 0.0) {
+            // Spawn position: random X along the visible line (-0.7 to 0.7)
+            float spawnX = (hash(groupSeed + 7.0) * 1.4 - 0.7);
+            float spawnTime = uTime - timeSinceSpawn;
+            float spawnY = getLineY(spawnX, spawnTime);
+
+            // Adjust spawnX for aspect ratio
+            float spawnXAspect = spawnX * uResolution.x / uResolution.y;
+
+            for (int i = 0; i < PARTICLES_PER_GROUP; i++) {
+                float particleSeed = groupSeed + float(i) * 31.0;
+
+                // Initial velocity: spread outward and upward (scaled up for visibility)
+                vec2 randVel = hash2(particleSeed + 13.0);
+                float vx = (randVel.x - 0.5) * 1.2;
+                float vy = 0.5 + randVel.y * 0.6;
+
+                // Calculate current position with gravity
+                float age = timeSinceSpawn;
+                float posX = spawnXAspect + vx * age;
+                float posY = spawnY + vy * age - 0.5 * GRAVITY * age * age;
+
+                // Current velocity (for streak direction)
+                vec2 currentVel = vec2(vx, vy - GRAVITY * age);
+
+                // Render the spark streak
+                sparkIntensity += renderSparkStreak(
+                    sparkUV,
+                    vec2(posX, posY),
+                    currentVel,
+                    age,
+                    lifetime
+                );
+            }
+        }
+    }
+
+    fragColor = vec4(col, 1.0);
+}`;
+let WaitingLine = class WaitingLine extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.height = 60;
+        this.webglSupported = true;
+        this.gl = null;
+        this.program = null;
+        this.animationId = null;
+        this.startTime = 0;
+        this.uniformLocations = {};
+        this.observer = null;
+        this.colors = {
+            primary: [0, 1, 1],
+            secondary: [1, 0.4, 0.7]
+        };
+        this.handleResize = () => {
+            this.resizeCanvas();
+        };
+        this.renderFrame = () => {
+            if (!this.gl || !this.program)
+                return;
+            const time = performance.now() / 1000 - this.startTime;
+            this.gl.clearColor(0, 0, 0, 0);
+            this.gl.clear(this.gl.COLOR_BUFFER_BIT);
+            this.gl.useProgram(this.program);
+            this.gl.uniform1f(this.uniformLocations.uTime, time);
+            this.gl.uniform2f(this.uniformLocations.uResolution, this.canvas.width, this.canvas.height);
+            this.gl.uniform3fv(this.uniformLocations.uPrimaryColor, this.colors.primary);
+            this.gl.uniform3fv(this.uniformLocations.uSecondaryColor, this.colors.secondary);
+            this.gl.uniform1f(this.uniformLocations.uLightMode, this.isLightMode() ? 1.0 : 0.0);
+            this.gl.drawArrays(this.gl.TRIANGLES, 0, 6);
+            this.animationId = requestAnimationFrame(this.renderFrame);
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.startTime = performance.now() / 1000;
+        this.observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    if (!this.gl) {
+                        this.initWebGL();
+                    }
+                    this.resizeCanvas();
+                    this.startAnimation();
+                }
+                else {
+                    this.stopAnimation();
+                }
+            });
+        });
+        this.observer.observe(this);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.observer?.disconnect();
+        this.stopAnimation();
+        this.cleanup();
+    }
+    firstUpdated(_changedProperties) {
+        super.firstUpdated(_changedProperties);
+        this.initWebGL();
+    }
+    initWebGL() {
+        if (!this.canvas)
+            return;
+        try {
+            this.gl = this.canvas.getContext('webgl2', { alpha: true, premultipliedAlpha: false });
+            if (!this.gl) {
+                this.webglSupported = false;
+                return;
+            }
+            this.gl.enable(this.gl.BLEND);
+            this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE_MINUS_SRC_ALPHA);
+            this.setupShader();
+            this.updateColorsFromCSS();
+            requestAnimationFrame(() => this.resizeCanvas());
+            window.addEventListener('resize', this.handleResize);
+        }
+        catch (e) {
+            this.webglSupported = false;
+        }
+    }
+    setupShader() {
+        if (!this.gl)
+            return;
+        const vert = this.compileShader(this.gl.VERTEX_SHADER, vertexShader);
+        const frag = this.compileShader(this.gl.FRAGMENT_SHADER, fragmentShader);
+        if (!vert || !frag)
+            return;
+        this.program = this.gl.createProgram();
+        this.gl.attachShader(this.program, vert);
+        this.gl.attachShader(this.program, frag);
+        this.gl.linkProgram(this.program);
+        if (!this.gl.getProgramParameter(this.program, this.gl.LINK_STATUS)) {
+            console.error('Shader link failed:', this.gl.getProgramInfoLog(this.program));
+            return;
+        }
+        const vertices = new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]);
+        const buffer = this.gl.createBuffer();
+        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, buffer);
+        this.gl.bufferData(this.gl.ARRAY_BUFFER, vertices, this.gl.STATIC_DRAW);
+        const posLoc = this.gl.getAttribLocation(this.program, 'position');
+        this.gl.enableVertexAttribArray(posLoc);
+        this.gl.vertexAttribPointer(posLoc, 2, this.gl.FLOAT, false, 0, 0);
+        this.gl.useProgram(this.program);
+        this.uniformLocations = {
+            uTime: this.gl.getUniformLocation(this.program, 'uTime'),
+            uResolution: this.gl.getUniformLocation(this.program, 'uResolution'),
+            uPrimaryColor: this.gl.getUniformLocation(this.program, 'uPrimaryColor'),
+            uSecondaryColor: this.gl.getUniformLocation(this.program, 'uSecondaryColor'),
+            uLightMode: this.gl.getUniformLocation(this.program, 'uLightMode')
+        };
+    }
+    compileShader(type, source) {
+        if (!this.gl)
+            return null;
+        const shader = this.gl.createShader(type);
+        this.gl.shaderSource(shader, source);
+        this.gl.compileShader(shader);
+        if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) {
+            console.error('Shader compile error:', this.gl.getShaderInfoLog(shader));
+            this.gl.deleteShader(shader);
+            return null;
+        }
+        return shader;
+    }
+    isLightMode() {
+        return document.documentElement.getAttribute('theme') === 'light';
+    }
+    updateColorsFromCSS() {
+        const styles = getComputedStyle(this);
+        this.colors.primary = this.parseColor(styles.getPropertyValue('--primary-color'));
+        this.colors.secondary = this.parseColor(styles.getPropertyValue('--secondary-color'));
+    }
+    parseColor(color) {
+        const trimmed = color.trim();
+        if (!trimmed)
+            return [0, 1, 1];
+        if (trimmed.startsWith('#')) {
+            let hex = trimmed.slice(1);
+            if (hex.length === 3)
+                hex = hex.split('').map(c => c + c).join('');
+            return [
+                parseInt(hex.slice(0, 2), 16) / 255,
+                parseInt(hex.slice(2, 4), 16) / 255,
+                parseInt(hex.slice(4, 6), 16) / 255
+            ];
+        }
+        const match = trimmed.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+        if (match) {
+            return [+match[1] / 255, +match[2] / 255, +match[3] / 255];
+        }
+        return [0, 1, 1];
+    }
+    resizeCanvas() {
+        if (!this.canvas || !this.gl)
+            return;
+        const rect = this.canvas.getBoundingClientRect();
+        const dpr = Math.min(window.devicePixelRatio || 1, 2);
+        this.canvas.width = rect.width * dpr;
+        this.canvas.height = rect.height * dpr;
+        this.gl.viewport(0, 0, this.canvas.width, this.canvas.height);
+    }
+    startAnimation() {
+        if (!this.animationId && this.isConnected && this.gl) {
+            this.renderFrame();
+        }
+    }
+    stopAnimation() {
+        if (this.animationId) {
+            cancelAnimationFrame(this.animationId);
+            this.animationId = null;
+        }
+    }
+    cleanup() {
+        this.stopAnimation();
+        window.removeEventListener('resize', this.handleResize);
+        if (this.gl && this.program) {
+            this.gl.deleteProgram(this.program);
+        }
+        this.gl = null;
+        this.program = null;
+    }
+    render() {
+        const style = `height: ${this.height}px;`;
+        if (!this.webglSupported) {
+            return html `<div class="fallback" style=${style}></div>`;
+        }
+        return html `<canvas style=${style}></canvas>`;
+    }
+};
+WaitingLine.styles = [waitingLineCss];
+__decorate([
+    property({ type: Number })
+], WaitingLine.prototype, "height", void 0);
+__decorate([
+    query('canvas')
+], WaitingLine.prototype, "canvas", void 0);
+__decorate([
+    state()
+], WaitingLine.prototype, "webglSupported", void 0);
+WaitingLine = __decorate([
+    customElement('pb33f-waiting-line')
+], WaitingLine);
+export { WaitingLine };

package/dist/components/workspaces/workspace-view.css.js

@@ -3,13 +3,34 @@ export default css `
     
     h2 {
         margin-top: 10px;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
     }
     
     .workspace-area {
         padding-left: 20px;
         padding-right: 20px;
+        height: calc(100vh - 125px);
+        overflow: hidden;
+        overflow-y: auto;
     }
-    
+
+
+    .workspace-area::-webkit-scrollbar {
+        width: 8px;
+    }
+
+    .workspace-area::-webkit-scrollbar-track {
+        background-color: black;
+    }
+
+    .workspace-area::-webkit-scrollbar-thumb {
+        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+        background: var(--secondary-color-lowalpha);
+        padding: var(--global-padding);
+    }
+
+
     p {
         font-size: 0.8rem;
     }
@@ -24,15 +45,11 @@ export default css `
         display:none;
     }
     
-    .active {
-        background-color: var(--primary-color-verylowalpha);
-        color: var(--font-color);
-    }
-    
-    .active sl-icon-button.delete-workspace::part(base) {
+    .workspace-row.active sl-icon-button.delete-workspace::part(base) {
         display: inline-block;
     }
-    .active sl-icon-button.edit-workspace::part(base) {
+    
+    .workspace-row.active sl-icon-button.edit-workspace::part(base) {
         display: inline-block;
     }
 
@@ -50,4 +67,68 @@ export default css `
         color: var(--secondary-color)
     }
 
+    /* Clean 4-column workspace grid */
+    .workspace-grid {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+    }
+
+    .workspace-row {
+        display: grid;
+        grid-template-columns: 20px auto 1fr auto;
+        gap: 8px;
+        align-items: start;
+        cursor: pointer;
+        margin: 2px 0;
+        padding: 4px 8px;
+        min-height: 25px;
+        border-radius: 0;
+        background-color: transparent;
+        transition: background-color 0.15s ease;
+    }
+
+    .col-github-icon {
+        width: 20px;
+        min-width: 20px;
+        color: var(--font-color);
+    }
+
+    .workspace-row.active {
+        background-color: var(--primary-color-verylowalpha);
+    }
+
+    .col-chevron {
+        font-weight: bold;
+    }
+
+    .col-name {
+        min-width: 0;
+        word-wrap: break-word;
+        overflow-wrap: break-word;
+        line-height: 1.4;
+        overflow: hidden;
+    }
+
+    .col-name strong,
+    .col-name a {
+        line-height: inherit;
+    }
+
+    .col-actions {
+        display: flex;
+        gap: 5px;
+    }
+
+    /* Prevent layout shift on workspace links */
+    .workspace-link {
+        text-decoration: none;
+        border-bottom: 1px solid transparent;
+    }
+
+    .workspace-link:hover {
+        text-decoration: none;
+        border-bottom: 1px solid currentColor;
+    }
+
 `;

package/dist/components/workspaces/workspace-view.d.ts

@@ -1,6 +1,8 @@
 import { TheDoctor } from "../the-doctor/the-doctor.js";
 import { WorkspaceController } from "../../controllers/workspace-controller.js";
 import { WalletController } from "../../controllers/wallet-controller.js";
+import { GitHubController } from "../../controllers/github-controller.js";
+import { GitHubWorkspaceView } from "../github/github-workspace-view.js";
 import { Workspace } from "../../model/workspace.js";
 import { Formable } from "../../model/formable.js";
 import { WorkspaceForm } from "./workspace-form.js";
@@ -13,12 +15,15 @@ export declare class WorkspacesView extends Formable {
     workspaces: Workspace[];
     wsController: WorkspaceController;
     walletController: WalletController;
+    githubController: GitHubController;
     workspaceForm: WorkspaceForm;
     destroyDialog: WorkspaceDestroyView;
-    constructor(doc: TheDoctor, wsController: WorkspaceController, walletController: WalletController);
+    githubView: GitHubWorkspaceView;
+    constructor(doc: TheDoctor, wsController: WorkspaceController, walletController: WalletController, githubController: GitHubController);
     private setupDestroyDialogEvents;
     private setupWorkspaceFormEvents;
     private setupWalletEvents;
+    firstUpdated(): Promise<void>;
     private handleDailyCreditRequest;
     private handleWorkspaceFormComplete;
     openCreateWorkspaceDialog(): void;
@@ -30,5 +35,7 @@ export declare class WorkspacesView extends Formable {
     private handleDestroyCancel;
     private handleDestroyConfirm;
     deleteWorkspaceError(error: PlatformError): void;
+    private handleWorkspaceHover;
+    private handleWorkspaceUnhover;
     render(): import("lit-html").TemplateResult<1>;
 }