@kb-labs/studio-app 0.6.0 → 2.8.0

package/src/components/ui/kb-status-bar.tsx

@@ -1,145 +0,0 @@
-import * as React from 'react';
-import { Space, Tooltip, Badge } from 'antd';
-import {
-  ApiOutlined,
-  CloudOutlined,
-  UserOutlined,
-  SettingOutlined,
-  QuestionCircleOutlined,
-  ThunderboltOutlined,
-} from '@ant-design/icons';
-import styles from './kb-status-bar.module.css';
-
-export interface StatusBarItemProps {
-  icon?: React.ReactNode;
-  label: string;
-  tooltip?: string;
-  status?: 'success' | 'error' | 'warning' | 'processing' | 'default';
-  onClick?: () => void;
-  clickable?: boolean;
-}
-
-export function StatusBarItem({
-  icon,
-  label,
-  tooltip,
-  status,
-  onClick,
-  clickable = !!onClick,
-}: StatusBarItemProps) {
-  const content = (
-    <div
-      onClick={onClick}
-      className={`${styles.item} ${clickable ? styles.clickable : ''}`}
-    >
-      {status && <Badge status={status} />}
-      {icon && <span className={styles.itemIcon}>{icon}</span>}
-      <span>{label}</span>
-    </div>
-  );
-
-  if (tooltip) {
-    return <Tooltip title={tooltip}>{content}</Tooltip>;
-  }
-
-  return content;
-}
-
-export interface KBStatusBarProps {
-  leftItems?: React.ReactNode;
-  rightItems?: React.ReactNode;
-  children?: React.ReactNode;
-}
-
-export function KBStatusBar({ leftItems, rightItems, children }: KBStatusBarProps) {
-  return (
-    <div className={styles.bar}>
-      {children ? (
-        children
-      ) : (
-        <>
-          <div className={styles.side}>
-            <Space size={0}>{leftItems}</Space>
-          </div>
-          <div className={styles.side}>
-            <Space size={0}>{rightItems}</Space>
-          </div>
-        </>
-      )}
-    </div>
-  );
-}
-
-export const StatusBarPresets = {
-  ApiConnection: ({ connected, onClick }: { connected: boolean; onClick?: () => void }) => (
-    <StatusBarItem
-      icon={<ApiOutlined />}
-      label={connected ? 'Connected' : 'Disconnected'}
-      status={connected ? 'success' : 'error'}
-      tooltip={connected ? 'API connection active' : 'API connection lost'}
-      onClick={onClick}
-      clickable={!!onClick}
-    />
-  ),
-
-  CloudStatus: ({ synced, onClick }: { synced: boolean; onClick?: () => void }) => (
-    <StatusBarItem
-      icon={<CloudOutlined />}
-      label={synced ? 'Synced' : 'Syncing...'}
-      status={synced ? 'success' : 'processing'}
-      tooltip={synced ? 'All changes synced' : 'Syncing changes...'}
-      onClick={onClick}
-      clickable={!!onClick}
-    />
-  ),
-
-  User: ({ email, onClick }: { email: string; onClick?: () => void }) => (
-    <StatusBarItem
-      icon={<UserOutlined />}
-      label={email}
-      tooltip="Current user"
-      onClick={onClick}
-      clickable={!!onClick}
-    />
-  ),
-
-  Version: ({ version, onClick }: { version: string; onClick?: () => void }) => (
-    <StatusBarItem
-      label={`v${version}`}
-      tooltip={`Platform version ${version}`}
-      onClick={onClick}
-      clickable={!!onClick}
-    />
-  ),
-
-  Settings: ({ onClick }: { onClick: () => void }) => (
-    <StatusBarItem
-      icon={<SettingOutlined />}
-      label="Settings"
-      tooltip="Open settings"
-      onClick={onClick}
-      clickable
-    />
-  ),
-
-  Help: ({ onClick }: { onClick: () => void }) => (
-    <StatusBarItem
-      icon={<QuestionCircleOutlined />}
-      label="Help"
-      tooltip="Get help"
-      onClick={onClick}
-      clickable
-    />
-  ),
-
-  BackgroundJobs: ({ count, onClick }: { count: number; onClick?: () => void }) => (
-    <StatusBarItem
-      icon={<ThunderboltOutlined />}
-      label={count === 1 ? '1 job running' : `${count} jobs running`}
-      status="processing"
-      tooltip="View background jobs"
-      onClick={onClick}
-      clickable={!!onClick}
-    />
-  ),
-};

package/src/components/ui/kb-system-health-indicator.tsx

@@ -1,229 +0,0 @@
-import * as React from 'react';
-import { Dropdown, Badge, Divider } from 'antd';
-import { Activity, CheckCircle, AlertTriangle, XCircle, Database, Package, Clock } from 'lucide-react';
-import { UIButton } from '@kb-labs/studio-ui-kit';
-
-export interface SystemHealthData {
-  status: 'healthy' | 'degraded' | 'down' | 'unknown';
-  ready: boolean;
-  reason?: string;
-  pluginsMounted?: number;
-  pluginsFailed?: number;
-  registryRev?: number | null;
-  registryGeneratedAt?: string | null;
-  registryStale?: boolean;
-  registryPartial?: boolean;
-  redisEnabled?: boolean;
-  redisHealthy?: boolean;
-}
-
-export interface KBSystemHealthIndicatorProps {
-  health?: SystemHealthData;
-  loading?: boolean;
-  onClick?: () => void;
-}
-
-const STATUS_CONFIG = {
-  healthy: {
-    color: '#52c41a',
-    icon: CheckCircle,
-    label: 'Healthy',
-    badgeStatus: 'success' as const,
-  },
-  degraded: {
-    color: '#faad14',
-    icon: AlertTriangle,
-    label: 'Degraded',
-    badgeStatus: 'warning' as const,
-  },
-  down: {
-    color: '#ff4d4f',
-    icon: XCircle,
-    label: 'Down',
-    badgeStatus: 'error' as const,
-  },
-  unknown: {
-    color: '#8c8c8c',
-    icon: Activity,
-    label: 'Unknown',
-    badgeStatus: 'default' as const,
-  },
-} as const;
-
-function formatTimeAgo(isoString: string | null | undefined): string {
-  if (!isoString) {return 'unknown';}
-
-  const now = Date.now();
-  const timestamp = new Date(isoString).getTime();
-  const diffMs = now - timestamp;
-
-  if (diffMs < 60_000) {return 'just now';}
-  if (diffMs < 3600_000) {return `${Math.floor(diffMs / 60_000)}min ago`;}
-  if (diffMs < 86400_000) {return `${Math.floor(diffMs / 3600_000)}h ago`;}
-  return `${Math.floor(diffMs / 86400_000)}d ago`;
-}
-
-export function KBSystemHealthIndicator({
-  health,
-  loading = false,
-  onClick,
-}: KBSystemHealthIndicatorProps) {
-  const status = health?.status ?? 'unknown';
-  const config = STATUS_CONFIG[status];
-  const StatusIcon = config.icon;
-
-  // Build dropdown content
-  const dropdownContent = React.useMemo(() => {
-    if (!health) {
-      return (
-        <div style={{
-          padding: '12px 16px',
-          minWidth: 280,
-          backgroundColor: 'var(--bg-primary)',
-          borderRadius: 8,
-          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
-        }}>
-          <div style={{ fontSize: 13, color: 'var(--text-secondary)' }}>
-            No health data available
-          </div>
-        </div>
-      );
-    }
-
-    return (
-      <div style={{
-        padding: '12px 16px',
-        minWidth: 280,
-        backgroundColor: 'var(--bg-primary)',
-        borderRadius: 8,
-        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
-      }}>
-        {/* Status */}
-        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
-          <StatusIcon size={18} color={config.color} />
-          <strong style={{ fontSize: 14 }}>System Status: {config.label}</strong>
-        </div>
-        {!health.ready && health.reason && (
-          <div style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 12, paddingLeft: 26 }}>
-            Reason: {health.reason}
-          </div>
-        )}
-
-        <Divider style={{ margin: '12px 0' }} />
-
-        {/* Plugins */}
-        {(health.pluginsMounted !== undefined || health.pluginsFailed !== undefined) && (
-          <>
-            <div style={{ display: 'flex', alignItems: 'flex-start', gap: 8, marginBottom: 12 }}>
-              <Package size={16} style={{ marginTop: 2, flexShrink: 0 }} />
-              <div style={{ flex: 1 }}>
-                <div style={{ fontSize: 13 }}>Plugins: {health.pluginsMounted ?? 0} mounted</div>
-                {(health.pluginsFailed ?? 0) > 0 && (
-                  <div style={{ color: '#ff4d4f', fontSize: 12, marginTop: 2 }}>
-                    {health.pluginsFailed} failed
-                  </div>
-                )}
-              </div>
-            </div>
-          </>
-        )}
-
-        {/* Registry */}
-        {(health.registryRev !== undefined || health.registryGeneratedAt) && (
-          <>
-            <div style={{ display: 'flex', alignItems: 'flex-start', gap: 8, marginBottom: 12 }}>
-              <Database size={16} style={{ marginTop: 2, flexShrink: 0 }} />
-              <div style={{ flex: 1 }}>
-                <div style={{ fontSize: 13 }}>
-                  Registry: rev #{health.registryRev ?? 'unknown'}
-                  {(() => {
-                    const badges: string[] = [];
-                    if (health.registryStale) {badges.push('stale');}
-                    if (health.registryPartial) {badges.push('partial');}
-                    return badges.length > 0 ? ` (${badges.join(', ')})` : '';
-                  })()}
-                </div>
-                <div style={{ fontSize: 12, color: 'var(--text-secondary)', marginTop: 2 }}>
-                  Updated {formatTimeAgo(health.registryGeneratedAt)}
-                </div>
-              </div>
-            </div>
-          </>
-        )}
-
-        {/* Redis */}
-        {health.redisEnabled !== undefined && (
-          <>
-            <div style={{ display: 'flex', alignItems: 'flex-start', gap: 8 }}>
-              <Database size={16} style={{ marginTop: 2, flexShrink: 0 }} />
-              <div style={{ flex: 1 }}>
-                <div style={{ fontSize: 13 }}>
-                  Redis: {health.redisEnabled ? 'enabled' : 'disabled'}
-                </div>
-                {health.redisEnabled && (
-                  <div style={{ fontSize: 12, color: health.redisHealthy ? '#52c41a' : '#ff4d4f', marginTop: 2 }}>
-                    {health.redisHealthy ? 'healthy ✓' : 'unhealthy ✗'}
-                  </div>
-                )}
-              </div>
-            </div>
-          </>
-        )}
-      </div>
-    );
-  }, [health, config, StatusIcon]);
-
-  if (loading) {
-    return (
-      <UIButton
-        variant="text"
-        size="small"
-        icon={<Clock size={16} />}
-        style={{ display: 'flex', alignItems: 'center', gap: 6 }}
-      >
-        Loading...
-      </UIButton>
-    );
-  }
-
-  // Show badge only if there are issues
-  const showBadge =
-    status === 'degraded' ||
-    status === 'down' ||
-    (health?.pluginsFailed ?? 0) > 0 ||
-    health?.registryStale ||
-    health?.registryPartial;
-
-  const buttonElement = (
-    <UIButton
-      variant="text"
-      onClick={onClick}
-      icon={<StatusIcon size={18} color={config.color} strokeWidth={2} />}
-      style={{ display: 'flex', alignItems: 'center', gap: 4 }}
-    >
-      System
-    </UIButton>
-  );
-
-  return (
-    <Dropdown
-      dropdownRender={() => dropdownContent}
-      placement="bottomRight"
-      trigger={['click']}
-    >
-      <span style={{ display: 'inline-flex', alignItems: 'center' }}>
-        {showBadge ? (
-          <Badge
-            dot
-            status={config.badgeStatus}
-            offset={[-2, 2]}
-          >
-            {buttonElement}
-          </Badge>
-        ) : (
-          buttonElement
-        )}
-      </span>
-    </Dropdown>
-  );
-}

package/src/components/ui/kb-theme-toggle.tsx

@@ -1,42 +0,0 @@
-import * as React from 'react';
-import { Dropdown } from 'antd';
-import type { MenuProps } from 'antd';
-import { Sun, Moon, Monitor } from 'lucide-react';
-import { UIButton } from '@kb-labs/studio-ui-kit';
-import { useKBTheme, type ThemeMode } from './kb-config-provider';
-
-const themeOptions: { key: ThemeMode; label: string; icon: React.ReactNode }[] = [
-  { key: 'light', label: 'Light', icon: <Sun size={16} /> },
-  { key: 'dark', label: 'Dark', icon: <Moon size={16} /> },
-  { key: 'auto', label: 'Auto', icon: <Monitor size={16} /> },
-];
-
-export function KBThemeToggle() {
-  const { theme, setTheme } = useKBTheme();
-
-  const currentTheme = themeOptions.find((opt) => opt.key === theme) ?? themeOptions[0]!;
-
-  const items: MenuProps['items'] = themeOptions.map((option) => ({
-    key: option.key,
-    label: (
-      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-        {option.icon}
-        <span>{option.label}</span>
-      </div>
-    ),
-    onClick: () => setTheme(option.key),
-  }));
-
-  return (
-    <Dropdown menu={{ items, selectedKeys: [theme] }} placement="bottomRight">
-      <UIButton
-        variant="text"
-        icon={React.cloneElement(currentTheme.icon as React.ReactElement, { size: 16 })}
-        style={{ height: 32, display: 'flex', alignItems: 'center', gap: 4, fontSize: 13 }}
-      >
-        {currentTheme.label}
-      </UIButton>
-    </Dropdown>
-  );
-}
-