@ibgib/space-gib 0.0.33 → 0.0.34

package/src/client/ui/component/timeline/timeline.css

@@ -0,0 +1,264 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+.timeline-root {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  user-select: none;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+/* Timeline Accordion Header (Matches File Explorer branch-header) */
+.timeline-header {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.4rem 0.6rem;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 6px;
+  font-size: 0.82rem;
+  font-weight: 600;
+  color: #cbd5e1;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  outline: none;
+  box-sizing: border-box;
+  margin: 0;
+}
+
+.timeline-header:hover {
+  background: rgba(255, 255, 255, 0.07);
+  border-color: rgba(124, 92, 252, 0.3);
+  color: #f1f5f9;
+}
+
+.timeline-header:focus-visible {
+  border-color: #a78bfa;
+}
+
+.timeline-toggle-btn {
+  background: transparent;
+  border: none;
+  color: inherit;
+  font-size: 0.65rem;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  line-height: 1;
+}
+
+.chevron-icon {
+  display: inline-block;
+  transition: transform 0.15s ease;
+}
+
+.timeline-header.collapsed .chevron-icon {
+  transform: rotate(-90deg);
+}
+
+.timeline-icon {
+  font-size: 0.9rem;
+  line-height: 1;
+}
+
+.timeline-branch-title {
+  flex: 1;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
+  font-size: 0.82rem;
+  color: #a78bfa;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Badge styled like file explorer's worktree-badge */
+.timeline-badge {
+  font-size: 0.58rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  background: rgba(124, 92, 252, 0.18);
+  border: 1px solid rgba(124, 92, 252, 0.35);
+  color: #c4b5fd;
+  padding: 1px 5px;
+  border-radius: 4px;
+  font-weight: 700;
+  margin-right: 0.3rem;
+}
+
+.timeline-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.2rem;
+  opacity: 0.6;
+  transition: opacity 0.15s ease;
+}
+
+.timeline-header:hover .timeline-actions {
+  opacity: 1;
+}
+
+.action-btn {
+  background: transparent;
+  border: none;
+  color: #cbd5e1;
+  font-size: 0.72rem;
+  padding: 2px 4px;
+  border-radius: 4px;
+  cursor: pointer;
+  line-height: 1;
+  transition: background 0.15s ease, color 0.15s ease;
+}
+
+.action-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: #fff;
+}
+
+/* Stream Container */
+.timeline-stream-container {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  padding: 0.35rem 0.2rem 0.5rem 0.8rem;
+  box-sizing: border-box;
+}
+
+.timeline-stream-container.hidden {
+  display: none;
+}
+
+.timeline-rail {
+  position: absolute;
+  top: 0.7rem;
+  bottom: 0.7rem;
+  left: 1.15rem;
+  width: 2px;
+  background: rgba(124, 92, 252, 0.25);
+  pointer-events: none;
+}
+
+.timeline-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  position: relative;
+  z-index: 1;
+}
+
+/* Snapshot Item */
+.timeline-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.55rem;
+  padding: 0.35rem 0.5rem;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.12s ease, transform 0.1s ease;
+  position: relative;
+}
+
+.timeline-item:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.timeline-item.selected {
+  background: rgba(124, 92, 252, 0.15);
+  border-left: 2px solid #a78bfa;
+}
+
+.timeline-node-dot {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background: #334155;
+  border: 2px solid #64748b;
+  margin-top: 4px;
+  flex-shrink: 0;
+  transition: all 0.15s ease;
+}
+
+.timeline-item.is-tip .timeline-node-dot {
+  background: #38bdf8;
+  border-color: #0ea5e9;
+  box-shadow: 0 0 8px rgba(56, 189, 248, 0.8);
+}
+
+.timeline-item:hover .timeline-node-dot {
+  transform: scale(1.25);
+  border-color: #a78bfa;
+}
+
+.timeline-item-content {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex: 1;
+  min-width: 0;
+}
+
+.timeline-item-header {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  min-width: 0;
+}
+
+.timeline-hash-badge {
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
+  font-size: 0.68rem;
+  font-weight: 700;
+  color: #38bdf8;
+  background: rgba(56, 189, 248, 0.12);
+  padding: 1px 4px;
+  border-radius: 3px;
+  line-height: 1;
+}
+
+.timeline-tip-badge {
+  font-size: 0.55rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: #0ea5e9;
+  background: rgba(14, 165, 233, 0.18);
+  border: 1px solid rgba(14, 165, 233, 0.4);
+  padding: 1px 4px;
+  border-radius: 3px;
+  line-height: 1;
+}
+
+.timeline-item-time {
+  font-size: 0.65rem;
+  color: #64748b;
+  margin-left: auto;
+  white-space: nowrap;
+}
+
+.timeline-item-msg {
+  font-size: 0.74rem;
+  color: #cbd5e1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1.25;
+}
+
+.timeline-item:hover .timeline-item-msg {
+  color: #f1f5f9;
+}

package/src/client/ui/component/timeline/timeline.html

@@ -0,0 +1,23 @@
+<div id="timeline-root" class="timeline-root">
+  <!-- Worktree Timeline Accordion Header -->
+  <div id="timeline-header" class="timeline-header expanded" tabindex="0">
+    <button id="btn-timeline-toggle" class="timeline-toggle-btn" type="button" aria-label="Toggle Timeline Snapshots">
+      <span class="chevron-icon">▼</span>
+    </button>
+    <span class="timeline-icon">⏳</span>
+    <span id="timeline-branch-title" class="timeline-branch-title">main</span>
+    <!-- <span class="timeline-badge">timeline</span> -->
+    <div class="timeline-actions">
+      <button id="btn-timeline-refresh" class="action-btn" type="button" title="Refresh Timeline">⟳</button>
+      <button id="btn-timeline-collapse" class="action-btn" type="button" title="Toggle Collapse">⇱</button>
+    </div>
+  </div>
+
+  <!-- Timeline Snapshots Stream Container -->
+  <div id="timeline-stream-container" class="timeline-stream-container">
+    <div class="timeline-rail"></div>
+    <div id="timeline-list" class="timeline-list">
+      <!-- Injected snapshot items -->
+    </div>
+  </div>
+</div>

package/src/client/ui/component/timeline/timeline.mts

@@ -0,0 +1,317 @@
+import thisCss from "./timeline.css";
+import thisHtml from "./timeline.html";
+
+import { ROOT_ADDR } from "@ibgib/ts-gib/dist/V1/constants.mjs";
+import { IbGibAddr } from "@ibgib/ts-gib/dist/types.mjs";
+import { IbGib_V1 } from "@ibgib/ts-gib/dist/V1/types.mjs";
+import { extractErrorMsg } from "@ibgib/helper-gib/dist/helpers/utils-helper.mjs";
+import {
+    IbGibDynamicComponentMetaBase, IbGibDynamicComponentInstanceBase,
+} from "@ibgib/web-gib/dist/ui/component/ibgib-dynamic-component-bases.mjs";
+import {
+    ElementsBase, IbGibDynamicComponentInstance,
+} from "@ibgib/web-gib/dist/ui/component/component-types.mjs";
+import { getComponentCtorArg } from "@ibgib/web-gib/dist/app-bootstrap/init-orchestration.mjs";
+
+export const TIMELINE_COMPONENT_NAME = 'space-gib-timeline';
+
+export interface TimelineItem {
+    hash: string;
+    shortHash: string;
+    message: string;
+    author: string;
+    timestamp: string;
+    isTip?: boolean;
+    branch: string;
+    parentHash?: string;
+    changedFiles?: { path: string; status: 'M' | 'A' | 'D'; additions: number; deletions: number }[];
+    diffPreview?: string;
+}
+
+/**
+ * Metadata factory for space-gib-timeline Web Component.
+ */
+export class TimelineComponentMeta extends IbGibDynamicComponentMetaBase {
+    protected lc: string = `[${TimelineComponentMeta.name}]`;
+
+    routeRegExp?: RegExp = new RegExp(`^${TIMELINE_COMPONENT_NAME}$`);
+    componentName = TIMELINE_COMPONENT_NAME;
+
+    constructor() {
+        super(getComponentCtorArg());
+        if (!customElements.get(this.componentName)) {
+            customElements.define(this.componentName, TimelineComponentInstance);
+        }
+    }
+
+    async createInstance({
+        path,
+        ibGibAddr
+    }: {
+        path: string;
+        ibGibAddr: IbGibAddr;
+    }): Promise<IbGibDynamicComponentInstance> {
+        const component = document.createElement(this.componentName) as TimelineComponentInstance;
+        await component.initialize({
+            ibGibAddr: ibGibAddr || ROOT_ADDR,
+            meta: this,
+            html: thisHtml,
+            css: [thisCss],
+        });
+        return component;
+    }
+}
+
+/**
+ * References to DOM elements within the component's Shadow Root.
+ */
+export interface TimelineElements extends ElementsBase {
+    rootEl: HTMLDivElement;
+    timelineHeaderEl: HTMLDivElement;
+    btnTimelineToggleEl: HTMLButtonElement;
+    timelineBranchTitleEl: HTMLSpanElement;
+    timelineStreamContainerEl: HTMLDivElement;
+    timelineListEl: HTMLDivElement;
+    btnTimelineRefreshEl: HTMLButtonElement;
+    btnTimelineCollapseEl: HTMLButtonElement;
+}
+
+/**
+ * Concrete implementation of the Branch Timeline accordion component.
+ */
+export class TimelineComponentInstance
+    extends IbGibDynamicComponentInstanceBase<IbGib_V1, TimelineElements>
+    implements IbGibDynamicComponentInstance<IbGib_V1, TimelineElements> {
+
+    protected lc: string = `[${TimelineComponentInstance.name}]`;
+
+    private branchName: string = 'main';
+    private isTimelineExpanded: boolean = true;
+    private selectedHash: string = '3e8f1c2';
+
+    private snapshots: TimelineItem[] = [
+        {
+            hash: '3e8f1c2a05d8f99e32b4f17c802e3b4a',
+            shortHash: '3e8f1c2',
+            message: 'feat: implement cosmos navigation and orbital drift',
+            author: 'Bill Raiford <bill@ibgib.space>',
+            timestamp: '2m ago',
+            isTip: true,
+            branch: 'main',
+            parentHash: 'a7b4d90',
+            changedFiles: [
+                { path: 'src/client/ui/component/cosmos-navigator/cosmos-navigator.mts', status: 'M', additions: 18, deletions: 4 },
+                { path: 'src/client/ui/shell/space-gib-shell-service.mts', status: 'M', additions: 32, deletions: 6 },
+                { path: 'src/client/css/layout.css', status: 'M', additions: 14, deletions: 2 },
+            ],
+            diffPreview: `@@ -848,6 +848,20 @@
+-        this.launchProjectile({ ... });
++        // Make activity bar visible BEFORE zoom flight starts
++        window.dispatchEvent(new CustomEvent('space-gib-activity-bar-expand-requested'));
++        setTimeout(() => {
++            this.launchProjectile({ ... });
++        }, 180);`
+        },
+        {
+            hash: 'a7b4d9089f21c4320b9e8471da329188',
+            shortHash: 'a7b4d90',
+            message: 'style: polish firecracker big bang compression',
+            author: 'Bill Raiford <bill@ibgib.space>',
+            timestamp: '1h ago',
+            branch: 'main',
+            parentHash: 'f2098b1',
+            changedFiles: [
+                { path: 'src/client/ui/component/cosmos-navigator/cosmos-navigator.css', status: 'M', additions: 24, deletions: 11 },
+                { path: 'src/client/ui/component/cosmos-navigator/cosmos-navigator.mts', status: 'M', additions: 12, deletions: 5 },
+            ],
+            diffPreview: `@@ -430,8 +430,12 @@
+-        btn.classList.add('compressing');
++        // Firecracker high velocity rotation
++        btn.classList.add('compressing');
++        this.triggerBigBangExplosion();`
+        },
+        {
+            hash: 'f2098b191c4998721fae390c91834789',
+            shortHash: 'f2098b1',
+            message: 'refactor: decouple activity bar and cosmos controls',
+            author: 'Bill Raiford <bill@ibgib.space>',
+            timestamp: 'yesterday',
+            branch: 'main',
+            parentHash: 'c019a4e',
+            changedFiles: [
+                { path: 'src/client/ui/shell/cosmic-big-bang.mts', status: 'M', additions: 40, deletions: 52 },
+                { path: 'src/client/ui/shell/space-gib-shell-service.mts', status: 'M', additions: 75, deletions: 18 },
+            ],
+            diffPreview: `@@ -120,7 +120,7 @@
+-    public toggleActivityBar(): void {
++    public expandActivityBar(): void {`
+        },
+        {
+            hash: 'c019a4ee899201bdcf88132582910fa2',
+            shortHash: 'c019a4e',
+            message: 'feat: primordial singularity and big bang stage',
+            author: 'Bill Raiford <bill@ibgib.space>',
+            timestamp: '3d ago',
+            branch: 'main',
+            parentHash: '0000000',
+            changedFiles: [
+                { path: 'src/client/ui/component/cosmos-navigator/cosmos-navigator.mts', status: 'A', additions: 450, deletions: 0 },
+                { path: 'src/client/ui/component/cosmos-navigator/cosmos-navigator.html', status: 'A', additions: 95, deletions: 0 },
+            ],
+            diffPreview: `@@ -0,0 +1,95 @@
++<div id="cosmos-nav-root" class="cosmos-nav-root">
++  <canvas id="bg-canvas"></canvas>
++</div>`
+        },
+        {
+            hash: '00000000000000000000000000000000',
+            shortHash: '0000000',
+            message: 'Initial commit (empty space genesis)',
+            author: 'Bill Raiford <bill@ibgib.space>',
+            timestamp: '5d ago',
+            branch: 'main',
+            changedFiles: [
+                { path: 'package.json', status: 'A', additions: 35, deletions: 0 },
+                { path: 'README.md', status: 'A', additions: 20, deletions: 0 },
+            ],
+            diffPreview: `@@ -0,0 +1,20 @@
++# space-gib
++Decentralized VCS and superspaces.`
+        }
+    ];
+
+    get el(): TimelineElements {
+        if (!this.elements) {
+            throw new Error(`elements is not defined in ${this.lc}`);
+        }
+        return this.elements;
+    }
+
+    override async created(): Promise<void> {
+        const lc = `${this.lc}[${this.created.name}]`;
+        try {
+            const shadow = this.shadowRoot!;
+            this.elements = {
+                rootEl: shadow.getElementById('timeline-root') as HTMLDivElement,
+                timelineHeaderEl: shadow.getElementById('timeline-header') as HTMLDivElement,
+                btnTimelineToggleEl: shadow.getElementById('btn-timeline-toggle') as HTMLButtonElement,
+                timelineBranchTitleEl: shadow.getElementById('timeline-branch-title') as HTMLSpanElement,
+                timelineStreamContainerEl: shadow.getElementById('timeline-stream-container') as HTMLDivElement,
+                timelineListEl: shadow.getElementById('timeline-list') as HTMLDivElement,
+                btnTimelineRefreshEl: shadow.getElementById('btn-timeline-refresh') as HTMLButtonElement,
+                btnTimelineCollapseEl: shadow.getElementById('btn-timeline-collapse') as HTMLButtonElement,
+                contentEl: shadow.getElementById('timeline-root') as HTMLDivElement,
+            };
+
+            this.bindHandlers();
+            this.renderSnapshots();
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+        }
+    }
+
+    private bindHandlers(): void {
+        this.el.timelineHeaderEl.addEventListener('click', (e) => {
+            const target = e.target as HTMLElement;
+            if (target.closest('.action-btn')) return;
+            this.toggleTimelineAccordion();
+        });
+
+        this.el.btnTimelineCollapseEl.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this.toggleTimelineAccordion();
+        });
+
+        this.el.btnTimelineRefreshEl.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this.renderSnapshots();
+            this.dispatchEvent(new CustomEvent('space-gib-timeline-refresh-requested', {
+                detail: { branch: this.branchName },
+                bubbles: true,
+                composed: true,
+            }));
+        });
+    }
+
+    public renderSnapshots(): void {
+        const container = this.el.timelineListEl;
+        if (!container) { return; }
+        container.innerHTML = '';
+
+        for (const item of this.snapshots) {
+            const row = document.createElement('div');
+            row.className = `timeline-item ${item.shortHash === this.selectedHash ? 'selected' : ''} ${item.isTip ? 'is-tip' : ''}`;
+            row.setAttribute('data-hash', item.shortHash);
+
+            row.innerHTML = `
+                <div class="timeline-node-dot"></div>
+                <div class="timeline-item-content">
+                    <div class="timeline-item-header">
+                        <span class="timeline-hash-badge">${item.shortHash}</span>
+                        ${item.isTip ? '<span class="timeline-tip-badge">tip</span>' : ''}
+                        <span class="timeline-item-time">${item.timestamp}</span>
+                    </div>
+                    <span class="timeline-item-msg" title="${item.message}">${item.message}</span>
+                </div>
+            `;
+
+            row.addEventListener('click', () => {
+                this.selectTimelineItem(item.shortHash);
+                this.dispatchEvent(new CustomEvent('space-gib-timeline-item-selected', {
+                    detail: { item },
+                    bubbles: true,
+                    composed: true,
+                }));
+            });
+
+            container.appendChild(row);
+        }
+    }
+
+    public selectTimelineItem(hash: string): void {
+        this.selectedHash = hash;
+        const shadow = this.shadowRoot;
+        if (!shadow) { return; }
+        shadow.querySelectorAll('.timeline-item').forEach(el => {
+            if (el.getAttribute('data-hash') === hash) {
+                el.classList.add('selected');
+            } else {
+                el.classList.remove('selected');
+            }
+        });
+    }
+
+    public setBranch(branchName: string): void {
+        this.branchName = branchName;
+        if (this.el.timelineBranchTitleEl) {
+            this.el.timelineBranchTitleEl.textContent = branchName;
+        }
+    }
+
+    public toggleTimelineAccordion(): void {
+        this.isTimelineExpanded = !this.isTimelineExpanded;
+        const chevron = this.el.timelineHeaderEl.querySelector('.chevron-icon');
+
+        if (this.isTimelineExpanded) {
+            this.el.timelineHeaderEl.classList.remove('collapsed');
+            this.el.timelineHeaderEl.classList.add('expanded');
+            this.el.timelineStreamContainerEl.classList.remove('hidden');
+            if (chevron) { chevron.textContent = '▼'; }
+        } else {
+            this.el.timelineHeaderEl.classList.remove('expanded');
+            this.el.timelineHeaderEl.classList.add('collapsed');
+            this.el.timelineStreamContainerEl.classList.add('hidden');
+            // if (chevron) chevron.textContent = '▶';
+            if (chevron) { chevron.textContent = '▼'; }
+        }
+    }
+
+    override async disconnected(): Promise<void> {
+        const lc = `${this.lc}[${this.disconnected.name}]`;
+        try {
+            // cleanup if needed
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+        }
+    }
+}

package/src/client/ui/component/timeline-item-details/IMPLEMENTATION.md

@@ -0,0 +1,28 @@
+# space-gib-timeline-item-details Component Implementation
+
+## Overview
+`space-gib-timeline-item-details` is a rich center-panel inspector view for `space-gib` that renders when a user clicks any snapshot in the branch timeline. It displays commit metadata, changed files, and unified diff preview, along with a back navigation button to return directly to code editing.
+
+## Architecture
+- **Web Component Tag**: `<space-gib-timeline-item-details>`
+- **Meta Class**: `TimelineItemDetailsComponentMeta`
+- **Instance Class**: `TimelineItemDetailsComponentInstance`
+- **Base Class**: `IbGibDynamicComponentInstanceBase<IbGib_V1, TimelineItemDetailsElements>`
+- **Backing ibGib Address**: `ROOT_ADDR`
+
+## UI Elements
+1. **Top Bar / Navigation**:
+   - `← Back to Editor` button
+   - Snapshot hash badge
+   - Worktree branch title
+2. **Metadata Card**:
+   - Snapshot hash (full & short)
+   - Commit message header
+   - Author, date, and parent snapshot link
+3. **Changed Files Section**:
+   - List of files modified/added/deleted with status badges (`M`, `A`, `D`) and additions/deletions counts.
+4. **Diff Viewer**:
+   - Monospace unified diff view with syntax styling for added (`+`) and removed (`-`) lines.
+
+## Events
+- Dispatches `space-gib-timeline-details-closed`: Emitted when the user clicks the back button to return to code view.

package/src/client/ui/component/timeline-item-details/index.mts

@@ -0,0 +1,9 @@
+import { getComponentSvc } from "@ibgib/web-gib/dist/ui/component/ibgib-component-service.mjs";
+import { TimelineItemDetailsComponentMeta, TIMELINE_ITEM_DETAILS_COMPONENT_NAME } from "./timeline-item-details.mjs";
+
+export * from "./timeline-item-details.mjs";
+
+export async function registerTimelineItemDetailsComponent(): Promise<void> {
+    const componentSvc = await getComponentSvc();
+    componentSvc.registerComponentMeta(new TimelineItemDetailsComponentMeta());
+}