@kb-labs/studio-app 0.7.0 → 2.8.0

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

@@ -1,48 +0,0 @@
-/**
- * @module @kb-labs/studio-app/modules/plugins/routes
- * Plugins module routing configuration
- */
-
-import type { RouteObject } from 'react-router-dom';
-import { PluginsPage } from '../pages/marketplace-page';
-import { PluginDetailPage } from '../pages/plugin-detail-page';
-import { ErrorBoundary } from '../../../components/error-boundary';
-import { renderIcon } from '../../../routes/helpers';
-import type { NavigationItem } from '@/components/ui';
-
-// Route paths
-const PATHS = {
-  ROOT: '/marketplace',
-  DETAIL: '/marketplace/:pluginId',
-} as const;
-
-// Route keys
-const KEYS = {
-  MODULE: 'plugins',
-} as const;
-
-/**
- * Plugins routes
- */
-export const pluginsRoutes: RouteObject[] = [
-  {
-    path: PATHS.ROOT,
-    element: <PluginsPage />,
-    errorElement: <ErrorBoundary />,
-  },
-  {
-    path: PATHS.DETAIL,
-    element: <PluginDetailPage />,
-    errorElement: <ErrorBoundary />,
-  },
-];
-
-/**
- * Plugins navigation item for sidebar
- */
-export const pluginsNavigation: NavigationItem = {
-  key: KEYS.MODULE,
-  label: 'Marketplace',
-  icon: renderIcon('AppstoreOutlined'),
-  path: PATHS.ROOT,
-};

package/src/modules/plugins/utils/index.ts

@@ -1 +0,0 @@
-export { renderSchema } from './schema-helpers';

package/src/modules/plugins/utils/schema-helpers.ts

@@ -1,21 +0,0 @@
-/**
- * Helper to safely render schema objects
- */
-export function renderSchema(schema: any): string {
-  if (!schema) {
-    return '—';
-  }
-  if (typeof schema === 'string') {
-    return schema;
-  }
-  if (typeof schema === 'object') {
-    if ('$ref' in schema) {
-      return schema.$ref;
-    }
-    if ('zod' in schema) {
-      return schema.zod;
-    }
-    return JSON.stringify(schema);
-  }
-  return String(schema);
-}

package/src/modules/settings/components/api-routes-viewer.tsx

@@ -1,415 +0,0 @@
-import * as React from 'react';
-import { useState, useEffect, useMemo, useCallback } from 'react';
-import {
-  UIInput,
-  UITag,
-  UISpace,
-  UIButton,
-  UITypographyText,
-  UITitle,
-  UITypographyParagraph,
-  UIAlert,
-  UISpin,
-  UIEmptyState,
-  UITooltip,
-  UISelect,
-  UITree,
-  UISegmented,
-  UIIcon,
-} from '@kb-labs/studio-ui-kit';
-import type { DataNode } from 'antd/es/tree';
-import { useDataSources } from '../../../providers/data-sources-provider';
-import type { RoutesResponse, RouteInfo } from '@kb-labs/studio-data-client';
-
-const METHOD_COLORS: Record<string, string> = {
-  GET: 'green',
-  POST: 'blue',
-  PUT: 'orange',
-  PATCH: 'purple',
-  DELETE: 'red',
-  HEAD: 'cyan',
-  OPTIONS: 'default',
-};
-
-type ViewMode = 'tree' | 'list';
-
-interface RouteTreeNode {
-  segment: string;
-  fullPath: string;
-  routes: RouteInfo[];
-  children: Map<string, RouteTreeNode>;
-}
-
-function buildRouteTree(routes: RouteInfo[]): RouteTreeNode {
-  const root: RouteTreeNode = {
-    segment: '',
-    fullPath: '',
-    routes: [],
-    children: new Map(),
-  };
-
-  for (const route of routes) {
-    // Split URL into segments, e.g., /api/v1/plugins/:id -> ['api', 'v1', 'plugins', ':id']
-    const segments = route.url.split('/').filter(Boolean);
-    let current = root;
-    let pathSoFar = '';
-
-    for (const segment of segments) {
-      pathSoFar += '/' + segment;
-
-      if (!current.children.has(segment)) {
-        current.children.set(segment, {
-          segment,
-          fullPath: pathSoFar,
-          routes: [],
-          children: new Map(),
-        });
-      }
-      current = current.children.get(segment)!;
-    }
-
-    // Add route to the leaf node
-    current.routes.push(route);
-  }
-
-  return root;
-}
-
-function treeNodeToAntdNode(
-  node: RouteTreeNode,
-  baseUrl: string,
-  copiedUrl: string | null,
-  onCopy: (url: string) => void
-): DataNode[] {
-  const results: DataNode[] = [];
-
-  // Sort children alphabetically
-  const sortedChildren = Array.from(node.children.entries()).sort((a, b) =>
-    a[0].localeCompare(b[0])
-  );
-
-  for (const [segment, child] of sortedChildren) {
-    const hasChildren = child.children.size > 0;
-    const hasRoutes = child.routes.length > 0;
-
-    // Determine if this is a parameter segment
-    const isParam = segment.startsWith(':') || segment.startsWith('*');
-
-    const childNodes = treeNodeToAntdNode(child, baseUrl, copiedUrl, onCopy);
-
-    // Create route entries for this node
-    const routeNodes: DataNode[] = child.routes.map((route) => {
-      const fullUrl = `${baseUrl}${route.url}`;
-
-      return {
-        key: `${route.method}-${route.url}`,
-        title: (
-          <UISpace size="small">
-            {route.method.split(',').map((m) => (
-              <UITag key={m} color={METHOD_COLORS[m.trim()] || 'default'} style={{ margin: 0 }}>
-                {m.trim()}
-              </UITag>
-            ))}
-            <UITypographyText code style={{ fontSize: 12 }}>
-              {route.url}
-            </UITypographyText>
-            <UITooltip title={copiedUrl === fullUrl ? 'Copied!' : 'Copy full URL'}>
-              <UIButton
-                variant="text"
-                size="small"
-                icon={
-                  copiedUrl === fullUrl ? (
-                    <UIIcon name="CheckOutlined" style={{ color: '#52c41a' }} />
-                  ) : (
-                    <UIIcon name="CopyOutlined" />
-                  )
-                }
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onCopy(fullUrl);
-                }}
-              />
-            </UITooltip>
-          </UISpace>
-        ),
-        isLeaf: true,
-        icon: <UIIcon name="FileOutlined" />,
-      };
-    });
-
-    if (hasChildren || hasRoutes) {
-      results.push({
-        key: child.fullPath,
-        title: (
-          <UISpace size="small">
-            <UITypographyText strong={hasChildren} type={isParam ? 'warning' : undefined}>
-              {segment}
-            </UITypographyText>
-            {hasRoutes && !hasChildren && (
-              <UITypographyText type="secondary" style={{ fontSize: 11 }}>
-                ({child.routes.length})
-              </UITypographyText>
-            )}
-          </UISpace>
-        ),
-        icon: hasChildren ? <UIIcon name="FolderOutlined" /> : undefined,
-        children: [...routeNodes, ...childNodes],
-        isLeaf: !hasChildren && routeNodes.length === 0,
-      });
-    }
-  }
-
-  return results;
-}
-
-export function ApiRoutesViewer() {
-  const { system } = useDataSources();
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [data, setData] = useState<RoutesResponse | null>(null);
-  const [searchQuery, setSearchQuery] = useState('');
-  const [methodFilter, setMethodFilter] = useState<string | null>(null);
-  const [copiedUrl, setCopiedUrl] = useState<string | null>(null);
-  const [viewMode, setViewMode] = useState<ViewMode>('tree');
-  const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
-
-  const baseUrl = system.getBaseUrl();
-
-  const fetchRoutes = useCallback(async () => {
-    setLoading(true);
-    setError(null);
-    try {
-      const result = await system.getRoutes();
-      setData(result);
-
-      // Auto-expand first two levels
-      if (result.routes.length > 0) {
-        const tree = buildRouteTree(result.routes);
-        const keysToExpand: string[] = [];
-        for (const [, child] of tree.children) {
-          keysToExpand.push(child.fullPath);
-          for (const [, grandChild] of child.children) {
-            keysToExpand.push(grandChild.fullPath);
-          }
-        }
-        setExpandedKeys(keysToExpand);
-      }
-    } catch (err) {
-      setError(err instanceof Error ? err.message : String(err));
-    } finally {
-      setLoading(false);
-    }
-  }, [system]);
-
-  useEffect(() => {
-    fetchRoutes();
-  }, [fetchRoutes]);
-
-  const handleCopyUrl = (url: string) => {
-    navigator.clipboard.writeText(url);
-    setCopiedUrl(url);
-    setTimeout(() => setCopiedUrl(null), 2000);
-  };
-
-  // Get unique methods for filter
-  const availableMethods = useMemo(() => {
-    if (!data?.routes) {return [];}
-    const methods = new Set<string>();
-    data.routes.forEach((route) => {
-      route.method.split(',').forEach((m) => methods.add(m.trim()));
-    });
-    return Array.from(methods).sort();
-  }, [data]);
-
-  // Filter routes
-  const filteredRoutes = useMemo(() => {
-    if (!data?.routes) {return [];}
-    return data.routes.filter((route) => {
-      // Search filter
-      const matchesSearch =
-        !searchQuery ||
-        route.url.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        route.method.toLowerCase().includes(searchQuery.toLowerCase());
-
-      // Method filter
-      const matchesMethod = !methodFilter || route.method.includes(methodFilter);
-
-      return matchesSearch && matchesMethod;
-    });
-  }, [data, searchQuery, methodFilter]);
-
-  // Build tree structure
-  const treeData = useMemo(() => {
-    if (filteredRoutes.length === 0) {return [];}
-    const tree = buildRouteTree(filteredRoutes);
-    return treeNodeToAntdNode(tree, baseUrl, copiedUrl, handleCopyUrl);
-  }, [filteredRoutes, baseUrl, copiedUrl]);
-
-  // Flat list for list view
-  const sortedRoutes = useMemo(() => {
-    return [...filteredRoutes].sort((a, b) => {
-      const urlCompare = a.url.localeCompare(b.url);
-      if (urlCompare !== 0) {return urlCompare;}
-      return a.method.localeCompare(b.method);
-    });
-  }, [filteredRoutes]);
-
-  return (
-    <UISpace direction="vertical" style={{ width: '100%' }} size="middle">
-      <div>
-        <UITitle level={5}>
-          <UIIcon name="ApiOutlined" /> API Routes Explorer
-        </UITitle>
-        <UITypographyParagraph type="secondary">
-          Browse all available REST API endpoints from the backend. Use search and filters to find
-          specific routes.
-        </UITypographyParagraph>
-      </div>
-
-      {/* Controls */}
-      <UISpace wrap>
-        <UIInput
-          placeholder="Search routes..."
-          prefix={<UIIcon name="SearchOutlined" />}
-          value={searchQuery}
-          onChange={(value) => setSearchQuery(value)}
-          style={{ width: 300 }}
-          allowClear
-        />
-        <UISelect
-          placeholder="Filter by method"
-          allowClear
-          style={{ width: 150 }}
-          value={methodFilter ?? undefined}
-          onChange={(v) => setMethodFilter(v as string | null)}
-          options={availableMethods.map((m) => ({ label: m, value: m }))}
-        />
-        <UISegmented
-          value={viewMode}
-          onChange={(v) => setViewMode(v as ViewMode)}
-          options={[
-            { label: 'Tree', value: 'tree', icon: <UIIcon name="ApartmentOutlined" /> },
-            { label: 'List', value: 'list', icon: <UIIcon name="UnorderedListOutlined" /> },
-          ]}
-        />
-        <UIButton icon={<UIIcon name="ReloadOutlined" />} onClick={fetchRoutes} loading={loading}>
-          Refresh
-        </UIButton>
-      </UISpace>
-
-      {/* Stats */}
-      {data && (
-        <UIAlert
-          variant="info"
-          showIcon={false}
-          message={
-            <UISpace split={<span style={{ color: '#d9d9d9' }}>|</span>}>
-              <span>
-                <UITypographyText strong>{data.count}</UITypographyText> total routes
-              </span>
-              <span>
-                <UITypographyText strong>{filteredRoutes.length}</UITypographyText> shown
-              </span>
-              <span>
-                <UITypographyText type="secondary">
-                  Last fetched: {new Date(data.ts).toLocaleTimeString()}
-                </UITypographyText>
-              </span>
-              <span>
-                <UITypographyText type="secondary">Base: {baseUrl}</UITypographyText>
-              </span>
-            </UISpace>
-          }
-        />
-      )}
-
-      {/* Error */}
-      {error && (
-        <UIAlert variant="error" message="Failed to load routes" description={error} showIcon />
-      )}
-
-      {/* Loading */}
-      {loading && !data && (
-        <div style={{ textAlign: 'center', padding: 40 }}>
-          <UISpin size="large" />
-        </div>
-      )}
-
-      {/* Tree View */}
-      {data && viewMode === 'tree' && treeData.length > 0 && (
-        <UITree
-          treeData={treeData}
-          showIcon
-          showLine={{ showLeafIcon: false }}
-          expandedKeys={expandedKeys}
-          onExpand={(keys) => setExpandedKeys(keys)}
-          style={{
-            background: 'transparent',
-            padding: '8px 0',
-          }}
-        />
-      )}
-
-      {/* List View */}
-      {data && viewMode === 'list' && (
-        <div style={{ maxHeight: 500, overflow: 'auto' }}>
-          <UISpace direction="vertical" size="small" style={{ width: '100%' }}>
-            {sortedRoutes.map((route) => {
-              const fullUrl = route.url.startsWith('/api')
-                ? `http://localhost:5050${route.url}`
-                : `${baseUrl}${route.url}`;
-
-              return (
-                <div
-                  key={`${route.method}-${route.url}`}
-                  style={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 8,
-                    padding: '4px 8px',
-                    borderRadius: 4,
-                    background: 'rgba(0,0,0,0.02)',
-                  }}
-                >
-                  <UISpace size={4}>
-                    {route.method.split(',').map((m) => (
-                      <UITag
-                        key={m}
-                        color={METHOD_COLORS[m.trim()] || 'default'}
-                        style={{ margin: 0, minWidth: 50, textAlign: 'center' }}
-                      >
-                        {m.trim()}
-                      </UITag>
-                    ))}
-                  </UISpace>
-                  <UITypographyText code style={{ fontSize: 12, flex: 1 }}>
-                    {route.url}
-                  </UITypographyText>
-                  <UITooltip title={copiedUrl === fullUrl ? 'Copied!' : 'Copy full URL'}>
-                    <UIButton
-                      variant="text"
-                      size="small"
-                      icon={
-                        copiedUrl === fullUrl ? (
-                          <UIIcon name="CheckOutlined" style={{ color: '#52c41a' }} />
-                        ) : (
-                          <UIIcon name="CopyOutlined" />
-                        )
-                      }
-                      onClick={() => handleCopyUrl(fullUrl)}
-                    />
-                  </UITooltip>
-                </div>
-              );
-            })}
-          </UISpace>
-        </div>
-      )}
-
-      {/* Empty */}
-      {!loading && !error && filteredRoutes.length === 0 && data && (
-        <UIEmptyState description="No routes match your search" />
-      )}
-    </UISpace>
-  );
-}

package/src/modules/settings/components/appearance-settings.tsx

@@ -1,200 +0,0 @@
-import * as React from 'react';
-import {
-  UIRadio,
-  UIRadioGroup,
-  UISwitch,
-  UISpace,
-  UICard,
-  UITypographyText,
-  UITypographyParagraph,
-} from '@kb-labs/studio-ui-kit';
-import { Sun, Moon, Monitor } from 'lucide-react';
-import { useSettings } from '@/providers/settings-provider';
-import { useKBTheme } from '@/components/ui';
-
-const FONT_SIZES = [
-  { value: 'small' as const, label: 'Small', description: '13px - Compact view' },
-  { value: 'medium' as const, label: 'Medium', description: '14px - Default' },
-  { value: 'large' as const, label: 'Large', description: '16px - Better readability' },
-];
-
-export function AppearanceSettings() {
-  const { theme, setTheme } = useKBTheme();
-  const { settings, updateSettings } = useSettings();
-
-  const handleThemeChange = (newTheme: 'light' | 'dark' | 'auto') => {
-    setTheme(newTheme);
-    updateSettings({
-      appearance: {
-        ...settings.appearance,
-        theme: newTheme,
-      },
-    });
-  };
-
-  const handleCompactModeChange = (checked: boolean) => {
-    updateSettings({
-      appearance: {
-        ...settings.appearance,
-        compactMode: checked,
-      },
-    });
-  };
-
-  const handleFontSizeChange = (e: any) => {
-    updateSettings({
-      appearance: {
-        ...settings.appearance,
-        fontSize: e.target.value,
-      },
-    });
-  };
-
-  return (
-    <UISpace direction="vertical" size="large" style={{ width: '100%' }}>
-      {/* Theme Selection */}
-      <div>
-        <UITypographyText strong style={{ fontSize: 16, display: 'block', marginBottom: 12 }}>
-          Theme
-        </UITypographyText>
-        <UITypographyParagraph type="secondary" style={{ marginBottom: 16 }}>
-          Choose how KB Studio looks to you. Select a single theme, or sync with your system.
-        </UITypographyParagraph>
-
-        <UISpace direction="horizontal" size="middle" style={{ width: '100%' }}>
-          <UICard
-            hoverable
-            onClick={() => handleThemeChange('light')}
-            style={{
-              width: 200,
-              border: theme === 'light' ? '2px solid var(--link)' : '1px solid var(--border-primary)',
-              cursor: 'pointer',
-            }}
-            styles={{ body: { padding: 16 } }}
-          >
-            <div style={{ textAlign: 'center' }}>
-              <Sun size={32} style={{ marginBottom: 8, color: '#F59E0B' }} />
-              <div style={{ fontWeight: 600, marginBottom: 4 }}>Light</div>
-              <UITypographyText type="secondary" style={{ fontSize: 12 }}>
-                Bright and clean
-              </UITypographyText>
-            </div>
-            <div
-              style={{
-                marginTop: 12,
-                height: 40,
-                background: 'linear-gradient(to right, #F9FAFB, #FFFFFF)',
-                border: '1px solid #E5E7EB',
-                borderRadius: 4,
-              }}
-            />
-          </UICard>
-
-          <UICard
-            hoverable
-            onClick={() => handleThemeChange('dark')}
-            style={{
-              width: 200,
-              border: theme === 'dark' ? '2px solid var(--link)' : '1px solid var(--border-primary)',
-              cursor: 'pointer',
-            }}
-            styles={{ body: { padding: 16 } }}
-          >
-            <div style={{ textAlign: 'center' }}>
-              <Moon size={32} style={{ marginBottom: 8, color: '#6366F1' }} />
-              <div style={{ fontWeight: 600, marginBottom: 4 }}>Dark</div>
-              <UITypographyText type="secondary" style={{ fontSize: 12 }}>
-                Easy on the eyes
-              </UITypographyText>
-            </div>
-            <div
-              style={{
-                marginTop: 12,
-                height: 40,
-                background: 'linear-gradient(to right, #0D0D0F, #1A1A1C)',
-                border: '1px solid #3F3F46',
-                borderRadius: 4,
-              }}
-            />
-          </UICard>
-
-          <UICard
-            hoverable
-            onClick={() => handleThemeChange('auto')}
-            style={{
-              width: 200,
-              border: theme === 'auto' ? '2px solid var(--link)' : '1px solid var(--border-primary)',
-              cursor: 'pointer',
-            }}
-            styles={{ body: { padding: 16 } }}
-          >
-            <div style={{ textAlign: 'center' }}>
-              <Monitor size={32} style={{ marginBottom: 8, color: '#8B5CF6' }} />
-              <div style={{ fontWeight: 600, marginBottom: 4 }}>Auto</div>
-              <UITypographyText type="secondary" style={{ fontSize: 12 }}>
-                Sync with system
-              </UITypographyText>
-            </div>
-            <div
-              style={{
-                marginTop: 12,
-                height: 40,
-                background: 'linear-gradient(to right, #F9FAFB 50%, #1A1A1C 50%)',
-                border: '1px solid var(--border-primary)',
-                borderRadius: 4,
-              }}
-            />
-          </UICard>
-        </UISpace>
-      </div>
-
-      {/* Compact Mode */}
-      <div>
-        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
-          <div>
-            <UITypographyText strong style={{ fontSize: 16, display: 'block' }}>
-              Compact Mode
-            </UITypographyText>
-            <UITypographyParagraph type="secondary" style={{ marginBottom: 0, marginTop: 4 }}>
-              Reduce spacing and padding for a denser layout
-            </UITypographyParagraph>
-          </div>
-          <UISwitch
-            checked={settings.appearance.compactMode}
-            onChange={handleCompactModeChange}
-          />
-        </div>
-      </div>
-
-      {/* Font Size */}
-      <div>
-        <UITypographyText strong style={{ fontSize: 16, display: 'block', marginBottom: 12 }}>
-          Font Size
-        </UITypographyText>
-        <UITypographyParagraph type="secondary" style={{ marginBottom: 16 }}>
-          Adjust the base font size across the application
-        </UITypographyParagraph>
-
-        <UIRadioGroup
-          value={settings.appearance.fontSize}
-          onChange={handleFontSizeChange}
-          style={{ width: '100%' }}
-        >
-          <UISpace direction="vertical" style={{ width: '100%' }}>
-            {FONT_SIZES.map((size) => (
-              <UIRadio key={size.value} value={size.value} style={{ display: 'flex', alignItems: 'center' }}>
-                <div>
-                  <UITypographyText strong>{size.label}</UITypographyText>
-                  <br />
-                  <UITypographyText type="secondary" style={{ fontSize: 12 }}>
-                    {size.description}
-                  </UITypographyText>
-                </div>
-              </UIRadio>
-            ))}
-          </UISpace>
-        </UIRadioGroup>
-      </div>
-    </UISpace>
-  );
-}