@industream/flowmaker-flowbox-ui-components 0.0.12 → 0.0.14

package/dist/DCCatalogEntryPicker/picker-column-helpers.js

@@ -0,0 +1,105 @@
+/**
+ * Catalog entry column system.
+ *
+ * Declarative column definitions that drive both the TagBrowser table
+ * and the SelectedTags panel. Consumers pass an array of column keys
+ * (e.g. ['name', 'sourceParams.nodeId', 'dataType']) to control display.
+ *
+ * ── Static column keys ──────────────────────────────────────────────
+ *
+ *   Key        | Label       | Source                | Render
+ *   -----------|-------------|-----------------------|--------
+ *   'name'     | Name        | CatalogEntry.name      | text
+ *   'dataType' | Data Type   | CatalogEntry.dataType  | pill
+ *   'labels'   | Labels      | CatalogEntry.labels[]  | labels
+ *
+ * ── Dynamic column keys (dot-path) ──────────────────────────────────
+ *
+ *   Any key starting with 'sourceParams.' or 'metadata.' resolves the
+ *   corresponding sub-property at runtime. No pre-registration needed.
+ *
+ *   Key                      | Label      | Source                           | Render
+ *   -------------------------|------------|----------------------------------|--------
+ *   'sourceParams.nodeId'    | Node ID    | CatalogEntry.sourceParams.nodeId  | code
+ *   'sourceParams.topic'     | Topic      | CatalogEntry.sourceParams.topic   | code
+ *   'metadata.unit'          | Unit       | CatalogEntry.metadata.unit        | pill
+ *   'metadata.description'   | Description| CatalogEntry.metadata.description | text
+ *   ... any other sub-key    | (auto)     | ...                               | (auto)
+ *
+ * Render types:
+ *   - 'text'   : plain text cell (truncated, with title tooltip)
+ *   - 'code'   : monospace <code> cell
+ *   - 'pill'   : small badge/pill (only rendered when value is truthy)
+ *   - 'labels' : iterates Label[] array, renders each as a pill
+ *
+ * sourceParams.* keys default to 'code' rendering.
+ * metadata.* keys default to 'pill' rendering.
+ * Override by adding an explicit entry in COLUMN_DEFS.
+ */
+/**
+ * Static column definitions for top-level CatalogEntry fields.
+ * For sourceParams / metadata sub-properties, use dot-path keys instead
+ * (see {@link resolveColumn}).
+ */
+export const COLUMN_DEFS = {
+    name: { label: 'Name', resolve: (e) => e.name, type: 'text' },
+    dataType: { label: 'Data Type', resolve: (e) => e.dataType, type: 'pill' },
+    labels: { label: 'Labels', resolve: (e) => e.labels ?? [], type: 'labels' },
+};
+/** Default columns for the tag browser table */
+export const DEFAULT_COLUMNS = ['name', 'dataType', 'labels'];
+/** Default columns for the selected tags display panel */
+export const DEFAULT_SELECTED_COLUMNS_DISPLAY = ['name', 'dataType', 'labels'];
+/**
+ * Capitalize a dot-path sub-key into a human-readable label.
+ * e.g. 'nodeId' → 'Node Id', 'pollInterval' → 'Poll Interval'
+ */
+const humanize = (key) => key.replace(/([A-Z])/g, ' $1').replace(/^./, (c) => c.toUpperCase()).trim();
+/**
+ * Resolve a column definition for any key — static or dot-path.
+ *
+ * Static keys are looked up in COLUMN_DEFS.
+ * Dot-path keys (sourceParams.*, metadata.*) are resolved dynamically:
+ *   - sourceParams.* → renders as 'code'
+ *   - metadata.*     → renders as 'pill'
+ */
+export const resolveColumn = (key) => {
+    if (COLUMN_DEFS[key])
+        return COLUMN_DEFS[key];
+    if (key.startsWith('sourceParams.')) {
+        const prop = key.slice('sourceParams.'.length);
+        return {
+            label: humanize(prop),
+            resolve: (e) => e.sourceParams?.[prop],
+            type: 'code',
+        };
+    }
+    if (key.startsWith('metadata.')) {
+        const prop = key.slice('metadata.'.length);
+        return {
+            label: humanize(prop),
+            resolve: (e) => e.metadata?.[prop],
+            type: 'pill',
+        };
+    }
+    return undefined;
+};
+/**
+ * Resolve a single column value from a catalog entry.
+ */
+export const resolveValue = (entry, key) => resolveColumn(key)?.resolve(entry);
+/**
+ * Build a lowercase search string from all active column values.
+ * Used by TagBrowser's search filter.
+ */
+export const resolveSearchText = (entry, keys) => keys
+    .map((key) => {
+    const val = resolveValue(entry, key);
+    if (val == null)
+        return '';
+    if (Array.isArray(val))
+        return val.map((v) => v.name ?? v).join(' ');
+    return String(val);
+})
+    .join(' ')
+    .toLowerCase();

package/dist/index.d.ts

@@ -2,3 +2,6 @@ export { default as DCSourceConnection } from './DCSourceConnection.svelte';
 export type { SourceConnection } from './DCSourceConnection.svelte';
 export { default as DCCatalogEntry } from './DCCatalogEntry.svelte';
 export type { CatalogEntry, DataType, SourceType } from '@industream/datacatalog-client/dto';
+export { default as DCCatalogEntryPicker } from './DCCatalogEntryPicker/DCCatalogEntryPicker.svelte';
+export type { ColumnDef, ColumnType } from './DCCatalogEntryPicker/picker-column-helpers';
+export { COLUMN_DEFS, DEFAULT_COLUMNS, DEFAULT_SELECTED_COLUMNS_DISPLAY, resolveColumn, resolveValue, resolveSearchText } from './DCCatalogEntryPicker/picker-column-helpers';

package/dist/index.js

@@ -1,2 +1,4 @@
 export { default as DCSourceConnection } from './DCSourceConnection.svelte';
 export { default as DCCatalogEntry } from './DCCatalogEntry.svelte';
+export { default as DCCatalogEntryPicker } from './DCCatalogEntryPicker/DCCatalogEntryPicker.svelte';
+export { COLUMN_DEFS, DEFAULT_COLUMNS, DEFAULT_SELECTED_COLUMNS_DISPLAY, resolveColumn, resolveValue, resolveSearchText } from './DCCatalogEntryPicker/picker-column-helpers';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@industream/flowmaker-flowbox-ui-components",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "description": "Reusable Svelte components for FlowMaker FlowBox UI",
   "type": "module",
   "svelte": "./dist/index.js",
@@ -22,6 +22,15 @@
       "types": "./dist/DCCatalogEntry.svelte.d.ts",
       "svelte": "./dist/DCCatalogEntry.svelte",
       "import": "./dist/DCCatalogEntry.svelte"
+    },
+    "./DCCatalogEntryPicker.svelte": {
+      "types": "./dist/DCCatalogEntryPicker/DCCatalogEntryPicker.svelte.d.ts",
+      "svelte": "./dist/DCCatalogEntryPicker/DCCatalogEntryPicker.svelte",
+      "import": "./dist/DCCatalogEntryPicker/DCCatalogEntryPicker.svelte"
+    },
+    "./picker-column-helpers": {
+      "types": "./dist/DCCatalogEntryPicker/picker-column-helpers.d.ts",
+      "import": "./dist/DCCatalogEntryPicker/picker-column-helpers.js"
     }
   },
   "files": [

package/src/DCCatalogEntryPicker/DCCatalogEntryPicker.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+    /**
+     * DCCatalogEntryPicker — DataCatalog entry picker with configurable columns.
+     *
+     * Composes TagBrowser (searchable table with multi-select) and SelectedTags
+     * (collapsible summary with remove). Owns the DataCatalog fetch lifecycle.
+     *
+     * Column keys reference the COLUMN_DEFS registry in columns.ts:
+     *   'name'     → CatalogEntry.name              (text)
+     *   'dataType' → CatalogEntry.dataType           (pill)
+     *   'nodeId'   → CatalogEntry.sourceParams.nodeId (code)
+     *   'unit'     → CatalogEntry.metadata.unit       (pill)
+     *   'labels'   → CatalogEntry.labels[]            (label pills)
+     *
+     * @prop dcApiUrl           — DataCatalog API base URL
+     * @prop sourceConnectionId — Filters catalog entries by source connection
+     * @prop selectedIds        — (bindable) Array of selected CatalogEntry IDs
+     * @prop entries            — (bindable) Loaded catalog entries (exposed for parent access)
+     * @prop columns            — Column keys for the browse table (default: name, dataType, labels)
+     * @prop selectedColumnsDisplay — Column keys for the selected tags panel (default: name, dataType, labels)
+     * @prop emptyMessage       — Message when no entries match the source connection
+     * @prop onSelectionChange  — Called when selection changes (receives full selectedIds array)
+     * @prop onRemove           — Called when a single entry is removed from the selection
+     */
+    import { DataCatalogClient } from '@industream/datacatalog-client';
+    import type { CatalogEntry } from '@industream/datacatalog-client/dto';
+    import { DEFAULT_COLUMNS, DEFAULT_SELECTED_COLUMNS_DISPLAY } from './picker-column-helpers';
+    import TagBrowser from './TagBrowser.svelte';
+    import SelectedTags from './SelectedTags.svelte';
+
+    interface Props {
+        dcApiUrl?: string;
+        sourceConnectionId?: string;
+        selectedIds?: string[];
+        entries?: CatalogEntry[];
+        columns?: string[];
+        selectedColumnsDisplay?: string[];
+        emptyMessage?: string;
+        onSelectionChange?: (ids: string[]) => void;
+        onRemove?: (id: string) => void;
+    }
+
+    let {
+        dcApiUrl = '',
+        sourceConnectionId = '',
+        selectedIds = $bindable([]),
+        entries = $bindable([]),
+        columns = DEFAULT_COLUMNS,
+        selectedColumnsDisplay = DEFAULT_SELECTED_COLUMNS_DISPLAY,
+        emptyMessage = 'No entries found for this source connection.',
+        onSelectionChange = null,
+        onRemove = null
+    }: Props = $props();
+
+    let loading = $state(false);
+    let error = $state('');
+
+    $effect(() => {
+        if (dcApiUrl && sourceConnectionId) {
+            loadEntries(dcApiUrl, sourceConnectionId);
+        } else {
+            entries = [];
+            error = '';
+        }
+    });
+
+    async function loadEntries(apiUrl: string, connId: string) {
+        loading = true;
+        error = '';
+        try {
+            const client = new DataCatalogClient({ baseUrl: apiUrl });
+            const result = await client.catalogEntries.get({ sourceConnectionIds: [connId] });
+            entries = result.items ?? [];
+        } catch (err: any) {
+            error = err.message ?? 'Failed to load catalog entries';
+            entries = [];
+        } finally {
+            loading = false;
+        }
+    }
+</script>
+
+<TagBrowser
+    {entries}
+    bind:selectedIds
+    {columns}
+    {loading}
+    {error}
+    {emptyMessage}
+    {onSelectionChange}
+/>
+
+{#if selectedIds.length > 0}
+    <SelectedTags
+        {entries}
+        bind:selectedIds
+        columns={selectedColumnsDisplay}
+        {onRemove}
+    />
+{:else}
+    <small class="helper-text warning">Select at least one tag to monitor</small>
+{/if}
+
+<style>
+    .helper-text {
+        color: var(--cds-text-secondary, #525252);
+        font-size: 0.75rem;
+        margin-top: 0.25rem;
+    }
+    .helper-text.warning {
+        color: var(--cds-support-warning, #f1c21b);
+    }
+</style>

package/src/DCCatalogEntryPicker/SelectedTags.svelte

@@ -0,0 +1,150 @@
+<script>
+    import { DEFAULT_SELECTED_COLUMNS_DISPLAY, resolveColumn, resolveValue } from './picker-column-helpers';
+
+    let {
+        entries = [],
+        selectedIds = $bindable([]),
+        columns = DEFAULT_SELECTED_COLUMNS_DISPLAY,
+        onRemove = null
+    } = $props();
+
+    let expanded = $state(true);
+
+    /** Resolved column descriptors — maps each column key to its label, resolver and render type */
+    const columnDescriptors = $derived(
+        columns
+            .map(k => { const resolved = resolveColumn(k); return resolved ? { key: k, ...resolved } : null; })
+            .filter(Boolean)
+    );
+
+    const selectedEntries = $derived(() => {
+        const idSet = new Set(selectedIds);
+        return entries.filter(e => idSet.has(e.id));
+    });
+
+    const selectedCount = $derived(selectedIds.length);
+
+    $effect(() => {
+        if (selectedCount === 0) {
+            expanded = false;
+        } else if (selectedCount > 0 && !expanded) {
+            expanded = true;
+        }
+    });
+
+    function handleRemove(id) {
+        onRemove?.(id);
+    }
+</script>
+
+<div class="selected-tags">
+    <button class="panel-header" aria-expanded={expanded} onclick={() => expanded = !expanded}>
+        <svg class="chevron" class:chevron-expanded={expanded} viewBox="0 0 16 16" width="16" height="16">
+            <path d="M11 8L6 13V3z" fill="currentColor"></path>
+        </svg>
+        <span class="panel-title">Selected Tags ({selectedCount})</span>
+    </button>
+
+    {#if expanded}
+        <div class="panel-body">
+            {#if selectedEntries().length === 0}
+                <div class="empty-message">No tags selected</div>
+            {:else}
+                <div class="tag-list">
+                    {#each selectedEntries() as entry (entry.id)}
+                        <div class="tag-row">
+                            <div class="tag-info">
+                                {#each columnDescriptors as columnDescriptor, index (columnDescriptor.key)}
+                                    {@const val = resolveValue(entry, columnDescriptor.key)}
+                                    {#if index === 0}
+                                        <!-- First column: bold primary label -->
+                                        <span class="tag-primary">{val ?? '-'}</span>
+                                    {:else if columnDescriptor.type === 'labels' && Array.isArray(val)}
+                                        {#each val as label (label.id)}
+                                            <span class="meta-item">{label.name}</span>
+                                        {/each}
+                                    {:else if columnDescriptor.type === 'code'}
+                                        {#if val}<code class="tag-code">{val}</code>{/if}
+                                    {:else}
+                                        {#if val}<span class="meta-item">{val}</span>{/if}
+                                    {/if}
+                                {/each}
+                            </div>
+                            <button
+                                class="remove-button"
+                                title="Remove {entry.name}"
+                                aria-label="Remove {entry.name}"
+                                onclick={() => handleRemove(entry.id)}
+                            >
+                                <svg viewBox="0 0 16 16" width="14" height="14"><path d="M12 4.7L11.3 4 8 7.3 4.7 4 4 4.7 7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z" fill="currentColor"></path></svg>
+                            </button>
+                        </div>
+                    {/each}
+                </div>
+            {/if}
+        </div>
+    {/if}
+</div>
+
+<style>
+    .selected-tags {
+        border: 1px solid var(--cds-border-subtle-01, #393939);
+        background: var(--cds-layer-01, #262626);
+    }
+    .panel-header {
+        display: flex; align-items: center; gap: 0.5rem;
+        width: 100%; padding: 0.5rem 0.75rem;
+        background: var(--cds-layer-02, #2e2e2e); border: none;
+        color: var(--cds-text-primary, #f4f4f4);
+        font-size: 0.8125rem; font-weight: 600;
+        cursor: pointer; text-align: left; transition: background-color 0.15s;
+    }
+    .panel-header:hover { background: var(--cds-layer-hover-01, #4c4c4c); }
+    .chevron {
+        color: var(--cds-text-secondary, #c6c6c6);
+        transition: transform 0.15s ease; flex-shrink: 0;
+    }
+    .chevron-expanded { transform: rotate(90deg); }
+    .panel-title { flex: 1; }
+    .panel-body { max-height: 200px; overflow-y: auto; }
+    .empty-message {
+        padding: 1rem; text-align: center;
+        color: var(--cds-text-helper, #8d8d8d); font-size: 0.8125rem;
+    }
+    .tag-row {
+        display: flex; align-items: center; gap: 0.5rem;
+        padding: 0.375rem 0.75rem;
+        border-bottom: 1px solid var(--cds-border-subtle-01, #393939);
+        transition: background-color 0.1s;
+    }
+    .tag-row:last-child { border-bottom: none; }
+    .tag-row:hover { background: var(--cds-layer-hover-01, #4c4c4c); }
+    .tag-info {
+        flex: 1; display: flex; align-items: center; gap: 0.75rem;
+        min-width: 0; overflow: hidden;
+    }
+    .tag-primary {
+        font-weight: 600; font-size: 0.8125rem;
+        color: var(--cds-text-primary, #f4f4f4);
+        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+        flex-shrink: 0; max-width: 12rem;
+    }
+    .tag-code {
+        font-family: 'IBM Plex Mono', monospace; font-size: 0.6875rem;
+        color: var(--cds-text-secondary, #c6c6c6);
+        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
+    }
+    .meta-item {
+        padding: 0.0625rem 0.375rem;
+        background: var(--cds-tag-background-gray, #393939);
+        color: var(--cds-tag-color-gray, #c6c6c6);
+        font-size: 0.6875rem; border-radius: 1rem;
+    }
+    .remove-button {
+        background: transparent; border: none;
+        color: var(--cds-text-secondary, #c6c6c6);
+        cursor: pointer; padding: 0.25rem;
+        transition: color 0.15s; flex-shrink: 0;
+    }
+    .remove-button:hover { color: var(--cds-support-error, #fa4d56); }
+</style>

package/src/DCCatalogEntryPicker/TagBrowser.svelte

@@ -0,0 +1,210 @@
+<script>
+    import { DEFAULT_COLUMNS, resolveColumn, resolveValue, resolveSearchText } from './picker-column-helpers';
+
+    let {
+        entries = [],
+        selectedIds = $bindable([]),
+        columns = DEFAULT_COLUMNS,
+        loading = false,
+        error = '',
+        emptyMessage = 'No entries found for this source connection.',
+        onSelectionChange = null
+    } = $props();
+
+    let searchQuery = $state('');
+
+    /** Resolved column descriptors for rendering — maps each column key to its label, resolver and render type */
+    const columnDescriptors = $derived(
+        columns
+            .map(k => { const col = resolveColumn(k); return col ? { key: k, ...col } : null; })
+            .filter(Boolean)
+    );
+
+    const filtered = $derived(() => {
+        if (!searchQuery.trim()) return entries;
+        const q = searchQuery.toLowerCase();
+        return entries.filter(e => resolveSearchText(e, columns).includes(q));
+    });
+
+    const selectedCount = $derived(selectedIds.length);
+    const totalCount = $derived(entries.length);
+    const allVisibleSelected = $derived(filtered().length > 0 && filtered().every(e => selectedIds.includes(e.id)));
+
+    function toggleEntry(id) {
+        selectedIds = selectedIds.indexOf(id) >= 0
+            ? selectedIds.filter(s => s !== id)
+            : [...selectedIds, id];
+        onSelectionChange?.(selectedIds);
+    }
+
+    function selectAll() {
+        const merged = new Set(selectedIds);
+        filtered().forEach(e => merged.add(e.id));
+        selectedIds = [...merged];
+        onSelectionChange?.(selectedIds);
+    }
+
+    function deselectAll() {
+        const visibleSet = new Set(filtered().map(e => e.id));
+        selectedIds = selectedIds.filter(id => !visibleSet.has(id));
+        onSelectionChange?.(selectedIds);
+    }
+
+    function toggleAll() {
+        allVisibleSelected ? deselectAll() : selectAll();
+    }
+</script>
+
+<div class="tag-browser">
+    <div class="toolbar">
+        <div class="search-wrapper">
+            <svg class="search-icon" viewBox="0 0 16 16" width="16" height="16">
+                <path d="M15.5 13.586L11.742 9.828A5.514 5.514 0 0 0 13 6.5 5.506 5.506 0 0 0 7.5 1 5.506 5.506 0 0 0 2 6.5 5.506 5.506 0 0 0 7.5 12a5.514 5.514 0 0 0 3.328-1.258l3.758 3.758zM3 6.5A4.505 4.505 0 0 1 7.5 2 4.505 4.505 0 0 1 12 6.5 4.505 4.505 0 0 1 7.5 11 4.505 4.505 0 0 1 3 6.5z" fill="currentColor"></path>
+            </svg>
+            <input type="text" class="search-input" placeholder="Search..." bind:value={searchQuery} />
+        </div>
+        <div class="toolbar-actions">
+            <span class="count-indicator">{selectedCount} / {totalCount} selected</span>
+            <button class="action-button" onclick={selectAll} disabled={loading || filtered().length === 0}>Select All</button>
+            <button class="action-button" onclick={deselectAll} disabled={loading || selectedCount === 0}>Deselect All</button>
+        </div>
+    </div>
+
+    {#if loading}
+        <div class="state-message"><div class="spinner"></div> <span>Loading catalog entries...</span></div>
+    {:else if error}
+        <div class="state-message error-state">
+            <svg viewBox="0 0 16 16" width="16" height="16"><path d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm-.75 3.5h1.5v5h-1.5zm.75 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" fill="currentColor"></path></svg>
+            <span>{error}</span>
+        </div>
+    {:else if entries.length === 0}
+        <div class="state-message empty-state"><span>{emptyMessage}</span></div>
+    {:else}
+        <div class="table-container">
+            <table class="entry-table">
+                <!-- Table headers: one checkbox column + one column per columnDescriptor -->
+                <thead>
+                    <tr>
+                        <th class="col-checkbox"><input type="checkbox" title="Toggle all visible" checked={allVisibleSelected} onchange={toggleAll} /></th>
+                        {#each columnDescriptors as columnDescriptor (columnDescriptor.key)}
+                            <th>{columnDescriptor.label}</th>
+                        {/each}
+                    </tr>
+                </thead>
+
+                <!-- Table body: one row per filtered catalog entry, cells rendered by column type -->
+                <tbody>
+                    {#each filtered() as entry (entry.id)}
+                        {@const isSelected = selectedIds.includes(entry.id)}
+                        <tr class:selected={isSelected} onclick={() => toggleEntry(entry.id)}>
+                            <td class="col-checkbox"><input type="checkbox" checked={isSelected} onclick={(e) => e.stopPropagation()} onchange={() => toggleEntry(entry.id)} /></td>
+
+                            <!-- Render each column cell according to its type (text, code, pill, labels) -->
+                            {#each columnDescriptors as columnDescriptor (columnDescriptor.key)}
+                                {@const val = resolveValue(entry, columnDescriptor.key)}
+                                <td title={columnDescriptor.type === 'text' ? (val ?? '') : ''}>
+                                    {#if columnDescriptor.type === 'labels' && Array.isArray(val)}
+                                        {#each val as label (label.id)}
+                                            <span class="label-pill">{label.name}</span>
+                                        {/each}
+                                    {:else if columnDescriptor.type === 'code'}
+                                        <code>{val ?? '-'}</code>
+                                    {:else if columnDescriptor.type === 'pill'}
+                                        {#if val}<span class="pill">{val}</span>{:else}-{/if}
+                                    {:else}
+                                        {val ?? '-'}
+                                    {/if}
+                                </td>
+                            {/each}
+                        </tr>
+                    {/each}
+                </tbody>
+            </table>
+        </div>
+        {#if filtered().length !== entries.length}
+            <div class="filter-info">Showing {filtered().length} of {entries.length} entries</div>
+        {/if}
+    {/if}
+</div>
+
+<style>
+    .tag-browser { gap: 0.5rem; }
+    .toolbar { gap: 0.5rem; }
+    .search-wrapper { position: relative; display: flex; align-items: center; }
+    .search-icon { position: absolute; left: 0.75rem; color: var(--cds-text-secondary, #525252); pointer-events: none; }
+    .search-input {
+        width: 100%; padding: 0.5rem 0.75rem 0.5rem 2.25rem;
+        background: var(--cds-field-01, #353535); border: none;
+        border-bottom: 1px solid var(--cds-border-strong-01, #6f6f6f);
+        color: var(--cds-text-primary, #f4f4f4); font-size: 0.875rem;
+        outline: none; transition: border-color 0.15s;
+    }
+    .search-input::placeholder { color: var(--cds-text-placeholder, #6f6f6f); }
+    .search-input:focus { border-bottom-color: var(--cds-focus, #0f62fe); }
+    .toolbar-actions { display: flex; align-items: center; gap: 0.5rem; }
+    .count-indicator { font-size: 0.75rem; color: var(--cds-text-secondary, #c6c6c6); margin-right: auto; }
+    .action-button {
+        padding: 0.25rem 0.75rem; background: transparent;
+        border: 1px solid var(--cds-border-strong-01, #6f6f6f);
+        color: var(--cds-text-primary, #f4f4f4); font-size: 0.75rem;
+        cursor: pointer; transition: background-color 0.15s;
+    }
+    .action-button:hover:not(:disabled) { background: var(--cds-layer-hover-01, #4c4c4c); }
+    .action-button:disabled { opacity: 0.5; cursor: not-allowed; }
+    .state-message {
+        display: flex; align-items: center; justify-content: center;
+        gap: 0.5rem; padding: 2rem;
+        color: var(--cds-text-secondary, #c6c6c6); font-size: 0.875rem;
+    }
+    .error-state { color: var(--cds-support-error, #fa4d56); }
+    .empty-state { color: var(--cds-text-helper, #8d8d8d); }
+    .spinner {
+        width: 1rem; height: 1rem;
+        border: 2px solid var(--cds-border-subtle-01, #e0e0e0);
+        border-top-color: var(--cds-interactive, #0f62fe);
+        border-radius: 50%; animation: spin 0.8s linear infinite;
+    }
+    @keyframes spin { to { transform: rotate(360deg); } }
+    .table-container {
+        max-height: 400px; overflow-y: auto;
+        border: 1px solid var(--cds-border-subtle-01, #393939);
+    }
+    .entry-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
+    .entry-table thead { position: sticky; top: 0; z-index: 1; }
+    .entry-table th {
+        background: var(--cds-layer-02, #262626);
+        color: var(--cds-text-secondary, #c6c6c6);
+        font-weight: 600; font-size: 0.75rem; text-transform: uppercase;
+        letter-spacing: 0.02em; padding: 0.5rem;
+        text-align: left; border-bottom: 1px solid var(--cds-border-subtle-01, #393939);
+        white-space: nowrap;
+    }
+    .entry-table td {
+        padding: 0.375rem 0.5rem;
+        border-bottom: 1px solid var(--cds-border-subtle-01, #393939);
+        color: var(--cds-text-primary, #f4f4f4);
+        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+    }
+    .entry-table tbody tr { cursor: pointer; transition: background-color 0.1s; }
+    .entry-table tbody tr:nth-child(even) { background: var(--cds-layer-01, #262626); }
+    .entry-table tbody tr:nth-child(odd) { background: var(--cds-layer-02, #2e2e2e); }
+    .entry-table tbody tr:hover { background: var(--cds-layer-hover-01, #4c4c4c); }
+    .entry-table tbody tr.selected { background: var(--cds-layer-selected-01, #3d3d3d); }
+    .entry-table tbody tr.selected:hover { background: var(--cds-layer-selected-hover-01, #4c4c4c); }
+    .col-checkbox { width: 2rem; text-align: center; }
+    .col-checkbox input[type="checkbox"] { cursor: pointer; accent-color: var(--cds-interactive, #0f62fe); }
+    code {
+        font-family: 'IBM Plex Mono', monospace; font-size: 0.75rem;
+        color: var(--cds-text-secondary, #c6c6c6);
+    }
+    .pill, .label-pill {
+        display: inline-block; padding: 0.0625rem 0.375rem;
+        background: var(--cds-tag-background-gray, #393939);
+        color: var(--cds-tag-color-gray, #c6c6c6);
+        font-size: 0.6875rem; border-radius: 1rem; margin-right: 0.25rem;
+    }
+    .filter-info {
+        font-size: 0.75rem; color: var(--cds-text-helper, #8d8d8d);
+        text-align: center; padding: 0.25rem;
+    }
+</style>