noecosystem-design 0.1.0

package/packages/ai-ui/src/index.ts

@@ -0,0 +1,8 @@
+export * from './activity-feed';
+export * from './agent-composer';
+export * from './agent-message';
+export * from './agent-plan';
+export * from './agent-workspace';
+export * from './approval-request';
+export * from './run-inspector';
+export * from './tool-call';

package/packages/ai-ui/src/run-inspector.tsx

@@ -0,0 +1,54 @@
+import type * as React from 'react';
+import { cn } from '@noe/ui/lib/cn';
+import { TechnicalValue } from '@noe/ui/bidi';
+
+export function RunInspector({
+  runId,
+  status,
+  latency,
+  tokenUsage,
+  labels,
+  children,
+  className,
+}: {
+  runId: string;
+  status: React.ReactNode;
+  latency: string;
+  tokenUsage: string;
+  labels: { run: React.ReactNode; latency: React.ReactNode; tokens: React.ReactNode };
+  children?: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <aside
+      className={cn(
+        'flex w-full flex-col gap-4 rounded-lg border border-border bg-surface-raised p-4',
+        className,
+      )}
+      data-slot="run-inspector"
+    >
+      <header className="flex items-start justify-between gap-3">
+        <div className="flex flex-col gap-1">
+          <small className="text-xs text-muted-foreground">{labels.run}</small>
+          <TechnicalValue>{runId}</TechnicalValue>
+        </div>
+        <span className="shrink-0 text-sm font-medium text-foreground">{status}</span>
+      </header>
+      <dl className="m-0 grid grid-cols-2 gap-3 border-t border-border pt-3">
+        <div className="flex flex-col gap-0.5">
+          <dt className="text-xs text-muted-foreground">{labels.latency}</dt>
+          <dd className="m-0">
+            <TechnicalValue>{latency}</TechnicalValue>
+          </dd>
+        </div>
+        <div className="flex flex-col gap-0.5">
+          <dt className="text-xs text-muted-foreground">{labels.tokens}</dt>
+          <dd className="m-0">
+            <TechnicalValue>{tokenUsage}</TechnicalValue>
+          </dd>
+        </div>
+      </dl>
+      {children}
+    </aside>
+  );
+}

package/packages/ai-ui/src/tool-call.tsx

@@ -0,0 +1,71 @@
+import type * as React from 'react';
+import { cn } from '@noe/ui/lib/cn';
+import { TechnicalValue } from '@noe/ui/bidi';
+
+export type ToolState =
+  | 'pending'
+  | 'approval-required'
+  | 'running'
+  | 'streaming'
+  | 'success'
+  | 'failure'
+  | 'retry'
+  | 'denied';
+
+const dotClassName: Record<ToolState, string> = {
+  pending: 'bg-muted-foreground/40',
+  'approval-required': 'bg-warning',
+  running: 'animate-pulse bg-accent',
+  streaming: 'animate-pulse bg-accent',
+  success: 'bg-success',
+  failure: 'bg-destructive',
+  retry: 'bg-warning',
+  denied: 'bg-destructive',
+};
+
+export function ToolCall({
+  title,
+  tool,
+  state,
+  stateLabel,
+  summary,
+  children,
+  className,
+}: {
+  title: React.ReactNode;
+  tool: string;
+  state: ToolState;
+  stateLabel: React.ReactNode;
+  summary: React.ReactNode;
+  children?: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <details
+      className={cn('rounded-lg border border-border bg-surface-raised', className)}
+      data-slot="tool-call"
+      data-state={state}
+      open={state === 'approval-required' || state === 'failure'}
+    >
+      <summary className="flex cursor-pointer list-none items-start gap-3 p-4 marker:content-none [&::-webkit-details-marker]:hidden">
+        <span
+          aria-hidden="true"
+          className={cn('mt-1.5 size-2 shrink-0 rounded-pill', dotClassName[state])}
+          data-slot="tool-call-status-dot"
+        />
+        <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+          <strong className="text-sm font-medium leading-snug text-foreground">{title}</strong>
+          <small className="flex flex-wrap items-center gap-1.5 text-xs text-muted-foreground">
+            <TechnicalValue>{tool}</TechnicalValue>
+            <span aria-hidden="true">·</span>
+            {stateLabel}
+          </small>
+        </div>
+      </summary>
+      <div className="flex flex-col gap-3 border-t border-border px-4 pb-4 pt-3">
+        <p className="m-0 text-sm leading-normal text-muted-foreground">{summary}</p>
+        {children}
+      </div>
+    </details>
+  );
+}

package/packages/data-ui/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@noe/data-ui",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "dependencies": {
+    "@noe/icons": "workspace:*",
+    "@noe/ui": "workspace:*"
+  },
+  "peerDependencies": {
+    "react": "^19.2.0"
+  },
+  "exports": {
+    ".": "./src/index.ts"
+  }
+}

package/packages/data-ui/src/activity-gauge.tsx

@@ -0,0 +1,38 @@
+import type * as React from 'react';
+import { cn } from '@noe/ui/lib/cn';
+export function ActivityGauge({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      className={cn('rounded-md border border-border bg-surface-raised p-4', className)}
+      data-slot="activity-gauge"
+      {...props}
+    >
+      <svg viewBox="0 0 100 100" width="100%" height="120" aria-label="Activity Gauge">
+        <circle
+          cx="50"
+          cy="50"
+          r="40"
+          fill="none"
+          stroke="var(--noe-color-accent)"
+          strokeWidth="8"
+          strokeDasharray="60 40"
+        />
+      </svg>
+      <table className="sr-only">
+        <caption>Activity Gauge</caption>
+        <thead>
+          <tr>
+            <th scope="col">Label</th>
+            <th scope="col">Value</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>A</td>
+            <td>40</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/packages/data-ui/src/chart-frame.tsx

@@ -0,0 +1,41 @@
+import type * as React from 'react';
+import { cn } from '@noe/ui/lib/cn';
+
+export function ChartFrame({
+  title,
+  description,
+  controls,
+  children,
+  className,
+}: {
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  controls?: React.ReactNode;
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <figure
+      className={cn(
+        'flex flex-col gap-4 rounded-lg border border-border bg-surface-raised p-5',
+        className,
+      )}
+      data-slot="chart-frame"
+    >
+      <figcaption className="flex flex-wrap items-start justify-between gap-3">
+        <div className="flex flex-col gap-1">
+          <h3 className="m-0 font-heading text-sm font-semibold leading-snug text-foreground">
+            {title}
+          </h3>
+          {description ? (
+            <p className="m-0 text-xs leading-normal text-muted-foreground">{description}</p>
+          ) : null}
+        </div>
+        {controls ? <div className="flex shrink-0 items-center gap-2">{controls}</div> : null}
+      </figcaption>
+      <div className="min-h-40 w-full" data-slot="chart-plot" dir="ltr">
+        {children}
+      </div>
+    </figure>
+  );
+}

package/packages/data-ui/src/chart.tsx

@@ -0,0 +1,131 @@
+
+import type * as React from 'react';
+import { cn } from '@noe/ui/lib/cn';
+
+export interface ChartProps extends React.ComponentProps<'div'> {
+  /** Accessible title for chart */
+  title: string;
+  /** Chart type — line or bar. Determines RTL-safe axis handling. */
+  type?: 'line' | 'bar';
+  /** Data points — values are tokenized, not raw colors */
+  data: readonly { label: string; value: number }[];
+  /** Optional description for screen readers; tabular fallback is rendered. */
+  description?: string;
+  /** Height in px or CSS — defaults to 160 */
+  height?: number | string;
+}
+
+/**
+ * Chart — minimal line/bar chart with tokenized colors, RTL-safe axes and tabular fallback.
+ * Uses semantic tokens (--noe-color-accent, --noe-color-border) and respects reduced-motion.
+ * Legend and axis labels use logical properties; non-color encoding via pattern (bar) vs line.
+ */
+export function Chart({
+  title,
+  type = 'line',
+  data,
+  description,
+  height = 160,
+  className,
+  ...props
+}: ChartProps) {
+  const max = Math.max(1, ...data.map((d) => d.value));
+  const isBar = type === 'bar';
+
+  return (
+    <div
+      role="img"
+      aria-label={title}
+      aria-describedby={description ? `${title}-desc` : undefined}
+      className={cn('flex w-full flex-col gap-3', className)}
+      data-slot="chart"
+      data-chart-type={type}
+      {...props}
+    >
+      <div className="overflow-x-auto">
+        <svg
+          viewBox={`0 0 ${data.length * 36} ${typeof height === 'number' ? height : 160}`}
+          width="100%"
+          height={height}
+          preserveAspectRatio="xMidYMid meet"
+          className="min-w-[16rem]"
+          aria-hidden="true"
+        >
+          {/* Grid */}
+          <g stroke="var(--noe-color-border)" strokeWidth="0.5" opacity={0.6}>
+            {[0, 1, 2, 3].map((i) => (
+              <line key={i} x1={0} x2={data.length * 36} y1={i * 40} y2={i * 40} />
+            ))}
+          </g>
+          {isBar
+            ? data.map((d, i) => {
+                const h = (d.value / max) * 100;
+                const x = i * 36 + 8;
+                return (
+                  <rect
+                    key={d.label}
+                    x={x}
+                    y={120 - h}
+                    width={20}
+                    height={h}
+                    rx={4}
+                    fill="var(--noe-color-accent)"
+                  />
+                );
+              })
+            : (() => {
+                const points = data
+                  .map((d, i) => {
+                    const x = i * 36 + 18;
+                    const y = 120 - (d.value / max) * 100;
+                    return `${x},${y}`;
+                  })
+                  .join(' ');
+                return (
+                  <polyline
+                    points={points}
+                    fill="none"
+                    stroke="var(--noe-color-accent)"
+                    strokeWidth={2}
+                    strokeLinejoin="round"
+                    strokeLinecap="round"
+                  />
+                );
+              })()}
+        </svg>
+      </div>
+      {description ? (
+        <p id={`${title}-desc`} className="sr-only">
+          {description}
+        </p>
+      ) : null}
+      {/* Tabular fallback for screen readers / non-visual */}
+      <table className="sr-only">
+        <caption>{title}</caption>
+        <thead>
+          <tr>
+            <th>Label</th>
+            <th>Value</th>
+          </tr>
+        </thead>
+        <tbody>
+          {data.map((d) => (
+            <tr key={d.label}>
+              <td>{d.label}</td>
+              <td>{d.value}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      {/* Legend — uses logical inline layout, RTL-safe */}
+      <div className="flex flex-wrap gap-2 text-xs text-muted-foreground" dir="auto">
+        {data.map((d) => (
+          <span key={d.label} className="inline-flex items-center gap-1.5">
+            <span aria-hidden className="size-2 rounded-pill bg-accent" />
+            <bdi>{d.label}</bdi>: {d.value}
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+}

package/packages/data-ui/src/dashboard-01.tsx

@@ -0,0 +1,39 @@
+import type * as React from 'react';
+
+import { Chart } from './chart';
+import { DashboardShell } from './dashboard-shell';
+import { type DataColumn, DataTable } from './data-table';
+import { MetricCard } from './metric-card';
+
+const cols: DataColumn<{ id: string; name: string; value: string }>[] = [
+  { key: 'name', header: 'Service' },
+  { key: 'value', header: 'Status', align: 'end' },
+];
+const rows = [
+  { id: '1', name: 'catalog-api', value: 'Healthy' },
+  { id: '2', name: 'agent-runner', value: 'Degraded' },
+];
+
+export function Dashboard01(props: React.ComponentProps<'div'>) {
+  return (
+    <DashboardShell
+      label="Dashboard 01 — overview"
+      metrics={[
+        <MetricCard key="m1" label="Active services" value="128" delta="+4" status="positive" />,
+        <MetricCard key="m2" label="Latency" value="84ms" delta="-6%" status="positive" />,
+      ]}
+      chart={
+        <Chart
+          title="Requests"
+          data={[
+            { label: 'Mon', value: 40 },
+            { label: 'Tue', value: 80 },
+            { label: 'Wed', value: 60 },
+          ]}
+        />
+      }
+      table={<DataTable columns={cols} rows={rows} caption="Services" empty="No services" />}
+      {...props}
+    />
+  );
+}

package/packages/data-ui/src/dashboard-02.tsx

@@ -0,0 +1,33 @@
+import type * as React from 'react';
+
+import { Chart } from './chart';
+import { DashboardShell } from './dashboard-shell';
+import { MetricCard } from './metric-card';
+
+export function Dashboard02(props: React.ComponentProps<'div'>) {
+  return (
+    <DashboardShell
+      label="Dashboard 02 — detailed"
+      filters={
+        <div className="text-xs text-muted-foreground">Filters: Last 7 days · All services</div>
+      }
+      metrics={[
+        <MetricCard key="m1" label="Errors" value="12" delta="+2" status="warning" />,
+        <MetricCard key="m2" label="Uptime" value="99.9%" delta="+0.1%" status="positive" />,
+        <MetricCard key="m3" label="Cost" value="$4,200" />,
+      ]}
+      chart={
+        <Chart
+          type="bar"
+          title="Errors by service"
+          data={[
+            { label: 'api', value: 12 },
+            { label: 'worker', value: 8 },
+            { label: 'web', value: 3 },
+          ]}
+        />
+      }
+      {...props}
+    />
+  );
+}

package/packages/data-ui/src/dashboard-shell.tsx

@@ -0,0 +1,56 @@
+
+import type * as React from 'react';
+import { cn } from '@noe/ui/lib/cn';
+
+export interface DashboardShellProps extends React.ComponentProps<'div'> {
+  label: string;
+  pageHeader?: React.ReactNode;
+  filters?: React.ReactNode;
+  metrics?: React.ReactNode;
+  chart?: React.ReactNode;
+  table?: React.ReactNode;
+  pagination?: React.ReactNode;
+}
+
+export function DashboardShell({
+  label,
+  pageHeader,
+  filters,
+  metrics,
+  chart,
+  table,
+  pagination,
+  className,
+  ...props
+}: DashboardShellProps) {
+  return (
+    <section
+      aria-label={label}
+      className={cn('flex min-w-0 flex-col gap-6', className)}
+      data-slot="dashboard-shell"
+      {...props}
+    >
+      {pageHeader ? <div data-slot="dashboard-shell-header">{pageHeader}</div> : null}
+      {filters ? <div data-slot="dashboard-shell-filters">{filters}</div> : null}
+      {metrics ? (
+        <div
+          className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4"
+          data-slot="dashboard-shell-metrics"
+        >
+          {metrics}
+        </div>
+      ) : null}
+      {chart ? (
+        <section aria-label="Chart" data-slot="dashboard-shell-chart">
+          {chart}
+        </section>
+      ) : null}
+      {table ? (
+        <section aria-label="Table" data-slot="dashboard-shell-table">
+          {table}
+        </section>
+      ) : null}
+      {pagination ? <div data-slot="dashboard-shell-pagination">{pagination}</div> : null}
+    </section>
+  );
+}

package/packages/data-ui/src/data-table.tsx

@@ -0,0 +1,99 @@
+import { useId } from 'react';
+import type * as React from 'react';
+import { TechnicalValue } from '@noe/ui/bidi';
+import { cn } from '@noe/ui/lib/cn';
+
+export type DataColumn<Row> = {
+  key: keyof Row & string;
+  header: React.ReactNode;
+  align?: 'start' | 'end';
+  technical?: boolean;
+  render?: (row: Row) => React.ReactNode;
+};
+
+export function DataTable<Row extends { id: string }>({
+  columns,
+  rows,
+  caption,
+  empty,
+  className,
+}: {
+  columns: DataColumn<Row>[];
+  rows: Row[];
+  caption: string;
+  empty: React.ReactNode;
+  className?: string;
+}) {
+  const captionId = useId();
+  if (!rows.length)
+    return (
+      <div
+        className={cn(
+          'flex min-h-32 items-center justify-center rounded-lg border border-dashed border-border bg-surface-sunken/30 p-6 text-center text-sm text-muted-foreground',
+          className,
+        )}
+        data-slot="data-table-empty"
+      >
+        {empty}
+      </div>
+    );
+
+  return (
+    // WCAG 2.1: keyboard-accessible scrollable container for overflow tables.
+    <section
+      aria-labelledby={captionId}
+      className={cn('overflow-x-auto rounded-lg border border-border', className)}
+      data-slot="data-table-scroll"
+      // biome-ignore lint/a11y/noNoninteractiveTabindex: scrollable region focus pattern
+      tabIndex={0}
+    >
+      <table className="w-full min-w-full border-collapse text-sm" data-slot="data-table">
+        <caption className="sr-only" id={captionId}>
+          {caption}
+        </caption>
+        <thead>
+          <tr className="border-b border-border bg-surface-sunken/60">
+            {columns.map((column) => (
+              <th
+                className={cn(
+                  'whitespace-nowrap px-4 py-2.5 text-xs font-medium text-muted-foreground',
+                  column.align === 'end' ? 'text-end' : 'text-start',
+                )}
+                data-align={column.align ?? 'start'}
+                key={column.key}
+                scope="col"
+              >
+                {column.header}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row) => {
+            const cells = columns.map((column) => {
+              const content = column.render ? column.render(row) : String(row[column.key] ?? '');
+              const value = column.technical ? <TechnicalValue>{content}</TechnicalValue> : content;
+              return (
+                <td
+                  className={cn(
+                    'whitespace-nowrap px-4 py-2.5 text-foreground',
+                    column.align === 'end' ? 'text-end' : 'text-start',
+                  )}
+                  data-align={column.align ?? 'start'}
+                  key={column.key}
+                >
+                  {value}
+                </td>
+              );
+            });
+            return (
+              <tr className="border-b border-border last:border-b-0 hover:bg-muted/50" key={row.id}>
+                {cells}
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </section>
+  );
+}

package/packages/data-ui/src/filter-bar.tsx

@@ -0,0 +1,28 @@
+
+import type * as React from 'react';
+import { cn } from '@noe/ui/lib/cn';
+
+export interface FilterBarProps extends React.ComponentProps<'div'> {
+  label: string;
+  search?: React.ReactNode;
+  filters?: React.ReactNode;
+  action?: React.ReactNode;
+}
+
+export function FilterBar({ label, search, filters, action, className, ...props }: FilterBarProps) {
+  return (
+    <search
+      aria-label={label}
+      className={cn(
+        'flex flex-wrap items-center gap-x-3 gap-y-2 rounded-md bg-surface-sunken/60 p-3',
+        className,
+      )}
+      data-slot="filter-bar"
+      {...props}
+    >
+      {search ? <div className="min-w-48 flex-1">{search}</div> : null}
+      {filters ? <div className="flex flex-wrap items-center gap-2">{filters}</div> : null}
+      {action ? <div className="ms-auto flex items-center gap-2">{action}</div> : null}
+    </search>
+  );
+}

package/packages/data-ui/src/index.ts

@@ -0,0 +1,12 @@
+export * from './activity-gauge';
+export * from './chart';
+export * from './chart-frame';
+export * from './dashboard-01';
+export * from './dashboard-02';
+export * from './dashboard-shell';
+export * from './data-table';
+export * from './filter-bar';
+export * from './metric-card';
+export * from './pagination';
+export * from './pie-chart';
+export * from './radar-chart';

package/packages/data-ui/src/metric-card.tsx

@@ -0,0 +1,43 @@
+import type * as React from 'react';
+import { cn } from '@noe/ui/lib/cn';
+
+const statusClassName = {
+  neutral: 'text-muted-foreground',
+  positive: 'text-success',
+  warning: 'text-warning-foreground',
+} as const;
+
+export function MetricCard({
+  label,
+  value,
+  delta,
+  status = 'neutral',
+  className,
+}: {
+  label: React.ReactNode;
+  value: React.ReactNode;
+  delta?: React.ReactNode;
+  status?: 'neutral' | 'positive' | 'warning';
+  className?: string;
+}) {
+  return (
+    <article
+      className={cn(
+        'flex flex-col gap-2 rounded-lg border border-border bg-surface-raised p-5',
+        className,
+      )}
+      data-slot="metric-card"
+      data-status={status}
+    >
+      <p className="m-0 text-sm leading-normal text-muted-foreground">{label}</p>
+      <strong className="font-heading text-2xl font-semibold leading-tight tracking-tight text-foreground">
+        {value}
+      </strong>
+      {delta ? (
+        <small className={cn('text-xs font-medium leading-normal', statusClassName[status])}>
+          {delta}
+        </small>
+      ) : null}
+    </article>
+  );
+}