@kb-labs/studio-app 0.6.0

package/src/components/health-banner.tsx

@@ -0,0 +1,134 @@
+import { useDataSources } from '../providers/data-sources-provider';
+import { useHealthStatus, useReadyStatus } from '@kb-labs/studio-data-client';
+import { studioConfig } from '@/config/studio.config';
+import { RefreshCw, AlertCircle, AlertTriangle, Info } from 'lucide-react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useRegistryV2 } from '../providers/registry-v2-provider';
+import type { HealthStatus } from '@kb-labs/studio-data-client';
+import styles from './health-banner.module.css';
+
+export function HealthBanner() {
+  const sources = useDataSources();
+  const _registry = useRegistryV2();
+  const sseHealth = null as { status: string; ts?: string; ready: boolean; reason?: string } | null;
+  const { data: healthRaw, error, refetch } = useHealthStatus(sources.system);
+  const { data: ready } = useReadyStatus(sources.system);
+  const [showDetails, setShowDetails] = useState(false);
+  const lastRefetchedTs = useRef<string | null>(null);
+
+  useEffect(() => {
+    if (!sseHealth) {return;}
+    const shouldRefetch =
+      (!sseHealth.ready || sseHealth.status === 'degraded') &&
+      sseHealth.ts &&
+      sseHealth.ts !== lastRefetchedTs.current;
+    if (shouldRefetch) {
+      lastRefetchedTs.current = sseHealth.ts ?? null;
+      void refetch();
+    }
+  }, [sseHealth, refetch]);
+
+  const healthSnapshot = (healthRaw as Record<string, unknown> | undefined)?.snapshot as
+    | HealthStatus['snapshot']
+    | undefined;
+
+  const fallbackStatus =
+    healthSnapshot?.status ?? ((healthRaw as { ok?: boolean } | undefined)?.ok ? 'healthy' : 'unknown');
+  const healthStatus = sseHealth?.status ?? fallbackStatus;
+  const readyStatus = sseHealth?.ready ?? ready?.ready ?? true;
+  const readyReason = !readyStatus ? sseHealth?.reason ?? ready?.reason : undefined;
+
+  const impactedComponents = (healthSnapshot?.checks ?? [])
+    .filter((check) => check.status !== 'ok')
+    .map((check) => ({ id: check.id, lastError: check.message ?? 'unknown issue' }));
+
+  const pluginMetrics = useMemo(() => {
+    const meta = healthSnapshot?.meta as Record<string, unknown> | undefined;
+    const pluginMounts = meta?.pluginMounts as Record<string, unknown> | undefined;
+    const succeeded =
+      pluginMounts && typeof pluginMounts.succeeded === 'number'
+        ? (pluginMounts.succeeded as number)
+        : undefined;
+    const failed =
+      pluginMounts && typeof pluginMounts.failed === 'number'
+        ? (pluginMounts.failed as number)
+        : undefined;
+    if (succeeded === undefined && failed === undefined) {return null;}
+    return { succeeded: succeeded ?? 0, failed: failed ?? 0 };
+  }, [healthSnapshot]);
+
+  const isDegraded =
+    (healthStatus === 'degraded' || healthSnapshot?.state === 'partial_observability') && readyStatus;
+  const isDown = !!error || !readyStatus;
+  const isMockMode =
+    studioConfig.dataSourceMode === 'mock' ||
+    (studioConfig.dataSourceMode === 'http' && !healthSnapshot && error);
+
+  if (!isDegraded && !isDown && !isMockMode) {return null;}
+
+  const variant = isDown ? 'error' : isDegraded ? 'warning' : 'info';
+
+  const stripCls = {
+    error: styles.stripError,
+    warning: styles.stripWarning,
+    info: styles.stripInfo,
+  }[variant];
+
+  const IconComponent = { error: AlertCircle, warning: AlertTriangle, info: Info }[variant];
+  const iconSize = 14;
+
+  const message = isDown
+    ? 'REST API unavailable'
+    : isDegraded
+    ? 'REST API degraded'
+    : 'Mock mode';
+
+  const description = isDown
+    ? `Not ready at ${studioConfig.apiBaseUrl}${readyReason ? ` — ${readyReason}` : ''}`
+    : isDegraded
+    ? `Some services may be unavailable${pluginMetrics?.failed ? ` · ${pluginMetrics.failed} plugin mount(s) failed` : ''}`
+    : 'Using mock data for development';
+
+  const hasDetails = isDegraded && impactedComponents.length > 0;
+
+  return (
+    <>
+      <div className={`${styles.strip} ${stripCls}`}>
+        <span className={styles.icon}>
+          <IconComponent size={iconSize} />
+        </span>
+        <span className={styles.message}>{message}</span>
+        <span className={styles.description}>{description}</span>
+        {hasDetails && (
+          <button
+            type="button"
+            className={styles.detailsBtn}
+            onClick={() => setShowDetails((v) => !v)}
+          >
+            {showDetails ? 'Hide details' : 'Details'}
+          </button>
+        )}
+        <button
+          type="button"
+          className={styles.retryBtn}
+          onClick={() => refetch()}
+          title="Retry"
+        >
+          <RefreshCw size={13} />
+        </button>
+      </div>
+
+      {showDetails && hasDetails && (
+        <div className={styles.details}>
+          <ul className={styles.detailsList}>
+            {impactedComponents.map((c) => (
+              <li key={c.id}>
+                <strong>{c.id}</strong>: {c.lastError}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </>
+  );
+}

package/src/components/health-indicator.tsx

@@ -0,0 +1,12 @@
+import { UIBadge } from '@kb-labs/studio-ui-kit';
+
+export function HealthIndicator({ status }: { status: 'ok' | 'degraded' | 'down' }) {
+  const variantMap = {
+    ok: 'success' as const,
+    degraded: 'warning' as const,
+    down: 'error' as const,
+  };
+
+  return <UIBadge variant={variantMap[status]}>{status.toUpperCase()}</UIBadge>;
+}
+

package/src/components/page-header.tsx

@@ -0,0 +1,49 @@
+/**
+ * @module @kb-labs/studio-app/components/page-header
+ * Page header component with title, description, and optional actions
+ */
+
+import * as React from 'react';
+import { UITitle, UITypographyText } from '@kb-labs/studio-ui-kit';
+import type { ReactNode } from 'react';
+
+export interface PageHeaderProps {
+  title: string;
+  description?: string;
+  actions?: ReactNode;
+  breadcrumbs?: ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export function PageHeader({
+  title,
+  description,
+  actions,
+  breadcrumbs,
+  className,
+  style,
+}: PageHeaderProps): React.ReactElement {
+  return (
+    <div className={className} style={{ marginBottom: '24px', ...style }}>
+      {breadcrumbs && <div style={{ marginBottom: '12px' }}>{breadcrumbs}</div>}
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: '16px', flexWrap: 'wrap' }}>
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <UITitle level={1} className="typo-page-title" style={{ margin: 0, marginBottom: description ? '8px' : 0, color: 'var(--text-primary)' }}>
+            {title}
+          </UITitle>
+          {description && (
+            <UITypographyText className="typo-description" style={{ color: 'var(--text-secondary)', display: 'block' }}>
+              {description}
+            </UITypographyText>
+          )}
+        </div>
+        {actions && (
+          <div style={{ display: 'flex', gap: '8px', alignItems: 'flex-start', flexWrap: 'wrap' }}>
+            {actions}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/page-transition.tsx

@@ -0,0 +1,24 @@
+/**
+ * @module @kb-labs/studio-app/components/page-transition
+ * Page transition wrapper with configurable animation types
+ *
+ * NOTE: Animation logic temporarily disabled.
+ * Infrastructure kept for future UI animation features.
+ */
+
+import * as React from 'react';
+
+export interface PageTransitionProps {
+  children: React.ReactNode;
+}
+
+/**
+ * Page transition wrapper component.
+ * Currently renders children directly without animations.
+ * The feature flag and settings infrastructure remain in place for future animation features.
+ */
+export function PageTransition({ children }: PageTransitionProps) {
+  // Animation logic temporarily disabled - instant navigation preferred for SaaS
+  // Infrastructure kept for potential future use with other UI animations
+  return <>{children}</>;
+}

package/src/components/role-switcher.tsx

@@ -0,0 +1,148 @@
+/**
+ * @module @kb-labs/studio-app/components/role-switcher
+ * Mock authentication role switcher for demo purposes
+ */
+
+import * as React from 'react';
+import {
+  UICard, UIRadio, UIRadioGroup, UISpace, UITitle, UITypographyText, UITypographyParagraph,
+  UIAlert, UIDivider, UIIcon,
+} from '@kb-labs/studio-ui-kit';
+import type { UserRole } from '@/providers/auth-provider';
+import { useAuth } from '@/providers/auth-provider';
+
+const ROLE_CONFIG: Record<
+  UserRole,
+  {
+    label: string;
+    description: string;
+    icon: React.ReactElement;
+    color: string;
+    permissions: string[];
+  }
+> = {
+  viewer: {
+    label: 'Viewer',
+    description: 'Read-only access to dashboards and reports',
+    icon: <UIIcon name="EyeOutlined" />,
+    color: '#52c41a',
+    permissions: ['View dashboards', 'View analytics', 'View workflows (read-only)'],
+  },
+  operator: {
+    label: 'Operator',
+    description: 'Standard user with execution permissions',
+    icon: <UIIcon name="ToolOutlined" />,
+    color: '#1890ff',
+    permissions: [
+      'All Viewer permissions',
+      'Execute workflows',
+      'Manage widgets',
+      'Configure settings',
+    ],
+  },
+  admin: {
+    label: 'Administrator',
+    description: 'Full access to all features and settings',
+    icon: <UIIcon name="CrownOutlined" />,
+    color: '#ff4d4f',
+    permissions: [
+      'All Operator permissions',
+      'Manage plugins',
+      'System configuration',
+      'Advanced developer tools',
+    ],
+  },
+};
+
+export function RoleSwitcher() {
+  const { role, setRole } = useAuth();
+
+  const handleRoleChange = (newRole: UserRole) => {
+    setRole(newRole);
+  };
+
+  return (
+    <div>
+      <UITitle level={4}>
+        <UIIcon name="UserOutlined" style={{ marginRight: 8 }} />
+        Mock Authentication
+      </UITitle>
+      <UITypographyParagraph type="secondary">
+        This is a demo authentication system for testing different user roles. In production, this
+        would be replaced with real authentication (OAuth, JWT, etc.).
+      </UITypographyParagraph>
+
+      <UIAlert
+        variant="info"
+        message="Demo Mode"
+        description="No real authentication is performed. Role changes take effect immediately and persist in localStorage."
+        showIcon
+        style={{ marginBottom: 24 }}
+      />
+
+      <UICard>
+        <UIRadioGroup
+          value={role}
+          onChange={(e) => handleRoleChange(e.target.value as UserRole)}
+          style={{ width: '100%' }}
+        >
+          <UISpace direction="vertical" size="large" style={{ width: '100%' }}>
+            {(Object.entries(ROLE_CONFIG) as [UserRole, (typeof ROLE_CONFIG)[UserRole]][]).map(
+              ([roleId, config]) => (
+                <UICard
+                  key={roleId}
+                  hoverable
+                  style={{
+                    borderColor: role === roleId ? config.color : undefined,
+                    borderWidth: role === roleId ? 2 : 1,
+                  }}
+                  onClick={() => handleRoleChange(roleId)}
+                >
+                  <UIRadio value={roleId} style={{ marginBottom: 8 }}>
+                    <UISpace>
+                      <span style={{ color: config.color, fontSize: 18 }}>{config.icon}</span>
+                      <UITypographyText strong style={{ fontSize: 16 }}>
+                        {config.label}
+                      </UITypographyText>
+                      {role === roleId && (
+                        <UITypographyText type="success" style={{ fontSize: 12 }}>
+                          (Current)
+                        </UITypographyText>
+                      )}
+                    </UISpace>
+                  </UIRadio>
+                  <UITypographyParagraph type="secondary" style={{ marginLeft: 24, marginBottom: 8 }}>
+                    {config.description}
+                  </UITypographyParagraph>
+                  <UIDivider style={{ margin: '12px 0' }} />
+                  <div style={{ marginLeft: 24 }}>
+                    <UITypographyText type="secondary" style={{ fontSize: 12 }}>
+                      Permissions:
+                    </UITypographyText>
+                    <ul style={{ marginTop: 8, marginBottom: 0, paddingLeft: 20 }}>
+                      {config.permissions.map((permission, idx) => (
+                        <li key={idx}>
+                          <UITypographyText type="secondary" style={{ fontSize: 12 }}>
+                            {permission}
+                          </UITypographyText>
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                </UICard>
+              )
+            )}
+          </UISpace>
+        </UIRadioGroup>
+      </UICard>
+
+      <UIAlert
+        variant="success"
+        message="Try it out!"
+        description="Switch between roles and navigate through the app to see how different permissions affect the UI and available features."
+        showIcon
+        style={{ marginTop: 24 }}
+      />
+    </div>
+  );
+}

package/src/components/run-badge.tsx

@@ -0,0 +1,13 @@
+import { UIBadge } from '@kb-labs/studio-ui-kit';
+
+export function RunBadge({ status }: { status: 'pending' | 'ok' | 'warn' | 'fail' }) {
+  const variantMap = {
+    ok: 'success' as const,
+    warn: 'warning' as const,
+    fail: 'error' as const,
+    pending: 'info' as const,
+  };
+
+  return <UIBadge variant={variantMap[status]}>{status.toUpperCase()}</UIBadge>;
+}
+