@kb-labs/studio-app 0.7.0 → 2.8.0

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

@@ -1,198 +0,0 @@
-/**
- * @module @kb-labs/studio-app/modules/settings/components/navigation-settings
- * UI for managing sidebar navigation categories.
- */
-
-import * as React from 'react';
-import {
-  UISpace,
-  UITypographyText,
-  UITypographyParagraph,
-  UIButton,
-  UIInput,
-  UISelect,
-  UICard,
-  UIEmptyState,
-  UIPopconfirm,
-  UIIcon,
-} from '@kb-labs/studio-ui-kit';
-import { useSettings, type NavigationCategory } from '@/providers/settings-provider';
-import { useNavigationItems } from '@/providers/navigation-items-provider';
-
-export function NavigationSettings() {
-  const { settings, updateSettings } = useSettings();
-  const availableItems = useNavigationItems();
-  const categories = settings.navigation.categories;
-
-  // Set of valid item keys (for filtering stale references)
-  const validKeys = React.useMemo(
-    () => new Set(availableItems.map(i => i.key)),
-    [availableItems],
-  );
-
-  // Items already assigned to any category (only valid keys)
-  const assignedKeys = React.useMemo(() => {
-    const set = new Set<string>();
-    for (const cat of categories) {
-      for (const key of cat.itemKeys) {
-        if (validKeys.has(key)) {
-          set.add(key);
-        }
-      }
-    }
-    return set;
-  }, [categories, validKeys]);
-
-  const updateCategories = React.useCallback(
-    (newCategories: NavigationCategory[]) => {
-      updateSettings({ navigation: { categories: newCategories } });
-    },
-    [updateSettings],
-  );
-
-  const addCategory = React.useCallback(() => {
-    const id = `cat-${Date.now()}`;
-    updateCategories([
-      ...categories,
-      { id, label: '', order: categories.length, itemKeys: [] },
-    ]);
-  }, [categories, updateCategories]);
-
-  const removeCategory = React.useCallback(
-    (id: string) => {
-      updateCategories(categories.filter(c => c.id !== id));
-    },
-    [categories, updateCategories],
-  );
-
-  const updateCategory = React.useCallback(
-    (id: string, updates: Partial<NavigationCategory>) => {
-      updateCategories(
-        categories.map(c => (c.id === id ? { ...c, ...updates } : c)),
-      );
-    },
-    [categories, updateCategories],
-  );
-
-  const moveCategory = React.useCallback(
-    (id: string, direction: -1 | 1) => {
-      const idx = categories.findIndex(c => c.id === id);
-      if (idx < 0) {return;}
-      const newIdx = idx + direction;
-      if (newIdx < 0 || newIdx >= categories.length) {return;}
-      const newCats = [...categories];
-      const temp = newCats[idx]!;
-      newCats[idx] = newCats[newIdx]!;
-      newCats[newIdx] = temp;
-      updateCategories(newCats.map((c, i) => ({ ...c, order: i })));
-    },
-    [categories, updateCategories],
-  );
-
-  const resetNavigation = React.useCallback(() => {
-    updateCategories([]);
-  }, [updateCategories]);
-
-  return (
-    <UISpace direction="vertical" size="large" style={{ width: '100%' }}>
-      <div>
-        <UITypographyText strong style={{ fontSize: 16, display: 'block', marginBottom: 12 }}>
-          Sidebar Categories
-        </UITypographyText>
-        <UITypographyParagraph type="secondary" style={{ marginBottom: 16 }}>
-          Create categories to group sidebar items. Uncategorized items stay at the top.
-          Settings is always pinned to the bottom.
-        </UITypographyParagraph>
-      </div>
-
-      {categories.length === 0 ? (
-        <UIEmptyState
-          image={UIEmptyState.PRESENTED_IMAGE_SIMPLE}
-          description="No categories. All sidebar items are shown as a flat list."
-        />
-      ) : (
-        <UISpace direction="vertical" size="middle" style={{ width: '100%' }}>
-          {categories.map((cat, idx) => {
-            // Items selectable for this category: unassigned + already in this category
-            const selectableOptions = availableItems.filter(
-              item => !assignedKeys.has(item.key) || cat.itemKeys.includes(item.key),
-            );
-
-            // Filter stale keys from display
-            const validItemKeys = cat.itemKeys.filter(k => validKeys.has(k));
-
-            return (
-              <UICard
-                key={cat.id}
-                size="small"
-                style={{ borderColor: 'var(--border-primary)' }}
-              >
-                <UISpace direction="vertical" size="small" style={{ width: '100%' }}>
-                  <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
-                    <UIInput
-                      value={cat.label}
-                      onChange={value =>
-                        updateCategory(cat.id, { label: value })
-                      }
-                      placeholder="Category name"
-                      style={{ flex: 1 }}
-                    />
-                    <UIButton
-                      size="small"
-                      icon={<UIIcon name="ArrowUpOutlined" />}
-                      disabled={idx === 0}
-                      onClick={() => moveCategory(cat.id, -1)}
-                    />
-                    <UIButton
-                      size="small"
-                      icon={<UIIcon name="ArrowDownOutlined" />}
-                      disabled={idx === categories.length - 1}
-                      onClick={() => moveCategory(cat.id, 1)}
-                    />
-                    <UIPopconfirm
-                      title="Delete this category?"
-                      description="Items will return to the uncategorized area."
-                      onConfirm={() => removeCategory(cat.id)}
-                    >
-                      <UIButton size="small" danger icon={<UIIcon name="DeleteOutlined" />} />
-                    </UIPopconfirm>
-                  </div>
-
-                  <UISelect
-                    mode="multiple"
-                    value={validItemKeys}
-                    onChange={keys =>
-                      updateCategory(cat.id, { itemKeys: (keys as string[]) })
-                    }
-                    options={selectableOptions.map(i => ({
-                      value: i.key,
-                      label: i.label,
-                    }))}
-                    placeholder="Select sidebar items for this category"
-                    style={{ width: '100%' }}
-                    optionFilterProp="label"
-                  />
-                </UISpace>
-              </UICard>
-            );
-          })}
-        </UISpace>
-      )}
-
-      <UISpace>
-        <UIButton variant="dashed" icon={<UIIcon name="PlusOutlined" />} onClick={addCategory}>
-          Add Category
-        </UIButton>
-        {categories.length > 0 && (
-          <UIPopconfirm
-            title="Reset all navigation customizations?"
-            description="All categories will be removed."
-            onConfirm={resetNavigation}
-          >
-            <UIButton danger>Reset Navigation</UIButton>
-          </UIPopconfirm>
-        )}
-      </UISpace>
-    </UISpace>
-  );
-}

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

@@ -1,40 +0,0 @@
-import * as React from 'react';
-import { UIForm, UIFormItem, UISwitch, UISpace, UIAlert, UIIcon } from '@kb-labs/studio-ui-kit';
-
-export function NotificationsSettings() {
-  return (
-    <UISpace direction="vertical" size="large" style={{ width: '100%' }}>
-      <UIAlert
-        message="Feature in Development"
-        description="Notification preferences will be configurable soon. We're working on bringing you more control over alerts and notifications."
-        variant="warning"
-        showIcon
-        icon={<UIIcon name="BellOutlined" />}
-      />
-
-      <div style={{ opacity: 0.5, pointerEvents: 'none' }}>
-        <UIForm layout="vertical">
-          <UIFormItem label="Toast Notifications" help="Show temporary notification popups">
-            <UISwitch disabled defaultChecked />
-          </UIFormItem>
-
-          <UIFormItem label="Sound Alerts" help="Play sounds for important events">
-            <UISwitch disabled />
-          </UIFormItem>
-
-          <UIFormItem label="Desktop Notifications" help="Enable browser notifications (requires permission)">
-            <UISwitch disabled />
-          </UIFormItem>
-
-          <UIFormItem label="Email Digest" help="Receive daily summary emails">
-            <UISwitch disabled />
-          </UIFormItem>
-
-          <UIFormItem label="Error Notifications" help="Get notified when errors occur">
-            <UISwitch disabled defaultChecked />
-          </UIFormItem>
-        </UIForm>
-      </div>
-    </UISpace>
-  );
-}

package/src/modules/settings/pages/settings-page.tsx

@@ -1,298 +0,0 @@
-import * as React from 'react';
-import {
-  UITabs,
-  UIList,
-  UIListItem,
-  UIListItemMeta,
-  UIButton,
-  UISpace,
-  UITypographyText,
-  UITypographyParagraph,
-  UITitle,
-  UIMessage,
-  UIDivider,
-  UIIcon,
-} from '@kb-labs/studio-ui-kit';
-import { useDataSources } from '@/providers/data-sources-provider';
-import { useHealthStatus } from '@kb-labs/studio-data-client';
-import { HealthIndicator } from '@/components/health-indicator';
-import { useRegistryV2 } from '@/providers/registry-v2-provider';
-import { formatTimestamp } from '@/utils/format-date';
-import { AppearanceSettings } from '../components/appearance-settings';
-import { DataPrivacySettings } from '../components/data-privacy-settings';
-import { NotificationsSettings } from '../components/notifications-settings';
-import { ExperimentalSettings } from '../components/experimental-settings';
-import { ConfigurationSettings } from '../components/configuration-settings';
-import { RoleSwitcher } from '@/components/role-switcher';
-import { ApiRoutesViewer } from '../components/api-routes-viewer';
-import { NavigationSettings } from '../components/navigation-settings';
-import { UICard, UISkeleton, UIStack } from '@kb-labs/studio-ui-kit';
-import { UIPage, UIPageHeader, UIPageSection } from '@kb-labs/studio-ui-kit';
-
-export function SettingsPage() {
-  const sources = useDataSources();
-  const { data, isLoading } = useHealthStatus(sources.system);
-  const { registry } = useRegistryV2();
-  const registryMeta = { generatedAt: registry.generatedAt, rev: null, partial: false, stale: false, expiresAt: undefined as string | undefined, ttlMs: undefined as number | undefined, checksum: undefined as string | undefined };
-  const refresh = async () => {}; // TODO: queryClient.invalidateQueries
-  const [invalidating, setInvalidating] = React.useState(false);
-
-  const handleInvalidateCache = async () => {
-    setInvalidating(true);
-    try {
-      const result = await sources.cache.invalidateCache();
-      UIMessage.success(
-        `Cache invalidated! Rev: ${result.previousRev ?? 'N/A'} → ${result.newRev}. ` +
-        `Discovered ${result.pluginsDiscovered} plugins.`
-      );
-      await refresh();
-    } catch (error) {
-      UIMessage.error(`Error invalidating cache: ${error instanceof Error ? error.message : String(error)}`);
-    } finally {
-      setInvalidating(false);
-    }
-  };
-
-  const handleRefreshRegistry = async () => {
-    try {
-      await refresh();
-      UIMessage.success('Registry refreshed successfully');
-    } catch (error) {
-      UIMessage.error(`Failed to refresh registry: ${error instanceof Error ? error.message : String(error)}`);
-    }
-  };
-
-  const tabItems = [
-    {
-      key: 'appearance',
-      label: 'Appearance',
-      icon: <UIIcon name="BgColorsOutlined" />,
-      children: (
-        <UIPageSection>
-          <UICard>
-            <AppearanceSettings />
-          </UICard>
-        </UIPageSection>
-      ),
-    },
-    {
-      key: 'navigation',
-      label: 'Navigation',
-      icon: <UIIcon name="MenuOutlined" />,
-      children: (
-        <UIPageSection>
-          <UICard>
-            <NavigationSettings />
-          </UICard>
-        </UIPageSection>
-      ),
-    },
-    {
-      key: 'notifications',
-      label: 'Notifications',
-      icon: <UIIcon name="BellOutlined" />,
-      children: (
-        <UIPageSection>
-          <UICard>
-            <NotificationsSettings />
-          </UICard>
-        </UIPageSection>
-      ),
-    },
-    {
-      key: 'privacy',
-      label: 'Data & Privacy',
-      icon: <UIIcon name="LockOutlined" />,
-      children: (
-        <UIPageSection>
-          <UICard>
-            <DataPrivacySettings />
-          </UICard>
-        </UIPageSection>
-      ),
-    },
-    {
-      key: 'system',
-      label: 'System Info',
-      icon: <UIIcon name="DatabaseOutlined" />,
-      children: (
-        <>
-          <UIPageSection>
-            <UICard title="Data Sources Health">
-              {isLoading ? (
-                <UIStack>
-                  <UISkeleton active lines={3} />
-                </UIStack>
-              ) : data ? (
-                <UIList
-                  dataSource={data.sources}
-                  renderItem={(source) => {
-                    const status = source.ok
-                      ? 'ok'
-                      : source.error === 'system_degraded'
-                      ? 'degraded'
-                      : 'down';
-                    return (
-                      <UIListItem key={source.name} extra={<HealthIndicator status={status} />}>
-                        <UIListItemMeta
-                          title={source.name}
-                          description={source.latency ? `${source.latency}ms` : undefined}
-                        />
-                      </UIListItem>
-                    );
-                  }}
-                />
-              ) : (
-                <p>No health data available</p>
-              )}
-            </UICard>
-          </UIPageSection>
-
-          <UIPageSection>
-            <UICard title="Registry Status">
-              <UISpace direction="vertical" style={{ width: '100%' }}>
-                <div>
-                  <UITypographyText strong>Revision:</UITypographyText> <UITypographyText>{registryMeta.rev ?? 'N/A'}</UITypographyText>
-                </div>
-                <div>
-                  <UITypographyText strong>Generated At:</UITypographyText> <UITypographyText>{formatTimestamp(registryMeta.generatedAt)}</UITypographyText>
-                </div>
-                <div>
-                  <UITypographyText strong>Expires At:</UITypographyText> <UITypographyText>{formatTimestamp(registryMeta.expiresAt)}</UITypographyText>
-                </div>
-                <div>
-                  <UITypographyText strong>TTL:</UITypographyText> <UITypographyText>{registryMeta.ttlMs ? `${registryMeta.ttlMs / 1000}s` : 'N/A'}</UITypographyText>
-                </div>
-                <div>
-                  <UITypographyText strong>Partial:</UITypographyText> <UITypographyText type={registryMeta.partial ? 'warning' : 'success'}>
-                    {registryMeta.partial ? 'Yes' : 'No'}
-                  </UITypographyText>
-                </div>
-                <div>
-                  <UITypographyText strong>Stale:</UITypographyText> <UITypographyText type={registryMeta.stale ? 'danger' : 'success'}>
-                    {registryMeta.stale ? 'Yes' : 'No'}
-                  </UITypographyText>
-                </div>
-                {registryMeta.checksum && (
-                  <div>
-                    <UITypographyText strong>Checksum:</UITypographyText> <UITypographyText code style={{ fontSize: '0.85rem' }}>
-                      {registryMeta.checksum.substring(0, 8)}...
-                    </UITypographyText>
-                  </div>
-                )}
-              </UISpace>
-            </UICard>
-          </UIPageSection>
-        </>
-      ),
-    },
-    {
-      key: 'configuration',
-      label: 'Configuration',
-      icon: <UIIcon name="SettingOutlined" />,
-      children: (
-        <UIPageSection>
-          <UICard>
-            <ConfigurationSettings />
-          </UICard>
-        </UIPageSection>
-      ),
-    },
-    {
-      key: 'experimental',
-      label: 'Experimental',
-      icon: <UIIcon name="ExperimentOutlined" />,
-      children: (
-        <UIPageSection>
-          <UICard>
-            <ExperimentalSettings />
-          </UICard>
-        </UIPageSection>
-      ),
-    },
-    {
-      key: 'authentication',
-      label: 'Authentication',
-      icon: <UIIcon name="UserOutlined" />,
-      children: (
-        <UIPageSection>
-          <UICard>
-            <RoleSwitcher />
-          </UICard>
-        </UIPageSection>
-      ),
-    },
-    {
-      key: 'developer',
-      label: 'Developer',
-      icon: <UIIcon name="ToolOutlined" />,
-      children: (
-        <>
-          <UIPageSection>
-            <UICard title="Development Tools">
-              <UISpace direction="vertical" style={{ width: '100%' }} size="large">
-                <div>
-                  <UITitle level={5}>Refresh Registry</UITitle>
-                  <UITypographyParagraph type="secondary">
-                    Fetch fresh registry data from the REST API without clearing the cache.
-                    Use this to get the latest changes without forcing re-discovery.
-                  </UITypographyParagraph>
-                  <UIButton
-                    icon={<UIIcon name="ReloadOutlined" />}
-                    onClick={handleRefreshRegistry}
-                  >
-                    Refresh Registry
-                  </UIButton>
-                </div>
-
-                <UIDivider />
-
-                <div>
-                  <UITitle level={5}>Invalidate Cache (Force Discovery)</UITitle>
-                  <UITypographyParagraph type="secondary">
-                    Force cache invalidation and trigger full plugin re-discovery on the REST API.
-                    This clears the snapshot cache and rescans all plugin directories.
-                    Useful when testing plugin changes or troubleshooting registry issues.
-                  </UITypographyParagraph>
-                  <UIButton
-                    icon={<UIIcon name="DeleteOutlined" />}
-                    onClick={handleInvalidateCache}
-                    loading={invalidating}
-                    variant="primary"
-                    danger
-                  >
-                    Invalidate Cache & Re-discover
-                  </UIButton>
-                </div>
-              </UISpace>
-            </UICard>
-          </UIPageSection>
-
-          <UIPageSection>
-            <UICard>
-              <ApiRoutesViewer />
-            </UICard>
-          </UIPageSection>
-
-          {/* DevToolsPanel is now a global floating panel rendered in App.tsx */}
-        </>
-      ),
-    },
-  ];
-
-  return (
-    <UIPage variant="document">
-      <UIPageHeader
-        title="Settings"
-        description="Configure your preferences, manage data, and customize your experience"
-      />
-
-      <UITabs
-        items={tabItems}
-        syncUrl={{ mode: 'path', basePath: '/settings' }}
-        size="large"
-        style={{ marginTop: 24 }}
-      />
-    </UIPage>
-  );
-}

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

@@ -1,47 +0,0 @@
-/**
- * @module @kb-labs/studio-app/modules/settings/routes
- * Settings module routing configuration
- */
-
-import type { RouteObject } from 'react-router-dom';
-import { SettingsPage } from '../pages/settings-page';
-import { ErrorBoundary } from '../../../components/error-boundary';
-import { renderIcon } from '../../../routes/helpers';
-import type { NavigationItem } from '@/components/ui';
-
-// Route paths
-const PATHS = {
-  ROOT: '/settings',
-  TAB: '/settings/:tab',
-} as const;
-
-// Route keys
-const KEYS = {
-  MODULE: 'settings',
-} as const;
-
-/**
- * Settings routes
- */
-export const settingsRoutes: RouteObject[] = [
-  {
-    path: PATHS.ROOT,
-    element: <SettingsPage />,
-    errorElement: <ErrorBoundary />,
-  },
-  {
-    path: PATHS.TAB,
-    element: <SettingsPage />,
-    errorElement: <ErrorBoundary />,
-  },
-];
-
-/**
- * Settings navigation item for sidebar
- */
-export const settingsNavigation: NavigationItem = {
-  key: KEYS.MODULE,
-  label: 'Settings',
-  icon: renderIcon('SettingOutlined'),
-  path: PATHS.ROOT,
-};

package/src/pages/README-assistant.md

@@ -1,91 +0,0 @@
-# AI Platform Assistant - UI Mockup
-
-## Status: In Development (UI Preview)
-
-This is a UI mockup for the KB Labs AI Platform Assistant feature.
-
-## Current Implementation
-
-**What works:**
-- ✅ Chat UI with message bubbles
-- ✅ User/Assistant message display
-- ✅ Sources display (file references with line numbers)
-- ✅ Quick action tags
-- ✅ Mock conversation for UX testing
-- ✅ Loading states
-- ✅ "In Development" alert banner
-
-**What doesn't work yet:**
-- ❌ Backend integration
-- ❌ Real Mind RAG queries
-- ❌ LLM streaming
-- ❌ Actual assistant responses
-
-## File Location
-
-`/Users/kirillbaranov/Desktop/kb-labs/kb-labs-studio/apps/studio/src/pages/assistant-page.tsx`
-
-## Access
-
-Navigate to: `http://localhost:3000/assistant`
-
-## UI Components
-
-### Message Bubble
-- User messages: Right-aligned, blue background
-- Assistant messages: Left-aligned, gray background with robot avatar
-- Timestamps for each message
-
-### Sources Display
-- File path with line numbers
-- Code snippet preview
-- Collapsible card format
-
-### Quick Actions
-- Pre-defined question tags
-- Click to populate input
-- Examples: "Create workflow", "Mind RAG", "DevKit usage"
-
-## Mock Data
-
-Current mock conversation demonstrates:
-- User asking "How do I create a new plugin?"
-- Assistant providing step-by-step instructions with code examples
-- Source references to actual files (kb-labs-plugin/README.md, types.ts)
-
-## Next Steps (Backend Integration)
-
-When ready to implement backend:
-
-1. **Create Assistant Service** (`kb-labs-rest-api/src/services/assistant-service.ts`)
-   - Use `useLLM()` for streaming
-   - Use Mind Orchestrator for search
-   - Implement SSE streaming
-
-2. **Create REST Endpoint** (`kb-labs-rest-api/src/routes/assistant.ts`)
-   - POST `/api/v1/assistant/query`
-   - Server-Sent Events for streaming
-
-3. **Update Frontend**
-   - Replace mock `handleSend()` with real API call
-   - Implement SSE client for streaming chunks
-   - Handle loading/error states
-
-## Design Notes
-
-- **Clean, minimal UI** - Focus on readability
-- **Sources are prominent** - Users can verify information
-- **Quick actions reduce friction** - Common questions one-click away
-- **Loading states** - Pulse animation shows thinking state
-- **Responsive layout** - Works on different screen sizes
-
-## Future Enhancements
-
-- [ ] Markdown rendering in messages
-- [ ] Code syntax highlighting
-- [ ] Copy code button
-- [ ] Clear chat history
-- [ ] Export conversation
-- [ ] Keyboard shortcuts (Cmd+K to focus input)
-- [ ] Suggested follow-up questions
-- [ ] Conversation history/sessions