@kb-labs/studio-app 0.6.0

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

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

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

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

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

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

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