@polderlabs/bizar 7.0.2 → 8.0.0

package/bizar-dash/src/web/v8/shell/Topbar.tsx

@@ -0,0 +1,113 @@
+import { type ReactNode } from 'react';
+import { Box } from '../ui/primitives/Box.js';
+import { Inline } from '../ui/primitives/Inline.js';
+import { Cluster } from '../ui/primitives/Cluster.js';
+import { Separator } from '../ui/primitives/Separator.js';
+import { ThemeToggle, DensityToggle } from '../ui/theme/ThemeToggle.js';
+
+/**
+ * Topbar — the 56px horizontal bar at the top of the v8 shell.
+ *
+ * Slots (left → right):
+ *   - brand:    Bizar mark + workspace selector
+ *   - center:   breadcrumb / page title (filled by parent via `center`)
+ *   - actions:  search trigger, command palette hint, theme toggle, density toggle, notifications
+ *
+ * The topbar is sticky. Border lives at the bottom only (per DESIGN.md §7).
+ *
+ * This is the foundation shell — concrete slot content is wired in Sprint S4
+ * (the navigation sprint). For now, slots are accepted as props so the v8
+ * root can render an empty topbar that proves the layout works.
+ */
+
+export interface TopbarProps {
+  brand?: ReactNode;
+  center?: ReactNode;
+  /** Right-aligned action cluster. */
+  actions?: ReactNode;
+  /** Status pill (live/offline). Lives in the right cluster. */
+  status?: ReactNode;
+}
+
+export function Topbar({ brand, center, actions, status }: TopbarProps): JSX.Element {
+  return (
+    <Box
+      as="header"
+      role="banner"
+      className="v8-topbar"
+      style={{
+        height: 'var(--topbar-h)',
+        flexShrink: 0,
+        background: 'var(--bg)',
+        borderBottom: '1px solid var(--border)',
+        paddingLeft: 'var(--space-4)',
+        paddingRight: 'var(--space-4)',
+      }}
+    >
+      <Inline align="center" justify="between" gap={4} style={{ height: '100%' }}>
+        {/* left: brand */}
+        <Cluster align="center" gap={3}>
+          {brand ?? <BrandPlaceholder />}
+        </Cluster>
+
+        {/* center: page title / breadcrumb */}
+        <Box style={{ flex: 1, minWidth: 0 }}>{center ?? null}</Box>
+
+        {/* right: actions cluster */}
+        <Cluster align="center" gap={2}>
+          {actions ?? <DefaultActions status={status} />}
+        </Cluster>
+      </Inline>
+    </Box>
+  );
+}
+
+function BrandPlaceholder(): JSX.Element {
+  return (
+    <Inline align="center" gap={2}>
+      <Box
+        style={{
+          width: 24,
+          height: 24,
+          borderRadius: 'var(--radius-sm)',
+          background: 'var(--accent)',
+          color: 'var(--fg-on-accent)',
+          fontWeight: 700,
+          fontSize: 'var(--fs-14)',
+          lineHeight: '24px',
+          textAlign: 'center',
+        }}
+        aria-hidden="true"
+      >
+        ᛒ
+      </Box>
+      <Box style={{ fontWeight: 600, fontSize: 'var(--fs-14)' }}>Bizar</Box>
+      <Separator orientation="vertical" style={{ height: 16 }} />
+      <Box style={{ fontSize: 'var(--fs-13)', color: 'var(--fg-muted)' }}>workspace ▾</Box>
+    </Inline>
+  );
+}
+
+function DefaultActions({ status }: { status?: ReactNode }): JSX.Element {
+  return (
+    <>
+      {status ?? (
+        <Inline align="center" gap={1} style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>
+          <Box
+            aria-hidden="true"
+            style={{
+              width: 8,
+              height: 8,
+              borderRadius: 'var(--radius-pill)',
+              background: 'var(--success)',
+            }}
+          />
+          <span>live</span>
+        </Inline>
+      )}
+      <Separator orientation="vertical" style={{ height: 16 }} />
+      <DensityToggle />
+      <ThemeToggle />
+    </>
+  );
+}

package/bizar-dash/src/web/v8/shell/index.ts

@@ -0,0 +1,15 @@
+/**
+ * v8 shell barrel.
+ *
+ * The shell owns the topbar + sidebar + main content layout. Routing
+ * lives in `../App.tsx`; routing only renders shell slots, not vice versa.
+ */
+export { AppShell, type AppShellProps } from './AppShell.js';
+export { Topbar, type TopbarProps } from './Topbar.js';
+export {
+  Sidebar,
+  type SidebarProps,
+  type SidebarSection,
+  type SidebarItem,
+} from './Sidebar.js';
+export { StatusBar, type StatusBarProps, type StatusBarTone } from './StatusBar.js';

package/bizar-dash/src/web/v8/ui/activity/ActivityFeed.tsx

@@ -0,0 +1,137 @@
+import { forwardRef, type OlHTMLAttributes, type ReactNode } from 'react';
+import { cx } from '../utils/cx.js';
+
+/**
+ * ActivityFeed — vertical feed of recent events (the home/dashboard view).
+ *
+ * Each item: icon + title + optional description + meta (relative time).
+ * Tone colors the leading icon chip (mirrors the tone vocabulary used in
+ * the rest of the v8 library).
+ *
+ * Renders as `<ol>` so screen readers announce item count.
+ */
+
+export type ActivityTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+
+export interface ActivityItem {
+  id: string;
+  icon?: ReactNode;
+  title: ReactNode;
+  description?: ReactNode;
+  meta?: ReactNode;
+  tone?: ActivityTone;
+}
+
+export interface ActivityFeedProps extends OlHTMLAttributes<HTMLOListElement> {
+  items: readonly ActivityItem[];
+  /** Optional empty-state node when `items` is empty. */
+  empty?: ReactNode;
+}
+
+const TONE_BG: Record<ActivityTone, string> = {
+  neutral: 'var(--fg-subtle)',
+  info: 'var(--info)',
+  success: 'var(--success)',
+  warning: 'var(--warning)',
+  danger: 'var(--danger)',
+};
+
+export const ActivityFeed = forwardRef<HTMLOListElement, ActivityFeedProps>(function ActivityFeed(
+  props,
+  ref,
+) {
+  const { items, empty, className, ...rest } = props;
+  if (items.length === 0 && empty !== undefined) {
+    return <>{empty}</>;
+  }
+  return (
+    <ol
+      ref={ref}
+      className={cx('v8-activity-feed', className)}
+      style={{
+        listStyle: 'none',
+        margin: 0,
+        padding: 0,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 'var(--space-2)',
+      }}
+      {...rest}
+    >
+      {items.map((item) => {
+        const tone = item.tone ?? 'neutral';
+        return (
+          <li
+            key={item.id}
+            style={{
+              display: 'flex',
+              alignItems: 'flex-start',
+              gap: 'var(--space-3)',
+              padding: 'var(--space-3)',
+              background: 'var(--surface-0)',
+              border: '1px solid var(--border)',
+              borderRadius: 'var(--radius)',
+            }}
+          >
+            <span
+              aria-hidden="true"
+              style={{
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                width: 24,
+                height: 24,
+                borderRadius: 'var(--radius-sm)',
+                background: `color-mix(in oklch, ${TONE_BG[tone]} 14%, transparent)`,
+                color: TONE_BG[tone],
+                flexShrink: 0,
+              }}
+            >
+              {item.icon}
+            </span>
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'baseline',
+                  justifyContent: 'space-between',
+                  gap: 'var(--space-2)',
+                }}
+              >
+                <div style={{ fontSize: 'var(--fs-13)', fontWeight: 500, color: 'var(--fg)', minWidth: 0 }}>
+                  {item.title}
+                </div>
+                {item.meta !== undefined && (
+                  <div
+                    style={{
+                      fontSize: 'var(--fs-12)',
+                      color: 'var(--fg-subtle)',
+                      flexShrink: 0,
+                      fontVariantNumeric: 'tabular-nums',
+                    }}
+                  >
+                    {item.meta}
+                  </div>
+                )}
+              </div>
+              {item.description !== undefined && (
+                <div
+                  style={{
+                    fontSize: 'var(--fs-12)',
+                    color: 'var(--fg-muted)',
+                    marginTop: 2,
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                  }}
+                >
+                  {item.description}
+                </div>
+              )}
+            </div>
+          </li>
+        );
+      })}
+    </ol>
+  );
+});

package/bizar-dash/src/web/v8/ui/agents/AgentActivity.tsx

@@ -0,0 +1,101 @@
+import { forwardRef, type OlHTMLAttributes, type ReactNode } from 'react';
+import { cx } from '../utils/cx.js';
+
+/**
+ * AgentActivity — per-agent feed of recent actions (run started, tool
+ * called, message received, etc).
+ *
+ * Used inside the Agent detail view.
+ */
+
+export interface AgentActivityItem {
+  id: string;
+  /** Icon (lucide). */
+  icon?: ReactNode;
+  title: ReactNode;
+  description?: ReactNode;
+  meta?: ReactNode;
+  tone?: 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+}
+
+export interface AgentActivityProps extends OlHTMLAttributes<HTMLOListElement> {
+  items: readonly AgentActivityItem[];
+}
+
+const TONE_BG = {
+  neutral: 'var(--fg-subtle)',
+  info: 'var(--info)',
+  success: 'var(--success)',
+  warning: 'var(--warning)',
+  danger: 'var(--danger)',
+} as const;
+
+export const AgentActivity = forwardRef<HTMLOListElement, AgentActivityProps>(function AgentActivity(
+  props,
+  ref,
+) {
+  const { items, className, ...rest } = props;
+  return (
+    <ol
+      ref={ref}
+      className={cx('v8-agent-activity', className)}
+      style={{
+        listStyle: 'none',
+        margin: 0,
+        padding: 0,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 'var(--space-2)',
+      }}
+      {...rest}
+    >
+      {items.map((item) => {
+        const tone = item.tone ?? 'neutral';
+        return (
+          <li
+            key={item.id}
+            style={{
+              display: 'flex',
+              alignItems: 'flex-start',
+              gap: 'var(--space-3)',
+              padding: 'var(--space-3)',
+              background: 'var(--surface-0)',
+              border: '1px solid var(--border)',
+              borderRadius: 'var(--radius)',
+            }}
+          >
+            <span
+              aria-hidden="true"
+              style={{
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                width: 22,
+                height: 22,
+                borderRadius: 'var(--radius-sm)',
+                background: `color-mix(in oklch, ${TONE_BG[tone]} 14%, transparent)`,
+                color: TONE_BG[tone],
+                flexShrink: 0,
+              }}
+            >
+              {item.icon}
+            </span>
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 'var(--space-2)' }}>
+                <div style={{ fontSize: 'var(--fs-13)', fontWeight: 500, color: 'var(--fg)' }}>{item.title}</div>
+                {item.meta !== undefined && (
+                  <div style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-subtle)', flexShrink: 0 }}>{item.meta}</div>
+                )}
+              </div>
+              {item.description !== undefined && (
+                <div style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)', marginTop: 2 }}>
+                  {item.description}
+                </div>
+              )}
+            </div>
+          </li>
+        );
+      })}
+    </ol>
+  );
+});

package/bizar-dash/src/web/v8/ui/agents/AgentCard.tsx

@@ -0,0 +1,158 @@
+import { type ReactNode } from 'react';
+import { Activity, Zap } from 'lucide-react';
+import { cx } from '../utils/cx.js';
+import { Avatar } from '../data/Avatar.js';
+import { Badge } from '../data/Badge.js';
+import { Sparkline } from '../data/Sparkline.js';
+
+/**
+ * AgentCard — agent tile for the Agents roster.
+ *
+ * Per PLAN.md, agents are the orchestrator's running entities. Each card
+ * shows: name, status (idle/busy/error), role (description), last activity,
+ * token usage sparkline, current task title.
+ */
+
+export type AgentStatus = 'idle' | 'busy' | 'error' | 'paused';
+
+export interface AgentCardProps {
+  id: string;
+  name: string;
+  role: string;
+  status: AgentStatus;
+  /** Last activity label ("2m ago", "Just now"). */
+  lastActivity?: string;
+  /** Tokens-per-minute sparkline data (last 20 buckets). */
+  tpmHistory?: readonly number[];
+  /** Current task the agent is working on. */
+  currentTask?: string;
+  /** Number of tasks completed in the last 24h. */
+  tasksToday?: number;
+  /** Click handler — opens agent detail. */
+  onOpen?: () => void;
+  /** Custom badges row (model, owner). */
+  badges?: ReactNode;
+  className?: string;
+}
+
+const STATUS_LABEL: Record<AgentStatus, string> = {
+  idle: 'Idle',
+  busy: 'Busy',
+  error: 'Error',
+  paused: 'Paused',
+};
+
+const STATUS_TONE: Record<AgentStatus, 'success' | 'info' | 'danger' | 'neutral'> = {
+  idle: 'neutral',
+  busy: 'info',
+  error: 'danger',
+  paused: 'neutral',
+};
+
+const STATUS_FG: Record<AgentStatus, string> = {
+  idle: 'var(--fg-subtle)',
+  busy: 'var(--info)',
+  error: 'var(--danger)',
+  paused: 'var(--warning)',
+};
+
+export function AgentCard(props: AgentCardProps) {
+  const {
+    name,
+    role,
+    status,
+    lastActivity,
+    tpmHistory,
+    currentTask,
+    tasksToday,
+    onOpen,
+    badges,
+    className,
+  } = props;
+
+  return (
+    <button
+      type="button"
+      onClick={onOpen}
+      className={cx('v8-agent-card', `v8-agent-card--${status}`, className)}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 'var(--space-3)',
+        width: '100%',
+        padding: 'var(--space-4)',
+        background: 'var(--surface-1)',
+        border: '1px solid var(--border)',
+        borderRadius: 'var(--radius-lg)',
+        textAlign: 'left',
+        cursor: 'pointer',
+        font: 'inherit',
+        color: 'inherit',
+        transition: 'border-color var(--motion-fast) var(--ease-out)',
+      }}
+    >
+      <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)' }}>
+        <Avatar name={name} status={status === 'busy' ? 'busy' : status === 'error' ? 'busy' : status === 'idle' ? 'online' : 'away'} />
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <div style={{ fontSize: 'var(--fs-14)', fontWeight: 600, color: 'var(--fg)', lineHeight: 'var(--lh-snug)' }}>
+            {name}
+          </div>
+          <div style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)', marginTop: 2 }}>
+            {role}
+          </div>
+        </div>
+        <Badge tone={STATUS_TONE[status]} dot>
+          {STATUS_LABEL[status]}
+        </Badge>
+      </div>
+      {currentTask !== undefined && (
+        <div
+          style={{
+            fontSize: 'var(--fs-13)',
+            color: 'var(--fg)',
+            background: 'var(--surface-0)',
+            border: '1px solid var(--border)',
+            borderRadius: 'var(--radius-sm)',
+            padding: 'var(--space-2) var(--space-3)',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+          }}
+          title={currentTask}
+        >
+          {currentTask}
+        </div>
+      )}
+      <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)', fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>
+        {lastActivity !== undefined && (
+          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
+            <Activity size={12} aria-hidden="true" style={{ color: STATUS_FG[status] }} />
+            {lastActivity}
+          </span>
+        )}
+        {tasksToday !== undefined && (
+          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
+            <Zap size={12} aria-hidden="true" />
+            {tasksToday} today
+          </span>
+        )}
+      </div>
+      {tpmHistory !== undefined && tpmHistory.length > 1 && (
+        <div style={{ marginTop: 'var(--space-1)' }}>
+          <Sparkline
+            data={tpmHistory}
+            width={240}
+            height={28}
+            stroke={STATUS_FG[status]}
+          />
+        </div>
+      )}
+      {badges !== undefined && (
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>{badges}</div>
+      )}
+      <style>{`
+        .v8-agent-card:hover { border-color: var(--accent); }
+      `}</style>
+    </button>
+  );
+}

package/bizar-dash/src/web/v8/ui/controls/Button.tsx

@@ -0,0 +1,141 @@
+import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { Loader2 } from 'lucide-react';
+import { cx } from '../utils/cx.js';
+
+/**
+ * Button — the v8 primary action surface.
+ *
+ * Variants:
+ *   - primary    — the only loud button. Use sparingly (DESIGN.md §1).
+ *   - secondary  — bordered, default for most actions.
+ *   - ghost      — text-only, used inside surfaces (toolbars, cards).
+ *   - danger     — destructive actions.
+ *
+ * Sizes:
+ *   - sm (28px), md (32px), lg (40px), icon (32px square)
+ *
+ * Loading: shows a spinner and disables interaction. Default label stays visible
+ * so the button doesn't reflow.
+ */
+
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger' | 'outline';
+export type ButtonSize = 'sm' | 'md' | 'lg' | 'icon';
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  /** When true, render as a Slot so the child <a> / <Link> inherits styling. */
+  asChild?: boolean;
+  loading?: boolean;
+  leftIcon?: ReactNode;
+  rightIcon?: ReactNode;
+  fullWidth?: boolean;
+}
+
+const SIZE: Record<ButtonSize, { h: number; px: number; fs: string }> = {
+  sm: { h: 28, px: 10, fs: 'var(--fs-12)' },
+  md: { h: 32, px: 14, fs: 'var(--fs-13)' },
+  lg: { h: 40, px: 18, fs: 'var(--fs-14)' },
+  icon: { h: 32, px: 0, fs: 'var(--fs-13)' },
+};
+
+const VARIANT_BG: Record<ButtonVariant, string> = {
+  primary: 'var(--accent)',
+  secondary: 'var(--surface-1)',
+  ghost: 'transparent',
+  danger: 'var(--danger)',
+  outline: 'transparent',
+};
+
+const VARIANT_FG: Record<ButtonVariant, string> = {
+  primary: 'var(--fg-on-accent)',
+  secondary: 'var(--fg)',
+  ghost: 'var(--fg-muted)',
+  danger: 'var(--fg-on-accent)',
+  outline: 'var(--fg)',
+};
+
+const VARIANT_BORDER: Record<ButtonVariant, string> = {
+  primary: 'transparent',
+  secondary: 'var(--border)',
+  ghost: 'transparent',
+  danger: 'transparent',
+  outline: 'var(--border)',
+};
+
+const VARIANT_HOVER_BG: Record<ButtonVariant, string> = {
+  primary: 'var(--accent-hover)',
+  secondary: 'var(--surface-2)',
+  ghost: 'var(--surface-1)',
+  danger: 'color-mix(in oklch, var(--danger), black 10%)',
+  outline: 'var(--surface-1)',
+};
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(props, ref) {
+  const {
+    variant = 'secondary',
+    size = 'md',
+    asChild,
+    loading,
+    disabled,
+    leftIcon,
+    rightIcon,
+    fullWidth,
+    children,
+    className,
+    style,
+    type,
+    ...rest
+  } = props;
+
+  const Comp = (asChild ? Slot : 'button') as React.ElementType;
+  const sz = SIZE[size];
+  const isDisabled = disabled === true || loading === true;
+
+  const computedStyle = {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 'var(--space-2)',
+    height: sz.h,
+    paddingLeft: sz.px,
+    paddingRight: sz.px,
+    width: fullWidth === true ? '100%' : undefined,
+    fontSize: sz.fs,
+    fontWeight: 500,
+    lineHeight: 1,
+    letterSpacing: 'var(--tracking-base)',
+    background: VARIANT_BG[variant],
+    color: VARIANT_FG[variant],
+    border: '1px solid',
+    borderColor: VARIANT_BORDER[variant],
+    borderRadius: 'var(--radius-sm)',
+    cursor: isDisabled ? 'not-allowed' : 'pointer',
+    opacity: isDisabled ? 0.55 : 1,
+    transition:
+      'background var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out)',
+    whiteSpace: 'nowrap',
+    userSelect: 'none',
+    ...style,
+  } as const;
+
+  // For hover effect we have to inject a CSS variable that :hover can use.
+  const hoverStyle = { '--btn-hover-bg': VARIANT_HOVER_BG[variant] } as React.CSSProperties;
+
+  return (
+    <Comp
+      ref={ref as React.Ref<HTMLElement>}
+      type={asChild ? undefined : type ?? 'button'}
+      disabled={isDisabled}
+      aria-busy={loading === true ? 'true' : undefined}
+      className={cx('v8-btn', `v8-btn--${variant}`, `v8-btn--${size}`, className)}
+      style={{ ...computedStyle, ...hoverStyle }}
+      {...rest}
+    >
+      {loading === true ? <Loader2 size={14} aria-hidden="true" className="v8-btn__spinner" /> : leftIcon}
+      {children}
+      {rightIcon}
+    </Comp>
+  );
+});

package/bizar-dash/src/web/v8/ui/controls/ButtonGroup.tsx

@@ -0,0 +1,32 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { cx } from '../utils/cx.js';
+
+/**
+ * ButtonGroup — a horizontal cluster of buttons that share borders + radius.
+ *
+ * Renders a single bordered container with internal dividers so adjacent
+ * buttons look like one segmented control.
+ */
+export interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+  attached?: boolean;
+}
+
+export function ButtonGroup({ children, attached = true, className, style, ...rest }: ButtonGroupProps) {
+  return (
+    <div
+      role="group"
+      className={cx('v8-btn-group', attached && 'is-attached', className)}
+      style={{
+        display: 'inline-flex',
+        border: attached ? '1px solid var(--border)' : 'none',
+        borderRadius: 'var(--radius-sm)',
+        overflow: 'hidden',
+        ...style,
+      }}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+}