@semiont/react-ui 0.4.13 → 0.4.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@semiont/react-ui",
-  "version": "0.4.13",
+  "version": "0.4.14",
   "description": "React components and hooks for Semiont",
   "main": "./dist/index.mjs",
   "types": "./dist/index.d.mts",

package/src/components/Toolbar.tsx

@@ -77,19 +77,6 @@ export function Toolbar<T extends string = string>({
             <span className="semiont-toolbar-icon" aria-hidden="true">📒</span>
           </button>
 
-          {/* Collaboration Icon */}
-          <button
-            onClick={() => handlePanelToggle('collaboration')}
-            className="semiont-toolbar-button"
-            data-active={activePanel === 'collaboration'}
-            data-panel="collaboration"
-            aria-label={t('collaboration')}
-            aria-pressed={activePanel === 'collaboration'}
-            title={t('collaboration')}
-          >
-            <span className="semiont-toolbar-icon" aria-hidden="true">👥</span>
-          </button>
-
           {/* JSON-LD Icon */}
           <button
             onClick={() => handlePanelToggle('jsonld')}
@@ -102,6 +89,19 @@ export function Toolbar<T extends string = string>({
           >
             <span className="semiont-toolbar-icon" aria-hidden="true">🌐</span>
           </button>
+
+          {/* Collaboration Icon */}
+          <button
+            onClick={() => handlePanelToggle('collaboration')}
+            className="semiont-toolbar-button"
+            data-active={activePanel === 'collaboration'}
+            data-panel="collaboration"
+            aria-label={t('collaboration')}
+            aria-pressed={activePanel === 'collaboration'}
+            title={t('collaboration')}
+          >
+            <span className="semiont-toolbar-icon" aria-hidden="true">👥</span>
+          </button>
         </>
       )}
 

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

@@ -7,12 +7,14 @@ interface Props {
   isConnected: boolean;
   eventCount: number;
   lastEventTimestamp?: string;
+  knowledgeBaseName?: string;
 }
 
 export function CollaborationPanel({
   isConnected,
   eventCount,
-  lastEventTimestamp
+  lastEventTimestamp,
+  knowledgeBaseName
 }: Props) {
   const t = useTranslations('CollaborationPanel');
 
@@ -52,6 +54,12 @@ export function CollaborationPanel({
         {t('title')}
       </h3>
 
+      {knowledgeBaseName && (
+        <div style={{ padding: '0 0.75rem 0.5rem', fontSize: '0.8rem', color: 'var(--semiont-color-neutral-400)' }}>
+          {knowledgeBaseName}
+        </div>
+      )}
+
       {/* Connection Status Section */}
       <div className="semiont-collaboration-panel__section">
         <h3 className="semiont-collaboration-panel__heading">

package/src/features/resource-viewer/components/ResourceViewerPage.tsx

@@ -90,6 +90,11 @@ export interface ResourceViewerPageProps {
    * SSE attention stream connection status for the active workspace
    */
   streamStatus: StreamStatus;
+
+  /**
+   * Name of the active knowledge base (for display in panels)
+   */
+  knowledgeBaseName?: string | undefined;
 }
 
 /**
@@ -128,6 +133,7 @@ export function ResourceViewerPage({
   ToolbarPanels,
   refetchDocument,
   streamStatus,
+  knowledgeBaseName,
 }: ResourceViewerPageProps) {
   // Translations
   const tw = useTranslations('ReferenceWizard');
@@ -628,6 +634,7 @@ export function ResourceViewerPage({
               <CollaborationPanel
                 isConnected={streamStatus === 'connected'}
                 eventCount={0}
+                knowledgeBaseName={knowledgeBaseName}
               />
             )}
 

package/src/styles/patterns/panels-base.css

@@ -401,4 +401,16 @@
 
 .semiont-panel-actions--between {
   justify-content: space-between;
+}
+
+/* Login form pulsing border for first-launch nudge */
+@keyframes semiont-pulse-border {
+  0%, 100% { border-color: var(--semiont-color-primary-300, #93c5fd); }
+  50% { border-color: var(--semiont-color-primary-600, #2563eb); }
+}
+
+.semiont-panel__login-form--pulsing {
+  border: 2px solid var(--semiont-color-primary-400, #60a5fa);
+  border-radius: var(--semiont-panel-border-radius, 0.5rem);
+  animation: semiont-pulse-border 2s ease-in-out infinite;
 }