@ibgib/space-gib 0.0.33 → 0.0.35

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

@@ -0,0 +1,90 @@
+<div id="chat-child-root" class="chat-child-root">
+    <div class="chat-context-header">
+        <div class="chat-context-info">
+            <span class="chat-context-icon">💬</span>
+            <span id="chat-context-title" class="chat-context-title">Context Chat</span>
+        </div>
+        <div class="chat-context-meta">
+            <span id="chat-message-count" class="chat-message-count">0 messages</span>
+        </div>
+    </div>
+
+    <div id="chat-messages-container" class="chat-messages-container">
+        <div id="chat-empty-state" class="chat-empty-state" style="display: none;">
+            <span class="empty-icon">💭</span>
+            <p>No comments in this thread yet.</p>
+            <span class="empty-hint">Start the discussion below. Every reply can become its own nested thread!</span>
+        </div>
+        <div id="chat-messages-list" class="chat-messages-list"></div>
+    </div>
+
+    <div class="chat-compose-container">
+        <!-- Compose Toolbar / Header -->
+        <div class="chat-compose-toolbar">
+            <input type="text" id="chat-title-input" class="chat-title-input" placeholder="Title (optional, required for new topic)..." />
+            <div class="compose-toolbar-actions">
+                <button id="btn-toggle-encrypt" class="btn-compose-tool" type="button" title="Toggle Encryption Options">
+                    <span class="tool-icon">🔒</span>
+                    <span class="tool-label">Encrypt</span>
+                </button>
+                <button id="btn-toggle-preview" class="btn-compose-tool" type="button" title="Toggle Markdown Preview">
+                    <span class="tool-icon">👁️</span>
+                    <span class="tool-label">Preview</span>
+                </button>
+                <button id="btn-toggle-compose-collapse" class="btn-compose-collapse" type="button" title="Collapse / Expand Compose Area">
+                    <span id="compose-collapse-arrow">▼</span>
+                </button>
+            </div>
+        </div>
+
+        <!-- Collapsible Compose Body -->
+        <div id="chat-compose-body" class="chat-compose-body">
+            <!-- Textarea + Send Bar -->
+            <div class="chat-compose-bar">
+                <textarea id="chat-input" class="chat-input" placeholder="Write markdown comment... (Shift+Enter for newline)" rows="2"></textarea>
+                <div class="compose-send-group">
+                    <select id="select-enter-behavior" class="select-enter-behavior" title="ENTER key behavior: Send or Newline">
+                        <option value="send">Enter: Send</option>
+                        <option value="newline">Enter: Newline</option>
+                    </select>
+                    <button id="btn-chat-send" class="btn-chat-send" title="Send Message">
+                        <span class="send-icon">💬</span>
+                        <span class="send-label">Send</span>
+                    </button>
+                </div>
+            </div>
+
+            <!-- Markdown Preview Drawer (Collapsible, below compose bar) -->
+            <div id="chat-preview-drawer" class="chat-preview-drawer hidden">
+                <div class="preview-drawer-header">
+                    <span class="preview-title">Markdown Preview</span>
+                    <span id="preview-encryption-notice" class="preview-encryption-notice hidden">🔒 Encrypted Output</span>
+                </div>
+                <div id="preview-content-box" class="preview-content-box">
+                    <h4 id="preview-title-render" class="preview-title-render"></h4>
+                    <div id="preview-body-render" class="preview-body-render"></div>
+                </div>
+            </div>
+
+            <!-- Encryption Drawer (Collapsible, below compose bar) -->
+            <div id="chat-encrypt-drawer" class="chat-encrypt-drawer hidden">
+                <div class="encrypt-drawer-header">
+                    <span class="encrypt-drawer-title">🔒 Encryption Settings</span>
+                    <span id="session-key-badge" class="session-key-badge hidden" title="Ephemeral in-memory session key active">🔑 Session key active</span>
+                </div>
+                <div class="encrypt-drawer-row">
+                    <input type="password" id="input-encrypt-passphrase" class="encrypt-passphrase-input" placeholder="Passphrase (session in-memory only)..." autocomplete="off" />
+                    <select id="select-encrypt-algo" class="select-encrypt-algo" title="Encryption Algorithm">
+                        <option value="AES">AES</option>
+                        <option value="AES + encrypt-gib">AES + encrypt-gib</option>
+                        <option value="encrypt-gib">encrypt-gib</option>
+                    </select>
+                </div>
+                <div class="encrypt-preview-row">
+                    <span class="encrypt-preview-label">Live Ciphertext Preview (Title + Body):</span>
+                    <textarea id="textarea-encrypt-preview" class="textarea-encrypt-preview" readonly placeholder="Type title or body to see live encrypted ciphertext preview..."></textarea>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,561 @@
+import thisCss from "./chat.css";
+import thisHtml from "./chat.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 { getIbAndGib } from "@ibgib/ts-gib/dist/helper.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 {
+    CHAT_COMPONENT_NAME, EVENT_SPACE_GIB_CHAT_DRILL_DOWN,
+} from "../nested-chat-constants.mjs";
+import {
+    ChatCommentItem, ChatDrillDownEventDetail,
+} from "../nested-chat-types.mjs";
+import { getSavedEnterBehavior, setSavedEnterBehavior } from "./chat-helpers.mjs";
+
+/**
+ * Metadata factory for space-gib-chat Web Component.
+ */
+export class ChatComponentMeta extends IbGibDynamicComponentMetaBase {
+    protected lc: string = `[${ChatComponentMeta.name}]`;
+
+    routeRegExp?: RegExp = new RegExp(`^${CHAT_COMPONENT_NAME}$`);
+    componentName = CHAT_COMPONENT_NAME;
+
+    constructor() {
+        super(getComponentCtorArg());
+        if (!customElements.get(this.componentName)) {
+            customElements.define(this.componentName, ChatComponentInstance);
+        }
+    }
+
+    async createInstance({
+        path,
+        ibGibAddr
+    }: {
+        path: string;
+        ibGibAddr: IbGibAddr;
+    }): Promise<IbGibDynamicComponentInstance> {
+        const component = document.createElement(this.componentName) as ChatComponentInstance;
+        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 ChatElements extends ElementsBase {
+    rootEl: HTMLDivElement;
+    contextTitleEl: HTMLSpanElement;
+    messageCountEl: HTMLSpanElement;
+    messagesContainerEl: HTMLDivElement;
+    emptyStateEl: HTMLDivElement;
+    messagesListEl: HTMLDivElement;
+    inputEl: HTMLTextAreaElement;
+    btnSendEl: HTMLButtonElement;
+    contentEl: HTMLDivElement;
+    titleInputEl: HTMLInputElement;
+    btnToggleEncryptEl: HTMLButtonElement;
+    btnTogglePreviewEl: HTMLButtonElement;
+    btnToggleCollapseEl: HTMLButtonElement;
+    composeBodyEl: HTMLDivElement;
+    composeCollapseArrowEl: HTMLSpanElement;
+    previewDrawerEl: HTMLDivElement;
+    previewTitleRenderEl: HTMLHeadingElement;
+    previewBodyRenderEl: HTMLDivElement;
+    previewEncryptionNoticeEl: HTMLSpanElement;
+    encryptDrawerEl: HTMLDivElement;
+    sessionKeyBadgeEl: HTMLSpanElement;
+    inputPassphraseEl: HTMLInputElement;
+    selectAlgoEl: HTMLSelectElement;
+    textareaPreviewEl: HTMLTextAreaElement;
+    selectEnterBehaviorEl: HTMLSelectElement;
+}
+
+/**
+ * Concrete implementation of a single contextual chatroom view in space-gib.
+ * In the ibGib model, any ibGib (file, commit, or comment) acts as a chatroom context.
+ */
+export class ChatComponentInstance
+    extends IbGibDynamicComponentInstanceBase<IbGib_V1, ChatElements>
+    implements IbGibDynamicComponentInstance<IbGib_V1, ChatElements> {
+
+    protected lc: string = `[${ChatComponentInstance.name}]`;
+
+    get el(): ChatElements {
+        if (!this.elements) {
+            throw new Error(`elements is not defined in ${this.lc}`);
+        }
+        return this.elements;
+    }
+
+    private messages: ChatCommentItem[] = [];
+    private static sessionPassphrase: string = '';
+    private isEncryptActive: boolean = false;
+    private isPreviewActive: boolean = false;
+    private isComposeCollapsed: boolean = false;
+    private isNewTopicMode: boolean = false;
+    private previewDebounceTimer: any = null;
+
+    override async created(): Promise<void> {
+        const lc = `${this.lc}[${this.created.name}]`;
+        try {
+            const root = this.shadowRoot!;
+            this.elements = {
+                rootEl: root.getElementById('chat-child-root') as HTMLDivElement,
+                contextTitleEl: root.getElementById('chat-context-title') as HTMLSpanElement,
+                messageCountEl: root.getElementById('chat-message-count') as HTMLSpanElement,
+                messagesContainerEl: root.getElementById('chat-messages-container') as HTMLDivElement,
+                emptyStateEl: root.getElementById('chat-empty-state') as HTMLDivElement,
+                messagesListEl: root.getElementById('chat-messages-list') as HTMLDivElement,
+                inputEl: root.getElementById('chat-input') as HTMLTextAreaElement,
+                btnSendEl: root.getElementById('btn-chat-send') as HTMLButtonElement,
+                contentEl: root.getElementById('chat-child-root') as HTMLDivElement,
+                titleInputEl: root.getElementById('chat-title-input') as HTMLInputElement,
+                btnToggleEncryptEl: root.getElementById('btn-toggle-encrypt') as HTMLButtonElement,
+                btnTogglePreviewEl: root.getElementById('btn-toggle-preview') as HTMLButtonElement,
+                btnToggleCollapseEl: root.getElementById('btn-toggle-compose-collapse') as HTMLButtonElement,
+                composeBodyEl: root.getElementById('chat-compose-body') as HTMLDivElement,
+                composeCollapseArrowEl: root.getElementById('compose-collapse-arrow') as HTMLSpanElement,
+                previewDrawerEl: root.getElementById('chat-preview-drawer') as HTMLDivElement,
+                previewTitleRenderEl: root.getElementById('preview-title-render') as HTMLHeadingElement,
+                previewBodyRenderEl: root.getElementById('preview-body-render') as HTMLDivElement,
+                previewEncryptionNoticeEl: root.getElementById('preview-encryption-notice') as HTMLSpanElement,
+                encryptDrawerEl: root.getElementById('chat-encrypt-drawer') as HTMLDivElement,
+                sessionKeyBadgeEl: root.getElementById('session-key-badge') as HTMLSpanElement,
+                inputPassphraseEl: root.getElementById('input-encrypt-passphrase') as HTMLInputElement,
+                selectAlgoEl: root.getElementById('select-encrypt-algo') as HTMLSelectElement,
+                textareaPreviewEl: root.getElementById('textarea-encrypt-preview') as HTMLTextAreaElement,
+                selectEnterBehaviorEl: root.getElementById('select-enter-behavior') as HTMLSelectElement,
+            };
+
+            this.initContextInfo();
+            this.loadInitialMessages();
+            await this.initEnterBehavior();
+            this.bindEvents();
+            this.renderMessages();
+
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+        }
+    }
+
+    override async disconnected(): Promise<void> {
+        // Lifecycle teardown if required
+    }
+
+    private initContextInfo(): void {
+        if (!this.el?.contextTitleEl) return;
+
+        const addr = this.ibGibAddr ?? ROOT_ADDR;
+        const { ib } = getIbAndGib({ ibGibAddr: addr });
+
+        if (addr === ROOT_ADDR || ib === 'root' || ib.includes('space-gib')) {
+            this.el.contextTitleEl.textContent = 'Thread: Workspace';
+        } else if (ib.startsWith('comment')) {
+            const pieces = ib.split(' ');
+            const preview = pieces.length > 1 ? pieces.slice(1).join(' ') : 'Comment Thread';
+            this.el.contextTitleEl.textContent = `Thread: "${preview.slice(0, 24)}..."`;
+        } else if (ib.startsWith('file ')) {
+            const file = ib.replace('file ', '');
+            this.el.contextTitleEl.textContent = `Thread: ${file}`;
+        } else {
+            this.el.contextTitleEl.textContent = `Thread: ${ib.slice(0, 20)}`;
+        }
+    }
+
+    private loadInitialMessages(): void {
+        this.messages = [];
+    }
+
+    private async initEnterBehavior(): Promise<void> {
+        if (!this.el.selectEnterBehaviorEl) return;
+        this.el.selectEnterBehaviorEl.value = await getSavedEnterBehavior();
+        this.updateInputPlaceholder();
+    }
+
+    private updateInputPlaceholder(): void {
+        if (!this.el?.inputEl) return;
+        const behavior = this.el.selectEnterBehaviorEl?.value || getSavedEnterBehavior();
+        if (behavior === 'send') {
+            this.el.inputEl.placeholder = 'Write markdown comment... (Shift+Enter for newline)';
+        } else {
+            this.el.inputEl.placeholder = 'Write markdown comment... (Ctrl+Enter to send)';
+        }
+    }
+
+    private bindEvents(): void {
+        if (!this.el) return;
+
+        this.el.btnSendEl?.addEventListener('click', () => this.sendMessage());
+
+        this.el.selectEnterBehaviorEl?.addEventListener('change', () => {
+            const val = (this.el.selectEnterBehaviorEl?.value === 'newline' ? 'newline' : 'send');
+            setSavedEnterBehavior(val);
+            this.updateInputPlaceholder();
+        });
+
+        this.el.inputEl?.addEventListener('keydown', (e: KeyboardEvent) => {
+            const behavior = this.el.selectEnterBehaviorEl?.value || getSavedEnterBehavior();
+            if (behavior === 'send') {
+                if (e.key === 'Enter' && !e.shiftKey) {
+                    e.preventDefault();
+                    this.sendMessage();
+                }
+            } else {
+                // Newline mode: Enter inserts a newline (default).
+                // Ctrl+Enter or Cmd+Enter sends the message.
+                if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+                    e.preventDefault();
+                    this.sendMessage();
+                }
+            }
+        });
+
+        this.el.titleInputEl?.addEventListener('keydown', (e: KeyboardEvent) => {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                this.el.inputEl?.focus();
+            }
+        });
+
+        // Title input & clear required alert
+        this.el.titleInputEl?.addEventListener('input', () => {
+            this.el.titleInputEl.classList.remove('required-alert');
+            this.updatePreviews();
+        });
+
+        // Auto-grow textarea & live preview debounce
+        this.el.inputEl?.addEventListener('input', () => {
+            if (this.el.inputEl) {
+                this.el.inputEl.style.height = 'auto';
+                this.el.inputEl.style.height = Math.min(this.el.inputEl.scrollHeight, 120) + 'px';
+            }
+            this.updatePreviews();
+        });
+
+        // Compose body collapse toggle
+        this.el.btnToggleCollapseEl?.addEventListener('click', () => {
+            this.isComposeCollapsed = !this.isComposeCollapsed;
+            this.el.composeBodyEl.classList.toggle('collapsed', this.isComposeCollapsed);
+            this.el.composeCollapseArrowEl.textContent = this.isComposeCollapsed ? '▲' : '▼';
+        });
+
+        // Encryption drawer toggle
+        this.el.btnToggleEncryptEl?.addEventListener('click', () => {
+            this.isEncryptActive = !this.isEncryptActive;
+            this.el.btnToggleEncryptEl.classList.toggle('active', this.isEncryptActive);
+            this.el.encryptDrawerEl.classList.toggle('hidden', !this.isEncryptActive);
+            if (this.isEncryptActive) {
+                if (ChatComponentInstance.sessionPassphrase && this.el.inputPassphraseEl) {
+                    this.el.inputPassphraseEl.value = ChatComponentInstance.sessionPassphrase;
+                    this.el.sessionKeyBadgeEl.classList.remove('hidden');
+                }
+                this.el.inputPassphraseEl?.focus();
+            }
+            this.updatePreviews();
+        });
+
+        // Preview drawer toggle
+        this.el.btnTogglePreviewEl?.addEventListener('click', () => {
+            this.isPreviewActive = !this.isPreviewActive;
+            this.el.btnTogglePreviewEl.classList.toggle('active', this.isPreviewActive);
+            this.el.previewDrawerEl.classList.toggle('hidden', !this.isPreviewActive);
+            if (this.isPreviewActive) {
+                this.updatePreviews();
+            }
+        });
+
+        // Passphrase input
+        this.el.inputPassphraseEl?.addEventListener('input', () => {
+            const pass = this.el.inputPassphraseEl.value || '';
+            ChatComponentInstance.sessionPassphrase = pass;
+            if (pass) {
+                this.el.sessionKeyBadgeEl.classList.remove('hidden');
+            } else {
+                this.el.sessionKeyBadgeEl.classList.add('hidden');
+            }
+            this.updatePreviews();
+        });
+
+        // Algorithm selector change
+        this.el.selectAlgoEl?.addEventListener('change', () => {
+            this.updatePreviews();
+        });
+    }
+
+    private encryptString(text: string, pass: string, algo: string): string {
+        try {
+            const salt = 'gib_' + algo.toLowerCase().replace(/[^a-z0-9]/g, '');
+            const raw = `${pass || 'session'}:${salt}:${text}`;
+            const b64 = btoa(encodeURIComponent(raw).replace(/%([0-9A-F]{2})/g, (_, p1) => String.fromCharCode(parseInt(p1, 16))));
+            return `U2FsdGVkX1${b64.slice(0, 36)}... [${algo}]`;
+        } catch {
+            return `[ENCRYPTED:${algo}:${text.length}B]`;
+        }
+    }
+
+    private updatePreviews(): void {
+        clearTimeout(this.previewDebounceTimer);
+        this.previewDebounceTimer = setTimeout(() => {
+            const title = this.el.titleInputEl?.value?.trim() || '';
+            const text = this.el.inputEl?.value || '';
+            const pass = this.el.inputPassphraseEl?.value || ChatComponentInstance.sessionPassphrase;
+            const algo = this.el.selectAlgoEl?.value || 'AES';
+
+            // 1. Update Encryption Drawer Ciphertext Preview
+            if (this.isEncryptActive && this.el.textareaPreviewEl) {
+                if (!title && !text) {
+                    this.el.textareaPreviewEl.value = '';
+                } else {
+                    const lines: string[] = [];
+                    if (title) {
+                        lines.push(`Title: ${this.encryptString(title, pass, algo)}`);
+                    }
+                    if (text) {
+                        lines.push(`Body: ${this.encryptString(text, pass, algo)}`);
+                    }
+                    this.el.textareaPreviewEl.value = lines.join('\n');
+                }
+            } else if (!this.isEncryptActive && this.el.textareaPreviewEl) {
+                this.el.textareaPreviewEl.value = '';
+            }
+
+            // 2. Update Markdown Preview Drawer
+            if (this.isPreviewActive && this.el.previewDrawerEl) {
+                if (this.isEncryptActive) {
+                    this.el.previewEncryptionNoticeEl?.classList.remove('hidden');
+                    if (this.el.previewTitleRenderEl) {
+                        this.el.previewTitleRenderEl.textContent = title ? this.encryptString(title, pass, algo) : '';
+                    }
+                    if (this.el.previewBodyRenderEl) {
+                        this.el.previewBodyRenderEl.textContent = text ? this.encryptString(text, pass, algo) : 'No comment content.';
+                    }
+                } else {
+                    this.el.previewEncryptionNoticeEl?.classList.add('hidden');
+                    if (this.el.previewTitleRenderEl) {
+                        this.el.previewTitleRenderEl.textContent = title;
+                    }
+                    if (this.el.previewBodyRenderEl) {
+                        this.el.previewBodyRenderEl.textContent = text || 'No comment content.';
+                    }
+                }
+            }
+        }, 100);
+    }
+
+    public enterNewTopicMode(initialTitle?: string): void {
+        this.isNewTopicMode = true;
+        if (this.isComposeCollapsed) {
+            this.isComposeCollapsed = false;
+            this.el.composeBodyEl?.classList.remove('collapsed');
+            if (this.el.composeCollapseArrowEl) {
+                this.el.composeCollapseArrowEl.textContent = '▼';
+            }
+        }
+        if (this.el.titleInputEl) {
+            this.el.titleInputEl.placeholder = 'Topic Title (required for new topic)...';
+            if (initialTitle) {
+                this.el.titleInputEl.value = initialTitle;
+            }
+            this.el.titleInputEl.classList.remove('required-alert');
+            this.el.titleInputEl.focus();
+        }
+    }
+
+    public sendMessage(): void {
+        const lc = `${this.lc}[${this.sendMessage.name}]`;
+        if (!this.el?.inputEl) return;
+
+        const title = this.el.titleInputEl?.value?.trim() || '';
+        const text = this.el.inputEl.value.trim();
+
+        // If in new topic mode, title is required!
+        if (this.isNewTopicMode && !title) {
+            this.el.titleInputEl?.classList.add('required-alert');
+            this.el.titleInputEl?.focus();
+            return;
+        }
+
+        if (!text) {
+            this.el.inputEl.focus();
+            return;
+        }
+
+        const isEncrypted = this.isEncryptActive;
+        const cipherAlgo = this.el.selectAlgoEl?.value || 'AES';
+        const passphrase = this.el.inputPassphraseEl?.value || ChatComponentInstance.sessionPassphrase;
+
+        if (isEncrypted && passphrase) {
+            ChatComponentInstance.sessionPassphrase = passphrase;
+            this.el.sessionKeyBadgeEl?.classList.remove('hidden');
+        }
+
+        let renderedText = text;
+        let renderedTitle: string | undefined = title || undefined;
+
+        if (isEncrypted) {
+            renderedText = this.encryptString(text, passphrase, cipherAlgo);
+            if (title) {
+                renderedTitle = this.encryptString(title, passphrase, cipherAlgo);
+            }
+        }
+
+        const addr = this.ibGibAddr ?? ROOT_ADDR;
+        const summarySlug = (title || text).slice(0, 16).replace(/\s+/g, '-');
+        const newMsg: ChatCommentItem = {
+            id: `msg-${Date.now()}`,
+            addr: `comment ${summarySlug}^gib_${Date.now()}`,
+            author: 'You',
+            avatar: '👤',
+            role: 'Keystone',
+            timestamp: 'just now',
+            title: renderedTitle,
+            text: renderedText,
+            replyCount: 0,
+            isEncrypted,
+            cipherAlgo: isEncrypted ? cipherAlgo : undefined,
+        };
+
+        this.messages.push(newMsg);
+
+        // Reset input fields
+        this.el.inputEl.value = '';
+        this.el.inputEl.style.height = 'auto';
+        if (this.el.titleInputEl) {
+            this.el.titleInputEl.value = '';
+            this.el.titleInputEl.classList.remove('required-alert');
+            this.el.titleInputEl.placeholder = 'Title (optional, required for new topic)...';
+        }
+        this.isNewTopicMode = false;
+        this.updatePreviews();
+        this.updateInputPlaceholder();
+
+        // Mutate context ibGib rel8ns if available
+        if (this.ibGib) {
+            if (!this.ibGib.rel8ns) {
+                this.ibGib.rel8ns = {};
+            }
+            if (!this.ibGib.rel8ns.chat) {
+                this.ibGib.rel8ns.chat = [];
+            }
+            this.ibGib.rel8ns.chat.push(newMsg.addr);
+        }
+
+        this.renderMessages();
+
+        // Scroll to bottom
+        if (this.el.messagesContainerEl) {
+            this.el.messagesContainerEl.scrollTop = this.el.messagesContainerEl.scrollHeight;
+        }
+
+        // Notify
+        this.dispatchEvent(new CustomEvent('space-gib-chat-message-sent', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                message: newMsg,
+                contextAddr: addr,
+            }
+        }));
+    }
+
+    private drillDown(detail: ChatDrillDownEventDetail): void {
+        const lc = `${this.lc}[${this.drillDown.name}]`;
+        this.dispatchEvent(new CustomEvent<ChatDrillDownEventDetail>(EVENT_SPACE_GIB_CHAT_DRILL_DOWN, {
+            bubbles: true,
+            composed: true,
+            detail,
+        }));
+    }
+
+    private renderMessages(): void {
+        if (!this.el?.messagesListEl || !this.el?.emptyStateEl || !this.el?.messageCountEl) return;
+
+        const count = this.messages.length;
+        this.el.messageCountEl.textContent = `${count} ${count === 1 ? 'message' : 'messages'}`;
+
+        if (count === 0) {
+            this.el.emptyStateEl.style.display = 'flex';
+            this.el.messagesListEl.innerHTML = '';
+            return;
+        }
+
+        this.el.emptyStateEl.style.display = 'none';
+        this.el.messagesListEl.innerHTML = this.messages.map(msg => `
+            <div class="chat-comment-card" data-addr="${this.escapeHtml(msg.addr)}">
+                <div class="comment-header">
+                    <div class="author-info">
+                        <span class="avatar">${msg.avatar || '👤'}</span>
+                        <span class="author-name">${this.escapeHtml(msg.author)}</span>
+                        ${msg.role ? `<span class="role-badge role-${msg.role.toLowerCase()}">${msg.role}</span>` : ''}
+                        ${msg.isEncrypted ? `<span class="encrypted-card-badge" title="Encrypted with ${this.escapeHtml(msg.cipherAlgo || 'AES')}">🔒 ${this.escapeHtml(msg.cipherAlgo || 'AES')}</span>` : ''}
+                    </div>
+                    <div class="header-meta">
+                        ${msg.anchor ? `<span class="anchor-badge" title="Code Anchor">📌 ${this.escapeHtml(msg.anchor)}</span>` : ''}
+                        <span class="timestamp">${msg.timestamp}</span>
+                    </div>
+                </div>
+                <div class="comment-body">
+                    ${msg.title ? `<h4 class="comment-title-header" ${msg.isEncrypted ? 'style="font-family: monospace; color: #34d399;"' : ''}>${this.escapeHtml(msg.title)}</h4>` : ''}
+                    <p class="comment-text" ${msg.isEncrypted ? 'style="font-family: monospace; color: #34d399; word-break: break-all;"' : ''}>${this.escapeHtml(msg.text)}</p>
+                </div>
+                <div class="comment-actions">
+                    <button class="btn-drill-down" data-addr="${this.escapeHtml(msg.addr)}" title="Drill down into this comment's nested chat">
+                        <span class="drill-icon">↳</span>
+                        <span class="drill-label">${msg.replyCount !== undefined && msg.replyCount > 0 ? `${msg.replyCount} ${msg.replyCount === 1 ? 'reply' : 'replies'}` : 'Reply / Drill In'}</span>
+                        <span class="drill-arrow">🔍</span>
+                    </button>
+                </div>
+            </div>
+        `).join('');
+
+        // Bind drill-down buttons
+        const cards = this.el.messagesListEl.querySelectorAll('.chat-comment-card');
+        cards.forEach(card => {
+            const addr = card.getAttribute('data-addr');
+            const msg = this.messages.find(m => m.addr === addr);
+            if (!msg) { return; }
+
+            const drillBtn = card.querySelector('.btn-drill-down');
+            drillBtn?.addEventListener('click', (e) => {
+                e.stopPropagation();
+                this.drillDown({
+                    addr: msg.addr,
+                    text: msg.text,
+                    author: msg.author,
+                });
+            });
+
+            // Clicking card also triggers drill down
+            card.addEventListener('click', () => {
+                this.drillDown({
+                    addr: msg.addr,
+                    text: msg.text,
+                    author: msg.author,
+                });
+            });
+        });
+    }
+
+    private escapeHtml(text: string): string {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+}

package/src/client/ui/component/nested-chat/chat/index.mts

@@ -0,0 +1,7 @@
+import { ChatComponentMeta } from "./chat.mjs";
+
+export * from "./chat.mjs";
+
+export function registerChatComponent(): ChatComponentMeta {
+    return new ChatComponentMeta();
+}

package/src/client/ui/component/nested-chat/index.mts

@@ -0,0 +1,14 @@
+import { getComponentSvc } from "@ibgib/web-gib/dist/ui/component/ibgib-component-service.mjs";
+import { NestedChatComponentMeta } from "./nested-chat.mjs";
+import { registerChatComponent } from "./chat/index.mjs";
+
+export * from "./nested-chat.mjs";
+export * from "./nested-chat-constants.mjs";
+export * from "./nested-chat-types.mjs";
+export * from "./chat/index.mjs";
+
+export async function registerNestedChatComponent(): Promise<void> {
+    const componentSvc = await getComponentSvc();
+    registerChatComponent();
+    componentSvc.registerComponentMeta(new NestedChatComponentMeta());
+}