@ibgib/space-gib 0.0.34 → 0.0.36

package/src/client/ui/component/changes/index.mts

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

package/src/client/ui/component/chat-view/chat-view.html

@@ -5,7 +5,7 @@
       <span class="chat-header-icon">💬</span>
       <div class="chat-title-group">
         <h3 class="chat-title">Discussions</h3>
-        <span class="chat-target-badge" id="chat-target-file">src/index.ts</span>
+        <span class="chat-target-badge" id="chat-target-file">No file selected</span>
       </div>
     </div>
     <div class="chat-header-actions">
@@ -17,69 +17,17 @@
   <div class="chat-sub-bar">
     <div class="chat-context-item">
       <span class="context-icon">🌿</span>
-      <span class="context-text" id="chat-branch-tip">main @ 7f8a1b2</span>
+      <span class="context-text" id="chat-branch-tip"></span>
     </div>
     <div class="chat-filter-item">
-      <span class="filter-text">2 Notes</span>
+      <span class="filter-text" id="chat-notes-count">0 Notes</span>
     </div>
   </div>
 
   <!-- Messages Stream -->
   <div class="chat-messages" id="chat-messages">
-    <!-- Message 1: Architectural Note -->
-    <div class="chat-message in-band-note">
-      <div class="msg-header">
-        <div class="msg-author-group">
-          <span class="msg-avatar">👩‍💻</span>
-          <span class="msg-author">Alice</span>
-          <span class="msg-badge">Keystone</span>
-        </div>
-        <span class="msg-time">2m ago</span>
-      </div>
-      <div class="msg-anchor">
-        <span class="anchor-icon">🔗</span>
-        <span class="anchor-label">src/index.ts#L1-18</span>
-        <span class="anchor-tag">Inverted Rel8n</span>
-      </div>
-      <div class="msg-body">
-        <p class="msg-lead"><strong>Architectural Rationale</strong></p>
-        <p>This entrypoint initializes the virtual repository workspace within the browser’s local IndexedDB metaspace.
-        </p>
-        <div class="msg-callout">
-          <span class="callout-emoji">💡</span>
-          <div class="callout-text">
-            <strong>Why Living Comments?</strong> Unlike centralized SaaS review comments, this discussion node is an
-            in-band Merkle ibgib traveling directly with the branch DAG.
-          </div>
-        </div>
-      </div>
-      <div class="msg-footer">
-        <button class="msg-action-btn" type="button">Reply</button>
-        <button class="msg-action-btn" type="button">👍 1</button>
-      </div>
-    </div>
-
-    <!-- Message 2: Code Review Discussion -->
-    <div class="chat-message peer-comment">
-      <div class="msg-header">
-        <div class="msg-author-group">
-          <span class="msg-avatar">👨‍🚀</span>
-          <span class="msg-author">Bob</span>
-          <span class="msg-badge">Peer</span>
-        </div>
-        <span class="msg-time">1m ago</span>
-      </div>
-      <div class="msg-anchor">
-        <span class="anchor-icon">🔗</span>
-        <span class="anchor-label">src/index.ts#L36-42</span>
-      </div>
-      <div class="msg-body">
-        <p>Looks super clean! Should we add an async try/catch boundary around <code>boot()</code> as well?</p>
-      </div>
-      <div class="msg-footer">
-        <button class="msg-action-btn" type="button">Reply</button>
-        <button class="msg-action-btn" type="button">👍</button>
-      </div>
+    <div class="empty-chat-msg" style="padding: 24px 16px; font-size: 12px; color: #8a99a8; text-align: center; font-style: italic;">
+      No discussions yet for this context.
     </div>
   </div>
 
@@ -91,7 +39,7 @@
         <div class="compose-tools-left">
           <button id="btn-chat-pin" class="compose-tool-btn active" type="button" title="Pin to current line selection">
             <span class="tool-icon">🔗</span>
-            <span class="tool-label">src/index.ts</span>
+            <span class="tool-label" id="chat-pin-label">No target</span>
           </button>
         </div>
         <button id="btn-chat-send" class="compose-send-btn" type="button">

package/src/client/ui/component/chat-view/chat-view.mts

@@ -85,8 +85,8 @@ export class ChatViewComponentInstance
 
     protected lc: string = `[${ChatViewComponentInstance.name}]`;
 
-    private targetFile: string = 'src/index.ts';
-    private branchTip: string = 'main @ 7f8a1b2';
+    private targetFile: string = '';
+    private branchTip: string = '';
 
     get el(): ChatViewElements {
         if (!this.elements) {
@@ -95,29 +95,7 @@ export class ChatViewComponentInstance
         return this.elements;
     }
 
-    private messages: ChatMessageItem[] = [
-        {
-            id: 'msg-1',
-            author: 'Alice',
-            avatar: '👩‍💻',
-            role: 'Keystone',
-            timeAgo: '2m ago',
-            anchor: 'src/index.ts#L1-18',
-            text: 'Architectural Rationale: This entrypoint initializes the virtual repository workspace within the browser’s local IndexedDB metaspace.',
-            callout: 'Why Living Comments? Unlike centralized SaaS review comments, this discussion node is an in-band Merkle ibgib traveling directly with the branch DAG.',
-            isInBandNote: true,
-        },
-        {
-            id: 'msg-2',
-            author: 'Bob',
-            avatar: '👨‍🚀',
-            role: 'Peer',
-            timeAgo: '1m ago',
-            anchor: 'src/index.ts#L36-42',
-            text: 'Looks super clean! Should we add an async try/catch boundary around boot() as well?',
-            isInBandNote: false,
-        }
-    ];
+    private messages: ChatMessageItem[] = [];
 
     override async created(): Promise<void> {
         const lc = `${this.lc}[${this.created.name}]`;
@@ -165,7 +143,7 @@ export class ChatViewComponentInstance
 
         this.el.btnPinEl?.addEventListener('click', () => {
             const currentPin = this.el?.btnPinEl?.querySelector('.tool-label')?.textContent || '';
-            const newPin = prompt('Pin comment to code reference (e.g. src/index.ts#L10-25):', currentPin);
+            const newPin = prompt('Pin comment to code reference (e.g. file.ts#L10-25):', currentPin);
             if (newPin && this.el?.btnPinEl) {
                 const label = this.el.btnPinEl.querySelector('.tool-label');
                 if (label) { label.textContent = newPin; }
@@ -216,6 +194,15 @@ export class ChatViewComponentInstance
     private renderMessages(): void {
         if (!this.el?.messagesContainerEl) return;
 
+        if (this.messages.length === 0) {
+            this.el.messagesContainerEl.innerHTML = `
+                <div class="empty-chat-msg" style="padding: 24px 16px; font-size: 12px; color: #8a99a8; text-align: center; font-style: italic;">
+                    No discussions yet for this context.
+                </div>
+            `;
+            return;
+        }
+
         this.el.messagesContainerEl.innerHTML = this.messages.map(msg => `
             <div class="chat-message ${msg.isInBandNote ? 'in-band-note' : 'peer-comment'}">
                 <div class="msg-header">

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

@@ -6,6 +6,7 @@ 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 { promptForText } from "@ibgib/web-gib/dist/helpers.web.mjs";
+import { validateBranchName } from "@ibgib/core-gib/dist/cosmology/branching/branch/branch-helpers.mjs";
 import {
     IbGibDynamicComponentMetaBase, IbGibDynamicComponentInstanceBase,
 } from "@ibgib/web-gib/dist/ui/component/ibgib-dynamic-component-bases.mjs";
@@ -417,28 +418,41 @@ export class CloneComponentInstance
         const btnBranchItem = this.el.singleItemContainerEl.querySelector('#btn-clone-modal-branch-item');
         btnBranchItem?.addEventListener('click', async () => {
             const filename = item.path.split('/').pop() || item.path;
-            const defaultBranch = `feature/branch-${filename.replace(/[^a-zA-Z0-9]/g, '-')}`;
-            const newBranchName = await promptForText({
-                title: `Create Branch from Item`,
-                msg: `Enter branch name isolating and diverging from item [${item.path}]:`,
-                defaultValue: defaultBranch,
-                cancelable: true,
-            });
-            if (newBranchName) {
-                this.showStatus(`Branch created: ${newBranchName}`);
-                window.dispatchEvent(new CustomEvent('space-gib-branch-requested', {
-                    detail: {
-                        galaxyName: item.galaxyName || 'Code Galaxy',
-                        sourceBranch: item.branchName || 'main',
-                        itemPath: item.path,
-                        isDir: item.isDir,
-                        newBranchName,
-                        scope: 'item',
-                    },
-                    bubbles: true,
-                    composed: true,
-                }));
+            let candidateName = `feature-branch-${filename.replace(/[^a-zA-Z0-9_.-]/g, '-')}`;
+            let promptMsg = `Enter branch name isolating and diverging from item [${item.path}]:`;
+            let cleanBranchName = '';
+
+            while (true) {
+                const newBranchName = await promptForText({
+                    title: `Create Branch from Item`,
+                    msg: promptMsg,
+                    defaultValue: candidateName,
+                    cancelable: true,
+                });
+                if (!newBranchName || !newBranchName.trim()) return;
+                cleanBranchName = newBranchName.trim();
+                const validation = validateBranchName(cleanBranchName);
+                if (!validation.isValid) {
+                    candidateName = cleanBranchName;
+                    promptMsg = `Invalid branch name: ${validation.error}\n\nPlease enter a valid branch name:`;
+                    continue;
+                }
+                break;
             }
+
+            this.showStatus(`Branch created: ${cleanBranchName}`);
+            window.dispatchEvent(new CustomEvent('space-gib-branch-requested', {
+                detail: {
+                    galaxyName: item.galaxyName || 'Code Galaxy',
+                    sourceBranch: item.branchName || 'main',
+                    itemPath: item.path,
+                    isDir: item.isDir,
+                    newBranchName: cleanBranchName,
+                    scope: 'item',
+                },
+                bubbles: true,
+                composed: true,
+            }));
         });
     }
 
@@ -484,25 +498,39 @@ export class CloneComponentInstance
                 e.stopPropagation();
                 const branchName = btn.getAttribute('data-branch') || 'main';
                 const galaxyName = btn.getAttribute('data-galaxy') || 'Code Galaxy';
-                const newBranchName = await promptForText({
-                    title: 'Create Branch from Branch',
-                    msg: `Enter branch name diverging from [${branchName}]:`,
-                    defaultValue: `feature/branch-from-${branchName}`,
-                    cancelable: true,
-                });
-                if (newBranchName) {
-                    this.showStatus(`Branch created: ${newBranchName}`);
-                    window.dispatchEvent(new CustomEvent('space-gib-branch-requested', {
-                        detail: {
-                            galaxyName,
-                            sourceBranch: branchName,
-                            newBranchName,
-                            scope: 'branch',
-                        },
-                        bubbles: true,
-                        composed: true,
-                    }));
+                let candidateName = `feature-branch-from-${branchName}`;
+                let promptMsg = `Enter branch name diverging from [${branchName}]:`;
+                let cleanBranchName = '';
+
+                while (true) {
+                    const newBranchName = await promptForText({
+                        title: 'Create Branch from Branch',
+                        msg: promptMsg,
+                        defaultValue: candidateName,
+                        cancelable: true,
+                    });
+                    if (!newBranchName || !newBranchName.trim()) return;
+                    cleanBranchName = newBranchName.trim();
+                    const validation = validateBranchName(cleanBranchName);
+                    if (!validation.isValid) {
+                        candidateName = cleanBranchName;
+                        promptMsg = `Invalid branch name: ${validation.error}\n\nPlease enter a valid branch name:`;
+                        continue;
+                    }
+                    break;
                 }
+
+                this.showStatus(`Branch created: ${cleanBranchName}`);
+                window.dispatchEvent(new CustomEvent('space-gib-branch-requested', {
+                    detail: {
+                        galaxyName,
+                        sourceBranch: branchName,
+                        newBranchName: cleanBranchName,
+                        scope: 'branch',
+                    },
+                    bubbles: true,
+                    composed: true,
+                }));
             });
         });
     }

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

@@ -18,6 +18,65 @@
     height: 100%;
     min-height: 0;
     overflow: hidden;
+    position: relative;
+    box-sizing: border-box;
+    border: 2px solid var(--branch-accent-color, rgba(255, 255, 255, 0.08));
+    box-shadow: inset 0 0 16px var(--branch-accent-translucent, rgba(0, 0, 0, 0.2));
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+/* ── Empty Placeholder View ── */
+.editor-empty-placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    color: var(--clr-text-muted, #7e8c9f);
+    text-align: center;
+    padding: 2.5rem;
+    box-sizing: border-box;
+}
+
+.editor-empty-placeholder .empty-icon {
+    font-size: 3.5rem;
+    margin-bottom: 1.25rem;
+    opacity: 0.4;
+    filter: drop-shadow(0 0 12px rgba(124, 92, 252, 0.2));
+}
+
+.editor-empty-placeholder .empty-title {
+    font-size: 1.35rem;
+    font-weight: 600;
+    color: var(--clr-text-primary, #f0f4fc);
+    margin-bottom: 0.6rem;
+    letter-spacing: -0.01em;
+}
+
+.editor-empty-placeholder .empty-desc {
+    font-size: 0.95rem;
+    max-width: 420px;
+    line-height: 1.6;
+    color: var(--clr-text-muted, #8b949e);
+}
+
+.editor-empty-placeholder .highlight {
+    color: var(--clr-accent, #78f87e);
+    font-weight: 600;
+    padding: 0.15rem 0.4rem;
+    background: rgba(120, 248, 126, 0.12);
+    border: 1px solid rgba(120, 248, 126, 0.25);
+    border-radius: 4px;
+}
+
+.editor-main-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    overflow: hidden;
 }
 
 /* ── Integrated Header (File Breadcrumb + Virtual Tip + Actions) ── */
@@ -74,38 +133,40 @@
     display: inline-flex;
     align-items: center;
     gap: 0.35rem;
-    background: rgba(124, 92, 252, 0.12);
-    border: 1px solid rgba(124, 92, 252, 0.35);
+    background: var(--branch-accent-translucent, rgba(124, 92, 252, 0.12));
+    border: 1px solid var(--branch-accent-color, rgba(124, 92, 252, 0.35));
     border-radius: var(--radius-sm, 6px);
     padding: 0.2rem 0.55rem;
     font-size: 0.775rem;
     font-family: var(--font-mono, monospace);
-    color: #c4b5fd;
+    color: var(--branch-accent-color, #c4b5fd);
     user-select: none;
     transition: all 150ms ease;
 }
 
 .tip-virtual-breadcrumb:hover {
-    background: rgba(124, 92, 252, 0.2);
-    border-color: rgba(124, 92, 252, 0.6);
-    box-shadow: 0 0 10px rgba(124, 92, 252, 0.25);
+    background: var(--branch-accent-translucent, rgba(124, 92, 252, 0.2));
+    border-color: var(--branch-accent-color, rgba(124, 92, 252, 0.6));
+    box-shadow: 0 0 10px var(--branch-accent-translucent, rgba(124, 92, 252, 0.25));
 }
 
 .tip-sep {
-    color: rgba(196, 181, 253, 0.5);
+    color: var(--branch-accent-color, rgba(196, 181, 253, 0.5));
+    opacity: 0.7;
 }
 
 .tip-icon {
     font-size: 0.8rem;
+    color: var(--branch-accent-color, #a78bfa);
 }
 
 .tip-branch {
-    color: #ddd6fe;
+    color: #ffffff;
     font-weight: 600;
 }
 
 .tip-hash {
-    color: #a78bfa;
+    color: var(--branch-accent-color, #a78bfa);
     font-weight: 700;
     letter-spacing: 0.02em;
 }
@@ -181,6 +242,27 @@
     border-color: rgba(120, 248, 126, 0.7);
 }
 
+.mode-toggle-btn.saving {
+    border-color: rgba(120, 248, 126, 0.6);
+    color: #78f87e;
+    background: rgba(120, 248, 126, 0.12);
+    box-shadow: 0 0 8px rgba(120, 248, 126, 0.2);
+}
+
+.mode-toggle-btn .save-spinner {
+    width: 10px;
+    height: 10px;
+    border: 1.5px solid rgba(120, 248, 126, 0.3);
+    border-top-color: var(--clr-accent, #78f87e);
+    border-radius: 50%;
+    animation: save-spin 0.6s linear infinite;
+    flex-shrink: 0;
+}
+
+@keyframes save-spin {
+    to { transform: rotate(360deg); }
+}
+
 .action-btn {
     display: inline-flex;
     align-items: center;

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

@@ -1,54 +1,67 @@
 <div class="editor-root" id="editor-root">
-  <!-- Combined File View Header & Virtual Breadcrumb -->
-  <header class="editor-header" id="editor-header">
-    <div class="header-left">
-      <div class="file-breadcrumb">
-        <span class="crumb-icon">📄</span>
-        <span class="crumb-repo" id="crumb-repo">my-app</span>
-        <span class="crumb-sep">/</span>
-        <span class="crumb-path" id="crumb-path">src/index.ts</span>
-      </div>
-
-      <!-- Secondary Virtual Breadcrumb: Active Branch & Tip Merkle Hash -->
-      <div class="tip-virtual-breadcrumb" id="crumb-tip-container" title="Active Branch Tip Merkle Address">
-        <span class="tip-sep">@</span>
-        <span class="tip-icon">🌿</span>
-        <span class="tip-branch" id="crumb-branch">main</span>
-        <span class="tip-hash" id="crumb-tip">7f8a1b2</span>
-      </div>
+  <!-- Empty placeholder when no file is loaded -->
+  <div class="editor-empty-placeholder" id="editor-empty-placeholder" style="display: none;">
+    <div class="empty-icon">📄</div>
+    <div class="empty-title">No file open</div>
+    <div class="empty-desc">
+      Select a file from the explorer on the left, or click <span class="highlight">📄+</span> to create a file.
     </div>
+  </div>
 
-    <div class="header-right">
-      <div class="editor-stats">
-        <span class="stat-badge" id="stat-lang">TypeScript</span>
-        <span class="stat-sep">·</span>
-        <span class="stat-badge" id="stat-lines">18 lines</span>
-        <span class="stat-sep">·</span>
-        <span class="stat-badge" id="stat-size">520 B</span>
+  <!-- Main editor container -->
+  <div class="editor-main-container" id="editor-main-container">
+    <!-- Combined File View Header & Virtual Breadcrumb -->
+    <header class="editor-header" id="editor-header">
+      <div class="header-left">
+        <div class="file-breadcrumb">
+          <span class="crumb-icon">📄</span>
+          <span class="crumb-repo" id="crumb-repo"></span>
+          <span class="crumb-sep">/</span>
+          <span class="crumb-path" id="crumb-path"></span>
+        </div>
+
+        <!-- Secondary Virtual Breadcrumb: Active Branch & Tip Merkle Hash -->
+        <div class="tip-virtual-breadcrumb" id="crumb-tip-container" title="Active Branch Tip Merkle Address">
+          <span class="tip-sep">@</span>
+          <span class="tip-icon">🌿</span>
+          <span class="tip-branch" id="crumb-branch">main</span>
+          <span class="tip-hash" id="crumb-tip"></span>
+        </div>
       </div>
 
-      <div class="header-actions">
-        <!-- Read-Only / Editable Mode Toggle -->
-        <button id="btn-toggle-readonly" class="mode-toggle-btn" type="button" title="Toggle Read-Only / Editable Mode">
-          <span class="mode-icon" id="mode-icon">🔒</span>
-          <span class="mode-text" id="mode-text">Read-Only</span>
-        </button>
+      <div class="header-right">
+        <div class="editor-stats">
+          <span class="stat-badge" id="stat-lang"></span>
+          <span class="stat-sep">·</span>
+          <span class="stat-badge" id="stat-lines">0 lines</span>
+          <span class="stat-sep">·</span>
+          <span class="stat-badge" id="stat-size">0 B</span>
+        </div>
+
+        <div class="header-actions">
+          <!-- Read-Only / Editable Mode Toggle & Save Status -->
+          <button id="btn-toggle-readonly" class="mode-toggle-btn" type="button" title="Toggle Read-Only / Editable Mode">
+            <span class="save-spinner" id="btn-save-spinner" style="display: none;"></span>
+            <span class="mode-icon" id="mode-icon">🔒</span>
+            <span class="mode-text" id="mode-text">Read-Only</span>
+          </button>
 
-        <!-- Copy Code Action -->
-        <button id="btn-copy-code" class="action-btn" type="button" title="Copy code to clipboard">
-          <span class="btn-icon">📋</span>
-        </button>
+          <!-- Copy Code Action -->
+          <button id="btn-copy-code" class="action-btn" type="button" title="Copy code to clipboard">
+            <span class="btn-icon">📋</span>
+          </button>
+        </div>
       </div>
-    </div>
-  </header>
+    </header>
 
-  <!-- Single Editor Body (Gutter + Code Textarea) -->
-  <main class="editor-body" id="editor-body">
-    <div class="editor-gutter" id="editor-gutter" aria-hidden="true">
-      <span class="line-num">1</span>
-    </div>
-    <div class="editor-content-wrapper">
-      <textarea id="editor-textarea" class="editor-textarea" spellcheck="false" autocomplete="off" autocapitalize="off" wrap="off" placeholder="Write code here..."></textarea>
-    </div>
-  </main>
+    <!-- Single Editor Body (Gutter + Code Textarea) -->
+    <main class="editor-body" id="editor-body">
+      <div class="editor-gutter" id="editor-gutter" aria-hidden="true">
+        <span class="line-num">1</span>
+      </div>
+      <div class="editor-content-wrapper">
+        <textarea id="editor-textarea" class="editor-textarea" spellcheck="false" autocomplete="off" autocapitalize="off" wrap="off" placeholder="Write code here..."></textarea>
+      </div>
+    </main>
+  </div>
 </div>