@semiont/react-ui 0.4.12 → 0.4.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@semiont/react-ui",
-  "version": "0.4.12",
+  "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/navigation/Footer.tsx

@@ -12,8 +12,9 @@ interface FooterProps {
   t: TranslateFn;
   CookiePreferences?: React.ComponentType<{ isOpen: boolean; onClose: () => void }>;
   onOpenKeyboardHelp?: () => void;
-  apiDocsUrl?: string;
   sourceCodeUrl?: string;
+  /** Show About, Privacy Policy, Terms of Service, Cookie Preferences links. False for desktop apps. */
+  showPolicyLinks?: boolean;
 }
 
 export function Footer({
@@ -22,8 +23,8 @@ export function Footer({
   t,
   CookiePreferences,
   onOpenKeyboardHelp,
-  apiDocsUrl = '/api/docs',
-  sourceCodeUrl = 'https://github.com/The-AI-Alliance/semiont'
+  sourceCodeUrl = 'https://github.com/The-AI-Alliance/semiont',
+  showPolicyLinks = true,
 }: FooterProps) {
   const [showCookiePreferences, setShowCookiePreferences] = useState(false);
 
@@ -37,25 +38,35 @@ export function Footer({
             </div>
 
             <div className="semiont-footer__links">
-              <Link
-                href={routes.about?.() || '/about'}
-                className="semiont-footer__link"
-              >
-                {t('about')}
-              </Link>
-              <Link
-                href={routes.privacy?.() || '/privacy'}
-                className="semiont-footer__link"
-              >
-                {t('privacyPolicy')}
-              </Link>
-              {CookiePreferences && (
-                <button
-                  onClick={() => setShowCookiePreferences(true)}
-                  className="semiont-footer__link"
-                >
-                  {t('cookiePreferences')}
-                </button>
+              {showPolicyLinks && (
+                <>
+                  <Link
+                    href={routes.about?.() || '/about'}
+                    className="semiont-footer__link"
+                  >
+                    {t('about')}
+                  </Link>
+                  <Link
+                    href={routes.privacy?.() || '/privacy'}
+                    className="semiont-footer__link"
+                  >
+                    {t('privacyPolicy')}
+                  </Link>
+                  {CookiePreferences && (
+                    <button
+                      onClick={() => setShowCookiePreferences(true)}
+                      className="semiont-footer__link"
+                    >
+                      {t('cookiePreferences')}
+                    </button>
+                  )}
+                  <Link
+                    href={routes.terms?.() || '/terms'}
+                    className="semiont-footer__link"
+                  >
+                    {t('termsOfService')}
+                  </Link>
+                </>
               )}
               {onOpenKeyboardHelp && (
                 <button
@@ -68,20 +79,6 @@ export function Footer({
                   </kbd>
                 </button>
               )}
-              <Link
-                href={routes.terms?.() || '/terms'}
-                className="semiont-footer__link"
-              >
-                {t('termsOfService')}
-              </Link>
-              <a
-                href={apiDocsUrl}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="semiont-footer__link"
-              >
-                {t('apiDocs')}
-              </a>
               <a
                 href={sourceCodeUrl}
                 target="_blank"
@@ -95,7 +92,7 @@ export function Footer({
         </div>
       </footer>
 
-      {CookiePreferences && (
+      {showPolicyLinks && CookiePreferences && (
         <CookiePreferences
           isOpen={showCookiePreferences}
           onClose={() => setShowCookiePreferences(false)}

package/src/components/navigation/__tests__/Footer.test.tsx

@@ -93,22 +93,6 @@ describe('Footer Component', () => {
       expect(termsLink).toHaveAttribute('href', '/terms');
     });
 
-    it('should render API Docs link with default URL', () => {
-      render(
-        <Footer
-          Link={MockLink}
-          routes={mockRoutes}
-          t={mockT}
-        />
-      );
-
-      const apiDocsLink = screen.getByText('footer.apiDocs');
-      expect(apiDocsLink).toBeInTheDocument();
-      expect(apiDocsLink).toHaveAttribute('href', '/api/docs');
-      expect(apiDocsLink).toHaveAttribute('target', '_blank');
-      expect(apiDocsLink).toHaveAttribute('rel', 'noopener noreferrer');
-    });
-
     it('should render Source Code link with default URL', () => {
       render(
         <Footer
@@ -272,20 +256,6 @@ describe('Footer Component', () => {
   });
 
   describe('Custom URLs', () => {
-    it('should use custom API Docs URL', () => {
-      render(
-        <Footer
-          Link={MockLink}
-          routes={mockRoutes}
-          t={mockT}
-          apiDocsUrl="/custom/api/docs"
-        />
-      );
-
-      const apiDocsLink = screen.getByText('footer.apiDocs');
-      expect(apiDocsLink).toHaveAttribute('href', '/custom/api/docs');
-    });
-
     it('should use custom Source Code URL', () => {
       render(
         <Footer
@@ -411,9 +381,6 @@ describe('Footer Component', () => {
         />
       );
 
-      const apiDocsLink = screen.getByText('footer.apiDocs');
-      expect(apiDocsLink).toHaveAttribute('rel', 'noopener noreferrer');
-
       const sourceLink = screen.getByText('footer.sourceCode');
       expect(sourceLink).toHaveAttribute('rel', 'noopener noreferrer');
     });

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/auth/__tests__/SignInForm.a11y.test.tsx

@@ -30,7 +30,7 @@ const mockTranslations = {
   signInPrompt: 'Sign in to your knowledge workspace',
   continueWithGoogle: 'Continue with Google',
   backendUrlLabel: 'Backend URL',
-  backendUrlPlaceholder: 'https://your-semiont-server.com',
+  backendUrlPlaceholder: 'http://localhost:4000',
   emailLabel: 'Email',
   emailPlaceholder: 'your@email.com',
   passwordLabel: 'Password',
@@ -215,26 +215,6 @@ describe('SignInForm - Accessibility', () => {
       expect(button).not.toHaveAttribute('disabled');
     });
 
-    it('should have keyboard-accessible navigation links', () => {
-      const onGoogleSignIn = vi.fn();
-
-      render(
-        <SignInForm
-          onGoogleSignIn={onGoogleSignIn}
-          Link={MockLink}
-          translations={mockTranslations}
-        />
-      );
-
-      const homeLink = screen.getByRole('link', { name: 'Back to Home' });
-      const learnMoreLink = screen.getByRole('link', { name: 'Learn More' });
-      const signUpLink = screen.getByRole('link', { name: 'Sign Up Instead' });
-
-      expect(homeLink).toHaveAttribute('href', '/');
-      expect(learnMoreLink).toHaveAttribute('href', '/about');
-      expect(signUpLink).toHaveAttribute('href', '/auth/signup');
-    });
-
     it('should have keyboard-accessible credentials submit button', () => {
       const onGoogleSignIn = vi.fn();
       const onCredentialsSignIn = vi.fn();
@@ -273,22 +253,21 @@ describe('SignInForm - Accessibility', () => {
       expect(button).toHaveAccessibleName(/Continue with Google/i);
     });
 
-    it('should have accessible link names', () => {
+    it('should have accessible button names', () => {
       const onGoogleSignIn = vi.fn();
 
       render(
         <SignInForm
           onGoogleSignIn={onGoogleSignIn}
+          backendUrl="http://localhost:4000"
           Link={MockLink}
           translations={mockTranslations}
         />
       );
 
-      const links = screen.getAllByRole('link');
-
-      // All links should have accessible names
-      links.forEach(link => {
-        expect(link).toHaveAccessibleName();
+      const buttons = screen.getAllByRole('button');
+      buttons.forEach(button => {
+        expect(button).toHaveAccessibleName();
       });
     });
   });
@@ -410,23 +389,23 @@ describe('SignInForm - Accessibility', () => {
       expect(button?.className).toBeTruthy();
     });
 
-    it('should have visible focus indicators on links', () => {
+    it('should have visible focus indicators on buttons', () => {
       const onGoogleSignIn = vi.fn();
 
       const { container } = render(
         <SignInForm
           onGoogleSignIn={onGoogleSignIn}
+          backendUrl="http://localhost:4000"
           Link={MockLink}
           translations={mockTranslations}
         />
       );
 
-      const links = container.querySelectorAll('a');
+      const buttons = container.querySelectorAll('button');
 
-      // At least one link should exist and have focus styling
-      expect(links.length).toBeGreaterThan(0);
-      links.forEach(link => {
-        expect(link.className).toBeTruthy();
+      expect(buttons.length).toBeGreaterThan(0);
+      buttons.forEach(button => {
+        expect(button.className).toBeTruthy();
       });
     });
   });

package/src/features/auth/components/SignInForm.tsx

@@ -305,7 +305,6 @@ export function SignInForm({
   error,
   showCredentialsAuth = false,
   isLoading = false,
-  Link,
   translations: t,
 }: SignInFormProps) {
   const handleGoogleClick = () => {
@@ -374,18 +373,6 @@ export function SignInForm({
             )}
           </div>
 
-          {/* Navigation Links */}
-          <div className="semiont-auth__links">
-            <Link href="/" className={buttonStyles.secondary.base}>
-              {t.backToHome}
-            </Link>
-            <Link href="/about" className={buttonStyles.secondary.base}>
-              {t.learnMore}
-            </Link>
-            <Link href="/auth/signup" className={buttonStyles.primary.base}>
-              {t.signUpInstead}
-            </Link>
-          </div>
         </div>
       </div>
     </main>

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;
 }