@ibgib/space-gib 0.0.33 → 0.0.34

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

@@ -0,0 +1,646 @@
+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: src/index.ts';
+        } 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 {
+            this.el.contextTitleEl.textContent = `Thread: ${ib.slice(0, 20)}`;
+        }
+    }
+
+    private loadInitialMessages(): void {
+        const addr = this.ibGibAddr ?? ROOT_ADDR;
+        const { ib } = getIbAndGib({ ibGibAddr: addr });
+
+        if (ib.includes('boundary') || ib.includes('try/catch') || ib.includes('boot')) {
+            // Nested replies for the error boundary comment thread
+            this.messages = [
+                {
+                    id: 'submsg-1',
+                    addr: 'comment boundary-rationale^gib_b1',
+                    author: 'Charlie',
+                    avatar: '👩‍🔬',
+                    role: 'Peer',
+                    timestamp: '3m ago',
+                    text: 'Wrapping boot() in a top-level error boundary prevents uncaught rejections from freezing the virtual canvas.',
+                    replyCount: 1,
+                },
+                {
+                    id: 'submsg-2',
+                    addr: 'comment boundary-event^gib_b2',
+                    author: 'Bob',
+                    avatar: '👨‍🚀',
+                    role: 'Peer',
+                    timestamp: '1m ago',
+                    text: 'Agreed! Let us also dispatch an EVENT_IBGIB_UI_MESSAGE so the status bar shows the error banner.',
+                    replyCount: 0,
+                }
+            ];
+        } else if (ib.includes('rationale') || ib.includes('index.ts') || ib.includes('indexeddb')) {
+            // Nested replies for the architectural rationale comment thread
+            this.messages = [
+                {
+                    id: 'submsg-3',
+                    addr: 'comment offline-merkle^gib_a1',
+                    author: 'Bob',
+                    avatar: '👨‍🚀',
+                    role: 'Peer',
+                    timestamp: '5m ago',
+                    text: 'The local IndexedDB space works completely offline without network roundtrips.',
+                    replyCount: 0,
+                },
+                {
+                    id: 'submsg-4',
+                    addr: 'comment sync-keystone^gib_a2',
+                    author: 'Alice',
+                    avatar: '👩‍💻',
+                    role: 'Keystone',
+                    timestamp: '2m ago',
+                    text: 'Exactly! Remote peer hubs synchronize automatically via WebSockets whenever connectivity is detected.',
+                    replyCount: 0,
+                }
+            ];
+        } else {
+            // Default file / root comments
+            this.messages = [
+                {
+                    id: 'msg-1',
+                    addr: 'comment index-arch-rationale^gib_1',
+                    author: 'Alice',
+                    avatar: '👩‍💻',
+                    role: 'Keystone',
+                    timestamp: '10m ago',
+                    anchor: 'src/index.ts#L1-18',
+                    text: 'Architectural Rationale: This entrypoint initializes the virtual repository workspace within the browser’s local IndexedDB metaspace.',
+                    replyCount: 2,
+                },
+                {
+                    id: 'msg-2',
+                    addr: 'comment index-try-catch^gib_2',
+                    author: 'Bob',
+                    avatar: '👨‍🚀',
+                    role: 'Peer',
+                    timestamp: '6m ago',
+                    anchor: 'src/index.ts#L36-42',
+                    text: 'Looks super clean! Should we add an async try/catch boundary around boot() as well?',
+                    replyCount: 2,
+                },
+                {
+                    id: 'msg-3',
+                    addr: 'comment index-agent-analysis^gib_3',
+                    author: 'Agent',
+                    avatar: '🤖',
+                    role: 'Agent',
+                    timestamp: '4m ago',
+                    anchor: 'src/index.ts#L43-50',
+                    text: 'Static analysis confirms that initOrchestration provides a root failure boundary.',
+                    replyCount: 0,
+                }
+            ];
+        }
+    }
+
+    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());
+}

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

@@ -0,0 +1,12 @@
+
+export const NESTED_CHAT_COMPONENT_NAME = 'space-gib-nested-chat';
+export const CHAT_COMPONENT_NAME = 'space-gib-chat';
+
+export const EVENT_SPACE_GIB_CHAT_DRILL_DOWN = 'space-gib-chat-drill-down';
+export const EVENT_SPACE_GIB_CHAT_BREADCRUMB_SELECTED = 'space-gib-chat-breadcrumb-selected';
+export const EVENT_SPACE_GIB_CHAT_CLOSED = 'space-gib-chat-closed';
+
+export const MAX_BREADCRUMB_TEXT_LENGTH = 16;
+
+export const SETTINGS_TYPE_NESTED_CHAT = 'nested-chat';
+export const NESTED_CHAT_SETTINGS_TYPE = SETTINGS_TYPE_NESTED_CHAT;