@kb-labs/studio-app 0.6.0

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

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

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

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

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

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