@kb-labs/studio-app 0.6.0 → 2.8.0

package/src/components/ui/kb-config-provider.tsx

@@ -1,130 +0,0 @@
-import * as React from 'react';
-import { ConfigProvider } from 'antd';
-import type { ConfigProviderProps, ThemeConfig } from 'antd';
-import { getAntDesignTokens, getAntDesignComponents } from '@kb-labs/studio-hooks';
-import { ThemeTransitionOverlay } from './theme-transition-overlay';
-
-export type ThemeMode = 'light' | 'dark' | 'auto';
-
-export interface KBConfigProviderProps extends Omit<ConfigProviderProps, 'theme'> {
-  defaultTheme?: ThemeMode;
-  storageKey?: string;
-  children: React.ReactNode;
-}
-
-const KBConfigProviderContext = React.createContext<{
-  theme: ThemeMode;
-  setTheme: (theme: ThemeMode) => void;
-}>({
-  theme: 'light',
-  setTheme: () => {},
-});
-
-export function KBConfigProvider({
-  defaultTheme = 'light',
-  storageKey = 'studio-ui-theme',
-  children,
-  ...configProps
-}: KBConfigProviderProps) {
-  // Get initial theme
-  const getInitialTheme = (): ThemeMode => {
-    if (typeof window === 'undefined') {return defaultTheme;}
-    const stored = localStorage.getItem(storageKey) as ThemeMode;
-    return stored || defaultTheme;
-  };
-
-  const [theme, setThemeState] = React.useState<ThemeMode>(getInitialTheme);
-  const [showOverlay, setShowOverlay] = React.useState(false);
-  const [overlayTheme, setOverlayTheme] = React.useState<ThemeMode>(theme);
-  const [isInitialMount, setIsInitialMount] = React.useState(true);
-
-  // Get actual theme for tokens (auto -> system preference)
-  const actualTheme = React.useMemo(() => {
-    if (typeof window === 'undefined') {return theme === 'auto' ? 'light' : theme;}
-    return theme === 'auto'
-      ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
-      : theme;
-  }, [theme]);
-
-  // Apply theme class SYNCHRONOUSLY on mount and theme change
-  // This ensures CSS variables are correct before tokens are computed
-  React.useLayoutEffect(() => {
-    if (typeof window === 'undefined') {return;}
-    
-    const root = document.documentElement;
-    root.classList.remove('light', 'dark');
-    root.classList.add(actualTheme);
-    root.setAttribute('data-theme', actualTheme);
-  }, [actualTheme]);
-
-  // Store theme in localStorage (non-blocking)
-  React.useEffect(() => {
-    if (typeof window === 'undefined') {return;}
-    localStorage.setItem(storageKey, theme);
-  }, [theme, storageKey]);
-
-  // Mark initial mount as complete after first render
-  React.useEffect(() => {
-    setIsInitialMount(false);
-  }, []);
-
-  const setTheme = React.useCallback((newTheme: ThemeMode) => {
-    // Skip overlay on initial mount
-    if (isInitialMount) {
-      setThemeState(newTheme);
-      return;
-    }
-
-    // Show overlay with new theme label
-    setOverlayTheme(newTheme);
-    setShowOverlay(true);
-
-    // Wait for overlay to slide down (300ms)
-    setTimeout(() => {
-      // Change theme while overlay covers the screen
-      setThemeState(newTheme);
-
-      // Hold overlay to let color transition finish (150ms transition + 100ms buffer)
-      setTimeout(() => {
-        // Slide overlay back up
-        setShowOverlay(false);
-      }, 250);
-    }, 300);
-  }, [isInitialMount]);
-
-  // Tokens now use CSS variables via var() - no need to recompute
-  const tokens = React.useMemo(() => getAntDesignTokens(), []);
-  const components = React.useMemo(() => getAntDesignComponents(), []);
-  // Don't use algorithm - it would invert colors again
-  // CSS variables already handle theme switching via .light/.dark classes
-  // const algorithm = React.useMemo(() => getThemeAlgorithm(theme), [theme]);
-
-  const value = React.useMemo(() => ({ theme, setTheme }), [theme, setTheme]);
-
-  const themeConfig: ThemeConfig = React.useMemo(
-    () => ({
-      token: tokens,
-      components: components,
-      // algorithm: algorithm, // Disabled - CSS variables handle theme
-    }),
-    [tokens, components]
-  );
-
-  return (
-    <KBConfigProviderContext.Provider value={value}>
-      <ConfigProvider theme={themeConfig} {...configProps}>
-        {children}
-        <ThemeTransitionOverlay show={showOverlay} theme={overlayTheme} />
-      </ConfigProvider>
-    </KBConfigProviderContext.Provider>
-  );
-}
-
-export function useKBTheme() {
-  const context = React.useContext(KBConfigProviderContext);
-  if (context === undefined) {
-    throw new Error('useKBTheme must be used within KBConfigProvider');
-  }
-  return context;
-}
-

package/src/components/ui/kb-header.module.css

@@ -1,51 +0,0 @@
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 16px;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: var(--z-header);
-  height: 64px;
-  background-color: var(--bg-secondary);
-  color: var(--text-primary);
-  border-bottom: none;
-  box-shadow: 0 1px 0 var(--border-primary), 0 2px 8px rgba(0, 0, 0, 0.04);
-  transition: padding-left 0.2s;
-}
-
-.logo {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 18px;
-  font-weight: bold;
-  color: var(--text-primary);
-  text-decoration: none;
-}
-
-.actions {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.actionBtn {
-  height: 32px !important;
-  display: flex !important;
-  align-items: center !important;
-}
-
-.userBtn {
-  height: 32px !important;
-  display: flex !important;
-  align-items: center !important;
-  gap: 6px !important;
-  padding: 0 8px !important;
-}
-
-.userName {
-  font-size: 13px;
-}

package/src/components/ui/kb-header.tsx

@@ -1,112 +0,0 @@
-import * as React from 'react';
-import { Layout, Dropdown, Avatar, type MenuProps } from 'antd';
-import { User, Search } from 'lucide-react';
-import { UIButton } from '@kb-labs/studio-ui-kit';
-import { KBThemeToggle } from './kb-theme-toggle';
-import { type SystemHealthData } from './kb-system-health-indicator';
-import { KBNotificationBell, type LogNotification } from './kb-notification-bell';
-import styles from './kb-header.module.css';
-
-const { Header: AntHeader } = Layout;
-
-export interface KBHeaderProps {
-  logo?: React.ReactNode;
-  logoLink?: string;
-  LinkComponent?: React.ComponentType<{ to: string; children: React.ReactNode; className?: string }>;
-  onLogout?: () => void;
-  profileMenuItems?: MenuProps['items'];
-  userAvatar?: string;
-  userName?: string;
-  systemHealth?: SystemHealthData;
-  systemHealthLoading?: boolean;
-  onSearchClick?: () => void;
-  sidebarCollapsed?: boolean;
-  onSidebarCollapse?: (collapsed: boolean) => void;
-  sidebarWidth?: number;
-  notifications?: LogNotification[];
-  unreadNotificationsCount?: number;
-  onMarkNotificationAsRead?: (id: string) => void;
-  onMarkAllNotificationsAsRead?: () => void;
-  onClearAllNotifications?: () => void;
-  onClearNotification?: (id: string) => void;
-  onNotificationClick?: (notification: LogNotification) => void;
-}
-
-export function KBHeader({
-  logo = 'KB Labs',
-  logoLink = '/',
-  LinkComponent,
-  onLogout,
-  profileMenuItems,
-  userAvatar,
-  userName = 'User',
-  onSearchClick,
-  sidebarWidth = 220,
-  notifications = [],
-  unreadNotificationsCount = 0,
-  onMarkNotificationAsRead,
-  onMarkAllNotificationsAsRead,
-  onClearAllNotifications,
-  onClearNotification,
-  onNotificationClick,
-}: KBHeaderProps) {
-  const profileItems: MenuProps['items'] = profileMenuItems || [
-    ...(onLogout ? [{ key: 'logout', label: 'Logout', danger: true, onClick: onLogout }] : []),
-  ];
-
-  return (
-    <AntHeader
-      className={styles.header}
-      style={{ paddingLeft: sidebarWidth + 16 }}
-    >
-      {LinkComponent ? (
-        <LinkComponent to={logoLink} className={styles.logo}>
-          {logo}
-        </LinkComponent>
-      ) : (
-        <a href={logoLink} className={styles.logo}>
-          {logo}
-        </a>
-      )}
-
-      <div className={styles.actions}>
-        {onSearchClick && (
-          <UIButton
-            variant="text"
-            icon={<Search size={16} />}
-            onClick={onSearchClick}
-            className={styles.actionBtn}
-          />
-        )}
-
-        {onMarkNotificationAsRead &&
-          onMarkAllNotificationsAsRead &&
-          onClearAllNotifications &&
-          onClearNotification && (
-            <KBNotificationBell
-              notifications={notifications}
-              unreadCount={unreadNotificationsCount}
-              onMarkAsRead={onMarkNotificationAsRead}
-              onMarkAllAsRead={onMarkAllNotificationsAsRead}
-              onClearAll={onClearAllNotifications}
-              onClearNotification={onClearNotification}
-              onNotificationClick={onNotificationClick}
-            />
-          )}
-
-        <KBThemeToggle />
-
-        <Dropdown menu={{ items: profileItems }} placement="bottomRight">
-          <UIButton variant="text" className={styles.userBtn}>
-            <Avatar
-              size={20}
-              icon={!userAvatar && <User size={12} />}
-              src={userAvatar}
-            />
-            {userName && <span className={styles.userName}>{userName}</span>}
-          </UIButton>
-        </Dropdown>
-      </div>
-    </AntHeader>
-  );
-}

package/src/components/ui/kb-notification-bell.module.css

@@ -1,103 +0,0 @@
-.bell {
-  display: flex;
-  align-items: center;
-}
-
-.panel {
-  width: 400px;
-  max-height: 500px;
-  display: flex;
-  flex-direction: column;
-  background-color: var(--bg-secondary);
-  border: 1px solid var(--border-primary);
-  border-radius: 8px;
-  box-shadow: 0 4px 16px var(--shadow);
-}
-
-.panelHeader {
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--border-primary);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-shrink: 0;
-}
-
-.panelList {
-  overflow-y: auto;
-  flex: 1;
-}
-
-.emptyState {
-  padding: 48px 16px;
-}
-
-.notifItem {
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--border-primary);
-  cursor: pointer;
-  transition: background-color 0.15s;
-}
-
-.notifItem:hover {
-  background-color: var(--bg-hover);
-}
-
-.notifItem.unread {
-  background-color: var(--bg-tertiary);
-}
-
-.notifItem.unread:hover {
-  background-color: var(--bg-hover);
-}
-
-.notifRow {
-  display: flex;
-  gap: 8px;
-}
-
-.notifIcon {
-  flex-shrink: 0;
-  padding-top: 2px;
-}
-
-.notifBody {
-  flex: 1;
-  min-width: 0;
-}
-
-.notifMeta {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 4px;
-}
-
-.notifTime {
-  margin-left: auto;
-}
-
-.notifMessage {
-  margin: 0;
-  font-size: 13px;
-  color: var(--text-primary);
-  word-break: break-word;
-}
-
-.notifExecId {
-  font-size: 11px;
-  font-family: monospace;
-  display: block;
-  margin-top: 4px;
-}
-
-.notifClear {
-  flex-shrink: 0;
-}
-
-.panelFooter {
-  padding: 8px 16px;
-  border-top: 1px solid var(--border-primary);
-  text-align: center;
-  flex-shrink: 0;
-}

package/src/components/ui/kb-notification-bell.tsx

@@ -1,199 +0,0 @@
-import * as React from 'react';
-import { Badge, Dropdown, List, Typography, Tag, Empty, Space, Tooltip } from 'antd';
-import { Bell, AlertTriangle, XCircle, X, CheckCheck } from 'lucide-react';
-import { UIButton } from '@kb-labs/studio-ui-kit';
-import styles from './kb-notification-bell.module.css';
-
-const { Text, Paragraph } = Typography;
-
-export interface LogNotification {
-  id: string;
-  timestamp: string;
-  level: 'warn' | 'error';
-  message: string;
-  plugin?: string;
-  executionId?: string;
-  error?: {
-    name: string;
-    message: string;
-  };
-  read: boolean;
-}
-
-export interface KBNotificationBellProps {
-  notifications: LogNotification[];
-  unreadCount: number;
-  onMarkAsRead: (id: string) => void;
-  onMarkAllAsRead: () => void;
-  onClearAll: () => void;
-  onClearNotification: (id: string) => void;
-  onNotificationClick?: (notification: LogNotification) => void;
-}
-
-export function KBNotificationBell({
-  notifications,
-  unreadCount,
-  onMarkAsRead,
-  onMarkAllAsRead,
-  onClearAll,
-  onClearNotification,
-  onNotificationClick,
-}: KBNotificationBellProps) {
-  const [open, setOpen] = React.useState(false);
-
-  const formatTimestamp = (timestamp: string) => {
-    const date = new Date(timestamp);
-    const now = new Date();
-    const diffMs = now.getTime() - date.getTime();
-    const diffMins = Math.floor(diffMs / 60000);
-    const diffHours = Math.floor(diffMs / 3600000);
-    const diffDays = Math.floor(diffMs / 86400000);
-
-    if (diffMins < 1) { return 'Just now'; }
-    if (diffMins < 60) { return `${diffMins}m ago`; }
-    if (diffHours < 24) { return `${diffHours}h ago`; }
-    return `${diffDays}d ago`;
-  };
-
-  const getLevelIcon = (level: 'warn' | 'error') => {
-    if (level === 'error') {
-      return <XCircle size={16} style={{ color: 'var(--error)' }} />;
-    }
-    return <AlertTriangle size={16} style={{ color: 'var(--warning)' }} />;
-  };
-
-  const getLevelColor = (level: 'warn' | 'error') => {
-    return level === 'error' ? 'red' : 'orange';
-  };
-
-  const notificationContent = (
-    <div className={styles.panel}>
-      <div className={styles.panelHeader}>
-        <Space>
-          <Text strong>Notifications</Text>
-          {unreadCount > 0 && (
-            <Badge count={unreadCount} style={{ backgroundColor: 'var(--error)' }} />
-          )}
-        </Space>
-        <Space size="small">
-          {notifications.length > 0 && (
-            <>
-              <Tooltip title="Mark all as read">
-                <UIButton
-                  variant="text"
-                  size="small"
-                  icon={<CheckCheck size={14} />}
-                  onClick={(e) => { e.stopPropagation(); onMarkAllAsRead(); }}
-                />
-              </Tooltip>
-              <Tooltip title="Clear all">
-                <UIButton
-                  variant="text"
-                  size="small"
-                  danger
-                  icon={<X size={14} />}
-                  onClick={(e) => { e.stopPropagation(); onClearAll(); }}
-                />
-              </Tooltip>
-            </>
-          )}
-        </Space>
-      </div>
-
-      <div className={styles.panelList}>
-        {notifications.length === 0 ? (
-          <div className={styles.emptyState}>
-            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="No critical logs" />
-          </div>
-        ) : (
-          <List
-            dataSource={notifications}
-            renderItem={(notification) => (
-              <div
-                className={`${styles.notifItem} ${!notification.read ? styles.unread : ''}`}
-                onClick={() => {
-                  if (!notification.read) { onMarkAsRead(notification.id); }
-                  if (onNotificationClick) {
-                    setOpen(false);
-                    onNotificationClick(notification);
-                  }
-                }}
-              >
-                <div className={styles.notifRow}>
-                  <div className={styles.notifIcon}>{getLevelIcon(notification.level)}</div>
-                  <div className={styles.notifBody}>
-                    <div className={styles.notifMeta}>
-                      <Tag color={getLevelColor(notification.level)} style={{ margin: 0 }}>
-                        {notification.level.toUpperCase()}
-                      </Tag>
-                      {notification.plugin && (
-                        <Tag color="purple" style={{ margin: 0, fontSize: 11 }}>
-                          {notification.plugin}
-                        </Tag>
-                      )}
-                      <Text type="secondary" className={styles.notifTime} style={{ fontSize: 11 }}>
-                        {formatTimestamp(notification.timestamp)}
-                      </Text>
-                    </div>
-                    <Paragraph className={styles.notifMessage} ellipsis={{ rows: 2 }}>
-                      {notification.error && typeof notification.error === 'object'
-                        ? `${notification.error.name || 'Error'}: ${notification.error.message || 'Unknown error'}`
-                        : notification.message || 'No message'}
-                    </Paragraph>
-                    {notification.executionId && (
-                      <Text type="secondary" className={styles.notifExecId}>
-                        exec: {notification.executionId.slice(0, 8)}
-                      </Text>
-                    )}
-                  </div>
-                  <div className={styles.notifClear}>
-                    <UIButton
-                      variant="text"
-                      size="small"
-                      icon={<X size={12} />}
-                      onClick={(e) => { e.stopPropagation(); onClearNotification(notification.id); }}
-                    />
-                  </div>
-                </div>
-              </div>
-            )}
-          />
-        )}
-      </div>
-
-      {notifications.length > 0 && (
-        <div className={styles.panelFooter}>
-          <UIButton
-            variant="link"
-            size="small"
-            onClick={() => {
-              setOpen(false);
-              window.location.href = '/observability/logs';
-            }}
-          >
-            View all logs →
-          </UIButton>
-        </div>
-      )}
-    </div>
-  );
-
-  return (
-    <Dropdown
-      open={open}
-      onOpenChange={setOpen}
-      popupRender={() => notificationContent}
-      trigger={['click']}
-      placement="bottomRight"
-    >
-      <Badge count={unreadCount} offset={[-2, 2]} size="small">
-        <UIButton
-          variant="text"
-          icon={<Bell size={18} />}
-          className={styles.bell}
-          style={unreadCount > 0 ? { color: 'var(--error)' } : undefined}
-        />
-      </Badge>
-    </Dropdown>
-  );
-}

package/src/components/ui/kb-page-layout.tsx

@@ -1,66 +0,0 @@
-import * as React from 'react';
-import { Layout as AntLayout } from 'antd';
-import { KBHeader, type KBHeaderProps } from './kb-header';
-import { KBSidebar, type KBSidebarProps, type NavigationItem } from './kb-sidebar';
-
-const { Content: AntContent } = AntLayout;
-
-export interface KBPageLayoutProps {
-  headerProps?: KBHeaderProps;
-  sidebarProps: Omit<KBSidebarProps, 'collapsed' | 'onCollapse'>;
-  sidebarCollapsed?: boolean;
-  onSidebarCollapse?: (collapsed: boolean) => void;
-  statusBar?: React.ReactNode;
-  children?: React.ReactNode;
-}
-
-export function KBPageLayout({
-  headerProps,
-  sidebarProps,
-  sidebarCollapsed,
-  onSidebarCollapse,
-  statusBar,
-  children,
-}: KBPageLayoutProps) {
-  const [internalCollapsed, setInternalCollapsed] = React.useState(false);
-
-  const collapsed = sidebarCollapsed !== undefined ? sidebarCollapsed : internalCollapsed;
-  const setCollapsed = React.useCallback(
-    (newCollapsed: boolean) => {
-      if (sidebarCollapsed === undefined) {
-        setInternalCollapsed(newCollapsed);
-      }
-      onSidebarCollapse?.(newCollapsed);
-    },
-    [sidebarCollapsed, onSidebarCollapse]
-  );
-
-  const sidebarWidth = collapsed ? (sidebarProps.collapsedWidth || 64) : (sidebarProps.width || 220);
-
-  return (
-    <AntLayout style={{ minHeight: '100vh' }}>
-      <KBHeader
-        {...headerProps}
-        sidebarCollapsed={collapsed}
-        onSidebarCollapse={setCollapsed}
-        sidebarWidth={sidebarWidth}
-      />
-      <AntLayout style={{ marginTop: 64 }}>
-        <KBSidebar {...sidebarProps} collapsed={collapsed} onCollapse={setCollapsed} />
-        <AntLayout
-          style={{
-            marginLeft: sidebarWidth,
-            transition: 'margin-left 0.2s',
-            minHeight: 'calc(100vh - 64px)',
-            paddingBottom: statusBar ? 28 : 0,
-          }}
-        >
-          <AntContent>{children}</AntContent>
-        </AntLayout>
-      </AntLayout>
-      {statusBar}
-    </AntLayout>
-  );
-}
-
-export type { KBHeaderProps, KBSidebarProps, NavigationItem };