@kb-labs/studio-app 0.6.0

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

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

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

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

@@ -0,0 +1,66 @@
+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 };

package/src/components/ui/kb-quick-search.module.css

@@ -0,0 +1,86 @@
+.searchWrap {
+  padding: 16px 16px 0;
+}
+
+.searchInput {
+  margin-bottom: 12px;
+}
+
+.list {
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.emptyState {
+  padding: 40px 16px;
+}
+
+.resultItem {
+  padding: 12px 16px;
+  cursor: pointer;
+  border-left: 3px solid transparent;
+  transition: background-color 0.15s, border-color 0.15s;
+}
+
+.resultItem.selected {
+  background-color: var(--bg-tertiary);
+  border-left-color: var(--primary-color, #1890ff);
+}
+
+.categoryIcon {
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.itemTitle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.itemDesc {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.enterHint {
+  font-size: 11px;
+  color: var(--text-tertiary);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.footer {
+  padding: 12px 16px;
+  border-top: 1px solid var(--border-primary);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 12px;
+  color: var(--text-tertiary);
+}
+
+.footerLeft {
+  display: flex;
+  gap: 12px;
+}
+
+.footerHint {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+kbd {
+  padding: 2px 4px;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-primary);
+  border-radius: 2px;
+  font-size: 11px;
+}