@kb-labs/studio-app 0.7.0 → 2.8.0

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

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

@@ -1,300 +0,0 @@
-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>
-  );
-}

package/src/components/devtools/devtools-panel.module.css

@@ -1,121 +0,0 @@
-/* ── Toggle button ───────────────────────────────────────────────────── */
-
-.toggleBtn {
-  position: fixed;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 9999;
-  transition: bottom 0.2s ease;
-  width: 96px;
-  height: 22px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  padding: 0 10px;
-  background: var(--bg-spotlight, #1f1f1f);
-  color: var(--text-inverse);
-  border: none;
-  cursor: pointer;
-  font-size: 11px;
-  font-weight: 500;
-  letter-spacing: 0.02em;
-  box-shadow: 0 -2px 8px var(--shadow-elevated);
-  user-select: none;
-  border-radius: 6px 6px 0 0;
-}
-
-.toggleBtn.open {
-  border-radius: 0 0 6px 6px;
-}
-
-.toggleArrow {
-  width: 0;
-  height: 0;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-  flex-shrink: 0;
-}
-
-.toggleArrow.arrowUp {
-  border-bottom: 5px solid var(--text-inverse);
-}
-
-.toggleArrow.arrowDown {
-  border-top: 5px solid var(--text-inverse);
-}
-
-/* ── Floating panel ──────────────────────────────────────────────────── */
-
-.panel {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 9998;
-  background: var(--bg-secondary);
-  border-top: 1px solid var(--border-primary);
-  box-shadow: 0 -4px 20px var(--shadow-elevated);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-/* ── Drag handle ─────────────────────────────────────────────────────── */
-
-.dragHandle {
-  height: 6px;
-  cursor: ns-resize;
-  background: transparent;
-  flex-shrink: 0;
-  position: relative;
-}
-
-.dragGrip {
-  position: absolute;
-  top: 2px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 36px;
-  height: 3px;
-  border-radius: 2px;
-  background: var(--border-secondary);
-  pointer-events: none;
-}
-
-/* ── Top bar ─────────────────────────────────────────────────────────── */
-
-.topBar {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 2px;
-  padding: 0 8px;
-  height: 28px;
-  border-bottom: 1px solid var(--border-primary);
-  flex-shrink: 0;
-}
-
-.iconBtn {
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 2px 6px;
-  font-size: 13px;
-  color: var(--text-secondary);
-  border-radius: 4px;
-  line-height: 1;
-  transition: background 0.15s, color 0.15s;
-}
-
-.iconBtn:hover {
-  background: var(--bg-hover);
-  color: var(--text-primary);
-}
-
-/* ── Content ─────────────────────────────────────────────────────────── */
-
-.content {
-  flex: 1;
-  overflow: hidden;
-}

package/src/components/devtools/devtools-panel.tsx

@@ -1,115 +0,0 @@
-import * as React from 'react';
-import { useState, useRef, useCallback, useEffect } from 'react';
-import { UIBadge } from '@kb-labs/studio-ui-kit';
-import { useDevToolsStore } from '@/hooks/use-devtools-store';
-import { useFeatureFlags } from '@/hooks/use-feature-flags';
-import { DevToolsLogFeed } from './devtools-log-feed';
-import styles from './devtools-panel.module.css';
-
-const MIN_HEIGHT = 120;
-const DEFAULT_HEIGHT = 280;
-
-export function DevToolsPanel() {
-  const { isEnabled } = useFeatureFlags();
-  if (!isEnabled('devtools-panel')) {return null;}
-  return <DevToolsPanelInner />;
-}
-
-function DevToolsPanelInner() {
-  const { channels } = useDevToolsStore();
-  const [open, setOpen] = useState(false);
-  const [maximized, setMaximized] = useState(false);
-  const [height, setHeight] = useState(DEFAULT_HEIGHT);
-
-  const errorCount = React.useMemo(() => {
-    let count = 0;
-    channels.forEach((ch) => {
-      (ch.getEvents() as Array<{ status?: string }>).forEach((e) => {
-        if (e.status === 'error' || e.status === 'warning') {count++;}
-      });
-    });
-    return count;
-  }, [channels]);
-
-  // ── Drag to resize ──────────────────────────────────────────────────────
-  const dragRef = useRef<{ startY: number; startH: number } | null>(null);
-
-  const onResizeMouseDown = useCallback((e: React.MouseEvent) => {
-    e.preventDefault();
-    dragRef.current = { startY: e.clientY, startH: height };
-
-    const onMove = (ev: MouseEvent) => {
-      if (!dragRef.current) {return;}
-      const delta = dragRef.current.startY - ev.clientY;
-      setHeight(Math.max(MIN_HEIGHT, dragRef.current.startH + delta));
-      setMaximized(false);
-    };
-    const onUp = () => {
-      dragRef.current = null;
-      window.removeEventListener('mousemove', onMove);
-      window.removeEventListener('mouseup', onUp);
-    };
-    window.addEventListener('mousemove', onMove);
-    window.addEventListener('mouseup', onUp);
-  }, [height]);
-
-  // ── Keyboard shortcut: Ctrl+Shift+D ────────────────────────────────────
-  useEffect(() => {
-    const handler = (e: KeyboardEvent) => {
-      if (e.ctrlKey && e.shiftKey && e.key === 'D') {
-        e.preventDefault();
-        setOpen((v) => !v);
-      }
-    };
-    window.addEventListener('keydown', handler);
-    return () => window.removeEventListener('keydown', handler);
-  }, []);
-
-  const panelHeight = maximized ? 'calc(100vh - 48px)' : height;
-  const toggleBottom = open ? (maximized ? 'calc(100vh - 48px)' : height) : 0;
-
-  return (
-    <>
-      {/* Toggle button */}
-      <button
-        className={`${styles.toggleBtn} ${open ? styles.open : ''}`}
-        style={{ bottom: toggleBottom }}
-        onClick={() => setOpen((v) => !v)}
-      >
-        <span className={`${styles.toggleArrow} ${open ? styles.arrowDown : styles.arrowUp}`} />
-        <span>DevTools</span>
-        {errorCount > 0 && <UIBadge count={errorCount} size="small" style={{ marginLeft: 2 }} />}
-      </button>
-
-      {/* Floating panel */}
-      {open && (
-        <div className={styles.panel} style={{ height: panelHeight }}>
-          <div className={styles.dragHandle} onMouseDown={onResizeMouseDown}>
-            <div className={styles.dragGrip} />
-          </div>
-
-          <div className={styles.topBar}>
-            <button
-              className={styles.iconBtn}
-              onClick={() => setMaximized((v) => !v)}
-              title={maximized ? 'Restore' : 'Maximize'}
-            >
-              {maximized ? '⊡' : '⊞'}
-            </button>
-            <button
-              className={styles.iconBtn}
-              onClick={() => setOpen(false)}
-              title="Close (Ctrl+Shift+D)"
-            >
-              ✕
-            </button>
-          </div>
-
-          <div className={styles.content}>
-            <DevToolsLogFeed />
-          </div>
-        </div>
-      )}
-    </>
-  );
-}