@kb-labs/studio-app 0.6.0

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

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

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

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

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