@kb-labs/studio-app 0.6.0

package/src/pages/login-page.tsx

@@ -0,0 +1,177 @@
+/**
+ * @module @kb-labs/studio-app/pages/login-page
+ * Login page placeholder - mock authentication
+ */
+
+import * as React from 'react';
+import { useNavigate } from 'react-router-dom';
+import {
+  UICard, UIButton, UISpace, UITitle, UITypographyText, UITypographyParagraph,
+  UISelect, UIDivider, UIMessage, UIIcon,
+} from '@kb-labs/studio-ui-kit';
+import { useAuth, type UserRole } from '@/providers/auth-provider';
+
+export function LoginPage() {
+  const navigate = useNavigate();
+  const { setRole } = useAuth();
+  const [selectedRole, setSelectedRole] = React.useState<UserRole>('operator');
+
+  const handleLogin = () => {
+    setRole(selectedRole);
+    navigate('/');
+  };
+
+  const handleSSOLogin = () => {
+    UIMessage.info('SSO аутентификация будет реализована позже');
+    // TODO: Implement SSO authentication
+  };
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: '100vh',
+        backgroundColor: 'var(--bg-tertiary)',
+        padding: '2rem',
+      }}
+    >
+      <UICard
+        style={{
+          maxWidth: '480px',
+          width: '100%',
+          borderRadius: '16px',
+          boxShadow: '0 20px 60px rgba(0,0,0,0.3)',
+        }}
+        styles={{ body: { padding: '3rem' } }}
+      >
+        <UISpace direction="vertical" size="large" style={{ width: '100%', textAlign: 'center' }}>
+          {/* Logo */}
+          <div
+            style={{
+              width: '80px',
+              height: '80px',
+              margin: '0 auto',
+              background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+              borderRadius: '20px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              fontSize: '40px',
+            }}
+          >
+            <UIIcon name="RocketOutlined" style={{ color: 'white' }} />
+          </div>
+
+          {/* Title */}
+          <div>
+            <UITitle level={2} style={{ marginBottom: 8 }}>
+              KB Labs Studio
+            </UITitle>
+            <UITypographyText type="secondary">Добро пожаловать в платформу</UITypographyText>
+          </div>
+
+          <UIDivider style={{ margin: '8px 0' }} />
+
+          {/* Mock Auth Notice */}
+          <div
+            style={{
+              padding: '16px',
+              backgroundColor: 'var(--bg-tertiary)',
+              borderRadius: '8px',
+              border: '1px solid var(--border-primary)',
+            }}
+          >
+            <UISpace direction="vertical" size="small" style={{ width: '100%' }}>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                <UIIcon name="LockOutlined" style={{ color: '#667eea' }} />
+                <UITypographyText strong style={{ color: '#667eea' }}>
+                  Режим разработки
+                </UITypographyText>
+              </div>
+              <UITypographyParagraph
+                type="secondary"
+                style={{ margin: 0, fontSize: '0.875rem', textAlign: 'left' }}
+              >
+                Это заглушка для входа. Выберите роль и войдите без пароля.
+              </UITypographyParagraph>
+            </UISpace>
+          </div>
+
+          {/* Role Selector */}
+          <div style={{ width: '100%', textAlign: 'left' }}>
+            <UITypographyText strong style={{ display: 'block', marginBottom: 8 }}>
+              Выберите роль:
+            </UITypographyText>
+            <UISelect
+              value={selectedRole}
+              onChange={(v) => setSelectedRole(v as UserRole)}
+              style={{ width: '100%' }}
+              size="large"
+              options={[
+                {
+                  label: 'Viewer — Просмотр данных',
+                  value: 'viewer',
+                },
+                {
+                  label: 'Operator — Управление системой',
+                  value: 'operator',
+                },
+                {
+                  label: 'Admin — Полный доступ',
+                  value: 'admin',
+                },
+              ]}
+            />
+          </div>
+
+          {/* Login Buttons */}
+          <UISpace direction="vertical" size="middle" style={{ width: '100%' }}>
+            <UIButton
+              variant="primary"
+              size="large"
+              block
+              icon={<UIIcon name="RocketOutlined" />}
+              onClick={handleLogin}
+              style={{
+                height: '48px',
+                fontSize: '16px',
+                fontWeight: 500,
+              }}
+            >
+              Войти в систему
+            </UIButton>
+
+            <UIDivider style={{ margin: '8px 0' }}>
+              <UITypographyText type="secondary" style={{ fontSize: '0.75rem' }}>
+                или
+              </UITypographyText>
+            </UIDivider>
+
+            <UIButton
+              size="large"
+              block
+              icon={<UIIcon name="SafetyOutlined" />}
+              onClick={handleSSOLogin}
+              style={{
+                height: '48px',
+                fontSize: '16px',
+                fontWeight: 500,
+              }}
+            >
+              Войти через SSO
+            </UIButton>
+          </UISpace>
+
+          {/* Footer */}
+          <div style={{ marginTop: '16px' }}>
+            <UITypographyText type="secondary" style={{ fontSize: '0.75rem' }}>
+              © 2025 KB Labs Studio. Development Preview.
+            </UITypographyText>
+          </div>
+        </UISpace>
+      </UICard>
+    </div>
+  );
+}

package/src/pages/not-found-page.tsx

@@ -0,0 +1,85 @@
+import { useNavigate, useLocation } from 'react-router-dom';
+import { UIButton } from '@kb-labs/studio-ui-kit';
+import { ArrowLeft, Home } from 'lucide-react';
+
+export function NotFoundPage() {
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  return (
+    <div style={{
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      minHeight: '100vh',
+      backgroundColor: 'var(--bg-primary)',
+      padding: 24,
+    }}>
+      <div style={{ textAlign: 'center', maxWidth: 400 }}>
+        <div style={{
+          fontSize: 96,
+          fontWeight: 700,
+          lineHeight: 1,
+          letterSpacing: '-4px',
+          color: 'var(--border-secondary)',
+          fontFamily: 'var(--font-heading)',
+          marginBottom: 24,
+          userSelect: 'none',
+        }}>
+          404
+        </div>
+
+        <div style={{
+          fontSize: 18,
+          fontWeight: 600,
+          color: 'var(--text-primary)',
+          marginBottom: 8,
+        }}>
+          Page not found
+        </div>
+
+        <div style={{
+          fontSize: 13,
+          color: 'var(--text-secondary)',
+          marginBottom: 4,
+          lineHeight: 1.5,
+        }}>
+          The page you're looking for doesn't exist or has been moved.
+        </div>
+
+        {location.pathname !== '/' && (
+          <div style={{
+            fontSize: 11,
+            color: 'var(--text-tertiary)',
+            marginBottom: 32,
+            fontFamily: 'var(--font-mono, monospace)',
+            background: 'var(--bg-tertiary)',
+            border: '1px solid var(--border-primary)',
+            borderRadius: 6,
+            padding: '4px 10px',
+            display: 'inline-block',
+            marginTop: 12,
+          }}>
+            {location.pathname}
+          </div>
+        )}
+
+        <div style={{ display: 'flex', gap: 8, justifyContent: 'center', marginTop: 24 }}>
+          <UIButton
+            variant="primary"
+            icon={<Home size={14} />}
+            onClick={() => navigate('/')}
+          >
+            Go home
+          </UIButton>
+          <UIButton
+            icon={<ArrowLeft size={14} />}
+            onClick={() => navigate(-1)}
+          >
+            Go back
+          </UIButton>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/providers/auth-provider.tsx

@@ -0,0 +1,40 @@
+import { createContext, useContext, useState, useEffect, type ReactNode } from 'react';
+
+export type UserRole = 'viewer' | 'operator' | 'admin';
+
+interface AuthState {
+  role: UserRole;
+  setRole: (role: UserRole) => void;
+}
+
+const AuthContext = createContext<AuthState | null>(null);
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [role, setRoleState] = useState<UserRole>(
+    () => (localStorage.getItem('studio-user-role') as UserRole) || 'operator'
+  );
+
+  useEffect(() => {
+    localStorage.setItem('studio-user-role', role);
+  }, [role]);
+
+  const setRole = (newRole: UserRole) => {
+    setRoleState(newRole);
+  };
+
+  return <AuthContext.Provider value={{ role, setRole }}>{children}</AuthContext.Provider>;
+}
+
+export function useAuth() {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error('useAuth must be used within AuthProvider');
+  }
+  return context;
+}
+
+export function useRole() {
+  const { role } = useAuth();
+  return role;
+}
+

package/src/providers/command-palette-provider.tsx

@@ -0,0 +1,193 @@
+/**
+ * @module @kb-labs/studio-app/providers/command-palette-provider
+ * Command Palette provider - manages commands and quick search
+ */
+
+import * as React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { UIMessage } from '@kb-labs/studio-ui-kit';
+import { useQueryClient } from '@tanstack/react-query';
+import { useDataSources } from './data-sources-provider';
+import { useSettings } from './settings-provider';
+import { getCommands, saveRecentCommand, getRecentCommands } from '@/utils/commands';
+import { KBQuickSearch, type SearchableItem } from '@/components/ui';
+
+interface CommandPaletteContextValue {
+  /** Open command palette */
+  open: () => void;
+  /** Close command palette */
+  close: () => void;
+  /** Toggle command palette */
+  toggle: () => void;
+  /** Check if palette is open */
+  isOpen: boolean;
+}
+
+const CommandPaletteContext = React.createContext<CommandPaletteContextValue | undefined>(
+  undefined
+);
+
+export function CommandPaletteProvider({ children }: { children: React.ReactNode }) {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const navigate = useNavigate();
+  const { settings, updateSettings } = useSettings();
+  const queryClient = useQueryClient();
+  const refresh = React.useCallback(
+    () => queryClient.invalidateQueries({ queryKey: ['studio-registry-v2'] }),
+    [queryClient],
+  );
+  const sources = useDataSources();
+
+  // Commands configuration
+  const allCommands = React.useMemo(
+    () =>
+      getCommands({
+        navigate,
+        toggleTheme: () => {
+          const currentTheme = settings.appearance.theme;
+          const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+          updateSettings({ appearance: { ...settings.appearance, theme: newTheme } });
+          UIMessage.success(`Switched to ${newTheme} mode`);
+        },
+        refreshRegistry: async () => {
+          try {
+            await refresh();
+            UIMessage.success('Registry refreshed successfully');
+          } catch (error) {
+            UIMessage.error(
+              `Failed to refresh registry: ${error instanceof Error ? error.message : String(error)}`
+            );
+          }
+        },
+        invalidateCache: async () => {
+          try {
+            const result = await sources.cache.invalidateCache();
+            UIMessage.success(
+              `Cache invalidated! Rev: ${result.previousRev ?? 'N/A'} → ${result.newRev}`
+            );
+            await refresh();
+          } catch (error) {
+            UIMessage.error(
+              `Failed to invalidate cache: ${error instanceof Error ? error.message : String(error)}`
+            );
+          }
+        },
+        openQuickSearch: () => {
+          setIsOpen(true);
+        },
+      }),
+    [navigate, settings, updateSettings, refresh, sources]
+  );
+
+  // Get recent commands and merge with all commands
+  const items = React.useMemo(() => {
+    const recentIds = getRecentCommands();
+    const recentCommands: SearchableItem[] = [];
+    const otherCommands: SearchableItem[] = [];
+
+    allCommands.forEach((cmd) => {
+      const item: SearchableItem = {
+        id: cmd.id,
+        title: cmd.title,
+        description: cmd.description,
+        category: cmd.category as SearchableItem['category'],
+        path: cmd.path,
+        icon: undefined, // Explicitly set to undefined - icons will be rendered based on category
+        badge: cmd.shortcut,
+      };
+
+      if (recentIds.includes(cmd.id)) {
+        recentCommands.push(item);
+      } else {
+        otherCommands.push(item);
+      }
+    });
+
+    // Sort recent by recency, others by priority
+    const sortedRecent = recentCommands.sort(
+      (a, b) => recentIds.indexOf(a.id) - recentIds.indexOf(b.id)
+    );
+
+    const sortedOthers = otherCommands.sort((a, b) => {
+      const cmdA = allCommands.find((c) => c.id === a.id);
+      const cmdB = allCommands.find((c) => c.id === b.id);
+      return (cmdB?.priority ?? 0) - (cmdA?.priority ?? 0);
+    });
+
+    return [...sortedRecent, ...sortedOthers];
+  }, [allCommands]);
+
+  // Handle command execution
+  const handleNavigate = React.useCallback(
+    (path: string) => {
+      const command = allCommands.find((cmd) => cmd.path === path);
+      if (!command) {return;}
+
+      // Save to recent
+      saveRecentCommand(command.id);
+
+      // Execute action or navigate
+      if (command.action) {
+        command.action();
+      } else if (command.path) {
+        // Handle URL params (e.g., /settings?tab=appearance)
+        if (command.path.includes('?')) {
+          const [basePath, search] = command.path.split('?');
+          navigate({ pathname: basePath, search: `?${search}` });
+        } else {
+          navigate(command.path);
+        }
+      }
+
+      setIsOpen(false);
+    },
+    [allCommands, navigate]
+  );
+
+  // Keyboard shortcut: Cmd+K / Ctrl+K
+  React.useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault();
+        setIsOpen((prev) => !prev);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, []);
+
+  const value = React.useMemo(
+    () => ({
+      open: () => setIsOpen(true),
+      close: () => setIsOpen(false),
+      toggle: () => setIsOpen((prev) => !prev),
+      isOpen,
+    }),
+    [isOpen]
+  );
+
+  return (
+    <CommandPaletteContext.Provider value={value}>
+      {children}
+      <KBQuickSearch
+        open={isOpen}
+        onClose={() => setIsOpen(false)}
+        items={items}
+        onNavigate={handleNavigate}
+        placeholder="Search pages, run commands..."
+      />
+    </CommandPaletteContext.Provider>
+  );
+}
+
+/**
+ * Hook to use command palette
+ */
+export function useCommandPalette() {
+  const context = React.useContext(CommandPaletteContext);
+  if (!context) {
+    throw new Error('useCommandPalette must be used within CommandPaletteProvider');
+  }
+  return context;
+}

package/src/providers/data-sources-provider.tsx

@@ -0,0 +1,27 @@
+import { createContext, useContext, useMemo, type ReactNode } from 'react';
+import { createDataSources, type DataSources } from '@kb-labs/studio-data-client';
+import { studioConfig } from '@/config/studio.config';
+
+const DataSourcesContext = createContext<DataSources | null>(null);
+
+export function DataSourcesProvider({ children }: { children: ReactNode }) {
+  const sources = useMemo(
+    () => createDataSources({
+      mode: studioConfig.dataSourceMode,
+      baseUrl: studioConfig.apiBaseUrl,
+      token: studioConfig.gatewayToken,
+    }),
+    [],
+  );
+
+  return <DataSourcesContext.Provider value={sources}>{children}</DataSourcesContext.Provider>;
+}
+
+export function useDataSources() {
+  const context = useContext(DataSourcesContext);
+  if (!context) {
+    throw new Error('useDataSources must be used within DataSourcesProvider');
+  }
+  return context;
+}
+

package/src/providers/devtools-provider.tsx

@@ -0,0 +1,72 @@
+import { useEffect, useRef, type ReactNode } from 'react';
+import { devToolsStore, GenericChannel } from '@kb-labs/studio-devtools';
+import type { DevToolsPlugin, EventBusEvent } from '@kb-labs/studio-devtools';
+import { eventBus } from '@kb-labs/studio-event-bus';
+import { useFeatureFlags } from '@/hooks/use-feature-flags';
+
+interface DevToolsProviderProps {
+  children: ReactNode;
+  /** External plugins to register alongside built-in channels */
+  plugins?: DevToolsPlugin[];
+}
+
+/**
+ * Mounts all DevTools instrumentation when the 'devtools-panel' feature flag is enabled.
+ * Must be placed inside SettingsProvider (for feature flags) and outside RegistryV2Provider
+ * (so MF events from registry load are captured).
+ */
+export function DevToolsProvider({ children, plugins = [] }: DevToolsProviderProps) {
+  const { isEnabled } = useFeatureFlags();
+  const enabled = isEnabled('devtools-panel');
+  const pluginsRef = useRef(plugins);
+  pluginsRef.current = plugins;
+
+  useEffect(() => {
+    if (!enabled) { return; }
+
+    // --- EventBus channel ---
+    const eventBusChannel = new GenericChannel<EventBusEvent>(
+      'eventbus',
+      'EventBus',
+      'NodeIndexOutlined',
+    );
+    devToolsStore.registerChannel(eventBusChannel);
+
+    // Backfill existing history
+    eventBus.getHistory().forEach((record) => {
+      eventBusChannel.push({
+        id: `eb-${record.meta.timestamp}-${Math.random().toString(36).slice(2)}`,
+        event: record.event,
+        payload: record.payload,
+        sourcePluginId: record.meta.sourcePluginId,
+        sourcePageId: record.meta.sourcePageId,
+        timestamp: record.meta.timestamp,
+      });
+    });
+
+    // Live stream
+    eventBus.setDevToolsObserver((record) => {
+      eventBusChannel.push({
+        id: `eb-${record.meta.timestamp}-${Math.random().toString(36).slice(2)}`,
+        event: record.event,
+        payload: record.payload,
+        sourcePluginId: record.meta.sourcePluginId,
+        sourcePageId: record.meta.sourcePageId,
+        timestamp: record.meta.timestamp,
+      });
+    });
+
+    // --- External plugins ---
+    pluginsRef.current.forEach((p) => { devToolsStore.registerPlugin(p); });
+
+    return () => {
+      eventBus.clearDevToolsObserver();
+      devToolsStore.unregisterChannel('eventbus');
+      pluginsRef.current.forEach((p) => {
+        devToolsStore.unregisterChannel(p.channel.id);
+      });
+    };
+  }, [enabled]);
+
+  return <>{children}</>;
+}

package/src/providers/navigation-items-provider.tsx

@@ -0,0 +1,38 @@
+/**
+ * @module @kb-labs/studio-app/providers/navigation-items-provider
+ * Provides the list of available sidebar navigation items to settings UI.
+ * Single source of truth — no hardcoded item lists.
+ */
+
+import * as React from 'react';
+
+export interface NavigationItemDescriptor {
+  key: string;
+  label: string;
+}
+
+interface NavigationItemsContextValue {
+  availableItems: NavigationItemDescriptor[];
+}
+
+const NavigationItemsContext = React.createContext<NavigationItemsContextValue>({
+  availableItems: [],
+});
+
+export interface NavigationItemsProviderProps {
+  items: NavigationItemDescriptor[];
+  children: React.ReactNode;
+}
+
+export function NavigationItemsProvider({ items, children }: NavigationItemsProviderProps) {
+  const value = React.useMemo(() => ({ availableItems: items }), [items]);
+  return (
+    <NavigationItemsContext.Provider value={value}>
+      {children}
+    </NavigationItemsContext.Provider>
+  );
+}
+
+export function useNavigationItems(): NavigationItemDescriptor[] {
+  return React.useContext(NavigationItemsContext).availableItems;
+}