@kb-labs/studio-app 0.7.0 → 2.9.0

package/src/modules/dashboard/pages/dashboard-animations.css

@@ -1,317 +0,0 @@
-/* Dashboard Widget Animations */
-
-/* Fade-in animation for widgets */
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-/* Apply animations to widgets with staggered delays */
-.dashboard-widget {
-  animation: fadeInUp 0.6s ease-out forwards;
-  animation-delay: calc(var(--widget-index) * 0.08s);
-  opacity: 0;
-}
-
-/* Grid layout smooth transitions */
-.react-grid-item {
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
-}
-
-.react-grid-item.react-grid-placeholder {
-  background: rgba(24, 144, 255, 0.1) !important;
-  opacity: 0.8 !important;
-  transition: all 0.2s ease !important;
-  border: 2px dashed #1890ff !important;
-  border-radius: 8px !important;
-}
-
-/* Widget hover effect */
-.dashboard-widget:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
-}
-
-/* Drag handle hover */
-.drag-handle {
-  transition: all 0.2s ease;
-  opacity: 0.5;
-}
-
-.dashboard-widget:hover .drag-handle {
-  opacity: 1;
-  color: #1890ff !important;
-}
-
-/* Loading shimmer effect for skeleton */
-@keyframes shimmer {
-  0% {
-    background-position: -1000px 0;
-  }
-  100% {
-    background-position: 1000px 0;
-  }
-}
-
-.skeleton-loading {
-  animation: shimmer 2s infinite linear;
-  background: linear-gradient(
-    90deg,
-    #f0f0f0 25%,
-    #e0e0e0 37%,
-    #f0f0f0 63%
-  );
-  background-size: 1000px 100%;
-}
-
-/* Card content fade-in */
-.ant-card-body {
-  animation: fadeIn 0.4s ease-out 0.2s forwards;
-}
-
-/* Header animation */
-.kb-page-header {
-  animation: fadeInUp 0.5s ease-out;
-}
-
-/* Smooth scroll behavior */
-.ant-card-body {
-  scroll-behavior: smooth;
-}
-
-/* Chart animations */
-.recharts-surface {
-  animation: fadeIn 0.6s ease-out;
-}
-
-/* Table row animation */
-.ant-table-tbody > tr {
-  animation: fadeIn 0.3s ease-out;
-  animation-delay: calc(var(--row-index) * 0.03s);
-}
-
-/* Badge pulse animation */
-@keyframes badgePulse {
-  0%, 100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.7;
-  }
-}
-
-.ant-badge-count {
-  animation: badgePulse 2s ease-in-out infinite;
-}
-
-/* Notification bell shake */
-@keyframes bellShake {
-  0%, 100% { transform: rotate(0deg); }
-  10%, 30%, 50%, 70%, 90% { transform: rotate(-10deg); }
-  20%, 40%, 60%, 80% { transform: rotate(10deg); }
-}
-
-.notification-bell-animated {
-  animation: bellShake 0.5s ease-in-out;
-}
-
-/* Progress bar animation */
-.ant-progress-line {
-  animation: fadeIn 0.5s ease-out;
-}
-
-/* Tag animation */
-.ant-tag {
-  animation: fadeIn 0.3s ease-out;
-}
-
-/* Metric value count-up animation */
-@keyframes countUp {
-  from {
-    opacity: 0;
-    transform: scale(0.8);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-.metric-value {
-  animation: countUp 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-}
-
-/* Sparkline draw animation */
-@keyframes drawLine {
-  from {
-    stroke-dashoffset: 1000;
-  }
-  to {
-    stroke-dashoffset: 0;
-  }
-}
-
-.sparkline-path {
-  stroke-dasharray: 1000;
-  animation: drawLine 1.5s ease-out forwards;
-}
-
-/* Hero card slide-in */
-@keyframes slideInRight {
-  from {
-    opacity: 0;
-    transform: translateX(30px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-.hero-metric-card {
-  animation: slideInRight 0.5s ease-out;
-  animation-delay: calc(var(--card-index) * 0.1s);
-  animation-fill-mode: backwards;
-}
-
-/* Glow effect for live indicators */
-@keyframes glow {
-  0%, 100% {
-    box-shadow: 0 0 5px rgba(82, 196, 26, 0.5);
-  }
-  50% {
-    box-shadow: 0 0 20px rgba(82, 196, 26, 0.8);
-  }
-}
-
-.live-indicator {
-  animation: glow 2s ease-in-out infinite;
-}
-
-/* Alert pulse */
-@keyframes alertPulse {
-  0% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(1.02);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
-
-.ant-alert-warning {
-  animation: alertPulse 2s ease-in-out infinite;
-}
-
-/* Topology node pulse */
-@keyframes nodePulse {
-  0%, 100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.6;
-  }
-}
-
-.react-flow__node {
-  animation: fadeIn 0.5s ease-out;
-}
-
-.react-flow__edge {
-  animation: fadeIn 0.7s ease-out 0.3s backwards;
-}
-
-/* Heatmap cell animation */
-@keyframes heatmapReveal {
-  from {
-    opacity: 0;
-    transform: scale(0);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-.heatmap-cell {
-  animation: heatmapReveal 0.3s ease-out;
-  animation-delay: calc(var(--cell-index) * 0.01s);
-  animation-fill-mode: backwards;
-}
-
-/* Modal entrance */
-.ant-modal {
-  animation: fadeInUp 0.3s ease-out !important;
-}
-
-/* Tooltip smooth appearance */
-.ant-tooltip {
-  animation: fadeIn 0.2s ease-out !important;
-}
-
-/* Loading spinner */
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.loading-spinner {
-  animation: spin 1s linear infinite;
-}
-
-/* Success checkmark animation */
-@keyframes checkmark {
-  0% {
-    stroke-dashoffset: 100;
-  }
-  100% {
-    stroke-dashoffset: 0;
-  }
-}
-
-.success-checkmark {
-  stroke-dasharray: 100;
-  animation: checkmark 0.5s ease-out forwards;
-}
-
-/* Responsive animations - disable on mobile for performance */
-@media (max-width: 768px) {
-  .dashboard-widget,
-  .hero-metric-card,
-  .ant-table-tbody > tr {
-    animation: none !important;
-    opacity: 1 !important;
-  }
-}
-
-/* Reduce motion for users who prefer it */
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-  }
-}

package/src/modules/dashboard/pages/dashboard-page.tsx

@@ -1,13 +0,0 @@
-import { HeroMetricsWidget } from '../components/HeroMetricsWidget';
-import { ActivityTimelineWidget } from '../components/ActivityTimelineWidget';
-import { SystemResourcesWidget } from '../components/SystemResourcesWidget';
-
-export function DashboardPage() {
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 24, paddingTop: 8 }}>
-      <HeroMetricsWidget />
-      <SystemResourcesWidget />
-      <ActivityTimelineWidget />
-    </div>
-  );
-}

package/src/modules/dashboard/routes/index.tsx

@@ -1,70 +0,0 @@
-/**
- * @module @kb-labs/studio-app/modules/dashboard/routes
- * Dashboard module routing configuration
- */
-
-import type { RouteObject } from 'react-router-dom';
-import { DashboardPage } from '../pages/dashboard-page';
-import { AIInsightsPage } from '../pages/ai-insights-page';
-import { DashboardLayout } from '../layouts/dashboard-layout';
-import { ErrorBoundary } from '../../../components/error-boundary';
-import { renderIcon } from '../../../routes/helpers';
-import type { NavigationItem } from '@/components/ui';
-
-// Route paths
-const PATHS = {
-  ROOT: '/',
-  INSIGHTS: '/insights',
-} as const;
-
-// Route keys
-const KEYS = {
-  MODULE: 'dashboard',
-  OVERVIEW: 'dashboard-overview',
-  INSIGHTS: 'dashboard-insights',
-} as const;
-
-/**
- * Dashboard routes
- */
-export const dashboardRoutes: RouteObject[] = [
-  {
-    path: PATHS.ROOT,
-    element: <DashboardLayout />,
-    errorElement: <ErrorBoundary />,
-    children: [
-      {
-        index: true,
-        element: <DashboardPage />,
-      },
-    ],
-  },
-  {
-    path: PATHS.INSIGHTS,
-    element: <AIInsightsPage />,
-    errorElement: <ErrorBoundary />,
-  },
-];
-
-/**
- * Dashboard navigation items for sidebar
- */
-export const dashboardNavigation: NavigationItem = {
-  key: KEYS.MODULE,
-  label: 'Dashboard',
-  icon: renderIcon('DashboardOutlined'),
-  children: [
-    {
-      key: KEYS.OVERVIEW,
-      label: 'Overview',
-      path: PATHS.ROOT,
-      icon: renderIcon('DashboardOutlined'),
-    },
-    {
-      key: KEYS.INSIGHTS,
-      label: 'AI Insights',
-      path: PATHS.INSIGHTS,
-      icon: renderIcon('RobotOutlined'),
-    },
-  ],
-};

package/src/modules/observability/pages/devkit-page.tsx

@@ -1,263 +0,0 @@
-import {
-  UIRow,
-  UICol,
-  UITable,
-  UICard,
-  UIStatistic,
-  UITag,
-  UIAlert,
-  UIProgress,
-  UIIcon,
-} from '@kb-labs/studio-ui-kit';
-import { useDevKitHealth } from '@kb-labs/studio-data-client';
-import { useDataSources } from '../../../providers/data-sources-provider';
-import { UIPage, UIPageHeader } from '@kb-labs/studio-ui-kit';
-
-/**
- * Get color for health grade
- */
-function getGradeColor(grade: string): string {
-  switch (grade) {
-    case 'A':
-      return 'success';
-    case 'B':
-      return 'processing';
-    case 'C':
-      return 'warning';
-    case 'D':
-    case 'F':
-      return 'error';
-    default:
-      return 'default';
-  }
-}
-
-/**
- * Get icon for health grade
- */
-function getGradeIcon(grade: string) {
-  switch (grade) {
-    case 'A':
-      return <UIIcon name="CheckCircleOutlined" style={{ color: '#52c41a' }} />;
-    case 'B':
-      return <UIIcon name="CheckCircleOutlined" style={{ color: '#1890ff' }} />;
-    case 'C':
-      return <UIIcon name="WarningOutlined" style={{ color: '#faad14' }} />;
-    case 'D':
-      return <UIIcon name="ExclamationCircleOutlined" style={{ color: '#ff7a45' }} />;
-    case 'F':
-      return <UIIcon name="CloseCircleOutlined" style={{ color: '#ff4d4f' }} />;
-    default:
-      return <UIIcon name="ExclamationCircleOutlined" />;
-  }
-}
-
-/**
- * Get status for health score progress bar
- */
-function getScoreStatus(score: number): 'success' | 'normal' | 'exception' {
-  if (score >= 80) {return 'success';}
-  if (score >= 60) {return 'normal';}
-  return 'exception';
-}
-
-/**
- * Format issue key to human-readable label
- */
-function formatIssueLabel(key: string): string {
-  return key
-    .replace(/([A-Z])/g, ' $1')
-    .replace(/^./, str => str.toUpperCase())
-    .trim();
-}
-
-/**
- * DevKit Health Observability Page
- *
- * Shows monorepo health metrics from DevKit:
- * - Health score and grade
- * - Issues breakdown (duplicate deps, type errors, etc.)
- * - Package count and type coverage
- */
-export function DevKitPage() {
-  const sources = useDataSources();
-  const { data, isLoading, error, isError } = useDevKitHealth(sources.observability);
-
-  if (isError) {
-    return (
-      <UIPage>
-        <UIPageHeader
-          title="DevKit Health"
-          description="Monorepo health and quality metrics"
-        />
-        <UIAlert
-          message="Failed to load DevKit health"
-          description={error instanceof Error ? error.message : 'Unknown error. Make sure DevKit is installed and executable.'}
-          variant="error"
-          showIcon
-          style={{ marginBottom: 24 }}
-        />
-      </UIPage>
-    );
-  }
-
-  if (isLoading || !data) {
-    return (
-      <UIPage>
-        <UIPageHeader
-          title="DevKit Health"
-          description="Monorepo health and quality metrics"
-        />
-        <div style={{ padding: '24px 0', textAlign: 'center' }}>
-          Loading DevKit health check... (this may take up to 30 seconds)
-        </div>
-      </UIPage>
-    );
-  }
-
-  const totalIssues = Object.values(data.issues).reduce((sum: number, count) => sum + (count ?? 0), 0);
-
-  return (
-    <UIPage width="full">
-      <UIPageHeader
-        title="DevKit Health"
-        description="Monorepo health and quality metrics - Cached for 1 minute"
-      />
-
-      {/* Overview Stats */}
-      <UIRow gutter={[16, 16]} style={{ marginBottom: 24 }}>
-        <UICol xs={24} sm={12} lg={8}>
-          <UICard>
-            <UIStatistic
-              title="Health Score"
-              value={data.healthScore}
-              suffix="/ 100"
-              prefix={getGradeIcon(data.grade)}
-              valueStyle={{
-                color: data.healthScore >= 80 ? '#52c41a' :
-                       data.healthScore >= 60 ? '#1890ff' :
-                       '#ff4d4f'
-              }}
-            />
-            <div style={{ marginTop: 8 }}>
-              <UITag color={getGradeColor(data.grade)} style={{ fontSize: 14 }}>
-                Grade {data.grade}
-              </UITag>
-            </div>
-          </UICard>
-        </UICol>
-        <UICol xs={24} sm={12} lg={8}>
-          <UICard>
-            <UIStatistic
-              title="Total Packages"
-              value={data.packages}
-              prefix={<UIIcon name="CodeOutlined" />}
-            />
-          </UICard>
-        </UICol>
-        <UICol xs={24} sm={12} lg={8}>
-          <UICard>
-            <UIStatistic
-              title="Total Issues"
-              value={totalIssues}
-              prefix={<UIIcon name="WarningOutlined" />}
-              valueStyle={{ color: totalIssues > 100 ? '#ff4d4f' : '#faad14' }}
-            />
-          </UICard>
-        </UICol>
-      </UIRow>
-
-      {/* Health Score Progress */}
-      <UICard title="Health Score Breakdown" style={{ marginBottom: 24 }}>
-        <UIProgress
-          percent={data.healthScore}
-          status={getScoreStatus(data.healthScore)}
-          strokeColor={
-            data.healthScore >= 80 ? '#52c41a' :
-            data.healthScore >= 60 ? '#1890ff' :
-            '#ff4d4f'
-          }
-        />
-        <div style={{ marginTop: 16, fontSize: 12, color: '#8c8c8c' }}>
-          {data.healthScore >= 90 ? 'Excellent monorepo health!' :
-           data.healthScore >= 80 ? 'Good health - minor improvements needed' :
-           data.healthScore >= 70 ? 'Moderate health - some issues to address' :
-           data.healthScore >= 60 ? 'Fair health - significant issues present' :
-           'Poor health - urgent attention required'}
-        </div>
-      </UICard>
-
-      {/* Type Coverage (if available) */}
-      {data.avgTypeCoverage !== undefined && (
-        <UIRow gutter={[16, 16]} style={{ marginBottom: 24 }}>
-          <UICol span={24}>
-            <UICard title="TypeScript Type Coverage">
-              <UIProgress
-                percent={Math.round(data.avgTypeCoverage)}
-                status={data.avgTypeCoverage >= 90 ? 'success' : data.avgTypeCoverage >= 70 ? 'normal' : 'exception'}
-                strokeColor={data.avgTypeCoverage >= 90 ? '#52c41a' : data.avgTypeCoverage >= 70 ? '#1890ff' : '#faad14'}
-              />
-              <div style={{ marginTop: 8, fontSize: 12, color: '#8c8c8c' }}>
-                Average type coverage across all packages
-              </div>
-            </UICard>
-          </UICol>
-        </UIRow>
-      )}
-
-      {/* Issues Breakdown Table */}
-      <UICard title="Issues Breakdown">
-        <UITable
-          dataSource={Object.entries(data.issues)
-            .map(([key, count]) => ({
-              key,
-              issue: formatIssueLabel(key),
-              count: count ?? 0,
-              severity: (count ?? 0) > 100 ? 'high' : (count ?? 0) > 10 ? 'medium' : 'low',
-            }))
-            .sort((a, b) => b.count - a.count)} // Sort by count descending
-          columns={[
-            {
-              title: 'Issue Type',
-              dataIndex: 'issue',
-              key: 'issue',
-              render: (issue: string) => <strong>{issue}</strong>,
-            },
-            {
-              title: 'Count',
-              dataIndex: 'count',
-              key: 'count',
-              align: 'right' as const,
-              render: (count: number) => (
-                <span style={{
-                  color: count > 100 ? '#ff4d4f' :
-                         count > 10 ? '#faad14' :
-                         '#52c41a'
-                }}>
-                  {count.toLocaleString()}
-                </span>
-              ),
-            },
-            {
-              title: 'Severity',
-              dataIndex: 'severity',
-              key: 'severity',
-              align: 'center' as const,
-              render: (severity: string) => {
-                const config = {
-                  high: { color: 'error', label: 'High' },
-                  medium: { color: 'warning', label: 'Medium' },
-                  low: { color: 'success', label: 'Low' },
-                }[severity] || { color: 'default', label: 'Unknown' };
-
-                return <UITag color={config.color}>{config.label}</UITag>;
-              },
-            },
-          ]}
-          pagination={false}
-          size="small"
-        />
-      </UICard>
-    </UIPage>
-  );
-}