@crombolo/backoffice-host 0.9.1 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crombolo/backoffice-host",
-  "version": "0.9.1",
+  "version": "0.11.0",
   "description": "Serves the Umbraco backoffice SPA: shell HTML, import map and package manifests.",
   "license": "MIT",
   "author": "Crombolo",
@@ -31,7 +31,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@crombolo/core": "0.9.1",
+    "@crombolo/core": "0.11.0",
     "@crombolo/backoffice-dist": "18.2.0"
   }
 }

package/plugin/assistant/umbraco-package.json

@@ -2,7 +2,7 @@
   "$schema": "../../../backoffice-dist/dist/umbraco-package-schema.json",
   "name": "Crombolo Assistant",
   "id": "Crombolo.Assistant",
-  "version": "0.9.1",
+  "version": "0.11.0",
   "allowPublicAccess": false,
   "extensions": [
     {

package/plugin/audit-dashboard.js

@@ -0,0 +1,369 @@
+/**
+ * The Audit log dashboard in Settings: who did what, when and from where,
+ * newest first, filtered by person, kind of change, words and dates.
+ * docs/audit-log.md.
+ */
+import { css, html, LitElement, nothing } from '@umbraco-cms/backoffice/external/lit'
+
+const PAGE_SIZE = 50
+
+const CATEGORIES = [
+  ['', 'Everything'],
+  ['content', 'Content'],
+  ['media', 'Media'],
+  ['member', 'Members'],
+  ['schema', 'Types and templates'],
+  ['settings', 'Settings'],
+  ['user', 'Users'],
+  ['permission', 'Permissions'],
+  ['sign-in', 'Sign-ins'],
+  ['system', 'System'],
+]
+
+const ACTIONS = {
+  Create: 'Created',
+  CreateAndPublish: 'Created and published',
+  Save: 'Saved',
+  SaveAndPublish: 'Saved and published',
+  Publish: 'Published',
+  PublishWithDescendants: 'Published with everything below it',
+  Unpublish: 'Unpublished',
+  Delete: 'Deleted',
+  Move: 'Moved',
+  Trash: 'Moved to the recycle bin',
+  Restore: 'Restored from the recycle bin',
+  EmptyRecycleBin: 'Emptied the recycle bin',
+  Copy: 'Copied',
+  Sort: 'Sorted',
+  Rename: 'Renamed',
+  Rollback: 'Rolled back',
+  Revert: 'Reverted',
+  PreventCleanup: 'Kept a version',
+  AssignDomains: 'Changed domains',
+  SetPublicAccess: 'Restricted access',
+  AddPublicAccess: 'Restricted access',
+  RemovePublicAccess: 'Removed access restrictions',
+  SetNotifications: 'Changed notifications',
+  Import: 'Imported',
+  CreateTemplate: 'Created a template',
+  ChangePassword: 'Changed password',
+  ResetPassword: 'Reset password',
+  ResetPasswordByLink: 'Reset password from an e-mailed link',
+  Invite: 'Invited',
+  ResendInvite: 'Resent the invitation',
+  AcceptInvite: 'Accepted the invitation',
+  Disable: 'Disabled',
+  Enable: 'Enabled',
+  Unlock: 'Unlocked',
+  SetUserGroups: 'Changed groups',
+  AddUsers: 'Added people',
+  RemoveUsers: 'Removed people',
+  SaveProfile: 'Updated their profile',
+  SetAvatar: 'Changed the picture',
+  RemoveAvatar: 'Removed the picture',
+  EnableTwoFactor: 'Turned on two-factor sign-in',
+  DisableTwoFactor: 'Turned off two-factor sign-in',
+  AddClientCredentials: 'Added an API key',
+  RemoveClientCredentials: 'Removed an API key',
+  SignIn: 'Signed in',
+  SignInFailed: 'Failed to sign in',
+  LockedOut: 'Locked out',
+  SignOut: 'Signed out',
+  Rebuild: 'Rebuilt',
+  Reload: 'Reloaded',
+  Build: 'Built',
+  Install: 'Installed',
+  Uninstall: 'Uninstalled',
+  Commit: 'Sent to source control',
+  Sync: 'Applied the schema files',
+  Purge: 'Purged',
+  Upgrade: 'Upgraded the site',
+  UpgradeFix: 'Prepared an upgrade',
+  PauseEditing: 'Paused editing',
+  ResumeEditing: 'Resumed editing',
+  RunMigration: 'Ran a package update',
+}
+
+const ITEM_TYPES = {
+  Document: 'Page',
+  DocumentBlueprint: 'Document blueprint',
+  DocumentType: 'Document type',
+  DictionaryItem: 'Dictionary item',
+  MediaType: 'Media type',
+  MemberType: 'Member type',
+  MemberGroup: 'Member group',
+  DataType: 'Data type',
+  PartialView: 'Partial view',
+  UserGroup: 'User group',
+  SeoSettings: 'Search and sharing settings',
+}
+
+const WORKSPACE = {
+  Document: (key) => `section/content/workspace/document/edit/${key}`,
+  Media: (key) => `section/media/workspace/media/edit/${key}`,
+  Member: (key) => `section/member-management/workspace/member/edit/${key}`,
+  User: (key) => `section/user-management/workspace/user/edit/${key}`,
+}
+
+const words = (name) =>
+  name.replace(/([a-z])([A-Z])/g, '$1 $2').replace(/^./, (c) => c.toUpperCase())
+const actionLabel = (action) => ACTIONS[action] ?? words(action)
+const itemType = (type) => ITEM_TYPES[type] ?? words(type.replace(/Folder$/, ' folder'))
+
+function apiBase() {
+  const base = document.querySelector('base')?.getAttribute('href') ?? '/umbraco/'
+  return `${base.replace(/\/$/, '')}/crombolo/api/audit`
+}
+
+async function get(path, params) {
+  const query = params ? `?${new URLSearchParams(params)}` : ''
+  const response = await fetch(`${apiBase()}${path}${query}`, {
+    credentials: 'include',
+    headers: { accept: 'application/json' },
+  })
+  if (!response.ok) throw new Error(`The audit log could not be read (${response.status}).`)
+  return response.json()
+}
+
+function fromWhere(entry) {
+  if (entry.source === 'cli') return 'Command line'
+  if (entry.source === 'job') return 'Scheduled'
+  const forwarded = entry.forwardedFor?.split(',')[0]?.trim()
+  return forwarded || entry.ipAddress || '—'
+}
+
+export default class CromboloAuditDashboardElement extends LitElement {
+  static properties = {
+    _page: { state: true },
+    _users: { state: true },
+    _error: { state: true },
+    _filter: { state: true },
+    _skip: { state: true },
+  }
+
+  constructor() {
+    super()
+    this._page = undefined
+    this._users = []
+    this._error = undefined
+    this._filter = { user: '', category: '', text: '', since: '', until: '' }
+    this._skip = 0
+  }
+
+  connectedCallback() {
+    super.connectedCallback()
+    get('/users')
+      .then((users) => {
+        this._users = users.items
+      })
+      .catch(() => {})
+    this.#load()
+  }
+
+  async #load() {
+    const params = { skip: String(this._skip), take: String(PAGE_SIZE) }
+    const { user, category, text, since, until } = this._filter
+    if (user) params.user = user
+    if (category) params.category = category
+    if (text.trim()) params.text = text.trim()
+    // Whole local days: "To" includes the day it names.
+    if (since) params.since = new Date(`${since}T00:00:00`).toISOString()
+    if (until)
+      params.until = new Date(new Date(`${until}T00:00:00`).getTime() + 86_400_000).toISOString()
+    try {
+      this._page = await get('', params)
+      this._error = undefined
+    } catch (error) {
+      this._error = error.message
+    }
+  }
+
+  #set(field, value) {
+    this._filter = { ...this._filter, [field]: value }
+    this._skip = 0
+    this.#load()
+  }
+
+  #go(skip) {
+    this._skip = Math.max(0, skip)
+    this.#load()
+  }
+
+  render() {
+    return html`
+      <uui-box headline="Audit log">
+        <p class="intro">
+          Every change made in the backoffice, every sign-in, and what the command line and
+          scheduled publishing changed.
+          ${
+            this._page?.retentionDays
+              ? html`Entries are kept for ${this._page.retentionDays} days.`
+              : this._page
+                ? html`Entries are kept until they are removed.`
+                : nothing
+          }
+        </p>
+        ${this.#renderFilters()}
+        ${this.#renderBody()}
+      </uui-box>
+    `
+  }
+
+  #renderFilters() {
+    const f = this._filter
+    return html`
+      <div class="filters">
+        <label>
+          Who
+          <select .value=${f.user} @change=${(e) => this.#set('user', e.target.value)}>
+            <option value="">Anyone</option>
+            ${this._users.map((u) => html`<option value=${u.key}>${u.name || 'Unnamed'}</option>`)}
+          </select>
+        </label>
+        <label>
+          What
+          <select .value=${f.category} @change=${(e) => this.#set('category', e.target.value)}>
+            ${CATEGORIES.map(([value, label]) => html`<option value=${value}>${label}</option>`)}
+          </select>
+        </label>
+        <label>
+          Containing
+          <uui-input
+            label="Containing"
+            placeholder="A name"
+            .value=${f.text}
+            @change=${(e) => this.#set('text', e.target.value)}
+          ></uui-input>
+        </label>
+        <label>
+          From
+          <input type="date" .value=${f.since} @change=${(e) => this.#set('since', e.target.value)} />
+        </label>
+        <label>
+          To
+          <input type="date" .value=${f.until} @change=${(e) => this.#set('until', e.target.value)} />
+        </label>
+        <uui-button look="secondary" compact label="Refresh" @click=${() => this.#load()}>Refresh</uui-button>
+      </div>
+    `
+  }
+
+  #renderBody() {
+    if (this._error) return html`<p class="error">${this._error}</p>`
+    if (!this._page) return html`<uui-loader></uui-loader>`
+    const { items, total } = this._page
+    if (items.length === 0) return html`<p class="empty">Nothing matches.</p>`
+    const last = Math.min(this._skip + items.length, total)
+    return html`
+      <uui-table>
+        <uui-table-head>
+          <uui-table-head-cell>When</uui-table-head-cell>
+          <uui-table-head-cell>Who</uui-table-head-cell>
+          <uui-table-head-cell>What</uui-table-head-cell>
+          <uui-table-head-cell>Item</uui-table-head-cell>
+          <uui-table-head-cell>From</uui-table-head-cell>
+        </uui-table-head>
+        ${items.map((entry) => this.#renderRow(entry))}
+      </uui-table>
+      <div class="pager">
+        <span>${this._skip + 1}–${last} of ${total}</span>
+        <uui-button
+          compact
+          look="secondary"
+          label="Newer"
+          ?disabled=${this._skip === 0}
+          @click=${() => this.#go(this._skip - PAGE_SIZE)}
+        >Newer</uui-button>
+        <uui-button
+          compact
+          look="secondary"
+          label="Older"
+          ?disabled=${last >= total}
+          @click=${() => this.#go(this._skip + PAGE_SIZE)}
+        >Older</uui-button>
+      </div>
+    `
+  }
+
+  #renderRow(entry) {
+    const when = new Date(entry.occurredAt)
+    const failed = entry.action === 'SignInFailed' || entry.action === 'LockedOut'
+    return html`<uui-table-row>
+      <uui-table-cell title=${when.toISOString()}>${when.toLocaleString()}</uui-table-cell>
+      <uui-table-cell>${entry.user?.name ?? (entry.source === 'job' ? 'Scheduled publishing' : 'Unknown')}</uui-table-cell>
+      <uui-table-cell>
+        ${failed ? html`<uui-tag color="danger">${actionLabel(entry.action)}</uui-tag>` : actionLabel(entry.action)}
+        ${entry.detail && entry.source !== 'cli' ? html`<small>${entry.detail}</small>` : nothing}
+      </uui-table-cell>
+      <uui-table-cell>${this.#renderItem(entry)}</uui-table-cell>
+      <uui-table-cell title=${entry.forwardedFor ? `Connected from ${entry.ipAddress ?? 'unknown'}` : ''}>
+        ${fromWhere(entry)}
+      </uui-table-cell>
+    </uui-table-row>`
+  }
+
+  #renderItem(entry) {
+    const item = entry.item
+    if (!item) return nothing
+    const label = item.name ?? item.key ?? ''
+    const link = item.key && WORKSPACE[item.type]?.(item.key)
+    const base = document.querySelector('base')?.getAttribute('href') ?? '/umbraco/'
+    return html`
+      <small>${itemType(item.type)}</small>
+      ${link ? html`<a href=${`${base.replace(/\/$/, '')}/${link}`}>${label}</a>` : label}
+    `
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      padding: var(--uui-size-layout-1);
+    }
+    .intro {
+      margin-top: 0;
+      color: var(--uui-color-text-alt);
+    }
+    .filters {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--uui-size-space-4);
+      align-items: flex-end;
+      margin-bottom: var(--uui-size-space-5);
+    }
+    .filters label {
+      display: flex;
+      flex-direction: column;
+      gap: var(--uui-size-space-1);
+      font-weight: 600;
+    }
+    select,
+    input[type='date'] {
+      font: inherit;
+      padding: var(--uui-size-space-2);
+      border: 1px solid var(--uui-color-border);
+      border-radius: var(--uui-border-radius);
+      background: var(--uui-color-surface);
+      color: var(--uui-color-text);
+    }
+    uui-table-cell small {
+      display: block;
+      color: var(--uui-color-text-alt);
+    }
+    .pager {
+      display: flex;
+      gap: var(--uui-size-space-3);
+      align-items: center;
+      justify-content: flex-end;
+      margin-top: var(--uui-size-space-4);
+    }
+    .empty,
+    .error {
+      color: var(--uui-color-text-alt);
+    }
+    .error {
+      color: var(--uui-color-danger);
+    }
+  `
+}
+
+customElements.define('crombolo-audit-dashboard', CromboloAuditDashboardElement)

package/plugin/branding/components-tree.js

@@ -3,7 +3,7 @@
  *
  * Umbraco splits the two because Razor needed the distinction for
  * master-template inheritance; a TSX layout is an import, so here a template is
- * just a component a content type names (`docs/05-rendering.md`). The tree that
+ * just a component a content type names (`docs/rendering.md`). The tree that
  * survives is the partial-view one, because it is path-addressed and understands
  * folders — the template tree is id-addressed and cannot show one.
  *

package/plugin/branding/localization-en.js

@@ -17,7 +17,7 @@
  *
  * `sections` and `packager` are the other kind of rename: not the product's name
  * but a feature's. Umbraco's Packages section builds a `.umb` file; the artifact
- * here is a bundle (`docs/17-bundles.md`), so the section and the flow that
+ * here is a bundle (`docs/bundles.md`), so the section and the flow that
  * builds one say so. `build-localizations.ts` reads this file for its key set and
  * rewrites only values that name the product, so these pass through untouched and
  * every other language keeps its own word.

package/plugin/bundles-carries.js

@@ -0,0 +1,16 @@
+/**
+ * What a bundle adds, as the Marketplace and Installed views both show it.
+ */
+import { html } from '@umbraco-cms/backoffice/external/lit'
+
+/** What a bundle adds, in the words of someone choosing one. */
+export const CARRIES_LABELS = {
+  extensions: 'Screens',
+  content: 'Content',
+  server: 'Server features',
+}
+
+export const carriesTags = (carries) =>
+  Object.entries(CARRIES_LABELS)
+    .filter(([key]) => carries?.[key])
+    .map(([, label]) => html`<uui-tag look="secondary">${label}</uui-tag>`)

package/plugin/bundles-client.js

@@ -27,8 +27,14 @@ export const searchMarketplace = (query) =>
 
 export const listInstalled = () => json('/installed')
 
-export const installBundle = (name, version) =>
-  json('/install', { method: 'POST', body: JSON.stringify({ name, version }) })
+export const installBundle = (name, version, applyContent = true) =>
+  json('/install', { method: 'POST', body: JSON.stringify({ name, version, applyContent }) })
 
 export const uninstallBundle = (name) =>
   json('/uninstall', { method: 'POST', body: JSON.stringify({ name }) })
+
+/** The npm package a created bundle downloads as. */
+export const readCreatedPackage = (id) => json(`/created/${encodeURIComponent(id)}/package`)
+
+export const saveCreatedPackage = (id, pkg) =>
+  json(`/created/${encodeURIComponent(id)}/package`, { method: 'PUT', body: JSON.stringify(pkg) })

package/plugin/bundles-created-overview.js

@@ -5,13 +5,16 @@
  * the definitions are the Management API's nine `package` operations, which are
  * contract-fixed and bearer-authenticated, and the repository already carries
  * the client's token. The plugin's `/crombolo/api/bundles` routes are a
- * different thing — installed npm bundles, on the session cookie.
+ * different thing — installed npm bundles, on the session cookie — and one of
+ * them is used here too: every bundle downloads as an npm package, and the name
+ * and version it is packed under are not part of Umbraco's definition.
  */
 
 import { css, html, nothing, repeat } from '@umbraco-cms/backoffice/external/lit'
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'
 import { umbConfirmModal } from '@umbraco-cms/backoffice/modal'
 import { UmbPackageRepository } from '@umbraco-cms/backoffice/package'
+import { readCreatedPackage, saveCreatedPackage } from './bundles-client.js'
 
 const TAKE = 10
 
@@ -24,6 +27,10 @@ export default class CromboloBundlesCreatedOverviewElement extends UmbLitElement
     _loading: { state: true },
     _total: { state: true },
     _page: { state: true },
+    _packages: { state: true },
+    _editing: { state: true },
+    _draft: { state: true },
+    _problem: { state: true },
   }
 
   #repository = new UmbPackageRepository(this)
@@ -34,6 +41,10 @@ export default class CromboloBundlesCreatedOverviewElement extends UmbLitElement
     this._loading = true
     this._total = 0
     this._page = 1
+    this._packages = {}
+    this._editing = ''
+    this._draft = { name: '', version: '' }
+    this._problem = ''
   }
 
   connectedCallback() {
@@ -48,6 +59,67 @@ export default class CromboloBundlesCreatedOverviewElement extends UmbLitElement
     this._items = data?.items ?? []
     this._total = data?.total ?? 0
     this._loading = false
+    const packages = {}
+    await Promise.all(
+      this._items
+        .filter((item) => item.unique)
+        .map(async (item) => {
+          packages[item.unique] = await readCreatedPackage(item.unique).catch(() => undefined)
+        }),
+    )
+    this._packages = packages
+  }
+
+  #edit(item) {
+    const pkg = this._packages[item.unique]
+    this._editing = item.unique
+    this._problem = ''
+    this._draft = {
+      name: pkg?.set?.name ? pkg.name : '',
+      version: pkg?.set?.version ? pkg.version : '',
+    }
+  }
+
+  async #save() {
+    const outcome = await saveCreatedPackage(this._editing, this._draft)
+    if (!outcome.ok) {
+      this._problem = outcome.message ?? 'Those details could not be saved.'
+      return
+    }
+    this._packages = { ...this._packages, [this._editing]: outcome.package }
+    this._editing = ''
+  }
+
+  #renderEditor(item) {
+    if (this._editing !== item.unique) return nothing
+    const pkg = this._packages[item.unique]
+    return html`
+      <div class="package-editor">
+        <p>
+          This bundle downloads as the npm package <code>${pkg?.name}@${pkg?.version}</code>.
+          Leave a field empty to go back to the name taken from the bundle's own name, and
+          version 1.0.0.
+        </p>
+        <uui-input
+          label="Package name"
+          placeholder=${pkg?.name ?? ''}
+          .value=${this._draft.name}
+          @input=${(event) => (this._draft = { ...this._draft, name: event.target.value })}></uui-input>
+        <uui-input
+          label="Version"
+          placeholder="1.0.0"
+          .value=${this._draft.version}
+          @input=${(event) => (this._draft = { ...this._draft, version: event.target.value })}></uui-input>
+        ${this._problem ? html`<p class="problem">${this._problem}</p>` : nothing}
+        <uui-button look="primary" label="Save" @click=${() => this.#save()}></uui-button>
+        <uui-button label="Cancel" @click=${() => (this._editing = '')}></uui-button>
+      </div>
+    `
+  }
+
+  #detail(item) {
+    const pkg = this._packages[item.unique]
+    return pkg ? `${pkg.name}@${pkg.version}` : ''
   }
 
   #onPageChange(event) {
@@ -109,13 +181,20 @@ export default class CromboloBundlesCreatedOverviewElement extends UmbLitElement
                   this._items,
                   (item) => item.unique,
                   (item) => html`
-                    <uui-ref-node name=${item.name} @open=${() => this.#open(item)}>
+                    <uui-ref-node
+                      name=${item.name}
+                      detail=${this.#detail(item)}
+                      @open=${() => this.#open(item)}>
                       <uui-action-bar slot="actions">
+                        <uui-button
+                          @click=${() => this.#edit(item)}
+                          label="Package details"></uui-button>
                         <uui-button
                           @click=${() => this.#remove(item)}
                           label=${this.localize.term('general_delete')}></uui-button>
                       </uui-action-bar>
                     </uui-ref-node>
+                    ${this.#renderEditor(item)}
                   `,
                 )}
               </uui-ref-list>
@@ -144,6 +223,21 @@ export default class CromboloBundlesCreatedOverviewElement extends UmbLitElement
       text-align: center;
       opacity: 0.6;
     }
+    .package-editor {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--uui-size-space-3);
+      padding: var(--uui-size-space-4) var(--uui-size-space-5);
+      background: var(--uui-color-surface-alt);
+    }
+    .package-editor p {
+      flex-basis: 100%;
+      margin: 0;
+    }
+    .problem {
+      color: var(--uui-color-danger);
+    }
   `
 }
 

package/plugin/bundles-installed.js

@@ -4,16 +4,36 @@
  * Its manifest declares `overwrites: ['Umb.SectionView.Packages.Installed']`.
  * Umbraco's view is built around package migrations — it lists installed
  * packages so that pending C# migrations can be run. Nothing carries those here
- * (`docs/17-bundles.md`), so the view would be a list of nothing with a button
+ * (`docs/bundles.md`), so the view would be a list of nothing with a button
  * that cannot apply.
  *
- * What it lists instead is the site's declared `crombolo` dependencies, which is
- * what "installed" means here, and where each one came from.
+ * What it lists instead is the site's bundle dependencies, which is what
+ * "installed" means here: what each one adds, whether its content has been
+ * added to this site, and whether its server features are switched on.
  */
 import { css, html, nothing, repeat } from '@umbraco-cms/backoffice/external/lit'
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'
+import { carriesTags } from './bundles-carries.js'
 import { listInstalled, uninstallBundle } from './bundles-client.js'
 
+/** Where each part of a bundle stands on this site, in the words of someone running it. */
+function status(item) {
+  const parts = []
+  if (item.carries?.content)
+    parts.push(
+      item.contentApplied
+        ? html`<span>Content added (${item.contentApplied})</span>`
+        : html`<span>Content not added yet</span>`,
+    )
+  if (item.carries?.server)
+    parts.push(
+      item.wired
+        ? html`<span>Server features on</span>`
+        : html`<span>Server features off until the site's configuration includes it</span>`,
+    )
+  return parts.length > 0 ? parts : html`<span>Ready</span>`
+}
+
 export default class CromboloBundlesInstalledElement extends UmbLitElement {
   static properties = {
     _items: { state: true },
@@ -70,8 +90,8 @@ export default class CromboloBundlesInstalledElement extends UmbLitElement {
             <uui-box headline="No bundles installed">
               <p>
                 A bundle is one of this site's npm dependencies. Install one from the
-                Marketplace tab, or with <code>bun add</code> in the site directory — a dependency
-                that declares a <code>crombolo</code> field appears here.
+                Marketplace tab, or with <code>bun add</code> in the site directory, and it
+                appears here.
               </p>
             </uui-box>
           `
@@ -82,7 +102,8 @@ export default class CromboloBundlesInstalledElement extends UmbLitElement {
                   <uui-table-head-cell>Name</uui-table-head-cell>
                   <uui-table-head-cell>npm package</uui-table-head-cell>
                   <uui-table-head-cell>Version</uui-table-head-cell>
-                  <uui-table-head-cell>Extensions</uui-table-head-cell>
+                  <uui-table-head-cell>Adds</uui-table-head-cell>
+                  <uui-table-head-cell>On this site</uui-table-head-cell>
                   <uui-table-head-cell></uui-table-head-cell>
                 </uui-table-head>
                 ${repeat(
@@ -93,7 +114,8 @@ export default class CromboloBundlesInstalledElement extends UmbLitElement {
                       <uui-table-cell>${item.name}</uui-table-cell>
                       <uui-table-cell><code>${item.packageName}</code></uui-table-cell>
                       <uui-table-cell>${item.version}</uui-table-cell>
-                      <uui-table-cell>${item.extensionCount}</uui-table-cell>
+                      <uui-table-cell class="carries">${carriesTags(item.carries)}</uui-table-cell>
+                      <uui-table-cell class="status">${status(item)}</uui-table-cell>
                       <uui-table-cell>
                         <uui-button
                           look="secondary"
@@ -136,6 +158,13 @@ export default class CromboloBundlesInstalledElement extends UmbLitElement {
       max-width: 60ch;
       line-height: 1.5;
     }
+    .carries {
+      display: flex;
+      gap: var(--uui-size-space-2, 6px);
+    }
+    .status span {
+      display: block;
+    }
     .note {
       margin-top: var(--uui-size-space-5, 18px);
       opacity: 0.8;