@kb-labs/studio-app 0.6.0

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

@@ -0,0 +1,321 @@
+/**
+ * @module studio/modules/settings/components/configuration-settings
+ * Platform configuration settings component
+ */
+
+import * as React from 'react';
+import {
+  UISpace,
+  UITypographyText,
+  UITitle,
+  UITypographyParagraph,
+  UITag,
+  UIButton,
+  UIMessage,
+  UIAlert,
+  UIAccordion,
+  UICard,
+  UIDescriptions,
+  UIDescriptionsItem,
+  UIIcon,
+} from '@kb-labs/studio-ui-kit';
+import { useDataSources } from '@/providers/data-sources-provider';
+import { usePlatformConfig } from '@kb-labs/studio-data-client';
+import { UISkeleton, UIStack } from '@kb-labs/studio-ui-kit';
+
+export function ConfigurationSettings() {
+  const sources = useDataSources();
+  const { data, isLoading, error } = usePlatformConfig(sources.platform);
+  const [copiedKey, setCopiedKey] = React.useState<string | null>(null);
+
+  const handleCopy = (text: string, key: string) => {
+    navigator.clipboard.writeText(text);
+    setCopiedKey(key);
+    UIMessage.success('Copied to clipboard');
+    setTimeout(() => setCopiedKey(null), 2000);
+  };
+
+  if (isLoading) {
+    return (
+      <UIStack>
+        <UISkeleton active lines={5} />
+      </UIStack>
+    );
+  }
+
+  if (error) {
+    return (
+      <UIAlert
+        message="Failed to load platform configuration"
+        description={
+          <UISpace direction="vertical" size="small">
+            <UITypographyText>{error instanceof Error ? error.message : 'Unknown error'}</UITypographyText>
+            <UITypographyText type="secondary" style={{ fontSize: '0.875rem' }}>
+              Make sure the REST API server is running and accessible.
+            </UITypographyText>
+          </UISpace>
+        }
+        variant="error"
+        showIcon
+      />
+    );
+  }
+
+  if (!data) {
+    return (
+      <div>
+        <UITypographyParagraph type="secondary">No platform configuration available</UITypographyParagraph>
+      </div>
+    );
+  }
+
+  const adaptersArray = Object.entries(data.adapters || {});
+  const hasRedacted = data.redacted && data.redacted.length > 0;
+
+  // Helper to count adapters including nested ones
+  const countAdapters = (items: Array<[string, unknown]>): number => {
+    return items.reduce((count, [, packageName]) => {
+      // If it's an object (nested adapters), count its children
+      if (typeof packageName === 'object' && packageName !== null && !Array.isArray(packageName)) {
+        return count + Object.keys(packageName).length;
+      }
+      // Otherwise it's a single adapter
+      return count + 1;
+    }, 0);
+  };
+
+  // Count total adapters (including nested)
+  const totalAdaptersCount = countAdapters(adaptersArray);
+
+  // Count active adapters (non-null packages, including nested)
+  const activeAdaptersCount = adaptersArray.reduce((count, [, packageName]) => {
+    if (typeof packageName === 'object' && packageName !== null && !Array.isArray(packageName)) {
+      // Count non-null nested adapters
+      return count + Object.values(packageName).filter(pkg => pkg !== null).length;
+    }
+    return count + (packageName !== null ? 1 : 0);
+  }, 0);
+
+  // Adapter categories
+  const categories = [
+    {
+      name: 'AI & Intelligence',
+      icon: <UIIcon name="BulbOutlined" />,
+      color: 'purple',
+      adapters: ['llm', 'embeddings', 'vectorStore'],
+    },
+    {
+      name: 'Database',
+      icon: <UIIcon name="DatabaseOutlined" />,
+      color: 'blue',
+      adapters: ['database', 'db', 'documentDb'],
+    },
+    {
+      name: 'Infrastructure',
+      icon: <UIIcon name="CloudOutlined" />,
+      color: 'green',
+      adapters: ['storage', 'cache'],
+    },
+    {
+      name: 'Observability',
+      icon: <UIIcon name="ThunderboltOutlined" />,
+      color: 'orange',
+      adapters: ['logger', 'analytics', 'logRingBuffer', 'logPersistence'],
+    },
+  ];
+
+  // Group adapters by category
+  const groupedAdapters = categories.map((category) => {
+    const items = adaptersArray.filter(([name]) => category.adapters.includes(name));
+    return {
+      ...category,
+      items,
+      count: countAdapters(items),
+    };
+  });
+
+  return (
+    <UISpace direction="vertical" size="large" style={{ width: '100%' }}>
+      {/* System Information */}
+      <UICard size="small" title="System Information">
+        <UIDescriptions column={{ xs: 1, sm: 2 }} size="small">
+          <UIDescriptionsItem label="Execution Mode">
+            <UITag color="blue" icon={<UIIcon name="RocketOutlined" />}>
+              {data.execution.mode}
+            </UITag>
+          </UIDescriptionsItem>
+          <UIDescriptionsItem label="Total Adapters">
+            <UISpace size={4}>
+              <UITypographyText>{totalAdaptersCount}</UITypographyText>
+              <UITypographyText type="secondary">
+                ({activeAdaptersCount} active)
+              </UITypographyText>
+            </UISpace>
+          </UIDescriptionsItem>
+        </UIDescriptions>
+      </UICard>
+
+      {/* Platform Adapters by Category */}
+      <div>
+        <UITitle level={4}>Platform Adapters</UITitle>
+        <UITypographyParagraph type="secondary">
+          Adapters are organized by category for better clarity.
+        </UITypographyParagraph>
+
+        <UISpace direction="vertical" size="middle" style={{ width: '100%' }}>
+          {groupedAdapters.map((category) => (
+            <UICard
+              key={category.name}
+              size="small"
+              title={
+                <UISpace>
+                  <span style={{ fontSize: '1.1rem', color: `var(--ant-${category.color}-6)` }}>
+                    {category.icon}
+                  </span>
+                  <UITypographyText strong>{category.name}</UITypographyText>
+                  <UITag color={category.color}>{category.count}</UITag>
+                </UISpace>
+              }
+            >
+              <UISpace direction="vertical" size="small" style={{ width: '100%' }}>
+                {category.items.map(([name, packageName]) => {
+                  // Helper to render a single adapter item
+                  const renderAdapterItem = (itemName: string, itemPackage: string, itemKey: string) => {
+                    const isEnabled = itemPackage !== null;
+                    return (
+                      <div
+                        key={itemKey}
+                        style={{
+                          display: 'flex',
+                          alignItems: 'center',
+                          justifyContent: 'space-between',
+                          padding: '8px 12px',
+                          background: 'var(--kb-bg-secondary)',
+                          borderRadius: 4,
+                          borderLeft: isEnabled ? `3px solid var(--ant-${category.color}-6)` : '3px solid var(--ant-border-color)',
+                        }}
+                      >
+                        <UISpace style={{ flex: 1, minWidth: 0 }}>
+                          <UITypographyText strong style={{ minWidth: 100 }}>{itemName}</UITypographyText>
+                          <UITypographyText
+                            code
+                            style={{
+                              fontSize: '0.85rem',
+                              overflow: 'hidden',
+                              textOverflow: 'ellipsis',
+                              whiteSpace: 'nowrap',
+                            }}
+                          >
+                            {itemPackage || 'null'}
+                          </UITypographyText>
+                        </UISpace>
+                        <UISpace>
+                          {isEnabled ? (
+                            <>
+                              <UIIcon name="CheckCircleOutlined" style={{ color: 'var(--ant-success-color)' }} />
+                              <UIButton
+                                size="small"
+                                variant="text"
+                                icon={copiedKey === itemKey ? <UIIcon name="CheckOutlined" /> : <UIIcon name="CopyOutlined" />}
+                                onClick={() => handleCopy(itemPackage, itemKey)}
+                              >
+                                {copiedKey === itemKey ? 'Copied' : 'Copy'}
+                              </UIButton>
+                            </>
+                          ) : (
+                            <UIIcon name="CloseCircleOutlined" style={{ color: 'var(--ant-text-secondary)' }} />
+                          )}
+                        </UISpace>
+                      </div>
+                    );
+                  };
+
+                  // Handle nested adapters (object with sub-adapters)
+                  if (typeof packageName === 'object' && packageName !== null && !Array.isArray(packageName)) {
+                    return (
+                      <UISpace key={name} direction="vertical" size="small" style={{ width: '100%' }}>
+                        {Object.entries(packageName as Record<string, string>).map(([subName, subPackage]) =>
+                          renderAdapterItem(subName, subPackage, `${name}.${subName}`)
+                        )}
+                      </UISpace>
+                    );
+                  }
+
+                  // Regular adapter (string package name)
+                  return renderAdapterItem(name, packageName as string, name);
+                })}
+              </UISpace>
+            </UICard>
+          ))}
+        </UISpace>
+      </div>
+
+      {/* Adapter Configuration */}
+      {data.adapterOptions && Object.keys(data.adapterOptions).length > 0 && (
+        <div>
+          <UITitle level={4}>Adapter Configuration</UITitle>
+          <UITypographyParagraph type="secondary">
+            Detailed configuration options for each adapter.
+            {hasRedacted && (
+              <UITypographyText type="warning" style={{ marginLeft: 8 }}>
+                Some sensitive values have been redacted for security.
+              </UITypographyText>
+            )}
+          </UITypographyParagraph>
+
+          <UIAccordion
+            accordion
+            items={Object.entries(data.adapterOptions).map(([adapterName, options]) => {
+              // Find category for this adapter
+              const category = categories.find((cat) => cat.adapters.includes(adapterName));
+              const _categoryColor = category?.color || 'blue';
+
+              const optionsCount = options ? Object.keys(options as object).length : 0;
+              return {
+                key: adapterName,
+                label: options ? `${adapterName} (${optionsCount} option${optionsCount !== 1 ? 's' : ''})` : adapterName,
+                children: options ? (
+                  <pre
+                    style={{
+                      background: 'var(--kb-bg-secondary)',
+                      padding: 12,
+                      borderRadius: 4,
+                      fontSize: '0.85rem',
+                      overflow: 'auto',
+                      margin: 0,
+                    }}
+                  >
+                    {JSON.stringify(options, null, 2)}
+                  </pre>
+                ) : (
+                  <UITypographyText type="secondary">No options configured</UITypographyText>
+                ),
+              };
+            })}
+          />
+        </div>
+      )}
+
+      {/* Redacted Fields Info */}
+      {hasRedacted && (
+        <UIAlert
+          variant="warning"
+          showIcon
+          message="Security Notice"
+          description={
+            <UISpace direction="vertical" size="small">
+              <UITypographyText>The following sensitive fields were redacted from the configuration:</UITypographyText>
+              <UISpace wrap>
+                {data.redacted.map((field) => (
+                  <UITag key={field} color="orange">
+                    {field}
+                  </UITag>
+                ))}
+              </UISpace>
+            </UISpace>
+          }
+        />
+      )}
+    </UISpace>
+  );
+}

package/src/modules/settings/components/data-privacy-settings.tsx

@@ -0,0 +1,111 @@
+import * as React from 'react';
+import {
+  UIButton,
+  UISpace,
+  UITypographyParagraph,
+  UITitle,
+  UIMessage,
+  UIUpload,
+  UIIcon,
+} from '@kb-labs/studio-ui-kit';
+import type { UploadProps } from 'antd/es/upload';
+import { useSettings } from '@/providers/settings-provider';
+
+export function DataPrivacySettings() {
+  const { exportSettings, importSettings, resetSettings } = useSettings();
+
+  const handleExport = () => {
+    try {
+      exportSettings();
+      UIMessage.success('Settings exported successfully');
+    } catch (error) {
+      UIMessage.error(`Failed to export settings: ${error instanceof Error ? error.message : String(error)}`);
+    }
+  };
+
+  const handleImport: UploadProps['beforeUpload'] = (file) => {
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      try {
+        const content = e.target?.result as string;
+        importSettings(content);
+        UIMessage.success('Settings imported successfully');
+      } catch (error) {
+        UIMessage.error(`Failed to import settings: ${error instanceof Error ? error.message : String(error)}`);
+      }
+    };
+    reader.readAsText(file);
+    return false; // Prevent auto upload
+  };
+
+  const handleClearData = () => {
+    if (window.confirm('Are you sure you want to clear all local data? This will reset all settings to defaults.')) {
+      try {
+        resetSettings();
+        localStorage.clear();
+        UIMessage.success('All local data cleared successfully');
+      } catch (error) {
+        UIMessage.error(`Failed to clear data: ${error instanceof Error ? error.message : String(error)}`);
+      }
+    }
+  };
+
+  return (
+    <UISpace direction="vertical" size="large" style={{ width: '100%' }}>
+      {/* Export Settings */}
+      <div>
+        <UITitle level={5} style={{ marginBottom: 8 }}>
+          Export Settings
+        </UITitle>
+        <UITypographyParagraph type="secondary" style={{ marginBottom: 12 }}>
+          Download your current settings as a JSON file. You can use this to backup your preferences
+          or transfer them to another device.
+        </UITypographyParagraph>
+        <UIButton
+          icon={<UIIcon name="DownloadOutlined" />}
+          onClick={handleExport}
+        >
+          Export Settings
+        </UIButton>
+      </div>
+
+      {/* Import Settings */}
+      <div>
+        <UITitle level={5} style={{ marginBottom: 8 }}>
+          Import Settings
+        </UITitle>
+        <UITypographyParagraph type="secondary" style={{ marginBottom: 12 }}>
+          Restore your settings from a previously exported JSON file. This will overwrite your current settings.
+        </UITypographyParagraph>
+        <UIUpload
+          accept=".json"
+          showUploadList={false}
+          beforeUpload={handleImport}
+        >
+          <UIButton icon={<UIIcon name="UploadOutlined" />}>
+            Import Settings
+          </UIButton>
+        </UIUpload>
+      </div>
+
+      {/* Clear Local Data */}
+      <div>
+        <UITitle level={5} style={{ marginBottom: 8 }}>
+          Clear Local Data
+        </UITitle>
+        <UITypographyParagraph type="secondary" style={{ marginBottom: 12 }}>
+          Clear all locally stored data including settings, cache, and preferences.
+          This will reset the application to its default state.
+        </UITypographyParagraph>
+        <UIButton
+          icon={<UIIcon name="DeleteOutlined" />}
+          onClick={handleClearData}
+          variant="primary"
+          danger
+        >
+          Clear All Data
+        </UIButton>
+      </div>
+    </UISpace>
+  );
+}

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

@@ -0,0 +1,243 @@
+/**
+ * @module @kb-labs/studio-app/modules/settings/components/experimental-settings
+ * Experimental features settings
+ */
+
+import * as React from 'react';
+import {
+  UISwitch,
+  UISpace,
+  UITypographyText,
+  UITypographyParagraph,
+  UITitle,
+  UIAlert,
+  UITag,
+  UITooltip,
+  UIAccordion,
+  UIIcon,
+} from '@kb-labs/studio-ui-kit';
+import { useFeatureFlags } from '@/hooks/use-feature-flags';
+import {
+  FEATURE_FLAGS,
+  FEATURE_GROUPS,
+  getFeaturesByGroup,
+  type FeatureGroup,
+  type FeatureStatus,
+  type FeatureRisk,
+} from '@/config/feature-flags';
+
+const _GROUP_ICONS: Record<FeatureGroup, React.ReactNode> = {
+  'ui-ux': <UIIcon name="BgColorsOutlined" />,
+  performance: <UIIcon name="ThunderboltOutlined" />,
+  ai: <UIIcon name="RobotOutlined" />,
+  data: <UIIcon name="DatabaseOutlined" />,
+};
+
+const STATUS_COLORS: Record<FeatureStatus, string> = {
+  alpha: 'red',
+  beta: 'orange',
+  stable: 'green',
+  deprecated: 'default',
+};
+
+const RISK_COLORS: Record<FeatureRisk, string> = {
+  low: 'success',
+  medium: 'warning',
+  high: 'error',
+};
+
+const RISK_ICONS: Record<FeatureRisk, React.ReactNode> = {
+  low: <UIIcon name="InfoCircleOutlined" />,
+  medium: <UIIcon name="WarningOutlined" />,
+  high: <UIIcon name="WarningOutlined" />,
+};
+
+function isNewFeature(addedAt?: string): boolean {
+  if (!addedAt) {return false;}
+  const added = new Date(addedAt);
+  const now = new Date();
+  const daysDiff = (now.getTime() - added.getTime()) / (1000 * 60 * 60 * 24);
+  return daysDiff <= 7; // Consider "new" if added within last 7 days
+}
+
+export function ExperimentalSettings() {
+  const { isEnabled, toggleFeature, enabledFeatures, areDependenciesMet } = useFeatureFlags();
+  const groupedFeatures = React.useMemo(() => getFeaturesByGroup(), []);
+
+  const enabledCount = enabledFeatures.length;
+  const totalCount = Object.keys(FEATURE_FLAGS).length;
+
+  return (
+    <UISpace direction="vertical" size="large" style={{ width: '100%' }}>
+      {/* Header */}
+      <div>
+        <UITitle level={4} style={{ marginBottom: 8 }}>
+          <UIIcon name="ExperimentOutlined" style={{ marginRight: 8 }} />
+          Experimental Features
+        </UITitle>
+        <UITypographyParagraph type="secondary">
+          Enable experimental features to test new functionality before it's generally available.
+          These features are still in development and may have bugs or incomplete functionality.
+        </UITypographyParagraph>
+        <UITypographyParagraph type="secondary" style={{ marginTop: 0 }}>
+          <strong>{enabledCount}</strong> of <strong>{totalCount}</strong> features enabled
+        </UITypographyParagraph>
+      </div>
+
+      {/* Warning Alert */}
+      <UIAlert
+        message="Experimental Features Notice"
+        description="Features marked as Alpha or Beta are actively being developed and may change or be removed without notice. High-risk features may affect application stability."
+        variant="warning"
+        showIcon
+        icon={<UIIcon name="WarningOutlined" />}
+      />
+
+      {/* Feature Groups */}
+      <UIAccordion
+        defaultActiveKey={['ui-ux', 'performance', 'ai', 'data']}
+        style={{ backgroundColor: 'transparent' }}
+        items={(Object.keys(groupedFeatures) as FeatureGroup[]).map((groupId) => {
+          const group = FEATURE_GROUPS[groupId];
+          const features = groupedFeatures[groupId];
+          const enabledInGroup = features.filter((f) => isEnabled(f.id)).length;
+
+          return {
+            key: groupId,
+            label: `${group.name} (${enabledInGroup}/${features.length})`,
+            style: { marginBottom: 8 },
+            children: (
+              <UISpace direction="vertical" size="middle" style={{ width: '100%' }}>
+                {features.map((feature) => {
+                  const enabled = isEnabled(feature.id);
+                  const depsNotMet = !areDependenciesMet(feature.id);
+                  const isNew = isNewFeature(feature.addedAt);
+
+                  return (
+                    <div
+                      key={feature.id}
+                      style={{
+                        padding: '12px 16px',
+                        backgroundColor: enabled ? 'var(--accent-subtle)' : 'var(--bg-tertiary)',
+                        borderRadius: 8,
+                        border: `1px solid ${enabled ? 'var(--link)' : 'var(--border-secondary)'}`,
+                        transition: 'all 200ms ease-in-out',
+                      }}
+                    >
+                      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
+                        {/* Left: Switch */}
+                        <div style={{ paddingTop: 2 }}>
+                          <UISwitch
+                            checked={enabled}
+                            onChange={() => toggleFeature(feature.id)}
+                            disabled={depsNotMet && !enabled}
+                          />
+                        </div>
+
+                        {/* Middle: Content */}
+                        <div style={{ flex: 1 }}>
+                          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
+                            <UITypographyText strong style={{ fontSize: 14 }}>
+                              {feature.name}
+                            </UITypographyText>
+                            {isNew && <UITag color="cyan">New</UITag>}
+                            <UITag color={STATUS_COLORS[feature.status]}>{feature.status.toUpperCase()}</UITag>
+                          </div>
+
+                          <UITypographyParagraph
+                            type="secondary"
+                            style={{ fontSize: 13, marginBottom: 8, marginTop: 0 }}
+                          >
+                            {feature.description}
+                          </UITypographyParagraph>
+
+                          {/* Details Tooltip */}
+                          {feature.details && (
+                            <UITooltip title={feature.details} placement="bottomLeft">
+                              <UITypographyText
+                                type="secondary"
+                                style={{
+                                  fontSize: 12,
+                                  cursor: 'help',
+                                  textDecoration: 'underline',
+                                  textDecorationStyle: 'dotted',
+                                }}
+                              >
+                                Learn more
+                              </UITypographyText>
+                            </UITooltip>
+                          )}
+
+                          {/* Dependencies warning */}
+                          {depsNotMet && !enabled && feature.dependencies && (
+                            <div style={{ marginTop: 8 }}>
+                              <UIAlert
+                                message={`Requires: ${feature.dependencies.map((d) => FEATURE_FLAGS[d].name).join(', ')}`}
+                                variant="info"
+                                showIcon
+                                icon={<UIIcon name="InfoCircleOutlined" />}
+                                style={{ fontSize: 12, padding: '4px 8px' }}
+                              />
+                            </div>
+                          )}
+
+                          {/* Deprecated warning */}
+                          {feature.status === 'deprecated' && (
+                            <div style={{ marginTop: 8 }}>
+                              <UIAlert
+                                message="This feature is deprecated and will be removed soon"
+                                variant="warning"
+                                showIcon
+                                style={{ fontSize: 12, padding: '4px 8px' }}
+                              />
+                            </div>
+                          )}
+                        </div>
+
+                        {/* Right: Risk Badge */}
+                        <div style={{ paddingTop: 2 }}>
+                          <UITooltip title={`Risk: ${feature.risk}`}>
+                            <UITag
+                              color={RISK_COLORS[feature.risk]}
+                              icon={RISK_ICONS[feature.risk]}
+                              style={{ margin: 0 }}
+                            >
+                              {feature.risk.toUpperCase()}
+                            </UITag>
+                          </UITooltip>
+                        </div>
+                      </div>
+                    </div>
+                  );
+                })}
+              </UISpace>
+            ),
+          };
+        })}
+      />
+
+      {/* Footer Info */}
+      <UIAlert
+        message="Feature Stability Levels"
+        description={
+          <div>
+            <div style={{ marginBottom: 4 }}>
+              <UITag color="red">ALPHA</UITag> - Early development, expect breaking changes
+            </div>
+            <div style={{ marginBottom: 4 }}>
+              <UITag color="orange">BETA</UITag> - Feature-complete but needs testing
+            </div>
+            <div style={{ marginBottom: 4 }}>
+              <UITag color="green">STABLE</UITag> - Production-ready, safe to use
+            </div>
+            <div>
+              <UITag color="default">DEPRECATED</UITag> - Will be removed soon
+            </div>
+          </div>
+        }
+        variant="info"
+        showIcon
+      />
+    </UISpace>
+  );
+}