@ibgib/space-gib 0.0.32 → 0.0.34

package/src/client/ui/component/timeline-item-details/timeline-item-details.css

@@ -0,0 +1,286 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.timeline-details-root {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  background: #0b0f19;
+  color: #f1f5f9;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+/* Top Bar */
+.details-top-bar {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.5rem 1rem;
+  background: rgba(15, 23, 42, 0.95);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  flex-shrink: 0;
+}
+
+.btn-back-editor {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  background: rgba(124, 92, 252, 0.15);
+  border: 1px solid rgba(124, 92, 252, 0.35);
+  color: #c4b5fd;
+  border-radius: 6px;
+  padding: 0.35rem 0.65rem;
+  font-size: 0.8rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.btn-back-editor:hover {
+  background: rgba(124, 92, 252, 0.28);
+  border-color: #a78bfa;
+  color: #fff;
+  transform: translateX(-2px);
+}
+
+.breadcrumb-trail {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.82rem;
+  color: #94a3b8;
+}
+
+.trail-worktree {
+  font-family: ui-monospace, SFMono-Regular, monospace;
+  font-weight: 600;
+  color: #a78bfa;
+  background: rgba(124, 92, 252, 0.15);
+  padding: 1px 6px;
+  border-radius: 4px;
+}
+
+.trail-separator {
+  color: #475569;
+}
+
+.trail-hash {
+  font-family: ui-monospace, SFMono-Regular, monospace;
+  font-weight: 600;
+  color: #38bdf8;
+  background: rgba(56, 189, 248, 0.15);
+  padding: 1px 6px;
+  border-radius: 4px;
+}
+
+.top-bar-actions {
+  margin-left: auto;
+  display: flex;
+  gap: 0.5rem;
+}
+
+.top-action-btn {
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  color: #cbd5e1;
+  font-size: 0.76rem;
+  padding: 0.3rem 0.6rem;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.top-action-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: #fff;
+}
+
+/* Scrollable Body */
+.details-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1.25rem 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  box-sizing: border-box;
+}
+
+/* Metadata Card */
+.metadata-card {
+  background: rgba(15, 23, 42, 0.7);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 8px;
+  padding: 1.2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.9rem;
+}
+
+.commit-message {
+  margin: 0;
+  font-size: 1.15rem;
+  font-weight: 600;
+  color: #f8fafc;
+  line-height: 1.35;
+}
+
+.meta-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 0.6rem 1.5rem;
+}
+
+.meta-field {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.82rem;
+}
+
+.field-label {
+  color: #64748b;
+  font-weight: 500;
+  min-width: 70px;
+}
+
+.field-value {
+  color: #cbd5e1;
+}
+
+.monospace-val {
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
+  color: #38bdf8;
+  font-size: 0.8rem;
+}
+
+/* Changed Files */
+.changed-files-section {
+  background: rgba(15, 23, 42, 0.7);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 8px;
+  padding: 1rem 1.2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.section-title {
+  font-size: 0.92rem;
+  font-weight: 600;
+  color: #e2e8f0;
+}
+
+.badge-count {
+  font-size: 0.7rem;
+  background: rgba(255, 255, 255, 0.08);
+  color: #94a3b8;
+  padding: 1px 6px;
+  border-radius: 10px;
+}
+
+.files-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.file-row {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.35rem 0.5rem;
+  border-radius: 5px;
+  background: rgba(255, 255, 255, 0.02);
+  font-size: 0.82rem;
+  font-family: ui-monospace, SFMono-Regular, monospace;
+}
+
+.file-row:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.status-badge {
+  font-size: 0.68rem;
+  font-weight: 700;
+  padding: 1px 5px;
+  border-radius: 3px;
+  line-height: 1;
+}
+
+.status-M {
+  color: #fbbf24;
+  background: rgba(251, 191, 36, 0.15);
+}
+
+.status-A {
+  color: #34d399;
+  background: rgba(52, 211, 153, 0.15);
+}
+
+.status-D {
+  color: #f87171;
+  background: rgba(248, 113, 113, 0.15);
+}
+
+.file-path {
+  flex: 1;
+  color: #cbd5e1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.file-stats {
+  font-size: 0.72rem;
+  display: flex;
+  gap: 0.4rem;
+}
+
+.stat-add {
+  color: #34d399;
+}
+
+.stat-del {
+  color: #f87171;
+}
+
+/* Diff Viewer */
+.diff-viewer-section {
+  background: rgba(15, 23, 42, 0.7);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 8px;
+  padding: 1rem 1.2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.diff-code-block {
+  margin: 0;
+  background: #050811;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 6px;
+  padding: 0.85rem 1rem;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
+  font-size: 0.8rem;
+  line-height: 1.5;
+  color: #cbd5e1;
+  overflow-x: auto;
+  white-space: pre-wrap;
+}

package/src/client/ui/component/timeline-item-details/timeline-item-details.html

@@ -0,0 +1,64 @@
+<div id="timeline-details-root" class="timeline-details-root">
+  <!-- Details Top Bar -->
+  <div class="details-top-bar">
+    <button id="btn-back-to-editor" class="btn-back-editor" type="button">
+      <span class="back-icon">←</span>
+      <span class="back-text">Back to Editor</span>
+    </button>
+    <div class="breadcrumb-trail">
+      <span class="trail-worktree" id="details-branch-badge">main</span>
+      <span class="trail-separator">/</span>
+      <span class="trail-hash" id="details-top-hash">3e8f1c2</span>
+    </div>
+    <div class="top-bar-actions">
+      <button id="btn-copy-hash" class="top-action-btn" type="button" title="Copy Snapshot Hash">📋 Copy Hash</button>
+    </div>
+  </div>
+
+  <!-- Main Scrollable Body -->
+  <div class="details-body">
+    <!-- Metadata Card -->
+    <div class="metadata-card">
+      <div class="card-header">
+        <h2 id="details-message" class="commit-message">feat: implement cosmos navigation and orbital drift</h2>
+      </div>
+      <div class="meta-grid">
+        <div class="meta-field">
+          <span class="field-label">Snapshot:</span>
+          <span id="details-full-hash" class="field-value monospace-val">3e8f1c2a05d8f99e32b4f17c802e3b4a</span>
+        </div>
+        <div class="meta-field">
+          <span class="field-label">Author:</span>
+          <span id="details-author" class="field-value">Bill Raiford &lt;bill@ibgib.space&gt;</span>
+        </div>
+        <div class="meta-field">
+          <span class="field-label">Committed:</span>
+          <span id="details-timestamp" class="field-value">2 mins ago</span>
+        </div>
+        <div class="meta-field">
+          <span class="field-label">Parent:</span>
+          <span id="details-parent-hash" class="field-value monospace-val">a7b4d90</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Changed Files List -->
+    <div class="changed-files-section">
+      <div class="section-header">
+        <span class="section-title">Changed Files</span>
+        <span id="details-files-count" class="badge-count">3 files</span>
+      </div>
+      <div id="details-files-list" class="files-list">
+        <!-- Injected changed file items -->
+      </div>
+    </div>
+
+    <!-- Diff Viewer -->
+    <div class="diff-viewer-section">
+      <div class="section-header">
+        <span class="section-title">Changes Diff Preview</span>
+      </div>
+      <pre id="details-diff-preview" class="diff-code-block"><code><!-- Injected diff content --></code></pre>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,194 @@
+import thisCss from "./timeline-item-details.css";
+import thisHtml from "./timeline-item-details.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";
+import { TimelineItem } from "../timeline/timeline.mjs";
+
+export const TIMELINE_ITEM_DETAILS_COMPONENT_NAME = 'space-gib-timeline-item-details';
+
+/**
+ * Metadata factory for space-gib-timeline-item-details Web Component.
+ */
+export class TimelineItemDetailsComponentMeta extends IbGibDynamicComponentMetaBase {
+    protected lc: string = `[${TimelineItemDetailsComponentMeta.name}]`;
+
+    routeRegExp?: RegExp = new RegExp(`^${TIMELINE_ITEM_DETAILS_COMPONENT_NAME}$`);
+    componentName = TIMELINE_ITEM_DETAILS_COMPONENT_NAME;
+
+    constructor() {
+        super(getComponentCtorArg());
+        if (!customElements.get(this.componentName)) {
+            customElements.define(this.componentName, TimelineItemDetailsComponentInstance);
+        }
+    }
+
+    async createInstance({
+        path,
+        ibGibAddr
+    }: {
+        path: string;
+        ibGibAddr: IbGibAddr;
+    }): Promise<IbGibDynamicComponentInstance> {
+        const component = document.createElement(this.componentName) as TimelineItemDetailsComponentInstance;
+        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 TimelineItemDetailsElements extends ElementsBase {
+    rootEl: HTMLDivElement;
+    btnBackToEditorEl: HTMLButtonElement;
+    detailsBranchBadgeEl: HTMLSpanElement;
+    detailsTopHashEl: HTMLSpanElement;
+    btnCopyHashEl: HTMLButtonElement;
+    detailsMessageEl: HTMLHeadingElement;
+    detailsFullHashEl: HTMLSpanElement;
+    detailsAuthorEl: HTMLSpanElement;
+    detailsTimestampEl: HTMLSpanElement;
+    detailsParentHashEl: HTMLSpanElement;
+    detailsFilesCountEl: HTMLSpanElement;
+    detailsFilesListEl: HTMLDivElement;
+    detailsDiffPreviewEl: HTMLElement;
+}
+
+/**
+ * Concrete implementation of the Timeline Item Inspector Details component.
+ */
+export class TimelineItemDetailsComponentInstance
+    extends IbGibDynamicComponentInstanceBase<IbGib_V1, TimelineItemDetailsElements>
+    implements IbGibDynamicComponentInstance<IbGib_V1, TimelineItemDetailsElements> {
+
+    protected lc: string = `[${TimelineItemDetailsComponentInstance.name}]`;
+
+    private currentItem?: TimelineItem;
+
+    get el(): TimelineItemDetailsElements {
+        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-details-root') as HTMLDivElement,
+                btnBackToEditorEl: shadow.getElementById('btn-back-to-editor') as HTMLButtonElement,
+                detailsBranchBadgeEl: shadow.getElementById('details-branch-badge') as HTMLSpanElement,
+                detailsTopHashEl: shadow.getElementById('details-top-hash') as HTMLSpanElement,
+                btnCopyHashEl: shadow.getElementById('btn-copy-hash') as HTMLButtonElement,
+                detailsMessageEl: shadow.getElementById('details-message') as HTMLHeadingElement,
+                detailsFullHashEl: shadow.getElementById('details-full-hash') as HTMLSpanElement,
+                detailsAuthorEl: shadow.getElementById('details-author') as HTMLSpanElement,
+                detailsTimestampEl: shadow.getElementById('details-timestamp') as HTMLSpanElement,
+                detailsParentHashEl: shadow.getElementById('details-parent-hash') as HTMLSpanElement,
+                detailsFilesCountEl: shadow.getElementById('details-files-count') as HTMLSpanElement,
+                detailsFilesListEl: shadow.getElementById('details-files-list') as HTMLDivElement,
+                detailsDiffPreviewEl: shadow.getElementById('details-diff-preview') as HTMLElement,
+                contentEl: shadow.getElementById('timeline-details-root') as HTMLDivElement,
+            };
+
+            this.bindHandlers();
+            if (this.currentItem) {
+                this.renderItemDetails(this.currentItem);
+            }
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+        }
+    }
+
+    private bindHandlers(): void {
+        this.el.btnBackToEditorEl.addEventListener('click', () => {
+            this.dispatchEvent(new CustomEvent('space-gib-timeline-details-closed', {
+                bubbles: true,
+                composed: true,
+            }));
+        });
+
+        this.el.btnCopyHashEl.addEventListener('click', async () => {
+            if (this.currentItem?.hash) {
+                try {
+                    await navigator.clipboard.writeText(this.currentItem.hash);
+                    this.el.btnCopyHashEl.textContent = '✓ Copied!';
+                    setTimeout(() => {
+                        this.el.btnCopyHashEl.textContent = '📋 Copy Hash';
+                    }, 1800);
+                } catch {
+                    // clipboard fallback
+                }
+            }
+        });
+    }
+
+    public setTimelineItem(item: TimelineItem): void {
+        this.currentItem = item;
+        if (this.elements) {
+            this.renderItemDetails(item);
+        }
+    }
+
+    private renderItemDetails(item: TimelineItem): void {
+        if (!this.elements) return;
+
+        this.el.detailsBranchBadgeEl.textContent = item.branch || 'main';
+        this.el.detailsTopHashEl.textContent = item.shortHash;
+        this.el.detailsMessageEl.textContent = item.message;
+        this.el.detailsFullHashEl.textContent = item.hash;
+        this.el.detailsAuthorEl.textContent = item.author;
+        this.el.detailsTimestampEl.textContent = item.timestamp;
+        this.el.detailsParentHashEl.textContent = item.parentHash || 'None (Initial)';
+
+        const files = item.changedFiles || [];
+        this.el.detailsFilesCountEl.textContent = `${files.length} file${files.length === 1 ? '' : 's'}`;
+
+        const filesListContainer = this.el.detailsFilesListEl;
+        filesListContainer.innerHTML = '';
+        for (const f of files) {
+            const row = document.createElement('div');
+            row.className = 'file-row';
+            row.innerHTML = `
+                <span class="status-badge status-${f.status}">${f.status}</span>
+                <span class="file-path">${f.path}</span>
+                <div class="file-stats">
+                    <span class="stat-add">+${f.additions}</span>
+                    <span class="stat-del">-${f.deletions}</span>
+                </div>
+            `;
+            filesListContainer.appendChild(row);
+        }
+
+        const diffEl = this.el.detailsDiffPreviewEl;
+        if (diffEl) {
+            diffEl.textContent = item.diffPreview || 'No diff available for this snapshot.';
+        }
+    }
+
+    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/router/index.mts

@@ -0,0 +1,3 @@
+export * from './space-gib-router-types.mjs';
+export * from './space-gib-router-helpers.mjs';
+export * from './space-gib-router-service.mjs';