@kb-labs/studio-app 0.6.0

package/src/components/devtools/devtools-panel.module.css

@@ -0,0 +1,121 @@
+/* ── Toggle button ───────────────────────────────────────────────────── */
+
+.toggleBtn {
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 9999;
+  transition: bottom 0.2s ease;
+  width: 96px;
+  height: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 0 10px;
+  background: var(--bg-spotlight, #1f1f1f);
+  color: var(--text-inverse);
+  border: none;
+  cursor: pointer;
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  box-shadow: 0 -2px 8px var(--shadow-elevated);
+  user-select: none;
+  border-radius: 6px 6px 0 0;
+}
+
+.toggleBtn.open {
+  border-radius: 0 0 6px 6px;
+}
+
+.toggleArrow {
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  flex-shrink: 0;
+}
+
+.toggleArrow.arrowUp {
+  border-bottom: 5px solid var(--text-inverse);
+}
+
+.toggleArrow.arrowDown {
+  border-top: 5px solid var(--text-inverse);
+}
+
+/* ── Floating panel ──────────────────────────────────────────────────── */
+
+.panel {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 9998;
+  background: var(--bg-secondary);
+  border-top: 1px solid var(--border-primary);
+  box-shadow: 0 -4px 20px var(--shadow-elevated);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* ── Drag handle ─────────────────────────────────────────────────────── */
+
+.dragHandle {
+  height: 6px;
+  cursor: ns-resize;
+  background: transparent;
+  flex-shrink: 0;
+  position: relative;
+}
+
+.dragGrip {
+  position: absolute;
+  top: 2px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 36px;
+  height: 3px;
+  border-radius: 2px;
+  background: var(--border-secondary);
+  pointer-events: none;
+}
+
+/* ── Top bar ─────────────────────────────────────────────────────────── */
+
+.topBar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 2px;
+  padding: 0 8px;
+  height: 28px;
+  border-bottom: 1px solid var(--border-primary);
+  flex-shrink: 0;
+}
+
+.iconBtn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 2px 6px;
+  font-size: 13px;
+  color: var(--text-secondary);
+  border-radius: 4px;
+  line-height: 1;
+  transition: background 0.15s, color 0.15s;
+}
+
+.iconBtn:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+/* ── Content ─────────────────────────────────────────────────────────── */
+
+.content {
+  flex: 1;
+  overflow: hidden;
+}

package/src/components/devtools/devtools-panel.tsx

@@ -0,0 +1,115 @@
+import * as React from 'react';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { UIBadge } from '@kb-labs/studio-ui-kit';
+import { useDevToolsStore } from '@/hooks/use-devtools-store';
+import { useFeatureFlags } from '@/hooks/use-feature-flags';
+import { DevToolsLogFeed } from './devtools-log-feed';
+import styles from './devtools-panel.module.css';
+
+const MIN_HEIGHT = 120;
+const DEFAULT_HEIGHT = 280;
+
+export function DevToolsPanel() {
+  const { isEnabled } = useFeatureFlags();
+  if (!isEnabled('devtools-panel')) {return null;}
+  return <DevToolsPanelInner />;
+}
+
+function DevToolsPanelInner() {
+  const { channels } = useDevToolsStore();
+  const [open, setOpen] = useState(false);
+  const [maximized, setMaximized] = useState(false);
+  const [height, setHeight] = useState(DEFAULT_HEIGHT);
+
+  const errorCount = React.useMemo(() => {
+    let count = 0;
+    channels.forEach((ch) => {
+      (ch.getEvents() as Array<{ status?: string }>).forEach((e) => {
+        if (e.status === 'error' || e.status === 'warning') {count++;}
+      });
+    });
+    return count;
+  }, [channels]);
+
+  // ── Drag to resize ──────────────────────────────────────────────────────
+  const dragRef = useRef<{ startY: number; startH: number } | null>(null);
+
+  const onResizeMouseDown = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    dragRef.current = { startY: e.clientY, startH: height };
+
+    const onMove = (ev: MouseEvent) => {
+      if (!dragRef.current) {return;}
+      const delta = dragRef.current.startY - ev.clientY;
+      setHeight(Math.max(MIN_HEIGHT, dragRef.current.startH + delta));
+      setMaximized(false);
+    };
+    const onUp = () => {
+      dragRef.current = null;
+      window.removeEventListener('mousemove', onMove);
+      window.removeEventListener('mouseup', onUp);
+    };
+    window.addEventListener('mousemove', onMove);
+    window.addEventListener('mouseup', onUp);
+  }, [height]);
+
+  // ── Keyboard shortcut: Ctrl+Shift+D ────────────────────────────────────
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.ctrlKey && e.shiftKey && e.key === 'D') {
+        e.preventDefault();
+        setOpen((v) => !v);
+      }
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, []);
+
+  const panelHeight = maximized ? 'calc(100vh - 48px)' : height;
+  const toggleBottom = open ? (maximized ? 'calc(100vh - 48px)' : height) : 0;
+
+  return (
+    <>
+      {/* Toggle button */}
+      <button
+        className={`${styles.toggleBtn} ${open ? styles.open : ''}`}
+        style={{ bottom: toggleBottom }}
+        onClick={() => setOpen((v) => !v)}
+      >
+        <span className={`${styles.toggleArrow} ${open ? styles.arrowDown : styles.arrowUp}`} />
+        <span>DevTools</span>
+        {errorCount > 0 && <UIBadge count={errorCount} size="small" style={{ marginLeft: 2 }} />}
+      </button>
+
+      {/* Floating panel */}
+      {open && (
+        <div className={styles.panel} style={{ height: panelHeight }}>
+          <div className={styles.dragHandle} onMouseDown={onResizeMouseDown}>
+            <div className={styles.dragGrip} />
+          </div>
+
+          <div className={styles.topBar}>
+            <button
+              className={styles.iconBtn}
+              onClick={() => setMaximized((v) => !v)}
+              title={maximized ? 'Restore' : 'Maximize'}
+            >
+              {maximized ? '⊡' : '⊞'}
+            </button>
+            <button
+              className={styles.iconBtn}
+              onClick={() => setOpen(false)}
+              title="Close (Ctrl+Shift+D)"
+            >
+              ✕
+            </button>
+          </div>
+
+          <div className={styles.content}>
+            <DevToolsLogFeed />
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

package/src/components/empty-state.tsx

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

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

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