@ibgib/space-gib 0.0.5 → 0.0.7

package/src/client/components/identity-manager/identity-manager.css

@@ -34,7 +34,6 @@ h2 {
     color: var(--clr-accent, #50fa7b);
 }
 
-
 .icon-btn {
     width: 2.2rem;
     height: 2.2rem;
@@ -75,393 +74,98 @@ h2 {
     margin-bottom: 1.5rem;
 }
 
-.card {
-    padding: 1.5rem;
-    background: rgba(255, 255, 255, 0.02);
-    border: 1px solid var(--border-color-base, rgba(255, 255, 255, 0.05));
-    border-radius: var(--radius-md, 8px);
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-}
-
-.card h3 {
-    margin: 0;
-    font-size: var(--h3-font-size, 1.15rem);
-    font-weight: var(--h3-font-weight, 500);
-    color: var(--clr-accent, #50fa7b);
-}
-
-.info-group {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-}
-
-.info-group label {
-    font-size: 0.8rem;
-    color: var(--clr-text-secondary, #b3b3b3);
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-}
-
-
-.replicas-list {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    max-height: 150px;
-    overflow-y: auto;
-}
-
-.input-row {
-    display: flex;
-    gap: 0.5rem;
-}
-
-/* Accordion raw styles */
-.accordion {
-    padding: 0;
-    overflow: hidden;
-}
-
-.accordion-header {
-    padding: 1.25rem 1.5rem;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+.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;
-    background: rgba(255, 255, 255, 0.01);
-    transition: background 0.2s ease-in-out;
-}
-
-.accordion-header:hover {
-    background: rgba(255, 255, 255, 0.03);
-}
-
-.accordion-header .chevron {
-    transition: transform 0.2s ease-in-out;
-    font-size: 0.8rem;
-    color: var(--clr-text-secondary, #b3b3b3);
-}
-
-.accordion-header.expanded .chevron {
-    transform: rotate(180deg);
-}
-
-.accordion-content {
-    max-height: 0;
-    transition: max-height 0.3s cubic-bezier(0, 1, 0, 1);
-    background: rgba(0, 0, 0, 0.15);
-    border-top: 1px solid var(--border-color-base, rgba(255, 255, 255, 0.03));
-}
-
-.accordion-content.expanded {
-    max-height: 5000px;
-    overflow-y: visible;
-    transition: max-height 0.3s cubic-bezier(1, 0, 1, 0);
-}
-
-.json-code {
-    margin: 0;
-    padding: 1.25rem;
-    font-family: var(--font-mono, monospace);
-    font-size: 0.8rem;
-    color: var(--clr-accent, #50fa7b);
-    background: transparent;
-    overflow: auto;
-    max-height: 70dvh;
-    white-space: pre-wrap;
-    word-break: break-all;
+    transition: all 0.2s ease-in-out;
 }
 
-.description {
-    font-size: 0.85rem;
-    color: var(--clr-text-secondary, #b3b3b3);
-    margin: 0;
+.action-btn:hover {
+    background: #40c767;
 }
 
-
 .hidden {
     display: none !important;
 }
 
-.info-group-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-    gap: 1rem;
-    margin-top: 0.5rem;
-}
-
-.value-text {
-    font-family: var(--font-family-base, inherit);
-    font-size: 0.9rem;
-    color: var(--text-color-base, #ffffff);
-    font-weight: 500;
-}
-
-.pools-container {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-}
-
-.pool-card {
-    padding: 1rem;
-    background: rgba(0, 0, 0, 0.25);
-    border: 1px solid var(--border-color-base, rgba(255, 255, 255, 0.05));
-    border-radius: 6px;
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-}
-
-.pool-header {
+/* Tab Buttons row */
+.tabs-row {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-    padding-bottom: 0.5rem;
-}
-
-.pool-title {
-    font-size: 0.95rem;
-    font-weight: 600;
-    color: var(--clr-accent, #50fa7b);
-}
-
-.pool-tag {
-    font-size: 0.7rem;
-    padding: 0.15rem 0.4rem;
-    border-radius: 4px;
-    font-weight: bold;
-    text-transform: uppercase;
-}
-
-.pool-tag.foreign {
-    background: rgba(255, 184, 108, 0.15);
-    border: 1px solid rgba(255, 184, 108, 0.3);
-    color: #ffb86c;
-}
-
-.pool-tag.native {
-    background: rgba(80, 250, 123, 0.1);
-    border: 1px solid rgba(80, 250, 123, 0.2);
-    color: #50fa7b;
-}
-
-.pool-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
-    gap: 0.75rem;
-    font-size: 0.85rem;
-}
-
-.pool-field {
-    display: flex;
-    flex-direction: column;
-    gap: 0.2rem;
-}
-
-.pool-field label {
-    font-size: 0.7rem;
-    color: var(--clr-text-secondary, #b3b3b3);
-    text-transform: uppercase;
-    letter-spacing: 0.03em;
-}
-
-.pool-field span {
-    color: #ffffff;
-    font-weight: 500;
-    word-break: break-all;
-}
-
-/* Key-Value Details Grid Layout */
-.kv-grid {
-    display: grid;
-    grid-template-columns: minmax(140px, 180px) 1fr;
-    gap: 0.75rem 1.5rem;
-    align-items: baseline;
-    margin-top: 1rem;
-    margin-bottom: 1.5rem;
-}
-
-.kv-label {
-    font-family: var(--font-sans);
-    font-size: 0.75rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    color: var(--clr-text-secondary, #8fa08f);
-    user-select: none;
-}
-
-.kv-value {
-    font-size: 0.9375rem;
-    color: var(--clr-text-primary, #ffffff);
-    word-break: break-all;
-}
-
-.kv-pre {
-    margin: 0;
-    padding: 0.6rem 0.8rem;
-    background: rgba(0, 0, 0, 0.3);
-    border: 1px solid var(--border-color-base, rgba(255, 255, 255, 0.05));
-    border-radius: var(--radius-sm, 6px);
-    font-family: var(--font-mono, monospace);
-    font-size: 0.8rem;
-    color: var(--clr-accent, #50fa7b);
-    max-height: 150px;
-    overflow: auto;
-    white-space: pre;
-    word-break: normal;
+    gap: 1rem;
+    margin-top: 0.5rem;
 }
 
-/* Timeline Scrubber Navigation */
-.scrubber-nav {
+.tabs-list {
     display: flex;
-    align-items: center;
-    justify-content: center;
     gap: 0.5rem;
-    padding: 0.75rem;
-    background: rgba(0, 0, 0, 0.2);
-    border: 1px solid var(--border-color-base, rgba(255, 255, 255, 0.05));
-    border-radius: var(--radius-md, 8px);
-    margin-top: 1rem;
-    margin-bottom: 1.5rem;
-}
-
-.scrubber-info {
-    font-family: var(--font-mono, monospace);
-    font-size: 0.85rem;
-    color: var(--clr-accent, #50fa7b);
-    min-width: 120px;
-    text-align: center;
-    font-weight: 500;
+    overflow-x: auto;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    padding-bottom: 0.25rem;
+    flex-grow: 1;
 }
 
-.scrubber-btn {
-    padding: 0.4rem 0.8rem;
-    font-size: 0.8rem;
-    min-width: 2.2rem;
+.tabs-list::-webkit-scrollbar {
+    display: none;
 }
 
-/* Pool Details & Challenges/Binding Map styling */
-.pool-details {
-    margin-top: 0.75rem;
-    border-top: 1px solid rgba(255, 255, 255, 0.05);
-    padding-top: 0.5rem;
-}
-
-.pool-details-summary {
-    font-size: 0.8rem;
-    font-weight: 600;
+.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;
-    user-select: none;
-    outline: none;
-    padding: 0.25rem 0;
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
-    transition: color var(--t-fast, 120ms ease);
-}
-
-.pool-details-summary:hover {
-    color: var(--clr-accent, #78f87e);
-}
-
-.pool-challenges-list {
-    margin-top: 0.5rem;
-    display: flex;
-    flex-direction: column;
-    gap: 0.4rem;
-    max-height: 180px;
-    overflow-y: auto;
-    padding-right: 0.25rem;
-    border: 1px solid rgba(255, 255, 255, 0.05);
-    background: rgba(0, 0, 0, 0.15);
-    border-radius: 4px;
-    padding: 0.5rem;
-}
-
-.pool-challenge-item {
-    display: flex;
-    justify-content: space-between;
+    transition: all 0.2s ease-in-out;
+    white-space: nowrap;
+    display: inline-flex;
     align-items: center;
-    background: rgba(255, 255, 255, 0.02);
-    border: 1px solid rgba(255, 255, 255, 0.03);
-    border-radius: 4px;
-    padding: 0.35rem 0.5rem;
-    font-size: 0.75rem;
-    font-family: var(--font-mono, monospace);
 }
 
-.challenge-id {
-    color: var(--clr-text-secondary, #8fa08f);
-    font-weight: 500;
+.tab-btn:hover {
+    background: rgba(255, 255, 255, 0.08);
+    color: var(--clr-accent, #50fa7b);
+    border-color: rgba(120, 248, 126, 0.2);
 }
 
-.challenge-hash {
-    color: var(--clr-accent, #78f87e);
-    word-break: break-all;
-    margin-left: 1rem;
-    text-align: right;
+.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);
 }
 
-.pool-binding-map {
-    margin-top: 0.5rem;
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
-    gap: 0.4rem;
-    max-height: 200px;
-    overflow-y: auto;
-    padding-right: 0.25rem;
-    border: 1px solid rgba(255, 255, 255, 0.05);
-    background: rgba(0, 0, 0, 0.15);
-    border-radius: 4px;
-    padding: 0.5rem;
+.tab-btn.global-active {
+    border-style: double;
+    border-width: 3px;
 }
 
-.binding-bucket {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    background: rgba(255, 255, 255, 0.02);
-    border: 1px solid rgba(255, 255, 255, 0.03);
-    border-radius: 4px;
-    padding: 0.35rem;
-    font-family: var(--font-mono, monospace);
+.tab-btn.global-active::after {
+    content: " (active)";
     font-size: 0.75rem;
+    font-style: italic;
+    opacity: 0.8;
+    margin-left: 0.25rem;
 }
 
-.binding-key {
+.close-tab-button {
+    font-size: 0.85rem;
     color: var(--clr-text-secondary, #8fa08f);
-    font-weight: bold;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-    width: 100%;
-    text-align: center;
-    padding-bottom: 0.15rem;
-    margin-bottom: 0.15rem;
-}
-
-.binding-ids {
-    display: flex;
-    flex-direction: column;
-    gap: 0.15rem;
-    width: 100%;
-    align-items: center;
+    transition: color 0.2s ease-in-out;
+    margin-left: 0.5rem;
+    line-height: 1;
 }
 
-.binding-id-tag {
-    font-size: 0.65rem;
-    background: rgba(120, 248, 126, 0.08);
-    color: var(--clr-accent, #78f87e);
-    padding: 0.05rem 0.25rem;
-    border-radius: 3px;
-    width: 100%;
-    text-align: center;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+.close-tab-button:hover {
+    color: var(--clr-danger, #ff5555) !important;
 }

package/src/client/components/identity-manager/identity-manager.html

@@ -15,99 +15,5 @@
             <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 id="identity-details-view" class="details-view hidden">
-            <!-- Details for the active Domain Identity -->
-            <div class="card">
-                <h3>Domain Identity Details</h3>
-
-                <!-- History Scrubber Navigation -->
-                <div id="history-scrubber" class="scrubber-nav">
-                    <button id="btn-scrub-first" class="action-btn secondary scrubber-btn"
-                        title="First Frame (Genesis)">|&lt;</button>
-                    <button id="btn-scrub-prev10" class="action-btn secondary scrubber-btn"
-                        title="Back 10 Frames">&lt;&lt; 10</button>
-                    <button id="btn-scrub-prev" class="action-btn secondary scrubber-btn"
-                        title="Previous Frame">&lt;</button>
-                    <span id="scrubber-status" class="scrubber-info">Frame - / -</span>
-                    <button id="btn-scrub-next" class="action-btn secondary scrubber-btn"
-                        title="Next Frame">&gt;</button>
-                    <button id="btn-scrub-next10" class="action-btn secondary scrubber-btn" title="Forward 10 Frames">10
-                        &gt;&gt;</button>
-                    <button id="btn-scrub-latest" class="action-btn secondary scrubber-btn"
-                        title="Latest Frame (Tip)">&gt;|</button>
-                </div>
-
-                <!-- Key-Value Grid -->
-                <div class="kv-grid">
-                    <div class="kv-label">Username</div>
-                    <div id="identity-name" class="kv-value">-</div>
-
-                    <div class="kv-label">Description</div>
-                    <div id="identity-description" class="kv-value">-</div>
-
-                    <div class="kv-label">Verifiable Address</div>
-                    <code id="identity-addr" class="address-code"></code>
-
-                    <div class="kv-label">Generation (n)</div>
-                    <div id="identity-gen" class="kv-value">-</div>
-
-                    <div class="kv-label">Timestamp</div>
-                    <div id="identity-timestamp" class="kv-value">-</div>
-
-                    <div class="kv-label">UUID</div>
-                    <div id="identity-uuid" class="kv-value">-</div>
-
-                    <div class="kv-label">Frame Details</div>
-                    <div class="kv-value">
-                        <pre id="identity-frame-details" class="kv-pre">-</pre>
-                    </div>
-
-                    <div class="kv-label">Aggr. Details</div>
-                    <div class="kv-value">
-                        <pre id="identity-aggr-details" class="kv-pre">-</pre>
-                    </div>
-                </div>
-
-                <div class="action-row">
-                    <button id="btn-set-active" class="action-btn">Set as Active Identity</button>
-                    <button id="btn-verify-chain" class="action-btn secondary">Verify Identity Chain</button>
-                    <!-- <button id="btn-sync-identity" class="action-btn" disabled>Sync Identity & Data</button> -->
-                </div>
-                <div id="verification-status" class="status-msg hidden"></div>
-            </div>
-
-            <!-- Challenge Pools Card -->
-            <div class="card">
-                <h3>Challenge Pools</h3>
-                <div id="pools-container" class="pools-container">
-                    <!-- Dynamic pools list gets injected here -->
-                </div>
-            </div>
-
-            <!-- Replicas / Sync Peers Repository Manager -->
-            <!-- <div class="card">
-                <h3>Replication & Spaces</h3>
-                <p class="description">Manage remote space providers where this identity's data is replicated.</p>
-                <div id="replicas-list" class="replicas-list"> -->
-            <!-- Configured space URLs listed here -->
-            <!-- </div>
-                <div class="input-row">
-                    <input type="url" id="input-replica-url" placeholder="https://space.example.com/api" class="text-input" disabled>
-                    <button id="btn-add-replica" class="action-btn secondary" disabled>Add Space</button>
-                </div>
-            </div> -->
-
-            <!-- Raw Keystone Timeline Explorer -->
-            <div class="card accordion">
-                <div id="raw-accordion-header" class="accordion-header">
-                    <span>Raw Keystone Timeline (JSON)</span>
-                    <span class="chevron">▼</span>
-                </div>
-                <div id="raw-accordion-content" class="accordion-content">
-                    <pre id="raw-keystone-json" class="json-code"></pre>
-                </div>
-            </div>
-        </div>
     </div>
 </div>