@kb-labs/studio-app 0.6.0

package/UI-KIT-PLAN.md

@@ -0,0 +1,326 @@
+# KB Labs Studio UI Kit - Component Plan
+
+## 🎯 Goal
+Create a unified UI Kit using design tokens from `@kb-labs/studio-ui-core` and Ant Design theme tokens.
+
+**Critical Requirements:**
+- ✅ NO hardcoded colors (no `#DC2626`, `rgb()`, etc.)
+- ✅ Use ONLY Ant Design tokens via `theme.useToken()`
+- ✅ Use design tokens from `@kb-labs/studio-ui-core` for spacing/typography
+- ✅ NO inline styles in widget components
+
+## 📊 Current Analysis
+
+### Inline Styles Usage
+- **Total inline styles found**: 98 instances
+- **Most common patterns**:
+  - Font sizes: `fontSize: '0.85em'`, `fontSize: '1.5rem'`
+  - Colors: `color: 'var(--text-secondary)'`, `color: 'var(--error-color)'`
+  - Spacing: `marginBottom: 16`, `padding: '12px 16px'`
+  - Font weights: `fontWeight: 700`
+
+### Most Used Ant Design Components
+Based on current widget implementation:
+
+1. **Typography** - Text, Title, Paragraph (used in ~10 places)
+2. **Space** - Spacing layout (used in ~10 places)
+3. **Button** - Actions (used in ~7 places)
+4. **Card** - Container (used in ~6 places)
+5. **Tag** - Labels/badges (used in ~5 places)
+6. **Badge** - Status indicators (used in ~4 places)
+7. **Form** - Form elements (used in ~4 places)
+8. **Typography.Text** - Inline text (used in ~4 places)
+
+## 🏗️ UI Kit Component Hierarchy
+
+### Tier 1: Primitives (Foundation)
+**Status: ✅ Complete**
+
+These are the building blocks - lowest level components.
+
+- ✅ **Text** - Typography primitive with semantic colors
+  - Sizes: xs, sm, base, lg, xl, 2xl
+  - Weights: normal, medium, semibold, bold
+  - Colors: primary, secondary, success, warning, error, info
+  - Uses: `typography.fontSize`, `typography.fontWeight`, `token.colorText`
+
+- ✅ **Box** - Layout primitive with spacing
+  - Props: p, pt, pr, pb, pl, m, mt, mr, mb, ml
+  - Uses: `spacing` tokens from `@kb-labs/studio-ui-core`
+
+- ✅ **Flex** - Flexbox layout primitive
+  - Props: direction, justify, align, gap, wrap
+  - Uses: `spacing` tokens for gap
+
+### Tier 2: Basic Components
+**Status: 🔄 In Progress**
+
+Built on primitives, add semantic meaning.
+
+- ✅ **MetricCard** - Metric display with trend
+  - Uses: Text, Flex, Box, Ant Card
+  - Status: Complete, used in Metric and MetricGroup widgets
+
+- 🔄 **Badge** - Status indicator
+  - Variants: success, warning, error, info, default
+  - Uses: Ant Badge with token colors
+  - Status: Created, needs export and usage
+
+- ⏳ **Tag** - Label/category indicator (NEXT)
+  - Variants: success, warning, error, info, default, neutral
+  - Uses: Ant Tag with token colors
+  - Usage: Card widget (4 instances), Timeline (2 instances)
+
+- ⏳ **Button** - Action button (NEXT)
+  - Variants: primary, default, text, link, danger
+  - Sizes: small, default, large
+  - Uses: Ant Button with consistent styling
+  - Usage: Alert, Confirm, ErrorState, Form (~7 instances)
+
+- ⏳ **Stack** - Vertical/horizontal spacing layout
+  - Props: direction, spacing, align
+  - Uses: Box/Flex with consistent gap tokens
+  - Usage: Multiple widgets for consistent spacing
+
+### Tier 3: Complex Components
+**Status: ⏳ Not Started**
+
+Domain-specific components built from Tier 1 + 2.
+
+- ⏳ **CardContent** - Enhanced card with header/footer/sections
+  - Uses: Box, Text, Tag, Badge, Ant Card
+  - Usage: Card widget (6 inline styles)
+
+- ⏳ **TimelineItem** - Timeline entry with status
+  - Uses: Badge, Text, Stack
+  - Usage: Timeline widget (6 inline styles)
+
+- ⏳ **LogEntry** - Log line with level badge
+  - Uses: Badge, Text, Flex
+  - Usage: Logs widget (7 inline styles)
+
+- ⏳ **JsonView** - JSON display with syntax highlighting
+  - Uses: Box, Text
+  - Usage: Json widget (8 inline styles)
+
+## 📋 Implementation Plan
+
+### Phase 1: Complete Basic Components (Current Phase)
+**Goal**: Build foundation layer of reusable components
+
+#### Step 1.1: Export Badge ✅
+- [x] Badge.tsx created
+- [ ] Add to ui/index.ts
+- [ ] Test in isolation
+
+#### Step 1.2: Create Tag Component
+```typescript
+// apps/studio/src/ui/Tag.tsx
+export type TagVariant = 'success' | 'warning' | 'error' | 'info' | 'default' | 'neutral';
+
+export function Tag({ variant, children, closable, onClose }: TagProps) {
+  const { token } = useToken();
+
+  const colorMap: Record<TagVariant, string> = {
+    success: token.colorSuccess,
+    warning: token.colorWarning,
+    error: token.colorError,
+    info: token.colorInfo,
+    default: token.colorPrimary,
+    neutral: token.colorTextSecondary,
+  };
+
+  return <AntTag color={colorMap[variant]} closable={closable} onClose={onClose}>{children}</AntTag>;
+}
+```
+
+#### Step 1.3: Create Button Component
+```typescript
+// apps/studio/src/ui/Button.tsx
+export type ButtonVariant = 'primary' | 'default' | 'text' | 'link' | 'danger';
+export type ButtonSize = 'small' | 'default' | 'large';
+
+export function Button({ variant, size, children, icon, loading, disabled, onClick }: ButtonProps) {
+  return (
+    <AntButton
+      type={variantMap[variant]}
+      size={size}
+      icon={icon}
+      loading={loading}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {children}
+    </AntButton>
+  );
+}
+```
+
+#### Step 1.4: Create Stack Component
+```typescript
+// apps/studio/src/ui/Stack.tsx
+export type StackDirection = 'vertical' | 'horizontal';
+export type StackSpacing = SpacingValue;
+
+export function Stack({ direction = 'vertical', spacing = 2, align, children }: StackProps) {
+  return (
+    <Flex
+      direction={direction === 'vertical' ? 'column' : 'row'}
+      gap={spacing}
+      align={align}
+    >
+      {children}
+    </Flex>
+  );
+}
+```
+
+### Phase 2: Migrate High-Priority Widgets
+**Goal**: Eliminate most inline styles by migrating top offenders
+
+Priority order by inline style count:
+
+1. **Json** (8 styles) - needs JsonView component
+2. **Logs** (7 styles) - needs LogEntry component
+3. **Timeline** (6 styles) - needs TimelineItem component
+4. **Card** (6 styles) - needs CardContent component or direct Tag/Badge usage
+5. **MetricGroup** ✅ (5 styles) - DONE
+6. **Metric** ✅ (5 styles) - DONE
+
+### Phase 3: Create Complex Components
+**Goal**: Domain-specific components for remaining widgets
+
+#### CardContent Component
+```typescript
+// apps/studio/src/ui/CardContent.tsx
+export interface CardContentProps {
+  title?: string;
+  subtitle?: string;
+  tags?: { label: string; variant: TagVariant }[];
+  badges?: { label: string; variant: BadgeVariant }[];
+  extra?: React.ReactNode;
+  footer?: React.ReactNode;
+  children: React.ReactNode;
+}
+
+export function CardContent({ title, subtitle, tags, badges, extra, footer, children }: CardContentProps) {
+  // Uses: Box, Text, Tag, Badge, Stack
+}
+```
+
+#### TimelineItem Component
+```typescript
+// apps/studio/src/ui/TimelineItem.tsx
+export interface TimelineItemProps {
+  timestamp: string;
+  title: string;
+  description?: string;
+  status?: 'success' | 'warning' | 'error' | 'info';
+  icon?: React.ReactNode;
+}
+
+export function TimelineItem({ timestamp, title, description, status, icon }: TimelineItemProps) {
+  // Uses: Badge, Text, Stack, Flex
+}
+```
+
+### Phase 4: Complete Migration
+**Goal**: Eliminate ALL inline styles from widget components
+
+Remaining widgets (~20 widgets) with <5 inline styles each.
+
+## 🎨 Design Token Usage
+
+### Colors (from Ant Design theme.useToken())
+```typescript
+const { token } = useToken();
+
+// Semantic colors
+token.colorPrimary      // Primary brand color
+token.colorSuccess      // Success/positive
+token.colorWarning      // Warning/caution
+token.colorError        // Error/danger
+token.colorInfo         // Info/neutral
+
+// Text colors
+token.colorText         // Primary text
+token.colorTextSecondary // Secondary text
+token.colorTextDisabled  // Disabled text
+
+// Background colors
+token.colorBgContainer   // Container background
+token.colorBgElevated    // Elevated background
+token.colorBorder        // Border color
+```
+
+### Spacing (from @kb-labs/studio-ui-core)
+```typescript
+import { spacing } from '@kb-labs/studio-ui-core';
+
+spacing[0]  // 0
+spacing[1]  // 0.25rem
+spacing[2]  // 0.5rem
+spacing[3]  // 0.75rem
+spacing[4]  // 1rem
+spacing[6]  // 1.5rem
+spacing[8]  // 2rem
+```
+
+### Typography (from @kb-labs/studio-ui-core)
+```typescript
+import { typography } from '@kb-labs/studio-ui-core';
+
+typography.fontSize.xs    // ['0.75rem', { lineHeight: '1rem' }]
+typography.fontSize.sm    // ['0.875rem', { lineHeight: '1.25rem' }]
+typography.fontSize.base  // ['1rem', { lineHeight: '1.5rem' }]
+typography.fontSize.lg    // ['1.125rem', { lineHeight: '1.75rem' }]
+typography.fontSize.xl    // ['1.25rem', { lineHeight: '1.75rem' }]
+typography.fontSize['2xl'] // ['1.5rem', { lineHeight: '2rem' }]
+
+typography.fontWeight.normal   // 400
+typography.fontWeight.medium   // 500
+typography.fontWeight.semibold // 600
+typography.fontWeight.bold     // 700
+```
+
+## ✅ Success Criteria
+
+### Component Quality
+- [ ] All components use ONLY design tokens (no hardcoded values)
+- [ ] All components have proper TypeScript types
+- [ ] All components are documented with examples
+- [ ] All components are exported from ui/index.ts
+
+### Widget Migration
+- [ ] Zero inline styles in widget components
+- [ ] All colors use Ant Design tokens
+- [ ] All spacing uses spacing tokens
+- [ ] All typography uses typography tokens
+
+### Code Quality
+- [ ] Build passes without errors
+- [ ] Type check passes
+- [ ] Lint passes
+- [ ] No CSS variables (var(--*)) - use tokens instead
+
+## 📝 Notes
+
+### DO ✅
+- Use `theme.useToken()` for ALL colors
+- Use `spacing` tokens for ALL margins/paddings/gaps
+- Use `typography` tokens for ALL font sizes/weights
+- Build components incrementally (primitives → basic → complex)
+- Test each component in isolation before using in widgets
+
+### DON'T ❌
+- Hardcode colors like `#DC2626` or `rgb(220, 38, 38)`
+- Use CSS variables like `var(--success)` or `var(--text-secondary)`
+- Use magic numbers for spacing (`marginBottom: 16`)
+- Use string literals for font sizes (`fontSize: '1.5rem'`)
+- Skip token usage in favor of inline styles
+
+---
+
+**Created**: 2026-01-27
+**Status**: Phase 1 in progress
+**Next Step**: Export Badge, create Tag component

package/eslint-rules/no-direct-antd-import.js

@@ -0,0 +1,151 @@
+/**
+ * ESLint rule: no-direct-antd-import
+ *
+ * Prevents direct imports from 'antd' or 'antd/*' in the studio app.
+ * Provides specific component-level suggestions to use @kb-labs/studio-ui-kit equivalents.
+ */
+
+/** @type {Map<string, string>} */
+const COMPONENT_MAP = {
+  // Core
+  Card: 'UICard',
+  Button: 'UIButton',
+  Tag: 'UITag',
+  Badge: 'UIBadge',
+  Spin: 'UISpin',
+  Divider: 'UIDivider',
+  // Layout
+  Row: 'UIRow',
+  Col: 'UICol',
+  Space: 'UISpace',
+  Flex: 'UIFlex',
+  Grid: 'UIGrid',
+  // Data display
+  Table: 'UITable',
+  List: 'UIList',
+  Descriptions: 'UIDescriptions',
+  Statistic: 'UIStatistic',
+  Timeline: 'UITimeline',
+  Avatar: 'UIAvatar',
+  Tooltip: 'UITooltip',
+  Progress: 'UIProgress',
+  // Feedback
+  Alert: 'UIAlert',
+  Modal: 'UIModal',
+  Drawer: 'UIDrawer',
+  Popconfirm: 'UIPopconfirm',
+  Empty: 'UIEmptyState',
+  Skeleton: 'UISkeleton',
+  // Navigation
+  Tabs: 'UITabs',
+  Menu: 'UIMenu',
+  Segmented: 'UISegmented',
+  Breadcrumb: 'UIBreadcrumb',
+  // Form
+  Form: 'UIForm',
+  Input: 'UIInput',
+  InputNumber: 'UIInputNumber',
+  Select: 'UISelect',
+  Checkbox: 'UICheckbox',
+  Radio: 'UIRadio',
+  Switch: 'UISwitch',
+  DatePicker: 'UIDatePicker',
+  TimePicker: 'UITimePicker',
+  Slider: 'UISlider',
+  Upload: 'UIUpload',
+  // Layout structural
+  Collapse: 'UIAccordion',
+  // Typography
+  Typography: 'UIText / UITitle (use UITypographyText, UITypographyParagraph, UITitle)',
+};
+
+/** @type {Record<string, string>} */
+const HOOK_MAP = {
+  theme: 'useUITheme from @kb-labs/studio-ui-kit',
+  message: 'UIMessage or useUIMessage from @kb-labs/studio-ui-kit',
+};
+
+/** @param {string[]} names */
+function buildSuggestion(names) {
+  const mapped = [];
+  const unknown = [];
+
+  for (const name of names) {
+    if (COMPONENT_MAP[name]) {
+      mapped.push(`${name} → ${COMPONENT_MAP[name]}`);
+    } else if (HOOK_MAP[name]) {
+      mapped.push(`${name} → ${HOOK_MAP[name]}`);
+    } else {
+      unknown.push(name);
+    }
+  }
+
+  const parts = [];
+  if (mapped.length > 0) {
+    parts.push(`Use from @kb-labs/studio-ui-kit: ${mapped.join(', ')}.`);
+  }
+  if (unknown.length > 0) {
+    parts.push(
+      `No UI Kit equivalent found for: ${unknown.join(', ')}. ` +
+      `Add a wrapper in packages/studio-ui-kit/src/ and export it from the index.`,
+    );
+  }
+  return parts.join(' ');
+}
+
+/** @type {import('eslint').Rule.RuleModule} */
+const rule = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Disallow direct imports from antd — use @kb-labs/studio-ui-kit instead.',
+      url: 'https://github.com/kb-labs/kb-labs-studio/blob/main/ANTD-MIGRATION-GUIDE.md',
+    },
+    messages: {
+      noDirectAntd:
+        'Direct antd import is not allowed. {{ suggestion }}',
+      noAntdSubpath:
+        'Direct antd subpath import is not allowed. Use @kb-labs/studio-ui-kit instead.',
+      noAntdIcons:
+        'Import @ant-design/icons directly is not allowed. ' +
+        'Use <UIIcon name="IconName" /> from @kb-labs/studio-ui-kit or ' +
+        'renderIcon() from @kb-labs/studio-ui-react.',
+    },
+    schema: [],
+  },
+
+  create(context) {
+    return {
+      ImportDeclaration(node) {
+        const source = node.source.value;
+
+        // antd/es/... or antd/lib/... subpath imports — allow type-only imports
+        if (typeof source === 'string' && source.startsWith('antd/')) {
+          if (node.importKind === 'type') return;
+          context.report({ node, messageId: 'noAntdSubpath' });
+          return;
+        }
+
+        // direct 'antd' import
+        if (source !== 'antd') return;
+
+        // Collect imported names (skip type-only imports of unknown types)
+        const names = node.specifiers
+          .filter((s) => s.type === 'ImportSpecifier')
+          .map((s) => s.imported.name);
+
+        const suggestion = names.length > 0
+          ? buildSuggestion(names)
+          : 'Use @kb-labs/studio-ui-kit instead.';
+
+        context.report({
+          node,
+          messageId: 'noDirectAntd',
+          data: { suggestion },
+        });
+      },
+    };
+  },
+};
+
+module.exports = rule;

package/eslint.config.ts

@@ -0,0 +1,27 @@
+import reactPreset from '@kb-labs/devkit/eslint/react.js';
+import noDirectAntdImport from './eslint-rules/no-direct-antd-import.js';
+
+export default [
+  ...reactPreset,
+  {
+    ignores: ['dist/**', 'coverage/**', 'eslint-rules/**', '.__mf__temp/**', '*.mjs']
+  },
+  {
+    files: ['src/**/*.{ts,tsx}'],
+    plugins: {
+      'studio-rules': {
+        rules: { 'no-direct-antd-import': noDirectAntdImport },
+      },
+    },
+    rules: {
+      'studio-rules/no-direct-antd-import': 'error',
+    },
+  },
+  {
+    // Low-level UI wrappers are allowed to import directly from antd / @ant-design
+    files: ['src/components/ui/**/*.{ts,tsx}', 'src/ui/**/*.{ts,tsx}'],
+    rules: {
+      'studio-rules/no-direct-antd-import': 'off',
+    },
+  },
+];

package/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <base href="/" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>KB Labs Studio</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700&family=Plus+Jakarta+Sans:wght@600;700&display=swap" rel="stylesheet" />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@kb-labs/studio-app",
+  "version": "0.6.0",
+  "description": "KB Labs Studio application",
+  "type": "module",
+  "scripts": {
+    "dev": "rspack serve",
+    "build": "rspack build",
+    "preview": "rspack serve --mode production",
+    "clean": "rimraf dist",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint . --max-warnings=0",
+    "test": "vitest run --passWithNoTests",
+    "test:watch": "vitest --passWithNoTests"
+  },
+  "dependencies": {
+    "@ant-design/icons": "^5.4.0",
+    "@ant-design/plots": "^2.6.6",
+    "@kb-labs/agent-contracts": "^0.1.0",
+    "@kb-labs/qa-contracts": "^0.1.0",
+    "@kb-labs/quality-contracts": "^0.1.0",
+    "@kb-labs/release-manager-contracts": "^0.1.0",
+    "@kb-labs/rest-api-contracts": "^1.3.0",
+    "@kb-labs/studio-data-client": "^0.6.0",
+    "@kb-labs/studio-devtools": "^0.6.0",
+    "@kb-labs/studio-federation": "^0.6.0",
+    "@kb-labs/studio-hooks": "^0.6.0",
+    "@kb-labs/studio-event-bus": "^0.6.0",
+    "@kb-labs/studio-ui-core": "^0.6.0",
+    "@kb-labs/studio-plugin-tools": "^0.6.0",
+    "@kb-labs/studio-ui-kit": "^0.6.0",
+    "@kb-labs/workflow-contracts": "^1.4.0",
+    "@ant-design/charts": "^2.6.6",
+    "clsx": "^2.1.1",
+    "@tanstack/react-query": "^5.62.23",
+    "@tanstack/react-query-devtools": "^5.62.23",
+    "@types/react-grid-layout": "^1.3.6",
+    "antd": "^5.21.0",
+    "dayjs": "^1.11.19",
+    "dompurify": "^3.3.1",
+    "lucide-react": "^0.468.0",
+    "marked": "^17.0.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-grid-layout": "^2.1.0",
+    "react-resizable": "^3.0.5",
+    "react-router-dom": "^7.1.4",
+    "reactflow": "^11.11.4",
+    "zod": "^3.23.8",
+    "zustand": "^5.0.2"
+  },
+  "devDependencies": {
+    "@kb-labs/devkit": "link:../../../../infra/kb-labs-devkit",
+    "@types/dompurify": "^3.2.0",
+    "@types/node": "^22.10.0",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@rspack/cli": "^1.7.0",
+    "@rspack/core": "^1.7.0",
+    "@rspack/plugin-react-refresh": "^1.6.0",
+    "@module-federation/enhanced": "^0.8.0",
+    "autoprefixer": "^10.4.21",
+    "eslint": "^9",
+    "jiti": "^2.6.1",
+    "postcss": "^8.4.49",
+    "rimraf": "^6",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5",
+    "postcss-loader": "^8.1.0",
+    "vitest": "^3.2.4"
+  }
+}

package/postcss.config.js

@@ -0,0 +1,7 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+

package/public/favicon.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Lab flask favicon icon">
+  <rect x="4" y="4" width="56" height="56" rx="14" fill="#0B1320" />
+  <path d="M27 10h10v7l-1.6 2.3v8.4c0 2.2.9 4.4 2.4 6.1l6.4 9c2.8 3.9.1 9.2-4.7 9.2H24.5c-4.8 0-7.5-5.3-4.7-9.2l6.4-9c1.5-1.7 2.4-3.9 2.4-6.1v-8.4L27 17z" fill="#EAF3FF" />
+  <path d="M21.8 43.2c2.2-2.8 18.2-2.8 20.4 0l2 2.8c1.8 2.6-.1 6-3.2 6H23c-3.1 0-5-3.4-3.2-6z" fill="#3B82F6" />
+  <ellipse cx="28" cy="35.2" rx="3.3" ry="5.4" fill="#FFFFFF" opacity="0.48" />
+  <circle cx="35.5" cy="46.2" r="1.6" fill="#BFDBFE" />
+</svg>