@kb-labs/studio-app 0.6.0

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

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

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

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

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