@ibgib/web-gib 0.0.52 → 0.0.56

package/src/ui/component/identity/keystone-scrubber/SCRUBBER_IMPLEMENTATION.md

@@ -0,0 +1,33 @@
+# Keystone Scrubber Implementation Plan
+
+> [!WARNING]
+> Skip automated browser testing for these component changes. The user (Bill) will perform manual verification to avoid token usage from screenshots/images.
+
+## Driving Problem
+In the previous monolithic parent/child component refactoring, the `<ibgib-keystone-details>` component was designed to handle *both* displaying metadata for a single keystone frame, and managing/scrubbing through the timeline history.
+Because it was a child component managed by the `<ibgib-identity-manager>` tab view, it was instantiated dynamically via `getComponentInstance()`. But since it was not yet injected into the DOM, its custom element `connectedCallback()` and `created()` methods had not run. Consequently, `loadIbGib()` was never triggered, leaving its `this.ibGib` property `undefined` at initialization time and throwing errors when the parent manager attempted to read its backing data.
+
+## Solution: Separating Concerns with a Scrubber Parent Component
+To resolve this, we will introduce a new `<ibgib-keystone-scrubber>` component. 
+* **`<ibgib-keystone-scrubber>` (Parent)**: Acts as the parent component for a keystone's timeline. It loads history, renders the scrubber navigation toolbar (scrub buttons and status), and acts as a `Parent` component that injects a details view child component for whichever frame address is selected.
+* **`<ibgib-keystone-details>` (Child)**: A simple, static child component that only renders the details of a *single* specific keystone address. It does not manage history or scrubber state. It overrides `initialize()` to call `loadIbGib()`, ensuring `this.ibGib` is populated immediately upon instantiation.
+
+---
+
+## Tasks Checklist
+
+- [ ] Register new component metadata
+  - [ ] Register `KeystoneScrubberComponentMeta` in [space-gib-shell-service.mts](file:///c:/Users/billm/antigravity/ibgib/apps/space-gib/src/client/ui/shell/space-gib-shell-service.mts)
+- [ ] Create Scrubber component files
+  - [ ] Create [keystone-scrubber.html](file:///c:/Users/billm/antigravity/ibgib/apps/space-gib/src/client/components/keystone-scrubber/keystone-scrubber.html) containing the scrubber header layout and a `#keystone-scrubber-content` slot
+  - [ ] Create [keystone-scrubber.css](file:///c:/Users/billm/antigravity/ibgib/apps/space-gib/src/client/components/keystone-scrubber/keystone-scrubber.css) for scrubber-specific bar and button stylings
+  - [ ] Create [keystone-scrubber.mts](file:///c:/Users/billm/antigravity/ibgib/apps/space-gib/src/client/components/keystone-scrubber/keystone-scrubber.mts) extending `IbGibDynamicComponentInstanceBase_Parent` to manage the history array and child detail views
+- [ ] Refactor details component to be static
+  - [ ] Simplify [keystone-details.html](file:///c:/Users/billm/antigravity/ibgib/apps/space-gib/src/client/components/keystone-details/keystone-details.html) to remove all scrubber header elements
+  - [ ] Simplify [keystone-details.css](file:///c:/Users/billm/antigravity/ibgib/apps/space-gib/src/client/components/keystone-details/keystone-details.css) to remove scrubber styles
+  - [ ] Modify [keystone-details.mts](file:///c:/Users/billm/antigravity/ibgib/apps/space-gib/src/client/components/keystone-details/keystone-details.mts) to extend standard `IbGibDynamicComponentInstanceBase`, load `loadIbGib()` inside `initialize()`, and remove history/scrubbing logic
+- [ ] Update Parent Identity Manager to point to Scrubber
+  - [ ] Update `getLoadedChildInfo` in [identity-manager.mts](file:///c:/Users/billm/antigravity/ibgib/apps/space-gib/src/client/components/identity-manager/identity-manager.mts) to instantiate `ibgib-keystone-scrubber` instead of `ibgib-keystone-details`
+- [ ] Compile and verify
+  - [ ] Compile space-gib via `npm run build:space-gib` (and `npm run chain:build:web-gib` if web-gib changes are needed)
+  - [ ] Restart space-gib server and manually verify tab switching and timeline scrubbing

package/src/ui/component/identity/keystone-scrubber/keystone-scrubber.css

@@ -0,0 +1,46 @@
+:host {
+    display: block;
+    width: 100%;
+    max-width: 100%;
+    margin: 0;
+    box-sizing: border-box;
+}
+
+.scrubber-container {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+/* Timeline Scrubber Navigation */
+.scrubber-nav {
+    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);
+}
+
+.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;
+}
+
+.scrubber-btn {
+    padding: 0.4rem 0.8rem;
+    font-size: 0.8rem;
+    min-width: 2.2rem;
+}
+
+.content {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}

package/src/ui/component/identity/keystone-scrubber/keystone-scrubber.html

@@ -0,0 +1,15 @@
+<div id="container" class="scrubber-container">
+    <div class="scrubber-nav">
+        <button id="btn-scrub-first" class="action-btn scrubber-btn" title="First Frame">&lt;&lt;</button>
+        <button id="btn-scrub-prev10" class="action-btn scrubber-btn" title="Back 10 Frames">-10</button>
+        <button id="btn-scrub-prev" class="action-btn scrubber-btn" title="Previous Frame">&lt;</button>
+        <span id="scrubber-status" class="scrubber-info">Loading timeline...</span>
+        <button id="btn-scrub-next" class="action-btn scrubber-btn" title="Next Frame">&gt;</button>
+        <button id="btn-scrub-next10" class="action-btn scrubber-btn" title="Forward 10 Frames">+10</button>
+        <button id="btn-scrub-latest" class="action-btn scrubber-btn" title="Latest Frame">&gt;&gt;</button>
+    </div>
+
+    <div id="keystone-scrubber-content" class="content">
+        <!-- Details component for the active frame will be injected here -->
+    </div>
+</div>

package/src/ui/component/identity/keystone-scrubber/keystone-scrubber.mts

@@ -0,0 +1,355 @@
+import thisCss from "./keystone-scrubber.css";
+import thisHtml from "./keystone-scrubber.html";
+import commonComponentStylesCss from "../../common-component-styles.css";
+
+import { extractErrorMsg } from "@ibgib/helper-gib/dist/helpers/utils-helper.mjs";
+import { IbGibAddr } from "@ibgib/ts-gib/dist/types.mjs";
+import { IbGib_V1 } from "@ibgib/ts-gib/dist/V1/types.mjs";
+import { getGibInfo } from "@ibgib/ts-gib/dist/V1/transforms/transform-helper.mjs";
+import { getIbAndGib, getIbGibAddr } from "@ibgib/ts-gib/dist/helper.mjs";
+import { KeystoneIbGib_V1 } from "@ibgib/core-gib/dist/keystone/keystone-types.mjs";
+import {
+    IbGibDynamicComponentMetaBase, IbGibDynamicComponentInstanceBase_Parent,
+} from "../../ibgib-dynamic-component-bases.mjs";
+import {
+    ElementsBase, ChildInfoBase, IbGibDynamicComponentInstance,
+    IbGibDynamicComponentInstanceInitOpts,
+} from "../../component-types.mjs";
+import { getComponentSvc } from "../../ibgib-component-service.mjs";
+import { getComponentCtorArg } from "../../../../app-bootstrap/init-orchestration.mjs";
+import { getGlobalMetaspace_waitIfNeeded } from "../../../../helpers.mjs";
+
+const logalot = false;
+
+export const KEYSTONE_SCRUBBER_COMPONENT_NAME = 'ibgib-keystone-scrubber';
+
+export class KeystoneScrubberComponentMeta extends IbGibDynamicComponentMetaBase {
+    protected lc: string = `[KeystoneScrubberComponentMeta]`;
+
+    routeRegExp?: RegExp = new RegExp(`^${KEYSTONE_SCRUBBER_COMPONENT_NAME}$`);
+    componentName = KEYSTONE_SCRUBBER_COMPONENT_NAME;
+
+    constructor() {
+        super(getComponentCtorArg());
+        if (!customElements.get(this.componentName)) {
+            customElements.define(this.componentName, KeystoneScrubberComponentInstance);
+        }
+    }
+
+    async createInstance({
+        path,
+        ibGibAddr
+    }: {
+        path: string;
+        ibGibAddr: IbGibAddr;
+    }): Promise<IbGibDynamicComponentInstance> {
+        const lc = `${this.lc}[${this.createInstance.name}]`;
+        const component = document.createElement(this.componentName) as KeystoneScrubberComponentInstance;
+        await component.initialize({
+            ibGibAddr,
+            meta: this,
+            html: thisHtml,
+            css: [commonComponentStylesCss, thisCss],
+        });
+        return component;
+    }
+}
+
+interface ScrubberTabInfo extends ChildInfoBase<IbGibDynamicComponentInstance<any, any>> {
+}
+
+interface KeystoneScrubberElements extends ElementsBase {
+    containerEl: HTMLDivElement;
+    btnScrubFirstEl: HTMLButtonElement;
+    btnScrubPrev10El: HTMLButtonElement;
+    btnScrubPrevEl: HTMLButtonElement;
+    scrubberStatusEl: HTMLSpanElement;
+    btnScrubNextEl: HTMLButtonElement;
+    btnScrubNext10El: HTMLButtonElement;
+    btnScrubLatestEl: HTMLButtonElement;
+}
+
+export class KeystoneScrubberComponentInstance
+    extends IbGibDynamicComponentInstanceBase_Parent<KeystoneIbGib_V1, KeystoneScrubberElements, ScrubberTabInfo>
+    implements IbGibDynamicComponentInstance<KeystoneIbGib_V1, KeystoneScrubberElements> {
+
+    protected override lc: string = `[KeystoneScrubberComponentInstance]`;
+
+    private history: string[] = [];
+    private currentFrameIndex: number = -1;
+    private lastLoadedHistoryAddr: string | null = null;
+
+    constructor() {
+        console.log('yes this is being updated! I am just wondering if I am seeing old code in the browser, i.e., if refresh is happening or just getting cache (I: 6599db11c1086062b8f5e86db89cba26)')
+        const lc = `${KeystoneScrubberComponentInstance.name}[ctor]`;
+        if (logalot) { console.log(`${lc} (I: 3adca837d5c898d8e839d23c59538126)`); }
+        super();
+    }
+
+    override async initialize(opts: IbGibDynamicComponentInstanceInitOpts): Promise<void> {
+        const lc = `${this.lc}[${this.initialize.name}]`;
+        try {
+            if (logalot) { console.log(`${lc} starting... (I: 75eecfc01af7f3fa9897932ec5457526)`); }
+
+            await super.initialize(opts);
+            await this.loadIbGib();
+
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+            throw error;
+        } finally {
+            if (logalot) { console.log(`${lc} complete.`); }
+        }
+    }
+
+    override async created(): Promise<void> {
+        const lc = `${this.lc}[${this.created.name}]`;
+        try {
+            if (logalot) { console.log(`${lc} starting... (I: bc16e6212928658ed8034c75b6279526)`); }
+
+            this.elements = {} as KeystoneScrubberElements;
+
+            const shadow = this.shadowRoot!;
+            this.elements.containerEl = shadow.getElementById('container') as HTMLDivElement;
+            this.elements.btnScrubFirstEl = shadow.getElementById('btn-scrub-first') as HTMLButtonElement;
+            this.elements.btnScrubPrev10El = shadow.getElementById('btn-scrub-prev10') as HTMLButtonElement;
+            this.elements.btnScrubPrevEl = shadow.getElementById('btn-scrub-prev') as HTMLButtonElement;
+            this.elements.scrubberStatusEl = shadow.getElementById('scrubber-status') as HTMLSpanElement;
+            this.elements.btnScrubNextEl = shadow.getElementById('btn-scrub-next') as HTMLButtonElement;
+            this.elements.btnScrubNext10El = shadow.getElementById('btn-scrub-next10') as HTMLButtonElement;
+            this.elements.btnScrubLatestEl = shadow.getElementById('btn-scrub-latest') as HTMLButtonElement;
+
+            // ElementBase contentEl holds the child component
+            this.elements.contentEl = shadow.getElementById('keystone-scrubber-content') as HTMLDivElement;
+
+            this.initHandlers();
+            this.loadHistoryData().catch(err => console.error(`${this.lc} loadHistoryData error: ${extractErrorMsg(err)}`));
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+            throw error;
+        } finally {
+            if (logalot) { console.log(`${lc} complete.`); }
+        }
+    }
+
+    override async disconnected(): Promise<void> {
+        // No-op
+    }
+
+    private initHandlers() {
+        this.elements!.btnScrubFirstEl.addEventListener('click', () => this.scrubFirst());
+        this.elements!.btnScrubPrev10El.addEventListener('click', () => this.scrubPrev10());
+        this.elements!.btnScrubPrevEl.addEventListener('click', () => this.scrubPrev());
+        this.elements!.btnScrubNextEl.addEventListener('click', () => this.scrubNext());
+        this.elements!.btnScrubNext10El.addEventListener('click', () => this.scrubNext10());
+        this.elements!.btnScrubLatestEl.addEventListener('click', () => this.scrubLatest());
+    }
+
+    override async loadIbGib(): Promise<void> {
+        const lc = `${this.lc}[${this.loadIbGib.name}]`;
+        try {
+            if (logalot) { console.log(`${lc} starting... (I: a4a9181bbb58a22cc71c8745a91ec426)`); }
+
+            if (!this.ibGibAddr) return;
+
+            await super.loadIbGib();
+            await this.loadHistoryData();
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+            throw error;
+        } finally {
+            if (logalot) { console.log(`${lc} complete.`); }
+        }
+    }
+
+    public override async activateIbGib({
+        addr,
+        ibGib,
+    }: {
+        addr?: IbGibAddr,
+        ibGib?: IbGib_V1,
+    }): Promise<void> {
+        const lc = `${this.lc}[activateIbGib]`;
+        try {
+            if (logalot) { console.log(`${lc} starting... (I: 890a8cb88f72c918a8bcf82c8af63e26)`); }
+            if (!addr) return;
+
+            // Get or create the details component for this specific frame
+            const childInfo = await this.getLoadedChildInfo({ addr, ibGib });
+
+            // Manage active states in childInfos
+            const currentlyActive = this.activeChildInfo;
+            if (currentlyActive) {
+                currentlyActive.active = false;
+            }
+            childInfo.active = true;
+
+            // Re-use the framework's content injection code
+            const componentSvc = await getComponentSvc();
+            await componentSvc.inject({
+                parentEl: this.elements!.contentEl,
+                componentToInject: childInfo.component!,
+            });
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+        }
+    }
+
+    private async loadHistoryData(): Promise<void> {
+        if (!this.ibGibAddr || !this.elements) return;
+
+        if (this.ibGibAddr !== this.lastLoadedHistoryAddr) {
+            await this.loadHistory(this.ibGibAddr);
+            this.lastLoadedHistoryAddr = this.ibGibAddr;
+        }
+
+        await this.scrubTo(this.history.length - 1);
+    }
+
+    private async loadHistory(tipAddr: string): Promise<void> {
+        const lc = `${this.lc}[loadHistory]`;
+        this.history = [];
+        this.currentFrameIndex = -1;
+
+        const metaspace = await getGlobalMetaspace_waitIfNeeded();
+        if (!metaspace) return;
+        const space = await metaspace.getLocalUserSpace({ lock: false });
+        if (!space) return;
+
+        let currentAddr: string | undefined = tipAddr;
+        const tempHistory: string[] = [];
+
+        while (currentAddr) {
+            const res = await metaspace.get({ addr: currentAddr, space });
+            if (!res.success || !res.ibGibs || res.ibGibs.length === 0) {
+                console.warn(`${lc} Could not find frame at ${currentAddr}`);
+                break;
+            }
+            const keystone = res.ibGibs[0] as KeystoneIbGib_V1;
+            tempHistory.push(currentAddr);
+
+            if (keystone.data?.n === 0) {
+                break;
+            }
+
+            const past = keystone.rel8ns?.past;
+            currentAddr = (past && past.length > 0) ? past[past.length - 1] : undefined;
+        }
+
+        this.history = tempHistory.reverse();
+        this.currentFrameIndex = this.history.length - 1;
+    }
+
+    private async scrubTo(index: number): Promise<void> {
+        if (this.history.length === 0) return;
+        this.currentFrameIndex = Math.max(0, Math.min(index, this.history.length - 1));
+
+        this.updateScrubberUI();
+
+        const addr = this.history[this.currentFrameIndex];
+        await this.activateIbGib({ addr });
+    }
+
+    private scrubFirst() { this.scrubTo(0); }
+    private scrubPrev10() { this.scrubTo(this.currentFrameIndex - 10); }
+    private scrubPrev() { this.scrubTo(this.currentFrameIndex - 1); }
+    private scrubNext() { this.scrubTo(this.currentFrameIndex + 1); }
+    private scrubNext10() { this.scrubTo(this.currentFrameIndex + 10); }
+    private scrubLatest() { this.scrubTo(this.history.length - 1); }
+
+    private updateScrubberUI() {
+        if (!this.elements) return;
+        this.elements.scrubberStatusEl.textContent = `Frame ${this.currentFrameIndex + 1} / ${this.history.length}`;
+
+        this.elements.btnScrubFirstEl.disabled = this.currentFrameIndex === 0;
+        this.elements.btnScrubPrev10El.disabled = this.currentFrameIndex === 0;
+        this.elements.btnScrubPrevEl.disabled = this.currentFrameIndex === 0;
+        this.elements.btnScrubNextEl.disabled = this.currentFrameIndex === this.history.length - 1;
+        this.elements.btnScrubNext10El.disabled = this.currentFrameIndex === this.history.length - 1;
+        this.elements.btnScrubLatestEl.disabled = this.currentFrameIndex === this.history.length - 1;
+    }
+
+    protected async getLoadedChildInfo({
+        addr,
+        ibGib,
+    }: {
+        addr: IbGibAddr,
+        ibGib?: IbGib_V1,
+    }): Promise<ScrubberTabInfo> {
+        const lc = `${this.lc}[${this.getLoadedChildInfo.name}]`;
+        try {
+            if (logalot) { console.log(`${lc} starting... (I: 9eea188f6b55f04b483fbda8a110f826)`); }
+
+            if (!addr) { throw new Error(`(UNEXPECTED) addr falsy?`); }
+            const tjpGib = getGibInfo({ ibGibAddr: addr }).tjpGib ?? getIbAndGib({ ibGibAddr: addr }).gib;
+
+            const fnCreateAndLoadChildComponent = async () => {
+                const componentSvc = await getComponentSvc();
+                const detailsComponent = await componentSvc.getComponentInstance({
+                    path: 'ibgib-keystone-details',
+                    ibGibAddr: addr,
+                    useRegExpPrefilter: true,
+                });
+                if (!detailsComponent) {
+                    throw new Error(`(UNEXPECTED) detailsComponent falsy?`);
+                }
+                return detailsComponent;
+            }
+
+            let tabInfo: ScrubberTabInfo;
+
+            const filtered = this.childInfos.filter(x => x.addr === addr);
+
+            if (filtered.length > 0) {
+                if (filtered.length !== 1) { throw new Error(`(UNEXPECTED) filtered.length !== 1?`); }
+                tabInfo = filtered[0];
+                if (!tabInfo.component) {
+                    tabInfo.component = await fnCreateAndLoadChildComponent();
+                }
+            } else {
+                const detailsComponent = await fnCreateAndLoadChildComponent();
+                ibGib = detailsComponent.ibGib ?? ibGib;
+                const tabBtnEl = await this.addChild({ addr, ibGib: ibGib! });
+                tabInfo = {
+                    addr,
+                    childBtnEl: tabBtnEl,
+                    component: detailsComponent,
+                    active: false,
+                };
+                this.childInfos.push(tabInfo);
+            }
+
+            return tabInfo;
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+            throw error;
+        } finally {
+            if (logalot) { console.log(`${lc} complete.`); }
+        }
+    }
+
+    protected override async addChild({
+        addr,
+        ibGib,
+    }: {
+        ibGib: IbGib_V1,
+        addr?: IbGibAddr,
+    }): Promise<HTMLElement> {
+        const lc = `${this.lc}[${this.addChild.name}]`;
+        try {
+            if (logalot) { console.log(`${lc} starting... (I: 824f98b6f9a2c922f8b3a9f67ad63e26)`); }
+
+            // why are we making a dummy???
+
+            // Return a dummy hidden element since we don't display visual tab buttons in the scrubber
+            const dummy = document.createElement('div');
+            dummy.style.display = 'none';
+            return dummy;
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+            throw error;
+        } finally {
+            if (logalot) { console.log(`${lc} complete.`); }
+        }
+    }
+}

package/src/ui/component/identity/remove-device/remove-device.css

@@ -0,0 +1,118 @@
+:host {
+    display: block;
+    width: 100%;
+}
+
+.component-container {
+    padding: 1.5rem;
+    background: var(--ibgib-bg-surface, #1e1e2e);
+    color: var(--ibgib-text-primary, #cdd6f4);
+    border-radius: 12px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+}
+
+.input-group {
+    margin-bottom: 1.2rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+}
+
+.input-group label {
+    font-size: 0.95rem;
+    font-weight: 500;
+    color: var(--ibgib-text-secondary, #a6adc8);
+}
+
+.text-input, .secret-input {
+    padding: 0.75rem 1rem;
+    border-radius: 8px;
+    border: 1px solid var(--ibgib-border-color, #45475a);
+    background: var(--ibgib-bg-input, #11111b);
+    color: var(--ibgib-text-primary, #cdd6f4);
+    font-size: 1rem;
+    outline: none;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.text-input:focus, .secret-input:focus {
+    border-color: var(--ibgib-accent-color, #89b4fa);
+    box-shadow: 0 0 0 2px rgba(137, 180, 250, 0.2);
+}
+
+.text-input.invalid, .secret-input.invalid {
+    border-color: #f38ba8;
+    box-shadow: 0 0 0 2px rgba(243, 139, 168, 0.2);
+}
+
+.action-row {
+    margin-top: 1.5rem;
+}
+
+.action-btn {
+    width: 100%;
+    padding: 0.85rem 1.5rem;
+    border: none;
+    border-radius: 8px;
+    background: linear-gradient(135deg, #f38ba8, #f5e0dc);
+    color: #11111b;
+    font-size: 1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: transform 0.15s ease, opacity 0.15s ease;
+}
+
+.action-btn:hover {
+    transform: translateY(-1px);
+    opacity: 0.95;
+}
+
+.action-btn:active {
+    transform: translateY(0);
+}
+
+.status-area {
+    margin-top: 1.2rem;
+    padding: 1rem;
+    border-radius: 8px;
+    font-size: 0.95rem;
+}
+
+.status-area.info {
+    background: rgba(137, 180, 250, 0.15);
+    border: 1px solid #89b4fa;
+    color: #89b4fa;
+}
+
+.status-area.error {
+    background: rgba(243, 139, 168, 0.15);
+    border: 1px solid #f38ba8;
+    color: #f38ba8;
+}
+
+.status-area.success {
+    background: rgba(166, 227, 161, 0.15);
+    border: 1px solid #a6e3a1;
+    color: #a6e3a1;
+}
+
+.hidden {
+    display: none !important;
+}
+
+.collapsed {
+    display: none !important;
+}
+
+.result-area {
+    margin-top: 1.5rem;
+    padding: 1.2rem;
+    border-radius: 8px;
+    background: rgba(243, 139, 168, 0.1);
+    border: 1px solid #f38ba8;
+}
+
+.result-area h3 {
+    margin-top: 0;
+    color: #f38ba8;
+}

package/src/ui/component/identity/remove-device/remove-device.html

@@ -0,0 +1,31 @@
+<div id="container" class="component-container">
+    <h2 id="title">Remove / Unlink Device</h2>
+    <div class="content">
+        <p>Unlink an authorized delegate device from your primary identity timeline.</p>
+
+        <div class="input-group">
+            <label for="select-delegate">Select Device / Delegate</label>
+            <select id="select-delegate" class="text-input">
+                <option value="">-- Loading registered devices... --</option>
+            </select>
+        </div>
+
+        <div class="input-group">
+            <label for="input-passphrase">Master Passphrase</label>
+            <input type="password" id="input-passphrase" placeholder="Enter your master passphrase..." class="secret-input">
+        </div>
+
+        <div class="action-row">
+            <button id="btn-remove-device" class="action-btn">Unlink & Revoke Device</button>
+        </div>
+
+        <div id="status-area" class="status-area hidden">
+            <p id="status-text" class="status-msg"></p>
+        </div>
+
+        <div id="result-area" class="result-area collapsed">
+            <h3>Device Unlinked Successfully!</h3>
+            <p class="warning">🔒 The selected device delegate has been unlinked from your primary identity.</p>
+        </div>
+    </div>
+</div>