@ibgib/space-gib 0.0.32 → 0.0.34

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

@@ -0,0 +1,277 @@
+import thisCss from "./chat-view.css";
+import thisHtml from "./chat-view.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 CHAT_VIEW_COMPONENT_NAME = 'space-gib-chat-view';
+
+/**
+ * Metadata factory for space-gib-chat-view Web Component.
+ */
+export class ChatViewComponentMeta extends IbGibDynamicComponentMetaBase {
+    protected lc: string = `[${ChatViewComponentMeta.name}]`;
+
+    routeRegExp?: RegExp = new RegExp(`^${CHAT_VIEW_COMPONENT_NAME}$`);
+    componentName = CHAT_VIEW_COMPONENT_NAME;
+
+    constructor() {
+        super(getComponentCtorArg());
+        if (!customElements.get(this.componentName)) {
+            customElements.define(this.componentName, ChatViewComponentInstance);
+        }
+    }
+
+    async createInstance({
+        path,
+        ibGibAddr
+    }: {
+        path: string;
+        ibGibAddr: IbGibAddr;
+    }): Promise<IbGibDynamicComponentInstance> {
+        const component = document.createElement(this.componentName) as ChatViewComponentInstance;
+        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 ChatViewElements extends ElementsBase {
+    rootEl: HTMLDivElement;
+    targetFileEl: HTMLSpanElement;
+    branchTipEl: HTMLSpanElement;
+    btnCloseEl: HTMLButtonElement;
+    messagesContainerEl: HTMLDivElement;
+    inputEl: HTMLTextAreaElement;
+    btnSendEl: HTMLButtonElement;
+    btnPinEl: HTMLButtonElement;
+    contentEl: HTMLDivElement;
+}
+
+export interface ChatMessageItem {
+    id: string;
+    author: string;
+    avatar: string;
+    role: 'Keystone' | 'Peer' | 'Agent';
+    timeAgo: string;
+    anchor?: string;
+    text: string;
+    callout?: string;
+    isInBandNote?: boolean;
+}
+
+/**
+ * Concrete implementation of the space-gib-chat-view component.
+ */
+export class ChatViewComponentInstance
+    extends IbGibDynamicComponentInstanceBase<IbGib_V1, ChatViewElements>
+    implements IbGibDynamicComponentInstance<IbGib_V1, ChatViewElements> {
+
+    protected lc: string = `[${ChatViewComponentInstance.name}]`;
+
+    private targetFile: string = 'src/index.ts';
+    private branchTip: string = 'main @ 7f8a1b2';
+
+    get el(): ChatViewElements {
+        if (!this.elements) {
+            throw new Error(`elements is not defined in ${this.lc}`);
+        }
+        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,
+        }
+    ];
+
+    override async created(): Promise<void> {
+        const lc = `${this.lc}[${this.created.name}]`;
+        try {
+            const root = this.shadowRoot!;
+            this.elements = {
+                rootEl: root.getElementById('chat-root') as HTMLDivElement,
+                targetFileEl: root.getElementById('chat-target-file') as HTMLSpanElement,
+                branchTipEl: root.getElementById('chat-branch-tip') as HTMLSpanElement,
+                btnCloseEl: root.getElementById('btn-chat-close') as HTMLButtonElement,
+                messagesContainerEl: root.getElementById('chat-messages') as HTMLDivElement,
+                inputEl: root.getElementById('chat-input') as HTMLTextAreaElement,
+                btnSendEl: root.getElementById('btn-chat-send') as HTMLButtonElement,
+                btnPinEl: root.getElementById('btn-chat-pin') as HTMLButtonElement,
+                contentEl: root.getElementById('chat-root') as HTMLDivElement,
+            };
+
+            this.bindEvents();
+            this.renderMessages();
+
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+        }
+    }
+
+    private bindEvents(): void {
+        const lc = `${this.lc}[${this.bindEvents.name}]`;
+        if (!this.el) return;
+
+        this.el.btnSendEl?.addEventListener('click', () => this.sendMessage());
+
+        this.el.inputEl?.addEventListener('keydown', (e: KeyboardEvent) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                this.sendMessage();
+            }
+        });
+
+        this.el.btnCloseEl?.addEventListener('click', () => {
+            window.dispatchEvent(new CustomEvent('space-gib-chat-close-requested', {
+                bubbles: true,
+                composed: true,
+            }));
+        });
+
+        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);
+            if (newPin && this.el?.btnPinEl) {
+                const label = this.el.btnPinEl.querySelector('.tool-label');
+                if (label) { label.textContent = newPin; }
+            }
+        });
+    }
+
+    public sendMessage(): void {
+        const lc = `${this.lc}[${this.sendMessage.name}]`;
+        if (!this.el?.inputEl) return;
+
+        const text = this.el.inputEl.value.trim();
+        if (!text) { return; }
+
+        const pinLabel = this.el.btnPinEl?.querySelector('.tool-label')?.textContent || this.targetFile;
+
+        const newMsg: ChatMessageItem = {
+            id: `msg-${Date.now()}`,
+            author: 'You',
+            avatar: '👤',
+            role: 'Keystone',
+            timeAgo: 'just now',
+            anchor: pinLabel,
+            text,
+            isInBandNote: true,
+        };
+
+        this.messages.push(newMsg);
+        this.el.inputEl.value = '';
+        this.renderMessages();
+
+        // Scroll to bottom
+        if (this.el.messagesContainerEl) {
+            this.el.messagesContainerEl.scrollTop = this.el.messagesContainerEl.scrollHeight;
+        }
+
+        // Dispatch notification
+        window.dispatchEvent(new CustomEvent('space-gib-chat-message-sent', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                message: newMsg,
+                targetFile: this.targetFile,
+            }
+        }));
+    }
+
+    private renderMessages(): void {
+        if (!this.el?.messagesContainerEl) return;
+
+        this.el.messagesContainerEl.innerHTML = this.messages.map(msg => `
+            <div class="chat-message ${msg.isInBandNote ? 'in-band-note' : 'peer-comment'}">
+                <div class="msg-header">
+                    <div class="msg-author-group">
+                        <span class="msg-avatar">${msg.avatar}</span>
+                        <span class="msg-author">${msg.author}</span>
+                        <span class="msg-badge">${msg.role}</span>
+                    </div>
+                    <span class="msg-time">${msg.timeAgo}</span>
+                </div>
+                ${msg.anchor ? `
+                    <div class="msg-anchor">
+                        <span class="anchor-icon">🔗</span>
+                        <span class="anchor-label">${msg.anchor}</span>
+                        ${msg.isInBandNote ? '<span class="anchor-tag">Inverted Rel8n</span>' : ''}
+                    </div>
+                ` : ''}
+                <div class="msg-body">
+                    <p>${msg.text}</p>
+                    ${msg.callout ? `
+                        <div class="msg-callout">
+                            <span class="callout-emoji">💡</span>
+                            <div class="callout-text">${msg.callout}</div>
+                        </div>
+                    ` : ''}
+                </div>
+                <div class="msg-footer">
+                    <button class="msg-action-btn" type="button">Reply</button>
+                    <button class="msg-action-btn" type="button">👍</button>
+                </div>
+            </div>
+        `).join('');
+    }
+
+    public setTargetFile(file: string, branchTip?: string): void {
+        this.targetFile = file;
+        if (branchTip) { this.branchTip = branchTip; }
+
+        if (this.el?.targetFileEl) {
+            this.el.targetFileEl.textContent = file;
+        }
+        if (this.el?.branchTipEl) {
+            this.el.branchTipEl.textContent = this.branchTip;
+        }
+        if (this.el?.btnPinEl) {
+            const label = this.el.btnPinEl.querySelector('.tool-label');
+            if (label) { label.textContent = file; }
+        }
+    }
+
+    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/chat-view/index.mts

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

package/src/client/ui/component/clone/IMPLEMENTATION.md

@@ -0,0 +1,68 @@
+# space-gib-clone Component Implementation
+
+## 1. Overview
+`space-gib-clone` is a specialized Web Component providing a unified Clone & Export modal interface for `space-gib`. It allows users to clone workspaces, galaxies, branches, or individual files/directories across the 5-tier cosmos hierarchy via either terminal CLI commands (`vcs clone ...`) or browser archive downloads (.zip / .ibgib DAG bundle).
+
+## 2. Target Scope Hierarchy & Mutual Exclusion Rules
+The component provides a Target Scope Selector with three levels:
+1. **`Cosmos`**: Entire project boundary containing multiple galaxies (e.g. Code Galaxy + Notes Galaxy).
+2. **`Galaxy`**: Subspace representing a specific domain galaxy (e.g. Code Galaxy `</>` or Notes Galaxy `📝`) and its constituent branch spaces.
+3. **`Single Item`**: Direct spacetime item (single file or directory tree) with its full timeline and companion comments.
+
+### Mutual Exclusion / Greying-Out UX Rule:
+- **Initiated with Single File/Folder Selected**:
+  - `Single Item` is automatically pre-selected.
+  - `Cosmos` and `Galaxy` scope options are strictly **disabled / greyed out**.
+  - Checkbox tree displays only the selected item path.
+- **Initiated without Single Item (Global / Header / Cosmos / Galaxy context)**:
+  - `Single Item` is strictly **disabled / greyed out**.
+  - `Cosmos` and `Galaxy` scope options are available and selectable.
+  - Checkbox tree displays the full Cosmos hierarchy (Galaxies and constituent Branches).
+
+## 3. Visual Layout Specification
+```text
+┌─────────────────────────────────────────────────────────────────────────────┐
+│ ⤓ CLONE & EXPORT: Cosmos 1                                              [✕] │
+├─────────────────────────────────────────────────────────────────────────────┤
+│ Target Scope:  [ (•) Cosmos ]   [ ( ) Galaxy ]   [ ( ) Single Item ]        │
+├─────────────────────────────────────────────────────────────────────────────┤
+│ SELECT GALAXIES & BRANCHES:                                                 │
+│                                                                             │
+│ ☑️ 🌌 Cosmos 1                                                              │
+│    ├── ☑️ </> Code Galaxy                                                    │
+│    │     ├── ☑️ 🌿 main (canonical)                                          │
+│    │     └── ☐ 🌿 feature/cosmos-drift                                      │
+│    └── ☑️ 📝 Notes Galaxy (Living companion discussions & comments)          │
+│          └── ☑️ 🌿 main                                                      │
+├─────────────────────────────────────────────────────────────────────────────┤
+│ CLONE METHOD:                                                               │
+│                                                                             │
+│ [ CLI Command ]    [ Download ZIP ]    [ Download .ibgib DAG ]              │
+│                                                                             │
+│  $ vcs clone https://space-gib.localhost/cosmos-1 \                         │
+│       --galaxy code:main --galaxy notes:main                        [📋 Copy]│
+└─────────────────────────────────────────────────────────────────────────────┘
+```
+
+## 4. Dual Modalities
+1. **CLI Command Tab**:
+   - Displays dynamically generated `vcs clone <url> [flags]` command matching the active scope and selected galaxies/branches (companion comments and discussions are managed directly via selection of the Notes Galaxy).
+   - Includes one-click `[📋 Copy]` button with feedback tooltip.
+2. **Browser Download Tabs**:
+   - **Download ZIP**: Triggers browser download of a clean workspace projection archive.
+   - **Download .ibgib DAG**: Triggers browser export of the raw cryptographic ibgib dependency graph bundle.
+
+## 5. Events & Interactions
+- **Dispatches**:
+  - `space-gib-clone-closed`: When the user clicks the close button `[✕]`, cancels, or clicks the backdrop overlay.
+  - `space-gib-clone-executed`: When a download or clone action is triggered.
+- **Listens for**:
+  - Direct invocations from `SpaceGibShellService.openCloneModal(options)`.
+
+## 6. Implementation Checklist
+- [x] Create `IMPLEMENTATION.md`
+- [x] Create `clone-constants.mts` and `clone-types.mts`
+- [x] Create `clone.html` and `clone.css`
+- [x] Create `clone.mts` (Meta & Instance classes extending `IbGibDynamicComponentInstanceBase`)
+- [x] Create `index.mts` and export registration function
+- [x] Register in `SpaceGibShellService.registerComponents()` and connect launch triggers

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

@@ -0,0 +1,16 @@
+
+export const CLONE_COMPONENT_NAME = 'space-gib-clone';
+
+export const EVENT_SPACE_GIB_CLONE_CLOSED = 'space-gib-clone-closed';
+export const EVENT_SPACE_GIB_CLONE_EXECUTED = 'space-gib-clone-executed';
+
+export const CLONE_SCOPE_COSMOS = 'cosmos';
+export const CLONE_SCOPE_GALAXY = 'galaxy';
+export const CLONE_SCOPE_ITEM = 'item';
+
+export const CLONE_MODALITY_CLI = 'cli';
+export const CLONE_MODALITY_ZIP = 'zip';
+export const CLONE_MODALITY_DAG = 'dag';
+
+export const SETTINGS_TYPE_CLONE = 'clone';
+export const CLONE_SETTINGS_TYPE = SETTINGS_TYPE_CLONE;

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

@@ -0,0 +1,60 @@
+
+import {
+    CLONE_SCOPE_COSMOS,
+    CLONE_SCOPE_GALAXY,
+    CLONE_SCOPE_ITEM,
+    CLONE_MODALITY_CLI,
+    CLONE_MODALITY_ZIP,
+    CLONE_MODALITY_DAG,
+} from './clone-constants.mjs';
+
+export type CloneScope =
+    | typeof CLONE_SCOPE_COSMOS
+    | typeof CLONE_SCOPE_GALAXY
+    | typeof CLONE_SCOPE_ITEM;
+
+export type CloneModality =
+    | typeof CLONE_MODALITY_CLI
+    | typeof CLONE_MODALITY_ZIP
+    | typeof CLONE_MODALITY_DAG;
+
+export interface CloneItemContext {
+    path: string;
+    isDir: boolean;
+    galaxyName?: string;
+    branchName?: string;
+}
+
+export interface CloneGalaxyBranchItem {
+    id: string;
+    name: string;
+    isCanonical?: boolean;
+    selected: boolean;
+}
+
+export interface CloneGalaxyTreeItem {
+    id: string;
+    name: string;
+    icon: string;
+    type: 'code' | 'notes' | string;
+    selected: boolean;
+    indeterminate?: boolean;
+    branches: CloneGalaxyBranchItem[];
+}
+
+export interface CloneTreeState {
+    cosmosId: string;
+    cosmosName: string;
+    selected: boolean;
+    indeterminate?: boolean;
+    galaxies: CloneGalaxyTreeItem[];
+    singleItem?: CloneItemContext;
+}
+
+export interface CloneModalOptions {
+    cosmosId?: string;
+    cosmosName?: string;
+    galaxyName?: string;
+    branchName?: string;
+    singleItem?: CloneItemContext;
+}