project-iris 0.0.1

package/src/iris_bundle/frameworks/iris-core/vs-code-extension/src/webview/components/bolts/queue-item.ts

@@ -0,0 +1,306 @@
+/**
+ * QueueItem - Queued bolt item display with expandable stories.
+ */
+
+import { html, css } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { BaseElement } from '../shared/base-element.js';
+import type { StageData } from '../shared/stage-pipeline.js';
+
+/**
+ * Story data for queued bolt.
+ */
+export interface QueueStoryData {
+    id: string;
+    name: string;
+    status: 'complete' | 'active' | 'pending';
+}
+
+/**
+ * Queued bolt data.
+ */
+export interface QueuedBoltData {
+    id: string;
+    name: string;
+    type: string;
+    storiesCount: number;
+    isBlocked: boolean;
+    blockedBy: string[];
+    unblocksCount: number;
+    stages: StageData[];
+    stories: QueueStoryData[];
+}
+
+
+/**
+ * Queue item component.
+ *
+ * @fires start-bolt - When Start button is clicked
+ *
+ * @example
+ * ```html
+ * <queue-item .bolt=${bolt} priority="1"></queue-item>
+ * ```
+ */
+@customElement('queue-item')
+export class QueueItem extends BaseElement {
+    /**
+     * Queued bolt data.
+     */
+    @property({ type: Object })
+    bolt!: QueuedBoltData;
+
+    /**
+     * Queue priority (1-based).
+     */
+    @property({ type: Number })
+    priority = 1;
+
+    /**
+     * Whether the item is expanded to show stories.
+     */
+    @state()
+    private _expanded = false;
+
+    static styles = [
+        ...BaseElement.baseStyles,
+        css`
+            :host {
+                display: block;
+                border-radius: 8px;
+                background: var(--vscode-editor-background, #1e1e1e);
+                border-left: 4px solid #f97316;
+                overflow: hidden;
+            }
+
+            :host(:hover) {
+                background: var(--vscode-list-hoverBackground, #2a2d2e);
+            }
+
+            .header {
+                display: flex;
+                align-items: flex-start;
+                gap: 12px;
+                padding: 14px 16px;
+                cursor: pointer;
+            }
+
+            .priority {
+                width: 24px;
+                height: 24px;
+                border-radius: 4px;
+                background: var(--vscode-input-background, #3c3c3c);
+                color: var(--foreground, #cccccc);
+                font-size: 12px;
+                font-weight: 600;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                flex-shrink: 0;
+            }
+
+            .lock {
+                width: 24px;
+                height: 24px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 16px;
+                flex-shrink: 0;
+            }
+
+            .info {
+                flex: 1;
+                min-width: 0;
+            }
+
+            .name {
+                font-size: 14px;
+                font-weight: 600;
+                color: var(--foreground, #cccccc);
+                margin-bottom: 4px;
+                line-height: 1.3;
+            }
+
+            .expand-icon {
+                font-size: 10px;
+                color: var(--description-foreground, #858585);
+                margin-left: 6px;
+                transition: transform 0.15s;
+                display: inline-block;
+            }
+
+            .expand-icon.expanded {
+                transform: rotate(90deg);
+            }
+
+            .meta {
+                font-size: 12px;
+                color: var(--description-foreground, #858585);
+                line-height: 1.4;
+            }
+
+            .blocked-info {
+                font-size: 12px;
+                color: #f97316;
+                margin-top: 6px;
+                line-height: 1.4;
+            }
+
+            .actions {
+                flex-shrink: 0;
+                padding-top: 2px;
+            }
+
+            .start-btn {
+                padding: 8px 16px;
+                font-size: 12px;
+                font-weight: 600;
+                border-radius: 6px;
+                background: transparent;
+                color: var(--foreground, #cccccc);
+                border: 1px solid var(--vscode-input-border, #454545);
+                cursor: pointer;
+                transition: all 0.15s;
+            }
+
+            .start-btn:hover:not(:disabled) {
+                background: var(--vscode-input-background, #3c3c3c);
+                border-color: #f97316;
+                color: #f97316;
+            }
+
+            .start-btn:disabled {
+                background: transparent;
+                color: var(--description-foreground, #666666);
+                border-color: transparent;
+                cursor: default;
+                font-style: italic;
+            }
+
+            .stories-section {
+                display: none;
+                padding: 0 16px 14px 52px;
+                border-top: 1px solid var(--vscode-input-border, #3c3c3c);
+            }
+
+            .stories-section.expanded {
+                display: block;
+            }
+
+            .stories-header {
+                font-size: 10px;
+                font-weight: 600;
+                color: var(--description-foreground, #858585);
+                text-transform: uppercase;
+                letter-spacing: 0.5px;
+                margin: 12px 0 10px 0;
+            }
+
+            .story-item {
+                display: flex;
+                align-items: center;
+                gap: 10px;
+                padding: 8px 0;
+                font-size: 13px;
+                color: var(--foreground, #cccccc);
+            }
+
+            .story-status {
+                width: 8px;
+                height: 8px;
+                border-radius: 50%;
+                flex-shrink: 0;
+            }
+
+            .story-status.complete {
+                background: var(--status-complete, #22c55e);
+            }
+
+            .story-status.active {
+                background: var(--status-active, #f97316);
+            }
+
+            .story-status.pending {
+                background: var(--border-color, #3c3c3c);
+            }
+
+            .story-name {
+                flex: 1;
+                min-width: 0;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+        `
+    ];
+
+    render() {
+        if (!this.bolt) {
+            return html``;
+        }
+
+        const hasStories = this.bolt.stories && this.bolt.stories.length > 0;
+
+        return html`
+            <div class="header" @click=${this._toggleExpand}>
+                ${this.bolt.isBlocked
+                    ? html`<div class="lock">🔒</div>`
+                    : html`<div class="priority">${this.priority}</div>`
+                }
+                <div class="info">
+                    <div class="name">
+                        ${this.bolt.name}
+                        ${hasStories ? html`
+                            <span class="expand-icon ${this._expanded ? 'expanded' : ''}">▶</span>
+                        ` : ''}
+                    </div>
+                    <div class="meta">
+                        ${this.bolt.type} | ${this.bolt.storiesCount} ${this.bolt.storiesCount === 1 ? 'story' : 'stories'}${this.bolt.unblocksCount > 0 ? ` | Enables ${this.bolt.unblocksCount}` : ''}
+                    </div>
+                    ${this.bolt.isBlocked ? html`
+                        <div class="blocked-info">Waiting: ${this.bolt.blockedBy.join(', ')}</div>
+                    ` : ''}
+                </div>
+                <div class="actions">
+                    ${this.bolt.isBlocked
+                        ? html`<button class="start-btn" disabled>Blocked</button>`
+                        : html`<button class="start-btn" @click=${this._handleStart}>Start ▶</button>`
+                    }
+                </div>
+            </div>
+            ${hasStories ? html`
+                <div class="stories-section ${this._expanded ? 'expanded' : ''}">
+                    <div class="stories-header">Stories</div>
+                    ${this.bolt.stories.map(story => html`
+                        <div class="story-item">
+                            <div class="story-status ${story.status}"></div>
+                            <span class="story-name">${story.name}</span>
+                        </div>
+                    `)}
+                </div>
+            ` : ''}
+        `;
+    }
+
+    private _toggleExpand(): void {
+        if (this.bolt.stories && this.bolt.stories.length > 0) {
+            this._expanded = !this._expanded;
+        }
+    }
+
+    private _handleStart(e: Event): void {
+        e.stopPropagation();
+        this.dispatchEvent(new CustomEvent('start-bolt', {
+            detail: { boltId: this.bolt.id },
+            bubbles: true,
+            composed: true
+        }));
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'queue-item': QueueItem;
+    }
+}

package/src/iris_bundle/frameworks/iris-core/vs-code-extension/src/webview/components/bolts/queue-section.ts

@@ -0,0 +1,198 @@
+/**
+ * QueueSection - Up Next queue section.
+ */
+
+import { html, css } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { BaseElement } from '../shared/base-element.js';
+import './queue-item.js';
+import type { QueuedBoltData } from './queue-item.js';
+
+/** Default number of bolts to show when collapsed. */
+const DEFAULT_VISIBLE_COUNT = 5;
+
+/**
+ * Queue section component.
+ *
+ * @fires start-bolt - When Start button is clicked on a queue item
+ *
+ * @example
+ * ```html
+ * <queue-section .bolts=${bolts}></queue-section>
+ * ```
+ */
+@customElement('queue-section')
+export class QueueSection extends BaseElement {
+    /**
+     * Array of queued bolts.
+     */
+    @property({ type: Array })
+    bolts: QueuedBoltData[] = [];
+
+    /**
+     * Whether the queue is expanded to show all bolts.
+     */
+    @state()
+    private _expanded = false;
+
+    static styles = [
+        ...BaseElement.baseStyles,
+        css`
+            :host {
+                display: block;
+                padding: 20px 16px;
+                border-top: 1px solid var(--vscode-input-border, #3c3c3c);
+            }
+
+            .header {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                margin-bottom: 16px;
+            }
+
+            .title {
+                font-size: 11px;
+                font-weight: 600;
+                text-transform: uppercase;
+                letter-spacing: 0.8px;
+                color: var(--description-foreground, #858585);
+            }
+
+            .count {
+                font-size: 11px;
+                font-weight: 500;
+                padding: 4px 12px;
+                border-radius: 12px;
+                background: var(--vscode-input-background, #3c3c3c);
+                color: var(--foreground, #cccccc);
+            }
+
+            .list {
+                display: flex;
+                flex-direction: column;
+                gap: 12px;
+            }
+
+            .empty-state {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                padding: 24px;
+                color: var(--description-foreground, #858585);
+                font-size: 12px;
+            }
+
+            .toggle-btn {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                gap: 6px;
+                width: 100%;
+                padding: 8px 12px;
+                margin-top: 12px;
+                background: transparent;
+                border: 1px dashed var(--vscode-input-border, #3c3c3c);
+                border-radius: 6px;
+                color: var(--description-foreground, #858585);
+                font-size: 11px;
+                cursor: pointer;
+                transition: all 0.15s ease;
+            }
+
+            .toggle-btn:hover {
+                background: var(--vscode-input-background, #3c3c3c);
+                border-color: var(--foreground, #cccccc);
+                color: var(--foreground, #cccccc);
+            }
+
+            .toggle-icon {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 12px;
+                height: 12px;
+                transition: transform 0.15s ease;
+            }
+
+            .toggle-icon svg {
+                width: 10px;
+                height: 10px;
+                fill: currentColor;
+            }
+
+            .toggle-btn.expanded .toggle-icon {
+                transform: rotate(180deg);
+            }
+        `
+    ];
+
+    /**
+     * Gets the bolts to display based on expanded state.
+     */
+    private get _visibleBolts(): QueuedBoltData[] {
+        if (this._expanded) {
+            return this.bolts;
+        }
+        return this.bolts.slice(0, DEFAULT_VISIBLE_COUNT);
+    }
+
+    /**
+     * Whether to show the toggle button.
+     */
+    private get _showToggle(): boolean {
+        return this.bolts.length > DEFAULT_VISIBLE_COUNT;
+    }
+
+    /**
+     * Number of hidden bolts when collapsed.
+     */
+    private get _hiddenCount(): number {
+        return this.bolts.length - DEFAULT_VISIBLE_COUNT;
+    }
+
+    /**
+     * Toggles expanded state.
+     */
+    private _handleToggle(): void {
+        this._expanded = !this._expanded;
+    }
+
+    render() {
+        return html`
+            <div class="header">
+                <span class="title">Up Next</span>
+                <span class="count">${this.bolts.length} bolts</span>
+            </div>
+            <div class="list">
+                ${this.bolts.length > 0
+                    ? this._visibleBolts.map((bolt, idx) => html`
+                        <queue-item
+                            .bolt=${bolt}
+                            .priority=${idx + 1}
+                            class=${bolt.isBlocked ? 'blocked' : ''}>
+                        </queue-item>
+                    `)
+                    : html`<div class="empty-state">Queue empty</div>`
+                }
+            </div>
+            ${this._showToggle ? html`
+                <button
+                    type="button"
+                    class="toggle-btn ${this._expanded ? 'expanded' : ''}"
+                    @click=${this._handleToggle}>
+                    <span class="toggle-icon"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 10.5L3 5.5h10L8 10.5z"/></svg></span>
+                    ${this._expanded
+                        ? 'Show Less'
+                        : `Show ${this._hiddenCount} More`}
+                </button>
+            ` : ''}
+        `;
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'queue-section': QueueSection;
+    }
+}

package/src/iris_bundle/frameworks/iris-core/vs-code-extension/src/webview/components/bolts/stories-list.ts

@@ -0,0 +1,151 @@
+/**
+ * StoriesList - Story checkboxes display.
+ */
+
+import { html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { BaseElement } from '../shared/base-element.js';
+
+/**
+ * Story data.
+ */
+export interface StoryData {
+    id: string;
+    name: string;
+    status: 'complete' | 'active' | 'pending';
+}
+
+/**
+ * Stories list component.
+ *
+ * @example
+ * ```html
+ * <stories-list .stories=${stories}></stories-list>
+ * ```
+ */
+@customElement('stories-list')
+export class StoriesList extends BaseElement {
+    /**
+     * Array of stories.
+     */
+    @property({ type: Array })
+    stories: StoryData[] = [];
+
+    /**
+     * Number of completed stories.
+     */
+    @property({ type: Number })
+    storiesComplete = 0;
+
+    static styles = [
+        ...BaseElement.baseStyles,
+        css`
+            :host {
+                display: block;
+            }
+
+            .header {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                margin-bottom: 8px;
+                font-size: 11px;
+                font-weight: 600;
+                color: var(--foreground);
+            }
+
+            .count {
+                font-weight: normal;
+                color: var(--description-foreground);
+            }
+
+            .list {
+                display: flex;
+                flex-direction: column;
+                gap: 4px;
+            }
+
+            .story {
+                display: flex;
+                align-items: center;
+                gap: 8px;
+                padding: 4px 0;
+            }
+
+            .story.complete {
+                opacity: 0.7;
+            }
+
+            .status-icon {
+                width: 16px;
+                height: 16px;
+                border-radius: 50%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 10px;
+                flex-shrink: 0;
+            }
+
+            .status-icon.complete {
+                background: var(--status-complete);
+                color: white;
+            }
+
+            .status-icon.active {
+                background: var(--status-active);
+                color: white;
+            }
+
+            .status-icon.pending {
+                background: var(--editor-background);
+                border: 2px dashed var(--border-color);
+                color: var(--description-foreground);
+            }
+
+            .name {
+                font-size: 11px;
+                color: var(--foreground);
+            }
+
+            .story.complete .name {
+                text-decoration: line-through;
+                color: var(--description-foreground);
+            }
+
+            .story.active .name {
+                color: var(--status-active);
+                font-weight: 500;
+            }
+        `
+    ];
+
+    render() {
+        if (this.stories.length === 0) {
+            return html``;
+        }
+
+        return html`
+            <div class="header">
+                <span>Stories</span>
+                <span class="count">${this.storiesComplete}/${this.stories.length}</span>
+            </div>
+            <div class="list">
+                ${this.stories.map(story => html`
+                    <div class="story ${story.status}">
+                        <div class="status-icon ${story.status}">
+                            ${story.status === 'complete' ? '✓' : story.status === 'active' ? '●' : ''}
+                        </div>
+                        <span class="name">${story.id}</span>
+                    </div>
+                `)}
+            </div>
+        `;
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'stories-list': StoriesList;
+    }
+}

package/src/iris_bundle/frameworks/iris-core/vs-code-extension/src/webview/components/shared/base-element.ts

@@ -0,0 +1,29 @@
+/**
+ * BaseElement - Base class for all SpecsMD Lit components.
+ * Provides shared styles and utilities.
+ */
+
+import { LitElement, css } from 'lit';
+import { themeStyles, resetStyles } from '../../styles/theme.js';
+
+/**
+ * Base element class that all SpecsMD components should extend.
+ * Provides consistent theming and reset styles.
+ */
+export class BaseElement extends LitElement {
+    /**
+     * Shared base styles included in all components.
+     */
+    static baseStyles = [
+        themeStyles,
+        resetStyles,
+        css`
+            :host {
+                display: block;
+                font-family: var(--font-family);
+                font-size: var(--font-size);
+                color: var(--foreground);
+            }
+        `
+    ];
+}