@kb-labs/studio-app 0.6.0

package/rspack.config.mjs

@@ -0,0 +1,118 @@
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { defineConfig } from '@rspack/cli';
+import { ModuleFederationPlugin } from '@module-federation/enhanced/rspack';
+import { HtmlRspackPlugin } from '@rspack/core';
+import RefreshPlugin from '@rspack/plugin-react-refresh';
+import { STUDIO_SHARED_DEPS } from '@kb-labs/studio-plugin-tools';
+
+const isDev = process.env.NODE_ENV !== 'production';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Gateway URL for proxying API and plugin widget requests
+const proxyTarget = process.env.API_PROXY_TARGET || 'http://localhost:4000';
+
+// Expose KB_* env vars via import.meta.env
+const envDefines = {
+  'import.meta.env.MODE': JSON.stringify(isDev ? 'development' : 'production'),
+  'import.meta.env.DEV': JSON.stringify(isDev),
+  'import.meta.env.PROD': JSON.stringify(!isDev),
+};
+for (const [key, value] of Object.entries(process.env)) {
+  if (key.startsWith('KB_') && value !== undefined) {
+    envDefines[`import.meta.env.${key}`] = JSON.stringify(value);
+  }
+}
+
+export default defineConfig({
+  experiments: {
+    css: true,
+  },
+  entry: { main: './src/main.tsx' },
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    publicPath: 'auto',
+    filename: isDev ? '[name].js' : '[name].[contenthash:8].js',
+    clean: true,
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.jsx', '.js'],
+    alias: {
+      '@': path.resolve(__dirname, 'src'),
+      '@kb-labs/studio-ui-core': path.resolve(__dirname, '../../packages/studio-ui-core/src'),
+      '@kb-labs/studio-data-client': path.resolve(__dirname, '../../packages/studio-data-client/src'),
+    },
+  },
+  module: {
+    parser: {
+      'css/auto': {
+        namedExports: false,
+      },
+      css: {
+        namedExports: false,
+      },
+    },
+    generator: {
+      'css/auto': {
+        exportsOnly: false,
+        exportsConvention: 'as-is',
+      },
+      css: {
+        exportsOnly: false,
+        exportsConvention: 'as-is',
+      },
+    },
+    rules: [
+      {
+        test: /\.tsx?$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'builtin:swc-loader',
+          options: {
+            jsc: {
+              parser: { syntax: 'typescript', tsx: true },
+              transform: { react: { runtime: 'automatic', development: isDev, refresh: isDev } },
+            },
+          },
+        },
+      },
+      {
+        test: /\.css$/,
+        use: ['postcss-loader'],
+        type: 'css/auto',
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg|woff2?|eot|ttf|otf)$/,
+        type: 'asset',
+      },
+    ],
+  },
+  plugins: [
+    new HtmlRspackPlugin({
+      template: './index.html',
+      favicon: './public/favicon.svg',
+    }),
+    new ModuleFederationPlugin({
+      name: 'studioHost',
+      remotes: {},
+      shared: Object.fromEntries(
+        Object.entries(STUDIO_SHARED_DEPS).map(([key, val]) => [key, { ...val, eager: true }]),
+      ),
+    }),
+    isDev && new RefreshPlugin(),
+  ].filter(Boolean),
+  devServer: {
+    port: 3000,
+    hot: true,
+    historyApiFallback: true,
+    proxy: [
+      { context: ['/api'], target: proxyTarget, changeOrigin: true },
+      { context: ['/plugins'], target: proxyTarget, changeOrigin: true },
+    ],
+  },
+  builtins: {
+    define: envDefines,
+  },
+  devtool: isDev ? 'source-map' : 'source-map',
+});

package/src/App.tsx

@@ -0,0 +1,46 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { RouterProvider } from 'react-router-dom';
+import { KBConfigProvider } from '@/components/ui/kb-config-provider';
+import { DataSourcesProvider } from './providers/data-sources-provider';
+import { AuthProvider } from './providers/auth-provider';
+import { RegistryV2Provider } from './providers/registry-v2-provider';
+import { SettingsProvider } from './providers/settings-provider';
+import { EventBusProvider } from '@kb-labs/studio-event-bus';
+import { router } from './router';
+import { studioConfig } from './config/studio.config';
+import { DevToolsProvider } from './providers/devtools-provider';
+import { DevToolsPanel } from './components/devtools/devtools-panel';
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 30000,
+      refetchOnWindowFocus: false,
+    },
+  },
+});
+
+export function App() {
+  return (
+    <KBConfigProvider defaultTheme="light" storageKey="studio-ui-theme">
+      <SettingsProvider>
+        <AuthProvider>
+          <QueryClientProvider client={queryClient}>
+            <DataSourcesProvider>
+              <DevToolsProvider>
+                <RegistryV2Provider apiBaseUrl={studioConfig.apiBaseUrl}>
+                  <EventBusProvider>
+                    <RouterProvider router={router} />
+                    <ReactQueryDevtools initialIsOpen={false} />
+                  </EventBusProvider>
+                </RegistryV2Provider>
+                <DevToolsPanel />
+              </DevToolsProvider>
+            </DataSourcesProvider>
+          </QueryClientProvider>
+        </AuthProvider>
+      </SettingsProvider>
+    </KBConfigProvider>
+  );
+}

package/src/components/devtools/devtools-log-feed.module.css

@@ -0,0 +1,165 @@
+/* ── Log feed container ──────────────────────────────────────────────── */
+
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+/* ── Toolbar ─────────────────────────────────────────────────────────── */
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 5px 10px;
+  border-bottom: 1px solid var(--border-primary);
+  flex-shrink: 0;
+  min-height: 36px;
+  background: var(--bg-secondary);
+}
+
+.toolbarTitle {
+  flex-shrink: 0;
+}
+
+.toolbarSearch {
+  flex: 0 1 220px;
+}
+
+.toolbarChips {
+  flex: 1;
+  display: flex;
+  gap: 4px;
+  flex-wrap: wrap;
+}
+
+.chip {
+  cursor: pointer;
+  user-select: none;
+  font-size: 11px !important;
+}
+
+.clearBtn {
+  font-size: 11px;
+  color: var(--text-secondary);
+  cursor: pointer;
+  flex-shrink: 0;
+  user-select: none;
+  background: none;
+  border: none;
+  padding: 2px 4px;
+  border-radius: 3px;
+  transition: color 0.15s;
+}
+
+.clearBtn:hover {
+  color: var(--text-primary);
+}
+
+/* ── Log list ────────────────────────────────────────────────────────── */
+
+.logList {
+  flex: 1;
+  overflow-y: auto;
+  font-family: var(--font-mono, 'JetBrains Mono', 'Fira Code', 'Menlo', monospace);
+}
+
+/* ── Log row ─────────────────────────────────────────────────────────── */
+
+.row {
+  padding: 3px 8px;
+  border-bottom: 1px solid var(--border-primary);
+  cursor: default;
+}
+
+.row.clickable {
+  cursor: pointer;
+}
+
+.row.clickable:hover {
+  background: var(--bg-hover);
+}
+
+.row.expanded {
+  background: var(--bg-tertiary);
+}
+
+.rowError {
+  background: rgba(220, 38, 38, 0.06);
+  border-left: 2px solid var(--error);
+}
+
+.rowWarning {
+  background: rgba(245, 158, 11, 0.06);
+  border-left: 2px solid var(--warning);
+}
+
+.rowPending {
+  opacity: 0.6;
+}
+
+/* ── Status badge ────────────────────────────────────────────────────── */
+
+.statusBadge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 52px;
+  padding: 1px 5px;
+  border-radius: 3px;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+  flex-shrink: 0;
+}
+
+.statusSuccess {
+  background: rgba(22, 163, 74, 0.12);
+  color: var(--success);
+}
+
+.statusWarning {
+  background: rgba(245, 158, 11, 0.15);
+  color: var(--warning);
+}
+
+.statusError {
+  background: rgba(220, 38, 38, 0.12);
+  color: var(--error);
+}
+
+.statusPending {
+  background: var(--bg-tertiary);
+  color: var(--text-secondary);
+}
+
+/* ── Expand detail ───────────────────────────────────────────────────── */
+
+.detail {
+  padding: 4px 8px 4px 16px;
+  background: var(--bg-tertiary);
+}
+
+.detailPre {
+  margin: 0;
+  padding: 8px;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-primary);
+  border-radius: 4px;
+  font-size: 11px;
+  font-family: inherit;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: var(--text-primary);
+}
+
+/* ── Empty state ─────────────────────────────────────────────────────── */
+
+.empty {
+  padding: 24px 16px;
+  text-align: center;
+}

package/src/components/devtools/devtools-log-feed.tsx

@@ -0,0 +1,300 @@
+import * as React from 'react';
+import { useState, useMemo, useCallback } from 'react';
+import { UITag, UIBadge, UIFlex, UIInput, UITypographyText } from '@kb-labs/studio-ui-kit';
+import type { DevToolsChannel, MFEvent, EventBusEvent } from '@kb-labs/studio-devtools';
+import { useDevToolsStore } from '@/hooks/use-devtools-store';
+import styles from './devtools-log-feed.module.css';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+interface LogEntry {
+  id: string;
+  channelId: string;
+  channelLabel: string;
+  timestamp: number;
+  status: 'success' | 'warning' | 'error' | 'pending';
+  summary: string;
+  meta?: string;
+  raw: unknown;
+}
+
+// ---------------------------------------------------------------------------
+// Row builders
+// ---------------------------------------------------------------------------
+
+function buildMFEntry(event: MFEvent, channelLabel: string): LogEntry {
+  let status: LogEntry['status'] = 'pending';
+  if (event.status === 'success') {status = 'success';}
+  else if (event.status === 'warning') {status = 'warning';}
+  else if (event.status === 'error') {status = 'error';}
+
+  return {
+    id: event.id,
+    channelId: 'mf-events',
+    channelLabel,
+    timestamp: event.startedAt,
+    status,
+    summary: `${event.remoteName} / ${event.exposedModule}`,
+    meta: event.durationMs != null ? `${event.durationMs}ms` : undefined,
+    raw: event,
+  };
+}
+
+function buildEventBusEntry(event: EventBusEvent, channelLabel: string): LogEntry {
+  return {
+    id: event.id,
+    channelId: 'eventbus',
+    channelLabel,
+    timestamp: event.timestamp,
+    status: 'success',
+    summary: event.event,
+    meta: event.sourcePluginId !== '' ? event.sourcePluginId : undefined,
+    raw: event,
+  };
+}
+
+function buildGenericEntry(event: unknown, channelId: string, channelLabel: string): LogEntry {
+  const id = (event as { id?: string }).id ?? `${Date.now()}-${Math.random()}`;
+  const timestamp =
+    (event as { timestamp?: number }).timestamp ??
+    (event as { startedAt?: number }).startedAt ??
+    Date.now();
+  return {
+    id, channelId, channelLabel, timestamp,
+    status: 'success',
+    summary: JSON.stringify(event).slice(0, 80),
+    raw: event,
+  };
+}
+
+function channelToEntries(channel: DevToolsChannel): LogEntry[] {
+  return (channel.getEvents() as unknown[]).map((e) => {
+    if (channel.id === 'mf-events') {return buildMFEntry(e as MFEvent, channel.label);}
+    if (channel.id === 'eventbus') {return buildEventBusEntry(e as EventBusEvent, channel.label);}
+    return buildGenericEntry(e, channel.id, channel.label);
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Status badge
+// ---------------------------------------------------------------------------
+
+const STATUS_LABEL: Record<LogEntry['status'], string> = {
+  success: 'ok',
+  warning: 'warn',
+  error: 'error',
+  pending: '...',
+};
+
+function StatusBadge({ status }: { status: LogEntry['status'] }) {
+  const cls = {
+    success: styles.statusSuccess,
+    warning: styles.statusWarning,
+    error: styles.statusError,
+    pending: styles.statusPending,
+  }[status];
+  return <span className={`${styles.statusBadge} ${cls}`}>{STATUS_LABEL[status]}</span>;
+}
+
+// ---------------------------------------------------------------------------
+// Expanded detail
+// ---------------------------------------------------------------------------
+
+function ExpandedDetail({ entry }: { entry: LogEntry }) {
+  if (entry.channelId === 'mf-events') {
+    const mf = entry.raw as MFEvent;
+    return (
+      <div className={styles.detail}>
+        {mf.isDefaultUndefined && (
+          <UITag color="orange" style={{ marginBottom: 8 }}>
+            Missing default export — add <code>export default</code> to the component
+          </UITag>
+        )}
+        {mf.error && (
+          <pre className={styles.detailPre}>
+            {mf.error.message}
+            {mf.error.cause ? `\n\nCause: ${mf.error.cause}` : ''}
+          </pre>
+        )}
+        {!mf.isDefaultUndefined && !mf.error && (
+          <UITypographyText type="secondary" style={{ fontSize: 12 }}>
+            attempt {mf.attempt}
+          </UITypographyText>
+        )}
+      </div>
+    );
+  }
+
+  if (entry.channelId === 'eventbus') {
+    const eb = entry.raw as EventBusEvent;
+    return (
+      <div className={styles.detail}>
+        <pre className={styles.detailPre}>
+          {JSON.stringify(eb.payload, null, 2)}
+        </pre>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.detail}>
+      <pre className={styles.detailPre}>
+        {JSON.stringify(entry.raw, null, 2)}
+      </pre>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Log row
+// ---------------------------------------------------------------------------
+
+function LogRow({ entry }: { entry: LogEntry }) {
+  const [expanded, setExpanded] = useState(false);
+  const hasDetail =
+    entry.channelId === 'mf-events'
+      ? !!(entry.raw as MFEvent).error || !!(entry.raw as MFEvent).isDefaultUndefined
+      : entry.channelId === 'eventbus';
+
+  const time = new Date(entry.timestamp).toLocaleTimeString('en-GB', {
+    hour: '2-digit', minute: '2-digit', second: '2-digit',
+  });
+
+  const rowStatusCls = entry.status === 'error' ? styles.rowError
+    : entry.status === 'warning' ? styles.rowWarning
+    : entry.status === 'pending' ? styles.rowPending
+    : '';
+
+  return (
+    <>
+      <div
+        className={`${styles.row} ${rowStatusCls} ${hasDetail ? styles.clickable : ''} ${expanded ? styles.expanded : ''}`}
+        onClick={hasDetail ? () => setExpanded((v) => !v) : undefined}
+      >
+        <UIFlex align="center" gap={8}>
+          <span style={{ fontSize: 10, width: 8, color: 'var(--text-secondary)', flexShrink: 0 }}>
+            {hasDetail ? (expanded ? '▼' : '▶') : ''}
+          </span>
+          <span style={{ fontSize: 11, color: 'var(--text-secondary)', width: 64, flexShrink: 0 }}>
+            {time}
+          </span>
+          <UITag
+            color={entry.channelId === 'mf-events' ? 'blue' : 'purple'}
+            style={{ fontSize: 10, lineHeight: '16px', padding: '0 4px', flexShrink: 0 }}
+          >
+            {entry.channelLabel}
+          </UITag>
+          <StatusBadge status={entry.status} />
+          <span style={{ fontSize: 12, flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', color: 'var(--text-primary)' }}>
+            {entry.summary}
+            {(entry.raw as MFEvent).isDefaultUndefined && (
+              <UITag color="orange" style={{ marginLeft: 6, fontSize: 10 }}>default=undefined</UITag>
+            )}
+          </span>
+          {entry.meta && (
+            <span style={{ fontSize: 11, color: 'var(--text-secondary)', flexShrink: 0 }}>
+              {entry.meta}
+            </span>
+          )}
+        </UIFlex>
+      </div>
+      {expanded && hasDetail && <ExpandedDetail entry={entry} />}
+    </>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Main log feed
+// ---------------------------------------------------------------------------
+
+export function DevToolsLogFeed() {
+  const { channels, clear } = useDevToolsStore();
+  const [activeChannel, setActiveChannel] = useState<string>('all');
+  const [search, setSearch] = useState('');
+
+  const allEntries = useMemo<LogEntry[]>(() => {
+    const entries: LogEntry[] = [];
+    channels.forEach((ch) => entries.push(...channelToEntries(ch)));
+    return entries.sort((a, b) => a.timestamp - b.timestamp);
+  }, [channels]);
+
+  const filtered = useMemo(() => {
+    let result = activeChannel === 'all'
+      ? allEntries
+      : allEntries.filter((e) => e.channelId === activeChannel);
+    if (search.trim()) {
+      const q = search.toLowerCase();
+      result = result.filter((e) =>
+        e.summary.toLowerCase().includes(q) ||
+        e.channelLabel.toLowerCase().includes(q) ||
+        (e.meta ?? '').toLowerCase().includes(q),
+      );
+    }
+    return result;
+  }, [allEntries, activeChannel, search]);
+
+  const errorCount = allEntries.filter((e) => e.status === 'error' || e.status === 'warning').length;
+
+  const countFor = useCallback(
+    (id: string) => id === 'all' ? allEntries.length : allEntries.filter((e) => e.channelId === id).length,
+    [allEntries],
+  );
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.toolbar}>
+        <UIFlex align="center" gap={4} className={styles.toolbarTitle}>
+          <UITypographyText strong style={{ fontSize: 12 }}>DevTools</UITypographyText>
+          {errorCount > 0 && <UIBadge count={errorCount} size="small" />}
+        </UIFlex>
+
+        <UIInput
+          className={styles.toolbarSearch}
+          placeholder="Search..."
+          value={search}
+          onChange={(value) => setSearch(value)}
+          allowClear
+          size="small"
+        />
+
+        <div className={styles.toolbarChips}>
+          <UITag
+            className={styles.chip}
+            color={activeChannel === 'all' ? 'blue' : undefined}
+            onClick={() => setActiveChannel('all')}
+          >
+            All{countFor('all') > 0 ? ` ×${countFor('all')}` : ''}
+          </UITag>
+          {channels.map((ch) => (
+            <UITag
+              key={ch.id}
+              className={styles.chip}
+              color={activeChannel === ch.id ? 'blue' : undefined}
+              onClick={() => setActiveChannel(ch.id)}
+            >
+              {ch.label}{countFor(ch.id) > 0 ? ` ×${countFor(ch.id)}` : ''}
+            </UITag>
+          ))}
+        </div>
+
+        <button className={styles.clearBtn} onClick={clear}>Clear</button>
+      </div>
+
+      <div className={styles.logList}>
+        {filtered.length === 0 ? (
+          <div className={styles.empty}>
+            <UITypographyText type="secondary" style={{ fontSize: 12 }}>
+              {allEntries.length === 0
+                ? 'No events captured yet. Navigate to a plugin page to see MF events.'
+                : 'No events match the current filter.'}
+            </UITypographyText>
+          </div>
+        ) : (
+          filtered.map((entry) => <LogRow key={entry.id} entry={entry} />)
+        )}
+      </div>
+    </div>
+  );
+}