@ibgib/space-gib 0.0.34 → 0.0.35

package/src/client/ui/component/code-editor/code-editor.mts

@@ -8,10 +8,15 @@ 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 { 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 { getDeterministicColorInfo } from "@ibgib/web-gib/dist/helpers.mjs";
+import { GibColorInfo } from "@ibgib/web-gib/dist/types.mjs";
+import { getIbGibFromSpace, getTjpAddr } from "@ibgib/core-gib/dist/common/other/ibgib-helper.mjs";
+import { getBranchAndRootItemInfosAndIbGibsAndSpaceFromGalaxyIbGib } from "@ibgib/core-gib/dist/cosmology/branching/item/item-helpers.mjs";
+import { B2tFSGalaxyIbGib_V1 } from "@ibgib/core-gib/dist/cosmology/branching/repo/b2tfs-repo-types.mjs";
+import { getPlaygroundMetaspaceAndSpace } from "../../../cosmos/seed-cosmos-workspace.mjs";
+import { getSpaceGibRouterSvc } from "../../router/index.mjs";
 
 export const CODE_EDITOR_COMPONENT_NAME = 'space-gib-code-editor';
 
@@ -54,7 +59,10 @@ export class CodeEditorComponentMeta extends IbGibDynamicComponentMetaBase {
  */
 export interface CodeEditorElements extends ElementsBase {
     rootEl: HTMLDivElement;
+    placeholderEl?: HTMLDivElement;
+    mainContainerEl?: HTMLDivElement;
     headerEl: HTMLElement;
+    btnSaveSpinnerEl?: HTMLSpanElement;
     crumbRepoEl: HTMLSpanElement;
     crumbPathEl: HTMLSpanElement;
     crumbBranchEl: HTMLSpanElement;
@@ -72,25 +80,6 @@ export interface CodeEditorElements extends ElementsBase {
     contentEl: HTMLDivElement;
 }
 
-const DEFAULT_CODE = `/**
- * @module my-app/index
- * Application entry point running on ibgib VCS.
- */
-
-import { getGlobalMetaspace } from '@ibgib/web-gib';
-import { add } from './helper.mjs';
-
-export const APP_NAME = 'space-gib in-memory vcs';
-
-export async function boot(): Promise<void> {
-    console.log(\`Initializing \${APP_NAME}...\`);
-    const space = await getGlobalMetaspace();
-    const sum = add(40, 2);
-    console.log(\`Calculated sum: \${sum}\`);
-}
-
-boot();`;
-
 /**
  * Concrete implementation of the space-gib-code-editor component.
  */
@@ -101,11 +90,17 @@ export class CodeEditorComponentInstance
     protected lc: string = `[${CodeEditorComponentInstance.name}]`;
 
     private _readOnly: boolean = false;
-    private filepath: string = 'src/index.ts';
-    private repo: string = 'my-app';
+    private filepath: string = '';
+    private repo: string = '';
     private branch: string = 'main';
-    private tipAddr: string = '7f8a1b2';
-    private language: string = 'TypeScript';
+    private tipAddr: string = '';
+    private language: string = '';
+    private originalContent?: string;
+    private isUntracked: boolean = false;
+    private debounceTimer?: any;
+    private saveStartTime: number = 0;
+    private isSaving: boolean = false;
+    private branchColorCache = new Map<string, GibColorInfo>();
 
     get el(): CodeEditorElements {
         if (!this.elements) {
@@ -152,6 +147,8 @@ export class CodeEditorComponentInstance
             const root = this.shadowRoot!;
             this.elements = {
                 rootEl: root.getElementById('editor-root') as HTMLDivElement,
+                placeholderEl: root.getElementById('editor-empty-placeholder') as HTMLDivElement,
+                mainContainerEl: root.getElementById('editor-main-container') as HTMLDivElement,
                 headerEl: root.getElementById('editor-header') as HTMLElement,
                 crumbRepoEl: root.getElementById('crumb-repo') as HTMLSpanElement,
                 crumbPathEl: root.getElementById('crumb-path') as HTMLSpanElement,
@@ -162,6 +159,7 @@ export class CodeEditorComponentInstance
                 statLinesEl: root.getElementById('stat-lines') as HTMLSpanElement,
                 statSizeEl: root.getElementById('stat-size') as HTMLSpanElement,
                 btnToggleReadonlyEl: root.getElementById('btn-toggle-readonly') as HTMLButtonElement,
+                btnSaveSpinnerEl: root.getElementById('btn-save-spinner') as HTMLSpanElement,
                 modeIconEl: root.getElementById('mode-icon') as HTMLSpanElement,
                 modeTextEl: root.getElementById('mode-text') as HTMLSpanElement,
                 btnCopyCodeEl: root.getElementById('btn-copy-code') as HTMLButtonElement,
@@ -170,19 +168,20 @@ export class CodeEditorComponentInstance
                 contentEl: root.getElementById('editor-root') as HTMLDivElement,
             };
 
-            // Set initial content if empty
-            if (this.el.editorTextareaEl && !this.el.editorTextareaEl.value) {
-                this.el.editorTextareaEl.value = DEFAULT_CODE;
-            }
-
             // Sync readonly attribute if set on host
             if (this.hasAttribute('readonly')) {
                 this._readOnly = true;
             }
 
-            this.updateReadOnlyState();
-            this.updateGutter();
-            this.updateStats();
+            if (!this.filepath) {
+                this.clearFile({ repo: this.repo, branch: this.branch });
+            } else {
+                this.updateReadOnlyState();
+                this.updateGutter();
+                this.updateStats();
+                this.updateBranchColorStyling();
+            }
+
             this.bindEvents();
 
         } catch (error) {
@@ -194,20 +193,19 @@ export class CodeEditorComponentInstance
         const lc = `${this.lc}[${this.bindEvents.name}]`;
         if (!this.el) return;
 
-        // Textarea input: update line numbers & stats
+        // Textarea input: update line numbers & stats, reset 500ms debounce
         this.el.editorTextareaEl?.addEventListener('input', () => {
             this.updateGutter();
             this.updateStats();
 
-            this.dispatchEvent(new CustomEvent('space-gib-code-changed', {
-                bubbles: true,
-                composed: true,
-                detail: {
-                    filepath: this.filepath,
-                    content: this.el.editorTextareaEl.value,
-                    lineCount: this.getLineCount(),
-                }
-            }));
+            if (this.debounceTimer) {
+                clearTimeout(this.debounceTimer);
+            }
+            this.debounceTimer = setTimeout(() => {
+                this.saveStartTime = Date.now();
+                this.showSavingIndicator();
+                this.handleDebouncedSave();
+            }, 500);
         });
 
         // Synchronize scroll between textarea and line number gutter
@@ -217,7 +215,7 @@ export class CodeEditorComponentInstance
             }
         });
 
-        // Handle Tab key in textarea for code editing
+        // Handle Tab key in textarea for indentation
         this.el.editorTextareaEl?.addEventListener('keydown', (e: KeyboardEvent) => {
             if (this._readOnly) return;
 
@@ -293,17 +291,89 @@ export class CodeEditorComponentInstance
         if (this.el.btnToggleReadonlyEl) {
             this.el.btnToggleReadonlyEl.classList.toggle('readonly', this._readOnly);
             this.el.btnToggleReadonlyEl.classList.toggle('editable', !this._readOnly);
+            if (!this.isSaving) {
+                this.el.btnToggleReadonlyEl.classList.remove('saving');
+            }
         }
 
-        if (this.el.modeIconEl) {
-            this.el.modeIconEl.textContent = this._readOnly ? '🔒' : '✏️';
+        if (!this.isSaving) {
+            if (this.el.btnSaveSpinnerEl) {
+                this.el.btnSaveSpinnerEl.style.display = 'none';
+            }
+            if (this.el.modeIconEl) {
+                this.el.modeIconEl.style.display = 'inline';
+                this.el.modeIconEl.textContent = this._readOnly ? '🔒' : '✏️';
+            }
+            if (this.el.modeTextEl) {
+                this.el.modeTextEl.textContent = this._readOnly ? 'Read-Only' : 'Editable';
+            }
         }
+    }
 
-        if (this.el.modeTextEl) {
-            this.el.modeTextEl.textContent = this._readOnly ? 'Read-Only' : 'Editable';
+    private showSavingIndicator(): void {
+        this.isSaving = true;
+        if (this.elements) {
+            if (this.el.btnSaveSpinnerEl) {
+                this.el.btnSaveSpinnerEl.style.display = 'inline-block';
+            }
+            if (this.el.modeIconEl) {
+                this.el.modeIconEl.style.display = 'none';
+            }
+            if (this.el.modeTextEl) {
+                this.el.modeTextEl.textContent = 'Saving...';
+            }
+            if (this.el.btnToggleReadonlyEl) {
+                this.el.btnToggleReadonlyEl.classList.add('saving');
+            }
         }
     }
 
+    private hideSavingIndicator(): void {
+        this.isSaving = false;
+        if (this.elements) {
+            if (this.el.btnSaveSpinnerEl) {
+                this.el.btnSaveSpinnerEl.style.display = 'none';
+            }
+            if (this.el.modeIconEl) {
+                this.el.modeIconEl.style.display = 'inline';
+            }
+            if (this.el.btnToggleReadonlyEl) {
+                this.el.btnToggleReadonlyEl.classList.remove('saving');
+            }
+            this.updateReadOnlyState();
+        }
+    }
+
+    private async handleDebouncedSave(): Promise<void> {
+        if (!this.filepath) return;
+        const currentContent = this.getContent();
+
+        // Diff against originalContent
+        const isReverted = !this.isUntracked && this.originalContent !== undefined && currentContent === this.originalContent;
+
+        this.dispatchEvent(new CustomEvent('space-gib-code-changed', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                filepath: this.filepath,
+                content: currentContent,
+                lineCount: this.getLineCount(),
+                isReverted,
+                isUntracked: this.isUntracked,
+                repo: this.repo,
+                branch: this.branch,
+            }
+        }));
+
+        // Minimum 0.5s (500ms) animation duration for saving indicator
+        const elapsed = Date.now() - this.saveStartTime;
+        const remaining = Math.max(0, 500 - elapsed);
+        setTimeout(() => {
+            this.hideSavingIndicator();
+            this.saveStartTime = 0;
+        }, remaining);
+    }
+
     private getLineCount(): number {
         const text = this.el?.editorTextareaEl?.value || '';
         return text.split('\n').length;
@@ -339,17 +409,35 @@ export class CodeEditorComponentInstance
     public loadFile(opts: {
         filepath: string;
         content?: string;
+        originalContent?: string;
+        isUntracked?: boolean;
         branch?: string;
         tipAddr?: string;
         language?: string;
         repo?: string;
         readOnly?: boolean;
     }): void {
+        if (this.debounceTimer) {
+            clearTimeout(this.debounceTimer);
+            this.debounceTimer = undefined;
+        }
+        this.saveStartTime = 0;
+        this.hideSavingIndicator();
+
         this.filepath = opts.filepath || this.filepath;
         if (opts.repo) this.repo = opts.repo;
         if (opts.branch) this.branch = opts.branch;
         if (opts.tipAddr) this.tipAddr = opts.tipAddr;
 
+        if (opts.originalContent !== undefined) {
+            this.originalContent = opts.originalContent;
+        } else if (opts.content !== undefined && !opts.isUntracked) {
+            this.originalContent = opts.content;
+        } else {
+            this.originalContent = undefined;
+        }
+        this.isUntracked = Boolean(opts.isUntracked);
+
         // Auto-detect language from extension if not provided
         if (opts.language) {
             this.language = opts.language;
@@ -386,6 +474,9 @@ export class CodeEditorComponentInstance
         }
 
         if (this.elements) {
+            if (this.el.placeholderEl) this.el.placeholderEl.style.display = 'none';
+            if (this.el.mainContainerEl) this.el.mainContainerEl.style.display = 'flex';
+
             if (this.el.crumbRepoEl) this.el.crumbRepoEl.textContent = this.repo;
             if (this.el.crumbPathEl) this.el.crumbPathEl.textContent = this.filepath;
             if (this.el.crumbBranchEl) this.el.crumbBranchEl.textContent = this.branch;
@@ -395,9 +486,69 @@ export class CodeEditorComponentInstance
                 this.el.editorTextareaEl.value = opts.content;
             }
 
+            this.updateReadOnlyState();
+            this.updateGutter();
+            this.updateStats();
+        }
+        this.updateBranchColorStyling();
+    }
+
+    public setTipAddr(tipAddr: string): void {
+        this.tipAddr = tipAddr;
+        if (this.elements && this.el.crumbTipEl) {
+            this.el.crumbTipEl.textContent = tipAddr;
+        }
+    }
+
+    public markAsCommitted(tipAddr?: string): void {
+        this.originalContent = this.getContent();
+        this.isUntracked = false;
+        if (tipAddr) {
+            this.setTipAddr(tipAddr);
+        }
+    }
+
+    /**
+     * Clears the active file and displays the empty state placeholder.
+     */
+    public clearFile(opts?: { repo?: string; branch?: string }): void {
+        if (this.debounceTimer) {
+            clearTimeout(this.debounceTimer);
+            this.debounceTimer = undefined;
+        }
+        this.saveStartTime = 0;
+        this.hideSavingIndicator();
+        this.originalContent = undefined;
+        this.isUntracked = false;
+
+        this.filepath = '';
+        if (opts?.repo) this.repo = opts.repo;
+        if (opts?.branch) this.branch = opts.branch;
+        this.tipAddr = '';
+        this.language = '';
+
+        if (this.elements) {
+            if (this.el.placeholderEl) this.el.placeholderEl.style.display = 'flex';
+            if (this.el.mainContainerEl) this.el.mainContainerEl.style.display = 'none';
+
+            if (this.el.crumbRepoEl) this.el.crumbRepoEl.textContent = this.repo;
+            if (this.el.crumbPathEl) this.el.crumbPathEl.textContent = '';
+            if (this.el.crumbBranchEl) this.el.crumbBranchEl.textContent = this.branch;
+            if (this.el.crumbTipEl) this.el.crumbTipEl.textContent = '';
+
+            if (this.el.editorTextareaEl) {
+                this.el.editorTextareaEl.value = '';
+            }
+
+            this.updateReadOnlyState();
             this.updateGutter();
             this.updateStats();
         }
+        this.updateBranchColorStyling();
+    }
+
+    public getFilepath(): string {
+        return this.filepath;
     }
 
     public getContent(): string {
@@ -416,6 +567,71 @@ export class CodeEditorComponentInstance
         this.readOnly = readOnly;
     }
 
+    public setGalaxyAndBranch(repo: string, branch: string = 'main'): void {
+        this.repo = repo;
+        this.branch = branch;
+        if (this.elements) {
+            if (this.el.crumbRepoEl) this.el.crumbRepoEl.textContent = this.repo;
+            if (this.el.crumbBranchEl) this.el.crumbBranchEl.textContent = this.branch;
+        }
+        this.updateBranchColorStyling();
+    }
+
+    public clearBranchColorCache(): void {
+        this.branchColorCache.clear();
+    }
+
+    private async resolveGalaxyIbGib(galaxyName: string, space: any): Promise<B2tFSGalaxyIbGib_V1 | undefined> {
+        const router = getSpaceGibRouterSvc();
+        for (const manifest of router.cosmosManifestCache?.values() || []) {
+            const entry = manifest.data?.galaxies?.[galaxyName];
+            if (entry?.galaxyAddr) {
+                const gib = await getIbGibFromSpace<B2tFSGalaxyIbGib_V1>({ addr: entry.galaxyAddr, space });
+                if (gib) return gib;
+            }
+        }
+        return undefined;
+    }
+
+    public async updateBranchColorStyling(): Promise<void> {
+        try {
+            if (!this.repo) return;
+            const cacheKey = `${this.repo || 'unknown'}~${this.branch}`;
+            let colorInfo = this.branchColorCache.get(cacheKey);
+            if (!colorInfo) {
+                const { metaspace, space } = await getPlaygroundMetaspaceAndSpace();
+                const galaxyIbGib = await this.resolveGalaxyIbGib(this.repo, space);
+                let branchAddrOrTjp: string | undefined;
+                if (galaxyIbGib) {
+                    const branchAndRoot = await getBranchAndRootItemInfosAndIbGibsAndSpaceFromGalaxyIbGib({
+                        galaxyIbGib,
+                        branchName: this.branch,
+                        metaspace,
+                    }).catch(() => undefined);
+                    if (branchAndRoot?.branchIbGib) {
+                        branchAddrOrTjp = getTjpAddr({ ibGib: branchAndRoot.branchIbGib }) || branchAndRoot.branchInfo?.branchAddr;
+                    }
+                }
+                colorInfo = getDeterministicColorInfo({
+                    ibGibAddr: branchAddrOrTjp,
+                    gib: branchAddrOrTjp ? undefined : this.branch,
+                    translucentAlpha: 18,
+                });
+                if (this.repo && branchAddrOrTjp) {
+                    this.branchColorCache.set(cacheKey, colorInfo);
+                }
+            }
+
+            if (colorInfo) {
+                this.style.setProperty('--branch-accent-color', colorInfo.punctiliarColor);
+                this.style.setProperty('--branch-accent-translucent', colorInfo.punctiliarColorTranslucent);
+                this.style.setProperty('--branch-accent-contrast', colorInfo.punctiliarColorContrast);
+            }
+        } catch (err) {
+            console.warn(`${this.lc} Error updating branch color styling: ${extractErrorMsg(err)}`);
+        }
+    }
+
     override async disconnected(): Promise<void> {
         const lc = `${this.lc}[${this.disconnected.name}]`;
         try {

package/src/client/ui/component/cosmos-navigator/cosmos-navigator.css

@@ -861,4 +861,4 @@
   100% {
     transform: translate(-50%, calc(-50% - 215px)) scale(1);
   }
-}
+}

package/src/client/ui/component/cosmos-navigator/cosmos-navigator.html

@@ -58,28 +58,23 @@
       <span id="active-cosmos-title-caption" class="node-caption">Cosmos 1</span>
       <span id="active-cosmos-temp-badge" class="cosmos-temp-badge hidden">✨ In-Memory (Temporary)</span>
 
-      <!-- Second-Order Satellites (Unfolds & Revolves around Galaxy) -->
+      <!-- Second-Order Satellites (Revolving around Cosmos) -->
       <div id="superspace-satellites" class="superspace-satellites">
         <!-- Visual Orbit Track Guide Ring -->
         <div class="satellite-orbit-guide-ring"></div>
-
-        <!-- Code Space -->
         <div class="satellite-wrapper sat-code-pos">
-          <button id="btn-sat-code" class="satellite-node-btn" type="button" title="Code Space (Repositories / VCS)">
+          <button id="btn-sat-code" class="satellite-node-btn" type="button" title="Code Galaxy (Repositories / VCS)">
             <span class="satellite-emoji">&lt;/&gt;</span>
             <span class="satellite-pulse"></span>
           </button>
-          <span class="satellite-caption">Code Space</span>
+          <span class="satellite-caption">Code Galaxy</span>
         </div>
-
-        <!-- Text Space -->
         <div class="satellite-wrapper sat-notes-pos">
-          <button id="btn-sat-text" class="satellite-node-btn" type="button"
-            title="Text Space (Metatext Discussions & Notes)">
+          <button id="btn-sat-text" class="satellite-node-btn" type="button" title="Notes Galaxy (Discussions &amp; Notes)">
             <span class="satellite-emoji">📝</span>
             <span class="satellite-pulse"></span>
           </button>
-          <span class="satellite-caption">Text Space</span>
+          <span class="satellite-caption">Notes Galaxy</span>
         </div>
       </div>
     </div>