@ibgib/space-gib 0.0.33 → 0.0.35

package/src/client/ui/component/notes-inspector/notes-inspector.css

@@ -0,0 +1,244 @@
+:host {
+    display: block;
+    width: 100%;
+    height: 100%;
+    color: #e2e8f0;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    font-size: 13px;
+    background: transparent;
+}
+
+.notes-inspector-root {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background: rgba(10, 14, 25, 0.95);
+    box-sizing: border-box;
+}
+
+/* Header */
+.inspector-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 14px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+    background: rgba(18, 25, 42, 0.6);
+}
+
+.inspector-title-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.inspector-icon {
+    font-size: 15px;
+}
+
+.inspector-title {
+    font-weight: 600;
+    font-size: 13px;
+    color: #f1f5f9;
+    letter-spacing: 0.2px;
+}
+
+.btn-inspector-close {
+    background: transparent;
+    border: none;
+    color: #94a3b8;
+    font-size: 14px;
+    cursor: pointer;
+    padding: 2px 6px;
+    border-radius: 4px;
+    line-height: 1;
+    transition: background 0.15s, color 0.15s;
+}
+
+.btn-inspector-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f8fafc;
+}
+
+/* Scrollable Content */
+.inspector-scroll-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+/* Inspector Cards */
+.inspector-card {
+    background: rgba(18, 25, 42, 0.7);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 6px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+
+.card-header {
+    display: flex;
+    align-items: center;
+    padding: 8px 12px;
+    background: rgba(255, 255, 255, 0.03);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    gap: 6px;
+}
+
+.card-icon {
+    font-size: 13px;
+}
+
+.card-title {
+    font-size: 11.5px;
+    font-weight: 600;
+    color: #cbd5e1;
+    flex: 1;
+}
+
+.badge-line {
+    font-size: 10px;
+    font-family: monospace;
+    color: #ffd166;
+    background: rgba(255, 209, 102, 0.1);
+    border: 1px solid rgba(255, 209, 102, 0.25);
+    padding: 1px 6px;
+    border-radius: 4px;
+}
+
+.card-body {
+    padding: 10px 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+/* File Path & Code Snippet */
+.file-path-row {
+    font-family: monospace;
+    font-size: 11.5px;
+    color: #818cf8;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.code-snippet-box {
+    background: #080c14;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 4px;
+    padding: 8px;
+    max-height: 160px;
+    overflow: auto;
+}
+
+.code-snippet-box pre {
+    margin: 0;
+    font-family: "Fira Code", Consolas, Monaco, monospace;
+    font-size: 11px;
+    line-height: 1.45;
+    color: #cbd5e1;
+}
+
+.code-added {
+    color: #78f87e;
+    background: rgba(120, 248, 126, 0.12);
+    display: block;
+}
+
+.card-actions {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 4px;
+}
+
+.btn-primary-action {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    background: #6366f1;
+    color: #ffffff;
+    border: none;
+    border-radius: 4px;
+    padding: 5px 10px;
+    font-size: 11.5px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background 0.15s ease, transform 0.1s ease;
+}
+
+.btn-primary-action:hover {
+    background: #4f46e5;
+    transform: translateY(-1px);
+}
+
+.btn-primary-action:active {
+    transform: translateY(0);
+}
+
+.action-icon {
+    font-family: monospace;
+    font-weight: bold;
+}
+
+/* IbGib Metadata */
+.meta-property {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    font-size: 11.5px;
+}
+
+.prop-label {
+    color: #64748b;
+    font-size: 10.5px;
+    font-weight: 600;
+}
+
+.prop-val {
+    color: #f1f5f9;
+}
+
+.prop-val.mono {
+    font-family: monospace;
+    font-size: 11px;
+    color: #cbd5e1;
+    word-break: break-all;
+}
+
+.rel8ns-tree {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    padding-left: 8px;
+    margin-top: 2px;
+}
+
+.rel8n-item {
+    display: flex;
+    gap: 6px;
+    font-size: 11px;
+}
+
+.rel8n-key {
+    color: #818cf8;
+    font-weight: 600;
+}
+
+.rel8n-val {
+    color: #94a3b8;
+    word-break: break-all;
+}
+
+.text-success {
+    color: #34d399;
+    font-weight: 500;
+}
+
+.text-muted {
+    color: #94a3b8;
+}

package/src/client/ui/component/notes-inspector/notes-inspector.html

@@ -0,0 +1,97 @@
+<div id="notes-inspector-root" class="notes-inspector-root">
+    <!-- Header -->
+    <div class="inspector-header">
+        <div class="inspector-title-row">
+            <span class="inspector-icon">🔍</span>
+            <span class="inspector-title">Contextual Inspector</span>
+        </div>
+        <div class="inspector-header-actions">
+            <button id="btn-inspector-close" class="btn-inspector-close" title="Close Inspector">✕</button>
+        </div>
+    </div>
+
+    <!-- Inspector Content Scroll Area -->
+    <div class="inspector-scroll-content">
+        <!-- Card 1: Referenced Code / Artifact -->
+        <div class="inspector-card">
+            <div class="card-header">
+                <span class="card-icon">📄</span>
+                <span class="card-title">Referenced Code</span>
+                <span id="anchor-badge" class="badge-line">L1080</span>
+            </div>
+            <div class="card-body">
+                <div class="file-path-row">
+                    <span id="inspector-file-path" class="file-path" title="src/client/ui/shell/space-gib-shell-service.mts">src/client/ui/shell/space-gib-shell-service.mts</span>
+                </div>
+                <div class="code-snippet-box">
+                    <pre><code id="inspector-code-snippet">1079: 
+1080: const goToCosmos = () => {
+1081:     this.switchToSpacesMode();
+1082:     this.cosmosNavigatorInstance?.setZoomState('cosmos');
+1083:     this.setActiveActivityBarButton('cosmos');
+1084:<span class="code-added">+    this.showLeftPanelView('cosmos');</span>
+1085: };</code></pre>
+                </div>
+                <div class="card-actions">
+                    <button id="btn-view-in-code" class="btn-primary-action" title="Jump to Code Editor in Code Galaxy">
+                        <span class="action-icon">&lt;/&gt;</span>
+                        <span class="action-label">View in Code Galaxy</span>
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Card 2: IbGib Node Inspector -->
+        <div class="inspector-card">
+            <div class="card-header">
+                <span class="card-icon">🧬</span>
+                <span class="card-title">IbGib Node Inspector</span>
+            </div>
+            <div class="card-body">
+                <div class="meta-property">
+                    <span class="prop-label">Address:</span>
+                    <span id="node-addr" class="prop-val mono">comment 12-space-sync-bug^gib_4f9a</span>
+                </div>
+                <div class="meta-property">
+                    <span class="prop-label">Author:</span>
+                    <span id="node-author" class="prop-val">👤 @bill (Keystone: 0E0F5A...)</span>
+                </div>
+                <div class="meta-property">
+                    <span class="prop-label">Space:</span>
+                    <span id="node-space" class="prop-val">notes_space_1 (continuous timeline)</span>
+                </div>
+                <div class="meta-property">
+                    <span class="prop-label">Rel8ns:</span>
+                    <div class="rel8ns-tree">
+                        <div class="rel8n-item">
+                            <span class="rel8n-key">target:</span>
+                            <span class="rel8n-val mono">b2t_file^ABC123@code_galaxy/main</span>
+                        </div>
+                        <div class="rel8n-item">
+                            <span class="rel8n-key">past:</span>
+                            <span class="rel8n-val mono">comment^gib_prev_9a2</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Card 3: Security & Encryption -->
+        <div class="inspector-card">
+            <div class="card-header">
+                <span class="card-icon">🛡️</span>
+                <span class="card-title">Security &amp; Integrity</span>
+            </div>
+            <div class="card-body">
+                <div class="meta-property">
+                    <span class="prop-label">AuthN / AuthZ:</span>
+                    <span class="prop-val text-success">✓ Keystone Verified</span>
+                </div>
+                <div class="meta-property">
+                    <span class="prop-label">Payload Encryption:</span>
+                    <span id="node-encryption" class="prop-val text-muted">Plaintext (Signed)</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

package/src/client/ui/component/notes-inspector/notes-inspector.mts

@@ -0,0 +1,152 @@
+import thisCss from "./notes-inspector.css";
+import thisHtml from "./notes-inspector.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 {
+    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 NOTES_INSPECTOR_COMPONENT_NAME = 'space-gib-notes-inspector';
+
+/**
+ * Metadata factory for space-gib-notes-inspector Web Component.
+ */
+export class NotesInspectorComponentMeta extends IbGibDynamicComponentMetaBase {
+    protected lc: string = `[${NotesInspectorComponentMeta.name}]`;
+
+    routeRegExp?: RegExp = new RegExp(`^${NOTES_INSPECTOR_COMPONENT_NAME}$`);
+    componentName = NOTES_INSPECTOR_COMPONENT_NAME;
+
+    constructor() {
+        super(getComponentCtorArg());
+        if (!customElements.get(this.componentName)) {
+            customElements.define(this.componentName, NotesInspectorComponentInstance);
+        }
+    }
+
+    async createInstance({
+        path,
+        ibGibAddr
+    }: {
+        path: string;
+        ibGibAddr: IbGibAddr;
+    }): Promise<IbGibDynamicComponentInstance> {
+        const component = document.createElement(this.componentName) as NotesInspectorComponentInstance;
+        await component.initialize({
+            ibGibAddr: ibGibAddr || ROOT_ADDR,
+            meta: this,
+            html: thisHtml,
+            css: [thisCss],
+        });
+        return component;
+    }
+}
+
+/**
+ * Elements inside Shadow Root.
+ */
+export interface NotesInspectorElements extends ElementsBase {
+    rootEl: HTMLDivElement;
+    filePathEl: HTMLSpanElement;
+    codeSnippetEl: HTMLElement;
+    anchorBadgeEl: HTMLSpanElement;
+    btnViewInCodeEl: HTMLButtonElement;
+    btnCloseEl: HTMLButtonElement;
+    nodeAddrEl: HTMLSpanElement;
+    nodeAuthorEl: HTMLSpanElement;
+    nodeSpaceEl: HTMLSpanElement;
+    nodeEncryptionEl: HTMLSpanElement;
+    contentEl: HTMLDivElement;
+}
+
+/**
+ * Contextual Inspector Component Instance.
+ */
+export class NotesInspectorComponentInstance
+    extends IbGibDynamicComponentInstanceBase<IbGib_V1, NotesInspectorElements>
+    implements IbGibDynamicComponentInstance<IbGib_V1, NotesInspectorElements> {
+
+    protected lc: string = `[${NotesInspectorComponentInstance.name}]`;
+
+    private currentFile: string = 'src/client/ui/shell/space-gib-shell-service.mts';
+    private currentLine: number = 1080;
+
+    get el(): NotesInspectorElements {
+        if (!this.elements) {
+            throw new Error(`elements is not defined in ${this.lc}`);
+        }
+        return this.elements;
+    }
+
+    override async created(): Promise<void> {
+        const shadow = this.shadowRoot!;
+        this.elements = {
+            rootEl: shadow.getElementById('notes-inspector-root') as HTMLDivElement,
+            filePathEl: shadow.getElementById('inspector-file-path') as HTMLSpanElement,
+            codeSnippetEl: shadow.getElementById('inspector-code-snippet') as HTMLElement,
+            anchorBadgeEl: shadow.getElementById('anchor-badge') as HTMLSpanElement,
+            btnViewInCodeEl: shadow.getElementById('btn-view-in-code') as HTMLButtonElement,
+            btnCloseEl: shadow.getElementById('btn-inspector-close') as HTMLButtonElement,
+            nodeAddrEl: shadow.getElementById('node-addr') as HTMLSpanElement,
+            nodeAuthorEl: shadow.getElementById('node-author') as HTMLSpanElement,
+            nodeSpaceEl: shadow.getElementById('node-space') as HTMLSpanElement,
+            nodeEncryptionEl: shadow.getElementById('node-encryption') as HTMLSpanElement,
+            contentEl: shadow.getElementById('notes-inspector-root') as HTMLDivElement,
+        };
+
+        this.bindEvents();
+    }
+
+    override async disconnected(): Promise<void> {
+        // Lifecycle teardown if required
+    }
+
+    public inspectFileAnchor(opts: { file: string; line?: number; snippet?: string }): void {
+        this.currentFile = opts.file;
+        this.currentLine = opts.line || 1;
+
+        if (this.elements?.filePathEl) {
+            this.elements.filePathEl.textContent = opts.file;
+            this.elements.filePathEl.title = opts.file;
+        }
+        if (this.elements?.anchorBadgeEl) {
+            this.elements.anchorBadgeEl.textContent = `L${this.currentLine}`;
+        }
+        if (this.elements?.codeSnippetEl && opts.snippet) {
+            this.elements.codeSnippetEl.textContent = opts.snippet;
+        }
+    }
+
+    public inspectNode(opts: { addr: string; author?: string; space?: string; encryption?: string }): void {
+        if (this.elements?.nodeAddrEl) this.elements.nodeAddrEl.textContent = opts.addr;
+        if (this.elements?.nodeAuthorEl && opts.author) this.elements.nodeAuthorEl.textContent = opts.author;
+        if (this.elements?.nodeSpaceEl && opts.space) this.elements.nodeSpaceEl.textContent = opts.space;
+        if (this.elements?.nodeEncryptionEl && opts.encryption) this.elements.nodeEncryptionEl.textContent = opts.encryption;
+    }
+
+    private bindEvents(): void {
+        this.el.btnViewInCodeEl?.addEventListener('click', () => {
+            this.dispatchEvent(new CustomEvent('space-gib-jump-to-code-requested', {
+                detail: {
+                    file: this.currentFile,
+                    line: this.currentLine,
+                },
+                bubbles: true,
+                composed: true,
+            }));
+        });
+
+        this.el.btnCloseEl?.addEventListener('click', () => {
+            this.dispatchEvent(new CustomEvent('space-gib-inspector-close-requested', {
+                bubbles: true,
+                composed: true,
+            }));
+        });
+    }
+}

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

@@ -0,0 +1,48 @@
+# space-gib-pitch Web Component Specification
+
+## 1. Overview & Architectural Role
+
+`space-gib-pitch` is an `@ibgib` Web Component that provides an investment pitch and vision overview for `space-gib`.
+It is launched when clicking the dead-center gold `💰 Pitch` button in the header or the drifting pitch node in the active cosmos view.
+
+### Investment Thesis
+- **Decentralized Digital Property**: Breaking free from monolithic SaaS silos (GitHub/GitLab) by turning repositories, files, discussions, and assets into cryptographically addressed, self-sovereign Merkle ibgibs.
+- **In-Band Living Discussions**: Comments and discussions travel directly with branch DAGs via inverted soft rel8ns (`data.targetAddr`), eliminating external database lock-in.
+- **Worktree Branch Multi-Space Topology**: Lightweight, parallel branches operating across specialized code, discussion, and asset spaces.
+- **Attribution & Economy**: Deterministic cryptographic identity through Keystones.
+
+---
+
+## 2. Component Design & Capabilities
+
+- **Tag Name**: `<space-gib-pitch>`
+- **Host Container**: `#pitch-component-container` inside `#view-pitch` in `#center-panel-content`
+- **Header**:
+  - Gold badge: `✦ Investment Pitch & Vision ✦`
+  - Title: `space-gib: The Next Generation Decentralized Substrate`
+  - Tagline: `Decentralized VCS, living in-band discussions, and cryptographically attributed spaces.`
+- **Pillars / Highlights**:
+  - `🌐 Beyond Centralized Code Silos`: Sovereign ownership, immune to platform deplatforming.
+  - `⚡ Inverted Soft Rel8ns`: Cryptographic Merkle-links with decoupled graph availability.
+  - `🌿 Parallel Worktree Branches`: Scalable multi-space projections.
+  - `🔐 Keystone Cryptographic Attribution`: Built-in zero-knowledge identity and session sync.
+- **Action Tier**:
+  - `💰 Back space-gib (Join Cosmic Syndicate)`
+  - `✉️ Contact Founders`
+  - `↺ Return to Workspace` (dispatches `space-gib-pitch-closed` to restore previous workspace view)
+
+---
+
+## 3. Custom Event Contracts
+
+- `space-gib-pitch-closed`: Dispatched when the user clicks "Return to Workspace", instructing `SpaceGibShellService` to switch back to spaces/repos.
+- `space-gib-pitch-invest-clicked`: Dispatched when the user clicks "Back space-gib".
+
+---
+
+## 4. Lifecycle & Integration
+
+- Scaffolds `PitchComponentMeta` (extends `IbGibDynamicComponentMetaBase`)
+- Scaffolds `PitchComponentInstance` (extends `IbGibDynamicComponentInstanceBase<IbGib_V1, PitchElements>`)
+- Implements `initialize()`, `created()`, `disconnected(): Promise<void>`
+- Registered in `SpaceGibShellService` via `registerPitchComponent()`.

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

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