@semiont/react-ui 0.5.25 → 0.5.27

package/src/components/resource/panels/AssistSection.css

@@ -126,267 +126,84 @@
    Detection Log (Completed Results)
    ============================================ */
 
-
 /* ============================================
    Detection Progress Display
    ============================================ */
 
-.semiont-annotation-progress {
-  background-color: var(--semiont-bg-primary);
-  border-radius: 0.5rem;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  padding: 1rem;
-  border: 2px solid var(--semiont-color-blue-500);
-}
-
-[data-theme="dark"] .semiont-annotation-progress {
-  background-color: var(--semiont-color-gray-800);
-  border-color: var(--semiont-color-blue-600);
-}
-
-/* Header section */
-.semiont-annotation-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 0.75rem;
-}
-
-.semiont-annotation-title {
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: var(--semiont-color-gray-900);
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin: 0;
-}
-
-[data-theme="dark"] .semiont-annotation-title {
-  color: var(--semiont-color-gray-100);
-}
-
-.semiont-annotation-sparkle {
-  font-size: 1.125rem;
-  animation: semiont-sparkle-infinite 1.5s ease-in-out infinite;
-}
-
-@keyframes semiont-sparkle-infinite {
-  0%, 100% {
-    opacity: 0.5;
-    transform: scale(1);
-  }
-  50% {
-    opacity: 1;
-    transform: scale(1.1);
-  }
-}
-
-.semiont-annotation-cancel {
-  color: var(--semiont-color-gray-600);
-  background: none;
-  border: none;
-  padding: 0;
-  font-size: 0.875rem;
-  cursor: pointer;
-  transition: color 0.2s;
-}
-
-.semiont-annotation-cancel:hover {
-  color: var(--semiont-color-gray-900);
-}
-
-[data-theme="dark"] .semiont-annotation-cancel {
-  color: var(--semiont-color-gray-400);
-}
-
-[data-theme="dark"] .semiont-annotation-cancel:hover {
-  color: var(--semiont-color-gray-300);
-}
-
-/* Completed entity types log */
-.semiont-annotation-log {
-  margin-bottom: 0.75rem;
+/* ── Assist progress: TWO containers, not five ──────────────────────────────
+   The widget was `.semiont-assist-widget` > `.semiont-annotation-progress` >
+   `__params` > `__message`, each with its own border, padding and tint — four
+   nested boxes around one sentence of status. The outer `.semiont-assist-widget`
+   (above) already provides the card; this provides the status region inside it.
+   ASSIST-PROGRESS-CONSOLIDATION P3. */
+.semiont-assist-progress {
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
+  gap: 0.375rem;
+  position: relative;
 }
 
-.semiont-annotation-log-item {
-  font-size: 0.75rem;
-  color: var(--semiont-color-gray-600);
+.semiont-assist-progress__status {
   display: flex;
-  align-items: center;
+  align-items: baseline;
   gap: 0.5rem;
+  padding-right: 1.5rem; /* room for the single control */
+  font-size: var(--semiont-text-sm);
+  font-weight: var(--semiont-font-medium);
+  color: var(--semiont-text-primary);
 }
 
-[data-theme="dark"] .semiont-annotation-log-item {
-  color: var(--semiont-color-gray-400);
+.semiont-assist-progress__icon {
+  flex: none;
 }
 
-.semiont-annotation-check {
-  color: var(--semiont-color-green-600);
+/* The subject and the parameters are context for the status, not peers of it. */
+.semiont-assist-progress__subject,
+.semiont-assist-progress__params {
+  font-size: var(--semiont-text-xs);
+  color: var(--semiont-text-secondary);
 }
 
-[data-theme="dark"] .semiont-annotation-check {
-  color: var(--semiont-color-green-400);
-}
-
-.semiont-annotation-entity-type {
-  font-weight: 500;
+[data-theme="dark"] .semiont-assist-progress__subject,
+[data-theme="dark"] .semiont-assist-progress__params {
+  color: var(--semiont-text-secondary);
 }
 
-.semiont-annotation-progress__params {
-  margin-bottom: 0.75rem;
-  padding: 0.5rem;
-  background-color: rgba(59, 130, 246, 0.05);
-  border-radius: 0.375rem;
-  border: 1px solid rgba(59, 130, 246, 0.2);
+.semiont-assist-progress__subject {
+  font-variant-numeric: tabular-nums;
 }
 
-[data-theme="dark"] .semiont-annotation-progress__params {
-  background-color: rgba(59, 130, 246, 0.1);
-  border-color: rgba(59, 130, 246, 0.3);
-}
-
-.semiont-annotation-progress__params-title {
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: var(--semiont-color-blue-700);
-  margin-bottom: 0.25rem;
-}
-
-[data-theme="dark"] .semiont-annotation-progress__params-title {
-  color: var(--semiont-color-blue-300);
-}
-
-.semiont-annotation-progress__param {
-  font-size: 0.75rem;
-  color: var(--semiont-color-gray-700);
-}
-
-[data-theme="dark"] .semiont-annotation-progress__param {
-  color: var(--semiont-color-gray-300);
-}
-
-.semiont-annotation-progress__param-label {
-  font-weight: 500;
-}
-
-.semiont-annotation-progress__status {
+.semiont-assist-progress__params {
   display: flex;
-  flex-direction: column;
+  flex-wrap: wrap;
   gap: 0.5rem;
-  position: relative;
 }
 
-.semiont-annotation-progress__message {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 0.875rem;
-  color: var(--semiont-color-gray-900);
-  font-weight: 500;
-  padding: 0.75rem 2.5rem 0.75rem 1rem; /* Extra right padding for close button */
-  border-radius: 0.5rem;
-  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(37, 99, 235, 0.15));
-  border: 2px solid rgba(59, 130, 246, 0.3);
-  animation: semiont-detection-pulse 2s ease-in-out infinite;
+.semiont-assist-progress__param-label {
+  font-weight: var(--semiont-font-medium);
 }
 
-.semiont-annotation-progress__close {
+/* One control, top-right, quiet until hovered. */
+.semiont-assist-progress__control {
   position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
-  width: 1.5rem;
-  height: 1.5rem;
-  border: none;
-  background-color: rgba(0, 0, 0, 0.1);
-  color: var(--semiont-color-gray-700);
-  font-size: 1.25rem;
+  top: 0;
+  right: 0;
+  padding: 0.125rem 0.25rem;
   line-height: 1;
-  border-radius: 0.25rem;
+  background: none;
+  border: none;
   cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s ease;
+  color: var(--semiont-text-secondary);
 }
 
-.semiont-annotation-progress__close:hover {
-  background-color: rgba(0, 0, 0, 0.2);
-  color: var(--semiont-color-gray-900);
+.semiont-assist-progress__control:hover {
+  color: var(--semiont-text-primary);
 }
 
-[data-theme="dark"] .semiont-annotation-progress__close {
-  background-color: rgba(255, 255, 255, 0.1);
-  color: var(--semiont-color-gray-300);
+[data-theme="dark"] .semiont-assist-progress__control {
+  color: var(--semiont-text-secondary);
 }
 
-[data-theme="dark"] .semiont-annotation-progress__close:hover {
-  background-color: rgba(255, 255, 255, 0.2);
-  color: var(--semiont-color-gray-100);
-}
-
-[data-theme="dark"] .semiont-annotation-progress__message {
-  color: var(--semiont-color-gray-100);
-  background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(37, 99, 235, 0.25));
-  border-color: rgba(59, 130, 246, 0.5);
-}
-
-@keyframes semiont-detection-pulse {
-  0%, 100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-  50% {
-    opacity: 0.85;
-    transform: scale(1.02);
-  }
-}
-
-.semiont-annotation-progress__icon {
-  font-size: 1.125rem;
-  animation: semiont-sparkle-rotate 2s linear infinite;
-}
-
-@keyframes semiont-sparkle-rotate {
-  0% {
-    transform: rotate(0deg) scale(1);
-    filter: brightness(1);
-  }
-  25% {
-    transform: rotate(90deg) scale(1.2);
-    filter: brightness(1.3);
-  }
-  50% {
-    transform: rotate(180deg) scale(1);
-    filter: brightness(1);
-  }
-  75% {
-    transform: rotate(270deg) scale(1.2);
-    filter: brightness(1.3);
-  }
-  100% {
-    transform: rotate(360deg) scale(1);
-    filter: brightness(1);
-  }
-}
-
-.semiont-annotation-progress__details {
-  font-size: 0.75rem;
-  color: var(--semiont-color-gray-500);
-}
-
-[data-theme="dark"] .semiont-annotation-progress__details {
-  color: var(--semiont-color-gray-400);
-}
-
-/* ============================================
-   Motivation-Specific Theming via data-type
-   ============================================ */
-
-/* Highlight */
 .semiont-assist-widget[data-type="highlight"] {
   border-color: var(--semiont-color-yellow-300);
 }
@@ -436,56 +253,36 @@
    ============================================ */
 
 /* Highlight - Yellow */
-.semiont-annotation-progress[data-type="highlight"] .semiont-annotation-progress__message {
-  background: linear-gradient(135deg, rgba(250, 204, 21, 0.15), rgba(234, 179, 8, 0.15));
-  border-color: rgba(250, 204, 21, 0.3);
-}
 
-[data-theme="dark"] .semiont-annotation-progress[data-type="highlight"] .semiont-annotation-progress__message {
-  background: linear-gradient(135deg, rgba(250, 204, 21, 0.25), rgba(234, 179, 8, 0.25));
-  border-color: rgba(250, 204, 21, 0.5);
-}
-
-/* Comment - Gray */
-.semiont-annotation-progress[data-type="comment"] .semiont-annotation-progress__message {
-  background: linear-gradient(135deg, rgba(107, 114, 128, 0.15), rgba(75, 85, 99, 0.15));
-  border-color: rgba(107, 114, 128, 0.3);
-}
-
-[data-theme="dark"] .semiont-annotation-progress[data-type="comment"] .semiont-annotation-progress__message {
-  background: linear-gradient(135deg, rgba(107, 114, 128, 0.25), rgba(75, 85, 99, 0.25));
-  border-color: rgba(107, 114, 128, 0.5);
-}
-
-/* Assessment - Purple */
-.semiont-annotation-progress[data-type="assessment"] .semiont-annotation-progress__message {
-  background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(147, 51, 234, 0.15));
-  border-color: rgba(168, 85, 247, 0.3);
-}
-
-[data-theme="dark"] .semiont-annotation-progress[data-type="assessment"] .semiont-annotation-progress__message {
-  background: linear-gradient(135deg, rgba(168, 85, 247, 0.25), rgba(147, 51, 234, 0.25));
-  border-color: rgba(168, 85, 247, 0.5);
-}
-
-/* Tag - Orange */
-.semiont-annotation-progress[data-type="tag"] .semiont-annotation-progress__message {
-  background: linear-gradient(135deg, rgba(251, 146, 60, 0.15), rgba(249, 115, 22, 0.15));
-  border-color: rgba(251, 146, 60, 0.3);
+/*
+ * The progress bar. `AssistProgress` is its only consumer in the whole
+ * package, so it lives here rather than in `styles/core/` — it was defined in
+ * three files while nothing else rendered it (CLEAN-PROGRESS D4). If a second
+ * consumer ever appears, promoting these rules to core is a move, not a copy.
+ *
+ * The track is NOT `--semiont-bg-secondary`: that is exactly
+ * `.semiont-assist-widget`'s own background, so the track went invisible inside
+ * the card and the fill floated with nothing to measure it against (spotted in
+ * live testing, 2026-08-12).
+ */
+.semiont-progress-bar {
+  width: 100%;
+  height: 0.5rem;
+  overflow: hidden;
+  border-radius: var(--semiont-radius-full);
+  background-color: var(--semiont-color-gray-200);
 }
 
-[data-theme="dark"] .semiont-annotation-progress[data-type="tag"] .semiont-annotation-progress__message {
-  background: linear-gradient(135deg, rgba(251, 146, 60, 0.25), rgba(249, 115, 22, 0.25));
-  border-color: rgba(251, 146, 60, 0.5);
+[data-theme="dark"] .semiont-progress-bar {
+  background-color: var(--semiont-color-gray-700);
 }
 
-/* Reference - Blue */
-.semiont-annotation-progress[data-type="reference"] .semiont-annotation-progress__message {
-  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(37, 99, 235, 0.15));
-  border-color: rgba(59, 130, 246, 0.3);
+.semiont-progress-bar__fill {
+  height: 100%;
+  background-color: var(--semiont-color-primary-500);
+  transition: width 0.3s ease;
 }
 
-[data-theme="dark"] .semiont-annotation-progress[data-type="reference"] .semiont-annotation-progress__message {
-  background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(37, 99, 235, 0.25));
-  border-color: rgba(59, 130, 246, 0.5);
+[data-theme="dark"] .semiont-progress-bar__fill {
+  background-color: var(--semiont-color-primary-400);
 }

package/src/components/resource/panels/AssistSection.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useCallback } from 'react';
+import { assistProgressCopy, assistSubjectCopy, assistParamLabel } from '../../../lib/assist-progress-copy';
 import { useTranslations } from '../../../contexts/TranslationContext';
 import type { SemiontSession } from '@semiont/sdk';
 import type { Motivation, components } from '@semiont/core';
@@ -93,11 +94,10 @@ export function AssistSection({
         translations: {
           cancel: t('cancel'),
           inProgress: t('annotating'),
-          complete: t('complete'),
-          failed: t('failed'),
-          paramsTitle: ta('paramsTitle'),
-          processing: (label) => ta('processing', { label }),
           close: ta('close'),
+          message: assistProgressCopy(ta),
+          subject: assistSubjectCopy(ta),
+          paramLabel: assistParamLabel(ta),
         },
       }}
       form={

package/src/components/resource/panels/AssistShell.tsx

@@ -2,13 +2,13 @@
 
 import { useState, useEffect, type ReactNode } from 'react';
 import type { components } from '@semiont/core';
-import { AssistProgress, type AssistProgressProps } from '../../AssistProgress';
+import { AssistProgress, type AssistProgressProps, type AssistDataType } from '../../AssistProgress';
 
 type JobProgress = components['schemas']['JobProgress'];
 
 export interface AssistShellProps {
-  /** localStorage persist-key suffix and CSS `data-type` ('highlight' | 'comment' | 'assessment' | 'reference' | 'tag'). */
-  assistType: string;
+  /** localStorage persist-key suffix and CSS `data-type`. */
+  assistType: AssistDataType;
   /** Collapsible section title (already translated). */
   title: string;
   isAssisting: boolean;
@@ -24,7 +24,7 @@ export interface AssistShellProps {
    * itself, so a caller that omitted this would render untranslated chrome —
    * the failure Lane A exists to make impossible.
    */
-  progressProps: Omit<AssistProgressProps, 'progress' | 'dataType'>;
+  progressProps: Omit<AssistProgressProps, 'progress' | 'dataType' | 'ended'>;
 }
 
 /**
@@ -70,6 +70,14 @@ export function AssistShell({ assistType, title, isAssisting, progress, form, pr
             <AssistProgress
               progress={progress}
               dataType={assistType}
+              // `ended` is deliberately NOT in `progressProps` (it is Omit'd):
+              // the shell watches the job lifecycle, so a panel cannot get this
+              // wrong or forget it.
+              // D7: terminality is the OWNER's fact. `isAssisting` follows the
+              // job lifecycle (job:complete / job:fail); the widget must never
+              // infer "done" from a progress payload, which cannot tell it
+              // about a cancel or a crash after the last tick.
+              ended={!isAssisting}
               {...progressProps}
               {...(isAssisting ? { onDismiss: undefined } : {})}
             />

package/src/components/resource/panels/CollaborationPanel.css

@@ -19,10 +19,6 @@
   color: var(--semiont-text-primary);
 }
 
-[data-theme="dark"] .semiont-collaboration-panel__title {
-  color: var(--semiont-text-primary);
-}
-
 /* Sections */
 .semiont-collaboration-panel__section {
   display: flex;
@@ -93,10 +89,6 @@
   color: var(--semiont-text-tertiary);
 }
 
-[data-theme="dark"] .semiont-collaboration-panel__status-text {
-  color: var(--semiont-text-tertiary);
-}
-
 .semiont-collaboration-panel__status-text[data-connected="true"] {
   color: var(--semiont-color-success-dark);
 }
@@ -110,10 +102,6 @@
   color: var(--semiont-text-tertiary);
 }
 
-[data-theme="dark"] .semiont-collaboration-panel__event-count {
-  color: var(--semiont-text-tertiary);
-}
-
 /* Details */
 .semiont-collaboration-panel__details {
   display: flex;
@@ -133,10 +121,6 @@
   color: var(--semiont-text-primary);
 }
 
-[data-theme="dark"] .semiont-collaboration-panel__label {
-  color: var(--semiont-text-primary);
-}
-
 /* Description */
 .semiont-collaboration-panel__description {
   margin: 0;
@@ -208,15 +192,56 @@
   color: var(--semiont-text-primary);
 }
 
-[data-theme="dark"] .semiont-collaboration-panel__username {
+.semiont-collaboration-panel__user-status {
+  font-size: var(--semiont-text-xs);
+  color: var(--semiont-text-tertiary);
+}
+
+/* Collaborators roster — one row per software agent (INFERENCE-LIMITS-EXPOSURE P3a) */
+.semiont-collaboration-panel__collaborator {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  padding: 0.375rem 0;
+  font-size: var(--semiont-text-sm);
+  line-height: 1.4;
+}
+
+.semiont-collaboration-panel__collaborator + .semiont-collaboration-panel__collaborator {
+  border-top: 1px solid var(--semiont-border-secondary);
+}
+
+[data-theme="dark"] .semiont-collaboration-panel__collaborator + .semiont-collaboration-panel__collaborator {
+  border-top-color: var(--semiont-color-gray-700);
+}
+
+.semiont-collaboration-panel__collaborator-id {
+  display: flex;
+  gap: 0.375rem;
+  align-items: baseline;
   color: var(--semiont-text-primary);
 }
 
-.semiont-collaboration-panel__user-status {
+/* The provider is context for the model, not a peer of it. */
+.semiont-collaboration-panel__collaborator-provider {
   font-size: var(--semiont-text-xs);
-  color: var(--semiont-text-tertiary);
+  color: var(--semiont-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
 }
 
-[data-theme="dark"] .semiont-collaboration-panel__user-status {
-  color: var(--semiont-text-tertiary);
-}
+.semiont-collaboration-panel__collaborator-model {
+  font-weight: var(--semiont-font-medium);
+  word-break: break-all;
+}
+
+.semiont-collaboration-panel__collaborator-jobs,
+.semiont-collaboration-panel__collaborator-limits {
+  font-size: var(--semiont-text-xs);
+  color: var(--semiont-text-secondary);
+}
+
+/* Ceilings are figures — align them with the numeral treatment used elsewhere. */
+.semiont-collaboration-panel__collaborator-limits {
+  font-variant-numeric: tabular-nums;
+}

package/src/components/resource/panels/CollaborationPanel.tsx

@@ -1,9 +1,26 @@
 'use client';
 
-import type { ConnectionState } from '@semiont/core';
+import type { CollaboratorEntry, ConnectionState } from '@semiont/core';
 import { useTranslations } from '../../../contexts/TranslationContext';
 import './CollaborationPanel.css';
 
+/**
+ * Token counts read as ceilings, not quantities — "200K" carries the meaning a
+ * bare 200000 makes the reader compute. Kept lossless above the K/M break so a
+ * 128000 window never displays as a rounded-away 130K.
+ */
+function formatTokens(n: number): string {
+  if (n >= 1_000_000) {
+    const m = n / 1_000_000;
+    return `${Number.isInteger(m) ? m : m.toFixed(1)}M`;
+  }
+  if (n >= 1_000) {
+    const k = n / 1_000;
+    return `${Number.isInteger(k) ? k : k.toFixed(1)}K`;
+  }
+  return String(n);
+}
+
 interface Props {
   /**
    * Connection state from `client.actor.state$`. See
@@ -26,16 +43,34 @@ interface Props {
   eventCount: number;
   lastEventTimestamp?: string;
   knowledgeBaseName?: string;
+  /**
+   * The KB's collaborator roster (`client.browse.agents()`, typically via
+   * `useCollaborators`). Optional so hosts that never wire it — including
+   * external consumers of this package — render exactly as before.
+   *
+   * Each entry's `limits` is absent whenever discovery could not answer *right
+   * now* (INFERENCE-LIMITS-EXPOSURE D3), so a missing ceiling is normal and
+   * shows as no ceiling rather than as an error.
+   */
+  collaborators?: CollaboratorEntry[];
 }
 
 export function CollaborationPanel({
   state,
   eventCount,
   lastEventTimestamp,
-  knowledgeBaseName
+  knowledgeBaseName,
+  collaborators
 }: Props) {
   const t = useTranslations('CollaborationPanel');
 
+  // Only Software agents have a provider/model and can carry inference
+  // ceilings; Persons and Organizations are collaborators in a different
+  // sense and have nothing to show in this section.
+  const softwareAgents = (collaborators ?? []).filter(
+    (entry) => entry.agent['@type'] === 'Software',
+  );
+
   // Healthy = live, or briefly flapping. Only genuinely sustained
   // disconnects surface as "Disconnected" in the UI.
   const isHealthy = state === 'open' || state === 'reconnecting' || state === 'initial' || state === 'connecting';
@@ -122,6 +157,62 @@ export function CollaborationPanel({
         </div>
       </div>
 
+      {/* Collaborators roster — software agents and their discovered ceilings */}
+      {softwareAgents.length > 0 && (
+        <div className="semiont-collaboration-panel__section semiont-collaboration-panel__section--bordered">
+          <h3 className="semiont-collaboration-panel__heading">
+            {t('collaborators')}
+          </h3>
+          {softwareAgents.map((entry, i) => {
+            // `agent` is narrowed to the Software member by the filter above,
+            // but the generated union is structural, so read through a local.
+            const agent = entry.agent as Extract<CollaboratorEntry['agent'], { '@type': 'Software' }>;
+            const limits = entry.limits;
+            // `maxOutputTokens === contextTokens` is the schema's documented
+            // sentinel for a provider with ONE shared window (Ollama). Showing
+            // "128K in / 128K out" there would invent a distinction the
+            // provider does not make.
+            const ceiling = !limits
+              ? null
+              : limits.maxOutputTokens === limits.contextTokens
+                ? t('sharedWindow', { contextTokens: formatTokens(limits.contextTokens) })
+                : t('ceilings', {
+                    contextTokens: formatTokens(limits.contextTokens),
+                    maxOutputTokens: formatTokens(limits.maxOutputTokens),
+                  });
+
+            return (
+              <div
+                key={agent['@id'] ?? `${agent.provider}:${agent.model}:${i}`}
+                className="semiont-collaboration-panel__collaborator"
+                data-testid="semiont-collaborator-row"
+              >
+                <div className="semiont-collaboration-panel__collaborator-id">
+                  {agent.provider && (
+                    <span className="semiont-collaboration-panel__collaborator-provider">
+                      {agent.provider}
+                    </span>
+                  )}
+                  <span className="semiont-collaboration-panel__collaborator-model">
+                    {agent.model ?? agent.name}
+                  </span>
+                </div>
+                {entry.servesJobTypes && entry.servesJobTypes.length > 0 && (
+                  <div className="semiont-collaboration-panel__collaborator-jobs">
+                    {entry.servesJobTypes.join(', ')}
+                  </div>
+                )}
+                {ceiling && (
+                  <div className="semiont-collaboration-panel__collaborator-limits">
+                    {ceiling}
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      )}
+
       {/* Sharing Section - Placeholder for future */}
       <div className="semiont-collaboration-panel__section semiont-collaboration-panel__section--bordered">
         <h3 className="semiont-collaboration-panel__heading">