@ibgib/web-gib 0.0.52 → 0.0.56

package/src/ui/component/identity/identity-manager/IMPLEMENTATION.md

@@ -0,0 +1,100 @@
+# Identity Manager Component - Implementation Spec
+
+This document maps the implementation details for the reusable `identity-manager` component (`ibgib-identity-manager`). While developed initially inside `space-gib` as a reference implementation, it is designed to be highly decoupled and may eventually migrate down to `web-gib` for use in other downstream applications.
+
+## Core Architecture (Separation of App and Data)
+
+We advocate for a strict separation of **applications** and **data providers**:
+- **Local-First & Sync-Based**: Applications run local-first, storing user data in a local space and syncing peer-to-peer with remote data spaces/hosts via the `sync-gib` protocol.
+- **Auditable Keystone Identity**: Identity is represented by a **Domain Keystone ($I$)**—a verifiable, historical timeline of challenge-reveals. Authentication is performed by walking and verifying the evolution history of the keystone timeline.
+  - *Note on Pricing/Gas:* While the core identity protocol does not require transaction fees, downstream apps/hosts are free to implement pricing plans or gas-like charging mechanisms per node.
+- **Verification Flexibility**: In V1, the verification strategy is strictly `hash-reveal-v1`. However, the keystone architecture is designed as a generic audit log. Future challenge types could wrap cryptographic certificates, witness testimonies, or simple/trivial challenges.
+- **SSO & Custodian Delegation**: Integration with external OAuth2 providers (e.g., Google Sign-In) is a key requirement. This will likely involve delegating a "custodian status" to the hosting server/app node, allowing it to perform authorized managerial mutations on the identity timeline on behalf of the user. The cryptographic implementation details of this delegation are TBD and will be designed after the front-end is established.
+- **Delegated Authority**: To sync data, the Domain Keystone is evolved once per session to delegate signing authority to a short-lived **Session Keystone ($S$)**. The Session Keystone targets the remote storage space, solving challenges to authorize specific read/write operations without exposing the root master secrets.
+- **Backing Index & Coupling**: When initialized with a virtual address (`ROOT_ADDR`), the component manually retrieves and binds to the `"keystones"` special index `ibgib` from the local space. It also initializes and couples a local settings `ibgib` using `this.initSettings()`.
+- **Settings-driven Active Selection:** The user's active identity address is stored inside the coupled settings `ibgib` under the `general` section (`SettingsType.general`). Tab switching updates this setting reactively. Since other components (like `<ibgib-identity-header>`) bind to the same `"keystones"` index and share its settings scope, they reactively adapt to updates on the settings timeline.
+
+---
+
+## Component Role & Hierarchy
+
+The `identity-manager` functions as a tabbed/list parent component (extending `IbGibDynamicComponentInstanceBase_ParentOfTabs` or `IbGibDynamicComponentInstanceBase_Parent`) that manages one or more Domain Identities:
+
+1. **Identity List & Selection**:
+   - Renders a list of loaded/configured Domain Identities from the `"keystones"` index relation `"keystone"`.
+   - Leverages tab/list activation plumbing to switch between active identities.
+   - Saves and restores the active primary identity in the `general` settings section via `this.updateSettings()`.
+2. **Identity Creator (Child Component)**:
+   - If no identity is loaded or created, it dynamically mounts the generic `ibgib-keystone-creator` component to generate a new Genesis Keystone or import one via a master secret.
+3. **Identity Explorer / Raw Viewer**:
+   - For any selected identity, provides a "Raw View" tab/accordion.
+   - This embeds a raw explorer similar to the `ibgib-raw` component (`apps/blank-gib/src/components/common/raw/`) to display the raw JSON of the keystone frames and trace their evolutionary lineage.
+4. **Active Sync & Replicas Control**:
+   - Displays the active primary sync channel and session delegation status.
+   - Provides options to register additional remote space URLs as replicas (structured similarly to how a package manager configures repositories). V1 focuses on a single active sync channel, with structural UI support for multiple future backup peers.
+   - *Investigation:* We will analyze whether and how to securely propagate/sync the identity itself to other providers using keystone evolution.
+
+---
+
+## Component Structure
+
+Following the custom `web-gib` Web Component microframework, the component consists of:
+
+* **[identity-manager.mts](file:///c:/Users/billm/antigravity/ibgib/apps/space-gib/src/client/components/identity-manager/identity-manager.mts)**: Element definition, lifecycle hooks (`initialize`, `created`, `renderUI`), event bindings, settings management, and integration with `KeystoneService_V1`.
+* **[identity-manager.html](file:///c:/Users/billm/antigravity/ibgib/apps/space-gib/src/client/components/identity-manager/identity-manager.html)**: Markup template for Shadow DOM injection.
+* **[identity-manager.css](file:///c:/Users/billm/antigravity/ibgib/apps/space-gib/src/client/components/identity-manager/identity-manager.css)**: Glassmorphic dark styling.
+
+---
+
+## Implementation Checklist
+
+### Phase 1: Basic Scaffolding & Setup
+- [x] Scaffold `identity-manager.mts`, `.html`, and `.css` files (Reference: [@.agents/skills/ibgib-create-component/SKILL.md](file:///c:/Users/billm/antigravity/ibgib/.agents/skills/ibgib-create-component/SKILL.md)).
+- [x] Register `IdentityManagerComponentMeta` with `IbGibComponentService`.
+- [x] Expose in `SpaceGibShellService` to load `<ibgib-identity-manager>`.
+
+### Phase 2: Identity List & Settings Integration
+- [x] Initialize the component settings to track loaded Domain Identity addresses.
+- [x] Implement UI tabs for switching between identities.
+- [x] Mount `ibgib-keystone-creator` as a child view if no identity exists.
+
+### Phase 3: Raw Explorer Integration
+- [x] Integrate a child details panel showing raw keystone JSON using patterns from the `ibgib-raw` component.
+- [x] Add a "Verify Chain" button executing `validateKeystoneTimeline` and reporting status.
+
+### Phase 4: Sync & Replication Setup
+- [x] Implement inputs to configure remote sync repositories (URLs) (currently disabled for V1).
+- [x] Add sync button triggering a delegation evolution and starting the sync sequence (currently disabled for V1).
+- [x] Document the custom `web-gib` Web Component microframework (covering element lifecycles, routing, parent-child delegation, and settings/tabs state persistence).
+
+### Phase 5: UI/UX Enhancements & Bugs
+- [x] Center/align the `<ibgib-identity-manager>` component instead of having it shoved to the left (maxing out at ~66% width of the center-panel).
+- [x] Adjust scrolling behavior so the entire manager or manager-content div scrolls, instead of limiting the scroll region to the accordion detail pre-tag.
+- [x] Automatically select/activate the newly created identity keystone in the tab list upon creation.
+
+### Phase 6: Detail Views (Pools & Keystone Metadata)
+- [x] Add a details view for challenge pools on the keystone (`KeystoneData_V1.challengePools`).
+- [x] Add display details for each of the main areas of the keystone included in `KeystoneData_V1` and core `IbGibData_V1` properties (e.g. `n`, `timestamp`, `uuid`, etc.).
+- [x] Support human-readable profile details (such as name, email, contact info) stored in `frameDetails` and aggregated via `checkpointDetails`/`getAggregateDetails()`.
+
+### Phase 7: Key-Value Details & History Scrubber
+- [x] Expand component max-width to fill the center panel (remove/adjust `max-width: 800px` on `:host`).
+- [x] Re-layout Domain Identity Details into an inverted key-value grid (Labels in Column 1, Values in Column 2).
+- [x] Add dedicated key-value rows for "Name" and "Description" in the details list.
+- [x] Add "Aggr. Details" displaying the aggregated details JSON in a formatted, scrollable pre-tag.
+- [x] Add "Frame Details" displaying the current frame's `frameDetails` JSON in a formatted, scrollable pre-tag.
+- [x] Implement history scrubber navigation (First, Back 10, Back 1, Next 1, Next 10, Latest) to traverse the keystone timeline.
+
+### Phase 8: Active Identity Management
+- [x] Define reusable event constants (`EVENT_IBGIB_IDENTITY_REQUEST_CHANGE` and `EVENT_IBGIB_IDENTITY_CHANGED`) in `libs/web-gib/src/ui/ui-constants.mts`.
+- [x] Add checkbox in `<ibgib-keystone-creator>` to make the newly created identity the active one. Enforce/lock to checked if no identities exist yet.
+- [x] If checked on creation, `<ibgib-keystone-creator>` dispatches `EVENT_IBGIB_IDENTITY_REQUEST_CHANGE` containing the new keystone address.
+- [x] Add "Set as Active Identity" button to `<ibgib-identity-manager>` details view. When clicked, it dispatches `EVENT_IBGIB_IDENTITY_REQUEST_CHANGE` with the selected keystone address.
+- [x] Decouple tab clicks in `<ibgib-identity-manager>` so they only browse details via `viewIdentityDetails(addr)` without setting active identity.
+- [x] Update `<ibgib-identity-header>` to listen for `EVENT_IBGIB_IDENTITY_REQUEST_CHANGE`. On receipt, write the address to its settings timeline, update `ibGibGlobalThis.identity`, re-render, and dispatch `EVENT_IBGIB_IDENTITY_CHANGED`.
+- [x] Set `ibGibGlobalThis.identity` on `<ibgib-identity-header>` initialization using settings.
+- [x] Update `<ibgib-identity-manager>` to subscribe to `EVENT_IBGIB_IDENTITY_CHANGED` and re-render/update its "Set as Active" button state accordingly.
+- [ ] TODO: Enhance the `<ibgib-identity-header>` component to support selecting/switching between loaded identities directly from a dropdown/dropdown-like UI inside the header.
+
+### Testing Protocol
+- [ ] **Manual Testing Only**: All interactive and visual validation will be performed manually by the user to avoid token overhead from screenshot/video processing.

package/src/ui/component/identity/identity-manager/identity-manager.css

@@ -0,0 +1,178 @@
+:host {
+    display: block;
+    width: 100%;
+    max-width: 100%;
+    margin: 1rem auto;
+    font-family: var(--font-family-base, inherit);
+    font-size: var(--font-size-base, 1rem);
+    color: var(--text-color-base, var(--clr-text-primary, #ffffff));
+    box-sizing: border-box;
+}
+
+.component-container {
+    padding: 2rem;
+    background: var(--side-panel-tab-content-background-color, var(--clr-bg-glass, rgba(20, 20, 25, 0.6)));
+    backdrop-filter: blur(16px);
+    border-radius: var(--radius-lg, 12px);
+    border: var(--border-width-base, 1px) var(--border-style-base, solid) var(--border-color-base, var(--clr-border, rgba(255, 255, 255, 0.1)));
+    box-shadow: var(--shadow-card, 0 8px 32px 0 rgba(0, 0, 0, 0.37));
+}
+
+header {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin-bottom: 2rem;
+    border-bottom: 1px solid var(--border-color-base, rgba(255, 255, 255, 0.1));
+    padding-bottom: 1rem;
+}
+
+h2 {
+    margin: 0;
+    font-size: var(--h2-font-size, 1.5rem);
+    font-weight: var(--h2-font-weight, 600);
+    color: var(--clr-accent, #50fa7b);
+}
+
+.icon-btn {
+    width: 2.2rem;
+    height: 2.2rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--button-background-color-base, rgba(255, 255, 255, 0.05));
+    border: 1px solid var(--button-border-color-base, rgba(255, 255, 255, 0.1));
+    border-radius: var(--button-border-radius-base, 50%);
+    color: var(--button-text-color-base, #ffffff);
+    font-size: 1.2rem;
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+}
+
+.icon-btn:hover {
+    background: var(--button-hover-background-color, var(--clr-accent, #50fa7b));
+    color: var(--button-hover-text-color, #1a1a24);
+    border-color: var(--button-hover-border-color, var(--clr-accent, #50fa7b));
+}
+
+.content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.5rem;
+    width: 100%;
+}
+
+.content>* {
+    width: 100%;
+    margin: 0 auto;
+}
+
+.placeholder-view {
+    padding: 3rem 1rem;
+    text-align: center;
+    background: rgba(0, 0, 0, 0.15);
+    border-radius: var(--radius-md, 8px);
+    border: 1px dashed var(--border-color-base, rgba(255, 255, 255, 0.1));
+}
+
+.placeholder-view p {
+    color: var(--clr-text-secondary, #b3b3b3);
+    margin-bottom: 1.5rem;
+}
+
+.action-btn {
+    padding: 0.6rem 1.2rem;
+    background: var(--clr-accent, #50fa7b);
+    border: none;
+    border-radius: var(--radius-sm, 4px);
+    color: #1a1a24;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+}
+
+.action-btn:hover {
+    background: #40c767;
+}
+
+.hidden {
+    display: none !important;
+}
+
+/* Tab Buttons row */
+.tabs-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 1rem;
+    margin-top: 0.5rem;
+}
+
+.tabs-list {
+    display: flex;
+    gap: 0.5rem;
+    overflow-x: auto;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    padding-bottom: 0.25rem;
+    flex-grow: 1;
+}
+
+.tabs-list::-webkit-scrollbar {
+    display: none;
+}
+
+.tab-btn {
+    padding: 0.55rem 1.25rem;
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    border-radius: var(--radius-sm, 6px);
+    color: var(--clr-text-secondary, #8fa08f);
+    font-family: var(--font-sans, inherit);
+    font-size: 0.9rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+    white-space: nowrap;
+    display: inline-flex;
+    align-items: center;
+}
+
+.tab-btn:hover {
+    background: rgba(255, 255, 255, 0.08);
+    color: var(--clr-accent, #50fa7b);
+    border-color: rgba(120, 248, 126, 0.2);
+}
+
+.tab-btn.active {
+    background: rgba(80, 250, 123, 0.1);
+    color: var(--clr-accent, #50fa7b);
+    border-color: var(--clr-accent-dim, rgba(120, 248, 126, 0.35));
+    box-shadow: 0 0 10px rgba(120, 248, 126, 0.05);
+}
+
+.tab-btn.global-active {
+    border-style: double;
+    border-width: 3px;
+}
+
+.tab-btn.global-active::after {
+    content: " (active)";
+    font-size: 0.75rem;
+    font-style: italic;
+    opacity: 0.8;
+    margin-left: 0.25rem;
+}
+
+.close-tab-button {
+    font-size: 0.85rem;
+    color: var(--clr-text-secondary, #8fa08f);
+    transition: color 0.2s ease-in-out;
+    margin-left: 0.5rem;
+    line-height: 1;
+}
+
+.close-tab-button:hover {
+    color: var(--clr-danger, #ff5555) !important;
+}

package/src/ui/component/identity/identity-manager/identity-manager.html

@@ -0,0 +1,19 @@
+<div id="container" class="component-container">
+    <header id="identity-manager-header">
+        <h2 id="title">Identity Manager</h2>
+        <div class="tabs-row">
+            <div id="identity-tabs" class="tabs-list">
+                <!-- Tabs will be dynamically injected here -->
+            </div>
+            <button id="btn-add-identity" class="icon-btn" title="Create or Load Identity">+</button>
+        </div>
+    </header>
+
+    <div id="identity-manager-content" class="content">
+        <!-- Active child or keystone-creator gets injected here -->
+        <div id="no-identity-placeholder" class="placeholder-view">
+            <p>No Domain Identities loaded. Create or load one to begin.</p>
+            <button id="btn-create-placeholder" class="action-btn">Create/Load Identity</button>
+        </div>
+    </div>
+</div>