@kb-labs/studio-app 0.7.0 → 2.9.0

package/src/modules/auth/pages/login-page.module.css

@@ -1,113 +0,0 @@
-.page {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 100vh;
-  background: var(--bg-primary);
-  padding: 24px;
-}
-
-.card {
-  width: 100%;
-  max-width: 360px;
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-}
-
-/* ── Header ──────────────────────────────────────────────────────────── */
-
-.header {
-  text-align: center;
-}
-
-.logo {
-  width: 40px;
-  height: 40px;
-  border-radius: 10px;
-  background: var(--link);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 0 auto 16px;
-  color: #fff;
-}
-
-.title {
-  font-size: 20px;
-  font-weight: 700;
-  color: var(--text-primary);
-  font-family: var(--font-heading);
-  margin: 0 0 4px;
-}
-
-.subtitle {
-  font-size: 13px;
-  color: var(--text-secondary);
-  margin: 0;
-}
-
-/* ── Dev notice ──────────────────────────────────────────────────────── */
-
-.devNotice {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  padding: 10px 12px;
-  background: var(--accent-subtle);
-  border: 1px solid var(--link);
-  border-radius: 8px;
-  font-size: 12px;
-  color: var(--link);
-  line-height: 1.4;
-  opacity: 0.85;
-}
-
-.devNoticeIcon {
-  flex-shrink: 0;
-  margin-top: 1px;
-}
-
-/* ── Form ────────────────────────────────────────────────────────────── */
-
-.form {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.label {
-  display: block;
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--text-secondary);
-  margin-bottom: 6px;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-
-/* ── Divider ─────────────────────────────────────────────────────────── */
-
-.divider {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  font-size: 11px;
-  color: var(--text-tertiary);
-}
-
-.divider::before,
-.divider::after {
-  content: '';
-  flex: 1;
-  height: 1px;
-  background: var(--border-primary);
-}
-
-/* ── Footer ──────────────────────────────────────────────────────────── */
-
-.footer {
-  text-align: center;
-  font-size: 11px;
-  color: var(--text-tertiary);
-}

package/src/modules/auth/pages/login-page.tsx

@@ -1,80 +0,0 @@
-import * as React from 'react';
-import { useNavigate } from 'react-router-dom';
-import { useAuth, type UserRole } from '@/providers/auth-provider';
-import { UIButton, UISelect, UIMessage } from '@kb-labs/studio-ui-kit';
-import { Boxes, ShieldAlert } from 'lucide-react';
-import styles from './login-page.module.css';
-
-const ROLE_OPTIONS = [
-  { label: 'Viewer — read-only access', value: 'viewer' },
-  { label: 'Operator — manage system', value: 'operator' },
-  { label: 'Admin — full access', value: 'admin' },
-];
-
-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 authentication will be available in a future release.');
-  };
-
-  return (
-    <div className={styles.page}>
-      <div className={styles.card}>
-
-        {/* Header */}
-        <div className={styles.header}>
-          <div className={styles.logo}>
-            <Boxes size={22} />
-          </div>
-          <h1 className={styles.title}>KB Labs Studio</h1>
-          <p className={styles.subtitle}>Development platform</p>
-        </div>
-
-        {/* Dev mode notice */}
-        <div className={styles.devNotice}>
-          <ShieldAlert size={14} className={styles.devNoticeIcon} />
-          <span>Development mode — no password required. Select a role to continue.</span>
-        </div>
-
-        {/* Form */}
-        <div className={styles.form}>
-          <div>
-            <label className={styles.label}>Role</label>
-            <UISelect
-              value={selectedRole}
-              onChange={(v) => setSelectedRole(v as UserRole)}
-              style={{ width: '100%' }}
-              options={ROLE_OPTIONS}
-            />
-          </div>
-
-          <UIButton
-            variant="primary"
-            size="large"
-            block
-            onClick={handleLogin}
-          >
-            Sign in
-          </UIButton>
-
-          <div className={styles.divider}>or</div>
-
-          <UIButton size="large" block onClick={handleSSOLogin}>
-            Continue with SSO
-          </UIButton>
-        </div>
-
-        {/* Footer */}
-        <p className={styles.footer}>© 2025 KB Labs · Development Preview</p>
-      </div>
-    </div>
-  );
-}

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

@@ -1,24 +0,0 @@
-/**
- * @module @kb-labs/studio-app/modules/auth/routes
- * Authentication module routing configuration
- */
-
-import type { RouteObject } from 'react-router-dom';
-import { LoginPage } from '../pages/login-page';
-import { ErrorBoundary } from '../../../components/error-boundary';
-
-// Route paths
-const PATHS = {
-  LOGIN: '/login',
-} as const;
-
-/**
- * Auth routes (no navigation - these are standalone pages)
- */
-export const authRoutes: RouteObject[] = [
-  {
-    path: PATHS.LOGIN,
-    element: <LoginPage />,
-    errorElement: <ErrorBoundary />,
-  },
-];

package/src/modules/dashboard/components/ActivityTimelineWidget.tsx

@@ -1,199 +0,0 @@
-import React, { useState } from 'react';
-import { UICard, UISegmented } from '@kb-labs/studio-ui-kit';
-import { UIAreaChart, useChartColors } from '@kb-labs/studio-ui-kit';
-import { useDataSources } from '../../../providers/data-sources-provider';
-import { useMetricsHistory } from '@kb-labs/studio-data-client';
-
-type TimeRange = '1m' | '5m' | '10m' | '30m';
-
-const TIME_RANGE_CONFIG = {
-  '1m': { label: '1 min' },
-  '5m': { label: '5 min' },
-  '10m': { label: '10 min' },
-  '30m': { label: '30 min' },
-};
-
-export function ActivityTimelineWidget() {
-  const sources = useDataSources();
-  const palette = useChartColors();
-  const [timeRange, setTimeRange] = useState<TimeRange>('10m');
-
-  // Get colors from palette for legend
-  const colorMap = palette.mapColors([{ type: 'Requests' }, { type: 'Errors' }], 'type');
-  const requestsColor = colorMap['Requests'];
-  const errorsColor = colorMap['Errors'];
-
-  // Fetch requests and errors history
-  const requestsQuery = useMetricsHistory(sources.observability, {
-    metric: 'requests',
-    range: timeRange,
-    interval: '5s',
-  });
-
-  const errorsQuery = useMetricsHistory(sources.observability, {
-    metric: 'errors',
-    range: timeRange,
-    interval: '5s',
-  });
-
-  // Transform data for chart
-  const chartData = React.useMemo(() => {
-    if (!requestsQuery.data || !errorsQuery.data) {return [];}
-
-    // Merge requests and errors by timestamp
-    const dataMap = new Map<number, { time: string; Requests: number; Errors: number }>();
-
-    for (const point of requestsQuery.data) {
-      const time = new Date(point.timestamp).toLocaleTimeString('en-US', {
-        hour12: false,
-        hour: '2-digit',
-        minute: '2-digit',
-        second: '2-digit',
-      });
-      dataMap.set(point.timestamp, { time, Requests: point.value, Errors: 0 });
-    }
-
-    for (const point of errorsQuery.data) {
-      const existing = dataMap.get(point.timestamp);
-      if (existing) {
-        existing.Errors = point.value;
-      }
-    }
-
-    return Array.from(dataMap.values());
-  }, [requestsQuery.data, errorsQuery.data]);
-
-  // Current values for legend
-  const currentRequests = requestsQuery.data?.[requestsQuery.data.length - 1]?.value ?? 0;
-  const currentErrors = errorsQuery.data?.[errorsQuery.data.length - 1]?.value ?? 0;
-
-  const config = {
-    xField: 'time',
-    yField: 'value',
-    colorField: 'type',
-    height: 250,
-    smooth: true,
-    style: {
-      fillOpacity: 0.3,
-    },
-    axis: {
-      x: {
-        label: {
-          autoRotate: true,
-        },
-      },
-      y: {
-        label: {
-          formatter: (v: string) => {
-            const num = Number(v);
-            if (num >= 1000) {return `${(num / 1000).toFixed(1)}K`;}
-            return num.toLocaleString();
-          },
-        },
-      },
-    },
-    legend: false,
-    tooltip: {
-      title: (d: any) => d.time,
-      items: [
-        (d: any) => ({
-          name: d.type,
-          value: d.value?.toLocaleString() ?? 0,
-          color: colorMap[d.type],
-        }),
-      ],
-    },
-  };
-
-  // Transform to multi-series format
-  const multiSeriesData = chartData.flatMap(point => [
-    { time: point.time, type: 'Requests', value: point.Requests },
-    { time: point.time, type: 'Errors', value: point.Errors },
-  ]);
-
-  const isLoading = requestsQuery.isLoading || errorsQuery.isLoading;
-  const hasError = requestsQuery.isError || errorsQuery.isError;
-
-  return (
-    <UICard
-      title={
-        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-          <span>Requests & Errors</span>
-          <UISegmented
-            options={Object.entries(TIME_RANGE_CONFIG).map(([key, cfg]) => ({
-              label: cfg.label,
-              value: key,
-            }))}
-            value={timeRange}
-            onChange={(value) => setTimeRange(value as TimeRange)}
-            size="small"
-          />
-        </div>
-      }
-      styles={{ body: { padding: '16px' } }}
-    >
-      {isLoading ? (
-        <div style={{
-          height: 250,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          color: 'var(--text-tertiary)',
-        }}>
-          Loading metrics...
-        </div>
-      ) : hasError ? (
-        <div style={{
-          height: 250,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          color: 'var(--error)',
-        }}>
-          Failed to load metrics
-        </div>
-      ) : chartData.length > 0 ? (
-        <div>
-          {/* Custom Legend */}
-          <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 12, gap: 16 }}>
-            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-              <span style={{
-                display: 'inline-block',
-                width: 10,
-                height: 10,
-                borderRadius: '50%',
-                backgroundColor: requestsColor,
-              }} />
-              <span style={{ fontSize: 13, fontWeight: 500 }}>
-                Requests ({currentRequests.toLocaleString()})
-              </span>
-            </div>
-            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-              <span style={{
-                display: 'inline-block',
-                width: 10,
-                height: 10,
-                borderRadius: '50%',
-                backgroundColor: errorsColor,
-              }} />
-              <span style={{ fontSize: 13, fontWeight: 500 }}>
-                Errors ({currentErrors.toLocaleString()})
-              </span>
-            </div>
-          </div>
-          <UIAreaChart {...config} data={multiSeriesData} />
-        </div>
-      ) : (
-        <div style={{
-          height: 250,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          color: 'var(--text-tertiary)',
-        }}>
-          No data available
-        </div>
-      )}
-    </UICard>
-  );
-}