@kb-labs/studio-app 0.6.0 → 2.8.0

package/src/components/empty-state.tsx

@@ -1,28 +0,0 @@
-import * as React from 'react';
-import { UIEmptyState as UIEmptyStateBase, UIButton } from '@kb-labs/studio-ui-kit';
-
-export interface EmptyStateProps {
-  icon?: React.ReactNode;
-  title: string;
-  description: string;
-  action?: { label: string; onClick: () => void };
-}
-
-export function EmptyState({ icon, title, description, action }: EmptyStateProps) {
-  // Convert icon component to React element if it's a component
-  const iconElement = React.isValidElement(icon)
-    ? icon
-    : icon && typeof icon === 'function'
-    ? React.createElement(icon as React.ComponentType)
-    : icon;
-
-  return (
-    <UIEmptyStateBase
-      icon={iconElement}
-      title={title}
-      description={description}
-      action={action ? <UIButton onClick={action.onClick}>{action.label}</UIButton> : undefined}
-    />
-  );
-}
-

package/src/components/error-boundary.tsx

@@ -1,210 +0,0 @@
-/**
- * @module @kb-labs/studio-app/components/ErrorBoundary
- * Custom error boundary for React Router with friendly UI
- */
-
-import * as React from 'react';
-import { useRouteError, isRouteErrorResponse, Link } from 'react-router-dom';
-import {
-  UIResult, UIButton, UICard, UITypographyText, UITypographyParagraph,
-  UISpace, UIAccordion, UITag, UIMessage, UIIcon,
-} from '@kb-labs/studio-ui-kit';
-
-export function ErrorBoundary() {
-  const error = useRouteError();
-  const [copied, setCopied] = React.useState(false);
-
-  let title = 'Упс! Что-то пошло не так';
-  let description = 'Произошла непредвиденная ошибка';
-  let status: 'error' | 'warning' | '404' | '500' | 'info' = 'error';
-  let suggestion = 'Попробуйте перезагрузить страницу или вернуться на главную';
-
-  if (isRouteErrorResponse(error)) {
-    // React Router error response
-    if (error.status === 404) {
-      status = '404';
-      title = 'Страница не найдена';
-      description = 'К сожалению, запрошенная страница не существует';
-      suggestion = 'Проверьте адрес или вернитесь на главную страницу';
-    } else {
-      status = '500';
-      title = `Ошибка ${error.status}`;
-      description = error.statusText || error.data?.message || description;
-    }
-  } else if (error instanceof Error) {
-    // JavaScript error
-    description = error.message;
-
-    // Friendly message for common errors
-    if (error.message.includes('Unsupported data source')) {
-      title = 'Ошибка конфигурации виджета';
-      description = 'Виджет имеет некорректную настройку источника данных';
-      suggestion = 'Это ошибка в манифесте плагина. Обратитесь к разработчику.';
-      status = 'warning';
-    } else if (error.message.includes('not found') || error.message.includes('404')) {
-      title = 'Ресурс не найден';
-      description = 'Запрошенный ресурс не существует';
-      suggestion = 'Проверьте настройки плагина или обратитесь к администратору';
-      status = '404';
-    } else if (error.message.includes('Failed to fetch')) {
-      title = 'Ошибка сети';
-      description = 'Не удалось подключиться к серверу';
-      suggestion = 'Проверьте подключение к интернету и попробуйте снова';
-      status = 'warning';
-    }
-  }
-
-  // Extract error details
-  const errorDetails = error instanceof Error ? {
-    name: error.name,
-    message: error.message,
-    stack: error.stack,
-  } : null;
-
-  return (
-    <div style={{
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      minHeight: '100vh',
-      padding: '2rem',
-      backgroundColor: 'var(--bg-tertiary)',
-    }}>
-      <UICard
-        style={{
-          maxWidth: '800px',
-          width: '100%',
-          borderRadius: '16px',
-          boxShadow: '0 20px 60px rgba(0,0,0,0.3)',
-          backgroundColor: 'var(--bg-secondary)',
-        }}
-        styles={{ body: { padding: '3rem' } }}
-      >
-        <UIResult
-          status={status}
-          title={<span style={{ fontSize: '1.5rem', fontWeight: 600 }}>{title}</span>}
-          subTitle={
-            <UISpace direction="vertical" size="middle" style={{ width: '100%', marginTop: '1rem' }}>
-              <UITypographyParagraph style={{ fontSize: '1rem', color: 'var(--text-secondary)', margin: 0 }}>
-                {description}
-              </UITypographyParagraph>
-              <UITypographyText type="secondary" style={{ fontSize: '0.875rem' }}>
-                💡 {suggestion}
-              </UITypographyText>
-            </UISpace>
-          }
-          extra={
-            <UISpace direction="vertical" size="large" style={{ width: '100%', marginTop: '1.5rem' }}>
-              <UISpace size="middle">
-                <Link to="/">
-                  <UIButton variant="primary" size="large" icon={<UIIcon name="HomeOutlined" />}>
-                    На главную
-                  </UIButton>
-                </Link>
-                <UIButton
-                  size="large"
-                  icon={<UIIcon name="ReloadOutlined" />}
-                  onClick={() => window.location.reload()}
-                >
-                  Перезагрузить
-                </UIButton>
-              </UISpace>
-
-              {/* Error Details Accordion */}
-              {errorDetails && (
-                <UIAccordion
-                  ghost
-                  style={{ width: '100%', textAlign: 'left' }}
-                  items={[
-                    {
-                      key: 'details',
-                      label: 'Детали ошибки (для разработчиков)',
-                      children: (
-                        <UISpace direction="vertical" size="middle" style={{ width: '100%' }}>
-                          {/* Error Type */}
-                          <div>
-                            <UITypographyText type="secondary" style={{ fontSize: '0.75rem' }}>Тип ошибки:</UITypographyText>
-                            <div style={{ marginTop: 4 }}>
-                              <UITag variant="error" icon={<UIIcon name="CodeOutlined" />}>
-                                {errorDetails.name}
-                              </UITag>
-                            </div>
-                          </div>
-
-                          {/* Error Message */}
-                          <div>
-                            <UITypographyText type="secondary" style={{ fontSize: '0.75rem' }}>Сообщение:</UITypographyText>
-                            <div
-                              style={{
-                                marginTop: 4,
-                                padding: '12px',
-                                background: 'var(--bg-secondary)',
-                                borderRadius: '8px',
-                                fontFamily: 'monospace',
-                                fontSize: '0.875rem',
-                                wordBreak: 'break-word',
-                              }}
-                            >
-                              <UITypographyText code>{errorDetails.message}</UITypographyText>
-                            </div>
-                          </div>
-
-                          {/* Stack Trace */}
-                          {errorDetails.stack && (
-                            <div>
-                              <UITypographyText type="secondary" style={{ fontSize: '0.75rem' }}>Stack Trace:</UITypographyText>
-                              <div
-                                style={{
-                                  marginTop: 4,
-                                  padding: '12px',
-                                  background: '#1e1e1e',
-                                  borderRadius: '8px',
-                                  maxHeight: '300px',
-                                  overflow: 'auto',
-                                }}
-                              >
-                                <pre
-                                  style={{
-                                    margin: 0,
-                                    fontFamily: 'Monaco, Menlo, "Courier New", monospace',
-                                    fontSize: '0.75rem',
-                                    lineHeight: 1.5,
-                                    color: '#d4d4d4',
-                                    whiteSpace: 'pre-wrap',
-                                    wordBreak: 'break-word',
-                                  }}
-                                >
-                                  {errorDetails.stack}
-                                </pre>
-                              </div>
-                            </div>
-                          )}
-
-                          {/* Copy to Clipboard */}
-                          <UIButton
-                            size="small"
-                            variant={copied ? 'primary' : 'default'}
-                            icon={copied ? <UIIcon name="CheckOutlined" /> : <UIIcon name="CopyOutlined" />}
-                            onClick={() => {
-                              const text = `${errorDetails.name}: ${errorDetails.message}\n\n${errorDetails.stack || 'No stack trace'}`;
-                              navigator.clipboard.writeText(text);
-                              setCopied(true);
-                              UIMessage.success('Ошибка скопирована в буфер обмена');
-                              setTimeout(() => setCopied(false), 2000);
-                            }}
-                          >
-                            {copied ? 'Скопировано!' : 'Скопировать в буфер обмена'}
-                          </UIButton>
-                        </UISpace>
-                      ),
-                    },
-                  ]}
-                />
-              )}
-            </UISpace>
-          }
-        />
-      </UICard>
-    </div>
-  );
-}

package/src/components/health-banner.module.css

@@ -1,103 +0,0 @@
-/* ── Health banner — compact top strip ───────────────────────────────── */
-
-.strip {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 16px;
-  font-size: 12px;
-  line-height: 1.4;
-  border-bottom: 1px solid transparent;
-}
-
-.stripError {
-  background: rgba(220, 38, 38, 0.07);
-  border-color: rgba(220, 38, 38, 0.2);
-  color: var(--error);
-}
-
-.stripWarning {
-  background: rgba(245, 158, 11, 0.07);
-  border-color: rgba(245, 158, 11, 0.2);
-  color: var(--warning);
-}
-
-.stripInfo {
-  background: rgba(14, 165, 233, 0.07);
-  border-color: rgba(14, 165, 233, 0.2);
-  color: var(--info);
-}
-
-.icon {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-}
-
-.message {
-  font-weight: 600;
-  flex-shrink: 0;
-}
-
-.description {
-  color: var(--text-secondary);
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.detailsBtn {
-  background: none;
-  border: none;
-  cursor: pointer;
-  font-size: 12px;
-  color: inherit;
-  opacity: 0.75;
-  padding: 0 4px;
-  flex-shrink: 0;
-  text-decoration: underline;
-  text-underline-offset: 2px;
-}
-
-.detailsBtn:hover {
-  opacity: 1;
-}
-
-.retryBtn {
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 2px;
-  display: flex;
-  align-items: center;
-  color: inherit;
-  opacity: 0.6;
-  flex-shrink: 0;
-  border-radius: 3px;
-}
-
-.retryBtn:hover {
-  opacity: 1;
-  background: rgba(0, 0, 0, 0.06);
-}
-
-/* ── Expanded details panel ──────────────────────────────────────────── */
-
-.details {
-  padding: 8px 16px 10px 40px;
-  font-size: 12px;
-  border-bottom: 1px solid var(--border-primary);
-  background: var(--bg-tertiary);
-}
-
-.detailsList {
-  margin: 4px 0 0 12px;
-  padding: 0;
-  list-style: disc;
-  color: var(--text-secondary);
-}
-
-.detailsList li {
-  margin-bottom: 2px;
-}

package/src/components/health-banner.tsx

@@ -1,134 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,49 +0,0 @@
-/**
- * @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

@@ -1,24 +0,0 @@
-/**
- * @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}</>;
-}