noecosystem-design 0.1.0

package/apps/storybook/.storybook/preview.tsx

@@ -0,0 +1,87 @@
+import type { Preview } from '@storybook/react-vite';
+// tailwind.css is the compiled entry point: `@import "tailwindcss"` plus the
+// NOE @theme mapping and base layer. Importing tokens.css alone (as this file used
+// to) only defines the raw --noe-* custom properties and skips Tailwind entirely,
+// so no utility class used by any component actually resolves to real CSS.
+import '../../../packages/design-tokens/src/tailwind.css';
+import '../../web/styles.css';
+import { getLocaleMetadata } from '../../../packages/i18n/src/runtime.mjs';
+import { DirectionProvider } from '../../../packages/ui/src/direction';
+
+const preview: Preview = {
+  globalTypes: {
+    theme: {
+      description: 'Theme',
+      defaultValue: 'light',
+      toolbar: { icon: 'contrast', items: ['light', 'dark'], dynamicTitle: true },
+    },
+    locale: {
+      description: 'Locale',
+      defaultValue: 'en',
+      toolbar: {
+        icon: 'globe',
+        items: [
+          { value: 'en', title: 'English' },
+          { value: 'fa', title: 'Persian' },
+          { value: 'en-XA', title: 'Pseudo LTR' },
+          { value: 'ar-XB', title: 'Pseudo RTL' },
+        ],
+        dynamicTitle: true,
+      },
+    },
+    direction: {
+      description: 'Direction',
+      defaultValue: 'auto',
+      toolbar: {
+        icon: 'transfer',
+        items: [
+          { value: 'auto', title: 'Auto from locale' },
+          { value: 'ltr', title: 'LTR override' },
+          { value: 'rtl', title: 'RTL override' },
+        ],
+        dynamicTitle: true,
+      },
+    },
+  },
+  decorators: [
+    (Story, context) => {
+      const meta = getLocaleMetadata(context.globals.locale);
+      const direction =
+        context.globals.direction === 'auto' ? meta.direction : context.globals.direction;
+      document.documentElement.lang = meta.locale;
+      document.documentElement.dir = direction;
+      document.documentElement.dataset.theme = context.globals.theme;
+      return (
+        <DirectionProvider direction={direction}>
+          <div
+            data-theme={context.globals.theme}
+            data-locale={meta.locale}
+            style={{
+              minHeight: '100vh',
+              padding: '2rem',
+              background: 'var(--noe-color-background)',
+              color: 'var(--noe-color-foreground)',
+            }}
+          >
+            <Story />
+          </div>
+        </DirectionProvider>
+      );
+    },
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    a11y: { test: 'error' },
+    controls: { expanded: true },
+    viewport: {
+      options: {
+        mobile: { name: 'Mobile 390', styles: { width: '390px', height: '844px' } },
+        tablet: { name: 'Tablet 768', styles: { width: '768px', height: '1024px' } },
+        desktop: { name: 'Desktop 1440', styles: { width: '1440px', height: '900px' } },
+      },
+    },
+    backgrounds: { disable: true },
+  },
+};
+
+export default preview;

package/apps/storybook/.storybook/vitest.setup.ts

@@ -0,0 +1,26 @@
+import '@storybook/addon-vitest/internal/setup-file';
+import { afterEach, beforeAll, vi } from 'vitest';
+
+let consoleErrorSpy: ReturnType<typeof vi.spyOn> | null = null;
+
+beforeAll(() => {
+  // Spy on console.error to detect hydration mismatches, React key warnings, etc.
+  // Do not swallow — we re-log and fail the test in afterEach.
+  consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation((...args: unknown[]) => {
+    // Keep original output for debugging
+    // Use the original console.error via the spy's original implementation would cause recursion,
+    // so we directly call the underlying console (via vi's mock will not call original).
+    // We forward to the real console via process.stderr for visibility.
+    const text = args.map(String).join(' ');
+    process.stderr.write(`[console.error] ${text}\n`);
+  });
+});
+
+afterEach(() => {
+  if (consoleErrorSpy && consoleErrorSpy.mock.calls.length > 0) {
+    const calls = consoleErrorSpy.mock.calls.map((c) => c.map(String).join(' ')).join('\n');
+    consoleErrorSpy.mockClear();
+    throw new Error(`console.error detected — hydration/React/Axe failure:\n${calls}`);
+  }
+  consoleErrorSpy?.mockClear();
+});

package/apps/storybook/README.md

@@ -0,0 +1,5 @@
+# Storybook
+
+The configuration provides Docs, controls, accessibility enforcement, component-test integration, responsive viewports, theme switching, locale switching, and direction overrides.
+
+The source is complete, but this delivery does not claim a dependency-backed Storybook build because the execution environment could not access the npm registry. Generate and commit a lockfile in a connected environment before making the Storybook job required.

package/apps/storybook/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@noe/storybook",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "@noe/ai-ui": "workspace:*",
+    "@noe/data-ui": "workspace:*",
+    "@noe/design-tokens": "workspace:*",
+    "@noe/i18n": "workspace:*",
+    "@noe/ui": "workspace:*",
+    "@noe/workflow-ui": "workspace:*",
+    "react": "19.2.8",
+    "react-dom": "19.2.8"
+  },
+  "devDependencies": {
+    "@storybook/addon-a11y": "10.5.10",
+    "@storybook/addon-docs": "10.5.10",
+    "@storybook/addon-vitest": "10.5.10",
+    "@storybook/react-vite": "10.5.10",
+    "@tailwindcss/vite": "4.3.3",
+    "@vitest/browser-playwright": "4.1.11",
+    "storybook": "10.5.10",
+    "vite": "8.2.2",
+    "vitest": "4.1.11"
+  }
+}

package/apps/storybook/stories/AgentStates.stories.tsx

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useCallback } from 'react';
+import { ApprovalRequest } from '../../../packages/ai-ui/src/approval-request';
+import { ToolCall } from '../../../packages/ai-ui/src/tool-call';
+
+function AgentStates({
+  state,
+}: {
+  state:
+    | 'pending'
+    | 'approval-required'
+    | 'running'
+    | 'streaming'
+    | 'success'
+    | 'failure'
+    | 'retry'
+    | 'denied';
+}) {
+  const noDecision = useCallback(() => undefined, []);
+  return (
+    <div style={{ maxWidth: '42rem', display: 'grid', gap: '1rem' }}>
+      <ToolCall
+        title="Fetch service health"
+        tool="mcp://observability/service-health"
+        state={state}
+        stateLabel={state.replaceAll('-', ' ')}
+        summary="Read-only telemetry request for production services."
+      />
+      {state === 'approval-required' ? (
+        <ApprovalRequest
+          title="Approval required"
+          consequence="Publish the executive brief to the leadership workspace."
+          target="workspace://leadership/daily-brief"
+          targetLabel="Target"
+          parameters={[{ id: 'visibility', label: 'Visibility', value: 'leadership' }]}
+          labels={{ once: 'Allow once', session: 'Allow for session', deny: 'Deny' }}
+          onDecision={noDecision}
+        />
+      ) : null}
+    </div>
+  );
+}
+const meta = {
+  title: 'Agentic/State Matrix',
+  component: AgentStates,
+  tags: ['autodocs'],
+  argTypes: {
+    state: {
+      control: 'select',
+      options: [
+        'pending',
+        'approval-required',
+        'running',
+        'streaming',
+        'success',
+        'failure',
+        'retry',
+        'denied',
+      ],
+    },
+  },
+  args: { state: 'running' },
+} satisfies Meta<typeof AgentStates>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Pending: Story = { args: { state: 'pending' } };
+export const ApprovalRequired: Story = { args: { state: 'approval-required' } };
+export const Success: Story = { args: { state: 'success' } };
+export const FailureRTL: Story = {
+  args: { state: 'failure' },
+  globals: { locale: 'fa', direction: 'auto', theme: 'dark' },
+};

package/apps/storybook/stories/Bidi.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { AutoDirectionText, CodeBlock, TechnicalValue } from '../../../packages/ui/src';
+
+function BidiSpecimen() {
+  return (
+    <div style={{ display: 'grid', gap: '1rem', maxWidth: '42rem' }}>
+      <p>
+        <AutoDirectionText>
+          نتیجه برای api.noecosystem.com و شناسه 7f8d2b1c آماده است.
+        </AutoDirectionText>
+      </p>
+      <p>
+        Endpoint: <TechnicalValue>https://api.noecosystem.com/v1/runs/run_01JY9A6F</TechnicalValue>
+      </p>
+      <CodeBlock
+        language="bash"
+        code={'curl -H "Authorization: Bearer $TOKEN" \\\n  https://api.noecosystem.com/v1/runs'}
+      />
+    </div>
+  );
+}
+const meta = {
+  title: 'Foundations/Bidi',
+  component: BidiSpecimen,
+  tags: ['autodocs'],
+} satisfies Meta<typeof BidiSpecimen>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const MixedContent: Story = { globals: { locale: 'fa', direction: 'auto' } };
+export const ForcedLTR: Story = { globals: { locale: 'fa', direction: 'ltr' } };
+export const PseudoRTL: Story = { globals: { locale: 'ar-XB', direction: 'auto' } };

package/apps/storybook/stories/Button.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from '../../../packages/ui/src/button';
+
+const meta = {
+  title: 'Core/Button',
+  component: Button,
+  tags: ['autodocs'],
+  args: { children: 'Continue', variant: 'primary', size: 'md' },
+} satisfies Meta<typeof Button>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};
+export const Loading: Story = { args: { loading: true } };
+export const Disabled: Story = { args: { disabled: true } };
+export const Destructive: Story = { args: { variant: 'destructive', children: 'Delete node' } };
+export const LongPersian: Story = {
+  args: { children: 'ادامه فرایند و ثبت تغییرات برای بازبینی نهایی' },
+  globals: { locale: 'fa', direction: 'auto' },
+};

package/apps/storybook/stories/Surfaces.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+function SurfaceLink({ surface }: { surface: string }) {
+  const locale = document.documentElement.dataset.locale ?? 'en';
+  const theme = document.documentElement.dataset.theme ?? 'light';
+  return (
+    <iframe
+      title={`${surface} reference`}
+      src={`../../web/index.html?surface=${surface}&locale=${locale}&theme=${theme}`}
+      style={{ border: 0, width: '100%', height: '860px' }}
+    />
+  );
+}
+const meta = {
+  title: 'Reference/Surfaces',
+  component: SurfaceLink,
+  parameters: { layout: 'fullscreen' },
+  args: { surface: 'agent' },
+  argTypes: {
+    surface: { control: 'select', options: ['consumer', 'dashboard', 'agent', 'workflow'] },
+  },
+} satisfies Meta<typeof SurfaceLink>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Consumer: Story = { args: { surface: 'consumer' } };
+export const Dashboard: Story = { args: { surface: 'dashboard' } };
+export const AgentWorkspace: Story = { args: { surface: 'agent' } };
+export const WorkflowBuilder: Story = { args: { surface: 'workflow' } };

package/apps/storybook/stories/catalog/about-page.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { AboutPage } from '../../../../packages/ui/src/about-page';
+
+const meta = {
+  title: 'Catalog/Marketing / Pages/About Page',
+  component: AboutPage,
+  tags: ['autodocs'],
+} satisfies Meta<typeof AboutPage>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};
+export const RTL: Story = {
+  render: () => (
+    <div dir="rtl">
+      <AboutPage />
+    </div>
+  ),
+};

package/apps/storybook/stories/catalog/activity-feed.stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { ActivityFeed } from '../../../../packages/ai-ui/src/activity-feed';
+
+const items = [
+  {
+    id: '1',
+    label: 'Run completed for review-agent',
+    meta: 'run_9f21ac',
+    timestamp: '12:04',
+    status: 'positive',
+  },
+  {
+    id: '2',
+    label: 'Tool call awaiting approval',
+    meta: 'mcp://db/delete-rows',
+    timestamp: '12:02',
+    status: 'warning',
+  },
+  {
+    id: '3',
+    label: 'Runner connection lost',
+    meta: 'us-east-1',
+    timestamp: '11:58',
+    status: 'error',
+  },
+  {
+    id: '4',
+    label: 'Workspace created',
+    timestamp: '09:30',
+  },
+] as const;
+
+function ActivityFeedDemo() {
+  return (
+    <div style={{ maxWidth: '24rem' }}>
+      <ActivityFeed items={items} label="Workspace activity" />
+    </div>
+  );
+}
+
+const meta = {
+  title: 'Catalog/Patterns/Application/Activity Feed',
+  component: ActivityFeedDemo,
+  tags: ['autodocs'],
+} satisfies Meta<typeof ActivityFeedDemo>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/apps/storybook/stories/catalog/activity-gauge.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ActivityGauge } from '../../../../packages/data-ui/src/activity-gauge';
+
+const meta = {
+  title: 'Catalog/Data / Visualization/Activity Gauge',
+  component: ActivityGauge,
+  tags: ['autodocs'],
+} satisfies Meta<typeof ActivityGauge>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};
+export const RTL: Story = {
+  render: () => (
+    <div dir="rtl">
+      <ActivityGauge />
+    </div>
+  ),
+};

package/apps/storybook/stories/catalog/agent-composer.stories.tsx

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+
+import { AgentComposer } from '../../../../packages/ai-ui/src/agent-composer';
+
+function AgentComposerDemo() {
+  const [value, setValue] = useState('');
+  return (
+    <div style={{ maxWidth: '32rem' }}>
+      <AgentComposer
+        value={value}
+        onChange={setValue}
+        onSubmit={() => setValue('')}
+        placeholder="Ask the agent to make a change…"
+        submitLabel="Send"
+      />
+    </div>
+  );
+}
+
+const meta = {
+  title: 'Catalog/Agentic/Agent Composer',
+  component: AgentComposerDemo,
+  tags: ['autodocs'],
+} satisfies Meta<typeof AgentComposerDemo>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const Persian: Story = {
+  globals: { locale: 'fa', direction: 'auto' },
+  render: () => {
+    function Demo() {
+      const [value, setValue] = useState('لطفاً پرونده را بازبینی کن');
+      return (
+        <div style={{ maxWidth: '32rem' }}>
+          <AgentComposer
+            value={value}
+            onChange={setValue}
+            onSubmit={() => setValue('')}
+            placeholder="از عامل بخواهید تغییری اعمال کند…"
+            submitLabel="ارسال"
+          />
+        </div>
+      );
+    }
+    return <Demo />;
+  },
+};

package/apps/storybook/stories/catalog/agent-message.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { AgentMessage } from '../../../../packages/ai-ui/src/agent-message';
+
+const meta = {
+  title: 'Catalog/Agentic/Agent Message',
+  component: AgentMessage,
+  tags: ['autodocs'],
+  args: {
+    role: 'assistant',
+    name: 'NOa',
+    content: 'I reviewed the pull request and left three comments on packages/ui/src/dialog.tsx.',
+  },
+} satisfies Meta<typeof AgentMessage>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = { args: { model: 'noe-agent-1' } };
+export const UserMessage: Story = {
+  args: { role: 'user', name: 'Ali', content: 'Can you also check the RTL behavior?' },
+};
+export const SystemMessage: Story = {
+  args: {
+    role: 'system',
+    name: 'System',
+    content: 'The agent was granted read access to /packages.',
+  },
+};
+export const MixedDirectionContent: Story = {
+  name: 'Mixed Persian/English content',
+  args: {
+    role: 'assistant',
+    name: 'NOa',
+    model: 'noe-agent-1',
+    content: 'فایل packages/ui/src/dialog.tsx بررسی شد و PR #482 آماده است.',
+  },
+};

package/apps/storybook/stories/catalog/agent-plan.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { AgentPlan, type PlanStep } from '../../../../packages/ai-ui/src/agent-plan';
+
+const steps: PlanStep[] = [
+  { id: '1', label: 'Read failing test output', state: 'completed' },
+  { id: '2', label: 'Patch dialog.tsx portal direction', state: 'running' },
+  { id: '3', label: 'Re-run browser tests', state: 'queued' },
+  { id: '4', label: 'Update coss-adoption.json', state: 'queued' },
+];
+
+const stateLabels = {
+  queued: 'Queued',
+  running: 'Running',
+  completed: 'Completed',
+  failed: 'Failed',
+};
+
+const meta = {
+  title: 'Catalog/Agentic/Agent Plan',
+  component: AgentPlan,
+  tags: ['autodocs'],
+  args: { title: 'Fix RTL dialog portal', steps, stateLabels },
+} satisfies Meta<typeof AgentPlan>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const WithFailure: Story = {
+  args: {
+    title: 'Fix RTL dialog portal',
+    steps: [...steps.slice(0, 2), { id: '3', label: 'Re-run browser tests', state: 'failed' }],
+    stateLabels,
+  },
+};

package/apps/storybook/stories/catalog/agent-workspace.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { AgentWorkspace } from '../../../../packages/ai-ui/src/agent-workspace';
+import { RunInspector } from '../../../../packages/ai-ui/src/run-inspector';
+import { SidebarNavigation } from '../../../../packages/ui/src/sidebar-navigation';
+
+const navigation = (
+  <SidebarNavigation
+    label="Workspace"
+    sections={[
+      {
+        id: 'workspace',
+        items: [
+          { href: '#agents', label: 'Agents', current: true },
+          { href: '#runs', label: 'Runs', badge: '24' },
+          { href: '#mcp', label: 'MCP servers' },
+        ],
+      },
+    ]}
+  />
+);
+
+const inspector = (
+  <RunInspector
+    runId="run_9f21ac"
+    status="Running"
+    latency="842ms"
+    tokenUsage="12,480 / 128,000"
+    labels={{ run: 'Run', latency: 'Latency', tokens: 'Tokens' }}
+  />
+);
+
+function AgentWorkspaceDemo({ withInspector = true }: { withInspector?: boolean }) {
+  return (
+    <div style={{ height: '20rem' }}>
+      <AgentWorkspace
+        label="Agent workspace"
+        navigation={navigation}
+        inspector={withInspector ? inspector : undefined}
+      >
+        <p style={{ margin: 0, fontSize: '0.875rem' }}>
+          Conversation and generated artifacts render in this region.
+        </p>
+      </AgentWorkspace>
+    </div>
+  );
+}
+
+const meta = {
+  title: 'Catalog/Patterns/Pages/Agent Workspace',
+  component: AgentWorkspaceDemo,
+  tags: ['autodocs'],
+} satisfies Meta<typeof AgentWorkspaceDemo>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const WithoutInspector: Story = {
+  name: 'Progressive disclosure — inspector hidden',
+  args: { withInspector: false },
+};

package/apps/storybook/stories/catalog/alert.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import {
+  Alert,
+  AlertAction,
+  AlertDescription,
+  AlertTitle,
+} from '../../../../packages/ui/src/alert';
+import { Button } from '../../../../packages/ui/src/button';
+
+const meta = {
+  title: 'Catalog/Feedback/Alert',
+  component: Alert,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Alert>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function alertOf(variant: 'default' | 'info' | 'success' | 'warning' | 'error') {
+  return (
+    <Alert variant={variant} style={{ maxWidth: '28rem' }}>
+      <AlertTitle>{variant === 'error' ? 'Run failed' : 'Deployment update'}</AlertTitle>
+      <AlertDescription>
+        {variant === 'error'
+          ? 'The last run exited with a non-zero status. Review the trace before retrying.'
+          : 'The verification matrix completed for this pull request.'}
+      </AlertDescription>
+      <AlertAction>
+        <Button size="sm" variant="outline">
+          View details
+        </Button>
+      </AlertAction>
+    </Alert>
+  );
+}
+
+export const Default: Story = { render: () => alertOf('default') };
+export const Info: Story = { render: () => alertOf('info') };
+export const Success: Story = { render: () => alertOf('success') };
+export const Warning: Story = { render: () => alertOf('warning') };
+export const ErrorVariant: Story = { name: 'Error', render: () => alertOf('error') };

package/apps/storybook/stories/catalog/app-frame.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { AppFrame } from '../../../../packages/ui/src/app-frame';
+import { SidebarNavigation } from '../../../../packages/ui/src/sidebar-navigation';
+
+const navigation = (
+  <SidebarNavigation
+    label="Workspace"
+    sections={[
+      {
+        id: 'workspace',
+        items: [
+          { href: '#overview', label: 'Overview', current: true },
+          { href: '#runs', label: 'Runs', badge: '24' },
+          { href: '#mcp', label: 'MCP servers' },
+        ],
+      },
+    ]}
+  />
+);
+
+function AppFrameDemo() {
+  return (
+    <div style={{ height: '22rem' }}>
+      <AppFrame
+        header={<div className="bg-surface-raised px-4 py-3 text-sm font-medium">NOEcosystem</div>}
+        mobileNavigation={navigation}
+        navigation={navigation}
+      >
+        <p className="m-0 text-sm leading-normal text-muted-foreground">
+          Content region. Below the large breakpoint the sidebar becomes a stacked mobile navigation
+          region; the inspector column appears only on extra-large screens.
+        </p>
+      </AppFrame>
+    </div>
+  );
+}
+
+const meta = {
+  title: 'Catalog/Patterns/Pages/App Frame',
+  component: AppFrameDemo,
+  tags: ['autodocs'],
+} satisfies Meta<typeof AppFrameDemo>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};